@wabbit-dashboard/embed 1.0.0

package/dist/wabbit-embed.umd.min.js

@@ -0,0 +1,3604 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Wabbit = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * Configuration management utilities
+     */
+    /**
+     * Validate SDK configuration
+     *
+     * @param config - Configuration to validate
+     * @throws {Error} If configuration is invalid
+     */
+    function validateConfig(config) {
+        if (!config.apiKey) {
+            throw new Error('[Wabbit] API key is required');
+        }
+        if (typeof config.apiKey !== 'string') {
+            throw new Error('[Wabbit] API key must be a string');
+        }
+        // Validate chat config if enabled
+        if (config.chat?.enabled) {
+            if (!config.chat.collectionId) {
+                throw new Error('[Wabbit] collectionId is required when chat is enabled');
+            }
+        }
+        // Validate forms config if enabled
+        if (config.forms?.enabled) {
+            if (!config.forms.formId) {
+                throw new Error('[Wabbit] formId is required when forms is enabled');
+            }
+        }
+    }
+    /**
+     * Detect API URL based on environment
+     * Priority: user config > global variable > environment detection > default
+     */
+    function detectApiUrl(userConfig) {
+        // 1. User explicitly provided
+        if (userConfig)
+            return userConfig;
+        // 2. Global variable (for build-time injection)
+        if (typeof window !== 'undefined' && window.WABBIT_API_URL) {
+            return window.WABBIT_API_URL;
+        }
+        // 3. Environment detection (development vs production)
+        if (typeof window !== 'undefined') {
+            const hostname = window.location.hostname;
+            // Development environment detection
+            if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '0.0.0.0') {
+                return 'http://localhost:3000';
+            }
+        }
+        // 4. Production default
+        return 'https://api.wabbit.io';
+    }
+    /**
+     * Detect WebSocket URL based on environment
+     * Priority: user config > global variable > derive from apiUrl > default
+     */
+    function detectWebSocketUrl(userConfig, apiUrl) {
+        // 1. User explicitly provided
+        if (userConfig)
+            return userConfig;
+        // 2. Global variable (for build-time injection)
+        if (typeof window !== 'undefined' && window.WABBIT_WS_URL) {
+            return window.WABBIT_WS_URL;
+        }
+        // 3. Derive from apiUrl if it's a development URL
+        if (apiUrl && (apiUrl.includes('localhost') || apiUrl.includes('127.0.0.1'))) {
+            return 'ws://localhost:8003/ws/chat';
+        }
+        // 4. Production default
+        return 'wss://api.wabbit.io/ws/chat';
+    }
+    /**
+     * Merge configuration with defaults
+     *
+     * @param config - User configuration
+     * @returns Merged configuration with defaults
+     */
+    function mergeConfig(config) {
+        // Auto-detect URLs if not provided
+        const apiUrl = detectApiUrl(config.apiUrl);
+        const wsUrl = detectWebSocketUrl(config.wsUrl, apiUrl);
+        return {
+            ...config,
+            apiUrl,
+            wsUrl,
+            chat: config.chat
+                ? {
+                    ...config.chat,
+                    position: config.chat.position || 'bottom-right',
+                    triggerType: config.chat.triggerType || 'button',
+                    theme: config.chat.theme || 'auto',
+                    primaryColor: config.chat.primaryColor || '#6366f1',
+                    placeholder: config.chat.placeholder || 'Type your message...'
+                }
+                : undefined,
+            forms: config.forms
+                ? {
+                    ...config.forms,
+                    theme: config.forms.theme || 'auto'
+                }
+                : undefined,
+            emailCapture: config.emailCapture
+                ? {
+                    ...config.emailCapture,
+                    triggerAfterMessages: config.emailCapture.triggerAfterMessages || 3,
+                    fields: config.emailCapture.fields || ['email']
+                }
+                : undefined
+        };
+    }
+
+    /**
+     * Main Wabbit SDK class
+     *
+     * This is the main entry point for initializing and managing
+     * all Wabbit widgets (chat, forms, email capture).
+     */
+    /**
+     * Wabbit SDK main class
+     */
+    class Wabbit {
+        constructor(config) {
+            // Widget instances
+            this.chatWidget = null; // ChatWidget | null
+            this.formsWidget = null; // FormWidget | null
+            this.emailCaptureWidget = null; // EmailCapture | null
+            this.config = config;
+        }
+        /**
+         * Initialize the Wabbit SDK
+         *
+         * @param config - SDK configuration
+         * @returns Wabbit instance
+         *
+         * @example
+         * ```typescript
+         * const wabbit = Wabbit.init({
+         *   apiKey: 'pk_live_xxx',
+         *   chat: { enabled: true, collectionId: 'abc123' }
+         * });
+         * ```
+         */
+        static init(config) {
+            if (Wabbit.instance) {
+                console.warn('[Wabbit] SDK already initialized. Returning existing instance.');
+                return Wabbit.instance;
+            }
+            // Validate and merge config with defaults
+            validateConfig(config);
+            const mergedConfig = mergeConfig(config);
+            Wabbit.instance = new Wabbit(mergedConfig);
+            // Initialize widgets based on merged config
+            if (mergedConfig.chat?.enabled && mergedConfig.chat) {
+                // Import ChatWidget dynamically to avoid circular dependencies
+                Promise.resolve().then(function () { return ChatWidget$1; }).then(({ ChatWidget }) => {
+                    const chat = mergedConfig.chat;
+                    const chatConfig = {
+                        enabled: chat.enabled,
+                        collectionId: chat.collectionId,
+                        // Use chat-specific apiKey/apiUrl if provided, otherwise inherit from WabbitConfig
+                        apiKey: chat.apiKey || mergedConfig.apiKey,
+                        apiUrl: chat.apiUrl || mergedConfig.apiUrl,
+                        wsUrl: mergedConfig.wsUrl || chat.wsUrl, // Use global wsUrl or chat-specific wsUrl
+                        position: chat.position,
+                        triggerType: chat.triggerType,
+                        triggerDelay: chat.triggerDelay,
+                        theme: chat.theme,
+                        primaryColor: chat.primaryColor,
+                        welcomeMessage: chat.welcomeMessage,
+                        placeholder: chat.placeholder
+                    };
+                    const chatWidget = new ChatWidget(chatConfig);
+                    chatWidget.init();
+                    Wabbit.instance.chatWidget = chatWidget;
+                });
+            }
+            if (mergedConfig.forms?.enabled && mergedConfig.forms) {
+                // Import FormWidget dynamically to avoid circular dependencies
+                Promise.resolve().then(function () { return FormWidget$1; }).then(({ FormWidget }) => {
+                    const forms = mergedConfig.forms;
+                    const formConfig = {
+                        enabled: forms.enabled,
+                        containerId: forms.containerId,
+                        formId: forms.formId,
+                        // Use form-specific apiKey/apiUrl if provided, otherwise inherit from WabbitConfig
+                        apiKey: forms.apiKey || mergedConfig.apiKey,
+                        apiUrl: forms.apiUrl || mergedConfig.apiUrl,
+                        theme: forms.theme,
+                        primaryColor: forms.primaryColor,
+                        onSubmit: forms.onSubmit,
+                        onError: forms.onError,
+                        onLoad: forms.onLoad
+                    };
+                    const formWidget = new FormWidget(formConfig);
+                    formWidget.init();
+                    Wabbit.instance.formsWidget = formWidget;
+                });
+            }
+            // Initialize email capture widget if enabled
+            // Note: We need to wait for chat widget to be initialized first
+            if (mergedConfig.emailCapture?.enabled) {
+                const emailCapture = mergedConfig.emailCapture;
+                Promise.resolve().then(function () { return EmailCaptureWidget$1; }).then(({ EmailCaptureWidget }) => {
+                    const emailCaptureConfig = {
+                        enabled: emailCapture.enabled,
+                        triggerAfterMessages: emailCapture.triggerAfterMessages,
+                        title: emailCapture.title,
+                        description: emailCapture.description,
+                        fields: emailCapture.fields,
+                        onCapture: emailCapture.onCapture
+                    };
+                    const emailCaptureWidget = new EmailCaptureWidget(emailCaptureConfig);
+                    emailCaptureWidget.init();
+                    Wabbit.instance.emailCaptureWidget = emailCaptureWidget;
+                    // Connect to chat widget after it's initialized
+                    // Use a small delay to ensure chat widget is ready
+                    setTimeout(() => {
+                        if (Wabbit.instance.chatWidget) {
+                            const chatWidget = Wabbit.instance.chatWidget;
+                            // Set WebSocket client
+                            if (chatWidget.wsClient) {
+                                emailCaptureWidget.setWebSocketClient(chatWidget.wsClient);
+                            }
+                            // Hook into message sending by intercepting ChatWidget's handleSendMessage
+                            const originalHandleSendMessage = chatWidget.handleSendMessage;
+                            if (originalHandleSendMessage) {
+                                chatWidget.handleSendMessage = function (content) {
+                                    originalHandleSendMessage.call(this, content);
+                                    // Notify email capture widget when user sends a message
+                                    emailCaptureWidget.handleMessage();
+                                };
+                            }
+                        }
+                    }, 100);
+                });
+            }
+            // Auto-initialize forms with data-wabbit-form-id (backward compatibility)
+            Wabbit.instance.initLegacyForms(config);
+            // Call onReady callback if provided
+            if (config.onReady) {
+                // Wait for DOM to be ready
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', () => {
+                        config.onReady?.();
+                    });
+                }
+                else {
+                    config.onReady();
+                }
+            }
+            return Wabbit.instance;
+        }
+        /**
+         * Get the current Wabbit instance
+         *
+         * @returns Wabbit instance or null if not initialized
+         */
+        static getInstance() {
+            return Wabbit.instance;
+        }
+        /**
+         * Destroy the SDK instance and cleanup
+         */
+        static destroy() {
+            if (Wabbit.instance) {
+                // Cleanup widgets
+                if (Wabbit.instance.chatWidget) {
+                    Wabbit.instance.chatWidget.destroy();
+                }
+                if (Wabbit.instance.formsWidget) {
+                    Wabbit.instance.formsWidget.destroy();
+                }
+                // Cleanup legacy forms
+                const legacyContainers = document.querySelectorAll('[data-wabbit-form-id]');
+                legacyContainers.forEach((container) => {
+                    const widget = container.__wabbitFormWidget;
+                    if (widget && typeof widget.destroy === 'function') {
+                        widget.destroy();
+                    }
+                });
+                // Cleanup legacy form observer
+                if (Wabbit.instance.legacyFormObserver) {
+                    Wabbit.instance.legacyFormObserver.disconnect();
+                    Wabbit.instance.legacyFormObserver = null;
+                }
+                if (Wabbit.instance.emailCaptureWidget) {
+                    Wabbit.instance.emailCaptureWidget.destroy();
+                }
+                Wabbit.instance = null;
+            }
+        }
+        /**
+         * Get current configuration
+         */
+        getConfig() {
+            return { ...this.config };
+        }
+        /**
+         * Get chat widget instance
+         */
+        get chat() {
+            return this.chatWidget;
+        }
+        /**
+         * Get forms widget instance
+         */
+        get forms() {
+            return this.formsWidget;
+        }
+        /**
+         * Get email capture widget instance
+         */
+        get emailCapture() {
+            return this.emailCaptureWidget;
+        }
+        /**
+         * Initialize legacy forms (backward compatibility)
+         *
+         * Automatically initializes forms with data-wabbit-form-id attribute
+         * This maintains compatibility with the old embed-form.js script
+         */
+        initLegacyForms(config) {
+            // Only initialize if SDK is initialized with API key
+            if (!config.apiKey) {
+                return;
+            }
+            // Wait for DOM to be ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    this.initLegacyFormsOnReady(config);
+                });
+            }
+            else {
+                this.initLegacyFormsOnReady(config);
+            }
+        }
+        /**
+         * Initialize legacy forms when DOM is ready
+         */
+        initLegacyFormsOnReady(config) {
+            // Find all containers with data-wabbit-form-id
+            const containers = document.querySelectorAll('[data-wabbit-form-id]');
+            if (containers.length === 0) {
+                return;
+            }
+            console.log('[Wabbit] Found', containers.length, 'legacy form container(s)');
+            // Initialize each form
+            containers.forEach((container) => {
+                const formId = container.getAttribute('data-wabbit-form-id');
+                if (!formId) {
+                    return;
+                }
+                // Skip if already initialized (check if container has form instance)
+                if (container.querySelector('[data-wabbit-form-instance="true"]')) {
+                    console.warn(`[Wabbit] Form ${formId} already initialized`);
+                    return;
+                }
+                // Import FormWidget dynamically
+                Promise.resolve().then(function () { return FormWidget$1; }).then(({ FormWidget }) => {
+                    const formConfig = {
+                        enabled: true,
+                        // For backward compatibility, use the container itself as the container
+                        // FormWidget.findContainer() will handle data-wabbit-form-id lookup
+                        containerId: undefined, // Will use data-wabbit-form-id via findContainer()
+                        formId: formId,
+                        apiKey: config.apiKey,
+                        apiUrl: config.apiUrl,
+                        theme: config.forms?.theme || 'auto',
+                        primaryColor: config.forms?.primaryColor,
+                        onSubmit: config.forms?.onSubmit,
+                        onError: config.forms?.onError,
+                        onLoad: config.forms?.onLoad,
+                    };
+                    const formWidget = new FormWidget(formConfig);
+                    // Override findContainer to use the specific container element
+                    // This ensures the form renders in the correct container with data-wabbit-form-id
+                    formWidget.findContainer = () => {
+                        return container;
+                    };
+                    formWidget.init();
+                    // Store widget reference on container for cleanup
+                    container.__wabbitFormWidget = formWidget;
+                });
+            });
+            // Watch for dynamically added forms (for SPAs)
+            this.setupLegacyFormObserver(config);
+        }
+        /**
+         * Setup observer for dynamically added legacy forms
+         */
+        setupLegacyFormObserver(config) {
+            // Only setup once
+            if (this.legacyFormObserver) {
+                return;
+            }
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    if (mutation.addedNodes.length) {
+                        const hasFormContainer = Array.from(mutation.addedNodes).some((node) => {
+                            if (node.nodeType !== 1)
+                                return false;
+                            const element = node;
+                            return (element.hasAttribute?.('data-wabbit-form-id') ||
+                                element.querySelector?.('[data-wabbit-form-id]'));
+                        });
+                        if (hasFormContainer) {
+                            console.log('[Wabbit] Detected dynamically added legacy form container');
+                            this.initLegacyFormsOnReady(config);
+                            break;
+                        }
+                    }
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            this.legacyFormObserver = observer;
+        }
+    }
+    Wabbit.instance = null;
+
+    /**
+     * localStorage wrapper with type safety
+     */
+    /**
+     * Safe storage wrapper
+     */
+    class SafeStorage {
+        constructor(storage = localStorage, prefix = 'wabbit_') {
+            this.storage = storage;
+            this.prefix = prefix;
+        }
+        /**
+         * Get item from storage
+         */
+        get(key) {
+            try {
+                const item = this.storage.getItem(this.prefix + key);
+                if (item === null) {
+                    return null;
+                }
+                return JSON.parse(item);
+            }
+            catch (error) {
+                console.error(`[Wabbit] Failed to get storage item "${key}":`, error);
+                return null;
+            }
+        }
+        /**
+         * Set item in storage
+         */
+        set(key, value) {
+            try {
+                this.storage.setItem(this.prefix + key, JSON.stringify(value));
+                return true;
+            }
+            catch (error) {
+                console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
+                return false;
+            }
+        }
+        /**
+         * Remove item from storage
+         */
+        remove(key) {
+            this.storage.removeItem(this.prefix + key);
+        }
+        /**
+         * Clear all items with prefix
+         */
+        clear() {
+            if (this.storage.length !== undefined && this.storage.key) {
+                const keys = [];
+                for (let i = 0; i < this.storage.length; i++) {
+                    const key = this.storage.key(i);
+                    if (key && key.startsWith(this.prefix)) {
+                        keys.push(key);
+                    }
+                }
+                keys.forEach((key) => this.storage.removeItem(key));
+            }
+            else {
+                // Fallback: try to clear common keys
+                const commonKeys = ['session_id', 'email_capture_dismissed'];
+                commonKeys.forEach((key) => this.remove(key));
+            }
+        }
+    }
+    // Export singleton instance
+    const storage = new SafeStorage();
+    /**
+     * Get item from storage (simple string getter)
+     */
+    function getStorageItem(key) {
+        try {
+            return localStorage.getItem('wabbit_' + key);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Set item in storage (simple string setter)
+     */
+    function setStorageItem(key, value) {
+        try {
+            localStorage.setItem('wabbit_' + key, value);
+        }
+        catch (error) {
+            console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
+        }
+    }
+
+    /**
+     * WebSocket client for chat functionality
+     *
+     * Based on demo-website/src/lib/websocket.ts but without React dependencies
+     */
+    class ChatWebSocketClient {
+        constructor(apiKey, wsUrl, sessionId = null) {
+            this.ws = null;
+            this.status = 'disconnected';
+            this.reconnectAttempts = 0;
+            this.maxReconnectAttempts = 3;
+            this.reconnectDelay = 1000;
+            // Event handlers
+            this.onStatusChange = null;
+            this.onWelcome = null;
+            this.onMessage = null;
+            this.onMessageHistory = null;
+            this.onError = null;
+            this.onDisconnect = null;
+            this.apiKey = apiKey;
+            this.wsUrl = wsUrl;
+            this.sessionId = sessionId || this.getStoredSessionId();
+        }
+        setStatus(status) {
+            this.status = status;
+            if (this.onStatusChange) {
+                this.onStatusChange(status);
+            }
+        }
+        getStatus() {
+            return this.status;
+        }
+        async connect() {
+            if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
+                return;
+            }
+            this.setStatus('connecting');
+            const params = new URLSearchParams({
+                api_key: this.apiKey,
+            });
+            if (this.sessionId) {
+                params.append('session_id', this.sessionId);
+            }
+            const url = `${this.wsUrl}?${params.toString()}`;
+            try {
+                this.ws = new WebSocket(url);
+                this.ws.onopen = () => {
+                    this.setStatus('connected');
+                    this.reconnectAttempts = 0;
+                    console.log('[Wabbit] WebSocket connected');
+                };
+                this.ws.onmessage = (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        this.handleMessage(data);
+                    }
+                    catch (error) {
+                        console.error('[Wabbit] Failed to parse message:', error);
+                    }
+                };
+                this.ws.onerror = (error) => {
+                    console.error('[Wabbit] WebSocket error:', error);
+                    if (this.onError) {
+                        this.onError('Connection error occurred');
+                    }
+                };
+                this.ws.onclose = () => {
+                    console.log('[Wabbit] WebSocket closed');
+                    this.setStatus('disconnected');
+                    if (this.onDisconnect) {
+                        this.onDisconnect();
+                    }
+                    this.attemptReconnect();
+                };
+            }
+            catch (error) {
+                console.error('[Wabbit] Failed to connect:', error);
+                if (this.onError) {
+                    this.onError('Failed to establish connection');
+                }
+                this.setStatus('disconnected');
+            }
+        }
+        handleMessage(data) {
+            switch (data.type) {
+                case 'welcome':
+                    this.sessionId = data.session_id;
+                    // Store session ID in localStorage
+                    if (this.sessionId) {
+                        storage.set('session_id', this.sessionId);
+                    }
+                    if (this.onWelcome) {
+                        this.onWelcome(data.session_id, data.collection_id, data.message || 'Connected');
+                    }
+                    break;
+                case 'message_history':
+                    // Handle conversation history when reconnecting
+                    if (this.onMessageHistory && data.messages && Array.isArray(data.messages)) {
+                        const messages = data.messages.map((msg) => ({
+                            id: msg.id || crypto.randomUUID(),
+                            role: msg.role,
+                            content: msg.content,
+                            timestamp: new Date(msg.timestamp),
+                            metadata: msg.metadata,
+                        }));
+                        this.onMessageHistory(messages);
+                    }
+                    break;
+                case 'assistant_message':
+                    if (this.onMessage) {
+                        const message = {
+                            id: data.message_id || crypto.randomUUID(),
+                            role: 'assistant',
+                            content: data.content,
+                            timestamp: new Date(),
+                            metadata: data.metadata,
+                        };
+                        this.onMessage(message);
+                    }
+                    break;
+                case 'error':
+                    if (this.onError) {
+                        this.onError(data.message || 'An error occurred');
+                    }
+                    break;
+                default:
+                    console.log('[Wabbit] Unknown message type:', data.type);
+            }
+        }
+        sendMessage(content, metadata) {
+            if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+                if (this.onError) {
+                    this.onError('Not connected to chat service');
+                }
+                return;
+            }
+            const message = {
+                type: 'message',
+                content,
+                metadata: metadata || {},
+            };
+            this.ws.send(JSON.stringify(message));
+        }
+        disconnect() {
+            if (this.ws) {
+                this.ws.close();
+                this.ws = null;
+            }
+            this.setStatus('disconnected');
+        }
+        attemptReconnect() {
+            if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+                console.log('[Wabbit] Max reconnect attempts reached');
+                return;
+            }
+            this.reconnectAttempts++;
+            this.setStatus('reconnecting');
+            const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+            console.log(`[Wabbit] Attempting to reconnect in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+            setTimeout(() => {
+                this.connect();
+            }, delay);
+        }
+        clearSession() {
+            this.sessionId = null;
+            storage.remove('session_id');
+        }
+        getStoredSessionId() {
+            return storage.get('session_id') || null;
+        }
+    }
+
+    /**
+     * DOM utility functions
+     */
+    /**
+     * Escape HTML to prevent XSS attacks
+     *
+     * @param text - Text to escape
+     * @returns Escaped HTML string
+     */
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Wait for DOM to be ready
+     *
+     * @param callback - Callback to execute when DOM is ready
+     */
+    function onDOMReady(callback) {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', callback);
+        }
+        else {
+            callback();
+        }
+    }
+    /**
+     * Create a DOM element with attributes
+     *
+     * @param tag - HTML tag name
+     * @param attributes - Element attributes
+     * @param children - Child elements or text
+     * @returns Created element
+     */
+    function createElement(tag, attributes, children) {
+        const element = document.createElement(tag);
+        if (attributes) {
+            Object.entries(attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+        if (children) {
+            children.forEach((child) => {
+                if (typeof child === 'string') {
+                    element.appendChild(document.createTextNode(child));
+                }
+                else {
+                    element.appendChild(child);
+                }
+            });
+        }
+        return element;
+    }
+
+    /**
+     * Chat Bubble - Floating button component
+     */
+    class ChatBubble {
+        constructor(options) {
+            this.element = null;
+            this.options = options;
+        }
+        /**
+         * Create and render the bubble
+         */
+        render() {
+            if (this.element) {
+                return this.element;
+            }
+            this.element = createElement('button', {
+                class: `wabbit-chat-bubble ${this.options.position}`,
+                'aria-label': 'Open chat',
+                type: 'button'
+            });
+            // Add chat icon (simple SVG)
+            this.element.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
+    `;
+            this.element.addEventListener('click', this.options.onClick);
+            document.body.appendChild(this.element);
+            return this.element;
+        }
+        /**
+         * Show the bubble
+         */
+        show() {
+            if (this.element) {
+                this.element.style.display = 'flex';
+            }
+        }
+        /**
+         * Hide the bubble
+         */
+        hide() {
+            if (this.element) {
+                this.element.style.display = 'none';
+            }
+        }
+        /**
+         * Remove the bubble from DOM
+         */
+        destroy() {
+            if (this.element) {
+                this.element.removeEventListener('click', this.options.onClick);
+                this.element.remove();
+                this.element = null;
+            }
+        }
+    }
+
+    /**
+     * Chat Panel - Expandable chat window component
+     */
+    class ChatPanel {
+        constructor(options) {
+            this.element = null;
+            this.messagesContainer = null;
+            this.inputElement = null;
+            this.sendButton = null;
+            this.messages = [];
+            this.isWaitingForResponse = false;
+            this.options = options;
+        }
+        /**
+         * Create and render the panel
+         */
+        render() {
+            if (this.element) {
+                return this.element;
+            }
+            // Main panel
+            this.element = createElement('div', {
+                class: `wabbit-chat-panel ${this.options.position}`
+            });
+            // Header
+            const header = createElement('div', { class: 'wabbit-chat-panel-header' });
+            const headerTitle = createElement('div', { class: 'wabbit-chat-panel-header-title' });
+            const headerIcon = createElement('div', { class: 'wabbit-chat-panel-header-icon' });
+            headerIcon.textContent = 'AI';
+            const headerText = createElement('div', { class: 'wabbit-chat-panel-header-text' });
+            const headerH3 = createElement('h3');
+            headerH3.textContent = 'AI Assistant';
+            const headerP = createElement('p');
+            headerP.textContent = 'Powered by Wabbit';
+            headerText.appendChild(headerH3);
+            headerText.appendChild(headerP);
+            headerTitle.appendChild(headerIcon);
+            headerTitle.appendChild(headerText);
+            const closeButton = createElement('button', {
+                class: 'wabbit-chat-panel-close',
+                'aria-label': 'Close chat',
+                type: 'button'
+            });
+            closeButton.innerHTML = '×';
+            closeButton.addEventListener('click', this.options.onClose);
+            header.appendChild(headerTitle);
+            header.appendChild(closeButton);
+            // Messages area
+            this.messagesContainer = createElement('div', { class: 'wabbit-chat-messages' });
+            // Input area
+            const inputArea = createElement('div', { class: 'wabbit-chat-input-area' });
+            const inputWrapper = createElement('div', { class: 'wabbit-chat-input-wrapper' });
+            this.inputElement = document.createElement('textarea');
+            this.inputElement.className = 'wabbit-chat-input';
+            this.inputElement.placeholder = this.options.placeholder || 'Type your message...';
+            this.inputElement.rows = 1;
+            this.inputElement.disabled = this.options.disabled || false;
+            // Auto-resize textarea
+            this.inputElement.addEventListener('input', () => {
+                this.inputElement.style.height = 'auto';
+                this.inputElement.style.height = `${Math.min(this.inputElement.scrollHeight, 120)}px`;
+            });
+            // Send on Enter (Shift+Enter for new line)
+            this.inputElement.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    this.handleSend();
+                }
+            });
+            this.sendButton = createElement('button', {
+                class: 'wabbit-chat-send-button',
+                type: 'button',
+                'aria-label': 'Send message'
+            });
+            this.sendButton.innerHTML = `
+      <svg class="wabbit-chat-send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="22" y1="2" x2="11" y2="13"></line>
+        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+      </svg>
+    `;
+            this.sendButton.addEventListener('click', () => this.handleSend());
+            this.updateSendButtonState();
+            inputWrapper.appendChild(this.inputElement);
+            inputWrapper.appendChild(this.sendButton);
+            inputArea.appendChild(inputWrapper);
+            // Assemble panel
+            this.element.appendChild(header);
+            this.element.appendChild(this.messagesContainer);
+            this.element.appendChild(inputArea);
+            document.body.appendChild(this.element);
+            // Initially hide the panel (it will be shown when opened)
+            this.element.style.display = 'none';
+            // Show welcome message if provided
+            if (this.options.welcomeMessage) {
+                this.addSystemMessage(this.options.welcomeMessage);
+            }
+            return this.element;
+        }
+        /**
+         * Add a message to the panel
+         */
+        addMessage(message) {
+            this.messages.push(message);
+            this.renderMessage(message);
+            this.scrollToBottom();
+        }
+        /**
+         * Add multiple messages
+         */
+        setMessages(messages) {
+            this.messages = messages;
+            if (this.messagesContainer) {
+                this.messagesContainer.innerHTML = '';
+                messages.forEach((msg) => this.renderMessage(msg));
+                this.scrollToBottom();
+            }
+        }
+        /**
+         * Add system message
+         */
+        addSystemMessage(content) {
+            const message = {
+                id: `system-${Date.now()}`,
+                role: 'system',
+                content,
+                timestamp: new Date()
+            };
+            this.addMessage(message);
+        }
+        /**
+         * Set waiting for response state
+         */
+        setWaitingForResponse(waiting) {
+            this.isWaitingForResponse = waiting;
+            if (this.messagesContainer) {
+                // Remove existing typing indicator
+                const existing = this.messagesContainer.querySelector('.wabbit-chat-typing');
+                if (existing) {
+                    existing.remove();
+                }
+                if (waiting) {
+                    const typing = createElement('div', { class: 'wabbit-chat-typing' });
+                    typing.innerHTML = `
+          <div class="wabbit-chat-typing-dot"></div>
+          <div class="wabbit-chat-typing-dot"></div>
+          <div class="wabbit-chat-typing-dot"></div>
+        `;
+                    this.messagesContainer.appendChild(typing);
+                    this.scrollToBottom();
+                }
+            }
+            this.updateSendButtonState();
+        }
+        /**
+         * Set disabled state
+         */
+        setDisabled(disabled) {
+            if (this.inputElement) {
+                this.inputElement.disabled = disabled;
+                this.updateSendButtonState();
+            }
+        }
+        /**
+         * Render a single message
+         */
+        renderMessage(message) {
+            if (!this.messagesContainer)
+                return;
+            const messageDiv = createElement('div', {
+                class: `wabbit-chat-message wabbit-chat-message-${message.role}`
+            });
+            const bubble = createElement('div', { class: 'wabbit-chat-message-bubble' });
+            const content = createElement('div', { class: 'wabbit-chat-message-content' });
+            // Escape HTML for user and system messages, but allow markdown-like formatting for assistant
+            if (message.role === 'assistant') {
+                // Simple markdown-like rendering (basic)
+                content.innerHTML = this.formatMessage(message.content);
+            }
+            else {
+                content.textContent = message.content;
+            }
+            bubble.appendChild(content);
+            messageDiv.appendChild(bubble);
+            this.messagesContainer.appendChild(messageDiv);
+        }
+        /**
+         * Format message content (simple markdown-like)
+         */
+        formatMessage(content) {
+            // Escape HTML first
+            let formatted = escapeHtml(content);
+            // Simple markdown-like formatting
+            formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+            formatted = formatted.replace(/\*(.+?)\*/g, '<em>$1</em>');
+            formatted = formatted.replace(/`(.+?)`/g, '<code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">$1</code>');
+            formatted = formatted.replace(/\n/g, '<br>');
+            return formatted;
+        }
+        /**
+         * Handle send message
+         */
+        handleSend() {
+            if (!this.inputElement || this.isWaitingForResponse)
+                return;
+            const content = this.inputElement.value.trim();
+            if (!content)
+                return;
+            this.inputElement.value = '';
+            this.inputElement.style.height = 'auto';
+            this.options.onSendMessage(content);
+        }
+        /**
+         * Update send button state
+         */
+        updateSendButtonState() {
+            if (!this.sendButton || !this.inputElement)
+                return;
+            const hasText = this.inputElement.value.trim().length > 0;
+            const disabled = this.options.disabled || this.isWaitingForResponse || !hasText;
+            this.sendButton.setAttribute('disabled', disabled ? 'true' : 'false');
+            if (this.sendButton instanceof HTMLButtonElement) {
+                this.sendButton.disabled = disabled;
+            }
+        }
+        /**
+         * Scroll to bottom of messages
+         */
+        scrollToBottom() {
+            if (this.messagesContainer) {
+                this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+            }
+        }
+        /**
+         * Show the panel
+         */
+        show() {
+            if (this.element) {
+                this.element.style.display = 'flex';
+                // Focus input after a brief delay
+                setTimeout(() => {
+                    if (this.inputElement) {
+                        this.inputElement.focus();
+                    }
+                }, 100);
+            }
+        }
+        /**
+         * Hide the panel
+         */
+        hide() {
+            if (this.element) {
+                this.element.style.display = 'none';
+            }
+        }
+        /**
+         * Remove the panel from DOM
+         */
+        destroy() {
+            if (this.element) {
+                this.element.remove();
+                this.element = null;
+                this.messagesContainer = null;
+                this.inputElement = null;
+                this.sendButton = null;
+            }
+        }
+    }
+
+    /**
+     * Theme detection utilities
+     */
+    /**
+     * Detect current theme from the page
+     *
+     * Simple detection:
+     * 1. Check data-theme attribute (explicit setting)
+     * 2. Check dark class (common pattern)
+     * 3. Default to light (most pages are light)
+     *
+     * Note: We default to 'light' instead of checking system preference
+     * because most web pages are light-themed, and it's better to have
+     * readable dark text on light background than light text on light background.
+     *
+     * @returns Current theme ('light' or 'dark')
+     */
+    function detectTheme() {
+        const htmlEl = document.documentElement;
+        // Check data-theme attribute (explicit setting)
+        const dataTheme = htmlEl.getAttribute('data-theme');
+        if (dataTheme === 'light' || dataTheme === 'dark') {
+            return dataTheme;
+        }
+        // Check dark class (common pattern like Tailwind)
+        if (htmlEl.classList.contains('dark')) {
+            return 'dark';
+        }
+        // Default to light (most pages are light-themed)
+        // This ensures readable dark text on light background
+        return 'light';
+    }
+    /**
+     * Watch for theme changes
+     *
+     * @param callback - Callback to execute when theme changes
+     * @returns Cleanup function
+     */
+    function watchTheme(callback) {
+        const observer = new MutationObserver(() => {
+            callback(detectTheme());
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme', 'class']
+        });
+        // Also watch system preference changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => {
+            callback(detectTheme());
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        // Initial call
+        callback(detectTheme());
+        // Return cleanup function
+        return () => {
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }
+
+    /**
+     * Chat widget styles
+     *
+     * Based on demo-website styles but adapted for embedded widget
+     */
+    /**
+     * Inject chat widget styles into the page
+     */
+    function injectChatStyles(primaryColor = '#6366f1', theme) {
+        const styleId = 'wabbit-chat-styles';
+        // Remove existing styles if any
+        const existing = document.getElementById(styleId);
+        if (existing) {
+            existing.remove();
+        }
+        // Determine actual theme: if 'auto', detect from page; otherwise use specified theme
+        const actualTheme = theme === 'auto' || !theme ? detectTheme() : theme;
+        const isDark = actualTheme === 'dark';
+        // CSS variables based on theme
+        const cssVars = isDark
+            ? {
+                '--wabbit-bg-base': '#1A1816',
+                '--wabbit-bg-elevated': '#2D2826',
+                '--wabbit-bg-hover': '#3D3935',
+                '--wabbit-text-primary': '#F5F1ED',
+                '--wabbit-text-secondary': '#A39C94',
+                '--wabbit-text-muted': '#6B6560',
+                '--wabbit-border-subtle': '#3D3935',
+                '--wabbit-primary': primaryColor,
+            }
+            : {
+                '--wabbit-bg-base': '#FAF8F6',
+                '--wabbit-bg-elevated': '#FFFFFF',
+                '--wabbit-bg-hover': '#F2F0EE',
+                '--wabbit-text-primary': '#2D2826',
+                '--wabbit-text-secondary': '#5A5450',
+                '--wabbit-text-muted': '#8A847E',
+                '--wabbit-border-subtle': '#E6E3E0',
+                '--wabbit-primary': primaryColor,
+            };
+        const cssVarsString = Object.entries(cssVars)
+            .map(([key, value]) => `${key}: ${value};`)
+            .join('\n    ');
+        const styles = `
+    :root {
+      ${cssVarsString}
+    }
+
+    /* Chat Bubble */
+    .wabbit-chat-bubble {
+      position: fixed;
+      z-index: 9999;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--wabbit-primary), ${adjustColor(primaryColor, 0.2)});
+      border: none;
+      cursor: pointer;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      color: white;
+      font-size: 24px;
+    }
+
+    .wabbit-chat-bubble:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .wabbit-chat-bubble:active {
+      transform: scale(0.95);
+    }
+
+    .wabbit-chat-bubble.bottom-right {
+      bottom: 20px;
+      right: 20px;
+    }
+
+    .wabbit-chat-bubble.bottom-left {
+      bottom: 20px;
+      left: 20px;
+    }
+
+    /* Chat Panel */
+    .wabbit-chat-panel {
+      position: fixed;
+      z-index: 9998;
+      width: 380px;
+      max-width: calc(100vw - 40px);
+      height: 600px;
+      max-height: calc(100vh - 100px);
+      background: var(--wabbit-bg-elevated);
+      border: 1px solid var(--wabbit-border-subtle);
+      border-radius: 16px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--wabbit-text-primary);
+    }
+
+    .wabbit-chat-panel.bottom-right {
+      bottom: 90px;
+      right: 20px;
+    }
+
+    .wabbit-chat-panel.bottom-left {
+      bottom: 90px;
+      left: 20px;
+    }
+
+    @media (max-width: 480px) {
+      .wabbit-chat-panel {
+        width: calc(100vw - 20px);
+        height: calc(100vh - 20px);
+        max-height: calc(100vh - 20px);
+        bottom: 10px !important;
+        left: 10px !important;
+        right: 10px !important;
+        border-radius: 12px;
+      }
+    }
+
+    /* Panel Header */
+    .wabbit-chat-panel-header {
+      background: rgba(var(--wabbit-primary-rgb, 99, 102, 241), 0.1);
+      border-bottom: 1px solid var(--wabbit-border-subtle);
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .wabbit-chat-panel-header-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .wabbit-chat-panel-header-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--wabbit-primary), ${adjustColor(primaryColor, 0.2)});
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .wabbit-chat-panel-header-text h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--wabbit-text-primary);
+    }
+
+    .wabbit-chat-panel-header-text p {
+      margin: 0;
+      font-size: 12px;
+      color: var(--wabbit-text-muted);
+    }
+
+    .wabbit-chat-panel-close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--wabbit-text-secondary);
+      font-size: 24px;
+      line-height: 1;
+      padding: 4px;
+      transition: color 0.2s;
+    }
+
+    .wabbit-chat-panel-close:hover {
+      color: var(--wabbit-text-primary);
+    }
+
+    /* Messages Area */
+    .wabbit-chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .wabbit-chat-message {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .wabbit-chat-message-user {
+      align-items: flex-end;
+    }
+
+    .wabbit-chat-message-assistant {
+      align-items: flex-start;
+    }
+
+    .wabbit-chat-message-system {
+      align-items: center;
+    }
+
+    .wabbit-chat-message-bubble {
+      max-width: 85%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+
+    .wabbit-chat-message-user .wabbit-chat-message-bubble {
+      background: linear-gradient(135deg, var(--wabbit-primary), ${adjustColor(primaryColor, 0.2)});
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+
+    .wabbit-chat-message-assistant .wabbit-chat-message-bubble {
+      background: var(--wabbit-bg-hover);
+      color: var(--wabbit-text-primary);
+      border: 1px solid var(--wabbit-border-subtle);
+      border-bottom-left-radius: 4px;
+    }
+
+    .wabbit-chat-message-system .wabbit-chat-message-bubble {
+      background: rgba(var(--wabbit-primary-rgb, 99, 102, 241), 0.1);
+      border: 1px solid rgba(var(--wabbit-primary-rgb, 99, 102, 241), 0.3);
+      color: var(--wabbit-primary);
+      text-align: center;
+      font-size: 12px;
+      padding: 8px 12px;
+    }
+
+    .wabbit-chat-message-content {
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    /* Typing Indicator */
+    .wabbit-chat-typing {
+      display: flex;
+      gap: 4px;
+      padding: 12px 16px;
+    }
+
+    .wabbit-chat-typing-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--wabbit-text-muted);
+      animation: wabbit-typing 1.4s infinite;
+    }
+
+    .wabbit-chat-typing-dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .wabbit-chat-typing-dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes wabbit-typing {
+      0%, 60%, 100% {
+        transform: translateY(0);
+        opacity: 0.7;
+      }
+      30% {
+        transform: translateY(-10px);
+        opacity: 1;
+      }
+    }
+
+    /* Input Area */
+    .wabbit-chat-input-area {
+      border-top: 1px solid var(--wabbit-border-subtle);
+      padding: 12px;
+      background: var(--wabbit-bg-elevated);
+    }
+
+    .wabbit-chat-input-wrapper {
+      display: flex;
+      gap: 8px;
+      align-items: flex-end;
+    }
+
+    .wabbit-chat-input {
+      flex: 1;
+      resize: none;
+      background: var(--wabbit-bg-hover);
+      border: 1px solid var(--wabbit-border-subtle);
+      border-radius: 12px;
+      padding: 10px 12px;
+      color: var(--wabbit-text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      line-height: 1.5;
+      min-height: 44px;
+      max-height: 120px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .wabbit-chat-input:focus {
+      outline: none;
+      border-color: var(--wabbit-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wabbit-primary-rgb, 99, 102, 241), 0.1);
+    }
+
+    .wabbit-chat-input::placeholder {
+      color: var(--wabbit-text-muted);
+    }
+
+    .wabbit-chat-input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wabbit-chat-send-button {
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, var(--wabbit-primary), ${adjustColor(primaryColor, 0.2)});
+      border: none;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s, transform 0.2s;
+      flex-shrink: 0;
+    }
+
+    .wabbit-chat-send-button:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: scale(1.05);
+    }
+
+    .wabbit-chat-send-button:active:not(:disabled) {
+      transform: scale(0.95);
+    }
+
+    .wabbit-chat-send-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wabbit-chat-send-icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* Scrollbar */
+    .wabbit-chat-messages::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .wabbit-chat-messages::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .wabbit-chat-messages::-webkit-scrollbar-thumb {
+      background: var(--wabbit-border-subtle);
+      border-radius: 3px;
+    }
+
+    .wabbit-chat-messages::-webkit-scrollbar-thumb:hover {
+      background: var(--wabbit-text-muted);
+    }
+
+    /* Animations */
+    @keyframes wabbit-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .wabbit-chat-panel {
+      animation: wabbit-fade-in 0.3s ease-out;
+    }
+
+    .wabbit-chat-message {
+      animation: wabbit-fade-in 0.2s ease-out;
+    }
+  `;
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.setAttribute('data-wabbit', 'true');
+        style.textContent = styles;
+        document.head.appendChild(style);
+    }
+    /**
+     * Adjust color brightness
+     */
+    function adjustColor(color, amount) {
+        // Simple color adjustment - convert hex to RGB and adjust
+        const hex = color.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const newR = Math.max(0, Math.min(255, Math.round(r + (255 - r) * amount)));
+        const newG = Math.max(0, Math.min(255, Math.round(g + (255 - g) * amount)));
+        const newB = Math.max(0, Math.min(255, Math.round(b + (255 - b) * amount)));
+        return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+    }
+
+    /**
+     * Chat Widget - Main class that integrates all chat components
+     */
+    class ChatWidget {
+        constructor(config) {
+            this.wsClient = null;
+            this.bubble = null;
+            this.panel = null;
+            this.isOpen = false;
+            this.cleanup = [];
+            this.themeCleanup = null;
+            this.config = config;
+        }
+        /**
+         * Initialize the chat widget
+         */
+        async init() {
+            // Wait for DOM to be ready
+            await new Promise((resolve) => {
+                onDOMReady(() => {
+                    resolve();
+                });
+            });
+            // Inject styles with theme configuration
+            injectChatStyles(this.config.primaryColor || '#6366f1', this.config.theme);
+            // Setup theme watcher if theme is 'auto'
+            this.setupThemeWatcher();
+            // Create WebSocket client
+            const wsUrl = this.getWebSocketUrl();
+            this.wsClient = new ChatWebSocketClient(this.config.apiKey || '', wsUrl, null // Will use stored session if available
+            );
+            // Set up event handlers
+            this.setupWebSocketHandlers();
+            // Create bubble
+            this.bubble = new ChatBubble({
+                position: this.config.position || 'bottom-right',
+                onClick: () => this.toggle()
+            });
+            // Create panel
+            this.panel = new ChatPanel({
+                position: this.config.position || 'bottom-right',
+                welcomeMessage: this.config.welcomeMessage,
+                placeholder: this.config.placeholder,
+                onSendMessage: (content) => this.handleSendMessage(content),
+                onClose: () => this.close(),
+                disabled: true
+            });
+            // Render components
+            this.bubble.render();
+            this.panel.render();
+            // Ensure initial state: panel hidden, bubble visible
+            // This prevents state mismatch where panel might be visible but isOpen is false
+            if (this.panel) {
+                this.panel.hide();
+            }
+            if (this.bubble) {
+                this.bubble.show();
+            }
+            this.isOpen = false; // Ensure state is consistent
+            // Handle trigger types
+            this.handleTriggerType();
+            // Connect WebSocket
+            await this.wsClient.connect();
+        }
+        /**
+         * Setup WebSocket event handlers
+         */
+        setupWebSocketHandlers() {
+            if (!this.wsClient)
+                return;
+            this.wsClient.onWelcome = (sessionId, _collectionId, message) => {
+                console.log('[Wabbit] Chat connected:', sessionId);
+                if (this.panel) {
+                    this.panel.setDisabled(false);
+                    if (message) {
+                        this.panel.addSystemMessage(message);
+                    }
+                }
+            };
+            this.wsClient.onMessageHistory = (messages) => {
+                console.log('[Wabbit] Loaded message history:', messages.length);
+                if (this.panel) {
+                    this.panel.setMessages(messages);
+                }
+            };
+            this.wsClient.onMessage = (message) => {
+                if (this.panel) {
+                    this.panel.addMessage(message);
+                    this.panel.setWaitingForResponse(false);
+                }
+            };
+            this.wsClient.onError = (error) => {
+                console.error('[Wabbit] Chat error:', error);
+                if (this.panel) {
+                    this.panel.addSystemMessage(`Error: ${error}`);
+                    this.panel.setWaitingForResponse(false);
+                }
+            };
+            this.wsClient.onStatusChange = (status) => {
+                if (this.panel) {
+                    this.panel.setDisabled(status !== 'connected');
+                }
+            };
+            this.wsClient.onDisconnect = () => {
+                if (this.panel) {
+                    this.panel.addSystemMessage('Disconnected from chat service');
+                    this.panel.setDisabled(true);
+                }
+            };
+        }
+        /**
+         * Handle trigger type configuration
+         */
+        handleTriggerType() {
+            const triggerType = this.config.triggerType || 'button';
+            switch (triggerType) {
+                case 'auto':
+                    // Auto-open after delay
+                    const delay = this.config.triggerDelay || 5000;
+                    setTimeout(() => {
+                        this.open();
+                    }, delay);
+                    break;
+                case 'scroll':
+                    // Open after scrolling
+                    let hasScrolled = false;
+                    const scrollHandler = () => {
+                        if (!hasScrolled) {
+                            hasScrolled = true;
+                            this.open();
+                            window.removeEventListener('scroll', scrollHandler);
+                        }
+                    };
+                    window.addEventListener('scroll', scrollHandler);
+                    this.cleanup.push(() => {
+                        window.removeEventListener('scroll', scrollHandler);
+                    });
+                    break;
+            }
+        }
+        /**
+         * Get WebSocket URL
+         */
+        getWebSocketUrl() {
+            // Use wsUrl if explicitly provided
+            if (this.config.wsUrl) {
+                return this.config.wsUrl;
+            }
+            // Otherwise, derive from apiUrl
+            const apiUrl = this.config.apiUrl || 'https://api.wabbit.io';
+            const wsProtocol = apiUrl.startsWith('https') ? 'wss' : 'ws';
+            const wsHost = apiUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');
+            return `${wsProtocol}://${wsHost}/ws/chat`;
+        }
+        /**
+         * Handle send message
+         * Made public so EmailCaptureWidget can hook into it
+         */
+        handleSendMessage(content) {
+            if (!this.wsClient)
+                return;
+            // Add user message to panel immediately
+            const userMessage = {
+                id: `user-${Date.now()}`,
+                role: 'user',
+                content,
+                timestamp: new Date()
+            };
+            if (this.panel) {
+                this.panel.addMessage(userMessage);
+                this.panel.setWaitingForResponse(true);
+            }
+            // Send via WebSocket
+            this.wsClient.sendMessage(content);
+        }
+        /**
+         * Open the chat panel
+         */
+        open() {
+            if (this.isOpen)
+                return;
+            this.isOpen = true;
+            if (this.panel) {
+                this.panel.show();
+            }
+            if (this.bubble) {
+                this.bubble.hide();
+            }
+        }
+        /**
+         * Close the chat panel
+         */
+        close() {
+            if (!this.isOpen)
+                return;
+            this.isOpen = false;
+            if (this.panel) {
+                this.panel.hide();
+            }
+            if (this.bubble) {
+                this.bubble.show();
+            }
+        }
+        /**
+         * Toggle chat panel
+         */
+        toggle() {
+            if (this.isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        }
+        /**
+         * Send a message programmatically
+         */
+        sendMessage(content) {
+            this.handleSendMessage(content);
+        }
+        /**
+         * Setup theme watcher for 'auto' theme mode
+         */
+        setupThemeWatcher() {
+            const themeMode = this.config.theme || 'auto';
+            // Only watch for theme changes if theme is 'auto'
+            if (themeMode === 'auto') {
+                this.themeCleanup = watchTheme(() => {
+                    // Re-inject styles when theme changes
+                    injectChatStyles(this.config.primaryColor || '#6366f1', 'auto');
+                });
+            }
+        }
+        /**
+         * Destroy the widget and cleanup
+         */
+        destroy() {
+            // Run cleanup functions
+            this.cleanup.forEach((fn) => fn());
+            this.cleanup = [];
+            // Cleanup theme watcher
+            if (this.themeCleanup) {
+                this.themeCleanup();
+                this.themeCleanup = null;
+            }
+            // Disconnect WebSocket
+            if (this.wsClient) {
+                this.wsClient.disconnect();
+                this.wsClient = null;
+            }
+            // Remove components
+            if (this.bubble) {
+                this.bubble.destroy();
+                this.bubble = null;
+            }
+            if (this.panel) {
+                this.panel.destroy();
+                this.panel = null;
+            }
+        }
+    }
+
+    var ChatWidget$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        ChatWidget: ChatWidget
+    });
+
+    /**
+     * Form renderer
+     *
+     * Handles rendering form HTML from form definition
+     */
+    /**
+     * Form renderer class
+     */
+    class FormRenderer {
+        constructor(styles) {
+            this.styles = styles;
+        }
+        /**
+         * Render form HTML
+         */
+        render(formData, theme) {
+            const colors = this.styles.getColors(theme);
+            const fields = formData.fields;
+            let html = '<form class="wabbit-form" data-wabbit-form-instance="true">';
+            fields.forEach((field) => {
+                html += this.renderField(field, colors);
+            });
+            html += `<button
+      type="submit"
+      class="wabbit-submit"
+    >Submit</button>`;
+            html += `<div class="wabbit-message" style="display: none;"></div>`;
+            html += '</form>';
+            return html;
+        }
+        /**
+         * Render a single field
+         */
+        renderField(field, colors) {
+            let html = '<div class="wabbit-field">';
+            // Generate input ID for accessibility (for text, email, number, textarea, select)
+            const needsLabelFor = ['text', 'email', 'number', 'textarea', 'select'].includes(field.type);
+            const inputId = needsLabelFor ? `wabbit-input-${field.id}` : undefined;
+            const labelForAttr = inputId ? ` for="${escapeHtml(inputId)}"` : '';
+            // Use inline style to ensure label color is applied correctly
+            // This matches the legacy embed-form.js behavior
+            // Use !important to ensure color is not overridden by external CSS
+            html += `<label${labelForAttr} style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: ${colors.labelColor} !important; font-size: 0.875rem;">${escapeHtml(field.label)}${field.required ? ' <span style="color: #E07A5F;">*</span>' : ''}</label>`;
+            switch (field.type) {
+                case 'text':
+                case 'email':
+                case 'number':
+                    if (inputId) {
+                        html += this.renderTextInput(field, colors, inputId);
+                    }
+                    break;
+                case 'textarea':
+                    if (inputId) {
+                        html += this.renderTextarea(field, colors, inputId);
+                    }
+                    break;
+                case 'select':
+                    if (inputId) {
+                        html += this.renderSelect(field, colors, inputId);
+                    }
+                    break;
+                case 'radio':
+                    html += this.renderRadio(field, colors);
+                    break;
+                case 'checkbox':
+                    html += this.renderCheckbox(field, colors);
+                    break;
+                case 'rating':
+                    html += this.renderRating(field, colors);
+                    break;
+            }
+            html += '</div>';
+            return html;
+        }
+        /**
+         * Render text input field
+         */
+        renderTextInput(field, _colors, inputId) {
+            return `<input
+      type="${field.type}"
+      id="${escapeHtml(inputId)}"
+      name="${escapeHtml(field.id)}"
+      placeholder="${field.placeholder ? escapeHtml(field.placeholder) : ''}"
+      ${field.required ? 'required' : ''}
+    />`;
+        }
+        /**
+         * Render textarea field
+         */
+        renderTextarea(field, _colors, inputId) {
+            return `<textarea
+      id="${escapeHtml(inputId)}"
+      name="${escapeHtml(field.id)}"
+      placeholder="${field.placeholder ? escapeHtml(field.placeholder) : ''}"
+      ${field.required ? 'required' : ''}
+      rows="4"
+    ></textarea>`;
+        }
+        /**
+         * Render select field
+         */
+        renderSelect(field, _colors, inputId) {
+            if (!field.options || field.options.length === 0) {
+                return '';
+            }
+            let html = `<select id="${escapeHtml(inputId)}" name="${escapeHtml(field.id)}" ${field.required ? 'required' : ''}>`;
+            html += '<option value="">Select...</option>';
+            field.options.forEach((opt) => {
+                html += `<option value="${escapeHtml(opt)}">${escapeHtml(opt)}</option>`;
+            });
+            html += '</select>';
+            return html;
+        }
+        /**
+         * Render radio group
+         */
+        renderRadio(field, _colors) {
+            if (!field.options || field.options.length === 0) {
+                return '';
+            }
+            let html = '<div class="wabbit-radio-group">';
+            field.options.forEach((opt, idx) => {
+                const radioId = `${field.id}_${idx}`;
+                html += `<div>
+        <label>
+          <input
+            type="radio"
+            name="${escapeHtml(field.id)}"
+            value="${escapeHtml(opt)}"
+            id="${escapeHtml(radioId)}"
+            ${field.required && idx === 0 ? 'required' : ''}
+          />
+          <span>${escapeHtml(opt)}</span>
+        </label>
+      </div>`;
+            });
+            html += '</div>';
+            return html;
+        }
+        /**
+         * Render checkbox group
+         */
+        renderCheckbox(field, _colors) {
+            if (!field.options || field.options.length === 0) {
+                return '';
+            }
+            let html = '<div class="wabbit-checkbox-group">';
+            field.options.forEach((opt, idx) => {
+                const checkboxId = `${field.id}_${idx}`;
+                html += `<div>
+        <label>
+          <input
+            type="checkbox"
+            name="${escapeHtml(field.id)}[]"
+            value="${escapeHtml(opt)}"
+            id="${escapeHtml(checkboxId)}"
+          />
+          <span>${escapeHtml(opt)}</span>
+        </label>
+      </div>`;
+            });
+            html += '</div>';
+            return html;
+        }
+        /**
+         * Render rating field
+         */
+        renderRating(field, _colors) {
+            const max = field.max || 5;
+            let html = '<div class="wabbit-rating">';
+            for (let i = 1; i <= max; i++) {
+                const starId = `${field.id}_${i}`;
+                html += `<input
+        type="radio"
+        name="${escapeHtml(field.id)}"
+        value="${i}"
+        id="${escapeHtml(starId)}"
+        ${field.required && i === 1 ? 'required' : ''}
+      />`;
+                html += `<label for="${escapeHtml(starId)}">★</label>`;
+            }
+            html += '</div>';
+            return html;
+        }
+    }
+
+    /**
+     * Form styles management
+     *
+     * Handles theme-aware styling and dynamic style injection
+     */
+    /**
+     * Form styles manager
+     */
+    class FormStyles {
+        constructor(primaryColor, containerId) {
+            this.styleElement = null;
+            this.currentTheme = 'light';
+            // Note: primaryColor is now handled via CSS variables set on container
+            // We keep a reference for fallback/legacy support
+            this._primaryColor = '#C15F3C';
+            /**
+             * Theme color schemes
+             */
+            this.themes = {
+                dark: {
+                    formBg: '#1A1816', // Dark base background (matching chat widget)
+                    labelColor: '#F5F1ED',
+                    inputBg: '#2D2826', // Elevated surface (matching chat widget bg-elevated)
+                    inputText: '#F5F1ED',
+                    inputBorder: '#3D3935',
+                    inputBorderFocus: '#C15F3C',
+                    placeholderColor: '#6B6560',
+                    radioColor: '#A39C94',
+                    ratingInactive: '#3D3935',
+                    errorBg: 'rgba(224, 122, 95, 0.1)',
+                    errorColor: '#E07A5F',
+                    errorBorder: '#E07A5F',
+                    successBg: 'rgba(132, 169, 140, 0.1)',
+                    successColor: '#84A98C',
+                    successBorder: '#84A98C',
+                    buttonBg: '#C15F3C',
+                    buttonBgHover: '#AB4E2F',
+                },
+                light: {
+                    formBg: '#FAF8F6', // Light base background (matching chat widget)
+                    labelColor: '#2D2826', // Darker color for better readability (matching legacy embed-form.js)
+                    inputBg: '#FFFFFF',
+                    inputText: '#2D2826',
+                    inputBorder: '#D4CFCA',
+                    inputBorderFocus: '#C15F3C',
+                    placeholderColor: '#8A847E',
+                    radioColor: '#5A5450',
+                    ratingInactive: '#D4CFCA',
+                    errorBg: 'rgba(193, 84, 56, 0.1)',
+                    errorColor: '#C15438',
+                    errorBorder: '#C15438',
+                    successBg: 'rgba(92, 122, 99, 0.1)',
+                    successColor: '#5C7A63',
+                    successBorder: '#5C7A63',
+                    buttonBg: '#C15F3C',
+                    buttonBgHover: '#AB4E2F',
+                },
+            };
+            // Generate unique style ID based on container ID or random
+            this.styleId = containerId
+                ? `wabbit-form-styles-${containerId.replace(/[^a-zA-Z0-9]/g, '-')}`
+                : `wabbit-form-styles-${Math.random().toString(36).substr(2, 9)}`;
+            if (primaryColor) {
+                this._primaryColor = primaryColor;
+                // Update focus colors to use primary color (for fallback)
+                this.themes.dark.inputBorderFocus = primaryColor;
+                this.themes.light.inputBorderFocus = primaryColor;
+                this.themes.dark.buttonBg = primaryColor;
+                this.themes.light.buttonBg = primaryColor;
+                // Calculate hover color (darker by 10%)
+                const hoverColor = this.darkenColor(primaryColor, 10);
+                this.themes.dark.buttonBgHover = hoverColor;
+                this.themes.light.buttonBgHover = hoverColor;
+            }
+            this.injectStyles();
+        }
+        /**
+         * Get current theme colors
+         */
+        getColors(theme) {
+            const effectiveTheme = theme || this.currentTheme;
+            return this.themes[effectiveTheme];
+        }
+        /**
+         * Update theme
+         */
+        updateTheme(theme) {
+            this.currentTheme = theme;
+            this.injectStyles();
+        }
+        /**
+         * Update primary color
+         */
+        updatePrimaryColor(color) {
+            this._primaryColor = color;
+            this.themes.dark.inputBorderFocus = color;
+            this.themes.light.inputBorderFocus = color;
+            this.themes.dark.buttonBg = color;
+            this.themes.light.buttonBg = color;
+            const hoverColor = this.darkenColor(color, 10);
+            this.themes.dark.buttonBgHover = hoverColor;
+            this.themes.light.buttonBgHover = hoverColor;
+            this.injectStyles();
+        }
+        /**
+         * Get primary color (for reference)
+         */
+        getPrimaryColor() {
+            return this._primaryColor;
+        }
+        /**
+         * Darken a color by a percentage
+         */
+        darkenColor(color, percent) {
+            // Simple darken for hex colors
+            if (color.startsWith('#')) {
+                const num = parseInt(color.slice(1), 16);
+                const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));
+                const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * (1 - percent / 100)));
+                const b = Math.max(0, Math.floor((num & 0x0000FF) * (1 - percent / 100)));
+                return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+            }
+            return color;
+        }
+        /**
+         * Inject styles into document
+         */
+        injectStyles() {
+            // Check if style element already exists (for this instance)
+            this.styleElement = document.getElementById(this.styleId);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.id = this.styleId;
+                this.styleElement.setAttribute('data-wabbit', 'form-styles');
+                document.head.appendChild(this.styleElement);
+            }
+            const colors = this.getColors();
+            const css = this.generateCSS(colors);
+            this.styleElement.textContent = css;
+        }
+        /**
+         * Generate CSS for form styles
+         */
+        generateCSS(colors) {
+            return `
+      /* Wabbit Form Styles */
+      .wabbit-form {
+        max-width: 600px;
+        margin: 0 auto;
+        font-family: Inter, system-ui, sans-serif;
+        background-color: ${colors.formBg};
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+      }
+
+      .wabbit-field {
+        margin-bottom: 1.5rem;
+      }
+
+      /* Label color is set via inline style in FormRenderer for theme-aware rendering */
+      /* This ensures the correct theme color is applied at render time */
+
+      .wabbit-field input[type="text"],
+      .wabbit-field input[type="email"],
+      .wabbit-field input[type="number"],
+      .wabbit-field textarea,
+      .wabbit-field select {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        border: 1px solid ${colors.inputBorder};
+        border-radius: 0.5rem;
+        font-size: 1rem;
+        background-color: ${colors.inputBg};
+        color: ${colors.inputText};
+        transition: border-color 0.2s, box-shadow 0.2s;
+        box-sizing: border-box;
+      }
+
+      .wabbit-field input[type="text"]:focus,
+      .wabbit-field input[type="email"]:focus,
+      .wabbit-field input[type="number"]:focus,
+      .wabbit-field textarea:focus,
+      .wabbit-field select:focus {
+        outline: none;
+        border-color: var(--wabbit-primary-color);
+        box-shadow: 0 0 0 3px rgba(193, 95, 60, 0.1);
+      }
+
+      .wabbit-field input::placeholder,
+      .wabbit-field textarea::placeholder {
+        color: ${colors.placeholderColor};
+        opacity: 1;
+      }
+
+      .wabbit-field textarea {
+        resize: vertical;
+      }
+
+      .wabbit-field .wabbit-radio-group,
+      .wabbit-field .wabbit-checkbox-group {
+        margin-bottom: 0.5rem;
+      }
+
+      .wabbit-field .wabbit-radio-group label,
+      .wabbit-field .wabbit-checkbox-group label {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        color: ${colors.radioColor};
+        margin-bottom: 0.5rem;
+      }
+
+      .wabbit-field input[type="radio"],
+      .wabbit-field input[type="checkbox"] {
+        margin-right: 0.5rem;
+        accent-color: var(--wabbit-primary-color);
+      }
+
+      .wabbit-rating {
+        display: flex;
+        gap: 0.25rem;
+      }
+
+      .wabbit-rating input[type="radio"] {
+        display: none;
+      }
+
+      .wabbit-rating label {
+        cursor: pointer;
+        font-size: 1.5rem;
+        color: ${colors.ratingInactive};
+        transition: color 0.2s;
+      }
+
+      .wabbit-rating label:hover {
+        color: var(--wabbit-primary-color);
+      }
+
+      .wabbit-rating input[type="radio"]:checked ~ label,
+      .wabbit-rating label:has(+ input[type="radio"]:checked) {
+        color: var(--wabbit-primary-color);
+      }
+
+      .wabbit-submit {
+        width: 100%;
+        padding: 0.75rem 1.5rem;
+        background-color: var(--wabbit-primary-color);
+        color: white;
+        border: none;
+        border-radius: 0.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.2s, transform 0.15s;
+      }
+
+      .wabbit-submit:hover:not(:disabled) {
+        background-color: var(--wabbit-primary-color-hover);
+        transform: translateY(-1px);
+      }
+
+      .wabbit-submit:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .wabbit-message {
+        display: none;
+        margin-top: 1rem;
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+      }
+
+      .wabbit-message.wabbit-message-success {
+        background-color: ${colors.successBg};
+        color: ${colors.successColor};
+        border: 1px solid ${colors.successBorder};
+      }
+
+      .wabbit-message.wabbit-message-error {
+        background-color: ${colors.errorBg};
+        color: ${colors.errorColor};
+        border: 1px solid ${colors.errorBorder};
+      }
+    `;
+        }
+        /**
+         * Cleanup styles
+         */
+        destroy() {
+            if (this.styleElement) {
+                this.styleElement.remove();
+                this.styleElement = null;
+            }
+        }
+    }
+
+    /**
+     * API client for making HTTP requests
+     */
+    /**
+     * API client class
+     */
+    class ApiClient {
+        constructor(options) {
+            this.baseUrl = options.baseUrl.replace(/\/$/, '');
+            this.apiKey = options.apiKey;
+            this.timeout = options.timeout || 30000;
+        }
+        /**
+         * Make a GET request
+         *
+         * @param endpoint - API endpoint path
+         * @param options - Request options (e.g., requireAuth)
+         */
+        async get(endpoint, options) {
+            return this.request('GET', endpoint, undefined, options);
+        }
+        /**
+         * Make a POST request
+         *
+         * @param endpoint - API endpoint path
+         * @param data - Request body data
+         * @param options - Request options (e.g., requireAuth)
+         */
+        async post(endpoint, data, options) {
+            return this.request('POST', endpoint, data, options);
+        }
+        /**
+         * Make a request
+         */
+        async request(method, endpoint, data, requestOptions) {
+            const url = `${this.baseUrl}${endpoint}`;
+            // Build headers
+            const headers = {
+                'Content-Type': 'application/json',
+            };
+            // Add API key if authentication is required (default: true)
+            // Public endpoints (like form definitions) should set requireAuth: false
+            const requireAuth = requestOptions?.requireAuth !== false; // Default to true
+            if (requireAuth && this.apiKey) {
+                headers['X-API-Key'] = this.apiKey;
+            }
+            // Create abort controller for timeout (more compatible than AbortSignal.timeout)
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+            const fetchOptions = {
+                method,
+                headers,
+                mode: 'cors', // Explicitly set CORS mode like the old embed-form.js
+                signal: controller.signal
+            };
+            if (data && method !== 'GET') {
+                fetchOptions.body = JSON.stringify(data);
+            }
+            try {
+                const response = await fetch(url, fetchOptions);
+                // Clear timeout on successful response
+                clearTimeout(timeoutId);
+                if (!response.ok) {
+                    let errorText;
+                    try {
+                        const errorJson = await response.json();
+                        // Handle Next.js API route error format
+                        if (errorJson.detail) {
+                            errorText = errorJson.detail;
+                        }
+                        else if (errorJson.error) {
+                            errorText = errorJson.error;
+                        }
+                        else if (errorJson.message) {
+                            errorText = errorJson.message;
+                        }
+                        else {
+                            errorText = JSON.stringify(errorJson);
+                        }
+                    }
+                    catch {
+                        const text = await response.text();
+                        // Try to extract meaningful error message from text
+                        if (text) {
+                            errorText = text;
+                        }
+                        else {
+                            // Fallback to status text only (no HTTP status code)
+                            errorText = response.statusText || 'An error occurred';
+                        }
+                    }
+                    return {
+                        success: false,
+                        error: errorText // Return only the error message, not HTTP status code
+                    };
+                }
+                const result = await response.json();
+                return {
+                    success: true,
+                    data: result
+                };
+            }
+            catch (error) {
+                clearTimeout(timeoutId);
+                // Handle abort (timeout)
+                if (error instanceof Error && error.name === 'AbortError') {
+                    return {
+                        success: false,
+                        error: `Request timeout after ${this.timeout}ms`
+                    };
+                }
+                if (error instanceof TypeError && error.message.includes('CORS')) {
+                    return {
+                        success: false,
+                        error: 'CORS error: Please check server configuration'
+                    };
+                }
+                return {
+                    success: false,
+                    error: error instanceof Error ? error.message : 'Unknown error'
+                };
+            }
+        }
+    }
+
+    /**
+     * Form Widget
+     *
+     * Main class for managing form widgets
+     */
+    /**
+     * Form Widget class
+     */
+    class FormWidget {
+        constructor(config) {
+            this.container = null;
+            this.formElement = null;
+            this.currentTheme = 'light';
+            this.themeCleanup = null;
+            this.formObserver = null;
+            this.config = config;
+            // Validate apiKey (required for API client)
+            if (!config.apiKey) {
+                throw new Error('FormWidget requires apiKey. Provide it in FormConfig or WabbitConfig.');
+            }
+            // Initialize API client
+            const apiUrl = config.apiUrl || this.getApiUrlFromScript();
+            this.apiClient = new ApiClient({
+                baseUrl: apiUrl,
+                apiKey: config.apiKey,
+            });
+            // Initialize styles and renderer
+            // Pass containerId to FormStyles to generate unique style ID
+            this.styles = new FormStyles(config.primaryColor, config.containerId);
+            this.renderer = new FormRenderer(this.styles);
+        }
+        /**
+         * Initialize the form widget
+         */
+        init() {
+            onDOMReady(() => {
+                // Determine initial theme based on config
+                const themeMode = this.config.theme || 'auto';
+                if (themeMode === 'auto') {
+                    this.currentTheme = detectTheme();
+                }
+                else {
+                    this.currentTheme = themeMode;
+                }
+                // Update FormStyles theme to match determined theme
+                this.styles.updateTheme(this.currentTheme);
+                // Setup theme watcher (will handle auto mode or explicit theme)
+                this.setupThemeWatcher();
+                // Load and render form
+                this.loadForm();
+            });
+        }
+        /**
+         * Load and render form
+         */
+        async loadForm() {
+            try {
+                // Find container
+                this.container = this.findContainer();
+                if (!this.container) {
+                    throw new Error(`Container not found: ${this.config.containerId || 'data-wabbit-form-id'}`);
+                }
+                // Load form definition (public endpoint, no auth required)
+                const response = await this.apiClient.get(`/api/forms/${this.config.formId}/definition`, { requireAuth: false });
+                if (!response.success || !response.data) {
+                    throw new Error(response.error || 'Failed to load form definition');
+                }
+                const formData = response.data;
+                // Render form
+                const html = this.renderer.render(formData, this.currentTheme);
+                this.container.innerHTML = html;
+                // Set CSS variables on container for scoped styling
+                // This allows each form container to have its own primary color
+                // Always set the variables, even if primaryColor is not provided (use default from FormStyles)
+                const primaryColor = this.config.primaryColor || '#C15F3C'; // Default primary color
+                this.container.style.setProperty('--wabbit-primary-color', primaryColor);
+                // Calculate hover color (darker by 10%)
+                const hoverColor = this.calculateHoverColor(primaryColor);
+                this.container.style.setProperty('--wabbit-primary-color-hover', hoverColor);
+                // Debug: Log the color being set (remove in production)
+                console.log(`[Wabbit] Form in container "${this.config.containerId}" using primary color: ${primaryColor}`);
+                // Find form element
+                this.formElement = this.container.querySelector('form');
+                if (!this.formElement) {
+                    throw new Error('Form element not found after rendering');
+                }
+                // Attach submit handler
+                this.attachSubmitHandler(formData.settings.successMessage);
+                // Setup rating field interactions
+                this.setupRatingInteractions();
+                // Call onLoad callback
+                if (this.config.onLoad) {
+                    this.config.onLoad();
+                }
+            }
+            catch (error) {
+                console.error('[Wabbit] Form load error:', error);
+                this.showError(error instanceof Error ? error.message : 'Failed to load form');
+                if (this.config.onError) {
+                    this.config.onError(error instanceof Error ? error : new Error(String(error)));
+                }
+            }
+        }
+        /**
+         * Find container element
+         */
+        findContainer() {
+            // Priority 1: containerId from config
+            if (this.config.containerId) {
+                const element = document.getElementById(this.config.containerId) || document.querySelector(this.config.containerId);
+                if (element) {
+                    return element;
+                }
+            }
+            // Priority 2: data-wabbit-form-id attribute (backward compatibility)
+            const dataAttrContainer = document.querySelector(`[data-wabbit-form-id="${this.config.formId}"]`);
+            if (dataAttrContainer) {
+                return dataAttrContainer;
+            }
+            return null;
+        }
+        /**
+         * Attach form submit handler
+         */
+        attachSubmitHandler(successMessage) {
+            if (!this.formElement)
+                return;
+            this.formElement.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                await this.handleSubmit(successMessage);
+            });
+        }
+        /**
+         * Setup rating field interactions
+         */
+        setupRatingInteractions() {
+            if (!this.formElement)
+                return;
+            const ratingInputs = this.formElement.querySelectorAll('.wabbit-rating input[type="radio"]');
+            ratingInputs.forEach((input) => {
+                const label = this.formElement.querySelector(`label[for="${input.id}"]`);
+                if (!label)
+                    return;
+                const inputElement = input;
+                // Update star colors when clicked
+                inputElement.addEventListener('change', () => {
+                    this.updateRatingStars(inputElement);
+                });
+                // Hover effect
+                label.addEventListener('mouseenter', () => {
+                    const colors = this.styles.getColors(this.currentTheme);
+                    label.style.color = colors.inputBorderFocus;
+                });
+                label.addEventListener('mouseleave', () => {
+                    this.updateRatingStars(inputElement);
+                });
+            });
+        }
+        /**
+         * Update rating star colors
+         */
+        updateRatingStars(checkedInput) {
+            if (!this.formElement)
+                return;
+            const fieldName = checkedInput.name;
+            const colors = this.styles.getColors(this.currentTheme);
+            const allInputs = this.formElement.querySelectorAll(`input[name="${fieldName}"]`);
+            const allLabels = this.formElement.querySelectorAll(`label[for^="${fieldName}_"]`);
+            allInputs.forEach((input) => {
+                const label = Array.from(allLabels).find((l) => l.getAttribute('for') === input.id);
+                if (label) {
+                    if (input.checked) {
+                        label.style.color = colors.inputBorderFocus;
+                    }
+                    else {
+                        label.style.color = colors.ratingInactive;
+                    }
+                }
+            });
+        }
+        /**
+         * Handle form submission
+         */
+        async handleSubmit(successMessage) {
+            if (!this.formElement)
+                return;
+            const submitButton = this.formElement.querySelector('.wabbit-submit');
+            const messageDiv = this.formElement.querySelector('.wabbit-message');
+            if (!submitButton || !messageDiv)
+                return;
+            // Disable submit button
+            submitButton.disabled = true;
+            submitButton.textContent = 'Submitting...';
+            // Hide previous messages
+            messageDiv.style.display = 'none';
+            messageDiv.className = 'wabbit-message';
+            try {
+                // Collect form data
+                const formData = new FormData(this.formElement);
+                const responses = {};
+                for (const [key, value] of formData.entries()) {
+                    if (key.endsWith('[]')) {
+                        // Checkbox group
+                        const fieldId = key.replace('[]', '');
+                        if (!responses[fieldId]) {
+                            responses[fieldId] = [];
+                        }
+                        responses[fieldId].push(value);
+                    }
+                    else {
+                        responses[key] = value;
+                    }
+                }
+                // Submit form (public endpoint, no auth required)
+                const response = await this.apiClient.post(`/api/forms/${this.config.formId}/submit`, {
+                    responses,
+                    metadata: {
+                        referrer: document.referrer,
+                        userAgent: navigator.userAgent,
+                    },
+                }, { requireAuth: false });
+                if (response.success && response.data?.success) {
+                    // Success
+                    const message = response.data.message || successMessage || 'Thank you! Your submission has been received.';
+                    this.showSuccess(message, messageDiv);
+                    this.formElement.reset();
+                    // Call onSubmit callback
+                    if (this.config.onSubmit) {
+                        this.config.onSubmit(responses, response.data.submissionId);
+                    }
+                    // Re-enable button after 2 seconds
+                    setTimeout(() => {
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Submit';
+                    }, 2000);
+                }
+                else {
+                    // Error - format user-friendly message
+                    const rawError = response.data?.error || response.error || 'Failed to submit form';
+                    const errorMessage = this.formatErrorMessage(rawError);
+                    this.showError(errorMessage, messageDiv);
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Submit';
+                    if (this.config.onError) {
+                        this.config.onError(new Error(rawError));
+                    }
+                }
+            }
+            catch (error) {
+                console.error('[Wabbit] Submission error:', error);
+                const rawError = error instanceof Error ? error.message : 'Network error. Please try again.';
+                const errorMessage = this.formatErrorMessage(rawError);
+                this.showError(errorMessage, messageDiv);
+                submitButton.disabled = false;
+                submitButton.textContent = 'Submit';
+                if (this.config.onError) {
+                    this.config.onError(error instanceof Error ? error : new Error(String(error)));
+                }
+            }
+        }
+        /**
+         * Format error message to be user-friendly
+         * Removes HTTP status codes and technical details
+         */
+        formatErrorMessage(error) {
+            if (!error)
+                return 'An error occurred. Please try again.';
+            // Remove HTTP status codes (e.g., "HTTP 400", "400 Bad Request")
+            let message = error
+                .replace(/^HTTP\s+\d+\s*/i, '')
+                .replace(/^\d+\s+[A-Z\s]+:\s*/i, '')
+                .replace(/\b\d{3}\s+[A-Z\s]+\b/gi, '')
+                .trim();
+            // If message is empty after cleaning, provide a friendly default
+            if (!message || message.length === 0) {
+                return 'An error occurred. Please try again.';
+            }
+            // Remove common technical prefixes
+            message = message.replace(/^(Error|Failed|Error:)\s*/i, '');
+            return message;
+        }
+        /**
+         * Show success message
+         */
+        showSuccess(message, messageDiv) {
+            const div = messageDiv || this.formElement?.querySelector('.wabbit-message');
+            if (!div)
+                return;
+            div.textContent = message;
+            div.className = 'wabbit-message wabbit-message-success';
+            div.style.display = 'block';
+        }
+        /**
+         * Show error message
+         */
+        showError(message, messageDiv) {
+            if (this.container && !messageDiv) {
+                const colors = this.styles.getColors(this.currentTheme);
+                this.container.innerHTML = `<p style="color: ${colors.errorColor}; padding: 1rem; border: 1px solid ${colors.errorBorder}; border-radius: 0.5rem; background-color: ${colors.errorBg};">${escapeHtml(message)}</p>`;
+                return;
+            }
+            const div = messageDiv || this.formElement?.querySelector('.wabbit-message');
+            if (!div)
+                return;
+            div.textContent = message;
+            div.className = 'wabbit-message wabbit-message-error';
+            div.style.display = 'block';
+        }
+        /**
+         * Setup theme watcher
+         */
+        setupThemeWatcher() {
+            const themeMode = this.config.theme || 'auto';
+            if (themeMode === 'auto') {
+                this.themeCleanup = watchTheme((theme) => {
+                    this.currentTheme = theme;
+                    this.updateFormTheme();
+                });
+            }
+            else {
+                // Use explicit theme from config
+                this.currentTheme = themeMode;
+                // Update FormStyles to use the explicit theme
+                this.styles.updateTheme(themeMode);
+            }
+        }
+        /**
+         * Update form theme
+         */
+        updateFormTheme() {
+            // Update styles with new theme
+            this.styles.updateTheme(this.currentTheme);
+            // Update rating stars if form is rendered
+            if (this.formElement) {
+                const ratingInputs = this.formElement.querySelectorAll('.wabbit-rating input[type="radio"]');
+                ratingInputs.forEach((input) => {
+                    if (input.checked) {
+                        this.updateRatingStars(input);
+                    }
+                });
+            }
+        }
+        /**
+         * Calculate hover color (darker by 10%)
+         */
+        calculateHoverColor(color) {
+            if (color.startsWith('#')) {
+                const num = parseInt(color.slice(1), 16);
+                const r = Math.max(0, Math.floor((num >> 16) * 0.9));
+                const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * 0.9));
+                const b = Math.max(0, Math.floor((num & 0x0000FF) * 0.9));
+                return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+            }
+            return color;
+        }
+        /**
+         * Get API URL from script tag (for backward compatibility)
+         */
+        getApiUrlFromScript() {
+            const scriptTag = document.currentScript ||
+                document.querySelector('script[src*="embed"]');
+            if (scriptTag && scriptTag instanceof HTMLScriptElement && scriptTag.src) {
+                try {
+                    return new URL(scriptTag.src).origin;
+                }
+                catch {
+                    // Invalid URL
+                }
+            }
+            return 'http://localhost:3000';
+        }
+        /**
+         * Destroy the form widget
+         */
+        destroy() {
+            if (this.themeCleanup) {
+                this.themeCleanup();
+                this.themeCleanup = null;
+            }
+            if (this.formObserver) {
+                this.formObserver.disconnect();
+                this.formObserver = null;
+            }
+            if (this.styles) {
+                this.styles.destroy();
+            }
+            // Clear container
+            if (this.container) {
+                this.container.innerHTML = '';
+            }
+            this.container = null;
+            this.formElement = null;
+        }
+    }
+
+    var FormWidget$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        FormWidget: FormWidget
+    });
+
+    /**
+     * Simple event emitter for SDK
+     */
+    /**
+     * Simple event emitter class
+     */
+    class EventEmitter {
+        constructor() {
+            this.events = new Map();
+        }
+        /**
+         * Subscribe to an event
+         */
+        on(event, handler) {
+            if (!this.events.has(event)) {
+                this.events.set(event, []);
+            }
+            this.events.get(event).push(handler);
+        }
+        /**
+         * Unsubscribe from an event
+         */
+        off(event, handler) {
+            const handlers = this.events.get(event);
+            if (handlers) {
+                const index = handlers.indexOf(handler);
+                if (index > -1) {
+                    handlers.splice(index, 1);
+                }
+            }
+        }
+        /**
+         * Emit an event
+         */
+        emit(event, ...args) {
+            const handlers = this.events.get(event);
+            if (handlers) {
+                handlers.forEach((handler) => {
+                    try {
+                        handler(...args);
+                    }
+                    catch (error) {
+                        console.error(`[Wabbit] Error in event handler for "${event}":`, error);
+                    }
+                });
+            }
+        }
+        /**
+         * Remove all listeners for an event
+         */
+        removeAllListeners(event) {
+            if (event) {
+                this.events.delete(event);
+            }
+            else {
+                this.events.clear();
+            }
+        }
+        /**
+         * Get listener count for an event
+         */
+        listenerCount(event) {
+            return this.events.get(event)?.length || 0;
+        }
+    }
+
+    /**
+     * Email Capture Modal Component
+     *
+     * Vanilla JavaScript implementation of the email capture modal
+     */
+    class EmailCaptureModal {
+        constructor(config) {
+            this.overlay = null;
+            this.modal = null;
+            this.isOpen = false;
+            this.config = config;
+        }
+        /**
+         * Show the email capture modal
+         */
+        show(onSubmit, onDismiss) {
+            if (this.isOpen) {
+                return;
+            }
+            this.onSubmitCallback = onSubmit;
+            this.onDismissCallback = onDismiss;
+            this.isOpen = true;
+            this.render();
+        }
+        /**
+         * Hide the email capture modal
+         */
+        hide() {
+            if (!this.isOpen) {
+                return;
+            }
+            this.isOpen = false;
+            this.destroy();
+        }
+        /**
+         * Render the modal
+         */
+        render() {
+            const theme = detectTheme();
+            const isDark = theme === 'dark';
+            // Create overlay
+            this.overlay = document.createElement('div');
+            this.overlay.className = 'wabbit-email-capture-overlay';
+            this.overlay.addEventListener('click', (e) => {
+                if (e.target === this.overlay) {
+                    this.handleDismiss();
+                }
+            });
+            // Create modal
+            this.modal = document.createElement('div');
+            this.modal.className = `wabbit-email-capture-modal ${isDark ? 'dark' : ''}`;
+            // Build form fields based on config
+            const fields = this.config.fields || ['email'];
+            const formFields = fields.map((field) => this.renderField(field)).join('');
+            // Render modal content
+            this.modal.innerHTML = `
+      <button class="wabbit-email-capture-close ${isDark ? 'dark' : ''}" aria-label="Close">
+        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+      <div class="wabbit-email-capture-content">
+        <h2 class="wabbit-email-capture-title">
+          ${this.config.title || 'Save this conversation?'}
+        </h2>
+        <p class="wabbit-email-capture-description">
+          ${this.config.description || 'Enter your email to continue this chat later'}
+        </p>
+        <form class="wabbit-email-capture-form">
+          ${formFields}
+          <div class="wabbit-email-capture-checkbox">
+            <input type="checkbox" id="wabbit-dont-show-again" />
+            <label for="wabbit-dont-show-again">Don't show this again</label>
+          </div>
+          <div class="wabbit-email-capture-buttons">
+            <button type="submit" class="wabbit-email-capture-button wabbit-email-capture-button-primary">
+              Save Conversation
+            </button>
+            <button type="button" class="wabbit-email-capture-button wabbit-email-capture-button-secondary">
+              Maybe Later
+            </button>
+          </div>
+        </form>
+      </div>
+    `;
+            // Attach event listeners
+            this.attachEventListeners();
+            // Append to DOM
+            this.overlay.appendChild(this.modal);
+            document.body.appendChild(this.overlay);
+        }
+        /**
+         * Render a form field
+         */
+        renderField(field) {
+            const fieldConfig = {
+                email: { label: 'Email', type: 'email', placeholder: 'your@email.com', required: true },
+                name: { label: 'Name', type: 'text', placeholder: 'Your name', required: false },
+                company: { label: 'Company', type: 'text', placeholder: 'Your company', required: false }
+            };
+            const config = fieldConfig[field];
+            return `
+      <div class="wabbit-email-capture-field">
+        <label class="wabbit-email-capture-label" for="wabbit-field-${field}">
+          ${config.label}
+        </label>
+        <input
+          type="${config.type}"
+          id="wabbit-field-${field}"
+          name="${field}"
+          placeholder="${config.placeholder}"
+          class="wabbit-email-capture-input"
+          ${config.required ? 'required' : ''}
+        />
+        <div class="wabbit-email-capture-error" id="wabbit-error-${field}" style="display: none;"></div>
+      </div>
+    `;
+        }
+        /**
+         * Attach event listeners
+         */
+        attachEventListeners() {
+            if (!this.modal)
+                return;
+            // Close button
+            const closeButton = this.modal.querySelector('.wabbit-email-capture-close');
+            if (closeButton) {
+                closeButton.addEventListener('click', () => this.handleDismiss());
+            }
+            // Form submit
+            const form = this.modal.querySelector('form');
+            if (form) {
+                form.addEventListener('submit', (e) => this.handleSubmit(e));
+            }
+            // Maybe Later button
+            const maybeLaterButton = this.modal.querySelector('.wabbit-email-capture-button-secondary');
+            if (maybeLaterButton) {
+                maybeLaterButton.addEventListener('click', () => this.handleDismiss());
+            }
+        }
+        /**
+         * Handle form submission
+         */
+        async handleSubmit(e) {
+            e.preventDefault();
+            if (!this.modal || !this.onSubmitCallback)
+                return;
+            // Get form data
+            const form = this.modal.querySelector('form');
+            if (!form)
+                return;
+            const formData = new FormData(form);
+            const data = {
+                email: formData.get('email') || '',
+                name: formData.get('name') || undefined,
+                company: formData.get('company') || undefined
+            };
+            // Validate email
+            if (!data.email || !this.isValidEmail(data.email)) {
+                this.showError('email', 'Please enter a valid email address');
+                return;
+            }
+            // Get "Don't show again" checkbox
+            const dontShowAgain = form.querySelector('#wabbit-dont-show-again')?.checked || false;
+            // Disable form
+            this.setFormDisabled(true);
+            try {
+                await this.onSubmitCallback(data, dontShowAgain);
+                this.hide();
+            }
+            catch (error) {
+                this.showError('email', error instanceof Error ? error.message : 'Failed to save email');
+                this.setFormDisabled(false);
+            }
+        }
+        /**
+         * Handle dismiss
+         */
+        handleDismiss() {
+            if (this.onDismissCallback) {
+                this.onDismissCallback();
+            }
+            this.hide();
+        }
+        /**
+         * Set form disabled state
+         */
+        setFormDisabled(disabled) {
+            if (!this.modal)
+                return;
+            const inputs = this.modal.querySelectorAll('input, button');
+            inputs.forEach((input) => {
+                input.style.opacity = disabled ? '0.5' : '1';
+                input.style.pointerEvents = disabled ? 'none' : 'auto';
+            });
+            const submitButton = this.modal.querySelector('.wabbit-email-capture-button-primary');
+            if (submitButton) {
+                submitButton.disabled = disabled;
+                submitButton.textContent = disabled ? 'Saving...' : 'Save Conversation';
+            }
+        }
+        /**
+         * Show error message
+         */
+        showError(field, message) {
+            if (!this.modal)
+                return;
+            const errorElement = this.modal.querySelector(`#wabbit-error-${field}`);
+            if (errorElement) {
+                errorElement.textContent = message;
+                errorElement.style.display = 'block';
+            }
+        }
+        /**
+         * Validate email format
+         */
+        isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(email);
+        }
+        /**
+         * Destroy the modal
+         */
+        destroy() {
+            if (this.overlay) {
+                this.overlay.remove();
+                this.overlay = null;
+            }
+            this.modal = null;
+            this.isOpen = false;
+        }
+    }
+
+    /**
+     * Email Capture Modal Styles
+     */
+    /**
+     * Inject email capture modal styles
+     */
+    function injectEmailCaptureStyles(primaryColor = '#6366f1') {
+        const styleId = 'wabbit-email-capture-styles';
+        // Remove existing styles if any
+        const existing = document.getElementById(styleId);
+        if (existing) {
+            existing.remove();
+        }
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.setAttribute('data-wabbit', 'email-capture-styles');
+        style.textContent = `
+    /* Email Capture Modal Styles */
+    .wabbit-email-capture-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      animation: wabbit-fade-in 0.2s ease-out;
+      padding: 1rem;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    .wabbit-email-capture-modal {
+      position: relative;
+      background: white;
+      border-radius: 0.5rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      padding: 1.5rem;
+      width: calc(100% - 2rem);
+      max-width: 28rem;
+      margin: 1rem;
+      animation: wabbit-slide-up 0.3s ease-out;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .wabbit-email-capture-modal.dark {
+      background: #1f2937;
+      color: #f9fafb;
+    }
+
+    .wabbit-email-capture-close {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: none;
+      border: none;
+      color: #6b7280;
+      cursor: pointer;
+      padding: 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.25rem;
+      transition: all 0.2s;
+    }
+
+    .wabbit-email-capture-close:hover {
+      color: #374151;
+      background-color: #f3f4f6;
+    }
+
+    .wabbit-email-capture-close.dark:hover {
+      color: #d1d5db;
+      background-color: #374151;
+    }
+
+    .wabbit-email-capture-close:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wabbit-email-capture-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.5rem;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-title {
+      color: #f9fafb;
+    }
+
+    .wabbit-email-capture-description {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 1.5rem;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-description {
+      color: #d1d5db;
+    }
+
+    .wabbit-email-capture-form {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .wabbit-email-capture-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .wabbit-email-capture-label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-label {
+      color: #d1d5db;
+    }
+
+    .wabbit-email-capture-input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #d1d5db;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      background: white;
+      color: #111827;
+      box-sizing: border-box;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-input {
+      background: #374151;
+      border-color: #4b5563;
+      color: #f9fafb;
+    }
+
+    .wabbit-email-capture-input:focus {
+      outline: none;
+      border-color: ${primaryColor};
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .wabbit-email-capture-input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wabbit-email-capture-error {
+      font-size: 0.875rem;
+      color: #dc2626;
+      margin-top: 0.25rem;
+    }
+
+    .wabbit-email-capture-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .wabbit-email-capture-checkbox input[type="checkbox"] {
+      width: 1rem;
+      height: 1rem;
+      accent-color: ${primaryColor};
+      cursor: pointer;
+    }
+
+    .wabbit-email-capture-checkbox label {
+      font-size: 0.875rem;
+      color: #6b7280;
+      cursor: pointer;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-checkbox label {
+      color: #d1d5db;
+    }
+
+    .wabbit-email-capture-buttons {
+      display: flex;
+      gap: 0.75rem;
+      margin-top: 0.5rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .wabbit-email-capture-button {
+      flex: 1;
+      padding: 0.75rem 1.5rem;
+      border: none;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      box-sizing: border-box;
+      min-width: 0;
+    }
+
+    .wabbit-email-capture-button-primary {
+      background-color: ${primaryColor};
+      color: white;
+    }
+
+    .wabbit-email-capture-button-primary:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    .wabbit-email-capture-button-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wabbit-email-capture-button-secondary {
+      background-color: white;
+      color: #374151;
+      border: 1px solid #d1d5db;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-button-secondary {
+      background-color: #374151;
+      color: #d1d5db;
+      border-color: #4b5563;
+    }
+
+    .wabbit-email-capture-button-secondary:hover:not(:disabled) {
+      background-color: #f9fafb;
+    }
+
+    .wabbit-email-capture-modal.dark .wabbit-email-capture-button-secondary:hover:not(:disabled) {
+      background-color: #4b5563;
+    }
+
+    @keyframes wabbit-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes wabbit-slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+        document.head.appendChild(style);
+    }
+
+    /**
+     * Email Capture Widget
+     *
+     * Manages email capture modal and integrates with chat widget
+     */
+    class EmailCaptureWidget {
+        constructor(config) {
+            this.messageCount = 0;
+            this.emailCaptured = false;
+            this.wsClient = null; // WebSocket client from ChatWidget
+            this.config = config;
+            this.modal = new EmailCaptureModal(config);
+            this.onCaptureCallback = config.onCapture;
+        }
+        /**
+         * Initialize the email capture widget
+         */
+        init() {
+            // Inject styles
+            injectEmailCaptureStyles('#6366f1'); // Default primary color
+            // Check if user has dismissed email capture
+            const dismissed = getStorageItem('wabbit_email_capture_dismissed');
+            if (dismissed === 'true') {
+                console.log('[Wabbit] Email capture dismissed by user');
+                return;
+            }
+            // Check if email already captured
+            const captured = getStorageItem('wabbit_email_captured');
+            if (captured === 'true') {
+                this.emailCaptured = true;
+                console.log('[Wabbit] Email already captured');
+                return;
+            }
+        }
+        /**
+         * Set WebSocket client (from ChatWidget)
+         */
+        setWebSocketClient(wsClient) {
+            this.wsClient = wsClient;
+        }
+        /**
+         * Handle new message (called by ChatWidget)
+         */
+        handleMessage() {
+            if (this.emailCaptured) {
+                return;
+            }
+            // Only count user messages
+            this.messageCount++;
+            const triggerAfter = this.config.triggerAfterMessages || 3;
+            if (this.messageCount >= triggerAfter) {
+                this.showModal();
+            }
+        }
+        /**
+         * Show the email capture modal
+         */
+        showModal() {
+            if (this.emailCaptured) {
+                return;
+            }
+            this.modal.show((data, dontShowAgain) => this.handleEmailSubmit(data, dontShowAgain), () => this.handleDismiss());
+        }
+        /**
+         * Handle email submission
+         */
+        async handleEmailSubmit(data, dontShowAgain) {
+            if (dontShowAgain) {
+                setStorageItem('wabbit_email_capture_dismissed', 'true');
+            }
+            // Send email via WebSocket if available
+            if (this.wsClient && this.wsClient.ws && this.wsClient.ws.readyState === WebSocket.OPEN) {
+                return new Promise((resolve, reject) => {
+                    const timeout = setTimeout(() => {
+                        reject(new Error('Email capture timeout'));
+                    }, 5000);
+                    const messageHandler = (event) => {
+                        try {
+                            const response = JSON.parse(event.data);
+                            if (response.type === 'email_confirmed') {
+                                clearTimeout(timeout);
+                                this.wsClient.ws.removeEventListener('message', messageHandler);
+                                if (response.success) {
+                                    this.emailCaptured = true;
+                                    setStorageItem('wabbit_email_captured', 'true');
+                                    // Call callback
+                                    if (this.onCaptureCallback) {
+                                        this.onCaptureCallback({
+                                            email: data.email,
+                                            name: data.name || '',
+                                            company: data.company || ''
+                                        });
+                                    }
+                                    resolve();
+                                }
+                                else {
+                                    reject(new Error(response.message || 'Failed to save email'));
+                                }
+                            }
+                        }
+                        catch (error) {
+                            // Not the message we're waiting for, ignore
+                        }
+                    };
+                    this.wsClient.ws.addEventListener('message', messageHandler);
+                    // Send email to server
+                    this.wsClient.ws.send(JSON.stringify({
+                        type: 'provide_email',
+                        email: data.email,
+                        name: data.name,
+                        company: data.company
+                    }));
+                });
+            }
+            else {
+                // WebSocket not available, just mark as captured locally
+                this.emailCaptured = true;
+                setStorageItem('wabbit_email_captured', 'true');
+                if (this.onCaptureCallback) {
+                    this.onCaptureCallback({
+                        email: data.email,
+                        name: data.name || '',
+                        company: data.company || ''
+                    });
+                }
+            }
+        }
+        /**
+         * Handle modal dismiss
+         */
+        handleDismiss() {
+            // User dismissed, but don't mark as dismissed permanently
+            // They can see it again next time
+        }
+        /**
+         * Destroy the widget
+         */
+        destroy() {
+            if (this.modal) {
+                this.modal.destroy();
+            }
+            this.wsClient = null;
+        }
+    }
+
+    var EmailCaptureWidget$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        EmailCaptureWidget: EmailCaptureWidget
+    });
+
+    /**
+     * Wabbit Embed SDK
+     *
+     * Unified widget library for embedding chat, forms, and email capture
+     * functionality into customer websites.
+     *
+     * @packageDocumentation
+     */
+    // Import Wabbit class and types
+    // Export main API functions as named exports
+    // For UMD: These automatically become properties of the global Wabbit object (Wabbit.init, Wabbit.getInstance, Wabbit.destroy)
+    // For ESM/CJS: Can import { init, getInstance, destroy } from '@wabbit/embed'
+    function init(config) {
+        return Wabbit.init(config);
+    }
+    function getInstance() {
+        return Wabbit.getInstance();
+    }
+    function destroy() {
+        return Wabbit.destroy();
+    }
+    // Create an object as default export (for ESM/CJS: import Wabbit from '@wabbit/embed')
+    // Note: For UMD, we don't use default export, but directly use named exports
+    const WabbitSDK = {
+        init,
+        getInstance,
+        destroy
+    };
+
+    exports.ApiClient = ApiClient;
+    exports.ChatBubble = ChatBubble;
+    exports.ChatPanel = ChatPanel;
+    exports.ChatWebSocketClient = ChatWebSocketClient;
+    exports.ChatWidget = ChatWidget;
+    exports.EmailCaptureModal = EmailCaptureModal;
+    exports.EmailCaptureWidget = EmailCaptureWidget;
+    exports.EventEmitter = EventEmitter;
+    exports.FormRenderer = FormRenderer;
+    exports.FormStyles = FormStyles;
+    exports.FormWidget = FormWidget;
+    exports.SafeStorage = SafeStorage;
+    exports.Wabbit = Wabbit;
+    exports.createElement = createElement;
+    exports.default = WabbitSDK;
+    exports.destroy = destroy;
+    exports.detectTheme = detectTheme;
+    exports.escapeHtml = escapeHtml;
+    exports.getInstance = getInstance;
+    exports.init = init;
+    exports.mergeConfig = mergeConfig;
+    exports.onDOMReady = onDOMReady;
+    exports.storage = storage;
+    exports.validateConfig = validateConfig;
+    exports.watchTheme = watchTheme;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=wabbit-embed.umd.min.js.map