@wabbit-dashboard/embed 1.0.0

package/dist/wabbit-embed.cjs.js

@@ -0,0 +1,3598 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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;
+//# sourceMappingURL=wabbit-embed.cjs.js.map