@chatwidgetai/chat-widget 0.1.6 → 0.1.7

package/dist/index.js

@@ -417,8 +417,6 @@ function useChat(options) {
                 const config = await apiClient.current.getConfig();
                 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 = '';
@@ -21578,20 +21576,17 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
     console.log('[ChatWindow] Rendering ChatWindow component');
     const appearance = config?.appearance;
     const behavior = config?.behavior;
+    // Use simplified appearance fields
     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...';
+    const headerTitle = appearance?.headerTitle || 'AI Assistant';
+    const welcomeMessage = appearance?.welcomeMessage || '👋 Hi there! How can I assist you today?';
+    const inputPlaceholder = appearance?.placeholder || 'Ask me anything...';
+    console.log('[ChatWindow] Appearance values:', {
+        size,
+        headerTitle,
+        welcomeMessage,
+        inputPlaceholder,
+    });
     // Track if suggested questions should be shown
     const [showSuggestedQuestions, setShowSuggestedQuestions] = react.useState(true);
     // Hide suggested questions after first user message
@@ -21611,241 +21606,25 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
         onSendMessage(question);
     };
     const hasMessages = messages.length > 0;
-    return (jsxRuntime.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntime.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntime.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntime.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntime.jsx(MinimizeIcon, {}) })] }), error && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntime.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsxRuntime.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 && !hasMessages && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsxRuntime.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntime.jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
+    return (jsxRuntime.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header", children: [jsxRuntime.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntime.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntime.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntime.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntime.jsx(MinimizeIcon, {}) })] }), error && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntime.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsxRuntime.jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsxRuntime.jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && !hasMessages && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsxRuntime.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntime.jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload })] }));
 };
 
-/**
- * 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
+ * Simplified to only handle flat appearance schema
  *
  * @param appearance - Widget appearance configuration
- * @param theme - Current theme ('light' or 'dark')
+ * @param theme - Current theme ('light' or 'dark') - kept for compatibility but not used for theme selection
  */
-function applyAppearanceStyles(appearance, theme = 'light') {
+function applyAppearanceStyles(appearance) {
     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.icon)
-            styles['--button-icon'] = btn.icon;
-        if (btn.iconColor)
-            styles['--button-icon-color'] = btn.iconColor;
-        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();
-        }
+    // Apply primary color
+    if (appearance.primaryColor) {
+        styles['--primary-color'] = appearance.primaryColor;
     }
+    // Note: All legacy theme system code (lightMode, darkMode, ThemeAppearanceConfig)
+    // has been removed. The widget now uses a simplified flat appearance schema.
+    // Theme-specific styling is handled by generateThemeStyles() using auto-detected theme.
     return styles;
 }
 
@@ -22207,19 +21986,23 @@ function detectTheme(element) {
  * Create a MutationObserver to watch for theme changes
  */
 function createThemeObserver(element, callback) {
+    let lastTheme = detectTheme(element);
     const observer = new MutationObserver(() => {
         const theme = detectTheme(element);
-        callback(theme);
+        if (theme !== lastTheme) {
+            lastTheme = theme;
+            callback(theme);
+        }
     });
     // Observe body for class/style changes (common for theme switching)
     observer.observe(document.body, {
         attributes: true,
-        attributeFilter: ['class', 'style', 'data-theme'],
+        attributeFilter: ['class', 'style', 'data-theme', 'data-bs-theme'],
     });
     // Also observe html element
     observer.observe(document.documentElement, {
         attributes: true,
-        attributeFilter: ['class', 'style', 'data-theme'],
+        attributeFilter: ['class', 'style', 'data-theme', 'data-bs-theme'],
     });
     return observer;
 }
@@ -22260,19 +22043,9 @@ styleInject(css_248z);
 // Icon components mapping
 const iconComponents = {
     FiMessageCircle: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) })),
-    FiMessageSquare: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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" }) })),
-    FiMail: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), jsxRuntime.jsx("polyline", { points: "22,6 12,13 2,6" })] })),
-    FiPhone: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) })),
-    FiHelpCircle: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
-    FiZap: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })),
-    FiSend: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] })),
-    FiUser: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
-    FiUsers: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }), jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
-    FiHeadphones: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })] })),
-    FiCpu: () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsxRuntime.jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsxRuntime.jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsxRuntime.jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsxRuntime.jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsxRuntime.jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsxRuntime.jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsxRuntime.jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
     FiChevronDown: () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) })),
 };
