@wabbit-dashboard/embed 1.0.12 → 1.0.14

package/dist/wabbit-embed.umd.js

@@ -162,16 +162,71 @@
             validateConfig(config);
             const mergedConfig = mergeConfig(config);
             Wabbit.instance = new Wabbit(mergedConfig);
+            // Store email capture widget reference for use in callbacks
+            // This allows chat widget to trigger email capture without tight coupling
+            let emailCaptureWidgetRef = null;
+            // Track if email capture is enabled (determined by server config)
+            let emailCaptureEnabled = false;
             // Initialize widgets based on merged config
             if (mergedConfig.chat?.enabled && mergedConfig.chat) {
+                const chat = mergedConfig.chat;
+                const apiUrl = chat.apiUrl || mergedConfig.apiUrl || 'https://platform.insourcedata.ai';
+                const collectionId = chat.collectionId;
+                // Fetch email capture config from server (in parallel with chat widget import)
+                const emailCaptureConfigPromise = fetch(`${apiUrl}/api/email-capture/config/${collectionId}`)
+                    .then(res => res.json())
+                    .then(data => {
+                    if (data.success && data.config?.enabled) {
+                        return data.config;
+                    }
+                    return null;
+                })
+                    .catch(err => {
+                    console.warn('[Wabbit] Failed to fetch email capture config:', err);
+                    return null;
+                });
                 // Import ChatWidget dynamically to avoid circular dependencies
-                Promise.resolve().then(function () { return ChatWidget$1; }).then(({ ChatWidget }) => {
+                Promise.resolve().then(function () { return ChatWidget$1; }).then(async ({ ChatWidget }) => {
                     // Check if instance was destroyed during async import (e.g., React StrictMode)
                     if (!Wabbit.instance) {
                         console.warn('[Wabbit] Instance was destroyed before chat widget could initialize');
                         return;
                     }
-                    const chat = mergedConfig.chat;
+                    // Wait for email capture config to be fetched
+                    const serverEmailConfig = await emailCaptureConfigPromise;
+                    emailCaptureEnabled = !!serverEmailConfig;
+                    // Initialize email capture widget if server config says it's enabled
+                    if (serverEmailConfig) {
+                        const { EmailCaptureWidget } = await Promise.resolve().then(function () { return EmailCaptureWidget$1; });
+                        if (!Wabbit.instance) {
+                            console.warn('[Wabbit] Instance was destroyed before email capture widget could initialize');
+                            return;
+                        }
+                        // Convert server config format to widget config format
+                        const triggerAfterMessages = serverEmailConfig.trigger?.type === 'message_count'
+                            ? serverEmailConfig.trigger.messageCount
+                            : 3;
+                        // Build fields array from server config
+                        const fields = ['email'];
+                        if (serverEmailConfig.fields?.name?.enabled)
+                            fields.push('name');
+                        if (serverEmailConfig.fields?.company?.enabled)
+                            fields.push('company');
+                        const emailCaptureConfig = {
+                            enabled: true,
+                            triggerAfterMessages,
+                            title: serverEmailConfig.modal?.title,
+                            description: serverEmailConfig.modal?.description,
+                            fields,
+                            onCapture: mergedConfig.emailCapture?.onCapture
+                        };
+                        const emailCaptureWidget = new EmailCaptureWidget(emailCaptureConfig);
+                        emailCaptureWidget.init();
+                        Wabbit.instance.emailCaptureWidget = emailCaptureWidget;
+                        emailCaptureWidgetRef = emailCaptureWidget;
+                        console.log('[Wabbit] Email capture initialized from server config');
+                    }
+                    const userOnChatReady = chat.onChatReady || config.onChatReady;
                     const chatConfig = {
                         enabled: chat.enabled,
                         collectionId: chat.collectionId,
@@ -194,8 +249,28 @@
                         // Header customization
                         showHeader: chat.showHeader,
                         headerTitle: chat.headerTitle,
-                        // Callbacks - prefer chat-specific, fallback to global
-                        onChatReady: chat.onChatReady || config.onChatReady
+                        // Callbacks
+                        onChatReady: () => {
+                            // Set WebSocket client on email capture widget when chat is ready
+                            if (emailCaptureWidgetRef && Wabbit.instance?.chatWidget) {
+                                const chatWidget = Wabbit.instance.chatWidget;
+                                if (chatWidget.wsClient) {
+                                    emailCaptureWidgetRef.setWebSocketClient(chatWidget.wsClient);
+                                }
+                            }
+                            // Call user's callback
+                            if (userOnChatReady) {
+                                userOnChatReady();
+                            }
+                        },
+                        // Trigger email capture when user sends a message (if enabled by server)
+                        onUserMessage: emailCaptureEnabled
+                            ? () => {
+                                if (emailCaptureWidgetRef) {
+                                    emailCaptureWidgetRef.handleMessage();
+                                }
+                            }
+                            : undefined
                     };
                     const chatWidget = new ChatWidget(chatConfig);
                     chatWidget.init();
@@ -229,49 +304,8 @@
                     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 }) => {
-                    // Check if instance was destroyed during async import
-                    if (!Wabbit.instance) {
-                        console.warn('[Wabbit] Instance was destroyed before email capture widget could initialize');
-                        return;
-                    }
-                    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);
-                });
-            }
+            // Note: Email capture is now automatically initialized from server config
+            // when chat widget is enabled. The config is fetched from /api/email-capture/config/{collectionId}
             // Auto-initialize forms with data-wabbit-form-id (backward compatibility)
             if (Wabbit.instance) {
                 Wabbit.instance.initLegacyForms(config);
@@ -1967,6 +2001,10 @@
             }
             // Send via WebSocket
             this.wsClient.sendMessage(content);
