feat: Orchestrator manager in client-example

clients/example-ui/package.json

@@ -28,7 +28,8 @@
         "react-dom": "^18.3.1",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
-        "three": "^0.172.0"
+        "three": "^0.172.0",
+        "zustand": "^4.5.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.17.0",

clients/example-ui/src/components/app-sidebar.tsx

@@ -3,17 +3,16 @@ import { Bot, MessageSquare, History, Bookmark, Settings } from "lucide-react";
 import { NavMain } from "@/components/nav-main";
 import { NavProjects } from "@/components/nav-projects";
 import { NavUser } from "@/components/nav-user";
-import { TeamSwitcher } from "@/components/team-switcher";
 import { useChatHistories } from "@/hooks/use-chat-histories";
+import { useNavigate } from "@tanstack/react-router";
+import { useAppStore } from "@/store/use-app-store";
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
     SidebarHeader,
     SidebarRail,
 } from "@/components/ui/sidebar";
-import { ModeToggle } from "./mode-toggle";
-import { Link } from "@tanstack/react-router";
 
 // This is sample data.
 const data = {
@@ -38,7 +37,7 @@ const data = {
             items: [
                 {
                     title: "My Agents",
-                    url: "#",
+                    url: "/my-agents",
                 },
                 {
                     title: "Create Agent",
@@ -80,6 +79,8 @@ const data = {
 // Create a new ChatHistory component
 function ChatHistoryList() {
     const { chatItems, loading, error } = useChatHistories();
+    const navigate = useNavigate();
+    const { setCurrentOrchestratorId } = useAppStore();
 
     if (loading) {
         return <div className="px-4 py-2 text-sm">Loading histories...</div>;
@@ -89,24 +90,30 @@ function ChatHistoryList() {
         return <div className="px-4 py-2 text-sm text-red-500">{error}</div>;
     }
 
-    console.log(chatItems);
+    const handleChatSelect = (chat: any) => {
+        console.log('Selected chat:', chat);
+        setCurrentOrchestratorId(chat.orchestratorId);
+        navigate({
+            to: '/chats/$chatId',
+            params: { chatId: chat._id }
+        });
+    };
 
     return (
         <div className="space-y-1">
             {chatItems.map((chat) => (
-                <Link to={"/chats/$chatId"} params={{ chatId: chat._id }}>
-                    <button
-                        key={chat._id}
-                        className="w-full px-4 py-2 text-left text-sm hover:bg-accent/50 rounded-lg"
-                    >
-                        <div className="font-medium truncate">{chat.title}</div>
-                        {chat.lastMessage && (
-                            <div className="text-xs text-muted-foreground truncate">
-                                {chat.lastMessage}
-                            </div>
-                        )}
-                    </button>
-                </Link>
+                <div
+                    key={chat._id}
+                    onClick={() => handleChatSelect(chat)}
+                    className="w-full px-4 py-2 text-left text-sm hover:bg-accent/50 rounded-lg cursor-pointer"
+                >
+                    <div className="font-medium truncate">{chat.title}</div>
+                    {chat.lastMessage && (
+                        <div className="text-xs text-muted-foreground truncate">
+                            {chat.lastMessage}
+                        </div>
+                    )}
+                </div>
             ))}
         </div>
     );

clients/example-ui/src/components/chat-list.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Link } from '@tanstack/react-router';
+import { useChatHistories } from '@/hooks/use-chat-histories';
+import { useAppStore } from '@/store/use-app-store';
+
+export default function ChatList() {
+    const { currentOrchestratorId, setCurrentOrchestratorId, currentChatId } = useAppStore();
+    const { chatItems, loading, error } = useChatHistories();
+    const filteredChats = chatItems.filter(
+        chat => chat.orchestratorId === currentOrchestratorId
+    );
+
+    const handleChatSelect = (chatId: string) => {
+        const chat = filteredChats.find(c => c._id === chatId);
+        if (chat) {
+            setCurrentOrchestratorId(chat.orchestratorId);
+            console.log('🎯 Selecting chat:', chatId, 'with orchestrator:', chat.orchestratorId);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center p-4">
+                Loading chats...
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex items-center justify-center p-4 text-destructive">
+                Error: {error}
+            </div>
+        );
+    }
+
+    if (!currentOrchestratorId) {
+        return (
+            <div className="flex items-center justify-center p-4 text-muted-foreground">
+                Please select an orchestrator first
+            </div>
+        );
+    }
+
+    if (filteredChats.length === 0) {
+        return (
+            <div className="flex items-center justify-center p-4 text-muted-foreground">
+                No chats found for this orchestrator
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-4 p-4">
+            <div className="grid gap-4">
+                {filteredChats.map((chat) => (
+                    <Link
+                        key={chat._id}
+                        to="/chats/$chatId"
+                        params={{ 
+                            chatId: chat._id 
+                        }}
+                        onClick={
+                          () => handleChatSelect(chat._id)
+                        }
+                        className={`p-4 rounded-lg border hover:border-primary transition-colors
+                            ${chat._id === currentChatId ? 'bg-primary/10 border-primary' : ''}`}
+                    >
+                        <h3 className="font-medium">{chat.title}</h3>
+                        {chat.lastMessage && (
+                            <p className="text-sm text-muted-foreground mt-1 truncate">
+                                {chat.lastMessage}
+                            </p>
+                        )}
+                        <p className="text-xs text-muted-foreground mt-2">
+                            {new Date(chat.updatedAt).toLocaleString()}
+                        </p>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}