@chatwidgetai/chat-widget 0.1.6 → 0.1.7

package/dist/ai-chat-widget.umd.js

@@ -17755,8 +17755,6 @@
 	                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 = '';
@@ -38912,20 +38910,17 @@
 	    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] = reactExports.useState(true);
 	    // Hide suggested questions after first user message
@@ -38945,241 +38940,25 @@
 	        onSendMessage(question);
 	    };
 	    const hasMessages = messages.length > 0;
-	    return (jsxRuntimeExports.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntimeExports.jsxs("div", { className: "ai-chat-header", children: [jsxRuntimeExports.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntimeExports.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntimeExports.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntimeExports.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntimeExports.jsx(MinimizeIcon, {}) })] }), error && (jsxRuntimeExports.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntimeExports.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsxRuntimeExports.jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsxRuntimeExports.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 && (jsxRuntimeExports.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntimeExports.jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
+	    return (jsxRuntimeExports.jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxRuntimeExports.jsxs("div", { className: "ai-chat-header", children: [jsxRuntimeExports.jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsxRuntimeExports.jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsxRuntimeExports.jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsxRuntimeExports.jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsxRuntimeExports.jsx(MinimizeIcon, {}) })] }), error && (jsxRuntimeExports.jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxRuntimeExports.jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining"] })), isLimitReached && (jsxRuntimeExports.jsx("div", { className: "ai-chat-error", role: "alert", children: "Message limit reached. Please start a new conversation." })), jsxRuntimeExports.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 && (jsxRuntimeExports.jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsxRuntimeExports.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;
 	}
 
@@ -39541,19 +39320,23 @@
 	 * 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;
 	}
@@ -39594,19 +39377,9 @@
 	// Icon components mapping
 	const iconComponents = {
 	    FiMessageCircle: () => (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.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: () => (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.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: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.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" }), jsxRuntimeExports.jsx("polyline", { points: "22,6 12,13 2,6" })] })),
-	    FiPhone: () => (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.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: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntimeExports.jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
-	    FiZap: () => (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })),
-	    FiSend: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsxRuntimeExports.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] })),
-	    FiUser: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsxRuntimeExports.jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
-	    FiUsers: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsxRuntimeExports.jsx("circle", { cx: "9", cy: "7", r: "4" }), jsxRuntimeExports.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsxRuntimeExports.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
-	    FiHeadphones: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsxRuntimeExports.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: () => (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsxRuntimeExports.jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsxRuntimeExports.jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsxRuntimeExports.jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsxRuntimeExports.jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsxRuntimeExports.jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsxRuntimeExports.jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsxRuntimeExports.jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsxRuntimeExports.jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
 	    FiChevronDown: () => (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.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] = reactExports.useState(false);
 	    const [autoDetectedTheme, setAutoDetectedTheme] = reactExports.useState('light');
 	    const widgetRef = reactExports.useRef(null);
@@ -39647,7 +39420,6 @@
 	        console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
 	        if (config) {
 	            console.log('[ChatWidget] Config details:', {
-	                theme: config.appearance?.theme,
 	                accentColor: config.appearance?.primaryColor,
 	                autoDetectedTheme,
 	            });
@@ -39687,7 +39459,7 @@
 	    }, [isOpen, onClose]);
 	    // Handle close on Escape key
 	    reactExports.useEffect(() => {
-	        if (!isOpen || !config?.appearance.closeOnEscape)
+	        if (!isOpen)
 	            return;
 	        const handleEscapeKey = (event) => {
 	            if (event.key === 'Escape') {
@@ -39697,16 +39469,10 @@
 	        };
 	        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
@@ -39715,17 +39481,15 @@
 	    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 = {
@@ -39737,10 +39501,9 @@
 	        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);
@@ -39762,24 +39525,8 @@
 	    }
 	    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 (jsxRuntimeExports.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntimeExports.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntimeExports.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntimeExports.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsxRuntimeExports.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntimeExports.jsx(IconComponent, {}) }) })] }) }));
+	    const IconComponent = isOpen ? iconComponents.FiChevronDown : iconComponents.FiMessageCircle;
+	    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntimeExports.jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsxRuntimeExports.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsxRuntimeExports.jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", children: jsxRuntimeExports.jsx("div", { className: "ai-chat-button-svg", children: jsxRuntimeExports.jsx(IconComponent, {}) }) })] }) }));
 	};
 
 	/**
@@ -39807,7 +39554,6 @@
 	        widgetId: options.widgetId,
 	        apiUrl: options.apiUrl,
 	        position: options.position,
-	        theme: options.theme,
 	        primaryColor: options.primaryColor,
 	        onOpen: options.onOpen,
 	        onClose: options.onClose,