Canvas: Render AI agents in tabs
Implements AI Agent chat bubble, but is disabled for now.
Change-Id: If915691a22f376f347b76a5d24333dbe76492ca9
diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 794b433..a9fd3a6 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -8,12 +8,16 @@
import { ProjectSelect } from "./ProjectSelect";
import { Logs } from "./Monitoring";
import { Overview } from "./Overview";
+import { ChatManager } from "./components/ChatManager";
+import { useAgents } from "./lib/state";
+import { Bot } from "lucide-react";
export default function App() {
return (
<ReactFlowProvider>
<div className="h-screen flex flex-col p-1">
<AppImpl />
+ <ChatManager />
<Toaster />
</div>
</ReactFlowProvider>
@@ -21,6 +25,7 @@
}
function AppImpl() {
+ const agents = useAgents();
return (
<Tabs defaultValue="overview" className="flex-1 flex flex-col min-h-0">
<div className="flex justify-between border-b">
@@ -30,6 +35,18 @@
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
<TabsTrigger value="config">Config</TabsTrigger>
<TabsTrigger value="integrations">Integrations</TabsTrigger>
+ {agents.map((a) => {
+ return (
+ <TabsTrigger
+ key={a.agentName}
+ value={`agent-${a.agentName}`}
+ className="flex flex-row items-center gap-1"
+ >
+ <Bot className="w-4 h-4" />
+ {a.agentName}
+ </TabsTrigger>
+ );
+ })}
</TabsList>
<ProjectSelect className="w-fit min-w-[150px]" />
</div>
@@ -48,6 +65,11 @@
<TabsContent value="monitoring" className="!mt-0 flex-1 min-h-0">
<Logs />
</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" />
+ </TabsContent>
+ ))}
</Tabs>
);
}