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/components/ChatManager.tsx b/apps/canvas/front/src/components/ChatManager.tsx
new file mode 100644
index 0000000..d5db0f3
--- /dev/null
+++ b/apps/canvas/front/src/components/ChatManager.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { ChatBubble } from "./ChatBubble";
+import { useAgents } from "@/lib/state";
+
+// Approximate height of a collapsed bubble + gap for cascading
+const BUBBLE_CASCADE_OFFSET = 70; // e.g., 50px height + 10px padding + 10px gap
+const INITIAL_BOTTOM_OFFSET = 20;
+const INITIAL_RIGHT_OFFSET = 20;
+
+export function ChatManager(): React.ReactNode {
+ // TODO(gio): reconsider
+ return null;
+ const agents = useAgents();
+ if (agents.length === 0) {
+ return null;
+ }
+ return (
+ <>
+ {agents.map((agent, index) => {
+ const initialPosition = {
+ bottom: INITIAL_BOTTOM_OFFSET + index * BUBBLE_CASCADE_OFFSET,
+ right: INITIAL_RIGHT_OFFSET,
+ top: undefined, // Ensure top/left are not set if bottom/right are
+ left: undefined,
+ };
+ return (
+ <ChatBubble
+ key={agent.name}
+ agentName={agent.name}
+ agentUrl={agent.address}
+ initialPosition={initialPosition}
+ />
+ );
+ })}
+ </>
+ );
+}