-const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
+const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bottom-right', primaryColor, onOpen, onClose, onMessage, onError, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     const [autoDetectedTheme, setAutoDetectedTheme] = react.useState('light');
     const widgetRef = react.useRef(null);
@@ -22313,7 +22086,6 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
         console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
         if (config) {
             console.log('[ChatWidget] Config details:', {
-                theme: config.appearance?.theme,
                 accentColor: config.appearance?.primaryColor,
                 autoDetectedTheme,
             });
@@ -22353,7 +22125,7 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
     }, [isOpen, onClose]);
     // Handle close on Escape key
     react.useEffect(() => {
-        if (!isOpen || !config?.appearance.closeOnEscape)
+        if (!isOpen)
             return;
         const handleEscapeKey = (event) => {
             if (event.key === 'Escape') {
@@ -22363,16 +22135,10 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
         };
         document.addEventListener('keydown', handleEscapeKey);
         return () => document.removeEventListener('keydown', handleEscapeKey);
-    }, [isOpen, config, onClose]);
-    // Determine theme - simplified: always auto-detect unless explicitly overridden
+    }, [isOpen, onClose]);
+    // Determine theme - always auto-detect from background
     const appearanceConfig = config?.appearance;
-    const themeSetting = themeOverride || appearanceConfig?.theme || 'auto';
-    // Use auto-detected theme, or explicit override
-    const effectiveTheme = themeSetting === 'auto'
-        ? autoDetectedTheme
-        : themeSetting === 'dark'
-            ? 'dark'
-            : 'light';
+    const effectiveTheme = autoDetectedTheme;
     // Determine position (config takes priority over prop)
     const effectivePosition = config?.appearance.position || position;
     // Get accent color from config or prop
@@ -22381,17 +22147,15 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
     const simpleAppearance = {
         accentColor,
         size: appearanceConfig?.size || 'small',
-        welcomeTitle: appearanceConfig?.lightMode?.chat?.welcomeTitle,
-        welcomeMessage: appearanceConfig?.welcomeMessage || appearanceConfig?.lightMode?.chat?.welcomeMessage,
-        placeholder: appearanceConfig?.placeholder || appearanceConfig?.lightMode?.footer?.inputPlaceholder,
-        headerTitle: appearanceConfig?.lightMode?.header?.title,
-        buttonIcon: appearanceConfig?.buttonIcon || appearanceConfig?.lightMode?.button?.icon,
+        welcomeMessage: appearanceConfig?.welcomeMessage || '',
+        placeholder: appearanceConfig?.placeholder || '',
+        headerTitle: appearanceConfig?.headerTitle || '',
     };
     // Generate theme styles from accent color
     const generatedStyles = generateThemeStyles(simpleAppearance, effectiveTheme);
     // Also apply legacy styles for backward compatibility
     const legacyStyles = appearanceConfig
-        ? applyAppearanceStyles(appearanceConfig, effectiveTheme)
+        ? applyAppearanceStyles(appearanceConfig)
         : {};
     // Merge styles (generated takes priority for new simplified system)
     const customStyles = {
@@ -22403,10 +22167,9 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
         console.log('[ChatWidget] Theme info:', {
             effectiveTheme,
             autoDetectedTheme,
-            themeSetting,
             accentColor,
         });
-    }, [effectiveTheme, autoDetectedTheme, themeSetting, accentColor]);
+    }, [effectiveTheme, autoDetectedTheme, accentColor]);
     const handleToggle = () => {
         const newState = !isOpen;
         console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
@@ -22428,24 +22191,8 @@ const ChatWidget = ({ widgetId, apiUrl = window.location.origin, position = 'bot
     }
     console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
     // Get button icon based on state
-    const getButtonIcon = () => {
-        if (isOpen) {
-            return iconComponents.FiChevronDown;
-        }
-        const themeConfig = effectiveTheme === 'dark'
-            ? appearanceConfig?.darkMode
-            : appearanceConfig?.lightMode;
-        const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
-        return iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
-    };
-    const buttonIconColor = (() => {
-        const themeConfig = effectiveTheme === 'dark'
-            ? appearanceConfig?.darkMode
-            : appearanceConfig?.lightMode;
-        return themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
-    })();
-    const IconComponent = getButtonIcon();
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntime.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsxRuntime.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntime.jsx(IconComponent, {}) }) })] }) }));
+    const IconComponent = isOpen ? iconComponents.FiChevronDown : iconComponents.FiMessageCircle;
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntime.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", children: jsxRuntime.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntime.jsx(IconComponent, {}) }) })] }) }));
 };
 
 exports.ApiError = ApiError;