@chatwidgetai/chat-widget 0.1.1 → 0.1.3

package/dist/index.esm.js

@@ -67,6 +67,19 @@ async function buildApiError(response, defaultMessage) {
 class WidgetApiClient {
     constructor(config) {
         this.config = config;
+        this.detectedTimeZone = WidgetApiClient.detectTimeZone();
+    }
+    static detectTimeZone() {
+        try {
+            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            return tz && tz.trim().length > 0 ? tz : "UTC";
+        }
+        catch {
+            return "UTC";
+        }
+    }
+    getTimeZone() {
+        return this.detectedTimeZone;
     }
     /**
      * Get widget configuration
@@ -87,7 +100,15 @@ class WidgetApiClient {
     }
     async getOrCreateConversation(conversationId) {
         const baseUrl = `${this.config.apiUrl}/api/widget/${this.config.widgetId}/conversation`;
-        const query = conversationId ? `?conversationId=${encodeURIComponent(conversationId)}` : '';
+        const params = new URLSearchParams();
+        if (conversationId) {
+            params.set('conversationId', conversationId);
+        }
+        const timeZone = this.getTimeZone();
+        if (timeZone) {
+            params.set('timeZone', timeZone);
+        }
+        const query = params.toString() ? `?${params.toString()}` : '';
         const response = await fetch(`${baseUrl}${query}`, {
             method: 'GET',
             headers: {
@@ -134,6 +155,7 @@ class WidgetApiClient {
                 conversationId: conversationId,
                 message,
                 fileIds,
+                timeZone: this.getTimeZone(),
             }),
         });
         if (!response.ok) {
@@ -156,6 +178,7 @@ class WidgetApiClient {
                     conversationId: conversationId,
                     message,
                     fileIds,
+                    timeZone: this.getTimeZone(),
                 }),
             });
             if (!response.ok) {
@@ -232,11 +255,6 @@ class WidgetApiClient {
 /**
  * Generate a unique session ID
  */
-function generateSessionId() {
-    const timestamp = Date.now().toString(36);
-    const randomStr = Math.random().toString(36).substring(2, 15);
-    return `session_${timestamp}_${randomStr}`;
-}
 /**
  * Generate a unique message ID
  */
@@ -291,6 +309,18 @@ function loadConversation(widgetId) {
         return null;
     }
 }
+/**
+ * Clear conversation from localStorage
+ */
+function clearConversation(widgetId) {
+    try {
+        const key = getStorageKey(widgetId);
+        localStorage.removeItem(key);
+    }
+    catch (error) {
+        console.error('Failed to clear conversation:', error);
+    }
+}
 /**
  * Check if localStorage is available
  */
@@ -383,29 +413,53 @@ function useChat(options) {
         config: null,
     });
     const apiClient = useRef(new WidgetApiClient({ widgetId, apiKey, apiUrl }));
