@wabbit-dashboard/embed 1.0.12 → 1.0.14

package/dist/wabbit-embed.cjs.js

@@ -160,16 +160,71 @@ class Wabbit {
         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,
@@ -192,8 +247,28 @@ class Wabbit {
                     // 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();
@@ -227,49 +302,8 @@ class Wabbit {
                 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);
@@ -1965,6 +1999,10 @@ class ChatWidget {
         }
         // 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)
@@ -2559,7 +2597,7 @@ class FormStyles {
 class ApiClient {
     constructor(options) {
         this.baseUrl = options.baseUrl.replace(/\/$/, '');
-        this.apiKey = options.apiKey;
+        this.apiKey = options.apiKey || '';
         this.timeout = options.timeout || 30000;
     }
     /**
@@ -2691,15 +2729,12 @@ class FormWidget {
         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
@@ -3850,6 +3885,107 @@ const WabbitSDK = {
     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;