@jazzmind/busibox-app 3.0.29 → 3.0.31

package/dist/components/chat/SimpleChatInterface.js

@@ -1,597 +1,2 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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}
- * />
- * ```
- */
-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';
-const DOC_LINK_RE = /^doc:(.+)$/;
-function CitationLink({ href, children, ...props }) {
-    if (href) {
-        const match = DOC_LINK_RE.exec(href);
-        if (match) {
-            const fileId = match[1];
-            return (_jsxs("a", { ...props, href: `/documents/${fileId}`, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 px-1.5 py-0.5 rounded hover:bg-blue-100 dark:hover:bg-blue-900/50 no-underline transition-colors border border-blue-200 dark:border-blue-700", title: "Open source document", children: [_jsx("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }), children] }));
-        }
-    }
-    return _jsx("a", { ...props, href: href, target: "_blank", rel: "noopener noreferrer", children: children });
-}
-const streamingMarkdownComponents = { a: CitationLink };
-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], 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 && !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" }) })] }) }))] }));
-}
+export { ChatInterface as SimpleChatInterface } from './ChatInterface';
 //# sourceMappingURL=SimpleChatInterface.js.map