+            // Notify external listeners (for email capture, analytics, etc.)
+            if (this.config.onUserMessage) {
+                this.config.onUserMessage(content);
+            }
         }
         /**
          * Open the chat panel (no-op in inline mode)
@@ -2561,7 +2599,7 @@
     class ApiClient {
         constructor(options) {
             this.baseUrl = options.baseUrl.replace(/\/$/, '');
-            this.apiKey = options.apiKey;
+            this.apiKey = options.apiKey || '';
             this.timeout = options.timeout || 30000;
         }
         /**
@@ -2693,15 +2731,12 @@
             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
+            // Note: apiKey is optional for forms since form endpoints are public
             const apiUrl = config.apiUrl || this.getApiUrlFromScript();
             this.apiClient = new ApiClient({
                 baseUrl: apiUrl,
-                apiKey: config.apiKey,
+                apiKey: config.apiKey, // Optional - forms don't require auth
             });
             // Initialize styles and renderer
             // Pass containerId to FormStyles to generate unique style ID
@@ -3852,6 +3887,107 @@
         getChatPageUrl,
         openChatPage
     };
+    /**
+     * Auto-initialization for forms with data-wabbit-form-id attribute
+     *
+     * This provides backward compatibility with the legacy embed-form.js script.
+     * Forms will auto-initialize without requiring Wabbit.init() to be called.
+     */
+    function autoInitForms() {
+        // Skip if Wabbit.init() was already called
+        if (Wabbit.getInstance()) {
+            return;
+        }
+        // Find all containers with data-wabbit-form-id
+        const containers = document.querySelectorAll('[data-wabbit-form-id]');
+        if (containers.length === 0) {
+            return;
+        }
+        console.log('[Wabbit] Auto-initializing', containers.length, 'form(s)');
+        // Get API URL from script src
+        const getApiUrl = () => {
+            const scriptTag = document.currentScript ||
+                document.querySelector('script[src*="wabbit"]') ||
+                document.querySelector('script[src*="embed"]');
+            if (scriptTag && scriptTag instanceof HTMLScriptElement && scriptTag.src) {
+                try {
+                    return new URL(scriptTag.src).origin;
+                }
+                catch {
+                    // Invalid URL
+                }
+            }
+            return 'https://platform.insourcedata.ai';
+        };
+        const apiUrl = getApiUrl();
+        // Import and initialize each form
+        containers.forEach((container) => {
+            const formId = container.getAttribute('data-wabbit-form-id');
+            if (!formId)
+                return;
+            // Skip if already initialized
+            if (container.__wabbitFormWidget) {
+                return;
+            }
+            // Dynamically import FormWidget to avoid issues
+            Promise.resolve().then(function () { return FormWidget$1; }).then(({ FormWidget }) => {
+                try {
+                    const formWidget = new FormWidget({
+                        enabled: true,
+                        formId: formId,
+                        apiUrl: apiUrl,
+                        theme: 'auto',
+                    });
+                    // Override findContainer to use the specific container element
+                    formWidget.findContainer = () => container;
+                    formWidget.init();
+                    container.__wabbitFormWidget = formWidget;
+                    console.log('[Wabbit] Form auto-initialized:', formId);
+                }
+                catch (error) {
+                    console.error('[Wabbit] Failed to auto-initialize form:', formId, error);
+                }
+            });
+        });
+    }
+    // Run auto-init when DOM is ready
+    if (typeof document !== 'undefined') {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', autoInitForms);
+        }
+        else {
+            // DOM already loaded, run immediately
+            autoInitForms();
+        }
+        // Also watch for dynamically added forms (for SPAs)
+        const formObserver = 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 form container');
+                        autoInitForms();
+                        break;
+                    }
+                }
+            }
+        });
+        // Start observing once DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                formObserver.observe(document.body, { childList: true, subtree: true });
+            });
+        }
+        else {
+            formObserver.observe(document.body, { childList: true, subtree: true });
+        }
+    }
 
     exports.ApiClient = ApiClient;
     exports.ChatBubble = ChatBubble;