Implement thread management in Chat component and enhance CombinedAgentSelector

- Added thread management functionality in the Chat component, allowing users to load and select threads based on the selected agent.
- Introduced a new ThreadsService for fetching thread data, improving modularity and separation of concerns.
- Enhanced the CombinedAgentSelector component to include thread selection, enabling users to create and switch between threads seamlessly.
- Updated state management to handle loading threads and resetting thread selection when changing agents, improving user experience.
- Refactored related TypeScript types and API interactions to ensure consistency and reliability in thread handling.

These changes significantly enhance the chat experience by integrating thread management, providing users with a more dynamic and organized interface.

Author: mjschock

src/api/stores.py

@@ -241,7 +241,11 @@ def _deserialize_thread_item(self, item_data: dict[str, Any]) -> ThreadItem:
             )
         elif item_type == "chatkit.assistant_message":
             content = [
-                AssistantMessageContent(type="output_text", text=part["text"])
+                AssistantMessageContent(
+                    type="output_text",
+                    text=part.get("text", ""),
+                    annotations=part.get("annotations", []) if isinstance(part.get("annotations"), list) else []
+                )
                 for part in item_data.get("content", [])
                 if part.get("type") == "output_text"
             ]

src/components/CombinedAgentSelector.tsx

@@ -8,27 +8,43 @@ import {
 } from '@ionic/react';
 import type { BackendType } from '@/services/backendConfig';
 import type { AgentRecord } from '@/types/agent';
