@jazzmind/busibox-app 3.0.29 → 3.0.30

package/dist/components/chat/ChatInterface.js

@@ -1,117 +1,679 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChatInterface - Core Chat Component
+ *
+ * The primary chat component for all Busibox apps. Supports:
+ * - Agentic streaming with real-time thoughts, tool cards, and prompts
+ * - Standard streaming and non-streaming fallback modes
+ * - Message parts architecture (text, thinking, tool calls, prompts)
+ * - Quick replies and bracket-based suggested actions
+ * - Progressive disclosure for agent thinking
+ * - Optional file attachments
+ * - Single conversation UI (no sidebar)
+ *
+ * For the portal-level chat with conversation sidebar, insights, and
+ * multi-agent selection, see ChatContainer.
+ *
+ * Usage:
+ * ```typescript
+ * <ChatInterface
+ *   token="bearer-token"
+ *   enableWebSearch={true}
+ *   enableDocSearch={false}
+ *   allowAttachments={false}
+ *   placeholder="Ask me anything..."
+ *   useAgenticStreaming={true}
+ * />
+ * ```
+ */
 import { useState, useRef, useEffect } from 'react';
-import { Send, Bot, User, Loader2, Trash2 } from 'lucide-react';
+import { Send, Bot, Loader2, Paperclip, Brain, CheckCircle, AlertCircle, Plus, Trash2, Volume2, X } from 'lucide-react';
+import toast from 'react-hot-toast';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useBusiboxApi } from '../../contexts/ApiContext';
-import { fetchServiceFirstFallbackNext } from '../../lib/http/fetch-with-fallback';
-export function ChatInterface({ availableModels, nextChatPath = '/api/chat', serviceChatPath = '/api/chat' }) {
-    const api = useBusiboxApi();
+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, 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, }) {
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
-    const [selectedModel, setSelectedModel] = useState(availableModels.length > 0 ? availableModels[0].id : '');
+    const [streamingContent, setStreamingContent] = useState('');
+    const [executionEvents, setExecutionEvents] = useState([]);
+    const [thoughts, setThoughts] = useState([]); // For agentic streaming
+    const [interimMessages, setInterimMessages] = useState([]);
+    const [streamingAgentName, setStreamingAgentName] = useState(undefined);
+    const [conversationId, setConversationId] = useState(initialConversationId);
+    const [attachments, setAttachments] = useState([]);
+    const [abortController, setAbortController] = useState(null);
+    const [loadingHistory, setLoadingHistory] = useState(false);
+    const [showVoiceComingSoon, setShowVoiceComingSoon] = useState(false);
+    const [quickReplies, setQuickReplies] = useState([]);
+    const [promptActive, setPromptActive] = useState(false);
+    const [streamingParts, setStreamingParts] = useState([]);
     const messagesEndRef = useRef(null);
+    const fileInputRef = useRef(null);
     const textareaRef = useRef(null);
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
     useEffect(() => {
         scrollToBottom();
-    }, [messages]);
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!input.trim() || isLoading)
+    }, [messages, streamingContent]);
+    // Load conversation history when initialConversationId is provided
+    useEffect(() => {
+        if (initialConversationId && token) {
+            loadConversationHistory(initialConversationId);
+        }
+    }, [initialConversationId, token]);
+    const loadConversationHistory = 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()),
+            }));
+            setMessages(displayMessages);
+            setConversationId(convId);
+        }
+        catch (error) {
+            console.error('Failed to load conversation history:', error);
+            toast.error('Failed to load conversation history');
+        }
+        finally {
+            setLoadingHistory(false);
+        }
+    };
+    const handleFileSelect = async (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0)
+            return;
+        // For simplicity, just store file info
+        // In a real implementation, you'd upload to data API first
+        const newAttachments = Array.from(files).map((file) => ({
+            name: file.name,
+            type: file.type,
+            url: URL.createObjectURL(file),
+            size: file.size,
+        }));
+        setAttachments((prev) => [...prev, ...newAttachments]);
+        toast.success(`${files.length} file(s) attached`);
+        // Reset input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    const handleRemoveAttachment = (index) => {
+        setAttachments((prev) => prev.filter((_, i) => i !== index));
+    };
+    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))
             return;
-        const userMessage = { role: 'user', content: input };
-        setMessages((prev) => [...prev, userMessage]);
+        // If we're submitting during a prompt-active state, abort the lingering stream
+        if (isLoading && promptActive && abortController) {
+            abortController.abort();
+        }
+        const userMessage = messageText;
         setInput('');
+        setPromptActive(false);
         if (textareaRef.current) {
             textareaRef.current.style.height = 'auto';
         }
+        // Add user message to display
+        const userDisplayMessage = {
+            role: 'user',
+            content: userMessage,
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, userDisplayMessage]);
+        // Callback
+        onMessageSent?.(userMessage);
         setIsLoading(true);
