theo-agent-dashboard

ChatView.tsx (15435B)

---

 import { useEffect, useRef, useCallback, useState } from "react";
 import { useChatStore, type Message, type AttachmentInfo } from "../../store/chat";
 import { useSessionStore } from "../../store/session";
 import { uploadAttachment, type AttachmentResponse, api } from "../../lib/api";
 import { WsClient, type WsMessage } from "../../lib/ws";
 import { MessageList } from "../Chat/MessageList";
 import { Composer } from "../Composer/Composer";
 import { ModelPicker, type Model } from "../Composer/ModelPicker";
 import { BranchIndicator, type Branch } from "../BranchIndicator/BranchIndicator";
 import { migrateDraft } from "../../hooks/useDraft";
 
 type ConnectionState = "connecting" | "connected" | "error";
 
 const _ATTACHMENT_PATH_RE =
   /(?:^|\n)(?:\/|\.)?[^\n]*\/attachments\/[^\n]*\.(?:png|jpg|jpeg|gif|webp|svg|bmp|pdf|txt|docx?|xlsx?|csv|json|md)(?:\n|$)/gi;
 
 function stripAttachmentPaths(content: string): string {
   return content.replace(_ATTACHMENT_PATH_RE, "").trim();
 }
 
 function matchAttachmentsToMessages(
   messages: Message[],
   attachments: AttachmentInfo[],
 ): void {
   // Match attachments to user messages by timestamp proximity (±10s).
   // Each attachment is claimed by at most one message (first-come-first-served).
   const claimed = new Set<string>();
   const userMessages = messages.filter((m) => m.role === "user");
   for (const att of attachments) {
     for (const msg of userMessages) {
       if (claimed.has(att.id)) break;
       const diff = Math.abs((msg.timestamp ?? 0) - att.created_at);
       if (diff <= 10) {
         if (!msg.attachments) msg.attachments = [];
         msg.attachments.push(att);
         claimed.add(att.id);
       }
     }
   }
 }
 
 export function ChatView() {
   const {
     messages, streaming, thinkingSessionId, addMessage, updateMessageContent,
     addToolCall, updateToolCall, setStreaming, setThinkingSessionId, setMessages,
   } = useChatStore();
   const { activeSessionId, createSession, listSessions, updateSession, incrementMessageCount, setActiveSession } = useSessionStore();
   const wsRef = useRef<WsClient | null>(null);
   const [connectionState, setConnectionState] = useState<ConnectionState>("connecting");
   const [, setUploadErrors] = useState<Map<string, string>>(new Map());
   const [branches, setBranches] = useState<Branch[]>([]);
   const [models, setModels] = useState<Model[]>([]);
   const [selectedModel, setSelectedModel] = useState<string | null>(null);
 
   const loadBranches = useCallback(async () => {
     if (!activeSessionId) return;
     try {
       const data = await api.get<{ branches: Branch[] }>(
         `/sessions/${activeSessionId}/branches`,
       );
       setBranches(data.branches ?? []);
     } catch {
       setBranches([]);
     }
   }, [activeSessionId]);
 
   const loadModels = useCallback(async () => {
     try {
       const data = await api.get<{ models: Model[] }>("/models");
       setModels(data.models ?? []);
     } catch {
       setModels([]);
     }
   }, []);
 
   // Load messages when the active session changes
   useEffect(() => {
     if (!activeSessionId) {
       setMessages([]);
       return;
     }
     setMessages([]);
     api
       .get<{ messages: Message[]; attachments: AttachmentInfo[] }>(
         `/sessions/${activeSessionId}/messages`,
       )
       .then((data) => {
         const msgs = data.messages ?? [];
         const atts = data.attachments ?? [];
         if (atts.length > 0) {
           matchAttachmentsToMessages(msgs, atts);
         }
         // Strip file paths from user message content when attachments are shown
         for (const msg of msgs) {
           if (msg.role === "user" && msg.attachments && msg.attachments.length > 0) {
             msg.content = stripAttachmentPaths(msg.content);
           }
         }
         setMessages(msgs);
       })
       .catch(() => {
         // ignore load errors
       });
   }, [activeSessionId, setMessages]);
 
   useEffect(() => {
     loadBranches();
     loadModels();
   }, [loadBranches, loadModels]);
 
   const handleFork = useCallback(async () => {
     if (!activeSessionId) return;
     try {
       const result = await api.post<{ id: string }>(
         `/sessions/${activeSessionId}/fork`,
       );
       await loadBranches();
       return result.id;
     } catch {
       return undefined;
     }
   }, [activeSessionId, loadBranches]);
 
   const handleForkMessage = useCallback(async () => {
     await handleFork();
   }, [handleFork]);
 
   const handleSwitchBranch = useCallback(async (branchSessionId: string) => {
     setMessages([]);
     try {
       const data = await api.get<{ messages: Message[] }>(
         `/sessions/${branchSessionId}/messages`,
       );
       setMessages(data.messages ?? []);
     } catch {
       // ignore load errors
     }
   }, [setMessages]);
 
   const handleWsMessage = useCallback(
     (msg: WsMessage) => {
       // Connection status handshake
       if (msg.type === "status" && (msg.data as Record<string, unknown>)?.connected) {
         setConnectionState("connected");
         return;
       }
 
       const data = msg.data as Record<string, unknown> | undefined;
       switch (msg.type) {
         case "run.started":
           setThinkingSessionId(null);
           setStreaming(true);
           break;
         case "message.started": {
           if (data && typeof data === "object" && "id" in data && "role" in data) {
             addMessage({
               id: data.id as string,
               role: (data.role as Message["role"]) ?? "assistant",
               content: "",
               toolCalls: [],
               timestamp: Date.now(),
               model: (data.model as string) ?? undefined,
             });
           }
           break;
         }
         case "assistant.delta": {
           if (data && typeof data === "object" && "id" in data && "content" in data) {
             const msgId = data.id as string;
             const content = data.content as string;
             const existing = useChatStore.getState().messages.find((m) => m.id === msgId);
             if (existing) {
               updateMessageContent(msgId, existing.content + content);
             }
           }
           break;
         }
         case "assistant.completed": {
           if (data && typeof data === "object" && "id" in data) {
             if ("content" in data) {
               updateMessageContent(data.id as string, data.content as string);
             }
           }
           break;
         }
         case "tool.started": {
           if (data && typeof data === "object" && "messageId" in data && "toolCall" in data) {
             const tc = data.toolCall as { id: string; name: string; args: string };
             addToolCall(data.messageId as string, {
               id: tc.id,
               name: tc.name,
               args: tc.args,
               result: null,
               status: "running",
             });
           }
           break;
         }
         case "tool.completed": {
           if (data && typeof data === "object" && "messageId" in data && "toolCallId" in data) {
             updateToolCall(data.messageId as string, data.toolCallId as string, {
               status: "complete",
               result: (data.result as string) ?? null,
             });
           }
           break;
         }
         case "tool.failed": {
           if (data && typeof data === "object" && "messageId" in data && "toolCallId" in data) {
             updateToolCall(data.messageId as string, data.toolCallId as string, {
               status: "error",
               result: (data.error as string) ?? "Tool failed",
             });
           }
           break;
         }
         case "tool.progress": {
           if (data && typeof data === "object" && "messageId" in data && "toolCallId" in data) {
             updateToolCall(data.messageId as string, data.toolCallId as string, {
               result: (data.progress as string) ?? null,
             });
           }
           break;
         }
         case "run.completed": {
           setStreaming(false);
           // Link tool results from turn messages included in run.completed.
           // The Hermes agent's tool.completed SSE event doesn't include the
           // result (preview=None in tool_executor callback), but run.completed
           // carries the full turn transcript with tool results.
           const turnMessages = data?.messages;
           if (Array.isArray(turnMessages)) {
             const store = useChatStore.getState();
             for (const turnMsg of turnMessages) {
               if (
                 turnMsg &&
                 typeof turnMsg === "object" &&
                 (turnMsg as Record<string, unknown>).role === "tool" &&
                 (turnMsg as Record<string, unknown>).tool_call_id
               ) {
                 const tcId = (turnMsg as Record<string, unknown>).tool_call_id as string;
                 const content = (turnMsg as Record<string, unknown>).content as string | undefined;
                 for (const chatMsg of store.messages) {
                   const tc = chatMsg.toolCalls.find((t) => t.id === tcId);
                   if (tc && !tc.result) {
                     updateToolCall(chatMsg.id, tc.id, {
                       result: content ?? null,
                     });
                   }
                 }
               }
             }
           }
           break;
         }
         default:
           break;
       }
     },
     [addMessage, updateMessageContent, addToolCall, updateToolCall, setStreaming, setThinkingSessionId],
   );
 
   useEffect(() => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const ws = new WsClient(`${protocol}//${window.location.host}/ws/chat`);
     ws.onMessage(handleWsMessage);
     ws.connect();
     wsRef.current = ws;
 
     // Set error state if connection fails (onclose without destroy)
     const origOnClose = ws["ws"]?.onclose;
     if (ws["ws"]) {
       ws["ws"]!.onclose = (ev) => {
         setConnectionState("error");
         origOnClose?.call(ws["ws"]!, ev);
       };
     }
 
     return () => {
       ws.destroy();
     };
   }, [handleWsMessage]);
 
   const handleUpload = useCallback(
     async (files: File[]): Promise<AttachmentResponse[]> => {
       // Ensure session exists before uploading so attachments are stored
       // with the correct session ID (not 'default').
       let sessionId = activeSessionId;
       if (!sessionId) {
         try {
           const session = await createSession();
           if (!session) return [];
           sessionId = session.id;
           setActiveSession(sessionId);
           migrateDraft(null, sessionId);
           await listSessions();
         } catch {
           return [];
         }
       }
       const results: AttachmentResponse[] = [];
       const errors = new Map<string, string>();
       for (const file of files) {
         try {
           const result: AttachmentResponse = await uploadAttachment(file, sessionId);
           results.push(result);
         } catch (err) {
           const message = err instanceof Error ? err.message : "Upload failed";
           errors.set(file.name, message);
         }
       }
       if (errors.size > 0) setUploadErrors(errors);
       return results;
     },
     [activeSessionId, createSession, listSessions, setActiveSession],
   );
 
   const handleSend = useCallback(
     async (text: string, uploads?: AttachmentResponse[]) => {
       // Read activeSessionId from store directly (not closure) to avoid
       // stale value when handleUpload just created a session.
       let sessionId = useSessionStore.getState().activeSessionId;
       if (!sessionId) {
         if (uploads && uploads.length > 0) {
           // Attachments were uploaded — session must exist already
           return;
         }
         try {
           const session = await createSession();
           if (!session) return;
           sessionId = session.id;
           setActiveSession(sessionId);
           migrateDraft(null, sessionId);
           await listSessions();
         } catch {
           return;
         }
       }
 
       const attachmentIds = uploads?.map((u) => u.id);
       const attachments: AttachmentInfo[] | undefined = uploads?.map((u) => ({
         id: u.id,
         filename: u.filename,
         content_type: u.content_type,
         created_at: u.created_at,
       }));
 
       addMessage({
         id: `user-${Date.now()}`,
         role: "user",
         content: text,
         toolCalls: [],
         timestamp: Date.now(),
         attachments,
       });
       wsRef.current?.send("chat", {
         session_id: sessionId,
         content: text,
         attachments: attachmentIds,
         model: selectedModel,
       });
       setThinkingSessionId(sessionId);
       incrementMessageCount(sessionId);
 
       // Auto-name session from first message
       const sessions = useSessionStore.getState().sessions;
       const currentSession = sessions?.find(s => s.id === sessionId);
       if (currentSession && !currentSession.name) {
         const title = text.length > 50 ? text.slice(0, 50) + "…" : text;
         updateSession(sessionId, { name: title });
       }
     },
     [activeSessionId, addMessage, selectedModel, createSession, listSessions, updateSession, incrementMessageCount, setThinkingSessionId],
   );
 
   const statusBanner = (() => {
     switch (connectionState) {
       case "connecting":
         return (
           <div className="flex items-center justify-center gap-2 bg-yellow-900/30 px-4 py-1.5 text-xs text-yellow-400">
             <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-yellow-400" />
             Connecting to Hermes...
           </div>
         );
       case "error":
         return (
           <div className="flex items-center justify-center gap-2 bg-red-900/30 px-4 py-1.5 text-xs text-red-400">
             <span className="inline-block h-2 w-2 rounded-full bg-red-400" />
             Disconnected — check Hermes is running
           </div>
         );
       case "connected":
         return streaming ? (
           <div className="flex items-center justify-center gap-2 bg-blue-900/30 px-4 py-1.5 text-xs text-blue-400">
             <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-400" />
             Processing...
           </div>
         ) : null;
     }
   })();
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-2">
         <BranchIndicator
           branches={branches}
           currentSessionId={activeSessionId ?? ""}
           onSwitchBranch={handleSwitchBranch}
         />
         <div className="ml-auto">
           <ModelPicker
             models={models}
             selectedModel={selectedModel}
             onSelect={setSelectedModel}
           />
         </div>
       </div>
       <MessageList
         messages={messages}
         onForkMessage={handleForkMessage}
         showForkButton={!!activeSessionId}
         thinking={thinkingSessionId !== null && thinkingSessionId === activeSessionId}
       />
       {messages.length === 0 && !streaming && (thinkingSessionId === null || thinkingSessionId !== activeSessionId) && (
         <div className="flex flex-1 items-center justify-center">
           <p className="text-sm text-gray-600">Start a new conversation...</p>
         </div>
       )}
       <Composer
         onSend={handleSend}
         onUpload={handleUpload}
         disabled={streaming}
         sessionId={activeSessionId}
       />
       {statusBanner}
     </div>
   );
 }