@wabbit-dashboard/embed 1.0.15 → 1.0.17

package/dist/wabbit-embed.esm.js

@@ -157,99 +157,41 @@ class Wabbit {
         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 collectionId = chat.collectionId;
+            const userOnChatReady = chat.onChatReady || config.onChatReady;
             // Derive chat service API URL from WebSocket URL
-            // The email capture config endpoint is on the chat service, not the dashboard
             const wsUrl = mergedConfig.wsUrl || chat.wsUrl || 'wss://chat.insourcedata.ai/ws/chat';
             const chatServiceUrl = wsUrl
                 .replace(/^wss:\/\//, 'https://')
                 .replace(/^ws:\/\//, 'http://')
-                .replace(/\/ws\/chat.*$/, ''); // Remove the path, keep just the base URL
-            // Fetch email capture config from chat service (in parallel with chat widget import)
-            const emailCaptureConfigPromise = fetch(`${chatServiceUrl}/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(async ({ ChatWidget }) => {
-                // Check if instance was destroyed during async import (e.g., React StrictMode)
+                .replace(/\/ws\/chat.*$/, '');
+            // Import and initialize ChatWidget immediately (don't wait for email capture config)
+            Promise.resolve().then(function () { return ChatWidget$1; }).then(({ ChatWidget }) => {
                 if (!Wabbit.instance) {
                     console.warn('[Wabbit] Instance was destroyed before chat widget could initialize');
                     return;
                 }
-                // 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,
-                    // 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
-                    // Embedding mode
+                    wsUrl: mergedConfig.wsUrl || chat.wsUrl,
                     mode: chat.mode,
                     container: chat.container,
-                    // Widget mode options
                     position: chat.position,
                     triggerType: chat.triggerType,
                     triggerDelay: chat.triggerDelay,
-                    // Appearance options
                     theme: chat.theme,
                     primaryColor: chat.primaryColor,
                     welcomeMessage: chat.welcomeMessage,
                     placeholder: chat.placeholder,
-                    // Header customization
                     showHeader: chat.showHeader,
                     headerTitle: chat.headerTitle,
-                    // Callbacks
                     onChatReady: () => {
                         // Set WebSocket client on email capture widget when chat is ready
                         if (emailCaptureWidgetRef && Wabbit.instance?.chatWidget) {
@@ -258,24 +200,68 @@ class Wabbit {
                                 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();
-                            }
+                    // Always set onUserMessage - it checks if emailCaptureWidgetRef exists at call time
+                    onUserMessage: () => {
+                        if (emailCaptureWidgetRef) {
+                            emailCaptureWidgetRef.handleMessage();
                         }
-                        : undefined
+                    }
                 };
                 const chatWidget = new ChatWidget(chatConfig);
                 chatWidget.init();
                 Wabbit.instance.chatWidget = chatWidget;
             });
+            // Fetch email capture config from server (in parallel with chat init)
+            fetch(`${chatServiceUrl}/api/email-capture/config/${collectionId}`)
+                .then(res => res.json())
+                .then(async (data) => {
+                if (!data.success || !data.config?.enabled) {
+                    return; // Email capture not enabled
+                }
+                if (!Wabbit.instance) {
+                    return; // Instance was destroyed
+                }
+                const serverConfig = data.config;
+                const { EmailCaptureWidget } = await Promise.resolve().then(function () { return EmailCaptureWidget$1; });
+                if (!Wabbit.instance) {
+                    return;
+                }
+                // Convert server config to widget config
+                const triggerAfterMessages = serverConfig.trigger?.type === 'message_count'
+                    ? serverConfig.trigger.messageCount
+                    : 3;
+                const fields = ['email'];
+                if (serverConfig.fields?.name?.enabled)
+                    fields.push('name');
+                if (serverConfig.fields?.company?.enabled)
+                    fields.push('company');
+                const emailCaptureConfig = {
+                    enabled: true,
+                    triggerAfterMessages,
+                    title: serverConfig.modal?.title,
+                    description: serverConfig.modal?.description,
+                    fields,
+                    onCapture: mergedConfig.emailCapture?.onCapture
+                };
+                const emailCaptureWidget = new EmailCaptureWidget(emailCaptureConfig);
+                emailCaptureWidget.init();
+                Wabbit.instance.emailCaptureWidget = emailCaptureWidget;
+                emailCaptureWidgetRef = emailCaptureWidget;
+                // If chat is already ready, set the WebSocket client now
+                if (Wabbit.instance.chatWidget) {
+                    const chatWidget = Wabbit.instance.chatWidget;
+                    if (chatWidget.wsClient) {
+                        emailCaptureWidget.setWebSocketClient(chatWidget.wsClient);
+                    }
+                }
+            })
+                .catch(err => {
+                console.warn('[Wabbit] Failed to fetch email capture config:', err);
+            });
         }
         if (mergedConfig.forms?.enabled && mergedConfig.forms) {
             // Import FormWidget dynamically to avoid circular dependencies
@@ -981,8 +967,8 @@ class ChatPanel {
         if (this.options.welcomeMessage) {
             this.addSystemMessage(this.options.welcomeMessage);
         }
-        // Ensure scroll to bottom after DOM settles (for initial load and history)
-        setTimeout(() => this.scrollToBottom(), 100);
+        // Ensure scroll to bottom after DOM settles
+        this.scrollToBottom();
         return this.element;
     }
     /**
@@ -1090,8 +1076,7 @@ class ChatPanel {
         if (this.messagesContainer) {
             this.messagesContainer.innerHTML = '';
             messages.forEach((msg) => this.renderMessage(msg));
-            // Use setTimeout to ensure DOM has finished layout before scrolling
-            setTimeout(() => this.scrollToBottom(), 100);
+            this.scrollToBottom();
         }
     }
     /**
@@ -1125,8 +1110,9 @@ class ChatPanel {
           <div class="wabbit-chat-typing-dot"></div>
         `;
                 this.messagesContainer.appendChild(typing);
-                this.scrollToBottom();
             }
+            // Always scroll after changing typing indicator state
+            this.scrollToBottom();
         }
         this.updateSendButtonState();
     }
@@ -1208,12 +1194,38 @@ class ChatPanel {
         }
     }
     /**
-     * Scroll to bottom of messages
+     * Scroll to bottom of messages - forces scroll with multiple attempts
      */
     scrollToBottom() {
-        if (this.messagesContainer) {
-            this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
-        }
+        if (!this.messagesContainer)
+            return;
+        const container = this.messagesContainer;
+        const forceScroll = () => {
+            // Force the container to recognize its scroll height
+            const scrollHeight = container.scrollHeight;
+            const clientHeight = container.clientHeight;
+            // Only scroll if there's content to scroll
+            if (scrollHeight > clientHeight) {
+                container.scrollTop = scrollHeight;
+            }
+            else {
+                // If heights are equal, set to a large value to force bottom
+                container.scrollTop = 999999;
+            }
+        };
+        // Immediate
+        forceScroll();
+        // After next frame
+        requestAnimationFrame(() => {
+            forceScroll();
+            requestAnimationFrame(forceScroll);
+        });
+        // Multiple delayed attempts
+        setTimeout(forceScroll, 10);
+        setTimeout(forceScroll, 50);
+        setTimeout(forceScroll, 100);
+        setTimeout(forceScroll, 200);
+        setTimeout(forceScroll, 500);
     }
     /**
      * Show the panel
@@ -1221,13 +1233,10 @@ class ChatPanel {
     show() {
         if (this.element) {
             this.element.style.display = 'flex';
-            // Focus input and scroll to bottom after a brief delay
-            setTimeout(() => {
-                this.scrollToBottom();
-                if (this.inputElement) {
-                    this.inputElement.focus();
-                }
-            }, 100);
+            this.scrollToBottom();
+            if (this.inputElement) {
+                this.inputElement.focus();
+            }
         }
     }
     /**
@@ -1738,8 +1747,9 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
 
     /* Inline mode messages area fills available space */
     .wabbit-chat-panel-inline .wabbit-chat-messages {
-      flex: 1;
-      min-height: 200px;
+      flex: 1 1 0; /* flex-grow, flex-shrink, flex-basis: 0 for proper sizing */
+      min-height: 0; /* Critical for nested flex scroll to work */
+      overflow-y: auto !important;
     }
 
     /* Full-height variant for inline mode (used in standalone chat pages) */
@@ -3727,7 +3737,6 @@ class EmailCaptureWidget {
         if (this.emailCaptured) {
             return;
         }
-        // Only count user messages
         this.messageCount++;
         const triggerAfter = this.config.triggerAfterMessages || 3;
         if (this.messageCount >= triggerAfter) {