+import type { ThreadMetadata } from '@/types/thread';
 
 interface CombinedAgentSelectorProps {
   backendType: BackendType;
   selectedAgent: AgentRecord | null;
   agents: AgentRecord[];
+  threads: ThreadMetadata[];
+  selectedThreadId: string | null;
+  loadingThreads?: boolean;
   onBackendChange: (backend: BackendType) => void;
   onAgentChange: (agentId: string) => void;
+  onThreadChange: (threadId: string | null) => void;
+  onCreateNewThread: () => void;
 }
 
 const CombinedAgentSelector = ({
   backendType,
   selectedAgent,
   agents,
+  threads,
+  selectedThreadId,
+  loadingThreads = false,
   onBackendChange,
   onAgentChange,
+  onThreadChange,
+  onCreateNewThread,
 }: CombinedAgentSelectorProps) => {
   const [backendPopoverOpen, setBackendPopoverOpen] = useState(false);
   const [agentPopoverOpen, setAgentPopoverOpen] = useState(false);
+  const [threadPopoverOpen, setThreadPopoverOpen] = useState(false);
 
   const backendDisplay = backendType === 'typescript' ? 'TypeScript' : 'Python';
   const agentDisplay = selectedAgent?.name || 'Select Agent';
+  const selectedThread = threads.find((t) => t.id === selectedThreadId);
+  const threadDisplay = selectedThread
+    ? selectedThread.title || `Thread ${selectedThread.id.slice(0, 8)}`
+    : 'New Thread';
 
   const handleBackendClick = (backend: BackendType) => {
     onBackendChange(backend);
@@ -40,6 +56,16 @@ const CombinedAgentSelector = ({
     setAgentPopoverOpen(false);
   };
 
+  const handleThreadClick = (threadId: string | null) => {
+    onThreadChange(threadId);
+    setThreadPopoverOpen(false);
+  };
+
+  const handleCreateNewThread = () => {
+    onCreateNewThread();
+    setThreadPopoverOpen(false);
+  };
+
   return (
     <>
       <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
@@ -60,6 +86,16 @@ const CombinedAgentSelector = ({
         >
           {agentDisplay}
         </IonButton>
+        <span>/</span>
+        <IonButton
+          fill="clear"
+          onClick={() => setThreadPopoverOpen(true)}
+          id="thread-selector-button"
+          style={{ '--padding-start': '4px', '--padding-end': '4px' }}
+          disabled={!selectedAgent}
+        >
+          {threadDisplay}
+        </IonButton>
       </div>
 
       <IonPopover
@@ -112,6 +148,46 @@ const CombinedAgentSelector = ({
           ))}
         </IonList>
       </IonPopover>
+
+      <IonPopover
+        isOpen={threadPopoverOpen}
+        onDidDismiss={() => setThreadPopoverOpen(false)}
+        trigger="thread-selector-button"
+        showBackdrop={false}
+      >
+        <IonList>
+          <IonItem button onClick={handleCreateNewThread}>
+            <IonLabel>
+              <span style={{ fontWeight: selectedThreadId === null ? 'bold' : 'normal' }}>
+                + New Thread
+              </span>
+            </IonLabel>
+          </IonItem>
+          {loadingThreads ? (
+            <IonItem>
+              <IonLabel>Loading threads...</IonLabel>
+            </IonItem>
+          ) : (
+            threads.map((thread) => (
+              <IonItem
+                key={thread.id}
+                button
+                onClick={() => handleThreadClick(thread.id)}
+              >
+                <IonLabel>
+                  <span
+                    style={{
+                      fontWeight: selectedThreadId === thread.id ? 'bold' : 'normal',
+                    }}
+                  >
+                    {thread.title || `Thread ${thread.id.slice(0, 8)}`}
+                  </span>
+                </IonLabel>
+              </IonItem>
+            ))
+          )}
+        </IonList>
+      </IonPopover>
     </>
   );
 };

src/pages/Chat.tsx

@@ -3,8 +3,10 @@ import { toast } from 'sonner';
 import { supabase } from '@/integrations/supabase/client';
 import { ChatKit, useChatKit } from '@openai/chatkit-react';
 import { agentsService } from '@/services/agentsService';
+import { threadsService } from '@/services/threadsService';
 import { getBackendType, setBackendType, getBackendBaseUrl, getChatKitUrl, type BackendType } from '@/services/backendConfig';
 import type { AgentRecord } from '@/types/agent';
+import type { ThreadMetadata } from '@/types/thread';
 import {
   IonPage,
   IonHeader,
@@ -25,6 +27,8 @@ const Chat = () => {
   const [selectedAgent, setSelectedAgent] = useState<AgentRecord | null>(null);
   const [loadingAgents, setLoadingAgents] = useState(false);
   const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
+  const [threads, setThreads] = useState<ThreadMetadata[]>([]);
+  const [loadingThreads, setLoadingThreads] = useState(false);
 
   // Settings state
   const [darkMode, setDarkMode] = useState(true);
@@ -74,29 +78,36 @@ const Chat = () => {
     }
   };
 
-  // Load the most recent thread for the current user
-  const loadMostRecentThread = useCallback(async () => {
-    try {
-      const authHeaders = await getAuthHeaders();
-      const response = await fetch(`${getServerBaseUrl()}/threads/list?limit=1&order=desc`, {
-        method: 'GET',
-        headers: authHeaders,
-      });
+  // Load threads for the current agent
+  const loadThreads = useCallback(async (skipAutoSelect: boolean = false) => {
+    if (!selectedAgent) {
+      setThreads([]);
+      return;
+    }
 
-      if (response.ok) {
-        const data = await response.json();
-        if (data.data && data.data.length > 0) {
-          const mostRecentThread = data.data[0];
-          console.log('Loading most recent thread:', mostRecentThread.id);
-          setCurrentThreadId(mostRecentThread.id);
-          return mostRecentThread.id;
-        }
+    try {
+      setLoadingThreads(true);
+      const response = await threadsService.listThreads(backendType, 50);
+      setThreads(response.data);
+      
+      // Auto-select the most recent thread if available and no thread is selected
+      // Skip auto-selection if explicitly requested (e.g., when creating a new thread)
+      if (!skipAutoSelect) {
+        setCurrentThreadId((prevThreadId) => {
+          if (response.data.length > 0 && !prevThreadId) {
+            return response.data[0].id;
+          }
+          return prevThreadId;
+        });
       }
     } catch (error) {
-      console.error('Error loading most recent thread:', error);
+      console.error('Error loading threads:', error);
+      toast.error('Failed to load threads');
+      setThreads([]);
+    } finally {
+      setLoadingThreads(false);
     }
-    return null;
-  }, [backendType]);
+  }, [selectedAgent, backendType]);
 
   // Check for existing session or sign in anonymously on component mount
   useEffect(() => {
@@ -112,8 +123,6 @@ const Chat = () => {
           // We have a valid session, use it
           setIsAuthenticated(true);
           await loadAgents();
-          // Load the most recent thread to continue the conversation
-          await loadMostRecentThread();
         } else {
           // No valid session, sign in anonymously
           const { data, error } = await supabase.auth.signInAnonymously();
@@ -123,8 +132,6 @@ const Chat = () => {
           } else {
             setIsAuthenticated(true);
             await loadAgents();
-            // Load the most recent thread to continue the conversation
-            await loadMostRecentThread();
           }
         }
       } catch (error) {
@@ -151,14 +158,20 @@ const Chat = () => {
     return () => {
       subscription.unsubscribe();
     };
-  }, [loadAgents, loadMostRecentThread]);
+  }, [loadAgents]);
 
-  // Load agent details when selected agent changes
+  // Load agent details and threads when selected agent changes
   useEffect(() => {
     if (selectedAgent?.id) {
       loadAgentDetails(selectedAgent.id);
+      // Reset thread selection when agent changes
+      setCurrentThreadId(null);
+      loadThreads();
+    } else {
+      setThreads([]);
+      setCurrentThreadId(null);
     }
-  }, [selectedAgent?.id]);
+  }, [selectedAgent?.id, loadThreads]);
 
   // Handle backend type change
   const handleBackendChange = (newBackendType: BackendType) => {
@@ -195,15 +208,31 @@ const Chat = () => {
     const agent = agents.find((a) => a.id === agentId);
     if (agent) {
       setSelectedAgent(agent);
+      // Reset thread when switching agents
+      setCurrentThreadId(null);
     }
   };
 
   // ChatKit configuration - use a generic agents endpoint and route dynamically
   const chatKitUrl = getChatKitUrl(backendType);
 
-  const { control } = useChatKit({
+  const chatKitHook = useChatKit({
     onThreadChange: ({ threadId }) => {
-      setCurrentThreadId(threadId);
+      // Update thread ID when ChatKit changes it (e.g., when a new message creates a thread)
+      setCurrentThreadId((prevThreadId) => {
+        // Only update if threadId actually changed (avoid infinite loops)
+        if (threadId !== prevThreadId) {
+          // Reload threads when a new thread is created, but don't auto-select
+          // since we're already on the new thread
+          if (threadId) {
+            setTimeout(() => {
+              loadThreads(true); // Skip auto-selection since we're already on this thread
+            }, 500);
+          }
+          return threadId;
+        }
+        return prevThreadId;
+      });
     },
     onClientTool: async (invocation) => {
       if (invocation.name === "switch_theme") {
@@ -268,25 +297,11 @@ const Chat = () => {
       placeholder: `Message your ${selectedAgent?.name} AI agent...`,
       // tools: [{ id: "rate", label: "Rate", icon: "star", pinned: true }],
     },
+    history: {
+      enabled: false, // Disable built-in history management
+    },
     header: {
-      leftAction: {
-        icon: 'sidebar-left',
-        onClick: async () => {
-          // Open the left settings menu
-          if (leftMenuRef.current) {
-            await leftMenuRef.current.open();
-          }
-        },
-      },
-      // rightAction: {
-      //   icon: 'sidebar-right',
-      //   onClick: async () => {
-      //     // Open the right menu
-      //     if (rightMenuRef.current) {
-      //       await rightMenuRef.current.open();
-      //     }
-      //   },
-      // },
+      enabled: false, // Disable built-in header to use our custom one
     },
     startScreen: {
       // greeting: selectedAgent ? `Welcome to Timestep AI! You're chatting with ${selectedAgent.name}` : "Welcome to Timestep AI!",
@@ -308,6 +323,35 @@ const Chat = () => {
     },
   });
 
+  // Extract control and setThreadId from the hook
+  const { control, setThreadId } = chatKitHook;
+
+  // Handle thread switching
+  const handleThreadChange = (threadId: string | null) => {
+    // Just update state - the useEffect will handle calling setThreadId
+    setCurrentThreadId(threadId);
+  };
+
+  // Handle creating a new thread
+  const handleCreateNewThread = () => {
+    // Just update state - the useEffect will handle calling setThreadId
+    setCurrentThreadId(null);
+    // Reload threads to get the new one when it's created, but skip auto-selection
+    // so we don't automatically switch away from the new thread
+    setTimeout(() => {
+      loadThreads(true); // Skip auto-selection
+    }, 1000);
+  };
+
+  // Set initial thread when component mounts or thread changes
+  // Only call setThreadId when we have a valid thread ID (not null) or when explicitly setting to null for new thread
+  useEffect(() => {
+    if (setThreadId && currentThreadId !== undefined && selectedAgent) {
+      // Only set thread ID if we have a valid thread ID or explicitly want to create a new thread
+      setThreadId(currentThreadId);
+    }
+  }, [setThreadId, currentThreadId, selectedAgent]);
+
   if (!isAuthenticated || loadingAgents) {
     return (
       <IonPage>
@@ -368,8 +412,13 @@ const Chat = () => {
                 backendType={backendType}
                 selectedAgent={selectedAgent}
                 agents={agents}
+                threads={threads}
+                selectedThreadId={currentThreadId}
+                loadingThreads={loadingThreads}
                 onBackendChange={handleBackendChange}
                 onAgentChange={handleAgentChange}
+                onThreadChange={handleThreadChange}
+                onCreateNewThread={handleCreateNewThread}
               />
             </IonButtons>
             <IonTitle>Timestep AI</IonTitle>