@jazzmind/busibox-app 3.0.18

package/dist/components/chat/SimpleChatInterface.js

@@ -0,0 +1,585 @@
+/**
+ * Simple Chat Interface Component
+ *
+ * A minimal chat interface with:
+ * - Auto model selection
+ * - Optional pre-configured tool enablement
+ * - Optional attachment support
+ * - Single conversation UI (no history sidebar)
+ * - No model selector or tool toggles in UI
+ * - Real-time thinking section for agentic streaming
+ *
+ * Perfect for embedded chat widgets or simple Q&A interfaces.
+ *
+ * Usage:
+ * ```typescript
+ * <SimpleChatInterface
+ *   token="bearer-token"
+ *   enableWebSearch={true}
+ *   enableDocSearch={false}
+ *   allowAttachments={false}
+ *   placeholder="Ask me anything..."
+ *   useAgenticStreaming={true}
+ * />
+ * ```
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from '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 remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
+import { MessageList } from './MessageList';
+import { ThinkingToggle } from './ThinkingToggle';
+import { sendChatMessage, streamChatMessage, streamChatMessageAgentic, getConversationHistory } from '../../lib/agent/chat-client';
+const THINK_TAG_RE = /<think>[\s\S]*?<\/think>/g;
+function stripThinkTags(text) {
+    return text.replace(THINK_TAG_RE, '').trim();
+}
+// Preprocess LaTeX to ensure proper rendering
+function preprocessLatex(content) {
+    return content
+        .replace(/\\\[/g, '$$')
+        .replace(/\\\]/g, '$$')
+        .replace(/\\\(/g, '$')
+        .replace(/\\\)/g, '$');
+}
+// 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 SimpleChatInterface({ 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 [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 messagesEndRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const textareaRef = useRef(null);
+    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) => {
+        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();
+        if (!messageText || isLoading)
+            return;
+        const userMessage = messageText;
+        setInput('');
+        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);
+        setQuickReplies([]);
+        // Create abort controller for cancellation
+        const controller = new AbortController();
+        setAbortController(controller);
+        try {
+            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
+                setStreamingContent('');
+                setThoughts([]);
+                setInterimMessages([]);
+                setStreamingAgentName(undefined);
+                let fullContent = '';
+                let collectedThoughts = [];
+                let hasAddedMessage = false; // Track if we've already added a message (error or complete)
+                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(),
+                    };
+                    // Extract agent name from source if available
+                    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':
+                        case 'tool_start':
+                        case 'tool_result':
+                            // Add to thoughts section
+                            collectedThoughts = [...collectedThoughts, newEvent];
+                            setThoughts(collectedThoughts);
+                            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':
+                            // Stream content to message area
+                            // The nested data object contains streaming flags
+                            const contentData = event.data?.data || {};
+                            const messageText = event.data?.message || '';
+                            if (contentData.streaming && contentData.partial) {
+                                fullContent += messageText;
+                            }
+                            else if (contentData.complete) {
+                                // Final marker - content already accumulated
+                            }
+                            else if (messageText) {
+                                fullContent = messageText;
+                            }
+                            setStreamingContent(stripThinkTags(fullContent));
+                            break;
+                        case 'prompt':
+                            {
+                                const promptOptions = event.data?.data?.options || event.data?.options;
+                                if (promptOptions && Array.isArray(promptOptions)) {
+                                    setQuickReplies(promptOptions);
+                                }
+                            }
+                            break;
+                        case 'complete':
+                            // Done - add final message
+                            break;
+                        case 'message_complete':
+                            // Only add message if we haven't already (e.g., from an error)
+                            if (!hasAddedMessage) {
+                                setConversationId(event.data.conversation_id);
+                                const cleanedContent = stripThinkTags(fullContent);
+                                if (cleanedContent) {
+                                    const assistantMessage = {
+                                        role: 'assistant',
+                                        content: cleanedContent,
+                                        timestamp: new Date(),
+                                        thoughts: collectedThoughts.length > 0 ? collectedThoughts : undefined,
+                                        agentName: streamingAgentName,
+                                    };
+                                    setMessages((prev) => [...prev, assistantMessage]);
+                                    hasAddedMessage = true;
+                                }
+                                setStreamingContent('');
+                                setThoughts([]);
+                                setInterimMessages([]);
+                                setStreamingAgentName(undefined);
+                                setIsLoading(false);
+                                // Callback
+                                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) {
+                                // Tool-level error: log it as a thought, don't wipe content.
+                                // The agent will continue and produce a final response.
+                                collectedThoughts = [...collectedThoughts, {
+                                        type: 'error',
+                                        source: errorSource,
+                                        message: `Tool error (${errorSource}): ${errorMessage}`,
+                                        data: event.data,
+                                        timestamp: new Date(),
+                                    }];
+                                setThoughts(collectedThoughts);
+                            }
+                            else {
+                                // Fatal error: show toast and add error message
+                                toast.error(errorMessage);
+                                if (!hasAddedMessage) {
+                                    const errorAssistantMessage = {
+                                        role: 'assistant',
+                                        content: fullContent.trim()
+                                            ? `${fullContent}\n\n⚠️ **Error:** ${errorMessage}`
+                                            : `⚠️ **Error:** ${errorMessage}`,
+                                        timestamp: new Date(),
+                                        thoughts: collectedThoughts.length > 0 ? collectedThoughts : undefined,
+                                        agentName: streamingAgentName,
+                                    };
+                                    setMessages((prev) => [...prev, errorAssistantMessage]);
+                                    hasAddedMessage = true;
+                                }
+                                setStreamingContent('');
+                                setThoughts([]);
+                                setInterimMessages([]);
+                                setStreamingAgentName(undefined);
+                            }
+                            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;
+                    }
+                }
+            }
+            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) {
+            if (error.name === 'AbortError') {
+                // Request was cancelled - add partial response if any
+                if (streamingContent) {
+                    const partialMessage = {
+                        role: 'assistant',
+                        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);
+        }
+    };
+    const handleCancel = () => {
+        if (abortController) {
+            abortController.abort();
+        }
+    };
+    const handleQuickReply = (reply) => {
+        setQuickReplies([]);
+        handleSubmit(null, reply);
+    };
+    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([]);
+        setInput('');
+        toast.success('Started new chat');
+    };
+    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: `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,
+                            }));
+                            // 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,
+                                });
+                            }
+                            return displayMessages;
+                        })(), streamingContent: !useAgenticStreaming ? streamingContent : undefined, streamingAgentName: streamingAgentName, isLoading: !useAgenticStreaming && isLoading && messages.length === 0, onDeleteMessage: handleDeleteMessage, onRetryMessage: handleRetryMessage })), useAgenticStreaming && (isLoading || streamingContent) && (_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 }) })), 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], 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 && !isLoading && (_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';
+                                    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+                                }
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    if (input.trim() && !isLoading) {
+                                        handleSubmit(e);
+                                    }
+                                }
+                            }, placeholder: 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 }), isLoading ? (_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=SimpleChatInterface.js.map