-    // Load configuration and conversation on mount
+    // Load configuration on mount and hydrate with existing conversation if available
     useEffect(() => {
+        let isMounted = true;
+        console.log('[useChat] Effect running, mounting component');
         const initialize = async () => {
             try {
-                // Load config
+                console.log('[useChat] Fetching config...');
                 const config = await apiClient.current.getConfig();
-                // Get or create conversation
+                console.log('[useChat] Config fetched successfully:', {
+                    hasAppearance: !!config.appearance,
+                    hasLightMode: !!config.appearance?.lightMode,
+                    hasDarkMode: !!config.appearance?.darkMode,
+                });
                 const persistConversation = config.behavior.persistConversation ?? true;
-                let conversationId;
+                let conversationId = '';
+                let messages = [];
                 if (persistConversation && isStorageAvailable()) {
                     const stored = loadConversation(widgetId);
-                    conversationId = stored?.conversationId || stored?.sessionId; // Support old sessionId for backwards compatibility
+                    const storedId = stored?.conversationId || stored?.sessionId;
+                    if (storedId) {
+                        try {
+                            const conversation = await apiClient.current.getOrCreateConversation(storedId);
+                            conversationId = conversation.id;
+                            messages = conversation.messages;
+                        }
+                        catch (conversationError) {
+                            console.warn('Failed to load existing conversation:', conversationError);
+                        }
+                    }
                 }
-                // Get conversation from backend
-                const conversation = await apiClient.current.getOrCreateConversation(conversationId);
+                if (!isMounted) {
+                    console.log('[useChat] Component unmounted, skipping state update');
+                    return;
+                }
+                console.log('[useChat] Setting config in state');
                 setState(prev => ({
                     ...prev,
                     config,
-                    conversationId: conversation.id,
-                    messages: conversation.messages,
+                    conversationId,
+                    messages,
                 }));
             }
             catch (error) {
+                console.error('[useChat] Error fetching config:', error);
+                if (!isMounted) {
+                    return;
+                }
                 const errorInfo = deriveErrorInfo(error);
                 const err = error instanceof Error ? error : new Error(errorInfo.message);
                 setState(prev => ({ ...prev, error: errorInfo.message }));
@@ -413,11 +467,18 @@ function useChat(options) {
             }
         };
         initialize();
+        return () => {
+            console.log('[useChat] Effect cleanup, unmounting component');
+            isMounted = false;
+        };
     }, [widgetId, apiKey, apiUrl, onError]);
     // Save conversation when messages change
     useEffect(() => {
         const persistConversation = state.config?.behavior.persistConversation ?? true;
-        if (persistConversation && isStorageAvailable() && state.messages.length > 0) {
+        if (persistConversation &&
+            isStorageAvailable() &&
+            state.messages.length > 0 &&
+            state.conversationId) {
             saveConversation(widgetId, state.conversationId, state.messages);
         }
     }, [widgetId, state.messages, state.conversationId, state.config?.behavior.persistConversation]);
@@ -425,13 +486,15 @@ function useChat(options) {
      * Send a message
      */
     const sendMessage = useCallback(async (content, files) => {
-        if (!content.trim() && (!files || files.length === 0))
+        const trimmedContent = content.trim();
+        const hasFiles = !!files && files.length > 0;
+        if (!trimmedContent && !hasFiles)
             return;
         const userMessage = {
             id: generateMessageId(),
             message: {
                 type: 'human',
-                content: content.trim(),
+                content: trimmedContent,
             },
             timestamp: new Date().toISOString(),
             sources: [],
@@ -446,13 +509,37 @@ function useChat(options) {
         }));
         onMessage?.(userMessage);
         try {
+            let conversationId = state.conversationId;
+            if (!conversationId) {
+                const conversation = await apiClient.current.getOrCreateConversation();
+                conversationId = conversation.id;
+                setState(prev => {
+                    const serverMessages = conversation.messages ?? [];
+                    if (serverMessages.length === 0) {
+                        return {
+                            ...prev,
+                            conversationId,
+                        };
+                    }
+                    const serverIds = new Set(serverMessages.map(msg => msg.id));
+                    const mergedMessages = [
+                        ...serverMessages,
+                        ...prev.messages.filter(msg => !serverIds.has(msg.id)),
+                    ];
+                    return {
+                        ...prev,
+                        conversationId,
+                        messages: mergedMessages,
+                    };
+                });
+            }
             // Upload files if provided
             let fileIds;
             if (files && files.length > 0) {
                 fileIds = [];
                 for (const file of files) {
                     try {
-                        const uploadedFile = await apiClient.current.uploadFile(state.conversationId, file);
+                        const uploadedFile = await apiClient.current.uploadFile(conversationId, file);
                         fileIds.push(uploadedFile.id);
                     }
                     catch (uploadError) {
@@ -466,11 +553,11 @@ function useChat(options) {
             let response;
             if (useAgent) {
                 // Use agent endpoint - returns ConversationMessage[]
-                response = await apiClient.current.sendAgentMessage(state.conversationId, content.trim(), fileIds);
+                response = await apiClient.current.sendAgentMessage(conversationId, trimmedContent, fileIds);
             }
             else {
                 // Use standard chat endpoint
-                response = await apiClient.current.sendMessage(state.conversationId, content.trim(), fileIds);
+                response = await apiClient.current.sendMessage(conversationId, trimmedContent, fileIds);
             }
             // Both endpoints now return ConversationMessage[] array (FULL conversation)
             if (Array.isArray(response)) {
@@ -582,12 +669,12 @@ function useChat(options) {
         setState(prev => ({
             ...prev,
             messages: [],
-            conversationId: generateSessionId(),
+            conversationId: '',
             error: null,
         }));
         const persistConversation = state.config?.behavior.persistConversation ?? true;
         if (persistConversation && isStorageAvailable()) {
-            saveConversation(widgetId, generateSessionId(), []);
+            clearConversation(widgetId);
         }
     }, [widgetId, state.config?.behavior.persistConversation]);
     /**
@@ -21355,7 +21442,7 @@ const TypingIndicator = () => {
     return (jsx("div", { className: "ai-chat-message assistant", children: jsxs("div", { className: "ai-chat-typing", children: [jsx("span", { className: "ai-chat-typing-dot" }), jsx("span", { className: "ai-chat-typing-dot" }), jsx("span", { className: "ai-chat-typing-dot" })] }) }));
 };
 
-const MessageList = ({ messages, isTyping = false, showTypingIndicator = true, showTimestamps = true, enableFeedback = true, showSources = true, sourceDisplayMode = 'with-score', welcomeMessage, onFeedback, }) => {
+const MessageList = ({ messages, isTyping = false, showTypingIndicator = true, showTimestamps = true, enableFeedback = true, showSources = true, sourceDisplayMode = 'with-score', welcomeTitle, welcomeMessage, onFeedback, }) => {
     const messagesEndRef = useRef(null);
     // Auto-scroll to bottom when new messages arrive
     useEffect(() => {
@@ -21375,7 +21462,7 @@ const MessageList = ({ messages, isTyping = false, showTypingIndicator = true, s
         }
         return map;
     }, [messages]);
-    return (jsxs("div", { className: "ai-chat-messages", role: "log", "aria-live": "polite", "aria-atomic": "false", children: [messages.length === 0 && welcomeMessage && (jsxs("div", { className: "ai-chat-welcome", children: [jsx("div", { className: "ai-chat-welcome-title", children: "Welcome!" }), jsx("div", { className: "ai-chat-welcome-text", children: welcomeMessage })] })), messages.map((message) => (jsx(Message, { message: message, showTimestamp: showTimestamps, enableFeedback: enableFeedback, showSources: showSources, sourceDisplayMode: sourceDisplayMode, toolCallNameById: toolCallNameById, onFeedback: onFeedback }, message.id))), isTyping && showTypingIndicator && jsx(TypingIndicator, {}), jsx("div", { ref: messagesEndRef })] }));
+    return (jsxs("div", { className: "ai-chat-messages", role: "log", "aria-live": "polite", "aria-atomic": "false", children: [messages.length === 0 && (welcomeTitle || welcomeMessage) && (jsxs("div", { className: "ai-chat-welcome", children: [welcomeTitle && (jsx("div", { className: "ai-chat-welcome-title", children: welcomeTitle })), welcomeMessage && (jsx("div", { className: "ai-chat-welcome-text", children: welcomeMessage }))] })), messages.map((message) => (jsx(Message, { message: message, showTimestamp: showTimestamps, enableFeedback: enableFeedback, showSources: showSources, sourceDisplayMode: sourceDisplayMode, toolCallNameById: toolCallNameById, onFeedback: onFeedback }, message.id))), isTyping && showTypingIndicator && jsx(TypingIndicator, {}), jsx("div", { ref: messagesEndRef })] }));
 };
 
 // Allowed file types
@@ -21401,7 +21488,7 @@ const formatFileSize = (bytes) => {
         return (bytes / 1024).toFixed(1) + ' KB';
     return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 };
-const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled = false, enableFileUpload = false, }) => {
+const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled = false, enableFileUpload = false, separateFromChat = true, }) => {
     const [value, setValue] = useState('');
     const [selectedFiles, setSelectedFiles] = useState([]);
     const textareaRef = useRef(null);
@@ -21459,7 +21546,8 @@ const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled =
             textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
         }
     };
-    return (jsxs("div", { className: "ai-chat-input-container", children: [selectedFiles.length > 0 && (jsx("div", { className: "ai-chat-file-list", children: selectedFiles.map((file, index) => {
+    console.log('[MessageInput] separateFromChat:', separateFromChat, 'class:', separateFromChat ? 'separate' : 'integrated');
+    return (jsxs("div", { className: `ai-chat-input-container ${separateFromChat ? 'separate' : 'integrated'}`, children: [selectedFiles.length > 0 && (jsx("div", { className: "ai-chat-file-list", children: selectedFiles.map((file, index) => {
                     const ext = getFileExtension(file.name);
                     return (jsxs("div", { className: "ai-chat-file-item", children: [jsx("span", { className: "ai-chat-file-extension", children: ext }), jsxs("div", { className: "ai-chat-file-info", children: [jsx("span", { className: "ai-chat-file-name", children: file.name }), jsx("span", { className: "ai-chat-file-size", children: formatFileSize(file.size) })] }), jsx("button", { className: "ai-chat-file-remove", onClick: () => handleRemoveFile(index), "aria-label": "Remove file", children: "\u00D7" })] }, index));
                 }) })), jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) }) })] })), jsx("textarea", { ref: textareaRef, className: "ai-chat-input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsx("button", { className: "ai-chat-send-button", onClick: handleSend, disabled: disabled || (!value.trim() && selectedFiles.length === 0), "aria-label": "Send message", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] })] }));
@@ -21478,9 +21566,23 @@ const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
 };
 
 const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessage, onClose, onFeedback, }) => {
+    console.log('[ChatWindow] Rendering ChatWindow component');
     const appearance = config?.appearance;
     const behavior = config?.behavior;
     const size = appearance?.size || 'medium';
+    console.log('[ChatWindow] Size:', size, 'Appearance:', !!appearance);
+    // Determine current theme config
+    const themePreference = appearance?.theme ?? 'light';
+    const canUseDarkMode = appearance?.darkModeEnabled !== false;
+    const prefersDark = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDarkMode = themePreference === 'auto'
+        ? (canUseDarkMode && prefersDark)
+        : themePreference === 'dark' && canUseDarkMode;
+    const themeConfig = (isDarkMode ? appearance?.darkMode : appearance?.lightMode) ?? (appearance?.lightMode || appearance?.darkMode);
+    const headerTitle = themeConfig?.header?.title ?? appearance?.header?.title ?? appearance?.companyName ?? 'AI Assistant';
+    const welcomeTitle = themeConfig?.chat?.welcomeTitle ?? 'Welcome!';
+    const welcomeMessage = themeConfig?.chat?.welcomeMessage ?? appearance?.welcomeMessage ?? '👋 Hi there! How can I assist you today?';
+    const inputPlaceholder = themeConfig?.footer?.inputPlaceholder ?? appearance?.placeholder ?? 'Ask me anything...';
     // Track if suggested questions should be shown
     const [showSuggestedQuestions, setShowSuggestedQuestions] = useState(true);
     // Hide suggested questions after first user message
@@ -21499,9 +21601,240 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
         setShowSuggestedQuestions(false);
         onSendMessage(question);
     };
-    return (jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxs("div", { className: "ai-chat-header", children: [jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsx("div", { className: "ai-chat-title", children: appearance?.companyName || 'AI Assistant' })] }), jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Close chat", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), error && (jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining in this session"] })), isLimitReached && (jsxs("div", { className: "ai-chat-error", role: "alert", children: ["Message limit reached (", maxMessages, " messages per session). Please start a new conversation."] })), jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeMessage: appearance?.welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : appearance?.placeholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload })] }));
+    return (jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxs("div", { className: "ai-chat-header", children: [jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Close chat", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), error && (jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining in this session"] })), isLimitReached && (jsxs("div", { className: "ai-chat-error", role: "alert", children: ["Message limit reached (", maxMessages, " messages per session). Please start a new conversation."] })), jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeTitle: welcomeTitle, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
 };
 
+/**
+ * Convert shadow size to CSS box-shadow value
+ */
+function getShadowValue(size) {
+    const shadows = {
+        'none': 'none',
+        'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    };
+    return shadows[size] || shadows.none;
+}
+/**
+ * Apply appearance configuration as CSS custom properties
+ * This allows the widget to be fully customizable via the appearance config
+ *
+ * @param appearance - Widget appearance configuration
+ * @param theme - Current theme ('light' or 'dark')
+ */
+function applyAppearanceStyles(appearance, theme = 'light') {
+    const styles = {};
+    // Global font family
+    if (appearance.fontFamily) {
+        styles.fontFamily = appearance.fontFamily;
+    }
+    // Select the correct theme configuration
+    const themeConfig = theme === 'dark' ? appearance.darkMode : appearance.lightMode;
+    // If theme config exists and has required properties, use it
+    if (themeConfig && themeConfig.button) {
+        // ========================================================================
+        // BUTTON APPEARANCE
+        // ========================================================================
+        const btn = themeConfig.button;
+        if (btn.color)
+            styles['--button-color'] = btn.color;
+        if (btn.opacity !== undefined)
+            styles['--button-opacity'] = btn.opacity.toString();
+        if (btn.size)
+            styles['--button-size'] = `${btn.size}px`;
+        if (btn.borderRadius !== undefined)
+            styles['--button-border-radius'] = `${btn.borderRadius}px`;
+        if (btn.borderWidth !== undefined)
+            styles['--button-border-width'] = `${btn.borderWidth}px`;
+        if (btn.borderColor)
+            styles['--button-border-color'] = btn.borderColor;
+        if (btn.borderOpacity !== undefined)
+            styles['--button-border-opacity'] = btn.borderOpacity.toString();
+        if (btn.backdropBlur !== undefined)
+            styles['--button-backdrop-blur'] = `${btn.backdropBlur}px`;
+        if (btn.shadow)
+            styles['--button-shadow'] = getShadowValue(btn.shadow);
+        // ========================================================================
+        // CARD/WINDOW APPEARANCE
+        // ========================================================================
+        const card = themeConfig.card;
+        if (card.backgroundColor)
+            styles['--card-background'] = card.backgroundColor;
+        if (card.opacity !== undefined)
+            styles['--card-opacity'] = card.opacity.toString();
+        if (card.borderRadius !== undefined)
+            styles['--card-border-radius'] = `${card.borderRadius}px`;
+        if (card.borderWidth !== undefined)
+            styles['--card-border-width'] = `${card.borderWidth}px`;
+        if (card.borderColor) {
+            styles['--card-border-color'] = card.borderColor;
+            // Create rgba border color with opacity for box-shadow
+            if (card.borderOpacity !== undefined) {
+                const opacity = card.borderOpacity;
+                // Convert hex to rgba
+                const hex = card.borderColor.replace('#', '');
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                styles['--card-border-color-rgba'] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+            }
+        }
+        if (card.borderOpacity !== undefined)
+            styles['--card-border-opacity'] = card.borderOpacity.toString();
+        if (card.backdropBlur !== undefined)
+            styles['--card-backdrop-blur'] = `${card.backdropBlur}px`;
+        if (card.shadow)
+            styles['--card-shadow'] = getShadowValue(card.shadow);
+        // ========================================================================
+        // HEADER APPEARANCE
+        // ========================================================================
+        const header = themeConfig.header;
+        if (header.backgroundColor)
+            styles['--header-background'] = header.backgroundColor;
+        if (header.opacity !== undefined)
+            styles['--header-opacity'] = header.opacity.toString();
+        if (header.textColor)
+            styles['--header-text-color'] = header.textColor;
+        if (header.borderBottomWidth !== undefined)
+            styles['--header-border-bottom-width'] = `${header.borderBottomWidth}px`;
+        if (header.borderBottomColor)
+            styles['--header-border-bottom-color'] = header.borderBottomColor;
+        if (header.borderBottomOpacity !== undefined)
+            styles['--header-border-bottom-opacity'] = header.borderBottomOpacity.toString();
+        // ========================================================================
+        // CHAT APPEARANCE
+        // ========================================================================
+        const chat = themeConfig.chat;
+        if (chat.backgroundColor)
+            styles['--chat-background'] = chat.backgroundColor;
+        if (chat.opacity !== undefined)
+            styles['--chat-opacity'] = chat.opacity.toString();
+        // Welcome message
+        if (chat.welcomeColor)
+            styles['--welcome-color'] = chat.welcomeColor;
+        // Message bubbles
+        if (chat.enableBubbles) {
+            if (chat.bubbleUserColor)
+                styles['--bubble-user-color'] = chat.bubbleUserColor;
+            if (chat.bubbleUserOpacity !== undefined)
+                styles['--bubble-user-opacity'] = chat.bubbleUserOpacity.toString();
+            if (chat.bubbleAssistantColor)
+                styles['--bubble-assistant-color'] = chat.bubbleAssistantColor;
+            if (chat.bubbleAssistantOpacity !== undefined)
+                styles['--bubble-assistant-opacity'] = chat.bubbleAssistantOpacity.toString();
+            if (chat.bubbleBorderWidth !== undefined)
+                styles['--bubble-border-width'] = `${chat.bubbleBorderWidth}px`;
+            if (chat.bubbleBorderColor)
+                styles['--bubble-border-color'] = chat.bubbleBorderColor;
+            if (chat.bubbleBorderOpacity !== undefined)
+                styles['--bubble-border-opacity'] = chat.bubbleBorderOpacity.toString();
+        }
+        else {
+            // Plain text mode
+            if (chat.textColor)
+                styles['--message-text-color'] = chat.textColor;
+        }
+        // ========================================================================
+        // FOOTER APPEARANCE
+        // ========================================================================
+        const footer = themeConfig.footer;
+        // Only if separate from chat
+        if (footer.separateFromChat) {
+            if (footer.backgroundColor)
+                styles['--footer-background'] = footer.backgroundColor;
+            if (footer.opacity !== undefined)
+                styles['--footer-opacity'] = footer.opacity.toString();
+            if (footer.borderTopWidth !== undefined)
+                styles['--footer-border-top-width'] = `${footer.borderTopWidth}px`;
+            if (footer.borderTopColor)
+                styles['--footer-border-top-color'] = footer.borderTopColor;
+            if (footer.borderTopOpacity !== undefined)
+                styles['--footer-border-top-opacity'] = footer.borderTopOpacity.toString();
+        }
+        // Backdrop blur (only when floating)
+        if (!footer.separateFromChat && footer.backdropBlur !== undefined) {
+            styles['--footer-backdrop-blur'] = `${footer.backdropBlur}px`;
+        }
+        // Input field
+        if (footer.inputBackgroundColor)
+            styles['--input-background'] = footer.inputBackgroundColor;
+        if (footer.inputBackgroundOpacity !== undefined)
+            styles['--input-background-opacity'] = footer.inputBackgroundOpacity.toString();
+        if (footer.inputBorderRadius !== undefined)
+            styles['--input-border-radius'] = `${footer.inputBorderRadius}px`;
+        if (footer.inputBorderWidth !== undefined)
+            styles['--input-border-width'] = `${footer.inputBorderWidth}px`;
+        if (footer.inputBorderColor)
+            styles['--input-border-color'] = footer.inputBorderColor;
+        if (footer.inputBorderOpacity !== undefined)
+            styles['--input-border-opacity'] = footer.inputBorderOpacity.toString();
+        if (footer.inputShadow)
+            styles['--input-shadow'] = getShadowValue(footer.inputShadow);
+        // Send button
+        if (footer.buttonBackgroundColor)
+            styles['--send-button-background'] = footer.buttonBackgroundColor;
+        if (footer.buttonOpacity !== undefined)
+            styles['--send-button-opacity'] = footer.buttonOpacity.toString();
+        if (footer.buttonBorderRadius !== undefined)
+            styles['--send-button-border-radius'] = `${footer.buttonBorderRadius}px`;
+        if (footer.buttonBorderWidth !== undefined)
+            styles['--send-button-border-width'] = `${footer.buttonBorderWidth}px`;
+        if (footer.buttonBorderColor)
+            styles['--send-button-border-color'] = footer.buttonBorderColor;
+        if (footer.buttonBorderOpacity !== undefined)
+            styles['--send-button-border-opacity'] = footer.buttonBorderOpacity.toString();
+        // ========================================================================
+        // HOVER STATES
+        // ========================================================================
+        const hover = themeConfig.hover;
+        if (hover.buttonScale !== undefined)
+            styles['--hover-button-scale'] = hover.buttonScale.toString();
+        if (hover.buttonOpacity !== undefined)
+            styles['--hover-button-opacity'] = hover.buttonOpacity.toString();
+        if (hover.inputBorderColor)
+            styles['--hover-input-border-color'] = hover.inputBorderColor;
+        if (hover.sendButtonOpacity !== undefined)
+            styles['--hover-send-button-opacity'] = hover.sendButtonOpacity.toString();
+        if (hover.closeButtonOpacity !== undefined)
+            styles['--hover-close-button-opacity'] = hover.closeButtonOpacity.toString();
+        // ========================================================================
+        // ACTIVE STATES
+        // ========================================================================
+        const active = themeConfig.active;
+        if (active.inputBorderColor)
+            styles['--active-input-border-color'] = active.inputBorderColor;
+        if (active.inputShadow)
+            styles['--active-input-shadow'] = active.inputShadow;
+    }
+    else {
+        // Fallback to legacy fields if no theme config
+        if (appearance.primaryColor)
+            styles['--primary-color'] = appearance.primaryColor;
+        if (appearance.borderRadius !== undefined)
+            styles['--border-radius'] = `${appearance.borderRadius}px`;
+        // Legacy button
+        if (appearance.button) {
+            const btn = appearance.button;
+            if (btn.color)
+                styles['--button-color'] = btn.color;
+            if (btn.size)
+                styles['--button-size'] = `${btn.size}px`;
+            if (btn.borderRadius !== undefined)
+                styles['--button-border-radius'] = `${btn.borderRadius}px`;
+            if (btn.borderWidth !== undefined)
+                styles['--button-border-width'] = `${btn.borderWidth}px`;
+            if (btn.borderColor)
+                styles['--button-border-color'] = btn.borderColor;
+            if (btn.opacity !== undefined)
+                styles['--button-opacity'] = btn.opacity.toString();
+        }
+    }
+    return styles;
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -21529,11 +21862,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ai-chat-widget{--primary-color:#7c3aed;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#1f2937;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#1f2937;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#374151;--assistant-message-text:#f9fafb;--input-bg:#374151;--input-border:#4b5563}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;background-color:var(--primary-color);border:none;border-radius:50%;box-shadow:var(--shadow-lg);color:#fff;cursor:pointer;display:flex;font-size:24px;height:60px;justify-content:center;transition:transform .2s,box-shadow .2s;width:60px}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);transform:scale(1.05)}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{background-color:var(--background-color);border-radius:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;transition:opacity .2s,transform .2s}.ai-chat-window.size-small{height:400px;width:300px}.ai-chat-window.size-medium{height:600px;width:400px}.ai-chat-window.size-large{height:700px;width:500px}.ai-chat-header{align-items:center;background-color:var(--primary-color);color:#fff;display:flex;justify-content:space-between;padding:16px}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-title{font-size:16px;font-weight:600}.ai-chat-close-button{align-items:center;background:none;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:4px;transition:background-color .2s}.ai-chat-close-button:hover{background-color:hsla(0,0%,100%,.1)}.ai-chat-messages{background-color:var(--background-color);display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{animation:slideIn .2s ease-out;display:flex;flex-direction:column;gap:4px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border-radius:12px;line-height:1.5;max-width:80%;padding:10px 14px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--user-message-bg);border-bottom-right-radius:4px;color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--assistant-message-bg);border-bottom-left-radius:4px;color:var(--assistant-message-text)}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(16,185,129,.08);color:#065f46;gap:10px;padding:6px 12px}.ai-chat-tool-message,.tool-finished{align-items:center;display:inline-flex}.tool-finished{background:rgba(16,185,129,.12);border-radius:50%;color:#059669;height:22px;justify-content:center;position:relative;width:22px}.tool-finished .tool-icon{font-size:14px}.tool-finished .tool-check{align-items:center;background:#10b981;border-radius:50%;bottom:-3px;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#fff;display:inline-flex;font-size:10px;height:14px;justify-content:center;position:absolute;right:-3px;width:14px}.tool-name{font-size:12px;font-weight:600}.ai-chat-message-timestamp{color:#9ca3af;font-size:11px;padding:0 4px}.ai-chat-welcome{color:var(--text-color);padding:32px 16px;text-align:center}.ai-chat-welcome-title{font-size:18px;font-weight:600;margin-bottom:8px}.ai-chat-welcome-text{color:#6b7280;font-size:14px}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-input-container{background-color:var(--background-color);border-top:1px solid var(--border-color);padding:16px}.ai-chat-input-wrapper{align-items:flex-end;display:flex;gap:8px}.ai-chat-input{background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text-color);flex:1;font-family:inherit;font-size:14px;max-height:120px;min-height:40px;outline:none;padding:10px 12px;resize:none;transition:border-color .2s}.ai-chat-input:focus{border-color:var(--primary-color)}.ai-chat-input::placeholder{color:#9ca3af}.ai-chat-send-button{align-items:center;background-color:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:500;height:40px;justify-content:center;min-width:40px;padding:10px 16px;transition:opacity .2s,transform .1s}.ai-chat-send-button:hover:not(:disabled){opacity:.9}.ai-chat-send-button:active:not(:disabled){transform:scale(.95)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(124,58,237,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:#fee2e2;border-left:4px solid #dc2626;border-radius:8px;color:#991b1b;display:flex;font-size:14px;font-weight:500;gap:8px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-error:before{content:\"⚠️\";flex-shrink:0;font-size:16px}.ai-chat-warning{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:13px;margin:8px 16px;padding:12px}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 12px rgba(102,126,234,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#667eea}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(102,126,234,.3);border-radius:50%;border-top-color:#667eea;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
+var css_248z = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);opacity:var(--hover-button-opacity);transform:scale(var(--hover-button-scale))}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:0;right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:0;left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:0}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:0}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-header{align-items:center;border-bottom:var(--header-border-bottom-width) solid var(--header-border-bottom-color);box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--header-text-color);display:flex;justify-content:space-between;padding:20px;position:relative}.ai-chat-header:before{backdrop-filter:blur(var(--header-backdrop-blur));-webkit-backdrop-filter:blur(var(--header-backdrop-blur));background-color:var(--header-background);content:\"\";inset:0;opacity:var(--header-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-header>*{position:relative;z-index:1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-title{color:var(--header-text-color);font-size:var(--header-font-size);font-weight:600;letter-spacing:-.01em}.ai-chat-close-button{align-items:center;background:none;border:none;border-radius:8px;color:var(--header-text-color);cursor:pointer;display:flex;justify-content:center;opacity:.9;padding:8px;transition:all .2s ease}.ai-chat-close-button:hover{background-color:hsla(0,0%,100%,.15);opacity:var(--hover-close-button-opacity);transform:scale(1.05)}.ai-chat-messages{background-color:var(--chat-background);display:flex;flex:1;flex-direction:column;gap:16px;overflow-x:hidden;overflow-y:auto;padding:20px;position:relative}.ai-chat-window:has(.ai-chat-input-container.integrated) .ai-chat-messages{padding-bottom:100px}.ai-chat-messages:before{backdrop-filter:blur(var(--chat-backdrop-blur));-webkit-backdrop-filter:blur(var(--chat-backdrop-blur));background-color:var(--chat-background);bottom:0;content:\"\";left:0;opacity:var(--chat-opacity);pointer-events:none;position:absolute;right:0;top:0;z-index:0}.ai-chat-messages>*{position:relative;z-index:1}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{animation:slideIn .2s ease-out;display:flex;flex-direction:column;gap:4px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--assistant-message-text)}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(16,185,129,.08);color:#065f46;gap:10px;padding:6px 12px}.ai-chat-tool-message,.tool-finished{align-items:center;display:inline-flex}.tool-finished{background:rgba(16,185,129,.12);border-radius:50%;color:#059669;height:22px;justify-content:center;position:relative;width:22px}.tool-finished .tool-icon{font-size:14px}.tool-finished .tool-check{align-items:center;background:#10b981;border-radius:50%;bottom:-3px;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#fff;display:inline-flex;font-size:10px;height:14px;justify-content:center;position:absolute;right:-3px;width:14px}.tool-name{font-size:12px;font-weight:600}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);font-size:11px;mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{color:var(--welcome-color);opacity:var(--welcome-opacity);padding:48px 24px;text-align:center}.ai-chat-welcome-title{color:var(--welcome-color);font-size:calc(var(--welcome-font-size)*1.5);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}.ai-chat-welcome-text{color:var(--welcome-color);font-size:var(--welcome-font-size);line-height:1.6}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-input-container{padding:20px;position:relative}.ai-chat-input-container.separate{border-top:var(--footer-border-top-width) solid var(--footer-border-top-color)}.ai-chat-input-container.integrated{bottom:0;left:0;padding-bottom:calc(20px + var(--card-border-width));position:absolute;right:0;z-index:10}.ai-chat-input-container.separate:before{backdrop-filter:blur(var(--footer-backdrop-blur));-webkit-backdrop-filter:blur(var(--footer-backdrop-blur));background-color:var(--footer-background);content:\"\";inset:0;opacity:var(--footer-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-input-container>*{position:relative;z-index:1}.ai-chat-input-wrapper{align-items:center;background-color:var(--input-background);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);display:flex;gap:0;opacity:var(--input-opacity);padding:6px 6px 6px 16px;transition:all .2s ease}.ai-chat-input-wrapper:hover{border-color:var(--hover-input-border-color)}.ai-chat-input-wrapper:focus-within{border-color:var(--active-input-border-color);box-shadow:var(--active-input-shadow)}.ai-chat-input{background-color:transparent;border:none;border-radius:0;color:var(--text-color);flex:1;font-family:inherit;font-size:15px;max-height:120px;min-height:40px;outline:none;padding:10px 0;resize:none}.ai-chat-input::placeholder{color:#9ca3af}.ai-chat-send-button{align-items:center;background-color:var(--send-button-background);border:var(--send-button-border-width) solid var(--send-button-border-color);border-radius:var(--send-button-border-radius);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-weight:500;height:40px;justify-content:center;min-width:40px;opacity:var(--send-button-opacity);padding:0;transition:all .2s ease;width:40px}.ai-chat-send-button:hover:not(:disabled){opacity:var(--hover-send-button-opacity);transform:scale(1.05)}.ai-chat-send-button:active:not(:disabled){transform:scale(.98)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(0,119,255,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:#fee2e2;border-left:4px solid #dc2626;border-radius:8px;color:#991b1b;display:flex;font-size:14px;font-weight:500;gap:8px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-error:before{content:\"⚠️\";flex-shrink:0;font-size:16px}.ai-chat-warning{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:13px;margin:8px 16px;padding:12px}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
 styleInject(css_248z);
 
 const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const widgetRef = useRef(null);
     const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
         widgetId,
         apiKey,
@@ -21541,6 +21875,21 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         onMessage,
         onError,
     });
+    // Debug logging
+    useEffect(() => {
+        console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
+        if (config) {
+            console.log('[ChatWidget] Config details:', {
+                theme: config.appearance?.theme,
+                darkModeEnabled: config.appearance?.darkModeEnabled,
+                hasLightMode: !!config.appearance?.lightMode,
+                hasDarkMode: !!config.appearance?.darkMode,
+            });
+        }
+    }, [config]);
+    useEffect(() => {
+        console.log('[ChatWidget] isOpen changed:', isOpen);
+    }, [isOpen]);
     // Handle auto-open
     useEffect(() => {
         if (config?.behavior.autoOpen) {
@@ -21553,26 +21902,84 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         }
         return undefined;
     }, [config, onOpen]);
+    // Handle close on outside click
+    useEffect(() => {
+        if (!isOpen || !config?.appearance.closeOnOutsideClick)
+            return;
+        const handleClickOutside = (event) => {
+            if (widgetRef.current && !widgetRef.current.contains(event.target)) {
+                console.log('[ChatWidget] Closing due to outside click');
+                setIsOpen(false);
+                onClose?.();
+            }
+        };
+        // Add slight delay to avoid immediate close on open
+        const timer = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 100);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, config, onClose]);
+    // Handle close on Escape key
+    useEffect(() => {
+        if (!isOpen || !config?.appearance.closeOnEscape)
+            return;
+        const handleEscapeKey = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleEscapeKey);
+        return () => document.removeEventListener('keydown', handleEscapeKey);
+    }, [isOpen, config, onClose]);
     // Determine theme
-    const theme = themeOverride || config?.appearance.theme || 'light';
-    const effectiveTheme = theme === 'auto'
-        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-        : theme;
+    const appearanceConfig = config?.appearance;
+    const themeSetting = themeOverride || appearanceConfig?.theme || 'light';
+    const canUseDarkMode = appearanceConfig?.darkModeEnabled !== false;
+    // Only check system preference if dark mode is enabled
+    const systemPrefersDark = canUseDarkMode && typeof window !== "undefined"
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        : false;
+    const effectiveTheme = !canUseDarkMode
+        ? 'light' // Force light mode if dark mode is disabled
+        : themeSetting === 'auto'
+            ? (systemPrefersDark ? 'dark' : 'light')
+            : themeSetting === 'dark'
+                ? 'dark'
+                : 'light';
     // Determine position (config takes priority over prop)
     const effectivePosition = config?.appearance.position || position;
-    // Apply custom styles
-    const customStyles = {};
-    if (primaryColor || config?.appearance.primaryColor) {
-        customStyles['--primary-color'] = primaryColor || config?.appearance.primaryColor || '';
-    }
-    if (config?.appearance.fontFamily) {
-        customStyles.fontFamily = config.appearance.fontFamily;
-    }
-    if (config?.appearance.borderRadius !== undefined) {
-        customStyles['--border-radius'] = `${config.appearance.borderRadius}px`;
-    }
+    // Apply custom styles from appearance configuration
+    // Use the correct theme configuration (lightMode or darkMode)
+    const customStyles = appearanceConfig
+        ? applyAppearanceStyles(appearanceConfig, effectiveTheme)
+        : {};
+    // Override with prop values if provided
+    if (primaryColor) {
+        customStyles['--primary-color'] = primaryColor;
+    }
+    // Debug logging for theme and styles
+    useEffect(() => {
+        console.log('[ChatWidget] Theme info:', {
+            effectiveTheme,
+            canUseDarkMode,
+            themeSetting,
+            systemPrefersDark,
+            hasCustomStyles: Object.keys(customStyles).length > 0,
+            buttonColor: customStyles['--button-color'],
+            buttonSize: customStyles['--button-size'],
+            cardBackground: customStyles['--card-background'],
+            cardOpacity: customStyles['--card-opacity'],
+            cardBorderRadius: customStyles['--card-border-radius'],
+        });
+        console.log('[ChatWidget] All CSS variables:', customStyles);
+    }, [effectiveTheme, customStyles]);
     const handleToggle = () => {
         const newState = !isOpen;
+        console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
         setIsOpen(newState);
         if (newState) {
             onOpen?.();
@@ -21584,10 +21991,13 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
     const handleFeedback = async (messageId, feedback) => {
         await submitFeedback(messageId, feedback);
     };
-    return (jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsx("div", { className: `ai-chat-widget-container ${effectivePosition}`, children: isOpen ? (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })) : (jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", style: {
-                    width: config?.appearance.buttonSize || 60,
-                    height: config?.appearance.buttonSize || 60,
-                }, children: config?.appearance.buttonIcon ? (jsx("span", { className: "ai-chat-button-icon", children: config.appearance.buttonIcon })) : (jsx("svg", { className: "ai-chat-button-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) })) })) }) }));
+    // Don't render until config is loaded to avoid flash of unstyled content
+    if (!config) {
+        console.log('[ChatWidget] Not rendering - config not loaded yet');
+        return null;
+    }
+    console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
+    return (jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), !isOpen && (jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", children: config?.appearance.buttonIcon ? (jsx("span", { className: "ai-chat-button-icon", children: config.appearance.buttonIcon })) : (jsx("svg", { className: "ai-chat-button-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) })) }))] }) }));
 };
 
 export { ApiError, ChatWidget, useChat };