Canvas: Check agent health
Change-Id: I429eecebde1d661513dfd94e27cdaa820bd49493
diff --git a/apps/canvas/front/src/Agent.tsx b/apps/canvas/front/src/Agent.tsx
index 9ed47d5..3718805 100644
--- a/apps/canvas/front/src/Agent.tsx
+++ b/apps/canvas/front/src/Agent.tsx
@@ -1,6 +1,36 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { AgentAccess } from "config";
+import { useProjectId } from "./lib/state";
export function Agent({ agent }: { agent: AgentAccess }): React.ReactNode {
+ return <AgentIframe agent={agent} />;
+}
+
+export function AgentIframe({ agent }: { agent: AgentAccess }): React.ReactNode {
+ const projectId = useProjectId();
+ const [ok, setOk] = useState<boolean>(false);
+ useEffect(() => {
+ let timeout: NodeJS.Timeout | null = null;
+ const check = async () => {
+ const resp = await fetch(`/api/project/${projectId}/agent/${agent.agentName}/status`);
+ if (resp.ok) {
+ const status = (await resp.json()).status;
+ if (200 <= status && status < 300) {
+ setOk(true);
+ return;
+ }
+ }
+ timeout = setTimeout(check, 500);
+ };
+ check();
+ return () => {
+ if (timeout != null) {
+ clearTimeout(timeout);
+ }
+ };
+ }, [agent.agentName, agent.address, setOk, projectId]);
+ if (!ok) {
+ return <div>Agent {agent.agentName} is loading...</div>;
+ }
return <iframe key={agent.name} src={`${agent.address}?m`} title={agent.agentName} className="w-full h-full" />;
}
diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 5100576..5f80c95 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -11,6 +11,7 @@
import { useAgents } from "./lib/state";
import { Bot } from "lucide-react";
import { Preview } from "./components/preview";
+import { AgentIframe } from "./Agent";
export default function App() {
return (
@@ -67,7 +68,7 @@
</TabsContent>
{agents.map((a) => (
<TabsContent value={`agent-${a.agentName}`} className="!mt-0 flex-1 min-h-0">
- <iframe key={a.name} src={a.address} title={a.agentName} className="w-full h-full" />
+ <AgentIframe agent={a} />
</TabsContent>
))}
</Tabs>
diff --git a/apps/canvas/front/src/components/ChatBubble.tsx b/apps/canvas/front/src/components/ChatBubble.tsx
index 74e3605..24d8432 100644
--- a/apps/canvas/front/src/components/ChatBubble.tsx
+++ b/apps/canvas/front/src/components/ChatBubble.tsx
@@ -177,6 +177,7 @@
</div>
{isExpanded && (
<div className={iframeContainerClasses}>
+ // TODO(gio): use AgentIframe
<iframe
src={agentUrl}
title={agentName}