-        setMessages((prev) => [...prev, { role: 'assistant', content: '' }]);
+        setQuickReplies([]);
+        // Create abort controller for cancellation
+        const controller = new AbortController();
+        setAbortController(controller);
         try {
-            const body = JSON.stringify({
-                messages: [...messages, userMessage],
-                model: selectedModel,
-            });
-            const response = await fetchServiceFirstFallbackNext({
-                service: {
-                    baseUrl: api.services?.agentApiUrl,
-                    path: serviceChatPath,
-                    init: {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body,
-                    },
-                },
-                next: {
-                    nextApiBasePath: api.nextApiBasePath,
-                    path: nextChatPath,
-                    init: {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body,
-                    },
-                },
-                fallback: {
-                    fallbackOnNetworkError: api.fallback?.fallbackOnNetworkError ?? true,
-                    fallbackStatuses: [
-                        ...(api.fallback?.fallbackStatuses ?? [404, 405, 501, 502, 503, 504]),
-                        400,
-                        401,
-                        403,
-                        422,
-                    ],
-                },
-                serviceHeaders: api.serviceRequestHeaders,
-            });
-            if (!response.ok || !response.body) {
-                const errorData = await response.json().catch(() => ({ error: response.statusText }));
-                throw new Error(errorData.error || response.statusText);
+            const request = {
+                message: userMessage,
+                conversation_id: conversationId,
+                model,
+                enable_web_search: enableWebSearch,
+                enable_doc_search: enableDocSearch,
+                attachments: attachments.length > 0 ? attachments : undefined,
+                selected_agents: agentId ? [agentId] : undefined,
+                metadata: metadata || undefined,
+            };
+            if (useAgenticStreaming) {
+                // Agentic streaming with real-time thoughts and message parts
+                setStreamingContent('');
+                setThoughts([]);
+                setInterimMessages([]);
+                setStreamingAgentName(undefined);
+                setStreamingParts([]);
+                let fullContent = '';
+                let collectedThoughts = [];
+                let collectedParts = [];
+                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(),
+                                };
+                                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);
+                            }
+                            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;
+                                }
+                                setStreamingContent(stripThinkTags(fullContent));
+                            }
+                            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([]);
+                                }
+                            }
+                            break;
+                        case 'complete':
+                            break;
+                        case 'message_complete':
+                            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([]);
+                                }
+                            }
+                            break;
+                    }
+                }
+            }
+            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
+                            const assistantMessage = {
+                                role: 'assistant',
+                                content: fullContent,
+                                timestamp: new Date(),
+                            };
+                            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;
+                    }
+                }
             }
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let assistantMessage = '';
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                const chunk = decoder.decode(value, { stream: true });
-                assistantMessage += chunk;
-                setMessages((prev) => {
-                    const newMessages = [...prev];
-                    const lastMsg = newMessages[newMessages.length - 1];
-                    if (lastMsg && lastMsg.role === 'assistant')
-                        lastMsg.content = assistantMessage;
-                    return [...newMessages];
-                });
+            else {
+                // Non-streaming response
+                const response = await sendChatMessage(request, { token, 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
+            setAttachments([]);
         }
         catch (error) {
-            console.error('Chat error:', error);
-            setMessages((prev) => {
-                const newMessages = prev.slice(0, -1);
-                return [
-                    ...newMessages,
-                    {
+            if (error.name === 'AbortError') {
+                // Request was cancelled - add partial response if any
+                if (streamingContent) {
+                    const partialMessage = {
                         role: 'assistant',
-                        content: `❌ Error: ${error.message || 'Could not get a response. Please check that liteLLM is running.'}`,
-                    },
-                ];
-            });
+                        content: streamingContent + '\n\n*[Response interrupted]*',
+                        timestamp: new Date(),
+                        thoughts: thoughts.length > 0 ? thoughts : undefined,
+                    };
+                    setMessages((prev) => [...prev, partialMessage]);
+                }
+                toast('Response cancelled', { icon: '⏹️' });
+            }
+            else {
+                console.error('Chat error:', error);
+                toast.error(error.message || 'Failed to send message');
+                // Add error message
+                const errorMessage = {
+                    role: 'assistant',
+                    content: `❌ Error: ${error.message || 'Failed to send message'}`,
+                    timestamp: new Date(),
+                };
+                setMessages((prev) => [...prev, errorMessage]);
+            }
         }
         finally {
             setIsLoading(false);
+            setStreamingContent('');
+            setExecutionEvents([]);
+            setThoughts([]);
+            setInterimMessages([]);
+            setAbortController(null);
+            setPromptActive(false);
+            setStreamingParts([]);
+        }
+    };
+    const handleCancel = () => {
+        if (abortController) {
+            abortController.abort();
+        }
+    };
+    const handleQuickReply = (reply) => {
+        setQuickReplies([]);
+        setPromptActive(false);
+        // Abort lingering stream before sending the reply as a new message
+        if (isLoading && abortController) {
+            abortController.abort();
+        }
+        // Small delay to let the abort settle before we fire a new request
+        setTimeout(() => handleSubmit(null, reply), 50);
+    };
+    const handleNewChat = () => {
+        // Cancel any ongoing request
+        if (abortController) {
+            abortController.abort();
         }
+        // Reset all state
+        setMessages([]);
+        setConversationId(undefined);
+        setStreamingContent('');
+        setExecutionEvents([]);
+        setThoughts([]);
+        setInterimMessages([]);
+        setIsLoading(false);
+        setAttachments([]);
+        setStreamingAgentName(undefined);
+        setQuickReplies([]);
+        setPromptActive(false);
+        setInput('');
+        toast.success('Started new chat');
     };
-    const handleClearChat = () => {
-        if (confirm('Clear all messages?'))
+    const handleDeleteMessage = async (messageId) => {
+        if (!conversationId) {
+            // No conversation - just remove from local state
+            setMessages(prev => prev.filter(m => m.id !== messageId));
+            return;
+        }
+        try {
+            const response = await fetch(`${agentUrl || ''}/chat/${conversationId}/messages/${messageId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error('Failed to delete message');
+            }
+            setMessages(prev => prev.filter(m => m.id !== messageId));
+            toast.success('Message deleted');
+        }
+        catch (error) {
+            console.error('Failed to delete message:', error);
+            toast.error('Failed to delete message');
+        }
+    };
+    const handleDeleteConversation = async () => {
+        if (!conversationId) {
+            // No conversation to delete, just clear local messages
+            handleNewChat();
+            return;
+        }
+        if (!confirm('Are you sure you want to delete this conversation?'))
+            return;
+        const deletedId = conversationId;
+        try {
+            const response = await fetch(`${agentUrl || ''}/conversations/${conversationId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error('Failed to delete conversation');
+            }
+            // Clear local state
             setMessages([]);
+            setConversationId(undefined);
+            setStreamingContent('');
+            setThoughts([]);
+            setInterimMessages([]);
+            setIsLoading(false);
+            setAttachments([]);
+            setStreamingAgentName(undefined);
+            setInput('');
+            // Notify parent about the deletion
+            onConversationDeleted?.(deletedId);
+            toast.success('Conversation deleted');
+        }
+        catch (error) {
+            console.error('Failed to delete conversation:', error);
+            toast.error('Failed to delete conversation');
+        }
+    };
+    const handleRetryMessage = async (messageContent, attachmentIds) => {
+        // Delete the last assistant message if it exists
+        if (messages.length > 0 && messages[messages.length - 1].role === 'assistant') {
+            setMessages(prev => prev.slice(0, -1));
+        }
+        // Delete the user message that we're retrying
+        if (messages.length > 0 && messages[messages.length - 1].role === 'user') {
+            setMessages(prev => prev.slice(0, -1));
+        }
+        // Re-send the message by setting input and triggering submit
+        setInput(messageContent);
+        // Small delay to ensure state is updated, then trigger submit
+        setTimeout(() => {
+            const form = document.querySelector('form');
+            if (form) {
+                form.requestSubmit();
+            }
+        }, 50);
     };
-    return (_jsxs("div", { className: "bg-white rounded-lg shadow-lg flex flex-col h-[calc(100vh-200px)]", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Bot, { className: "w-6 h-6 text-indigo-600" }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "AI Chat" }), _jsx("p", { className: "text-xs text-gray-500", children: "Powered by liteLLM" })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("select", { value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), disabled: isLoading, className: "px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50", children: availableModels.length === 0 ? (_jsx("option", { value: "", children: "No models available" })) : (availableModels.map((model) => (_jsx("option", { value: model.id, title: model.description, children: model.name }, model.id)))) }), _jsx("button", { onClick: handleClearChat, className: "p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors", title: "Clear chat", disabled: messages.length === 0 || isLoading, children: _jsx(Trash2, { className: "w-5 h-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 && (_jsxs("div", { className: "text-center text-gray-500 mt-8", children: [_jsx(Bot, { className: "w-12 h-12 mx-auto mb-4 text-gray-300" }), _jsx("p", { className: "mb-4", children: "Start a conversation with the AI!" }), _jsxs("div", { className: "text-sm space-y-2 max-w-md mx-auto text-left", children: [_jsx("p", { className: "font-medium", children: "Try asking:" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-gray-600", children: [_jsx("li", { children: "Explain quantum computing in simple terms" }), _jsx("li", { children: "Write a Python function to sort a list" }), _jsx("li", { children: "What are the benefits of microservices?" }), _jsx("li", { children: "How does blockchain technology work?" })] })] })] })), messages.map((message, index) => (_jsxs("div", { className: `flex gap-3 ${message.role === 'user' ? 'justify-end' : 'justify-start'}`, children: [message.role === 'assistant' && (_jsx("div", { className: "bg-indigo-600 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 ${message.role === 'user' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-900'}`, children: message.content ? (message.role === 'assistant' ? (_jsx("div", { className: "prose prose-sm max-w-none prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-headings:my-2 prose-pre:my-2 prose-code:text-sm", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) })) : (_jsx("div", { className: "prose prose-sm prose-invert max-w-none prose-p:my-1 prose-p:leading-relaxed prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-headings:my-2 prose-pre:my-2 prose-code:text-sm prose-code:text-indigo-100 prose-pre:bg-indigo-700/50 prose-a:text-indigo-200 prose-a:underline prose-strong:text-white", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }))) : (_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..." })] })) }), message.role === 'user' && (_jsx("div", { className: "bg-gray-300 rounded-full p-2 h-8 w-8 flex items-center justify-center flex-shrink-0", children: _jsx(User, { className: "w-4 h-4 text-gray-700" }) }))] }, index))), _jsx("div", { ref: messagesEndRef })] }), _jsx("form", { onSubmit: handleSubmit, className: "p-4 border-t border-gray-200", children: _jsxs("div", { className: "flex gap-2 items-end", children: [_jsx("textarea", { ref: textareaRef, value: input, onChange: (e) => {
+    return (_jsxs("div", { className: `flex flex-col h-full min-h-0 bg-white dark:bg-gray-900 ${className}`, children: [_jsxs("div", { className: "flex-shrink-0 flex items-center gap-2 px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: [_jsx(Bot, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 truncate", children: "AI Assistant" }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("button", { onClick: () => setShowVoiceComingSoon(true), className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded-lg transition-colors", title: "Voice mode (coming soon)", children: [_jsx(Volume2, { className: "w-3.5 h-3.5" }), _jsx("span", { children: "Voice" })] }), _jsxs("button", { onClick: handleNewChat, className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded-lg transition-colors", title: "Start new chat", children: [_jsx(Plus, { className: "w-3.5 h-3.5" }), _jsx("span", { children: "New Chat" })] }), conversationId && (_jsx("button", { onClick: handleDeleteConversation, className: "flex items-center gap-1.5 p-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors", title: "Delete this conversation", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] })] }), _jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto p-4 space-y-4 bg-white dark:bg-gray-900", children: [loadingHistory && (_jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600 dark:text-blue-400" }), _jsx("span", { className: "ml-3 text-gray-600 dark:text-gray-400", children: "Loading conversation..." })] })), !loadingHistory && (_jsx(MessageList, { messages: (() => {
+                            // Build messages array, optionally including welcome message
+                            const displayMessages = messages.map(m => ({
+                                id: m.id || `msg-${Math.random()}`,
+                                role: m.role,
+                                content: m.content,
+                                createdAt: m.createdAt || new Date(),
+                                agentName: m.agentName,
+                                thoughts: m.thoughts,
+                                parts: m.parts,
+                            }));
+                            // Add welcome message as first assistant message if no messages yet
+                            if (welcomeMessage && displayMessages.length === 0) {
+                                displayMessages.unshift({
+                                    id: 'welcome',
+                                    role: 'assistant',
+                                    content: welcomeMessage,
+                                    createdAt: new Date(),
+                                    agentName: undefined,
+                                    thoughts: undefined,
+                                    parts: undefined,
+                                });
+                            }
+                            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) => {
                                 setInput(e.target.value);
                                 if (textareaRef.current) {
                                     textareaRef.current.style.height = 'auto';
@@ -120,10 +682,10 @@ export function ChatInterface({ availableModels, nextChatPath = '/api/chat', ser
                             }, onKeyDown: (e) => {
                                 if (e.key === 'Enter' && !e.shiftKey) {
                                     e.preventDefault();
-                                    if (input.trim() && !isLoading) {
+                                    if (input.trim() && (!isLoading || promptActive)) {
                                         handleSubmit(e);
                                     }
                                 }
-                            }, placeholder: "Ask a question...", rows: 1, className: "flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none", style: { minHeight: '52px', maxHeight: '200px' }, disabled: isLoading }), _jsx("button", { type: "submit", disabled: isLoading || !input.trim(), className: "bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400 text-white px-6 py-3 rounded-lg transition-colors flex items-center gap-2 font-medium disabled:cursor-not-allowed flex-shrink-0", children: isLoading ? (_jsx(Loader2, { className: "w-5 h-5 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(Send, { className: "w-5 h-5" }), "Send"] })) })] }) })] }));
+                            }, 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" }) })] }) }))] }));
 }
 //# sourceMappingURL=ChatInterface.js.map