orchid-ai 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,3385 @@
+import React, { useState, useMemo, useCallback, useEffect, Component, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const DEFAULT_CONFIG = {
+    service: 'claude',
+    model: 'claude-sonnet-4-20250514',
+    temperature: 0.7,
+    maxTokens: 4096,
+    chatLevel: 'none',
+    supportsImages: true,
+};
+// Default model configurations with compute weights
+const DEFAULT_MODELS = {
+    openai: [
+        {
+            id: 'gpt-4-turbo',
+            name: 'GPT-4 Turbo',
+            provider: 'openai',
+            available: true,
+            supportsImages: true,
+            computeWeight: 1.0,
+        },
+        {
+            id: 'gpt-4o',
+            name: 'GPT-4o',
+            provider: 'openai',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.8,
+        },
+        {
+            id: 'gpt-4o-mini',
+            name: 'GPT-4o Mini',
+            provider: 'openai',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.3,
+        },
+    ],
+    claude: [
+        {
+            id: 'claude-opus-4-20250514',
+            name: 'Claude Opus 4',
+            provider: 'claude',
+            available: true,
+            supportsImages: true,
+            computeWeight: 1.2,
+        },
+        {
+            id: 'claude-sonnet-4-20250514',
+            name: 'Claude Sonnet 4',
+            provider: 'claude',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.6,
+        },
+        {
+            id: 'claude-3-5-haiku-20241022',
+            name: 'Claude Haiku 3.5',
+            provider: 'claude',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.2,
+        },
+    ],
+    gemini: [
+        {
+            id: 'gemini-2.5-flash-lite',
+            name: 'Gemini 2.5 Flash Lite',
+            provider: 'gemini',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.2,
+        },
+        {
+            id: 'gemini-2.5-flash',
+            name: 'Gemini 2.5 Flash',
+            provider: 'gemini',
+            available: true,
+            supportsImages: true,
+            computeWeight: 0.5,
+        },
+        {
+            id: 'gemini-2.5-pro',
+            name: 'Gemini 2.5 Pro',
+            provider: 'gemini',
+            available: true,
+            supportsImages: true,
+            computeWeight: 1.0,
+        },
+    ],
+};
+const defaultTheme = {
+    // Default blue theme
+    primary: '#3b82f6',
+    primaryHover: '#2563eb',
+    primaryLight: '#eff6ff',
+    secondary: '#6b7280',
+    secondaryHover: '#4b5563',
+    background: '#ffffff',
+    backgroundSecondary: '#f9fafb',
+    backgroundTertiary: '#f3f4f6',
+    textPrimary: '#111827',
+    textSecondary: '#6b7280',
+    textTertiary: '#9ca3af',
+    textInverse: '#ffffff',
+    borderPrimary: '#e5e7eb',
+    borderSecondary: '#d1d5db',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+};
+// Default dark theme
+const defaultDarkTheme = {
+    colors: {
+        primary: {
+            50: 'rgb(239 246 255)', // blue-50
+            100: 'rgb(219 234 254)', // blue-100
+            400: 'rgb(96 165 250)', // blue-400
+            500: 'rgb(59 130 246)', // blue-500
+            600: 'rgb(37 99 235)', // blue-600
+            700: 'rgb(29 78 216)', // blue-700
+            800: 'rgb(30 64 175)', // blue-800
+            900: 'rgb(30 58 138)', // blue-900
+        },
+        background: {
+            primary: 'rgb(17 24 39)', // gray-900
+            secondary: 'rgb(31 41 55)', // gray-800
+            tertiary: 'rgb(55 65 81)', // gray-700
+        },
+        text: {
+            primary: 'rgb(249 250 251)', // gray-50
+            secondary: 'rgb(209 213 219)', // gray-300
+            tertiary: 'rgb(156 163 175)', // gray-400
+            inverse: 'rgb(17 24 39)', // gray-900
+        },
+        border: {
+            primary: 'rgb(55 65 81)', // gray-700
+            secondary: 'rgb(75 85 99)', // gray-600
+        },
+        surface: {
+            primary: 'rgb(31 41 55)', // gray-800
+            secondary: 'rgb(55 65 81)', // gray-700
+            tertiary: 'rgb(75 85 99)', // gray-600
+            elevated: 'rgb(17 24 39)', // gray-900
+        },
+        state: {
+            error: {
+                background: 'rgb(127 29 29 / 0.2)', // red-900/20
+                border: 'rgb(153 27 27)', // red-800
+                text: 'rgb(248 113 113)', // red-400
+            },
+            warning: {
+                background: 'rgb(146 64 14 / 0.2)', // amber-900/20
+                border: 'rgb(180 83 9)', // amber-800
+                text: 'rgb(251 191 36)', // amber-400
+            },
+            success: {
+                background: 'rgb(20 83 45 / 0.2)', // green-900/20
+                border: 'rgb(22 101 52)', // green-800
+                text: 'rgb(74 222 128)', // green-400
+            },
+        },
+    },
+    spacing: {
+        xs: '0.25rem', // 1
+        sm: '0.5rem', // 2
+        md: '1rem', // 4
+        lg: '1.5rem', // 6
+        xl: '2rem', // 8
+    },
+    borderRadius: {
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        full: '9999px',
+    },
+    shadows: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    },
+};
+// Default light theme
+const defaultLightTheme = {
+    colors: {
+        primary: {
+            50: 'rgb(239 246 255)', // blue-50
+            100: 'rgb(219 234 254)', // blue-100
+            400: 'rgb(96 165 250)', // blue-400
+            500: 'rgb(59 130 246)', // blue-500
+            600: 'rgb(37 99 235)', // blue-600
+            700: 'rgb(29 78 216)', // blue-700
+            800: 'rgb(30 64 175)', // blue-800
+            900: 'rgb(30 58 138)', // blue-900
+        },
+        background: {
+            primary: 'rgb(255 255 255)', // white
+            secondary: 'rgb(249 250 251)', // gray-50
+            tertiary: 'rgb(243 244 246)', // gray-100
+        },
+        text: {
+            primary: 'rgb(17 24 39)', // gray-900
+            secondary: 'rgb(75 85 99)', // gray-600
+            tertiary: 'rgb(107 114 128)', // gray-500
+            inverse: 'rgb(255 255 255)', // white
+        },
+        border: {
+            primary: 'rgb(229 231 235)', // gray-200
+            secondary: 'rgb(209 213 219)', // gray-300
+        },
+        surface: {
+            primary: 'rgb(249 250 251)', // gray-50
+            secondary: 'rgb(243 244 246)', // gray-100
+            tertiary: 'rgb(229 231 235)', // gray-200
+            elevated: 'rgb(255 255 255)', // white
+        },
+        state: {
+            error: {
+                background: 'rgb(254 242 242)', // red-50
+                border: 'rgb(252 165 165)', // red-200
+                text: 'rgb(153 27 27)', // red-800
+            },
+            warning: {
+                background: 'rgb(255 251 235)', // amber-50
+                border: 'rgb(252 211 77)', // amber-200
+                text: 'rgb(146 64 14)', // amber-800
+            },
+            success: {
+                background: 'rgb(240 253 244)', // green-50
+                border: 'rgb(167 243 208)', // green-200
+                text: 'rgb(22 101 52)', // green-800
+            },
+        },
+    },
+    spacing: {
+        xs: '0.25rem',
+        sm: '0.5rem',
+        md: '1rem',
+        lg: '1.5rem',
+        xl: '2rem',
+    },
+    borderRadius: {
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        full: '9999px',
+    },
+    shadows: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    },
+};
+
+function useStreamingAI({ userId, serverConfig, formData, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, modelSelection, onUsageTracked, chatLevel, additionalContext, verbose = false, }) {
+    // Map of chatId -> chat array
+    const [chats, setChats] = useState({});
+    const [currentChatId, setCurrentChatId] = useState(() => Date.now().toString());
+    const [isLoading, setIsLoading] = useState(false);
+    const chatsToUse = useMemo(() => (externalChats !== undefined ? externalChats : chats), [externalChats, chats]);
+    const setChatsToUse = useMemo(() => (externalSetChats !== undefined ? externalSetChats : setChats), [externalSetChats, setChats]);
+    const currentChatIdToUse = useMemo(() => externalCurrentChatId !== undefined
+        ? externalCurrentChatId
+        : currentChatId, [externalCurrentChatId, currentChatId]);
+    const setCurrentChatIdToUse = useMemo(() => externalSetCurrentChatId !== undefined
+        ? externalSetCurrentChatId
+        : setCurrentChatId, [externalSetCurrentChatId, setCurrentChatId]);
+    const log = (...args) => {
+        if (verbose) {
+            console.log(...args);
+        }
+    };
+    // Helper function to build URL from config
+    const buildUrlFromConfig = (config) => {
+        const protocol = config.secure !== undefined
+            ? config.secure
+                ? 'https:'
+                : 'http:'
+            : window.location.protocol;
+        const hostname = config.domain || window.location.hostname;
+        const port = config.port
+            ? `:${config.port}`
+            : window.location.port
+                ? `:${window.location.port}`
+                : '';
+        const suffix = config.suffix || '';
+        // If no domain specified, use relative URL (common with webpack proxy)
+        if (!config.domain && !config.port && !config.secure) {
+            return suffix;
+        }
+        return `${protocol}//${hostname}${port}${suffix}`;
+    };
+    // Helper to get current chat
+    const chat = chatsToUse[currentChatIdToUse] || [];
+    // Final cleanup function to fix any remaining formatting issues
+    const finalCleanup = (text) => {
+        return (text
+            // Fix spaces in email addresses (e.g., "max.ad ams" -> "max.adams")
+            .replace(/(\w+)\.(\w+)\s+(\w+)/g, '$1.$2$3')
+            // Fix missing spaces between words (e.g., "Company Corp Phone" -> "Company Corp Phone")
+            .replace(/([a-z])([A-Z])/g, '$1 $2')
+            // Remove the word "json" when it appears at the end of sentences
+            .replace(/\s+json\s*$/g, '')
+            .replace(/\s+json\s*\./g, '.')
+            // Fix any remaining spacing issues
+            .replace(/\s+/g, ' ')
+            .trim());
+    };
+    const sendQuery = (query, files, context) => {
+        // Allow sending if there's either text OR files
+        if (!query.trim() && (!files || files.length === 0)) {
+            log('❌ [CLIENT] Nothing to send - no text and no files');
+            return;
+        }
+        // Ensure we have a query when sending files
+        const finalQuery = query.trim()
+            ? query.trim()
+            : files && files.length > 0
+                ? 'Analyze the uploaded content and suggest relevant actions.'
+                : query;
+        const current = chatsToUse[currentChatIdToUse] || [];
+        const newMessages = [
+            ...current,
+            {
+                sender: 'user',
+                content: [{ type: 'text', content: finalQuery }],
+                timestamp: Date.now(),
+                files: files,
+            },
+            {
+                sender: 'ai',
+                content: [],
+                isLoading: true,
+                aiStatus: 'thinking',
+                timestamp: Date.now(),
+            },
+        ];
+        setChatsToUse((prev) => ({
+            ...prev,
+            [currentChatIdToUse]: newMessages,
+        }));
+        setIsLoading(true);
+        // Get current chat history (excluding the new messages we just added)
+        const chatHistory = current.map((msg) => ({
+            role: msg.sender === 'user' ? 'user' : 'assistant',
+            content: msg.content
+                .filter((block) => block.type === 'text')
+                .map((block) => block.content)
+                .join('\n'),
+        }));
+        // Build API URL from config with sensible default
+        const apiUrl = serverConfig ? buildUrlFromConfig(serverConfig) : '/api';
+        // Always use POST approach now - server will handle all file processing
+        if (files && files.length > 0) {
+            sendWithFiles(finalQuery, files, chatHistory, apiUrl, context);
+        }
+        else {
+            // For text-only, we'll still use POST for consistency
+            sendWithFiles(finalQuery, [], chatHistory, apiUrl, context);
+        }
+    };
+    // Unified POST approach - let server handle all file processing
+    const sendWithFiles = async (query, files, chatHistory, apiUrl, context // <-- Per-message context
+    ) => {
+        try {
+            // Convert files to a format the server can process
+            const filePromises = files.map(async (file) => {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const result = reader.result;
+                        const base64Data = result.split(',')[1]; // Remove data URL prefix
+                        resolve({
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            data: base64Data,
+                        });
+                    };
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                });
+            });
+            const processedFiles = await Promise.all(filePromises);
+            // Extract schema, additionalContext, and stayOnPage from serverConfig
+            const schema = serverConfig?.schema;
+            const serverAdditionalContext = serverConfig?.additionalContext;
+            const stayOnPage = serverConfig?.stayOnPage;
+            // Build stay-on-page context instruction
+            const stayOnPageContext = stayOnPage
+                ? 'IMPORTANT: You are embedded within a specific page. Do NOT generate navigation suggestions or routes to other pages. Focus ONLY on helping with the current form/page content. Stay on this page and do not suggest navigating elsewhere.'
+                : '';
+            // Merge all context sources (stayOnPage context takes priority)
+            const mergedContext = [
+                stayOnPageContext,
+                serverAdditionalContext || '',
+                additionalContext ? (typeof additionalContext === 'string' ? additionalContext : JSON.stringify(additionalContext)) : '',
+                context || ''
+            ].filter(Boolean).join('\n\n');
+            const requestBody = {
+                query,
+                userId,
+                chatHistory,
+                chatLevel,
+                formData: formData || {},
+                files: processedFiles,
+                // New: Include model selection in request
+                modelSelection: modelSelection || {
+                    provider: DEFAULT_CONFIG.service,
+                    model: DEFAULT_CONFIG.model,
+                    capabilities: {
+                        supportsImages: DEFAULT_CONFIG.supportsImages,
+                        computeWeight: 1.0,
+                    },
+                },
+                ...(schema ? { schema } : {}), // <-- NEW: Include schema from serverConfig!
+                ...(mergedContext ? { additionalContext: mergedContext } : {}), // <-- Include merged context
+            };
+            // Use EventSource-style approach with POST for streaming (bypasses webpack proxy issues)
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', `${apiUrl}/suggest`, true);
+                xhr.setRequestHeader('Content-Type', 'application/json');
+                xhr.setRequestHeader('Accept', 'text/event-stream');
+                xhr.setRequestHeader('Cache-Control', 'no-cache');
+                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+                let buffer = '';
+                let isProcessing = false;
+                let processedLines = new Set(); // Track processed lines to prevent duplication
+                xhr.onreadystatechange = async () => {
+                    if (xhr.readyState === 3) {
+                        // LOADING - receiving data
+                        if (isProcessing)
+                            return; // Prevent overlapping processing
+                        isProcessing = true;
+                        const newData = xhr.responseText.substring(buffer.length);
+                        buffer = xhr.responseText;
+                        if (newData) {
+                            // Process each line immediately as it arrives
+                            const lines = newData.split('\n');
+                            for (const line of lines) {
+                                // Skip if we've already processed this line
+                                if (processedLines.has(line))
+                                    continue;
+                                processedLines.add(line);
+                                if (line.startsWith('data: ')) {
+                                    try {
+                                        const data = JSON.parse(line.slice(6));
+                                        await handleStreamData(data);
+                                        // Force immediate UI update
+                                        await new Promise((resolve) => setTimeout(resolve, 0));
+                                    }
+                                    catch (e) {
+                                        console.warn('Failed to parse SSE data:', line);
+                                    }
+                                }
+                                else if (line.startsWith('event: end')) {
+                                    handleStreamEnd();
+                                    resolve();
+                                    return;
+                                }
+                                else if (line.startsWith('event: error')) {
+                                    const errorLine = lines.find((l) => l.startsWith('data: '));
+                                    if (errorLine) {
+                                        const errorData = JSON.parse(errorLine.slice(6));
+                                        handleStreamError(errorData);
+                                    }
+                                    reject(new Error('Stream error'));
+                                    return;
+                                }
+                            }
+                        }
+                        isProcessing = false;
+                    }
+                    else if (xhr.readyState === 4) {
+                        // DONE - This is crucial for completion detection
+                        // Process any remaining data in buffer (only unprocessed lines)
+                        if (buffer) {
+                            const lines = buffer.split('\n');
+                            for (const line of lines) {
+                                // Skip if we've already processed this line
+                                if (processedLines.has(line))
+                                    continue;
+                                processedLines.add(line);
+                                if (line.startsWith('data: ')) {
+                                    try {
+                                        const data = JSON.parse(line.slice(6));
+                                        await handleStreamData(data);
+                                    }
+                                    catch (e) {
+                                        console.warn('Failed to parse final SSE data:', line);
+                                    }
+                                }
+                            }
+                        }
+                        // Always ensure loading state is cleared when XHR completes
+                        setIsLoading(false);
+                        // Also clear the message-level loading state
+                        setChatsToUse((prev) => {
+                            const currentChat = prev[currentChatIdToUse] || [];
+                            const lastIdx = currentChat.length - 1;
+                            const lastMsg = currentChat[lastIdx];
+                            if (!lastMsg || lastMsg.sender !== 'ai')
+                                return prev;
+                            return {
+                                ...prev,
+                                [currentChatIdToUse]: [
+                                    ...currentChat.slice(0, lastIdx),
+                                    {
+                                        ...lastMsg,
+                                        isLoading: false,
+                                        aiStatus: 'none',
+                                    },
+                                ],
+                            };
+                        });
+                        if (xhr.status >= 200 && xhr.status < 300) {
+                            resolve();
+                        }
+                        else {
+                            reject(new Error(`HTTP error! status: ${xhr.status}`));
+                        }
+                    }
+                };
+                xhr.onerror = () => {
+                    console.error('XHR error:', xhr.statusText);
+                    handleStreamError({
+                        message: xhr.statusText || 'Network error',
+                        type: 'connection_error',
+                    });
+                    reject(new Error('Network error'));
+                };
+                // Add a timeout fallback to ensure loading state is cleared
+                const timeoutId = setTimeout(() => {
+                    setIsLoading(false);
+                }, 10000); // 10 second timeout
+                xhr.send(JSON.stringify(requestBody));
+                // Clear timeout when request completes
+                const originalResolve = resolve;
+                resolve = () => {
+                    clearTimeout(timeoutId);
+                    originalResolve();
+                };
+            });
+        }
+        catch (error) {
+            console.error('Error sending request:', error);
+            handleStreamError({
+                message: error.message || 'Unknown error',
+                type: 'connection_error',
+            });
+        }
+    };
+    // Common stream data handler
+    const handleStreamData = async (data) => {
+        setChatsToUse((prev) => {
+            const currentChat = prev[currentChatIdToUse] || [];
+            const lastIdx = currentChat.length - 1;
+            const lastMsg = currentChat[lastIdx];
+            if (!lastMsg || lastMsg.sender !== 'ai')
+                return prev;
+            let updatedContent = [...(lastMsg.content || [])];
+            // Handle text content (simplified - backend handles JSON detection)
+            if (data.text) {
+                log('📥 [useStreamingAI] Raw text received:', JSON.stringify(data.text));
+                // Debug: Log character analysis
+                log(`🔍 [useStreamingAI] Character analysis of received text: "${data.text}"`);
+                log(`🔍 [useStreamingAI] Length: ${data.text.length}, Contains spaces: ${data.text.includes(' ')}, Contains newlines: ${data.text.includes('\n')}`);
+                // Debug: Check for 'd' characters specifically
+                if (data.text.includes('d')) {
+                    // Log each 'd' character with its context
+                    for (let i = 0; i < data.text.length; i++) {
+                        if (data.text[i] === 'd') {
+                            const before = data.text.substring(Math.max(0, i - 2), i);
+                            const after = data.text.substring(i + 1, Math.min(data.text.length, i + 3));
+                            log(`🔍 [useStreamingAI] 'd' at position ${i}: "${before}[d]${after}" (char codes: ${data.text.charCodeAt(i - 1)}, ${data.text.charCodeAt(i)}, ${data.text.charCodeAt(i + 1)})`);
+                        }
+                    }
+                }
+                // NO CLEANING - just use the raw text as-is
+                const rawText = data.text;
+                log('🧹 [useStreamingAI] After cleaning:', JSON.stringify(rawText));
+                // Only process if there's still content after cleaning
+                if (rawText.trim()) {
+                    // If last content block is text, append to it; otherwise create new text block
+                    const lastContentIdx = updatedContent.length - 1;
+                    if (lastContentIdx >= 0 &&
+                        updatedContent[lastContentIdx].type === 'text') {
+                        const currentText = updatedContent[lastContentIdx].content;
+                        // Add space between words if needed
+                        let newText = currentText;
+                        if (data.text.trim()) {
+                            // For ChatGPT, we need to be more careful about spacing
+                            // ChatGPT sends individual words with leading spaces, so we need to handle this properly
+                            // SIMPLIFIED: Just use the text as-is from the backend
+                            // The backend is already handling spacing correctly for each provider
+                            newText = currentText + data.text;
+                            log(`🔧 [useStreamingAI] Using text as-is from backend: "${currentText}" + "${data.text}"`);
+                        }
+                        log('📝 [useStreamingAI] Appending to existing text block:');
+                        log('  Current text:', JSON.stringify(currentText));
+                        log('  New text:', JSON.stringify(data.text));
+                        log('  Combined text:', JSON.stringify(newText));
+                        // Update the text block
+                        updatedContent[lastContentIdx] = {
+                            type: 'text',
+                            content: newText,
+                        };
+                    }
+                    else {
+                        log('📝 [useStreamingAI] Creating new text block:', JSON.stringify(rawText));
+                        // Create new text block
+                        updatedContent.push({
+                            type: 'text',
+                            content: rawText,
+                        });
+                    }
+                }
+            }
+            // Handle loading suggestions (sent by backend when JSON starts)
+            if (data.type === 'loading-suggestions') {
+                log('🎯 [useStreamingAI] Received loading suggestions signal');
+                // Remove any existing loading-suggestions components
+                updatedContent = updatedContent.filter((block) => block.type !== 'loading-suggestions');
+                // Add loading suggestions component
+                updatedContent.push({
+                    type: 'loading-suggestions',
+                    content: data.message || 'Generating suggestions...',
+                });
+            }
+            // Handle suggestions (sent by backend when JSON is complete)
+            if (data.suggestions !== undefined) {
+                log('🎯 [useStreamingAI] Received suggestions:', data.suggestions);
+                // Remove any loading-suggestions components when we get actual suggestions
+                updatedContent = updatedContent.filter((block) => block.type !== 'loading-suggestions');
+                updatedContent.push({
+                    type: 'suggestions',
+                    content: data.suggestions,
+                });
+            }
+            // Handle JSON type - add suggestions if not already handled by text stream
+            if (data.type === 'json' &&
+                data.suggestions &&
+                data.suggestions.length > 0) {
+                // Check if we already have these suggestions (from text stream processing)
+                const hasSuggestions = updatedContent.some((block) => block.type === 'suggestions');
+                if (!hasSuggestions) {
+                    // Add the suggestions to the content
+                    updatedContent.push({
+                        type: 'suggestions',
+                        content: data.suggestions,
+                    });
+                }
+            }
+            // Determine if we should still be loading based on the data
+            const shouldBeLoading = data.aiStatus === 'typing' ||
+                data.aiStatus === 'suggesting' ||
+                data.isIntermediate ||
+                (data.text && data.aiStatus !== 'none');
+            const updatedMsg = {
+                ...lastMsg,
+                content: updatedContent,
+                isLoading: shouldBeLoading,
+                aiStatus: data.aiStatus || (data.isIntermediate ? 'suggesting' : 'none'),
+            };
+            // If this is a completion signal, force loading to false
+            if (data.aiStatus === 'none' ||
+                data.usage ||
+                (data.type === 'text' && data.aiStatus === 'none')) {
+                updatedMsg.isLoading = false;
+                updatedMsg.aiStatus = 'none';
+                // Apply final cleanup to all text blocks when stream completes
+                updatedContent = updatedContent.map((block) => {
+                    if (block.type === 'text') {
+                        const cleanedContent = finalCleanup(block.content);
+                        log('🧹 [useStreamingAI] Final cleanup applied:');
+                        log('  Before:', JSON.stringify(block.content));
+                        log('  After:', JSON.stringify(cleanedContent));
+                        return {
+                            ...block,
+                            content: cleanedContent,
+                        };
+                    }
+                    return block;
+                });
+            }
+            // Track usage when request completes (only for final responses)
+            if (!data.isIntermediate && data.usage && onUsageTracked) {
+                const tokens = data.usage.tokens || 0;
+                const computeWeight = modelSelection?.capabilities?.computeWeight || 1.0;
+                const computeUnits = tokens * computeWeight;
+                onUsageTracked(tokens, computeUnits);
+            }
+            return {
+                ...prev,
+                [currentChatIdToUse]: [...currentChat.slice(0, lastIdx), updatedMsg],
+            };
+        });
+        // Clear loading state when response is complete
+        if (data.aiStatus === 'none') {
+            // Explicit end of response
+            log('🎯 [useStreamingAI] Setting loading to false (aiStatus: none)');
+            setIsLoading(false);
+        }
+        else if (data.type === 'json' && !data.isIntermediate) {
+            // Final JSON response (not intermediate)
+            log('🎯 [useStreamingAI] Setting loading to false (final JSON)');
+            setIsLoading(false);
+        }
+        else if (data.type === 'text' && data.aiStatus === 'none') {
+            // Text with explicit completion signal
+            log('🎯 [useStreamingAI] Setting loading to false (text with aiStatus: none)');
+            setIsLoading(false);
+        }
+        else if (data.usage) {
+            // If we have usage data, this is likely the final response
+            log('🎯 [useStreamingAI] Setting loading to false (usage data received)');
+            setIsLoading(false);
+        }
+        else if (data.isIntermediate) {
+            // Keep loading for intermediate responses
+            log('🎯 [useStreamingAI] Setting loading to true (intermediate)');
+            setIsLoading(true);
+        }
+        else if (data.text && data.aiStatus === 'typing') {
+            // Keep loading for text streaming
+            log('🎯 [useStreamingAI] Keeping loading true (text streaming)');
+            setIsLoading(true);
+        }
+        else if (data.text && !data.aiStatus) {
+            // If we have text but no specific status, assume we're done
+            log('🎯 [useStreamingAI] Setting loading to false (text with no status)');
+            setIsLoading(false);
+        }
+    };
+    // Common stream end handler
+    const handleStreamEnd = () => {
+        setChatsToUse((prev) => {
+            const currentChat = prev[currentChatIdToUse] || [];
+            const lastIdx = currentChat.length - 1;
+            const lastMsg = currentChat[lastIdx];
+            if (!lastMsg || lastMsg.sender !== 'ai')
+                return prev;
+            return {
+                ...prev,
+                [currentChatIdToUse]: [
+                    ...currentChat.slice(0, lastIdx),
+                    {
+                        ...lastMsg,
+                        isLoading: false,
+                        aiStatus: 'none',
+                    },
+                ],
+            };
+        });
+        setIsLoading(false);
+    };
+    // Common stream error handler
+    const handleStreamError = (errorData) => {
+        try {
+            // Create a system error message in the chat
+            setChatsToUse((prev) => {
+                const currentChat = prev[currentChatIdToUse] || [];
+                const lastIdx = currentChat.length - 1;
+                // Remove the loading AI message and add an error message
+                const messagesWithoutLoading = currentChat.slice(0, lastIdx);
+                const errorMessage = {
+                    sender: 'system',
+                    content: [
+                        {
+                            type: 'text',
+                            content: errorData.message ||
+                                errorData.error ||
+                                'An error occurred while processing your request.',
+                        },
+                    ],
+                    isError: true,
+                    errorType: errorData.type || 'unknown_error',
+                    retryAfter: errorData.retryAfter,
+                    timestamp: Date.now(),
+                };
+                return {
+                    ...prev,
+                    [currentChatIdToUse]: [...messagesWithoutLoading, errorMessage],
+                };
+            });
+        }
+        catch (parseError) {
+            // Fallback for non-structured errors
+            setChatsToUse((prev) => {
+                const currentChat = prev[currentChatIdToUse] || [];
+                const lastIdx = currentChat.length - 1;
+                const messagesWithoutLoading = currentChat.slice(0, lastIdx);
+                const errorMessage = {
+                    sender: 'system',
+                    content: [
+                        {
+                            type: 'text',
+                            content: '❌ Unable to connect to AI service. Please check your connection and try again.',
+                        },
+                    ],
+                    isError: true,
+                    errorType: 'connection_error',
+                    timestamp: Date.now(),
+                };
+                return {
+                    ...prev,
+                    [currentChatIdToUse]: [...messagesWithoutLoading, errorMessage],
+                };
+            });
+        }
+        setIsLoading(false);
+    };
+    // Create a new chat session
+    const newChat = () => {
+        const newId = Date.now().toString();
+        setCurrentChatIdToUse(newId);
+        setChatsToUse((prev) => ({ ...prev, [newId]: [] }));
+    };
+    // Optionally: expose a way to switch chats
+    const switchChat = (chatId) => {
+        setCurrentChatIdToUse(chatId);
+    };
+    return {
+        chat,
+        chats: chatsToUse,
+        currentChatId: currentChatIdToUse,
+        isLoading,
+        sendQuery,
+        newChat,
+        switchChat,
+    };
+}
+
+/**
+ * Hook for getting AI suggestions based on a query
+ *
+ * @param userId - User ID for the suggestion request
+ * @param formData - Current form data context
+ * @param serverConfig - Server configuration
+ * @param debounceMs - Debounce delay in milliseconds (default: 300)
+ * @param maxSuggestions - Maximum number of suggestions to return (default: 10)
+ * @param chatLevel - Chat level to send to the server (default: 'none')
+ * @returns Object containing suggestions, loading state, error state, and control functions
+ */
+function useSuggestions({ userId, formData, serverConfig, debounceMs = 300, maxSuggestions = 10, chatLevel = 'none', // <-- default to 'none'
+modelSelection, onUsageTracked, context, // <-- Add context here
+ }) {
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Build API URL from config
+    const buildUrlFromConfig = useCallback((config) => {
+        const protocol = config.secure !== undefined
+            ? config.secure
+                ? 'https:'
+                : 'http:'
+            : window.location.protocol;
+        const hostname = config.domain || window.location.hostname;
+        const port = config.port
+            ? `:${config.port}`
+            : window.location.port
+                ? `:${window.location.port}`
+                : '';
+        const suffix = config.suffix || '';
+        if (!config.domain && !config.port && !config.secure) {
+            return suffix;
+        }
+        return `${protocol}//${hostname}${port}${suffix}`;
+    }, []);
+    const getSuggestions = useCallback(async (query, additionalContext) => {
+        if (!query.trim()) {
+            setSuggestions([]);
+            return [];
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const apiUrl = serverConfig ? buildUrlFromConfig(serverConfig) : '/api';
+            // Combine context with proper spacing and handle edge cases
+            const contextToSend = [context, additionalContext]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+            const response = await fetch(`${apiUrl}/suggest`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    query: query.trim(),
+                    userId,
+                    formData: formData || {},
+                    chatHistory: [], // Empty for standalone suggestions
+                    isCommandSearch: true, // Flag to indicate this is for command search
+                    chatLevel, // <-- always send this
+                    modelSelection: modelSelection || {
+                        provider: DEFAULT_CONFIG.service,
+                        model: DEFAULT_CONFIG.model,
+                        capabilities: {
+                            supportsImages: DEFAULT_CONFIG.supportsImages,
+                            computeWeight: 1.0,
+                        },
+                    },
+                    context: contextToSend,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            // Handle streaming response
+            const reader = response.body?.getReader();
+            if (!reader) {
+                throw new Error('No response body');
+            }
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let collectedSuggestions = [];
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.slice(6));
+                            if (data.suggestions) {
+                                collectedSuggestions = data.suggestions;
+                            }
+                            else if (data.suggestion) {
+                                collectedSuggestions.push(data.suggestion);
+                            }
+                            else if (data.streamedText) {
+                                // Extract JSON from streamedText for suggestions
+                                const jsonMatch = data.streamedText.match(/```json\s*(\[[\s\S]*?\])\s*```/);
+                                if (jsonMatch) {
+                                    try {
+                                        const jsonSuggestions = JSON.parse(jsonMatch[1]);
+                                        if (Array.isArray(jsonSuggestions) &&
+                                            jsonSuggestions.length > 0) {
+                                            collectedSuggestions = jsonSuggestions;
+                                        }
+                                    }
+                                    catch (e) {
+                                        console.warn('Failed to parse JSON from streamedText:', e);
+                                    }
+                                }
+                            }
+                            // Handle usage tracking
+                            if (data.usage && onUsageTracked) {
+                                const tokens = data.usage.tokens || 0;
+                                const computeUnits = data.usage.computeUnits || 0;
+                                onUsageTracked(tokens, computeUnits);
+                            }
+                        }
+                        catch (e) {
+                            console.warn('Failed to parse SSE data:', line);
+                        }
+                    }
+                    else if (line.startsWith('event: end')) {
+                        break;
+                    }
+                    else if (line.startsWith('event: error')) {
+                        const errorLine = lines.find((l) => l.startsWith('data: '));
+                        if (errorLine) {
+                            const errorData = JSON.parse(errorLine.slice(6));
+                            throw new Error(errorData.message || 'Unknown error');
+                        }
+                        throw new Error('Unknown error occurred');
+                    }
+                }
+            }
+            // Apply max suggestions limit
+            const limitedSuggestions = collectedSuggestions.slice(0, maxSuggestions);
+            setSuggestions(limitedSuggestions);
+            return limitedSuggestions;
+        }
+        catch (err) {
+            console.error('Error fetching suggestions:', err);
+            // Try to extract a structured error from the response
+            if (err instanceof Response) {
+                try {
+                    const errorObj = await err.json();
+                    setError(errorObj);
+                    setSuggestions([]);
+                    return errorObj;
+                }
+                catch (parseErr) {
+                    setError(err.statusText || 'Unknown error');
+                    setSuggestions([]);
+                    return new Error(err.statusText || 'Unknown error');
+                }
+            }
+            // If the error is already a structured object (from fetch or thrown by backend)
+            if (err &&
+                typeof err === 'object' &&
+                'error' in err &&
+                err.error &&
+                typeof err.error === 'object' &&
+                'message' in err.error) {
+                setError(err.error);
+                setSuggestions([]);
+                return err.error;
+            }
+            // Fallback: just a string or Error
+            setError(err instanceof Error ? err.message : 'Unknown error');
+            setSuggestions([]);
+            return err instanceof Error ? err : new Error('Unknown error');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [
+        userId,
+        formData,
+        serverConfig,
+        maxSuggestions,
+        chatLevel,
+        modelSelection,
+        onUsageTracked,
+        buildUrlFromConfig,
+        context,
+    ]);
+    const clearSuggestions = useCallback(() => {
+        setSuggestions([]);
+        setError(null);
+    }, []);
+    return {
+        suggestions,
+        isLoading,
+        error,
+        getSuggestions,
+        clearSuggestions,
+    };
+}
+/**
+ * Hook for getting suggestions with automatic debouncing
+ *
+ * @param query - The search query
+ * @param options - Configuration options
+ * @returns Object containing suggestions, loading state, and error state
+ */
+function useDebouncedSuggestions(query, options) {
+    const { suggestions, isLoading, error, getSuggestions, clearSuggestions } = useSuggestions(options);
+    const { debounceMs = 300 } = options;
+    useEffect(() => {
+        if (!query.trim()) {
+            clearSuggestions();
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            getSuggestions(query);
+        }, debounceMs);
+        return () => clearTimeout(timeoutId);
+    }, [query, getSuggestions, clearSuggestions, debounceMs]);
+    return {
+        suggestions,
+        isLoading,
+        error,
+    };
+}
+
+// Size mapping
+const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+// Get numeric size from IconSize
+const getSize = (size) => {
+    return typeof size === 'number' ? size : sizeMap[size];
+};
+// Map action types to icon names
+const getIconNameForAction = (action) => {
+    const lower = action.toLowerCase();
+    if (lower.includes('create') || lower.includes('new'))
+        return 'plus';
+    if (lower.includes('edit') || lower.includes('update'))
+        return 'pencil';
+    if (lower.includes('delete') || lower.includes('remove'))
+        return 'trash';
+    if (lower.includes('view'))
+        return 'eye';
+    return null;
+};
+// Individual icon components
+const iconComponents = {
+    // UI Icons
+    ai: ({ size, className = '', color = 'currentColor' }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `relative left-[0.5px] ${className}`, children: jsx("path", { d: "M18.7801 12.4715L13.4471 10.4877L11.4801 5.19677C11.3572 4.91331 11.149 4.62911 10.8748 4.44014C10.6005 4.25116 10.2696 4.06182 9.92912 4.06182C9.59815 4.06182 9.26696 4.25116 8.99273 4.44014C8.71849 4.62911 8.50133 4.91331 8.38786 5.19677L6.42087 10.4877L1.07815 12.4715C0.76609 12.566 0.491783 12.8491 0.293201 13.0381C0.104075 13.3215 0 13.6995 0 13.9829C0 14.3609 0.104075 14.6443 0.293201 14.9278C0.491783 15.2113 0.76609 15.4958 1.07815 15.5903L6.41117 17.5742L8.37816 22.8651C8.49164 23.1485 8.70926 23.4327 8.98349 23.6217C9.25773 23.8107 9.58892 24 9.91989 24C10.2603 24 10.5913 23.8107 10.8655 23.6217C11.1398 23.4327 11.3475 23.1485 11.4704 22.8651L13.4374 17.5742L18.7709 15.5903C19.0924 15.4958 19.3667 15.2127 19.5558 15.0238C19.7544 14.7403 19.849 14.3624 19.849 14.0789C19.849 13.7009 19.7544 13.4175 19.5558 13.134C19.3667 12.8506 19.0924 12.566 18.7709 12.4715H18.7801ZM12.8699 15.9686C12.643 16.0631 12.435 16.2506 12.2743 16.3451C12.1041 16.5341 11.9715 16.7242 11.8864 17.0076L9.92912 22.2985L7.96214 17.0076C7.88649 16.7242 7.75419 16.5341 7.58398 16.3451C7.41376 16.2506 7.21529 16.0631 6.98834 15.9686L1.67379 14.0789L6.98834 12.0932C7.21529 11.9987 7.41376 11.8112 7.58398 11.7167C7.75419 11.5278 7.88649 11.3377 7.96214 11.0542L9.92912 5.76332L11.8961 11.0542C11.9718 11.3377 12.1041 11.5278 12.2743 11.7167C12.4445 11.9057 12.643 11.9987 12.8699 12.0932L18.1942 14.0789L12.8699 15.9686ZM13.2388 3.30704C13.2388 3.02358 13.3237 2.83497 13.4845 2.74048C13.6358 2.55151 13.8439 2.45629 14.0709 2.45629H15.7257V0.85075C15.7257 0.567289 15.8108 0.377209 15.9621 0.188235C16.1229 0.0937486 16.331 0 16.5485 0C16.766 0 16.9742 0.0937486 17.1349 0.188235C17.2862 0.377209 17.3806 0.567289 17.3806 0.85075V2.45629H19.0354C19.2529 2.45629 19.4613 2.55151 19.6126 2.74048C19.7734 2.83497 19.8582 3.02358 19.8582 3.30704C19.8582 3.49601 19.7734 3.68461 19.6126 3.87359C19.4613 4.06256 19.2529 4.06182 19.0354 4.06182H17.3806V5.76332C17.3806 5.9523 17.2862 6.23539 17.1349 6.32987C16.9742 6.51885 16.766 6.61407 16.5485 6.61407C16.331 6.61407 16.1229 6.51885 15.9621 6.32987C15.8108 6.23539 15.7257 5.9523 15.7257 5.76332V4.06182H14.0709C13.8439 4.06182 13.6358 4.06256 13.4845 3.87359C13.3237 3.68461 13.2388 3.49601 13.2388 3.30704ZM24 8.21961C24 8.50307 23.9057 8.69167 23.7544 8.78616C23.5936 8.97513 23.3855 9.07036 23.168 9.07036H22.3451V9.92111C22.3451 10.1101 22.2508 10.2987 22.0995 10.4877C21.9387 10.6766 21.7306 10.6759 21.5131 10.6759C21.2956 10.6759 21.0875 10.6766 20.9267 10.4877C20.7754 10.2987 20.6903 10.1101 20.6903 9.92111V9.07036H19.8582C19.6408 9.07036 19.4326 8.97513 19.2718 8.78616C19.1205 8.69167 19.0354 8.50307 19.0354 8.21961C19.0354 8.03063 19.1205 7.84203 19.2718 7.65306C19.4326 7.46408 19.6408 7.46482 19.8582 7.46482H20.6903V6.61407C20.6903 6.33061 20.7754 6.14201 20.9267 6.04752C21.0875 5.85855 21.2956 5.76332 21.5131 5.76332C21.7306 5.76332 21.9387 5.85855 22.0995 6.04752C22.2508 6.14201 22.3451 6.33061 22.3451 6.61407V7.46482H23.168C23.3855 7.46482 23.5936 7.46408 23.7544 7.65306C23.9057 7.84203 24 8.03063 24 8.21961Z", fill: color }) })),
+    user: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-user ${className}`, children: [jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
+    system: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-settings ${className}`, children: [jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.39a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
+    paperclip: ({ size, className = '', color = 'currentColor' }) => (jsx("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) })),
+    image: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), jsx("polyline", { points: "21,15 16,10 5,21" })] })),
+    noImage: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), jsx("polyline", { points: "21,15 16,10 5,21" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] })),
+    microphone: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] })),
+    send: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22,2 15,22 11,13 2,9 22,2" })] })),
+    // Action Icons
+    plus: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
+    // AI Provider Icons
+    claude: ({ size, className = '' }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality", fillRule: "evenodd", clipRule: "evenodd", viewBox: "0 0 512 509.64", width: size, height: size, className: className, children: [jsx("path", { fill: "#D77655", d: "M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.612-115.613 115.612H115.612C52.026 509.639 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z" }), jsx("path", { fill: "#FCF2EE", fillRule: "nonzero", d: "M142.27 316.619l73.655-41.326 1.238-3.589-1.238-1.996-3.589-.001-12.31-.759-42.084-1.138-36.498-1.516-35.361-1.896-8.897-1.895-8.34-10.995.859-5.484 7.482-5.03 10.717.935 23.683 1.617 35.537 2.452 25.782 1.517 38.193 3.968h6.064l.86-2.451-2.073-1.517-1.618-1.517-36.776-24.922-39.81-26.338-20.852-15.166-11.273-7.683-5.687-7.204-2.451-15.721 10.237-11.273 13.75.935 3.513.936 13.928 10.716 29.749 23.027 38.848 28.612 5.687 4.727 2.275-1.617.278-1.138-2.553-4.271-21.13-38.193-22.546-38.848-10.035-16.101-2.654-9.655c-.935-3.968-1.617-7.304-1.617-11.374l11.652-15.823 6.445-2.073 15.545 2.073 6.547 5.687 9.655 22.092 15.646 34.78 24.265 47.291 7.103 14.028 3.791 12.992 1.416 3.968 2.449-.001v-2.275l1.997-26.641 3.69-32.707 3.589-42.084 1.239-11.854 5.863-14.206 11.652-7.683 9.099 4.348 7.482 10.716-1.036 6.926-4.449 28.915-8.72 45.294-5.687 30.331h3.313l3.792-3.791 15.342-20.372 25.782-32.227 11.374-12.789 13.27-14.129 8.517-6.724 16.1-.001 11.854 17.617-5.307 18.199-16.581 21.029-13.75 17.819-19.716 26.54-12.309 21.231 1.138 1.694 2.932-.278 44.536-9.479 24.062-4.347 28.714-4.928 12.992 6.066 1.416 6.167-5.106 12.613-30.71 7.583-36.018 7.204-53.636 12.689-.657.48.758.935 24.164 2.275 10.337.556h25.301l47.114 3.514 12.309 8.139 7.381 9.959-1.238 7.583-18.957 9.655-25.579-6.066-59.702-14.205-20.474-5.106-2.83-.001v1.694l17.061 16.682 31.266 28.233 39.152 36.397 1.997 8.999-5.03 7.102-5.307-.758-34.401-25.883-13.27-11.651-30.053-25.302-1.996-.001v2.654l6.926 10.136 36.574 54.975 1.895 16.859-2.653 5.485-9.479 3.311-10.414-1.895-21.408-30.054-22.092-33.844-17.819-30.331-2.173 1.238-10.515 113.261-4.929 5.788-11.374 4.348-9.478-7.204-5.03-11.652 5.03-23.027 6.066-30.052 4.928-23.886 4.449-29.674 2.654-9.858-.177-.657-2.173.278-22.37 30.71-34.021 45.977-26.919 28.815-6.445 2.553-11.173-5.789 1.037-10.337 6.243-9.2 37.257-47.392 22.47-29.371 14.508-16.961-.101-2.451h-.859l-98.954 64.251-17.618 2.275-7.583-7.103.936-11.652 3.589-3.791 29.749-20.474-.101.102.024.101z" })] })),
+    openai: ({ size, className = '' }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality", fillRule: "evenodd", clipRule: "evenodd", viewBox: "0 0 512 509.639", width: size, height: size, className: className, children: [jsx("path", { fill: "#fff", d: "M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.613-115.613 115.613H115.612C52.026 509.64 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z" }), jsx("path", { fillRule: "nonzero", d: "M412.037 221.764a90.834 90.834 0 004.648-28.67 90.79 90.79 0 00-12.443-45.87c-16.37-28.496-46.738-46.089-79.605-46.089-6.466 0-12.943.683-19.264 2.04a90.765 90.765 0 00-67.881-30.515h-.576c-.059.002-.149.002-.216.002-39.807 0-75.108 25.686-87.346 63.554-25.626 5.239-47.748 21.31-60.682 44.03a91.873 91.873 0 00-12.407 46.077 91.833 91.833 0 0023.694 61.553 90.802 90.802 0 00-4.649 28.67 90.804 90.804 0 0012.442 45.87c16.369 28.504 46.74 46.087 79.61 46.087a91.81 91.81 0 0019.253-2.04 90.783 90.783 0 0067.887 30.516h.576l.234-.001c39.829 0 75.119-25.686 87.357-63.588 25.626-5.242 47.748-21.312 60.682-44.033a91.718 91.718 0 0012.383-46.035 91.83 91.83 0 00-23.693-61.553l-.004-.005zM275.102 413.161h-.094a68.146 68.146 0 01-43.611-15.8 56.936 56.936 0 002.155-1.221l72.54-41.901a11.799 11.799 0 005.962-10.251V241.651l30.661 17.704c.326.163.55.479.596.84v84.693c-.042 37.653-30.554 68.198-68.21 68.273h.001zm-146.689-62.649a68.128 68.128 0 01-9.152-34.085c0-3.904.341-7.817 1.005-11.663.539.323 1.48.897 2.155 1.285l72.54 41.901a11.832 11.832 0 0011.918-.002l88.563-51.137v35.408a1.1 1.1 0 01-.438.94l-73.33 42.339a68.43 68.43 0 01-34.11 9.12 68.359 68.359 0 01-59.15-34.11l-.001.004zm-19.083-158.36a68.044 68.044 0 0135.538-29.934c0 .625-.036 1.731-.036 2.5v83.801l-.001.07a11.79 11.79 0 005.954 10.242l88.564 51.13-30.661 17.704a1.096 1.096 0 01-1.034.093l-73.337-42.375a68.36 68.36 0 01-34.095-59.143 68.412 68.412 0 019.112-34.085l-.004-.003zm251.907 58.621l-88.563-51.137 30.661-17.697a1.097 1.097 0 011.034-.094l73.337 42.339c21.109 12.195 34.132 34.746 34.132 59.132 0 28.604-17.849 54.199-44.686 64.078v-86.308c.004-.032.004-.065.004-.096 0-4.219-2.261-8.119-5.919-10.217zm30.518-45.93c-.539-.331-1.48-.898-2.155-1.286l-72.54-41.901a11.842 11.842 0 00-5.958-1.611c-2.092 0-4.15.558-5.957 1.611l-88.564 51.137v-35.408l-.001-.061a1.1 1.1 0 01.44-.88l73.33-42.303a68.301 68.301 0 0134.108-9.129c37.704 0 68.281 30.577 68.281 68.281a68.69 68.69 0 01-.984 11.545v.005zm-191.843 63.109l-30.668-17.704a1.09 1.09 0 01-.596-.84v-84.692c.016-37.685 30.593-68.236 68.281-68.236a68.332 68.332 0 0143.689 15.804 63.09 63.09 0 00-2.155 1.222l-72.54 41.9a11.794 11.794 0 00-5.961 10.248v.068l-.05 102.23zm16.655-35.91l39.445-22.782 39.444 22.767v45.55l-39.444 22.767-39.445-22.767v-45.535z" })] })),
+    gemini: ({ size, className = '' }) => (jsxs("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: size, height: size, className: className, children: [jsx("path", { d: "M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z", fill: "url(#prefix__paint0_radial_980_20147)" }), jsx("defs", { children: jsxs("radialGradient", { id: "prefix__paint0_radial_980_20147", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)", children: [jsx("stop", { offset: ".067", stopColor: "#9168C0" }), jsx("stop", { offset: ".343", stopColor: "#5684D1" }), jsx("stop", { offset: ".672", stopColor: "#1BA1E3" })] }) })] })),
+    grok: ({ size, className = '' }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality", fillRule: "evenodd", clipRule: "evenodd", viewBox: "0 0 512 509.641", width: size, height: size, className: className, children: [jsx("path", { d: "M115.612 0h280.776C459.975 0 512 52.026 512 115.612v278.416c0 63.587-52.025 115.613-115.612 115.613H115.612C52.026 509.641 0 457.615 0 394.028V115.612C0 52.026 52.026 0 115.612 0z" }), jsx("path", { fill: "#fff", d: "M213.235 306.019l178.976-180.002v.169l51.695-51.763c-.924 1.32-1.86 2.605-2.785 3.89-39.281 54.164-58.46 80.649-43.07 146.922l-.09-.101c10.61 45.11-.744 95.137-37.398 131.836-46.216 46.306-120.167 56.611-181.063 14.928l42.462-19.675c38.863 15.278 81.392 8.57 111.947-22.03 30.566-30.6 37.432-75.159 22.065-112.252-2.92-7.025-11.67-8.795-17.792-4.263l-124.947 92.341zm-25.786 22.437l-.033.034L68.094 435.217c7.565-10.429 16.957-20.294 26.327-30.149 26.428-27.803 52.653-55.359 36.654-94.302-21.422-52.112-8.952-113.177 30.724-152.898 41.243-41.254 101.98-51.661 152.706-30.758 11.23 4.172 21.016 10.114 28.638 15.639l-42.359 19.584c-39.44-16.563-84.629-5.299-112.207 22.313-37.298 37.308-44.84 102.003-1.128 143.81z" })] })),
+    pencil: ({ size, className = '', color = 'currentColor' }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) })),
+    trash: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("polyline", { points: "3,6 5,6 21,6" }), jsx("path", { d: "M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" })] })),
+    eye: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
+    // Error Icons
+    error: ({ size, className = '', color = '#EF4444' }) => (jsx("svg", { className: `w-${size} h-${size} ${className}`, fill: color, viewBox: "0 0 20 20", width: size, height: size, children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })),
+    warning: ({ size, className = '', color = '#F59E0B' }) => (jsx("svg", { className: `w-${size} h-${size} ${className}`, fill: color, viewBox: "0 0 20 20", width: size, height: size, children: jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) })),
+    timeout: ({ size, className = '', color = '#EAB308' }) => (jsx("svg", { className: `w-${size} h-${size} ${className}`, fill: color, viewBox: "0 0 20 20", width: size, height: size, children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.414L11 9.586V6z", clipRule: "evenodd" }) })),
+    'auth-error': ({ size, className = '', color = '#EF4444' }) => (jsx("svg", { className: `w-${size} h-${size} ${className}`, fill: color, viewBox: "0 0 20 20", width: size, height: size, children: jsx("path", { fillRule: "evenodd", d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-2a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z", clipRule: "evenodd" }) })),
+    // File Type Icons
+    pdf: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#DC2626" }), jsx("path", { d: "M19 2v5h5", stroke: "#B91C1C", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "2", rx: "1", fill: "white", opacity: "0.9" }), jsx("rect", { x: "9", y: "16", width: "10", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("rect", { x: "9", y: "19", width: "12", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("text", { x: "16", y: "25", fontSize: "5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "PDF" })] })),
+    word: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#2563EB" }), jsx("path", { d: "M19 2v5h5", stroke: "#1D4ED8", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "2", rx: "1", fill: "white", opacity: "0.9" }), jsx("rect", { x: "9", y: "16", width: "10", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("rect", { x: "9", y: "19", width: "12", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("text", { x: "16", y: "25", fontSize: "4.5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "DOC" })] })),
+    excel: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#059669" }), jsx("path", { d: "M19 2v5h5", stroke: "#047857", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "8", fill: "white", opacity: "0.2", rx: "1" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", stroke: "white", strokeWidth: "0.5", opacity: "0.6" }), jsx("line", { x1: "16", y1: "12", x2: "16", y2: "20", stroke: "white", strokeWidth: "0.5", opacity: "0.6" }), jsx("line", { x1: "20", y1: "12", x2: "20", y2: "20", stroke: "white", strokeWidth: "0.5", opacity: "0.6" }), jsx("line", { x1: "9", y1: "15", x2: "23", y2: "15", stroke: "white", strokeWidth: "0.5", opacity: "0.6" }), jsx("line", { x1: "9", y1: "17", x2: "23", y2: "17", stroke: "white", strokeWidth: "0.5", opacity: "0.6" }), jsx("text", { x: "16", y: "25", fontSize: "4.5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "XLS" })] })),
+    csv: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#7C3AED" }), jsx("path", { d: "M19 2v5h5", stroke: "#6D28D9", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "1.5", rx: "0.75", fill: "white", opacity: "0.8" }), jsx("rect", { x: "9", y: "15", width: "10", height: "1.5", rx: "0.75", fill: "white", opacity: "0.6" }), jsx("rect", { x: "9", y: "18", width: "12", height: "1.5", rx: "0.75", fill: "white", opacity: "0.6" }), jsx("circle", { cx: "11", cy: "13", r: "0.5", fill: "#7C3AED" }), jsx("circle", { cx: "15", cy: "13", r: "0.5", fill: "#7C3AED" }), jsx("circle", { cx: "19", cy: "13", r: "0.5", fill: "#7C3AED" }), jsx("text", { x: "16", y: "25", fontSize: "4.5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "CSV" })] })),
+    text: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#6B7280" }), jsx("path", { d: "M19 2v5h5", stroke: "#4B5563", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "1.5", rx: "0.75", fill: "white", opacity: "0.9" }), jsx("rect", { x: "9", y: "15", width: "12", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("rect", { x: "9", y: "18", width: "10", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("rect", { x: "9", y: "21", width: "8", height: "1.5", rx: "0.75", fill: "white", opacity: "0.5" }), jsx("text", { x: "16", y: "26", fontSize: "4.5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "TXT" })] })),
+    rtf: ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#EA580C" }), jsx("path", { d: "M19 2v5h5", stroke: "#C2410C", strokeWidth: "1", fill: "none" }), jsx("rect", { x: "9", y: "12", width: "14", height: "2", rx: "1", fill: "white", opacity: "0.9" }), jsx("rect", { x: "9", y: "16", width: "10", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("rect", { x: "9", y: "19", width: "12", height: "1.5", rx: "0.75", fill: "white", opacity: "0.7" }), jsx("text", { x: "10", y: "14", fontSize: "3", fill: "#EA580C", fontWeight: "bold", children: "B" }), jsx("text", { x: "13", y: "14", fontSize: "3", fill: "#EA580C", fontStyle: "italic", children: "I" }), jsx("text", { x: "16", y: "25", fontSize: "4.5", fill: "white", textAnchor: "middle", fontWeight: "600", children: "RTF" })] })),
+    'file-generic': ({ size, className = '' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", className: className, children: [jsx("path", { d: "M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z", fill: "#9CA3AF" }), jsx("path", { d: "M19 2v5h5", stroke: "#6B7280", strokeWidth: "1", fill: "none" }), jsx("circle", { cx: "16", cy: "16", r: "3", fill: "white", opacity: "0.8" }), jsx("circle", { cx: "16", cy: "16", r: "1", fill: "#9CA3AF" })] })),
+};
+// Main Icon component
+const Icon = ({ name, size = 'md', className = '', color, style, }) => {
+    const numericSize = getSize(size);
+    const IconComponent = iconComponents[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found`);
+        return null;
+    }
+    return (jsx("span", { className: className, style: style, children: jsx(IconComponent, { size: numericSize, className: "", color: color }) }));
+};
+/**
+ * Get an icon as an SVG string for vanilla JavaScript applications
+ * @param name - Icon name
+ * @param options - Icon options (size, color, className)
+ * @returns SVG string or null if icon not found
+ */
+const getIcon = (name, options = {}) => {
+    const { size = 'md', color = 'currentColor', className = '' } = options;
+    const numericSize = getSize(size);
+    const IconComponent = iconComponents[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found`);
+        return null;
+    }
+    // For file type icons that don't use color prop, we need special handling
+    const isFileIcon = [
+        'pdf',
+        'word',
+        'excel',
+        'csv',
+        'text',
+        'rtf',
+        'file-generic',
+    ].includes(name);
+    // Create the icon element with proper props
+    const element = IconComponent({
+        size: numericSize,
+        className,
+        color: isFileIcon ? undefined : color,
+    });
+    // Convert React element to SVG string
+    // Since we're dealing with SVG elements, we can extract their outerHTML
+    if (React.isValidElement(element)) {
+        // For now, return a simplified SVG string based on the icon name and options
+        // This is a basic implementation - you might want to use a proper React-to-string renderer
+        const svgProps = element.props;
+        const svgElement = element.type;
+        if (svgElement === 'svg') {
+            // Build SVG string manually for better control
+            const attrs = [
+                `width="${numericSize}"`,
+                `height="${numericSize}"`,
+                svgProps.viewBox ? `viewBox="${svgProps.viewBox}"` : '',
+                svgProps.fill !== undefined ? `fill="${svgProps.fill}"` : '',
+                svgProps.stroke ? `stroke="${svgProps.stroke}"` : '',
+                svgProps.strokeWidth ? `stroke-width="${svgProps.strokeWidth}"` : '',
+                className ? `class="${className}"` : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            // This is a simplified approach - for production you'd want proper serialization
+            return `<svg ${attrs}>${svgProps.children || ''}</svg>`;
+        }
+    }
+    // Fallback: return a basic SVG string for the icon
+    return getBasicSvgString(name, numericSize, color, className);
+};
+/**
+ * Fallback function to generate basic SVG strings for icons
+ */
+const getBasicSvgString = (name, size, color, className) => {
+    const classAttr = className ? ` class="${className}"` : '';
+    // Basic SVG templates for each icon type
+    switch (name) {
+        case 'plus':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
+        case 'pencil':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>`;
+        case 'trash':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/></svg>`;
+        case 'eye':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+        case 'ai':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>`;
+        case 'user':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
+        case 'send':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9 22,2"/></svg>`;
+        case 'error':
+            return `<svg width="${size}" height="${size}" fill="#EF4444" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`;
+        case 'warning':
+            return `<svg width="${size}" height="${size}" fill="#F59E0B" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`;
+        case 'timeout':
+            return `<svg width="${size}" height="${size}" fill="#EAB308" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.414L11 9.586V6z" clip-rule="evenodd"/></svg>`;
+        case 'auth-error':
+            return `<svg width="${size}" height="${size}" fill="#EF4444" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-2a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"/></svg>`;
+        case 'claude':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 509.64"${classAttr}><path fill="#D77655" d="M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.612-115.613 115.612H115.612C52.026 509.639 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z"/><path fill="#FCF2EE" fill-rule="nonzero" d="M142.27 316.619l73.655-41.326 1.238-3.589-1.238-1.996-3.589-.001-12.31-.759-42.084-1.138-36.498-1.516-35.361-1.896-8.897-1.895-8.34-10.995.859-5.484 7.482-5.03 10.717.935 23.683 1.617 35.537 2.452 25.782 1.517 38.193 3.968h6.064l.86-2.451-2.073-1.517-1.618-1.517-36.776-24.922-39.81-26.338-20.852-15.166-11.273-7.683-5.687-7.204-2.451-15.721 10.237-11.273 13.75.935 3.513.936 13.928 10.716 29.749 23.027 38.848 28.612 5.687 4.727 2.275-1.617.278-1.138-2.553-4.271-21.13-38.193-22.546-38.848-10.035-16.101-2.654-9.655c-.935-3.968-1.617-7.304-1.617-11.374l11.652-15.823 6.445-2.073 15.545 2.073 6.547 5.687 9.655 22.092 15.646 34.78 24.265 47.291 7.103 14.028 3.791 12.992 1.416 3.968 2.449-.001v-2.275l1.997-26.641 3.69-32.707 3.589-42.084 1.239-11.854 5.863-14.206 11.652-7.683 9.099 4.348 7.482 10.716-1.036 6.926-4.449 28.915-8.72 45.294-5.687 30.331h3.313l3.792-3.791 15.342-20.372 25.782-32.227 11.374-12.789 13.27-14.129 8.517-6.724 16.1-.001 11.854 17.617-5.307 18.199-16.581 21.029-13.75 17.819-19.716 26.54-12.309 21.231 1.138 1.694 2.932-.278 44.536-9.479 24.062-4.347 28.714-4.928 12.992 6.066 1.416 6.167-5.106 12.613-30.71 7.583-36.018 7.204-53.636 12.689-.657.48.758.935 24.164 2.275 10.337.556h25.301l47.114 3.514 12.309 8.139 7.381 9.959-1.238 7.583-18.957 9.655-25.579-6.066-59.702-14.205-20.474-5.106-2.83-.001v1.694l17.061 16.682 31.266 28.233 39.152 36.397 1.997 8.999-5.03 7.102-5.307-.758-34.401-25.883-13.27-11.651-30.053-25.302-1.996-.001v2.654l6.926 10.136 36.574 54.975 1.895 16.859-2.653 5.485-9.479 3.311-10.414-1.895-21.408-30.054-22.092-33.844-17.819-30.331-2.173 1.238-10.515 113.261-4.929 5.788-11.374 4.348-9.478-7.204-5.03-11.652 5.03-23.027 6.066-30.052 4.928-23.886 4.449-29.674 2.654-9.858-.177-.657-2.173.278-22.37 30.71-34.021 45.977-26.919 28.815-6.445 2.553-11.173-5.789 1.037-10.337 6.243-9.2 37.257-47.392 22.47-29.371 14.508-16.961-.101-2.451h-.859l-98.954 64.251-17.618 2.275-7.583-7.103.936-11.652 3.589-3.791 29.749-20.474-.101.102.024.101z"/></svg>`;
+        case 'openai':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 509.639"${classAttr}><path fill="#fff" d="M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.613-115.613 115.613H115.612C52.026 509.64 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z"/><path fill-rule="nonzero" d="M412.037 221.764a90.834 90.834 0 004.648-28.67 90.79 90.79 0 00-12.443-45.87c-16.37-28.496-46.738-46.089-79.605-46.089-6.466 0-12.943.683-19.264 2.04a90.765 90.765 0 00-67.881-30.515h-.576c-.059.002-.149.002-.216.002-39.807 0-75.108 25.686-87.346 63.554-25.626 5.239-47.748 21.31-60.682 44.03a91.873 91.873 0 00-12.407 46.077 91.833 91.833 0 0023.694 61.553 90.802 90.802 0 00-4.649 28.67 90.804 90.804 0 0012.442 45.87c16.369 28.504 46.74 46.087 79.61 46.087a91.81 91.81 0 0019.253-2.04 90.783 90.783 0 0067.887 30.516h.576l.234-.001c39.829 0 75.119-25.686 87.357-63.588 25.626-5.242 47.748-21.312 60.682-44.033a91.718 91.718 0 0012.383-46.035 91.83 91.83 0 00-23.693-61.553l-.004-.005zM275.102 413.161h-.094a68.146 68.146 0 01-43.611-15.8 56.936 56.936 0 002.155-1.221l72.54-41.901a11.799 11.799 0 005.962-10.251V241.651l30.661 17.704c.326.163.55.479.596.84v84.693c-.042 37.653-30.554 68.198-68.21 68.273h.001zm-146.689-62.649a68.128 68.128 0 01-9.152-34.085c0-3.904.341-7.817 1.005-11.663.539.323 1.48.897 2.155 1.285l72.54 41.901a11.832 11.832 0 0011.918-.002l88.563-51.137v35.408a1.1 1.1 0 01-.438.94l-73.33 42.339a68.43 68.43 0 01-34.11 9.12 68.359 68.359 0 01-59.15-34.11l-.001.004zm-19.083-158.36a68.044 68.044 0 0135.538-29.934c0 .625-.036 1.731-.036 2.5v83.801l-.001.07a11.79 11.79 0 005.954 10.242l88.564 51.13-30.661 17.704a1.096 1.096 0 01-1.034.093l-73.337-42.375a68.36 68.36 0 01-34.095-59.143 68.412 68.412 0 019.112-34.085l-.004-.003zm251.907 58.621l-88.563-51.137 30.661-17.697a1.097 1.097 0 011.034-.094l73.337 42.339c21.109 12.195 34.132 34.746 34.132 59.132 0 28.604-17.849 54.199-44.686 64.078v-86.308c.004-.032.004-.065.004-.096 0-4.219-2.261-8.119-5.919-10.217zm30.518-45.93c-.539-.331-1.48-.898-2.155-1.286l-72.54-41.901a11.842 11.842 0 00-5.958-1.611c-2.092 0-4.15.558-5.957 1.611l-88.564 51.137v-35.408l-.001-.061a1.1 1.1 0 01.44-.88l73.33-42.303a68.301 68.301 0 0134.108-9.129c37.704 0 68.281 30.577 68.281 68.281a68.69 68.69 0 01-.984 11.545v.005zm-191.843 63.109l-30.668-17.704a1.09 1.09 0 01-.596-.84v-84.692c.016-37.685 30.593-68.236 68.281-68.236a68.332 68.332 0 0143.689 15.804 63.09 63.09 0 00-2.155 1.222l-72.54 41.9a11.794 11.794 0 00-5.961 10.248v.068l-.05 102.23zm16.655-35.91l39.445-22.782 39.444 22.767v45.55l-39.444 22.767-39.445-22.767v-45.535z"/></svg>`;
+        case 'gemini':
+            return `<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="${size}" height="${size}"${classAttr}><path d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z" fill="url(#prefix__paint0_radial_980_20147)"/><defs><radialGradient id="prefix__paint0_radial_980_20147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"><stop offset=".067" stop-color="#9168C0"/><stop offset=".343" stop-color="#5684D1"/><stop offset=".672" stop-color="#1BA1E3"/></radialGradient></defs></svg>`;
+        case 'grok':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 512 509.641"${classAttr}><path d="M115.612 0h280.776C459.975 0 512 52.026 512 115.612v278.416c0 63.587-52.025 115.613-115.612 115.613H115.612C52.026 509.641 0 457.615 0 394.028V115.612C0 52.026 52.026 0 115.612 0z"/><path fill="#fff" d="M213.235 306.019l178.976-180.002v.169l51.695-51.763c-.924 1.32-1.86 2.605-2.785 3.89-39.281 54.164-58.46 80.649-43.07 146.922l-.09-.101c10.61 45.11-.744 95.137-37.398 131.836-46.216 46.306-120.167 56.611-181.063 14.928l42.462-19.675c38.863 15.278 81.392 8.57 111.947-22.03 30.566-30.6 37.432-75.159 22.065-112.252-2.92-7.025-11.67-8.795-17.792-4.263l-124.947 92.341zm-25.786 22.437l-.033.034L68.094 435.217c7.565-10.429 16.957-20.294 26.327-30.149 26.428-27.803 52.653-55.359 36.654-94.302-21.422-52.112-8.952-113.177 30.724-152.898 41.243-41.254 101.98-51.661 152.706-30.758 11.23 4.172 21.016 10.114 28.638 15.639l-42.359 19.584c-39.44-16.563-84.629-5.299-112.207 22.313-37.298 37.308-44.84 102.003-1.128 143.81z"/></svg>`;
+        case 'pdf':
+            return `<svg width="${size}" height="${size}" viewBox="0 0 32 32" fill="none"${classAttr}><path d="M6 4a2 2 0 012-2h11l5 5v19a2 2 0 01-2 2H8a2 2 0 01-2-2V4z" fill="#DC2626"/><path d="M19 2v5h5" stroke="#B91C1C" stroke-width="1" fill="none"/><text x="16" y="25" font-size="5" fill="white" text-anchor="middle" font-weight="600">PDF</text></svg>`;
+        case 'image':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><circle cx="12" cy="12" r="10"/></svg>`;
+        case 'noImage':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/><line x1="3" y1="3" x2="21" y2="21"/></svg>`;
+        default:
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><circle cx="12" cy="12" r="10"/></svg>`;
+    }
+};
+/**
+ * Universal action icon function - works for both React and vanilla JS
+ * @param action - Action type string
+ * @param framework - Target framework ('react' or 'vanilla')
+ * @param options - Icon options (only used for vanilla)
+ * @returns React component or SVG string based on framework
+ */
+const getActionIcon = (action, framework = 'react', options = {}) => {
+    const iconName = getIconNameForAction(action);
+    if (!iconName)
+        return null;
+    if (framework === 'react') {
+        return (jsx(Icon, { name: iconName, size: options.size || 'sm', className: options.className, color: options.color }));
+    }
+    else {
+        return getIcon(iconName, { size: options.size || 'sm', ...options });
+    }
+};
+/**
+ * Get action icon as React component (legacy compatibility)
+ * @param action - Action type string
+ * @returns React component or null
+ */
+const getActionIconReact = (action) => {
+    return getActionIcon(action, 'react');
+};
+/**
+ * Get provider icon name for AI providers
+ * @param provider - Provider name (openai, claude, gemini)
+ * @returns Icon name or null if not found
+ */
+const getProviderIconName = (provider) => {
+    if (!provider)
+        return null;
+    switch (provider.toLowerCase()) {
+        case 'openai':
+            return 'openai';
+        case 'claude':
+            return 'claude';
+        case 'gemini':
+            return 'gemini';
+        case 'grok':
+            return 'grok';
+        default:
+            return null;
+    }
+};
+
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('AI Command Center Error Boundary caught an error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (this.props.fallback || (jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg max-w-md mx-auto", children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "flex-shrink-0 w-5 h-5 text-red-500 mt-0.5", children: jsx("svg", { fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("h3", { className: "text-red-800 font-semibold text-sm mb-2", children: "Something went wrong" }), jsx("p", { className: "text-red-700 text-sm mb-3 leading-relaxed", children: "The chat interface encountered an error. Please try refreshing the page or contact support if the problem persists." }), this.state.error && (jsxs("details", { className: "text-xs text-red-600", children: [jsx("summary", { className: "cursor-pointer hover:text-red-800 font-medium mb-1", children: "View error details" }), jsx("div", { className: "mt-2 p-2 bg-red-100 rounded border border-red-200 overflow-auto", children: jsxs("pre", { className: "whitespace-pre-wrap font-mono text-xs", children: [this.state.error.message, this.state.error.stack && (jsxs(Fragment, { children: ['\n\nStack trace:\n', this.state.error.stack] }))] }) })] })), jsxs("div", { className: "mt-3 flex gap-2", children: [jsx("button", { onClick: () => window.location.reload(), className: "px-3 py-1.5 bg-red-600 text-white text-xs font-medium rounded hover:bg-red-700 transition-colors", children: "Refresh Page" }), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined }), className: "px-3 py-1.5 bg-gray-100 text-gray-700 text-xs font-medium rounded hover:bg-gray-200 transition-colors", children: "Try Again" })] })] })] }) })));
+        }
+        return this.props.children;
+    }
+}
+
+// Helper: determine whether an object contains any displayable (non-empty) values
+function hasDisplayableFields(value) {
+    if (value === null || value === undefined)
+        return false;
+    if (typeof value === 'string')
+        return value.trim().length > 0;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return true;
+    if (Array.isArray(value))
+        return value.some((v) => hasDisplayableFields(v));
+    if (typeof value === 'object') {
+        return Object.entries(value).some(([key, v]) => {
+            if (key.startsWith('_') || key.startsWith('$'))
+                return false;
+            return hasDisplayableFields(v);
+        });
+    }
+    return false;
+}
+function ObjectViewer({ data, keyName, level = 0, isHighlighted = false, theme, }) {
+    const [isExpanded, setIsExpanded] = useState(level === 0); // Auto-expand first level
+    const isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    const isArray = Array.isArray(data);
+    const isPrimitive = !isObject && !isArray;
+    // Helper to format field names nicely
+    const formatFieldName = (key) => {
+        // Skip internal fields
+        if (key.startsWith('_') || key.startsWith('$'))
+            return '';
+        // Convert camelCase to Title Case
+        return key
+            .replace(/([A-Z])/g, ' $1') // Add space before capital letters
+            .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
+            .trim();
+    };
+    // Helper to format values nicely
+    const formatValue = (value) => {
+        if (value === null)
+            return 'None';
+        if (value === undefined)
+            return 'Not set';
+        if (typeof value === 'string') {
+            // Filter out empty strings
+            if (value === '')
+                return '';
+            return value; // No quotes
+        }
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (typeof value === 'number') {
+            // Check if this looks like a Unix timestamp (milliseconds since epoch)
+            // Typical range: 1000000000000 (2001) to 2000000000000 (2033)
+            if (value > 1000000000000 && value < 2000000000000) {
+                try {
+                    const date = new Date(value);
+                    // Only format if it's a valid date and not too far in the past/future
+                    if (!isNaN(date.getTime()) && date.getFullYear() > 1970 && date.getFullYear() < 2100) {
+                        return date.toLocaleDateString('en-US', {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                        });
+                    }
+                }
+                catch (e) {
+                    // Fall through to default number formatting
+                }
+            }
+            return value.toString();
+        }
+        return String(value);
+    };
+    // Helper to get array summary
+    const getArraySummary = (arr) => {
+        if (arr.length === 0)
+            return 'No items';
+        if (arr.length === 1)
+            return '1 item';
+        return `${arr.length} items`;
+    };
+    ({
+        color: isHighlighted
+            ? theme?.colors.text.inverse || '#ffffff'
+            : theme?.colors.text.primary || '#f9fafb',
+    });
+    const keyStyle = {
+        color: isHighlighted
+            ? theme?.colors.text.inverse || '#ffffff'
+            : theme?.colors.text.secondary || '#d1d5db',
+        fontWeight: '500',
+    };
+    const valueStyle = {
+        color: isHighlighted
+            ? 'rgba(255, 255, 255, 0.9)'
+            : theme?.colors.text.primary || '#f9fafb',
+    };
+    const metaStyle = {
+        color: isHighlighted
+            ? 'rgba(255, 255, 255, 0.6)'
+            : theme?.colors.text.tertiary || '#9ca3af',
+        fontSize: '11px',
+    };
+    // For root level (level 0), don't show the container, just show contents
+    if (level === 0 && isObject) {
+        const filteredEntries = Object.entries(data).filter(([key, value]) => {
+            // Skip internal fields
+            if (key.startsWith('_') || key.startsWith('$'))
+                return false;
+            // Skip empty values
+            if (value === '' || value === null || value === undefined)
+                return false;
+            return true;
+        });
+        return (jsx("div", { className: "space-y-2", children: filteredEntries.map(([key, value]) => (jsx(ObjectViewer, { data: value, keyName: key, level: 1, isHighlighted: isHighlighted, theme: theme }, key))) }));
+    }
+    if (isPrimitive) {
+        const formattedKey = formatFieldName(keyName || '');
+        if (!formattedKey)
+            return null; // Skip internal fields
+        // Skip empty values
+        const formattedValue = formatValue(data);
+        if (formattedValue === '')
+            return null;
+        return (jsxs("div", { className: "flex items-start gap-2 py-1 text-sm", style: { marginLeft: `${(level - 1) * 16}px` }, children: [jsxs("span", { style: keyStyle, className: "min-w-0 flex-shrink-0", children: [formattedKey, ":"] }), jsx("span", { style: valueStyle, className: "flex-1 break-words", children: formattedValue })] }));
+    }
+    const formattedKey = formatFieldName(keyName || '');
+    if (!formattedKey && keyName)
+        return null; // Skip internal fields
+    if (isArray) {
+        return (jsxs("div", { style: { marginLeft: `${(level - 1) * 16}px` }, children: [jsxs("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        setIsExpanded(!isExpanded);
+                    }, className: "flex items-center gap-2 py-1 hover:opacity-80 transition-opacity text-sm w-full text-left", children: [jsx("svg", { className: `w-3 h-3 transition-transform flex-shrink-0 ${isExpanded ? 'rotate-90' : ''}`, fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }), jsxs("span", { style: keyStyle, className: "font-medium", children: [formattedKey, ":"] }), jsx("span", { style: metaStyle, children: getArraySummary(data) })] }), isExpanded && (jsx("div", { className: "mt-1 space-y-1", children: data.map((item, index) => {
+                        const isItemObject = item !== null &&
+                            typeof item === 'object' &&
+                            !Array.isArray(item);
+                        if (isItemObject) {
+                            return (jsx("div", { style: { marginLeft: `${(level - 1) * 16 + 16}px` }, children: jsx(ObjectViewer, { data: item, keyName: `Item ${index + 1}`, level: level + 1, isHighlighted: isHighlighted, theme: theme }) }, index));
+                        }
+                        else {
+                            return (jsxs("div", { className: "flex items-center gap-2 py-1 text-sm", style: { marginLeft: `${(level - 1) * 16 + 16}px` }, children: [jsxs("span", { style: metaStyle, className: "text-xs", children: [index + 1, "."] }), jsx("span", { style: valueStyle, children: formatValue(item) })] }, index));
+                        }
+                    }) }))] }));
+    }
+    // Regular object
+    return (jsxs("div", { style: { marginLeft: `${(level - 1) * 16}px` }, children: [jsxs("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setIsExpanded(!isExpanded);
+                }, className: "flex items-center gap-2 py-1 hover:opacity-80 transition-opacity text-sm w-full text-left", children: [jsx("svg", { className: `w-3 h-3 transition-transform flex-shrink-0 ${isExpanded ? 'rotate-90' : ''}`, fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }), jsx("span", { style: keyStyle, className: "font-medium", children: formattedKey }), jsxs("span", { style: metaStyle, children: [Object.entries(data).filter(([key, value]) => {
+                                // Skip internal fields
+                                if (key.startsWith('_') || key.startsWith('$'))
+                                    return false;
+                                // Skip empty values
+                                if (value === '' || value === null || value === undefined)
+                                    return false;
+                                return true;
+                            }).length, ' ', "fields"] })] }), isExpanded && (jsx("div", { className: "mt-1 space-y-1", children: Object.entries(data)
+                    .filter(([key, value]) => {
+                    // Skip internal fields
+                    if (key.startsWith('_') || key.startsWith('$'))
+                        return false;
+                    // Skip empty values
+                    if (value === '' || value === null || value === undefined)
+                        return false;
+                    return true;
+                })
+                    .map(([key, value]) => (jsx(ObjectViewer, { data: value, keyName: key, level: level + 1, isHighlighted: isHighlighted, theme: theme }, key))) }))] }));
+}
+function SuggestionCard({ suggestion, onClick, isHighlighted = false, theme, showIcon = true, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    return (jsxs("div", { className: "rounded-lg overflow-hidden transition-all duration-200 cursor-pointer group", style: {
+            backgroundColor: isHighlighted
+                ? theme?.colors.primary[600] || '#2563eb'
+                : theme?.colors.surface.primary || '#1f2937',
+            border: `1px solid ${isHighlighted
+                ? theme?.colors.primary[500] || '#3b82f6'
+                : theme?.colors.border.primary || '#374151'}`,
+        }, onClick: () => onClick(suggestion), children: [jsx("div", { className: "p-3", children: jsxs("div", { className: "flex items-center gap-3", children: [showIcon && (jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-colors", style: {
+                                backgroundColor: isHighlighted
+                                    ? theme?.colors.primary[700] || '#1d4ed8'
+                                    : theme?.colors.surface.secondary || '#374151',
+                            }, children: jsx("span", { className: "text-sm", style: {
+                                    color: isHighlighted
+                                        ? theme?.colors.text.inverse || '#ffffff'
+                                        : theme?.colors.primary[400] || '#60a5fa',
+                                }, children: getActionIconReact(suggestion.actionType) }) })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium", style: {
+                                                backgroundColor: isHighlighted
+                                                    ? theme?.colors.primary[700] || '#1d4ed8'
+                                                    : theme?.colors.surface.secondary || '#374151',
+                                                color: isHighlighted
+                                                    ? theme?.colors.text.inverse || '#ffffff'
+                                                    : theme?.colors.text.secondary || '#9ca3af',
+                                            }, children: suggestion.actionType.toUpperCase() }), suggestion.shortcut && (jsx("span", { className: "text-xs font-mono", style: { color: theme?.colors.text.tertiary || '#6b7280' }, children: suggestion.shortcut }))] }), jsx("div", { className: "font-medium transition-colors mb-1", style: {
+                                        color: isHighlighted
+                                            ? theme?.colors.text.inverse || '#ffffff'
+                                            : theme?.colors.text.primary || '#f9fafb',
+                                    }, children: suggestion.action }), suggestion.message && (jsx("p", { className: "text-sm line-clamp-2", style: {
+                                        color: isHighlighted
+                                            ? theme?.colors.text.inverse || '#ffffff'
+                                            : theme?.colors.text.secondary || '#d1d5db',
+                                    }, children: suggestion.message }))] }), jsx("div", { className: "flex-shrink-0 transition-colors", style: {
+                                color: isHighlighted
+                                    ? theme?.colors.text.inverse || '#ffffff'
+                                    : theme?.colors.text.tertiary || '#9ca3af',
+                            }, children: jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) })] }) }), ((suggestion.formState &&
+                Object.keys(suggestion.formState).length > 0) ||
+                suggestion.path ||
+                (suggestion.message && !isExpanded)) && (jsxs("div", { className: "border-t", style: { borderColor: theme?.colors.border.primary || '#374151' }, children: [jsxs("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            setIsExpanded(!isExpanded);
+                        }, className: "w-full px-3 py-2 text-xs transition-colors flex items-center justify-center gap-1", style: {
+                            color: isHighlighted
+                                ? theme?.colors.text.inverse || '#ffffff'
+                                : theme?.colors.text.tertiary || '#9ca3af',
+                            backgroundColor: isHighlighted
+                                ? 'rgba(255, 255, 255, 0.1)'
+                                : 'transparent',
+                        }, onMouseEnter: (e) => {
+                            if (!isHighlighted) {
+                                e.currentTarget.style.backgroundColor =
+                                    theme?.colors.surface.secondary || '#374151';
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!isHighlighted) {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }
+                        }, children: [jsx("span", { children: isExpanded ? 'Show less' : 'Show details' }), jsx("svg", { className: `w-3 h-3 transition-transform ${isExpanded ? 'rotate-180' : ''}`, fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 101.415-1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isExpanded && (jsxs("div", { className: "px-3 pb-3 space-y-2", style: {
+                            backgroundColor: isHighlighted
+                                ? 'rgba(255, 255, 255, 0.05)'
+                                : theme?.colors.surface.primary || '#1f2937',
+                        }, children: [suggestion.message && (jsxs("div", { children: [jsx("div", { className: "text-xs mb-2 font-medium", style: {
+                                            color: isHighlighted
+                                                ? theme?.colors.text.inverse || '#ffffff'
+                                                : theme?.colors.text.tertiary || '#9ca3af',
+                                        }, children: "Description:" }), jsx("p", { className: "text-sm leading-relaxed", style: {
+                                            color: isHighlighted
+                                                ? theme?.colors.text.inverse || '#ffffff'
+                                                : theme?.colors.text.secondary || '#d1d5db',
+                                        }, children: suggestion.message })] })), suggestion.formState &&
+                                hasDisplayableFields(suggestion.formState) && (jsxs("div", { children: [jsx("div", { className: "text-xs mb-2 font-medium", style: {
+                                            color: isHighlighted
+                                                ? theme?.colors.text.inverse || '#ffffff'
+                                                : theme?.colors.text.tertiary || '#9ca3af',
+                                        }, children: "Will populate:" }), jsx("div", { className: "p-2 rounded border", style: {
+                                            backgroundColor: isHighlighted
+                                                ? 'rgba(255, 255, 255, 0.05)'
+                                                : theme?.colors.surface.primary || '#1f2937',
+                                            borderColor: theme?.colors.border.primary || '#374151',
+                                        }, children: jsx(ObjectViewer, { data: suggestion.formState, isHighlighted: isHighlighted, theme: theme }) })] })), suggestion.queryParams &&
+                                Object.keys(suggestion.queryParams).length > 0 && (jsxs("div", { children: [jsx("div", { className: "text-xs mb-2 font-medium", style: {
+                                            color: isHighlighted
+                                                ? theme?.colors.text.inverse || '#ffffff'
+                                                : theme?.colors.text.tertiary || '#9ca3af',
+                                        }, children: "Query parameters:" }), jsx("div", { className: "p-2 rounded border", style: {
+                                            backgroundColor: isHighlighted
+                                                ? 'rgba(255, 255, 255, 0.05)'
+                                                : theme?.colors.surface.primary || '#1f2937',
+                                            borderColor: theme?.colors.border.primary || '#374151',
+                                        }, children: jsx(ObjectViewer, { data: suggestion.queryParams, isHighlighted: isHighlighted, theme: theme }) })] })), suggestion.path && (jsxs("div", { className: "flex items-center gap-2 text-xs", children: [jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z", clipRule: "evenodd" }) }), jsxs("span", { style: {
+                                            color: isHighlighted
+                                                ? theme?.colors.text.inverse || '#ffffff'
+                                                : theme?.colors.text.secondary || '#d1d5db',
+                                        }, children: ["Navigate to", ' ', jsx("span", { className: "font-medium", children: suggestion.path })] })] }))] }))] }))] }));
+}
+function SuggestionsPanel({ query, onSuggestionSelect, onClose, userId, formData, serverConfig, theme, isLoading = false, placeholder = 'Search for commands...', maxSuggestions = 10, showIcons = true, className = '', context, // <-- Add context prop
+ }) {
+    const [suggestions, setSuggestions] = useState([]);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
+    const containerRef = useRef(null);
+    // Build API URL from config
+    const buildUrlFromConfig = (config) => {
+        const protocol = config.secure !== undefined
+            ? config.secure
+                ? 'https:'
+                : 'http:'
+            : window.location.protocol;
+        const hostname = config.domain || window.location.hostname;
+        const port = config.port
+            ? `:${config.port}`
+            : window.location.port
+                ? `:${window.location.port}`
+                : '';
+        const suffix = config.suffix || '';
+        if (!config.domain && !config.port && !config.secure) {
+            return suffix;
+        }
+        return `${protocol}//${hostname}${port}${suffix}`;
+    };
+    // Fetch suggestions when query changes
+    useEffect(() => {
+        if (!query.trim()) {
+            setSuggestions([]);
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            fetchSuggestions(query);
+        }, 300); // Debounce requests
+        return () => clearTimeout(timeoutId);
+    }, [query, userId, formData]);
+    // Reset highlighted index when suggestions change
+    useEffect(() => {
+        setHighlightedIndex(0);
+    }, [suggestions]);
+    const fetchSuggestions = async (searchQuery) => {
+        setIsLoadingSuggestions(true);
+        try {
+            const apiUrl = serverConfig ? buildUrlFromConfig(serverConfig) : '/api';
+            const response = await fetch(`${apiUrl}/suggest`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    query: searchQuery,
+                    userId,
+                    formData: formData || {},
+                    chatHistory: [], // Empty for standalone suggestions
+                    isCommandSearch: true, // Flag to indicate this is for command search
+                    ...(context ? { context } : {}), // <-- Add context to request body
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            // Handle streaming response
+            const reader = response.body?.getReader();
+            if (!reader) {
+                throw new Error('No response body');
+            }
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let collectedSuggestions = [];
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.slice(6));
+                            if (data.suggestions) {
+                                collectedSuggestions = data.suggestions;
+                            }
+                            else if (data.suggestion) {
+                                collectedSuggestions.push(data.suggestion);
+                            }
+                        }
+                        catch (e) {
+                            console.warn('Failed to parse SSE data:', line);
+                        }
+                    }
+                    else if (line.startsWith('event: end')) {
+                        break;
+                    }
+                }
+            }
+            // Apply max suggestions limit
+            const limitedSuggestions = collectedSuggestions.slice(0, maxSuggestions);
+            setSuggestions(limitedSuggestions);
+        }
+        catch (error) {
+            console.error('Error fetching suggestions:', error);
+            setSuggestions([]);
+        }
+        finally {
+            setIsLoadingSuggestions(false);
+        }
+    };
+    const handleSuggestionClick = (suggestion) => {
+        onSuggestionSelect(suggestion);
+    };
+    const handleKeyDown = (event) => {
+        if (suggestions.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setHighlightedIndex((prev) => prev < suggestions.length - 1 ? prev + 1 : 0);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setHighlightedIndex((prev) => prev > 0 ? prev - 1 : suggestions.length - 1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (suggestions[highlightedIndex]) {
+                    handleSuggestionClick(suggestions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                onClose?.();
+                break;
+        }
+    };
+    // Generate custom scrollbar styles based on theme
+    const scrollbarStyles = `
+    .suggestions-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: ${theme?.colors.primary[500] || '#3b82f6'} ${theme?.colors.surface.secondary || '#374151'};
+    }
+    .suggestions-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .suggestions-scrollbar::-webkit-scrollbar-track {
+      background: ${theme?.colors.surface.secondary || '#374151'};
+      border-radius: 4px;
+    }
+    .suggestions-scrollbar::-webkit-scrollbar-thumb {
+      background: ${theme?.colors.primary[500] || '#3b82f6'};
+      border-radius: 4px;
+      border: 1px solid ${theme?.colors.surface.secondary || '#374151'};
+    }
+    .suggestions-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: ${theme?.colors.primary[600] || '#2563eb'};
+    }
+  `;
+    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs("div", { ref: containerRef, className: `rounded-lg overflow-hidden ${className}`, style: {
+                    backgroundColor: theme?.colors.surface.elevated || '#1f2937',
+                    border: `1px solid ${theme?.colors.border.primary || '#374151'}`,
+                    boxShadow: theme?.shadows.xl ||
+                        '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+                }, onKeyDown: handleKeyDown, tabIndex: 0, children: [(isLoading || isLoadingSuggestions) && (jsx("div", { className: "p-4 border-b", style: { borderColor: theme?.colors.border.primary || '#374151' }, children: jsxs("div", { className: "flex items-center gap-2 text-sm", style: { color: theme?.colors.text.secondary || '#d1d5db' }, children: [jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: theme?.colors.primary[500] || '#3b82f6' } }), jsx("span", { children: "Finding suggestions..." })] }) })), suggestions.length > 0 && (jsx("div", { className: "max-h-80 overflow-y-auto suggestions-scrollbar", children: jsx("div", { className: "p-2 space-y-2", children: suggestions.map((suggestion, index) => (jsx(SuggestionCard, { suggestion: suggestion, onClick: handleSuggestionClick, theme: theme, showIcon: showIcons, isHighlighted: index === highlightedIndex }, `${suggestion.actionType}-${suggestion.action}-${index}`))) }) })), !isLoading &&
+                        !isLoadingSuggestions &&
+                        suggestions.length === 0 &&
+                        query.trim() && (jsxs("div", { className: "p-8 text-center", children: [jsx("svg", { className: "w-6 h-6 mx-auto mb-2", style: { color: theme?.colors.text.tertiary || '#9ca3af' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), jsxs("p", { className: "text-sm", style: { color: theme?.colors.text.secondary || '#d1d5db' }, children: ["No suggestions found for \"", query, "\""] }), jsx("p", { className: "text-xs mt-1", style: { color: theme?.colors.text.tertiary || '#9ca3af' }, children: "Try a different search term" })] })), !query.trim() && (jsxs("div", { className: "p-8 text-center", children: [jsx("svg", { className: "w-6 h-6 mx-auto mb-2", style: { color: theme?.colors.text.tertiary || '#9ca3af' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM22 16c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM17 6l-8 2.5" }) }), jsx("p", { className: "text-sm", style: { color: theme?.colors.text.secondary || '#d1d5db' }, children: "Start typing to search for commands..." }), jsx("p", { className: "text-xs mt-1", style: { color: theme?.colors.text.tertiary || '#9ca3af' }, children: "Use \u2191\u2193 to navigate, Enter to select" })] }))] })] }));
+}
+
+const ACCEPTED_FILE_TYPES = {
+    images: {
+        mimeTypes: [
+            'image/jpeg',
+            'image/jpg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+        ],
+        extensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
+        description: 'images (JPG, PNG, GIF, WebP)',
+    },
+    pdfs: {
+        mimeTypes: ['application/pdf'],
+        extensions: ['.pdf'],
+        description: 'PDF documents',
+    },
+    textFiles: {
+        mimeTypes: ['text/plain', 'text/rtf'],
+        extensions: ['.txt', '.rtf'],
+        description: 'text files (TXT, RTF)',
+    },
+    wordDocs: {
+        mimeTypes: [
+            'application/msword',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        ],
+        extensions: ['.doc', '.docx'],
+        description: 'Word documents (DOC, DOCX)',
+    },
+    spreadsheets: {
+        mimeTypes: [
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'text/csv',
+        ],
+        extensions: ['.xls', '.xlsx', '.csv'],
+        description: 'spreadsheets and CSV files',
+    },
+    configFiles: {
+        mimeTypes: ['application/json', 'text/xml', 'application/xml'],
+        extensions: ['.json', '.xml'],
+        description: 'configuration files (JSON, XML)',
+    },
+};
+// Currently accepted file types - easy to modify
+const CURRENT_ACCEPTED_TYPES = [
+    'images',
+    // 'pdfs',
+    'textFiles',
+    // 'wordDocs',
+    // 'spreadsheets',
+    'configFiles',
+];
+/**
+ * File processing utility
+ */
+const FileHandler = {
+    // Get all accepted MIME types and extensions
+    getAcceptedTypes() {
+        const mimeTypes = [];
+        const extensions = [];
+        const descriptions = [];
+        CURRENT_ACCEPTED_TYPES.forEach((typeKey) => {
+            const config = ACCEPTED_FILE_TYPES[typeKey];
+            if (config) {
+                mimeTypes.push(...config.mimeTypes);
+                extensions.push(...config.extensions);
+                descriptions.push(config.description);
+            }
+        });
+        return { mimeTypes, extensions, descriptions };
+    },
+    // Check if a file is accepted
+    isFileAccepted(file) {
+        const { mimeTypes, extensions } = this.getAcceptedTypes();
+        // Check MIME type
+        if (mimeTypes.some((type) => file.type === type || file.type.startsWith(type.split('/')[0] + '/'))) {
+            return true;
+        }
+        // Check file extension as fallback
+        const fileName = file.name.toLowerCase();
+        return extensions.some((ext) => fileName.endsWith(ext.toLowerCase()));
+    },
+    // Process a list of files and separate accepted from rejected
+    processFiles(files) {
+        const acceptedFiles = [];
+        const rejectedFiles = [];
+        files.forEach((file) => {
+            if (this.isFileAccepted(file)) {
+                acceptedFiles.push(file);
+            }
+            else {
+                rejectedFiles.push(file);
+            }
+        });
+        return { acceptedFiles, rejectedFiles };
+    },
+    // Get user-friendly description of accepted types
+    getAcceptedTypesDescription() {
+        const { descriptions } = this.getAcceptedTypes();
+        return descriptions.join(', ');
+    },
+    // Get accept attribute for HTML file input
+    getInputAcceptAttribute() {
+        const { mimeTypes, extensions } = this.getAcceptedTypes();
+        return [...mimeTypes, ...extensions].join(',');
+    },
+    // Get appropriate icon for file type
+    getFileIcon(file) {
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        // PDF files
+        if (fileType === 'application/pdf' || fileName.endsWith('.pdf')) {
+            return jsx(Icon, { name: "pdf", size: 40 });
+        }
+        // Word documents
+        if (fileType.includes('word') ||
+            fileName.endsWith('.doc') ||
+            fileName.endsWith('.docx')) {
+            return jsx(Icon, { name: "word", size: 40 });
+        }
+        // Excel files
+        if (fileType.includes('excel') ||
+            fileType.includes('spreadsheet') ||
+            fileName.endsWith('.xls') ||
+            fileName.endsWith('.xlsx')) {
+            return jsx(Icon, { name: "excel", size: 40 });
+        }
+        // CSV files
+        if (fileType === 'text/csv' || fileName.endsWith('.csv')) {
+            return jsx(Icon, { name: "csv", size: 40 });
+        }
+        // RTF files
+        if (fileType === 'text/rtf' || fileName.endsWith('.rtf')) {
+            return jsx(Icon, { name: "rtf", size: 40 });
+        }
+        // Plain text files
+        if (fileType === 'text/plain' || fileName.endsWith('.txt')) {
+            return jsx(Icon, { name: "text", size: 40 });
+        }
+        // Default generic file icon
+        return jsx(Icon, { name: "file-generic", size: 40 });
+    },
+    // Format file size for display
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    },
+    // Get file type description
+    getFileTypeDescription(file) {
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        if (fileType === 'application/pdf' || fileName.endsWith('.pdf'))
+            return 'PDF Document';
+        if (fileType.includes('word') ||
+            fileName.endsWith('.doc') ||
+            fileName.endsWith('.docx'))
+            return 'Word Document';
+        if (fileType.includes('excel') ||
+            fileType.includes('spreadsheet') ||
+            fileName.endsWith('.xls') ||
+            fileName.endsWith('.xlsx'))
+            return 'Excel Spreadsheet';
+        if (fileType === 'text/csv' || fileName.endsWith('.csv'))
+            return 'CSV File';
+        if (fileType === 'text/rtf' || fileName.endsWith('.rtf'))
+            return 'Rich Text Document';
+        if (fileType === 'text/plain' || fileName.endsWith('.txt'))
+            return 'Text File';
+        if (fileType.startsWith('image/'))
+            return 'Image';
+        return 'Document';
+    },
+};
+
+function useModelSwitcher({ initialProvider = DEFAULT_CONFIG.service, initialModel = DEFAULT_CONFIG.model, customModels, } = {}) {
+    // Use default models or custom models
+    const availableModels = customModels || DEFAULT_MODELS;
+    // Simple state management - no API calls
+    const [currentModel, setCurrentModel] = useState({
+        provider: initialProvider,
+        model: initialModel,
+    });
+    const [usageStats, setUsageStats] = useState({
+        requests: 0,
+        totalTokens: 0,
+        totalComputeUnits: 0,
+        modelSwitches: 0,
+        uptime: 0,
+        providers: [],
+        currentProvider: initialProvider,
+        currentModel: initialModel,
+    });
+    // Track session start time for uptime calculation
+    const [sessionStartTime] = useState(Date.now());
+    // Switch model function - just updates local state
+    const switchModel = useCallback((model, provider) => {
+        const newProvider = provider || currentModel.provider;
+        // Update current model
+        setCurrentModel({
+            provider: newProvider,
+            model: model,
+        });
+        // Update usage stats
+        setUsageStats(prev => ({
+            ...prev,
+            modelSwitches: prev.modelSwitches + 1,
+            currentProvider: newProvider,
+            currentModel: model,
+        }));
+        return { success: true, current: { provider: newProvider, model } };
+    }, [currentModel.provider]);
+    // Update usage stats when requests are made (called from streaming hook)
+    const trackUsage = useCallback((tokens, computeUnits) => {
+        setUsageStats(prev => ({
+            ...prev,
+            requests: prev.requests + 1,
+            totalTokens: prev.totalTokens + tokens,
+            totalComputeUnits: prev.totalComputeUnits + computeUnits,
+            uptime: Math.floor((Date.now() - sessionStartTime) / 1000),
+            providers: prev.providers.map(p => p.name === currentModel.provider
+                ? { ...p, requests: p.requests + 1, computeUnits: p.computeUnits + computeUnits }
+                : p).concat(
+            // Add provider if not exists
+            prev.providers.some(p => p.name === currentModel.provider)
+                ? []
+                : [{
+                        name: currentModel.provider,
+                        requests: 1,
+                        computeUnits: computeUnits,
+                        models: [currentModel.model],
+                    }]),
+        }));
+    }, [currentModel.provider, currentModel.model, sessionStartTime]);
+    // Reset usage stats
+    const resetUsageStats = useCallback(() => {
+        setUsageStats({
+            requests: 0,
+            totalTokens: 0,
+            totalComputeUnits: 0,
+            modelSwitches: 0,
+            uptime: 0,
+            providers: [],
+            currentProvider: currentModel.provider,
+            currentModel: currentModel.model,
+        });
+    }, [currentModel.provider, currentModel.model]);
+    // Get current model capabilities
+    const getCurrentCapabilities = useCallback(() => {
+        const allModels = Object.values(availableModels).flat();
+        const modelInfo = allModels.find(m => m.id === currentModel.model && m.provider === currentModel.provider);
+        return {
+            supportsImages: modelInfo?.supportsImages || false,
+            computeWeight: modelInfo?.computeWeight || 1.0,
+        };
+    }, [currentModel, availableModels]);
+    // Get current model info for streaming API
+    const getCurrentModelInfo = useCallback(() => ({
+        provider: currentModel.provider,
+        model: currentModel.model,
+        capabilities: getCurrentCapabilities(),
+    }), [currentModel, getCurrentCapabilities]);
+    // Flatten models for backward compatibility
+    const models = Object.values(availableModels).flat();
+    const modelsByProvider = availableModels;
+    const currentCapabilities = getCurrentCapabilities();
+    return {
+        // Current state
+        models,
+        modelsByProvider,
+        currentModel,
+        currentCapabilities,
+        usageStats,
+        isLoading: false, // No loading since no API calls
+        error: null,
+        // Actions
+        switchModel,
+        trackUsage,
+        resetUsageStats,
+        getCurrentModelInfo, // New: for passing to streaming API
+        // Backward compatibility
+        modelState: {
+            models,
+            current: currentModel,
+            capabilities: currentCapabilities,
+            usage: usageStats,
+            timestamp: Date.now(),
+        },
+        fetchModelState: () => Promise.resolve(), // No-op
+        fetchModels: () => Promise.resolve(),
+        fetchUsageStats: () => Promise.resolve(),
+        fetchCurrentCapabilities: () => Promise.resolve(),
+        integrationMode: 'local',
+    };
+}
+
+/**
+ * ModelSwitcher component for switching between AI models
+ * Now uses the simplified useModelSwitcher hook directly
+ * Uses Tailwind classes for styling
+ */
+function ModelSwitcher({ className = '', models, defaultModel, showUsageStats = false, // Default to false to match modal design
+theme, onModelSelectionChange, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState('above');
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    const [hoveredModel, setHoveredModel] = useState(null);
+    const dropdownRef = useRef(null);
+    const buttonRef = useRef(null);
+    const currentModelRef = useRef(null);
+    // Use the simplified model switcher hook
+    const { modelsByProvider, currentModel, currentCapabilities, usageStats, isLoading, error, switchModel, integrationMode, getCurrentModelInfo, } = useModelSwitcher({
+        customModels: models,
+        initialProvider: defaultModel?.provider,
+        initialModel: defaultModel?.model,
+    });
+    const lastModelRef = useRef(null);
+    useEffect(() => {
+        if (onModelSelectionChange && currentModel && currentCapabilities) {
+            const newModel = {
+                provider: currentModel.provider,
+                model: currentModel.model,
+                capabilities: currentCapabilities,
+            };
+            // Simple shallow compare (customize if needed)
+            const last = lastModelRef.current;
+            if (!last ||
+                last.provider !== newModel.provider ||
+                last.model !== newModel.model ||
+                JSON.stringify(last.capabilities) !==
+                    JSON.stringify(newModel.capabilities)) {
+                onModelSelectionChange(newModel);
+                lastModelRef.current = newModel;
+            }
+        }
+    }, [currentModel, currentCapabilities, onModelSelectionChange]);
+    // Handle click outside to close dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleResize = () => {
+            if (isOpen) {
+                calculateDropdownPosition();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [isOpen]);
+    // Calculate optimal dropdown position using fixed positioning
+    const calculateDropdownPosition = () => {
+        if (!buttonRef.current)
+            return;
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Dropdown width is min-w-80 (320px)
+        const dropdownWidth = 320;
+        const dropdownHeight = 300; // Approximate height
+        const margin = 8; // Minimum margin from viewport edge
+        // Calculate horizontal position
+        let left = buttonRect.left;
+        // Check if dropdown would go off right edge
+        if (left + dropdownWidth > viewportWidth - margin) {
+            // Try right-aligning to button
+            const rightAlignedLeft = buttonRect.right - dropdownWidth;
+            if (rightAlignedLeft >= margin) {
+                left = rightAlignedLeft;
+            }
+            else {
+                // Not enough space either way, clamp to viewport
+                left = Math.max(margin, Math.min(left, viewportWidth - dropdownWidth - margin));
+            }
+        }
+        // Calculate vertical position
+        let top;
+        let bottom;
+        const spaceAbove = buttonRect.top;
+        const spaceBelow = viewportHeight - buttonRect.bottom;
+        if (spaceAbove >= dropdownHeight || spaceAbove > spaceBelow) {
+            // Position above
+            bottom = viewportHeight - buttonRect.top + 4; // 4px gap
+            setDropdownPosition('above');
+        }
+        else {
+            // Position below
+            top = buttonRect.bottom + 4; // 4px gap
+            setDropdownPosition('below');
+        }
+        setDropdownStyle({
+            position: 'fixed',
+            left: `${left}px`,
+            top: top !== undefined ? `${top}px` : undefined,
+            bottom: bottom !== undefined ? `${bottom}px` : undefined,
+            right: undefined,
+        });
+    };
+    // Handle dropdown toggle with position calculation
+    const handleToggleDropdown = () => {
+        if (!isOpen) {
+            calculateDropdownPosition();
+        }
+        setIsOpen(!isOpen);
+        // Scroll to current model when opening
+        if (!isOpen) {
+            setTimeout(() => {
+                if (currentModelRef.current) {
+                    currentModelRef.current.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                }
+            }, 100);
+        }
+    };
+    // Simplified model switching
+    const handleModelSwitch = async (modelId, provider) => {
+        try {
+            setIsOpen(false);
+            switchModel(modelId, provider);
+        }
+        catch (err) {
+            console.error('Failed to switch model:', err);
+        }
+    };
+    // Get current model name for display
+    const getCurrentModelName = () => {
+        if (!currentModel)
+            return 'AI Model';
+        // Find the actual model object to get the name
+        const allModels = Object.values(modelsByProvider).flat();
+        const modelObj = allModels.find((m) => m.id === currentModel.model && m.provider === currentModel.provider);
+        return modelObj?.name || currentModel.model;
+    };
+    // Get model-specific usage for tooltip
+    const getModelUsage = (modelId, provider) => {
+        if (!usageStats)
+            return null;
+        const providerStats = usageStats.providers.find((p) => p.name === provider);
+        if (!providerStats)
+            return null;
+        return {
+            requests: providerStats.requests,
+            computeUnits: providerStats.computeUnits,
+            isActive: currentModel?.model === modelId && currentModel?.provider === provider,
+        };
+    };
+    const getProviderIcon = (provider) => {
+        const iconName = getProviderIconName(provider || '') || 'ai';
+        return jsx(Icon, { name: iconName, size: "xs" });
+    };
+    const getProviderColorClass = (provider) => {
+        if (!provider)
+            return 'text-gray-500';
+        switch (provider.toLowerCase()) {
+            case 'openai':
+                return 'text-green-500';
+            case 'claude':
+                return 'text-amber-500';
+            case 'gemini':
+                return 'text-blue-500';
+            default:
+                return 'text-gray-500';
+        }
+    };
+    const formatUptime = (seconds) => {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        if (hours > 0) {
+            return `${hours}h ${minutes}m`;
+        }
+        return `${minutes}m`;
+    };
+    if (error) {
+        return (jsx("span", { className: `text-xs text-red-500 cursor-help ${className}`, title: error, children: "\u26A0\uFE0F Model Error" }));
+    }
+    // Generate custom scrollbar styles based on theme
+    const scrollbarStyles = `
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: ${theme?.colors.primary[500] || '#3b82f6'} ${theme?.colors.surface.secondary || '#f3f4f6'};
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: ${theme?.colors.surface.secondary || '#f3f4f6'};
+      border-radius: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: ${theme?.colors.primary[500] || '#3b82f6'};
+      border-radius: 4px;
+      border: 1px solid ${theme?.colors.surface.secondary || '#f3f4f6'};
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: ${theme?.colors.primary[600] || '#2563eb'};
+    }
+  `;
+    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs("div", { className: `relative inline-block ${className}`, ref: dropdownRef, children: [jsx("button", { ref: buttonRef, onClick: handleToggleDropdown, disabled: isLoading, className: `flex items-center gap-2 text-xs text-gray-500 bg-transparent border-none cursor-pointer p-1 rounded transition-all duration-200 font-inherit hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed`, title: `Switch AI Model (${integrationMode} mode)`, children: currentModel ? (jsxs(Fragment, { children: [jsx("span", { className: getProviderColorClass(currentModel.provider), children: getProviderIcon(currentModel.provider) }), jsx("span", { children: getCurrentModelName() }), jsx(Icon, { name: "plus", size: "xs", className: isLoading ? 'animate-spin' : '' })] })) : (jsxs(Fragment, { children: [jsx(Icon, { name: "ai", size: "xs" }), jsx("span", { children: "AI Model" }), isLoading && (jsx(Icon, { name: "plus", size: "xs", className: "animate-spin" }))] })) }), isOpen && (jsxs("div", { className: "z-50 min-w-80 rounded-lg overflow-hidden", style: {
+                            ...dropdownStyle,
+                            backgroundColor: theme?.colors.surface.elevated || '#ffffff',
+                            borderColor: theme?.colors.border.primary || '#e5e7eb',
+                            borderWidth: '1px',
+                            borderStyle: 'solid',
+                            borderRadius: theme?.borderRadius.lg || '0.5rem',
+                            boxShadow: theme?.shadows.xl ||
+                                '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+                        }, children: [showUsageStats && usageStats && (jsx("div", { className: "px-3 pt-2 pb-3 border-b", style: {
+                                    borderColor: theme?.colors.border.primary || '#e5e7eb',
+                                }, children: jsxs("div", { className: "flex items-center gap-4 text-xs", children: [jsxs("span", { className: "font-medium text-blue-600", children: [usageStats.requests, " requests"] }), jsxs("span", { className: "font-medium text-green-600", children: [usageStats.modelSwitches, " switches"] }), jsxs("span", { className: "font-medium text-purple-600", children: [Math.round(usageStats.totalComputeUnits), " compute units"] }), jsxs("span", { className: "font-medium text-orange-600", children: [formatUptime(usageStats.uptime), " uptime"] })] }) })), jsx("div", { className: "max-h-64 overflow-y-auto custom-scrollbar", children: jsx("div", { className: "py-2", children: Object.entries(modelsByProvider).map(([provider, models]) => (jsxs("div", { className: "py-1", children: [jsxs("div", { className: "py-3 px-3 flex items-center gap-2 border-b border-opacity-50", style: {
+                                                    borderColor: theme?.colors.border.primary || '#374151',
+                                                }, children: [jsx("span", { className: getProviderColorClass(provider), children: getProviderIcon(provider) }), jsx("span", { className: "text-sm font-semibold tracking-wide", style: {
+                                                            color: theme?.colors.text.primary || '#f9fafb',
+                                                        }, children: provider.toUpperCase() })] }), models.map((model) => {
+                                                const modelUsage = getModelUsage(model.id, provider);
+                                                const isCurrentModel = currentModel?.model === model.id &&
+                                                    currentModel?.provider === provider;
+                                                return (jsxs("div", { className: "relative", children: [jsx("button", { ref: isCurrentModel ? currentModelRef : null, onClick: () => handleModelSwitch(model.id, provider), disabled: isLoading || !model.available, onMouseEnter: (e) => {
+                                                                setHoveredModel(`${provider}-${model.id}`);
+                                                                if (model.available && !isCurrentModel) {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        theme?.colors.surface.secondary || '#f3f4f6';
+                                                                }
+                                                            }, onMouseLeave: (e) => {
+                                                                setHoveredModel(null);
+                                                                if (model.available && !isCurrentModel) {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        'transparent';
+                                                                }
+                                                            }, className: "w-full text-left py-2 px-4 text-xs border-none bg-transparent cursor-pointer transition-all duration-200 relative", style: {
+                                                                backgroundColor: isCurrentModel
+                                                                    ? theme?.colors.surface.secondary || '#f3f4f6'
+                                                                    : 'transparent',
+                                                                color: isCurrentModel
+                                                                    ? theme?.colors.text.primary || '#111827'
+                                                                    : model.available
+                                                                        ? theme?.colors.text.primary || '#374151'
+                                                                        : theme?.colors.text.tertiary || '#9ca3af',
+                                                                opacity: model.available ? 1 : 0.5,
+                                                                cursor: model.available
+                                                                    ? 'pointer'
+                                                                    : 'not-allowed',
+                                                                border: isCurrentModel
+                                                                    ? `1px solid ${theme?.colors.border.primary || '#d1d5db'}`
+                                                                    : '1px solid transparent',
+                                                                borderRadius: theme?.borderRadius.md || '0.375rem',
+                                                            }, title: !model.available
+                                                                ? `Unavailable: ${model.error || 'No API key configured'}`
+                                                                : `Switch to ${model.name} (CW: ${model.computeWeight})`, children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex-1", children: [jsx("div", { className: `font-medium mb-0.5 ${model.available ? '' : 'line-through'}`, children: model.name }), jsxs("div", { className: "text-xs flex items-center gap-2", style: {
+                                                                                    color: theme?.colors.text.tertiary || '#9ca3af',
+                                                                                }, children: [jsx("span", { children: model.id }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "w-1.5 h-1.5 rounded-full", style: {
+                                                                                                    backgroundColor: isCurrentModel
+                                                                                                        ? theme?.colors.text.secondary ||
+                                                                                                            '#6b7280'
+                                                                                                        : theme?.colors.text.tertiary ||
+                                                                                                            '#9ca3af',
+                                                                                                } }), jsx("span", { className: "text-xs font-medium", style: {
+                                                                                                    color: isCurrentModel
+                                                                                                        ? theme?.colors.text.secondary ||
+                                                                                                            '#6b7280'
+                                                                                                        : theme?.colors.text.tertiary ||
+                                                                                                            '#9ca3af',
+                                                                                                }, children: model.computeWeight })] })] })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "flex items-center justify-center w-5 h-5", title: model.supportsImages
+                                                                                    ? 'Supports image input'
+                                                                                    : 'Text only', children: model.supportsImages ? (
+                                                                                // Image support icon
+                                                                                jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: {
+                                                                                        color: isCurrentModel
+                                                                                            ? theme?.colors.text.secondary ||
+                                                                                                '#6b7280'
+                                                                                            : theme?.colors.text.tertiary ||
+                                                                                                '#9ca3af',
+                                                                                    }, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor" }), jsx("polyline", { points: "21,15 16,10 5,21", stroke: "currentColor", strokeWidth: "2", fill: "none" })] })) : (
+                                                                                // No image support icon (crossed out image)
+                                                                                jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: {
+                                                                                        color: theme?.colors.text.tertiary ||
+                                                                                            '#9ca3af',
+                                                                                        opacity: 0.5,
+                                                                                    }, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor" }), jsx("polyline", { points: "21,15 16,10 5,21", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21", stroke: "currentColor", strokeWidth: "2" })] })) }), modelUsage && modelUsage.requests > 0 && (jsx("span", { className: "text-xs text-blue-600 bg-blue-50 px-1 py-0.5 rounded", children: modelUsage.requests })), !model.available && (jsx("span", { className: "text-xs px-2 py-0.5 rounded", style: {
+                                                                                    backgroundColor: theme?.colors.surface.secondary ||
+                                                                                        '#f3f4f6',
+                                                                                    color: theme?.colors.text.tertiary ||
+                                                                                        '#9ca3af',
+                                                                                }, title: "API key required", children: "Unavailable" }))] })] }) }), hoveredModel === `${provider}-${model.id}` &&
+                                                            modelUsage && (jsxs("div", { className: "absolute right-full top-0 mr-2 z-50 bg-gray-900 text-white text-xs rounded p-2 whitespace-nowrap shadow-lg", children: [jsx("div", { className: "font-medium mb-0.5", children: model.name }), jsxs("div", { className: "text-gray-300", children: [modelUsage.requests, " requests \u2022", ' ', Math.round(modelUsage.computeUnits), " CU", jsx("br", {}), modelUsage.isActive ? 'Active' : 'Available', model.supportsImages
+                                                                            ? ' • Images supported'
+                                                                            : ' • No image support'] }), jsx("div", { className: "absolute top-2 right-[-4px] w-2 h-2 bg-gray-900 transform rotate-45" })] }))] }, model.id));
+                                            })] }, provider))) }) })] }))] })] }));
+}
+
+/**
+ * formatTimestamp - formats the timestamp to a human readable format
+ * @param timestamp - The timestamp to format
+ * @returns The formatted timestamp
+ */
+const formatTimestamp = (timestamp) => {
+    if (!timestamp)
+        return '';
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    if (isToday) {
+        return date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    else {
+        return date.toLocaleDateString([], {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+};
+/**
+ * Helper to extract text content from message content blocks
+ */
+const getTextFromMessage$1 = (msg) => {
+    return msg.content
+        .filter((block) => block.type === 'text')
+        .map((block) => block.content)
+        .join('\n');
+};
+/**
+ * Conversation component - displays a single chat conversation
+ * @param chat - The chat messages to display
+ * @param onSuggestionClick - Function to handle suggestion clicks
+ * @param theme - Chat theme
+ * @param showProfileBubbles - Whether to show profile bubbles
+ * @param className - Additional CSS classes
+ * @param autoScroll - Whether to auto-scroll to bottom on new messages
+ * @param maxHeight - Maximum height of the conversation container
+ */
+function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles = false, className = '', autoScroll = true, maxHeight = '100%', 
+// AI functionality props
+userId = 'demo-user', serverConfig, formData, setFormState, onNavigate, chatLevel = 'full', 
+// External chat management
+chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, 
+// Input-related props
+query: externalQuery = '', setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading = false, attachedFiles: externalAttachedFiles = [], setAttachedFiles: externalSetAttachedFiles, 
+// Model configuration
+models, defaultModel, showUsageStats, maxFileSize, features = {}, 
+// Model selection props
+currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, 
+// Show input field (always shown by default)
+showInput = true, 
+// Initial query handling
+initialQuery, setInitialQuery, 
+// Clear chat functionality
+showClearChat = false, onClearChat, 
+// Additional context for AI requests
+additionalContext, }) {
+    const chatRef = useRef(null);
+    // Internal state for AI functionality
+    const [query, setQuery] = useState(externalQuery);
+    const [attachedFiles, setAttachedFiles] = useState(externalAttachedFiles);
+    const [currentModelSelection, setCurrentModelSelection] = useState(externalCurrentModelSelection);
+    // Use the simplified model switcher hook
+    const { trackUsage } = useModelSwitcher({
+        customModels: models,
+        initialProvider: defaultModel?.provider,
+        initialModel: defaultModel?.model,
+    });
+    // Use streaming AI hook for AI functionality
+    const streamingAI = useStreamingAI({
+        userId,
+        serverConfig,
+        formData,
+        chats: externalChats,
+        setChats: externalSetChats,
+        currentChatId: externalCurrentChatId,
+        setCurrentChatId: externalSetCurrentChatId,
+        modelSelection: currentModelSelection,
+        onUsageTracked: trackUsage,
+        chatLevel,
+        additionalContext,
+    });
+    // Handle model selection changes
+    const handleModelSelectionChange = useCallback((modelInfo) => {
+        setCurrentModelSelection(modelInfo);
+        externalOnModelSelectionChange?.(modelInfo);
+    }, [externalOnModelSelectionChange]);
+    // Handle sending messages
+    const handleSend = useCallback((additionalContext, queryToSend) => {
+        const finalQuery = queryToSend || query;
+        streamingAI.sendQuery(finalQuery, attachedFiles.length > 0 ? attachedFiles : undefined, additionalContext);
+        setQuery('');
+        setAttachedFiles([]); // Clear files after sending
+        externalSetQuery?.('');
+        externalSetAttachedFiles?.([]);
+    }, [query, attachedFiles, streamingAI, externalSetQuery, externalSetAttachedFiles]);
+    // Handle suggestion clicks
+    const handleSuggestionClick = useCallback((s) => {
+        if (setFormState && s.formState)
+            setFormState(s.formState, s.actionType);
+        if (s.path && onNavigate)
+            onNavigate(s.path);
+        onSuggestionClick(s);
+    }, [setFormState, onNavigate, onSuggestionClick]);
+    // Use external or internal state
+    const chat = externalChat || streamingAI.chat;
+    const isLoading = externalIsLoading || streamingAI.isLoading;
+    const finalQuery = externalQuery || query;
+    const finalSetQuery = externalSetQuery || setQuery;
+    const finalOnSend = externalOnSend || handleSend;
+    const finalAttachedFiles = externalAttachedFiles.length > 0 ? externalAttachedFiles : attachedFiles;
+    const finalSetAttachedFiles = externalSetAttachedFiles || setAttachedFiles;
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        if (autoScroll && chatRef.current) {
+            chatRef.current.scrollTo({
+                top: chatRef.current.scrollHeight,
+                behavior: 'smooth',
+            });
+        }
+    }, [chat, autoScroll]);
+    // Handle initial query auto-send
+    const initialQuerySentRef = useRef(false);
+    useEffect(() => {
+        if (initialQuery &&
+            !streamingAI.isLoading &&
+            !initialQuerySentRef.current) {
+            // Set the query first
+            setQuery(initialQuery.query || '');
+            // Use a delay to ensure state is updated and component is ready
+            const timer = setTimeout(() => {
+                // Check if we have a meaningful query or context to send
+                const hasQuery = initialQuery.query && initialQuery.query.trim().length > 0;
+                const hasContext = initialQuery.context && initialQuery.context.trim().length > 0;
+                if (hasQuery || hasContext) {
+                    handleSend(initialQuery.context, initialQuery.query);
+                    initialQuerySentRef.current = true; // Mark as sent
+                }
+                // Always clear the initial query after processing
+                setInitialQuery?.({ query: '', context: '' });
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+    }, [initialQuery, streamingAI.isLoading, handleSend, setInitialQuery]);
+    // Reset the sent flag when initialQuery changes
+    useEffect(() => {
+        if (initialQuery) {
+            initialQuerySentRef.current = false;
+        }
+    }, [initialQuery]);
+    // Scrollbar styles - dynamically themed
+    const scrollbarStyles = `
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px !important;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: ${theme.colors.background.secondary} !important;
+      border-radius: 3px !important;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: ${theme.colors.border.secondary} !important;
+      border-radius: 3px !important;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: ${theme.colors.text.tertiary} !important;
+    }
+    .custom-scrollbar::-webkit-scrollbar-corner {
+      background: ${theme.colors.background.secondary} !important;
+    }
+    /* Firefox scrollbar */
+    .custom-scrollbar {
+      scrollbar-width: thin !important;
+      scrollbar-color: ${theme.colors.border.secondary} ${theme.colors.background.secondary} !important;
+    }
+  `;
+    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs("div", { className: "flex flex-col h-full", style: {
+                    maxHeight: maxHeight,
+                }, children: [jsx("div", { ref: chatRef, className: `overflow-y-auto space-y-4 min-h-0 custom-scrollbar px-3 py-4 flex-1 ${className}`, style: {
+                            backgroundColor: theme.colors.background.primary,
+                        }, children: jsx(ChatBubbles, { chat: chat, onSuggestionClick: handleSuggestionClick, theme: theme, showProfileBubbles: showProfileBubbles }) }), showClearChat && onClearChat && chat.length > 0 && (jsx("div", { className: "px-4 pb-2", style: { flexShrink: 0 }, children: jsxs("button", { onClick: onClearChat, className: "w-full text-sm py-2 px-3 rounded-lg transition-colors border flex items-center justify-center gap-2", style: {
+                                color: theme.colors.text.secondary,
+                                backgroundColor: theme.colors.surface.primary,
+                                borderColor: theme.colors.border.primary,
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.color = theme.colors.state.error.text;
+                                e.currentTarget.style.backgroundColor = theme.colors.state.error.background;
+                                e.currentTarget.style.borderColor = theme.colors.state.error.border;
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.color = theme.colors.text.secondary;
+                                e.currentTarget.style.backgroundColor = theme.colors.surface.primary;
+                                e.currentTarget.style.borderColor = theme.colors.border.primary;
+                            }, title: "Clear chat history", "aria-label": "Clear chat", children: [jsx(Icon, { name: "trash", size: "sm" }), "Clear Chat History"] }) })), showInput && (jsx("div", { style: { flexShrink: 0 }, children: jsx(ChatInput, { query: finalQuery, setQuery: finalSetQuery, onSend: finalOnSend, isLoading: isLoading, inputRef: useRef(null), attachedFiles: finalAttachedFiles, setAttachedFiles: finalSetAttachedFiles, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, currentModelSelection: currentModelSelection, onModelSelectionChange: handleModelSelectionChange, theme: theme, isOpen: true }) }))] })] }));
+}
+/**
+ * ErrorDisplay component - used to display error messages
+ * @param msg - The chat message
+ */
+function ErrorDisplay({ msg }) {
+    return (jsx("div", { className: "flex flex-col gap-3 max-w-full overflow-hidden", children: jsxs("div", { className: "flex-1 min-w-0 max-w-md", children: [jsx("div", { className: `font-medium break-words ${msg.errorType === 'rate_limit'
+                        ? 'text-orange-800 text-base'
+                        : msg.errorType === 'timeout_error' ||
+                            msg.errorType === 'token_limit'
+                            ? 'text-yellow-800 text-base'
+                            : 'text-red-800 text-sm'}`, children: getTextFromMessage$1(msg) }), (msg.errorType === 'timeout_error' ||
+                    msg.errorType === 'token_limit') && (jsxs("div", { className: "mt-3 space-y-2", children: [jsx("div", { className: "text-sm text-yellow-700 bg-yellow-50 rounded-lg px-3 py-2 border border-yellow-200 max-w-full", children: jsxs("div", { className: "flex items-start gap-2", children: [jsx("svg", { className: "w-4 h-4 flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "font-medium mb-1", children: "What to try:" }), jsxs("ul", { className: "text-xs space-y-1 text-yellow-600", children: [jsx("li", { children: "\u2022 Try a shorter or simpler request" }), jsx("li", { children: "\u2022 Check your internet connection" }), jsx("li", { children: "\u2022 Wait a moment and try again" })] })] })] }) }), msg.retryAfter && (jsxs("div", { className: "text-xs text-yellow-600 bg-yellow-50 rounded px-2 py-1 border border-yellow-200 max-w-full break-words", children: ["\uD83D\uDCA1 Recommended wait time: ", msg.retryAfter, " seconds"] }))] })), msg.errorType === 'rate_limit' && (jsxs("div", { className: "mt-3 space-y-2", children: [msg.retryAfter && (jsx("div", { className: "text-sm text-orange-700 bg-orange-50 rounded-lg px-3 py-2 border border-orange-200 max-w-full", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("svg", { className: "w-4 h-4 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.414L11 9.586V6z", clipRule: "evenodd" }) }), jsxs("span", { className: "font-medium min-w-0 break-words", children: ["Please wait approximately ", msg.retryAfter, " seconds before trying again"] })] }) })), getTextFromMessage$1(msg).includes('organization') && (jsx("div", { className: "text-sm text-blue-700 bg-blue-50 rounded-lg px-3 py-2 border border-blue-200 max-w-full", children: jsxs("div", { className: "flex items-start gap-2", children: [jsx("svg", { className: "w-4 h-4 flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "font-medium mb-1", children: "What you can do:" }), jsxs("ul", { className: "text-xs space-y-1 text-blue-600", children: [jsx("li", { children: "\u2022 Wait for the rate limit to reset and try again" }), jsx("li", { children: "\u2022 Contact your organization administrator" }), jsx("li", { children: "\u2022 Consider upgrading your organization's rate limits" })] })] })] }) })), !getTextFromMessage$1(msg).includes('organization') && (jsx("div", { className: "text-xs text-orange-600 bg-orange-50 rounded px-2 py-1 border border-orange-200 max-w-full break-words", children: "\uD83D\uDCA1 Tip: Try shortening your request or wait a moment before trying again" }))] })), msg.errorType === 'auth_error' && (jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2 border border-red-200 max-w-full", children: jsxs("div", { className: "flex items-start gap-2", children: [jsx("svg", { className: "w-4 h-4 flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "font-medium mb-1", children: "Authentication Issue:" }), jsx("div", { className: "text-xs break-words", children: "Please contact your system administrator to verify your API configuration." })] })] }) }))] }) }));
+}
+/**
+ * ChatBubbles component
+ * @param chat - The chat messages
+ * @param onSuggestionClick - Function to handle the suggestion click event
+ * @param theme - Chat theme
+ * @param showProfileBubbles - Whether to show profile bubbles (default: false)
+ */
+function ChatBubbles({ chat, onSuggestionClick, theme, showProfileBubbles = false, }) {
+    const getProfileIcon = (sender, msg) => {
+        switch (sender) {
+            case 'user':
+                return (jsx("div", { className: "flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center", children: jsx(Icon, { name: "user", size: "sm", className: "text-blue-600" }) }));
+            case 'system':
+                // For error messages, use appropriate error icon instead of generic system icon
+                if (msg?.isError) {
+                    const errorIconName = msg.errorType === 'rate_limit' || msg.errorType === 'token_limit'
+                        ? 'warning'
+                        : msg.errorType === 'timeout_error'
+                            ? 'timeout'
+                            : msg.errorType === 'auth_error'
+                                ? 'auth-error'
+                                : 'error';
+                    const bgColor = msg.errorType === 'rate_limit' || msg.errorType === 'token_limit'
+                        ? 'bg-orange-100'
+                        : msg.errorType === 'timeout_error'
+                            ? 'bg-yellow-100'
+                            : 'bg-red-100';
+                    return (jsx("div", { className: `flex-shrink-0 w-8 h-8 ${bgColor} rounded-full flex items-center justify-center`, children: jsx(Icon, { name: errorIconName, size: 10 }) }));
+                }
+                // Regular system messages use the system icon
+                return (jsx("div", { className: "flex-shrink-0 w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center", children: jsx(Icon, { name: "system", size: "sm", className: "text-gray-900" }) }));
+            default: // AI
+                return (jsx("div", { className: "flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center", children: jsx(Icon, { name: "ai", size: "sm", className: "text-gray-900" }) }));
+        }
+    };
+    return (jsx(Fragment, { children: chat.map((msg, idx) => (jsx("div", { className: msg.sender === 'user'
+                ? 'flex justify-end'
+                : msg.sender === 'system'
+                    ? 'flex justify-start'
+                    : 'flex justify-start', children: jsxs("div", { className: `flex gap-3 ${msg.sender === 'user' ? 'flex-row-reverse' : 'flex-row'}`, children: [showProfileBubbles && getProfileIcon(msg.sender, msg), jsxs("div", { className: `${msg.sender === 'user'
+                            ? 'flex flex-col items-end'
+                            : 'flex-1 min-w-0'}`, children: [jsxs("div", { className: "rounded-lg px-4 py-2 whitespace-pre-wrap break-words", style: {
+                                    backgroundColor: msg.sender === 'user'
+                                        ? theme.colors.primary[500]
+                                        : msg.sender === 'system'
+                                            ? msg.isError
+                                                ? theme.colors.state.error.background
+                                                : theme.colors.primary[900]
+                                                    .replace('rgb(', 'rgba(')
+                                                    .replace(')', ', 0.2)') // 20% opacity
+                                            : theme.colors.surface.secondary,
+                                    color: msg.sender === 'user'
+                                        ? theme.colors.text.inverse
+                                        : msg.sender === 'system'
+                                            ? msg.isError
+                                                ? theme.colors.state.error.text
+                                                : theme.colors.primary[100]
+                                            : theme.colors.text.primary,
+                                    borderColor: msg.sender === 'system' && msg.isError
+                                        ? theme.colors.state.error.border
+                                        : msg.sender === 'system'
+                                            ? theme.colors.primary[800]
+                                            : 'transparent',
+                                    borderWidth: msg.sender === 'system' ? '1px' : '0',
+                                }, children: [msg.sender === 'system' && msg.isError && (jsx(ErrorDisplay, { msg: msg })), msg.sender === 'system' && !msg.isError && (jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), getTextFromMessage$1(msg)] })), msg.sender !== 'system' && (jsxs(Fragment, { children: [msg.isLoading && msg.aiStatus !== 'none' && (jsxs("div", { className: `flex items-center gap-2 mb-3 ${msg.aiStatus === 'thinking'
+                                                    ? 'text-gray-400 text-sm'
+                                                    : 'text-gray-400 text-sm'} ${msg.sender === 'user' ? '' : 'justify-end'}`, children: [jsxs("span", { className: "font-medium text-sm", children: [msg.aiStatus === 'thinking' &&
+                                                                'Analyzing your request...', msg.aiStatus === 'typing' &&
+                                                                'Generating response...', msg.aiStatus === 'suggesting' &&
+                                                                'Finding relevant actions...'] }), jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-current" })] })), msg.content.map((contentBlock, blockIdx) => (jsxs("div", { children: [contentBlock.type === 'text' &&
+                                                        contentBlock.content && (jsx("div", { className: `leading-relaxed ${blockIdx > 0 ? 'mt-3' : ''}`, style: {
+                                                            color: msg.sender === 'user'
+                                                                ? theme.colors.text.inverse // White text on colored background
+                                                                : theme.colors.text.primary, // Primary text color for AI
+                                                        }, children: contentBlock.content })), contentBlock.type === 'loading-suggestions' && (jsx("div", { className: `space-y-3 ${blockIdx > 0 ? 'mt-3' : ''}`, children: jsxs("div", { className: "flex items-center gap-2 text-sm border-t pt-3", style: {
+                                                                color: theme.colors.text.tertiary,
+                                                                borderColor: theme.colors.border.primary,
+                                                            }, children: [jsx("svg", { className: "w-4 h-4 animate-spin", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), jsx("span", { className: "font-medium", children: contentBlock.content })] }) })), contentBlock.type === 'suggestions' &&
+                                                        contentBlock.content.length > 0 && (jsxs("div", { className: `space-y-3 ${blockIdx > 0 ? 'mt-3' : ''}`, children: [jsxs("div", { className: "flex items-center gap-2 text-sm border-t pt-3", style: {
+                                                                    color: theme.colors.text.tertiary,
+                                                                    borderColor: theme.colors.border.primary,
+                                                                }, children: [jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z", clipRule: "evenodd" }) }), jsxs("span", { className: "font-medium", children: ["I found ", contentBlock.content.length, " relevant action", contentBlock.content.length !== 1 ? 's' : '', ":"] })] }), jsx("div", { className: "space-y-2", children: contentBlock.content.map((suggestion, i) => (jsx(SuggestionCard, { suggestion: suggestion, onClick: onSuggestionClick, theme: theme }, i))) }), jsx("div", { className: "text-xs italic pt-2 border-t", style: {
+                                                                    color: theme.colors.text.tertiary,
+                                                                    borderColor: theme.colors.border.primary + '80', // 50% opacity
+                                                                }, children: "\uD83D\uDCA1 Click any suggestion to execute the action" })] }))] }, blockIdx))), msg.sender === 'user' && msg.files && (jsx(FileAttachmentDisplay, { files: msg.files }))] }))] }), jsx("div", { className: `text-xs mt-1 ${msg.sender === 'user' ? 'text-right' : 'text-left'}`, style: { color: theme.colors.text.tertiary }, children: formatTimestamp(msg.timestamp) })] })] }) }, idx))) }));
+}
+/**
+ * FileAttachmentDisplay component - displays attached files in chat messages
+ * @param files - Array of attached files
+ */
+function FileAttachmentDisplay({ files }) {
+    const [previewFile, setPreviewFile] = React.useState(null);
+    if (!files || files.length === 0)
+        return null;
+    const handleFileClick = (file) => {
+        if (file.type.startsWith('image/')) {
+            setPreviewFile(file);
+        }
+        else if (file.type === 'application/pdf') {
+            // Open PDF in new tab
+            const url = URL.createObjectURL(file);
+            window.open(url, '_blank');
+        }
+        else {
+            // Download other files
+            downloadFile(file);
+        }
+    };
+    const downloadFile = (file) => {
+        const url = URL.createObjectURL(file);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { className: "mt-2 space-y-2", children: files.map((file, index) => (jsxs("div", { className: "flex items-center gap-2 p-2 bg-white/10 rounded-lg border border-white/20 cursor-pointer hover:bg-white/20 transition-colors group", onClick: () => handleFileClick(file), title: file.type.startsWith('image/')
+                        ? 'Click to preview image'
+                        : file.type === 'application/pdf'
+                            ? 'Click to open PDF'
+                            : 'Click to download file', children: [jsxs("div", { className: "flex-shrink-0 relative", children: [file.type.startsWith('image/') ? (jsx("div", { className: "w-10 h-10 rounded overflow-hidden bg-white/20", children: jsx("img", { src: URL.createObjectURL(file), alt: `Attached ${index + 1}`, className: "w-full h-full object-cover" }) })) : (jsx("div", { className: "w-10 h-10 rounded bg-white/20 flex items-center justify-center", children: FileHandler.getFileIcon(file) })), jsx("div", { className: "absolute inset-0 bg-white/20 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: file.type.startsWith('image/') ? (jsx(Icon, { name: "eye", size: "sm", className: "text-white" })) : (jsxs("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-white", children: [jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsx("polyline", { points: "7,10 12,15 17,10" }), jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] })) })] }), jsxs("div", { className: "min-w-0 max-w-xs", children: [jsx("div", { className: "font-medium text-sm text-white truncate", children: file.name }), jsxs("div", { className: "text-xs text-white/70 truncate", children: [FileHandler.getFileTypeDescription(file), " \u2022", ' ', FileHandler.formatFileSize(file.size)] })] }), jsx("div", { className: "flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity", children: jsx("div", { className: "text-xs text-white/70", children: file.type.startsWith('image/')
+                                    ? 'Preview'
+                                    : file.type === 'application/pdf'
+                                        ? 'Open'
+                                        : 'Download' }) })] }, index))) }), previewFile && (jsx("div", { className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4", onClick: () => setPreviewFile(null), children: jsxs("div", { className: "relative max-w-full max-h-full", children: [jsx("img", { src: URL.createObjectURL(previewFile), alt: previewFile.name, className: "max-w-full max-h-full object-contain rounded-lg", onClick: (e) => e.stopPropagation() }), jsx("button", { className: "absolute top-4 right-4 w-8 h-8 bg-black/50 hover:bg-black/70 text-white rounded-full flex items-center justify-center transition-colors text-xl font-bold", onClick: () => setPreviewFile(null), children: "\u00D7" }), jsxs("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 text-white p-3 rounded-lg max-w-sm", children: [jsx("div", { className: "font-medium text-center", children: previewFile.name }), jsxs("div", { className: "text-sm text-gray-300 text-center", children: [FileHandler.getFileTypeDescription(previewFile), " \u2022", ' ', FileHandler.formatFileSize(previewFile.size)] })] })] }) }))] }));
+}
+function ChatInput({ query, setQuery, onSend, isLoading, inputRef, attachedFiles = [], setAttachedFiles, 
+// Model configuration
+models, defaultModel, showUsageStats, maxFileSize, features = {}, 
+// Model selection props
+currentModelSelection, onModelSelectionChange, 
+// Theme props
+theme, isOpen, }) {
+    const [focused, setFocused] = React.useState(false);
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const [pasteIndicator, setPasteIndicator] = React.useState(false);
+    const [incompatibleFiles, setIncompatibleFiles] = React.useState([]);
+    const [imageTipDismissed, setImageTipDismissed] = React.useState(false);
+    const fileInputRef = useRef(null);
+    const imageInputRef = useRef(null);
+    // Compute imageSupported from capabilities
+    const imageSupported = useMemo(() => {
+        const supported = currentModelSelection?.capabilities?.supportsImages ?? false;
+        return supported;
+    }, [currentModelSelection]);
+    // In ChatInput, use the flags
+    // Only allow image uploads if features.enableImageUploads !== false
+    const imageUploadsEnabled = features.enableImageUploads !== false;
+    // Only allow file uploads if features.fileUploads !== false
+    const fileUploadsEnabled = features.fileUploads !== false;
+    // Enforce max file size
+    const maxFileSizeBytes = maxFileSize
+        ? parseFileSize(maxFileSize)
+        : 50 * 1024 * 1024;
+    // Helper to parse file size strings like '50mb'
+    function parseFileSize(size) {
+        if (!size)
+            return 50 * 1024 * 1024;
+        const match = size.toLowerCase().match(/(\d+)(kb|mb|gb)?/);
+        if (!match)
+            return 50 * 1024 * 1024;
+        const value = parseInt(match[1], 10);
+        const unit = match[2];
+        if (unit === 'gb')
+            return value * 1024 * 1024 * 1024;
+        if (unit === 'mb')
+            return value * 1024 * 1024;
+        if (unit === 'kb')
+            return value * 1024;
+        return value;
+    }
+    // Centralized file processing handler
+    const handleFileProcessing = (files, source) => {
+        if (!fileUploadsEnabled) {
+            setIncompatibleFiles(['File uploads are disabled']);
+            return;
+        }
+        // Enforce max file size
+        const tooLarge = files.filter((file) => file.size > maxFileSizeBytes);
+        const okFiles = files.filter((file) => file.size <= maxFileSizeBytes);
+        if (tooLarge.length > 0) {
+            setIncompatibleFiles([
+                ...tooLarge.map((f) => `${f.name} (exceeds max size)`),
+            ]);
+        }
+        // Only allow image files if image uploads are enabled
+        const filteredFiles = okFiles.filter((file) => {
+            if (file.type.startsWith('image/')) {
+                return imageUploadsEnabled;
+            }
+            return true;
+        });
+        if (filteredFiles.length > 0 && setAttachedFiles) {
+            setAttachedFiles([...attachedFiles, ...filteredFiles]);
+            if (source === 'paste') {
+                setPasteIndicator(true);
+                setTimeout(() => setPasteIndicator(false), 1000);
+            }
+        }
+        // Show warning for rejected files
+        if (filteredFiles.length < okFiles.length) {
+            setIncompatibleFiles([
+                ...incompatibleFiles,
+                ...okFiles
+                    .filter((f) => !filteredFiles.includes(f))
+                    .map((f) => `${f.name} (images not allowed)`),
+            ]);
+            setTimeout(() => setIncompatibleFiles([]), 10000);
+        }
+    };
+    // Helper to filter files by type for specific buttons
+    const filterFilesByType = (files, types) => {
+        return files.filter((file) => {
+            return types.some((type) => {
+                // Use FileHandler to check if file is accepted
+                return FileHandler.isFileAccepted(file);
+            });
+        });
+    };
+    // Handle all file uploads (paperclip button)
+    const handleAllFileUpload = (event) => {
+        const files = Array.from(event.target.files || []);
+        handleFileProcessing(files, 'upload');
+        // Reset input
+        if (event.target) {
+            event.target.value = '';
+        }
+    };
+    // Handle image-only uploads (image button)
+    const handleImageUpload = (event) => {
+        if (!imageSupported) {
+            // Show warning if trying to upload images with unsupported model
+            setIncompatibleFiles(['Images not supported by current model']);
+            setTimeout(() => setIncompatibleFiles([]), 5000);
+            return;
+        }
+        const files = Array.from(event.target.files || []);
+        const imageFiles = filterFilesByType(files, ['images']);
+        handleFileProcessing(imageFiles, 'upload');
+        // Reset input
+        if (event.target) {
+            event.target.value = '';
+        }
+    };
+    // Handle audio recording (microphone button) - placeholder for now
+    const handleAudioRecord = () => {
+        // TODO: Implement audio recording functionality
+        console.log('Audio recording not yet implemented');
+    };
+    // Remove attached file
+    const removeFile = (index) => {
+        if (setAttachedFiles) {
+            setAttachedFiles(attachedFiles.filter((_, i) => i !== index));
+        }
+    };
+    // Focus textarea when parent is clicked (but not on icons)
+    const handleContainerClick = (e) => {
+        if (e.target.tagName === 'TEXTAREA')
+            return;
+        inputRef.current?.focus();
+    };
+    // Handle paste events to capture files from clipboard
+    const handlePaste = (event) => {
+        const clipboardData = event.clipboardData;
+        const items = Array.from(clipboardData.items);
+        // Convert clipboard items to files
+        const filePromises = items
+            .filter((item) => item.kind === 'file')
+            .map((item) => {
+            return new Promise((resolve) => {
+                const blob = item.getAsFile();
+                if (blob) {
+                    const timestamp = new Date()
+                        .toISOString()
+                        .slice(0, 19)
+                        .replace(/[:.]/g, '-');
+                    const extension = blob.type.split('/')[1] || 'unknown';
+                    const file = new File([blob], `pasted-file-${timestamp}.${extension}`, {
+                        type: blob.type,
+                    });
+                    resolve(file);
+                }
+            });
+        });
+        // Only prevent default if there are files to paste
+        if (filePromises.length > 0) {
+            event.preventDefault(); // Prevent default paste behavior for files
+            Promise.all(filePromises).then((files) => {
+                handleFileProcessing(files, 'paste');
+            });
+        }
+        // If no files, let the default paste behavior handle text content
+    };
+    // Handle drag and drop for files
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+        const files = Array.from(event.dataTransfer.files);
+        handleFileProcessing(files, 'drop');
+    };
+    const modelSelectionHandler = React.useCallback((modelInfo) => {
+        if (onModelSelectionChange) {
+            onModelSelectionChange(modelInfo);
+        }
+    }, [onModelSelectionChange]);
+    return (jsxs("div", { className: `px-3 py-2 border-t flex flex-col gap-2 transition-all duration-500 delay-500 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: { borderColor: theme.colors.border.primary }, children: [attachedFiles.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: attachedFiles.map((file, index) => (jsxs("div", { className: "relative group", children: [jsx("div", { className: "w-16 h-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden", children: file.type.startsWith('image/') ? (jsx("img", { src: URL.createObjectURL(file), alt: `Attached ${index + 1}`, className: "w-full h-full object-cover" })) : (jsx("div", { className: "flex items-center justify-center", children: FileHandler.getFileIcon(file) })) }), jsx("button", { onClick: () => removeFile(index), className: "absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition-colors", title: "Remove file", children: "\u00D7" }), jsx("div", { className: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 mt-2", children: jsxs("div", { className: "bg-gray-900 text-white text-xs rounded-lg px-2 py-1 whitespace-nowrap shadow-lg", children: [jsx("div", { className: "font-medium truncate max-w-32", title: file.name, children: file.name }), jsxs("div", { className: "text-gray-300", children: [FileHandler.getFileTypeDescription(file), " \u2022", ' ', FileHandler.formatFileSize(file.size)] }), jsx("div", { className: "absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45" })] }) })] }, index))) })), incompatibleFiles.length > 0 && (jsxs("div", { className: "relative flex flex-col gap-1 text-sm text-orange-700 bg-orange-50 border border-orange-200 rounded px-3 py-2 mb-2", children: [jsx("button", { onClick: () => setIncompatibleFiles([]), className: "absolute top-1 right-1 w-5 h-5 flex items-center justify-center text-orange-500 hover:text-orange-700 hover:bg-orange-200 rounded-full transition-colors", title: "Dismiss", type: "button", children: "\u00D7" }), jsxs("div", { className: "flex items-center gap-2 pr-6", children: [jsx("span", { children: "\u26A0\uFE0F" }), jsx("span", { className: "font-medium", children: incompatibleFiles.length === 1
+                                    ? 'File not supported'
+                                    : 'Some files not supported' })] }), jsxs("div", { className: "text-xs", children: [jsx("div", { className: "mb-1", children: "These files were skipped:" }), jsxs("ul", { className: "list-disc list-inside ml-2 space-y-0.5", children: [incompatibleFiles.slice(0, 3).map((fileName, index) => (jsx("li", { className: "truncate", children: fileName }, index))), incompatibleFiles.length > 3 && (jsxs("li", { children: ["... and ", incompatibleFiles.length - 3, " more"] }))] }), jsxs("div", { className: "mt-1 text-orange-600", children: ["\uD83D\uDCA1 Only ", FileHandler.getAcceptedTypesDescription(), " are supported", incompatibleFiles.some((name) => name.includes('images not supported by current model')) && (jsxs("div", { className: "mt-1", children: ["\uD83D\uDD04 ", jsx("strong", { children: "Switch to GPT-4O, Claude 3, or Gemini" }), " to enable image uploads"] }))] })] })] })), jsxs("div", { className: `relative flex flex-col gap-1 rounded border px-2 pt-1 pb-1 cursor-text transition-all duration-200 border-2 focus-within:shadow-sm ${isDragOver ? 'border-dashed bg-opacity-20' : 'border-transparent'}`, style: {
+                    backgroundColor: theme.colors.surface.primary,
+                    borderColor: isDragOver
+                        ? theme.colors.primary[400]
+                        : theme.colors.border.primary,
+                    color: theme.colors.text.primary,
+                }, onFocus: () => {
+                    // Focus within handling
+                    const target = event?.target;
+                    if (target) {
+                        target.style.borderColor = theme.colors.primary[500];
+                    }
+                }, onClick: handleContainerClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (jsx("div", { className: "absolute top-2 left-2 right-2 bottom-2 flex items-center justify-center py-1 bg-blue-100 rounded text-blue-600 text-sm font-medium z-10 pointer-events-none", children: "\uD83D\uDCC2 Drop files here" })), jsx("textarea", { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: (e) => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), onSend()), onPaste: handlePaste, placeholder: "Describe what you need... (Try: 'I want to know how much time has been updated')", className: "w-full outline-none resize-none min-h-[3.5rem] max-h-32 border-none px-0 bg-transparent", style: {
+                            color: theme.colors.text.primary,
+                        }, rows: 3 }), jsxs("div", { className: "flex gap-2 items-center justify-between", children: [jsxs("div", { className: "flex gap-1", children: [features.fileUploads !== false && (jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color = theme.colors.primary[500];
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.color = theme.colors.text.tertiary;
+                                        }, title: `Attach files - Supports: ${FileHandler.getAcceptedTypesDescription()}`, tabIndex: -1, type: "button", onClick: () => fileInputRef.current?.click(), children: jsx(Icon, { name: "paperclip", size: "sm" }) })), features.enableImageUploads !== false &&
+                                        features.imageAnalysis !== false && (jsx("button", { className: `p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors ${!imageSupported ? 'opacity-50 cursor-not-allowed' : ''}`, style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
+                                            if (imageSupported) {
+                                                e.currentTarget.style.color = theme.colors.primary[500];
+                                            }
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.color = theme.colors.text.tertiary;
+                                        }, title: imageSupported
+                                            ? 'Attach images - AI can analyze image content'
+                                            : "Current model doesn't support images. Switch to GPT-4O, Claude 3, or Gemini to use image attachments.", tabIndex: -1, type: "button", onClick: () => imageSupported && imageInputRef.current?.click(), disabled: !imageSupported, children: jsx(Icon, { name: "image", size: "sm" }) })), jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, title: "Record audio (coming soon)", tabIndex: -1, type: "button", onClick: handleAudioRecord, disabled: true, children: jsx(Icon, { name: "microphone", size: "sm" }) })] }), jsx("button", { onClick: () => onSend(), disabled: (!query.trim() && attachedFiles.length === 0) || isLoading, className: "rounded-full transition disabled:opacity-50 p-2", style: {
+                                    color: theme.colors.text.primary,
+                                }, onMouseEnter: (e) => {
+                                    if (!e.currentTarget.disabled) {
+                                        e.currentTarget.style.backgroundColor =
+                                            theme.colors.surface.secondary;
+                                    }
+                                }, onMouseLeave: (e) => {
+                                    if (!e.currentTarget.disabled) {
+                                        e.currentTarget.style.backgroundColor = 'transparent';
+                                    }
+                                }, title: "Send", tabIndex: -1, type: "button", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_892_5571)", children: jsx("path", { d: "M13.3334 10.0001L10.0001 6.66675M10.0001 6.66675L6.66675 10.0001M10.0001 6.66675V13.3334M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_892_5571", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) })] })] }), jsx("input", { ref: fileInputRef, type: "file", accept: FileHandler.getInputAcceptAttribute(), multiple: true, onChange: handleAllFileUpload, className: "hidden", "aria-label": "Upload any file" }), jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, className: "hidden", "aria-label": "Upload images" }), features.modelSwitching !== false &&
+                features.imageAnalysis !== false &&
+                features.enableImageUploads !== false &&
+                !imageSupported &&
+                !imageTipDismissed && (jsxs("div", { className: "relative px-2 py-1 bg-amber-50 border border-amber-200 rounded text-amber-700 text-xs flex items-center gap-2", children: [jsx(Icon, { name: "image", size: "xs", className: "opacity-50" }), jsxs("span", { className: "flex-1 pr-4", children: ["\uD83D\uDCA1 ", jsx("strong", { children: "Tip:" }), " Switch to GPT-4O, Claude 3, or Gemini in the model switcher below to enable image attachments"] }), jsx("button", { onClick: () => setImageTipDismissed(true), className: "absolute top-1 right-1 w-4 h-4 flex items-center justify-center text-amber-500 hover:text-amber-700 hover:bg-amber-200 rounded-full transition-colors text-xs font-bold", title: "Dismiss tip", type: "button", children: "\u00D7" })] })), jsxs("div", { className: "flex items-center justify-between text-xs px-0 pt-0", style: { color: theme.colors.text.tertiary }, children: [jsx("div", { className: "flex gap-4", children: features.modelSwitching !== false && (jsx(ModelSwitcher, { models: models, defaultModel: defaultModel, showUsageStats: features.usageTracking !== false && showUsageStats !== false, theme: theme, onModelSelectionChange: modelSelectionHandler })) }), jsx("div", { className: "flex items-center gap-2", children: jsxs("span", { children: [jsx("kbd", { className: "px-1 rounded", style: {
+                                        backgroundColor: theme.colors.surface.secondary,
+                                        color: theme.colors.text.secondary,
+                                    }, children: "\u23CE" }), ' ', "to send,", ' ', jsx("kbd", { className: "px-1 rounded", style: {
+                                        backgroundColor: theme.colors.surface.secondary,
+                                        color: theme.colors.text.secondary,
+                                    }, children: "\u21E7\u23CE" }), ' ', "for new line"] }) })] })] }));
+}
+
+// Helper function to detect system theme preference
+const getSystemThemePreference = () => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    }
+    return 'dark'; // Default to dark if can't detect
+};
+// Helper function to merge custom theme with defaults
+const mergeTheme = (customTheme, baseTheme) => {
+    return {
+        ...baseTheme,
+        ...customTheme,
+        colors: {
+            ...baseTheme.colors,
+            ...customTheme.colors,
+            primary: {
+                ...baseTheme.colors.primary,
+                ...customTheme.colors?.primary,
+            },
+            background: {
+                ...baseTheme.colors.background,
+                ...customTheme.colors?.background,
+            },
+            text: {
+                ...baseTheme.colors.text,
+                ...customTheme.colors?.text,
+            },
+            border: {
+                ...baseTheme.colors.border,
+                ...customTheme.colors?.border,
+            },
+            surface: {
+                ...baseTheme.colors.surface,
+                ...customTheme.colors?.surface,
+            },
+            state: {
+                ...baseTheme.colors.state,
+                ...customTheme.colors?.state,
+            },
+        },
+    };
+};
+/**
+ * Helper to extract text content from message content blocks
+ */
+const getTextFromMessage = (msg) => {
+    return msg.content
+        .filter((block) => block.type === 'text')
+        .map((block) => block.content)
+        .join('\n');
+};
+/**
+ * ChatPanel component
+ * @param isOpen - Whether the chat panel is open
+ * @param setIsOpen - Function to set the chat panel open state
+ * @param onClose - Function to close the chat panel
+ * @param onOpen - Function to open the chat panel
+ * @param userId - User ID - used to identify the user in the streaming server
+ * @param formData - Form data - used to reference the existing form data in the streaming server
+ * @param setFormState - Function to set the form state
+ * @param onNavigate - Function to navigate to a new path
+ * @param theme - Theme
+ * @param showHistory - Whether to show chat history sidebar (default: false)
+ * @param showProfileBubbles - Whether to show profile bubbles in chat (default: false)
+ * @param serverConfig - Flexible server configuration object
+ * @param showFloatingButton - Whether to show the floating button
+ * @param floatingButtonIcon - Icon for the floating button
+ * @param floatingButtonPosition - Position of the floating button
+ * @param floatingButtonSize - Size of the floating button
+ * @param floatingButtonClassName - Class name for the floating button
+ * @param chats - Optional external chat history
+ * @param setChats - Optional function to set external chat history
+ * @param currentChatId - Optional external current chat ID
+ * @param setCurrentChatId - Optional function to set external current chat ID
+ * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
+ * @param initialQuery - Optional initial query to send when modal opens
+ * @param setInitialQuery - Optional function to set/clear the initial query
+ */
+function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme = defaultTheme, // Legacy support
+chatTheme, // New theme system
+themeMode = 'system', // Default to system preference
+showHistory = false, // Default to hidden
+showProfileBubbles = false, // Default to hidden
+modalPosition = 'left', // Default to left position
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }) {
+    const handleSuggestionClick = (s) => {
+        if (setFormState && s.formState)
+            setFormState(s.formState, s.actionType);
+        if (s.path)
+            onNavigate(s.path);
+        onClose();
+    };
+    const containerRef = useRef(null);
+    // SIMPLIFIED ANIMATION STATE
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    // Handle opening animation
+    useEffect(() => {
+        if (isOpen && !isVisible) {
+            setIsVisible(true);
+            setIsAnimating(true);
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    setIsAnimating(false);
+                }, 300);
+            });
+        }
+    }, [isOpen, isVisible]);
+    // Handle closing animation
+    const handleClose = useCallback(() => {
+        if (!isAnimating) {
+            setIsAnimating(true);
+            // Flip external open state immediately so closing classes apply
+            onClose();
+            setIsOpen?.(false);
+            // Keep mounted for duration to allow slide-out
+            setTimeout(() => {
+                setIsVisible(false);
+                setIsAnimating(false);
+            }, 300);
+        }
+    }, [isAnimating, onClose, setIsOpen]);
+    // Handle opening
+    const handleOpen = useCallback(() => {
+        if (!isAnimating) {
+            onOpen?.();
+            setIsOpen?.(true);
+        }
+    }, [isAnimating, onOpen, setIsOpen]);
+    // Determine if panel should be rendered
+    const shouldRenderPanel = isOpen || isVisible;
+    // Determine animation classes
+    const getAnimationClasses = () => {
+        if (!isOpen && isVisible) {
+            return modalPosition === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0';
+        }
+        else if (isOpen && isVisible) {
+            return 'translate-x-0 opacity-100';
+        }
+        else {
+            return modalPosition === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0';
+        }
+    };
+    // Resolve theme mode and create final theme
+    const resolvedThemeMode = useMemo(() => {
+        if (themeMode === 'system') {
+            return getSystemThemePreference();
+        }
+        return themeMode;
+    }, [themeMode]);
+    const finalTheme = useMemo(() => {
+        const baseTheme = resolvedThemeMode === 'dark' ? defaultDarkTheme : defaultLightTheme;
+        return chatTheme ? mergeTheme(chatTheme, baseTheme) : baseTheme;
+    }, [resolvedThemeMode, chatTheme]);
+    // Generate custom scrollbar styles based on theme
+    const scrollbarStyles = `
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: ${finalTheme.colors.primary[500]} ${finalTheme.colors.surface.secondary};
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: ${finalTheme.colors.surface.secondary};
+      border-radius: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: ${finalTheme.colors.primary[500]};
+      border-radius: 4px;
+      border: 1px solid ${finalTheme.colors.surface.secondary};
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: ${finalTheme.colors.primary[600]};
+    }
+    
+    /* Animation classes */
+    .chat-panel-enter {
+      transform: translateX(${modalPosition === 'left' ? '-100%' : '100%'});
+      opacity: 0;
+    }
+    
+    .chat-panel-enter-active {
+      transform: translateX(0);
+      opacity: 1;
+      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .chat-panel-exit {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    
+    .chat-panel-exit-active {
+      transform: translateX(${modalPosition === 'left' ? '-100%' : '100%'});
+      opacity: 0;
+      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Background overlay animations */
+    .overlay-enter {
+      opacity: 0;
+    }
+    
+    .overlay-enter-active {
+      opacity: 1;
+      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .overlay-exit {
+      opacity: 1;
+    }
+    
+    .overlay-exit-active {
+      opacity: 0;
+      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Close button animations */
+    .close-button-enter {
+      transform: scale(0.8) rotate(-90deg);
+      opacity: 0;
+    }
+    
+    .close-button-enter-active {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+      transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    
+    .close-button-exit {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+    }
+    
+    .close-button-exit-active {
+      transform: scale(0.8) rotate(90deg);
+      opacity: 0;
+      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  `;
+    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs(ErrorBoundary, { children: [!isOpen && showFloatingButton && (jsx(FloatingChatButton, { onClick: handleOpen, theme: theme, icon: floatingButtonIcon, position: floatingButtonPosition, size: floatingButtonSize, className: floatingButtonClassName })), shouldRenderPanel && (jsxs("div", { className: "fixed inset-0 z-50", children: [jsx("div", { className: `absolute inset-0 bg-black/20 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`, onClick: handleClose }), jsx("div", { className: `fixed z-[60] top-6 transition-all duration-300 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}`, style: { ...(modalPosition === 'left'
+                                        ? { left: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginLeft: '16px' }
+                                        : { right: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginRight: '16px' }) }, children: jsx("button", { onClick: handleClose, className: "w-10 h-10 rounded-full shadow-lg transition-all duration-200 flex items-center justify-center text-xl font-bold hover:scale-110", style: {
+                                        backgroundColor: finalTheme.colors.surface.elevated,
+                                        color: finalTheme.colors.text.secondary,
+                                        border: `2px solid ${finalTheme.colors.border.primary}`,
+                                        boxShadow: finalTheme.shadows.lg,
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.backgroundColor =
+                                            finalTheme.colors.surface.secondary;
+                                        e.currentTarget.style.color = finalTheme.colors.text.primary;
+                                        e.currentTarget.style.borderColor =
+                                            finalTheme.colors.border.secondary;
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.backgroundColor =
+                                            finalTheme.colors.surface.elevated;
+                                        e.currentTarget.style.color =
+                                            finalTheme.colors.text.secondary;
+                                        e.currentTarget.style.borderColor =
+                                            finalTheme.colors.border.primary;
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, title: "Close", children: "\u00D7" }) }), jsxs("div", { className: `fixed top-0 h-full w-full z-50 flex flex-col relative
+                ${modalPosition === 'left' ? 'left-0 rounded-r-lg' : 'right-0 rounded-l-lg'}
+                ${showHistory ? 'sm:w-[90vw] md:w-[700px]' : 'sm:w-[80vw] md:w-[550px]'}
+                transition-all duration-300 ease-out
+                ${getAnimationClasses()}
+              `, style: {
+                                    backgroundColor: finalTheme.colors.background.primary,
+                                    color: finalTheme.colors.text.primary,
+                                    boxShadow: modalPosition === 'left'
+                                        ? '8px 0 32px rgba(0, 0, 0, 0.3), 4px 0 16px rgba(0, 0, 0, 0.2)'
+                                        : '-8px 0 32px rgba(0, 0, 0, 0.3), -4px 0 16px rgba(0, 0, 0, 0.2)',
+                                }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: [jsx("div", { className: `flex items-center justify-between px-6 py-4 border-b min-h-[72px] transition-all duration-500 delay-100 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`, style: {
+                                            borderColor: finalTheme.colors.border.primary,
+                                            backgroundColor: finalTheme.colors.background.primary,
+                                        }, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: jsx(Icon, { name: "ai", size: "sm", style: { color: finalTheme.colors.text.primary } }) }), jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: "AI Logistics & Customs Expert" }), jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: "Ready to assist you with your queries" })] })] }) }), jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: () => { }, newChat: () => { }, theme: finalTheme, isOpen: isOpen })), jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
+                                                        backgroundColor: finalTheme.colors.background.primary,
+                                                    }, children: jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, 
+                                                        // AI functionality props
+                                                        userId: userId, serverConfig: serverConfig, formData: formData, setFormState: setFormState, onNavigate: onNavigate, chatLevel: chatLevel, 
+                                                        // External chat management
+                                                        chats: chats, setChats: setChats, currentChatId: currentChatId, setCurrentChatId: setCurrentChatId, 
+                                                        // Model configuration
+                                                        models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, 
+                                                        // Initial query handling
+                                                        initialQuery: initialQuery, setInitialQuery: setInitialQuery }) }) })] })] })] }))] })] }));
+}
+/**
+ * ChatHistorySidebar component with animation support
+ */
+function ChatHistorySidebar({ chats, currentChatId, switchChat, newChat, theme, isOpen, }) {
+    return (jsx("div", { className: `flex-shrink-0 flex-grow-0 border-r flex flex-col h-full p-2 w-[150px] transition-all duration-500 delay-400 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'}`, style: {
+            backgroundColor: theme.colors.background.secondary,
+            borderColor: theme.colors.border.primary,
+        }, children: jsxs("div", { className: "flex-1 overflow-y-auto flex flex-col items-center gap-2 p-2 custom-scrollbar", children: [jsx("button", { className: "rounded-lg w-full py-2 font-bold text-xl mb-2 shadow transition-colors", style: {
+                        backgroundColor: theme.colors.primary[600],
+                        color: theme.colors.text.inverse,
+                        borderColor: theme.colors.primary[700],
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = theme.colors.primary[700];
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = theme.colors.primary[600];
+                    }, onClick: newChat, children: "+" }), Object.keys(chats)
+                    .sort((a, b) => Number(b) - Number(a))
+                    .map((chatId) => (jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors w-full", style: {
+                        backgroundColor: chatId === currentChatId
+                            ? theme.colors.primary[900]
+                            : theme.colors.surface.primary,
+                        color: chatId === currentChatId
+                            ? theme.colors.primary[100]
+                            : theme.colors.text.secondary,
+                        fontWeight: chatId === currentChatId ? 'bold' : 'normal',
+                    }, onMouseEnter: (e) => {
+                        if (chatId !== currentChatId) {
+                            e.currentTarget.style.backgroundColor =
+                                theme.colors.surface.secondary;
+                        }
+                    }, onMouseLeave: (e) => {
+                        if (chatId !== currentChatId) {
+                            e.currentTarget.style.backgroundColor =
+                                theme.colors.surface.primary;
+                        }
+                    }, onClick: () => switchChat(chatId), title: (chats[chatId]?.[0]
+                        ? getTextFromMessage(chats[chatId][0])
+                        : '')?.slice(0, 30) ||
+                        `Chat started at ${new Date(Number(chatId)).toLocaleString()}`, children: [jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-blue-50", children: jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "truncate font-semibold", children: (chats[chatId]?.[0]
+                                        ? getTextFromMessage(chats[chatId][0])
+                                        : '')?.slice(0, 18) || 'New chat' }), jsx("div", { className: "text-xs text-gray-400", children: (() => {
+                                        const now = Date.now();
+                                        const diff = Math.floor((now - Number(chatId)) / 1000);
+                                        if (diff < 60)
+                                            return 'Just now';
+                                        if (diff < 3600)
+                                            return `${Math.floor(diff / 60)}m ago`;
+                                        if (diff < 86400)
+                                            return `${Math.floor(diff / 3600)}h ago`;
+                                        return `${Math.floor(diff / 86400)}d ago`;
+                                    })() })] })] }, chatId)))] }) }));
+}
+/**
+ * FloatingChatButton component
+ * @param onClick - Function to handle the click event
+ * @param theme - Theme
+ * @param icon - Icon for the floating button
+ * @param className - Class name for the floating button
+ * @param position - Position of the floating button
+ * @param size - Size of the floating button
+ */
+function FloatingChatButton({ onClick, theme = defaultTheme, icon, className = '', position = 'bottom-right', size = 'md', }) {
+    // Note: Theme is now handled via Tailwind classes directly
+    // Position classes
+    const positionClasses = {
+        'bottom-right': 'bottom-6 right-6',
+        'bottom-left': 'bottom-6 left-6',
+        'top-right': 'top-6 right-6',
+        'top-left': 'top-6 left-6',
+    };
+    // Size classes
+    const sizeClasses = {
+        sm: 'w-12 h-12',
+        md: 'w-14 h-14',
+        lg: 'w-16 h-16',
+    };
+    const iconSizes = {
+        sm: { width: 20, height: 20 },
+        md: { width: 24, height: 24 },
+        lg: { width: 28, height: 28 },
+    };
+    return (jsx("div", { className: `fixed z-50 ${positionClasses[position]} ${className}`, children: jsx("button", { onClick: onClick, className: `
+          ${sizeClasses[size]}
+          bg-blue-600 hover:bg-blue-700
+          text-white rounded-full shadow-lg hover:shadow-xl
+          flex items-center justify-center
+          transition-all duration-200 ease-in-out
+          hover:scale-105 active:scale-95
+          focus:outline-none focus:ring-4 focus:ring-blue-200
+        `, title: "Open AI Assistant", "aria-label": "Open AI Assistant", children: icon || (jsx(Icon, { name: "ai", size: iconSizes[size].width, className: "text-white" })) }) }));
+}
+
+/**
+ * Generic helper that patches an existing object with an AI-generated payload.
+ *
+ *  • Skips undefined / null values so they never blank user input
+ *  • Coerces strings → numbers when the draft already stores a number
+ *  • Allows per-field key mapping & transform overrides
+ */
+function mergeWithAi(draft, ai, config = {}) {
+    if (!ai || Object.keys(ai).length === 0)
+        return draft;
+    const { keyMap = {}, transforms = {} } = config;
+    // Clone current state so we don’t mutate in-place
+    const next = { ...draft };
+    for (const rawKey of Object.keys(ai)) {
+        // Map AI key → draft key if necessary
+        const k = keyMap[rawKey] ?? rawKey;
+        const incoming = ai[rawKey];
+        if (incoming == null)
+            continue;
+        // Field-specific transform takes precedence
+        if (k in transforms) {
+            next[k] = transforms[k](incoming, next);
+            continue;
+        }
+        // Primitive coercion: if existing field is numeric, cast to number
+        if (typeof next[k] === 'number') {
+            // @ts-expect-error – numeric cast
+            next[k] = Number(incoming);
+        }
+        else {
+            // @ts-expect-error – dynamic key assignment
+            next[k] = incoming;
+        }
+    }
+    return next;
+}
+
+/**
+ * React hook that merges an AI-generated payload into local form state.
+ *
+ * Usage:
+ *   const { pending, applyPending } = useAiMerge({ ai, draft, onMerged })
+ *   <WarningModal isOpen={!!pending} onConfirm={applyPending} />
+ */
+function useAiMerge({ ai, draft, onMerged, config }) {
+    const [pending, setPending] = useState(null);
+    useEffect(() => {
+        if (!ai || Object.keys(ai).length === 0)
+            return;
+        const merged = mergeWithAi(draft, ai, config);
+        // if nothing changed, no need to do anything
+        const changed = JSON.stringify(draft) !== JSON.stringify(merged);
+        if (!changed)
+            return;
+        // naïve ‘dirty’ check – consumer can decide whether to overwrite immediately
+        setPending(ai);
+    }, [ai]);
+    const applyPending = () => {
+        if (!pending)
+            return;
+        const merged = mergeWithAi(draft, pending, config);
+        onMerged(merged);
+        setPending(null);
+    };
+    const clearPending = () => setPending(null);
+    return { pending, applyPending, clearPending };
+}
+
+export { ChatPanel, Icon as CommandIcon, Conversation, ErrorBoundary, ModelSwitcher, SuggestionCard, SuggestionsPanel, defaultTheme as defaultCommandTheme, mergeWithAi, useAiMerge, useDebouncedSuggestions, useModelSwitcher, useStreamingAI, useSuggestions };
+//# sourceMappingURL=index.esm.js.map