@jazzmind/busibox-app 3.0.37 → 3.0.39

package/dist/components/chat/ChatInterface.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * ChatInterface - Core Chat Component
  *
@@ -27,36 +27,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * />
  * ```
  */
-import { useState, useRef, useEffect } from 'react';
-import { Send, Bot, Loader2, Paperclip, Brain, CheckCircle, AlertCircle, Plus, Trash2, Volume2, X } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Send, Bot, Loader2, Paperclip, Plus, Trash2, Volume2, X } from 'lucide-react';
 import toast from 'react-hot-toast';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
-import 'katex/dist/katex.min.css';
 import { MessageList } from './MessageList';
-import { ThinkingToggle } from './ThinkingToggle';
-import { StreamingToolCard } from './StreamingToolCard';
-import { stripThinkTags, extractThinkContent, preprocessLatex, streamingMarkdownComponents } from './chat-utils';
-import { sendChatMessage, streamChatMessage, streamChatMessageAgentic, getConversationHistory } from '../../lib/agent/chat-client';
-// Real-time execution status display (legacy, for non-agentic streaming)
-function ExecutionStatus({ events, isActive }) {
-    if (events.length === 0)
-        return null;
-    // Only show the last few relevant events
-    const relevantEvents = events.filter(e => ['planning', 'tool_start', 'tool_result', 'agent_start', 'agent_result', 'synthesis_start'].includes(e.type)).slice(-4);
-    if (relevantEvents.length === 0)
-        return null;
-    return (_jsxs("div", { className: "flex gap-3 justify-start mb-4", children: [_jsx("div", { className: "bg-blue-600 dark:bg-blue-500 rounded-full p-2 h-8 w-8 flex items-center justify-center flex-shrink-0", children: _jsx(Bot, { className: "w-4 h-4 text-white" }) }), _jsx("div", { className: "max-w-[80%] rounded-lg p-3 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100", children: _jsxs("div", { className: "space-y-1.5", children: [relevantEvents.map((event, idx) => (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [event.type === 'planning' && (_jsxs(_Fragment, { children: [_jsx(Brain, { className: "w-3.5 h-3.5 text-purple-500 flex-shrink-0" }), _jsx("span", { className: "text-purple-700 dark:text-purple-400", children: event.message || 'Analyzing...' })] })), event.type === 'tool_start' && (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3.5 h-3.5 text-blue-500 animate-spin flex-shrink-0" }), _jsx("span", { className: "text-blue-700 dark:text-blue-400", children: event.message || `Running ${event.data?.display_name || event.data?.tool}...` })] })), event.type === 'tool_result' && (_jsxs(_Fragment, { children: [event.data?.success !== false ? (_jsx(CheckCircle, { className: "w-3.5 h-3.5 text-green-500 flex-shrink-0" })) : (_jsx(AlertCircle, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" })), _jsx("span", { className: event.data?.success !== false ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400', children: event.message || `${event.data?.display_name || event.data?.tool_name} done` })] })), event.type === 'agent_start' && (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3.5 h-3.5 text-indigo-500 animate-spin flex-shrink-0" }), _jsx("span", { className: "text-indigo-700 dark:text-indigo-400", children: event.message || `Consulting ${event.data?.display_name || event.data?.agent}...` })] })), event.type === 'agent_result' && (_jsxs(_Fragment, { children: [event.data?.success !== false ? (_jsx(CheckCircle, { className: "w-3.5 h-3.5 text-green-500 flex-shrink-0" })) : (_jsx(AlertCircle, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" })), _jsx("span", { className: event.data?.success !== false ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400', children: event.message || 'Agent responded' })] })), event.type === 'synthesis_start' && (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-3.5 h-3.5 text-purple-500 animate-spin flex-shrink-0" }), _jsx("span", { className: "text-purple-700 dark:text-purple-400", children: event.message || 'Combining results...' })] }))] }, idx))), isActive && (_jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mt-1", children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin" }), _jsx("span", { children: "Processing..." })] }))] }) })] }));
-}
-export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = false, enableDocSearch = false, allowAttachments = false, placeholder = 'Type your message...', welcomeMessage, model = 'auto', useStreaming = true, useAgenticStreaming = false, className = '', onMessageSent, onResponseReceived, initialConversationId, metadata, onConversationDeleted, }) {
+import { stripThinkTags } from './chat-utils';
+import { sendChatMessage, streamChatMessageAgentic, getConversationHistory } from '../../lib/agent/chat-client';
+import { createAccumulator, processStreamEvent } from '../../lib/agent/stream-event-processor';
+export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = false, enableDocSearch = false, allowAttachments = false, placeholder = 'Type your message...', welcomeMessage, model = 'auto', useStreaming: _useStreaming = true, useAgenticStreaming = true, className = '', onMessageSent, onResponseReceived, initialConversationId, metadata, onConversationDeleted, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [streamingContent, setStreamingContent] = useState('');
-    const [executionEvents, setExecutionEvents] = useState([]);
-    const [thoughts, setThoughts] = useState([]); // For agentic streaming
+    const [thoughts, setThoughts] = useState([]);
     const [interimMessages, setInterimMessages] = useState([]);
     const [streamingAgentName, setStreamingAgentName] = useState(undefined);
     const [conversationId, setConversationId] = useState(initialConversationId);
@@ -70,29 +53,31 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
     const messagesEndRef = useRef(null);
     const fileInputRef = useRef(null);
     const textareaRef = useRef(null);
+    const tokenRef = useRef(token);
+    useEffect(() => {
+        tokenRef.current = token;
+    }, [token]);
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
     useEffect(() => {
         scrollToBottom();
     }, [messages, streamingContent]);
-    // Load conversation history when initialConversationId is provided
-    useEffect(() => {
-        if (initialConversationId && token) {
-            loadConversationHistory(initialConversationId);
-        }
-    }, [initialConversationId, token]);
-    const loadConversationHistory = async (convId) => {
+    const loadConversationHistory = useCallback(async (convId) => {
         setLoadingHistory(true);
         try {
-            const history = await getConversationHistory(convId, { token, agentUrl });
-            // Convert to DisplayMessage format
-            const displayMessages = history.map(msg => ({
-                id: msg.id,
-                role: msg.role,
-                content: msg.content,
-                createdAt: new Date(msg.created_at || msg.createdAt || Date.now()),
-            }));
+            const history = await getConversationHistory(convId, { token: tokenRef.current, agentUrl });
+            const displayMessages = history.map(msg => {
+                const raw = msg;
+                const thoughts = raw.routing_decision?.thoughts || raw.thoughts;
+                return {
+                    id: msg.id,
+                    role: msg.role,
+                    content: msg.content,
+                    createdAt: new Date(raw.created_at || raw.createdAt || Date.now()),
+                    thoughts: thoughts?.length > 0 ? thoughts : undefined,
+                };
+            });
             setMessages(displayMessages);
             setConversationId(convId);
         }
@@ -103,7 +88,13 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
         finally {
             setLoadingHistory(false);
         }
-    };
+    }, [agentUrl]);
+    // Load conversation history when initialConversationId changes (not on token refresh)
+    useEffect(() => {
+        if (initialConversationId && tokenRef.current) {
+            loadConversationHistory(initialConversationId);
+        }
+    }, [initialConversationId, loadConversationHistory]);
     const handleFileSelect = async (e) => {
         const files = e.target.files;
         if (!files || files.length === 0)
@@ -129,11 +120,10 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
     const handleSubmit = async (e, overrideMessage) => {
         e?.preventDefault();
         const messageText = overrideMessage ?? input.trim();
-        // Allow submission when promptActive even if isLoading is still true
-        if (!messageText || (isLoading && !promptActive))
+        if (!messageText)
             return;
-        // If we're submitting during a prompt-active state, abort the lingering stream
-        if (isLoading && promptActive && abortController) {
+        // Abort any in-flight stream so the new message can proceed
+        if (isLoading && abortController) {
             abortController.abort();
         }
         const userMessage = messageText;
@@ -174,337 +164,149 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
                 setInterimMessages([]);
                 setStreamingAgentName(undefined);
                 setStreamingParts([]);
-                let fullContent = '';
-                let collectedThoughts = [];
-                let collectedParts = [];
+                const accumulated = createAccumulator();
                 let hasAddedMessage = false;
-                // Track in-flight tool calls by source so we can update their status
-                const pendingTools = new Map(); // source -> index in collectedParts
-                for await (const event of streamChatMessageAgentic(request, { token, agentUrl, signal: controller.signal })) {
-                    const newEvent = {
-                        type: event.type,
-                        source: event.data?.source,
-                        message: event.data?.message,
-                        data: event.data,
-                        timestamp: new Date(),
-                    };
-                    if (event.data?.source && !event.data.source.includes('dispatcher')) {
-                        setStreamingAgentName(event.data.source);
-                    }
-                    switch (event.type) {
-                        case 'conversation_created':
-                            setConversationId(event.data.conversation_id);
-                            break;
-                        case 'thought':
-                        case 'plan':
-                        case 'progress':
-                            collectedThoughts = [...collectedThoughts, newEvent];
-                            setThoughts(collectedThoughts);
-                            break;
-                        case 'tool_start':
-                            {
-                                collectedThoughts = [...collectedThoughts, newEvent];
-                                setThoughts(collectedThoughts);
-                                const toolSource = event.data?.source || 'tool';
-                                const toolName = String(event.data?.data?.tool_name || event.data?.data?.display_name || toolSource);
-                                const toolPart = {
-                                    type: 'tool_call',
-                                    id: `tool-${Date.now()}-${toolName}`,
-                                    name: toolName,
-                                    displayName: String(event.data?.data?.display_name || event.data?.message || toolName),
-                                    status: 'running',
-                                    input: (event.data?.data || undefined),
-                                    startedAt: new Date(),
+                for await (const event of streamChatMessageAgentic(request, { token: tokenRef.current, agentUrl, signal: controller.signal })) {
+                    const parsed = event.data;
+                    // message_complete and error have ChatInterface-specific side effects
+                    // (creating DisplayMessages, toasts) so they're handled inline.
+                    if (event.type === 'message_complete') {
+                        if (!hasAddedMessage) {
+                            setConversationId(parsed.conversation_id);
+                            const cleanedContent = stripThinkTags(accumulated.fullContent);
+                            if (cleanedContent) {
+                                const finalParts = [
+                                    ...accumulated.parts,
+                                    { type: 'text', content: cleanedContent },
+                                ];
+                                const assistantMessage = {
+                                    role: 'assistant',
+                                    content: cleanedContent,
+                                    timestamp: new Date(),
+                                    thoughts: accumulated.thoughts.length > 0 ? accumulated.thoughts : undefined,
+                                    agentName: accumulated.agentName,
+                                    parts: finalParts,
                                 };
-                                pendingTools.set(toolSource, collectedParts.length);
-                                collectedParts = [...collectedParts, toolPart];
-                                setStreamingParts(collectedParts);
-                            }
-                            break;
-                        case 'tool_result':
-                            {
-                                collectedThoughts = [...collectedThoughts, newEvent];
-                                setThoughts(collectedThoughts);
-                                const resultSource = event.data?.source || 'tool';
-                                const idx = pendingTools.get(resultSource);
-                                if (idx !== undefined && collectedParts[idx]?.type === 'tool_call') {
-                                    const existing = collectedParts[idx];
-                                    const updated = {
-                                        ...existing,
-                                        status: event.data?.data?.success === false ? 'error' : 'completed',
-                                        output: event.data?.message || undefined,
-                                        error: event.data?.data?.success === false ? String(event.data?.message || 'Failed') : undefined,
-                                        completedAt: new Date(),
-                                    };
-                                    collectedParts = [...collectedParts];
-                                    collectedParts[idx] = updated;
-                                    pendingTools.delete(resultSource);
-                                }
-                                else {
-                                    // No matching tool_start; append as a standalone completed tool
-                                    const toolName = String(event.data?.data?.tool_name || event.data?.data?.display_name || resultSource);
-                                    collectedParts = [...collectedParts, {
-                                            type: 'tool_call',
-                                            id: `tool-${Date.now()}-${toolName}`,
-                                            name: toolName,
-                                            displayName: String(event.data?.data?.display_name || toolName),
-                                            status: event.data?.data?.success === false ? 'error' : 'completed',
-                                            output: event.data?.message || undefined,
-                                            completedAt: new Date(),
-                                        }];
-                                }
-                                setStreamingParts(collectedParts);
+                                setMessages((prev) => [...prev, assistantMessage]);
+                                hasAddedMessage = true;
                             }
-                            break;
-                        case 'interim':
-                            {
-                                const payload = event.data || {};
-                                const nested = payload.data || {};
-                                const interimMessage = String(payload.message || '').trim();
-                                const audioUrl = typeof nested.audio_url === 'string' ? nested.audio_url : '';
-                                const rendered = audioUrl
-                                    ? `${interimMessage || 'Voice output ready'} (${audioUrl})`
-                                    : interimMessage;
-                                if (rendered) {
-                                    setInterimMessages(prev => [...prev, rendered]);
-                                }
-                            }
-                            break;
-                        case 'content':
-                            {
-                                const contentData = event.data?.data || {};
-                                const msgText = event.data?.message || '';
-                                if (contentData.streaming && contentData.partial) {
-                                    fullContent += msgText;
-                                }
-                                else if (contentData.complete) {
-                                    // Final marker
-                                }
-                                else if (msgText) {
-                                    fullContent = msgText;
-                                }
-                                const thinkTexts = extractThinkContent(fullContent);
-                                if (thinkTexts.length > 0) {
-                                    const thinkThought = {
-                                        type: 'thought',
-                                        source: 'model',
-                                        message: thinkTexts.join('\n\n'),
-                                        data: event.data,
-                                        timestamp: new Date(),
-                                    };
-                                    const hasModelThought = collectedThoughts.some(t => t.source === 'model' && t.type === 'thought');
-                                    if (hasModelThought) {
-                                        collectedThoughts = collectedThoughts.map(t => t.source === 'model' && t.type === 'thought' ? thinkThought : t);
-                                    }
-                                    else {
-                                        collectedThoughts = [...collectedThoughts, thinkThought];
-                                    }
-                                    setThoughts(collectedThoughts);
-                                }
-                                setStreamingContent(stripThinkTags(fullContent));
+                            setStreamingContent('');
+                            setThoughts([]);
+                            setInterimMessages([]);
+                            setStreamingAgentName(undefined);
+                            setStreamingParts([]);
+                            setIsLoading(false);
+                            if (cleanedContent) {
+                                onResponseReceived?.(cleanedContent);
                             }
-                            break;
-                        case 'prompt':
-                            {
-                                const promptOptions = event.data?.data?.options || event.data?.options;
-                                if (promptOptions && Array.isArray(promptOptions)) {
-                                    setQuickReplies(promptOptions);
-                                    setPromptActive(true);
-                                    // Add a prompt part for rendering
-                                    const promptType = (event.data?.data?.prompt_type || 'choice');
-                                    collectedParts = [...collectedParts, { type: 'prompt', options: promptOptions, promptType }];
-                                    setStreamingParts(collectedParts);
-                                    // Finalize accumulated content as a completed message
-                                    const cleanedSoFar = stripThinkTags(fullContent);
-                                    if (cleanedSoFar && !hasAddedMessage) {
-                                        const assistantMessage = {
-                                            role: 'assistant',
-                                            content: cleanedSoFar,
-                                            timestamp: new Date(),
-                                            thoughts: collectedThoughts.length > 0 ? collectedThoughts : undefined,
-                                            agentName: streamingAgentName,
-                                            parts: collectedParts,
-                                        };
-                                        setMessages((prev) => [...prev, assistantMessage]);
-                                        hasAddedMessage = true;
-                                    }
-                                    setStreamingContent('');
-                                    setThoughts([]);
-                                    setInterimMessages([]);
-                                    setStreamingParts([]);
-                                }
+                        }
+                        continue;
+                    }
+                    if (event.type === 'error') {
+                        const errorMessage = parsed?.message || parsed?.error || 'An error occurred';
+                        const errorSource = parsed?.source || parsed?.data?.source || '';
+                        const isToolError = errorSource && !errorSource.includes('agent') && !errorSource.includes('dispatcher');
+                        if (isToolError) {
+                            accumulated.thoughts = [...accumulated.thoughts, {
+                                    type: 'error',
+                                    source: errorSource,
+                                    message: `Tool error (${errorSource}): ${errorMessage}`,
+                                    data: parsed,
+                                    timestamp: new Date(),
+                                }];
+                            setThoughts(accumulated.thoughts);
+                            const errIdx = accumulated.pendingTools.get(errorSource);
+                            if (errIdx !== undefined && accumulated.parts[errIdx]?.type === 'tool_call') {
+                                const existing = accumulated.parts[errIdx];
+                                accumulated.parts = [...accumulated.parts];
+                                accumulated.parts[errIdx] = { ...existing, status: 'error', error: errorMessage, completedAt: new Date() };
+                                accumulated.pendingTools.delete(errorSource);
+                                setStreamingParts(accumulated.parts);
                             }
-                            break;
-                        case 'complete':
-                            break;
-                        case 'message_complete':
+                        }
+                        else {
+                            toast.error(errorMessage);
                             if (!hasAddedMessage) {
-                                setConversationId(event.data.conversation_id);
-                                const cleanedContent = stripThinkTags(fullContent);
-                                if (cleanedContent) {
-                                    // Build final text part if there's content not yet in parts
-                                    const finalParts = [
-                                        ...collectedParts,
-                                        { type: 'text', content: cleanedContent },
-                                    ];
-                                    const assistantMessage = {
-                                        role: 'assistant',
-                                        content: cleanedContent,
-                                        timestamp: new Date(),
-                                        thoughts: collectedThoughts.length > 0 ? collectedThoughts : undefined,
-                                        agentName: streamingAgentName,
-                                        parts: finalParts,
-                                    };
-                                    setMessages((prev) => [...prev, assistantMessage]);
-                                    hasAddedMessage = true;
-                                }
-                                setStreamingContent('');
-                                setThoughts([]);
-                                setInterimMessages([]);
-                                setStreamingAgentName(undefined);
-                                setStreamingParts([]);
-                                setIsLoading(false);
-                                if (cleanedContent) {
-                                    onResponseReceived?.(cleanedContent);
-                                }
-                            }
-                            break;
-                        case 'error':
-                            {
-                                const errorMessage = event.data?.message || event.data?.error || 'An error occurred';
-                                const errorSource = event.data?.source || event.data?.data?.source || '';
-                                const isToolError = errorSource && !errorSource.includes('agent') && !errorSource.includes('dispatcher');
-                                if (isToolError) {
-                                    collectedThoughts = [...collectedThoughts, {
-                                            type: 'error',
-                                            source: errorSource,
-                                            message: `Tool error (${errorSource}): ${errorMessage}`,
-                                            data: event.data,
-                                            timestamp: new Date(),
-                                        }];
-                                    setThoughts(collectedThoughts);
-                                    // Update matching pending tool part to error status
-                                    const errIdx = pendingTools.get(errorSource);
-                                    if (errIdx !== undefined && collectedParts[errIdx]?.type === 'tool_call') {
-                                        const existing = collectedParts[errIdx];
-                                        collectedParts = [...collectedParts];
-                                        collectedParts[errIdx] = { ...existing, status: 'error', error: errorMessage, completedAt: new Date() };
-                                        pendingTools.delete(errorSource);
-                                        setStreamingParts(collectedParts);
-                                    }
-                                }
-                                else {
-                                    toast.error(errorMessage);
-                                    if (!hasAddedMessage) {
-                                        const errorContent = fullContent.trim()
-                                            ? `${fullContent}\n\n**Error:** ${errorMessage}`
-                                            : `**Error:** ${errorMessage}`;
-                                        const errorAssistantMessage = {
-                                            role: 'assistant',
-                                            content: errorContent,
-                                            timestamp: new Date(),
-                                            thoughts: collectedThoughts.length > 0 ? collectedThoughts : undefined,
-                                            agentName: streamingAgentName,
-                                            parts: collectedParts,
-                                        };
-                                        setMessages((prev) => [...prev, errorAssistantMessage]);
-                                        hasAddedMessage = true;
-                                    }
-                                    setStreamingContent('');
-                                    setThoughts([]);
-                                    setInterimMessages([]);
-                                    setStreamingAgentName(undefined);
-                                    setStreamingParts([]);
-                                }
+                                const errorContent = accumulated.fullContent.trim()
+                                    ? `${accumulated.fullContent}\n\n**Error:** ${errorMessage}`
+                                    : `**Error:** ${errorMessage}`;
+                                const errorAssistantMessage = {
+                                    role: 'assistant',
+                                    content: errorContent,
+                                    timestamp: new Date(),
+                                    thoughts: accumulated.thoughts.length > 0 ? accumulated.thoughts : undefined,
+                                    agentName: accumulated.agentName,
+                                    parts: accumulated.parts,
+                                };
+                                setMessages((prev) => [...prev, errorAssistantMessage]);
+                                hasAddedMessage = true;
                             }
-                            break;
+                            setStreamingContent('');
+                            setThoughts([]);
+                            setInterimMessages([]);
+                            setStreamingAgentName(undefined);
+                            setStreamingParts([]);
+                        }
+                        continue;
                     }
-                }
-            }
-            else if (useStreaming) {
-                // Standard streaming response
-                setStreamingContent('');
-                setExecutionEvents([]);
-                let fullContent = '';
-                let collectedEvents = [];
-                for await (const event of streamChatMessage(request, { token, agentUrl, signal: controller.signal })) {
-                    const newEvent = {
-                        type: event.type,
-                        message: event.data?.message,
-                        data: event.data,
-                        timestamp: new Date(),
-                    };
-                    switch (event.type) {
-                        case 'conversation_created':
-                            setConversationId(event.data.conversation_id);
-                            break;
-                        case 'planning':
-                        case 'tool_start':
-                        case 'agent_start':
-                        case 'agent_response_start':
-                        case 'synthesis_start':
-                            collectedEvents = [...collectedEvents, newEvent];
-                            setExecutionEvents(collectedEvents);
-                            break;
-                        case 'tool_result':
-                        case 'agent_result':
-                        case 'routing_decision':
-                        case 'model_selected':
-                            collectedEvents = [...collectedEvents, newEvent];
-                            setExecutionEvents(collectedEvents);
-                            break;
-                        case 'content_chunk':
-                            // Only append if chunk is defined and not empty
-                            if (event.data.chunk !== undefined && event.data.chunk !== null) {
-                                fullContent += event.data.chunk;
-                                setStreamingContent(fullContent);
-                            }
-                            break;
-                        case 'execution_complete':
-                            // Clear execution events when content starts flowing
-                            break;
-                        case 'message_complete':
-                            setConversationId(event.data.conversation_id);
-                            // Add assistant message to display
+                    // All other events go through the shared processor
+                    const result = processStreamEvent(event.type, parsed, accumulated);
+                    if (result.conversationId && !result.titleUpdate) {
+                        setConversationId(result.conversationId);
+                    }
+                    if (accumulated.agentName) {
+                        setStreamingAgentName(accumulated.agentName);
+                    }
+                    if (result.content !== undefined) {
+                        setStreamingContent(result.content);
+                    }
+                    if (result.thoughts) {
+                        setThoughts(result.thoughts);
+                    }
+                    if (result.parts) {
+                        setStreamingParts(result.parts);
+                    }
+                    if (result.interimMessages) {
+                        setInterimMessages(result.interimMessages);
+                    }
+                    if (result.quickReplies) {
+                        setQuickReplies(result.quickReplies);
+                    }
+                    if (result.promptActive !== undefined) {
+                        setPromptActive(result.promptActive);
+                    }
+                    // prompt event: finalize accumulated content as a completed message
+                    if (event.type === 'prompt' && result.promptActive) {
+                        const cleanedSoFar = stripThinkTags(accumulated.fullContent);
+                        if (cleanedSoFar && !hasAddedMessage) {
                             const assistantMessage = {
                                 role: 'assistant',
-                                content: fullContent,
+                                content: cleanedSoFar,
                                 timestamp: new Date(),
+                                thoughts: accumulated.thoughts.length > 0 ? accumulated.thoughts : undefined,
+                                agentName: accumulated.agentName,
+                                parts: accumulated.parts,
                             };
                             setMessages((prev) => [...prev, assistantMessage]);
-                            setStreamingContent('');
-                            setExecutionEvents([]);
-                            // Callback
-                            onResponseReceived?.(fullContent);
-                            break;
-                        case 'error':
-                            const streamErrorMessage = event.data?.error || 'An error occurred';
-                            toast.error(streamErrorMessage);
-                            // Add error message to chat
-                            const streamErrorAssistantMessage = {
-                                role: 'assistant',
-                                content: `⚠️ **Error:** ${streamErrorMessage}`,
-                                timestamp: new Date(),
-                            };
-                            setMessages((prev) => [...prev, streamErrorAssistantMessage]);
-                            setStreamingContent('');
-                            setExecutionEvents([]);
-                            break;
+                            hasAddedMessage = true;
+                        }
+                        setStreamingContent('');
+                        setThoughts([]);
+                        setInterimMessages([]);
+                        setStreamingParts([]);
                     }
                 }
             }
             else {
-                // Non-streaming response
-                const response = await sendChatMessage(request, { token, agentUrl });
+                // Non-streaming fallback
+                const response = await sendChatMessage(request, { token: tokenRef.current, agentUrl });
                 setConversationId(response.conversation_id);
-                // Add assistant message to display
                 const assistantMessage = {
                     role: 'assistant',
                     content: response.content,
                     timestamp: new Date(),
                 };
                 setMessages((prev) => [...prev, assistantMessage]);
-                // Callback
                 onResponseReceived?.(response.content);
             }
             // Clear attachments after successful send
@@ -539,7 +341,6 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
         finally {
             setIsLoading(false);
             setStreamingContent('');
-            setExecutionEvents([]);
             setThoughts([]);
             setInterimMessages([]);
             setAbortController(null);
@@ -571,7 +372,6 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
         setMessages([]);
         setConversationId(undefined);
         setStreamingContent('');
-        setExecutionEvents([]);
         setThoughts([]);
         setInterimMessages([]);
         setIsLoading(false);
@@ -592,7 +392,7 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
             const response = await fetch(`${agentUrl || ''}/chat/${conversationId}/messages/${messageId}`, {
                 method: 'DELETE',
                 headers: {
-                    'Authorization': `Bearer ${token}`,
+                    'Authorization': `Bearer ${tokenRef.current}`,
                     'Content-Type': 'application/json',
                 },
             });
@@ -620,7 +420,7 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
             const response = await fetch(`${agentUrl || ''}/conversations/${conversationId}`, {
                 method: 'DELETE',
                 headers: {
-                    'Authorization': `Bearer ${token}`,
+                    'Authorization': `Bearer ${tokenRef.current}`,
                     'Content-Type': 'application/json',
                 },
             });
@@ -689,9 +489,7 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
                                 });
                             }
                             return displayMessages;
-                        })(), streamingContent: !useAgenticStreaming ? streamingContent : undefined, streamingAgentName: streamingAgentName, isLoading: !useAgenticStreaming && isLoading && messages.length === 0, onDeleteMessage: handleDeleteMessage, onRetryMessage: handleRetryMessage, onSuggestedAction: (action) => handleSubmit(null, action) })), useAgenticStreaming && (isLoading || streamingContent) && !promptActive && (_jsxs("div", { className: "flex gap-4 justify-start", children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm", children: streamingAgentName?.charAt(0).toUpperCase() || 'A' }), streamingAgentName && (_jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 font-medium capitalize", children: streamingAgentName }))] }), _jsx("div", { className: "max-w-3xl flex-1", children: _jsxs("div", { className: "rounded-lg px-4 py-3 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100", children: [thoughts.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-2 text-xs", children: _jsx(ThinkingToggle, { thoughts: thoughts, isActive: isLoading && !streamingContent }) })), streamingParts.filter(p => p.type === 'tool_call').length > 0 && (_jsx("div", { className: "mb-2", children: streamingParts
-                                                .filter((p) => p.type === 'tool_call')
-                                                .map((part) => (_jsx(StreamingToolCard, { part: part }, part.id))) })), interimMessages.length > 0 && (_jsx("div", { className: "mb-3 space-y-1", children: interimMessages.map((msg, idx) => (_jsx("div", { className: "text-xs rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-2 py-1 text-amber-800 dark:text-amber-200", children: msg }, `interim-${idx}`))) })), streamingContent ? (_jsxs("div", { className: "prose prose-sm dark:prose-invert max-w-none prose-headings:font-semibold prose-h1:text-xl prose-h1:mt-4 prose-h1:mb-3 prose-h2:text-lg prose-h2:mt-4 prose-h2:mb-2 prose-h3:text-base prose-h3:mt-3 prose-h3:mb-2 prose-p:my-2 prose-p:leading-relaxed prose-ul:my-3 prose-ol:my-3 prose-li:my-0.5 prose-hr:my-6 prose-strong:font-semibold prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-pre:border prose-blockquote:border-l-4 prose-blockquote:pl-4 prose-blockquote:italic prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline", children: [_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkMath], rehypePlugins: [rehypeKatex], components: streamingMarkdownComponents, children: preprocessLatex(streamingContent) }), _jsx("span", { className: "inline-block w-2 h-4 bg-gray-400 dark:bg-gray-500 animate-pulse ml-1" })] })) : (_jsxs("div", { className: "flex items-center gap-2 text-gray-500 dark:text-gray-400", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { children: "Thinking..." })] }))] }) })] })), !useAgenticStreaming && isLoading && executionEvents.length > 0 && !streamingContent && (_jsx(ExecutionStatus, { events: executionEvents, isActive: isLoading })), !useAgenticStreaming && isLoading && !streamingContent && executionEvents.length === 0 && (_jsxs("div", { className: "flex gap-3 justify-start", children: [_jsx("div", { className: "bg-blue-600 dark:bg-blue-500 rounded-full p-2 h-8 w-8 flex items-center justify-center flex-shrink-0", children: _jsx(Bot, { className: "w-4 h-4 text-white" }) }), _jsx("div", { className: "max-w-[80%] rounded-lg p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Thinking..." })] }) })] })), _jsx("div", { ref: messagesEndRef })] }), attachments.length > 0 && (_jsx("div", { className: "flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx("div", { className: "flex flex-wrap gap-2", children: attachments.map((attachment, index) => (_jsxs("div", { className: "flex items-center gap-2 bg-white dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-200", children: attachment.name }), _jsx("button", { onClick: () => handleRemoveAttachment(index), className: "text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400", children: "\u00D7" })] }, index))) }) })), quickReplies.length > 0 && (_jsx("div", { className: "flex-shrink-0 px-3 pt-2 pb-1 flex flex-wrap gap-2 justify-center border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900", children: quickReplies.map((reply) => (_jsx("button", { type: "button", onClick: () => handleQuickReply(reply), className: "px-4 py-1.5 text-sm font-medium rounded-full border border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors", children: reply }, reply))) })), _jsx("form", { onSubmit: handleSubmit, className: "flex-shrink-0 p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900", children: _jsxs("div", { className: "flex gap-2 items-end", children: [allowAttachments && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, onChange: handleFileSelect, className: "hidden" }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isLoading, className: "p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0", title: "Attach files", children: _jsx(Paperclip, { className: "w-5 h-5" }) })] })), _jsx("textarea", { ref: textareaRef, value: input, onChange: (e) => {
+                        })(), streamingContent: streamingContent || undefined, streamingAgentName: streamingAgentName, streamingThoughts: thoughts, streamingParts: streamingParts, isLoading: isLoading, onDeleteMessage: handleDeleteMessage, onRetryMessage: handleRetryMessage, onSuggestedAction: (action) => handleSubmit(null, action) })), _jsx("div", { ref: messagesEndRef })] }), attachments.length > 0 && (_jsx("div", { className: "flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx("div", { className: "flex flex-wrap gap-2", children: attachments.map((attachment, index) => (_jsxs("div", { className: "flex items-center gap-2 bg-white dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-200", children: attachment.name }), _jsx("button", { onClick: () => handleRemoveAttachment(index), className: "text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400", children: "\u00D7" })] }, index))) }) })), quickReplies.length > 0 && (_jsx("div", { className: "flex-shrink-0 px-3 pt-2 pb-1 flex flex-wrap gap-2 justify-center border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900", children: quickReplies.map((reply) => (_jsx("button", { type: "button", onClick: () => handleQuickReply(reply), className: "px-4 py-1.5 text-sm font-medium rounded-full border border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors", children: reply }, reply))) })), _jsx("form", { onSubmit: handleSubmit, className: "flex-shrink-0 p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900", children: _jsxs("div", { className: "flex gap-2 items-end", children: [allowAttachments && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, onChange: handleFileSelect, className: "hidden" }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isLoading, className: "p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0", title: "Attach files", children: _jsx(Paperclip, { className: "w-5 h-5" }) })] })), _jsx("textarea", { ref: textareaRef, value: input, onChange: (e) => {
                                 setInput(e.target.value);
                                 if (textareaRef.current) {
                                     textareaRef.current.style.height = 'auto';
@@ -700,10 +498,10 @@ export function ChatInterface({ token, agentUrl, agentId, enableWebSearch = fals
                             }, onKeyDown: (e) => {
                                 if (e.key === 'Enter' && !e.shiftKey) {
                                     e.preventDefault();
-                                    if (input.trim() && (!isLoading || promptActive)) {
+                                    if (input.trim()) {
                                         handleSubmit(e);
                                     }
                                 }
-                            }, placeholder: promptActive ? 'Type your reply...' : placeholder, rows: 1, className: "flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent resize-none", style: { minHeight: '40px', maxHeight: '200px' }, disabled: isLoading && !promptActive }), isLoading && !promptActive ? (_jsx("button", { type: "button", onClick: handleCancel, className: "bg-red-600 dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2 font-medium flex-shrink-0", title: "Cancel", children: _jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: "\u23F9" }) })) : (_jsx("button", { type: "submit", disabled: !input.trim(), className: "bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2 font-medium disabled:cursor-not-allowed flex-shrink-0", children: _jsx(Send, { className: "w-5 h-5" }) }))] }) }), showVoiceComingSoon && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4", children: _jsxs("div", { className: "w-full max-w-sm rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Voice Mode" }), _jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300", children: "Voice mode is coming soon. Chat remains text-only for now." })] }), _jsx("button", { type: "button", onClick: () => setShowVoiceComingSoon(false), className: "p-1 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700", "aria-label": "Close voice mode modal", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "mt-4 flex justify-end", children: _jsx("button", { type: "button", onClick: () => setShowVoiceComingSoon(false), className: "px-3 py-1.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600", children: "Got it" }) })] }) }))] }));
+                            }, placeholder: promptActive ? 'Type your reply...' : placeholder, rows: 1, className: "flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent resize-none", style: { minHeight: '40px', maxHeight: '200px' }, disabled: false }), isLoading && !promptActive && (_jsx("button", { type: "button", onClick: handleCancel, className: "bg-red-600 dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2 font-medium flex-shrink-0", title: "Cancel", children: _jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: "\u23F9" }) })), _jsx("button", { type: "submit", disabled: !input.trim(), className: "bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2 font-medium disabled:cursor-not-allowed flex-shrink-0", children: _jsx(Send, { className: "w-5 h-5" }) })] }) }), showVoiceComingSoon && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4", children: _jsxs("div", { className: "w-full max-w-sm rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Voice Mode" }), _jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300", children: "Voice mode is coming soon. Chat remains text-only for now." })] }), _jsx("button", { type: "button", onClick: () => setShowVoiceComingSoon(false), className: "p-1 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700", "aria-label": "Close voice mode modal", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "mt-4 flex justify-end", children: _jsx("button", { type: "button", onClick: () => setShowVoiceComingSoon(false), className: "px-3 py-1.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600", children: "Got it" }) })] }) }))] }));
 }
 //# sourceMappingURL=ChatInterface.js.map