@wabbit-dashboard/embed 1.0.16 → 1.1.0

package/dist/wabbit-embed.cjs.js

@@ -161,99 +161,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) {
@@ -262,24 +204,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
@@ -656,6 +642,9 @@ class ChatWebSocketClient {
         this.reconnectAttempts = 0;
         this.maxReconnectAttempts = 3;
         this.reconnectDelay = 1000;
+        // Message queue for handling messages during disconnection
+        this.messageQueue = [];
+        this.MAX_QUEUE_SIZE = 10;
         // Event handlers
         this.onStatusChange = null;
         this.onWelcome = null;
@@ -663,6 +652,11 @@ class ChatWebSocketClient {
         this.onMessageHistory = null;
         this.onError = null;
         this.onDisconnect = null;
+        this.onQueueOverflow = null;
+        // Streaming event handlers
+        this.onMessageStart = null;
+        this.onMessageChunk = null;
+        this.onMessageEnd = null;
         this.apiKey = apiKey;
         this.wsUrl = wsUrl;
         this.sessionId = sessionId || this.getStoredSessionId();
@@ -694,6 +688,8 @@ class ChatWebSocketClient {
                 this.setStatus('connected');
                 this.reconnectAttempts = 0;
                 console.log('[Wabbit] WebSocket connected');
+                // Flush any queued messages
+                this.flushMessageQueue();
             };
             this.ws.onmessage = (event) => {
                 try {
@@ -752,7 +748,26 @@ class ChatWebSocketClient {
                     this.onMessageHistory(messages);
                 }
                 break;
+            case 'assistant_message_start':
+                // Streaming: Start of assistant message
+                if (this.onMessageStart) {
+                    this.onMessageStart(data.message_id);
+                }
+                break;
+            case 'assistant_message_chunk':
+                // Streaming: Chunk of assistant message
+                if (this.onMessageChunk) {
+                    this.onMessageChunk(data.message_id, data.content);
+                }
+                break;
+            case 'assistant_message_end':
+                // Streaming: End of assistant message
+                if (this.onMessageEnd) {
+                    this.onMessageEnd(data.message_id, data.metadata);
+                }
+                break;
             case 'assistant_message':
+                // Non-streaming: Complete assistant message (backward compatibility)
                 if (this.onMessage) {
                     const message = {
                         id: data.message_id || crypto.randomUUID(),
@@ -774,18 +789,27 @@ class ChatWebSocketClient {
         }
     }
     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));
+        // If connected, send immediately
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+            return;
+        }
+        // If disconnected or reconnecting, queue the message
+        if (this.messageQueue.length >= this.MAX_QUEUE_SIZE) {
+            console.warn('[Wabbit] Message queue full, cannot queue message');
+            if (this.onQueueOverflow) {
+                this.onQueueOverflow('Message queue full. Please wait for reconnection.');
+            }
+            return;
+        }
+        // Add to queue
+        this.messageQueue.push({ content, metadata });
+        console.log(`[Wabbit] Message queued (${this.messageQueue.length}/${this.MAX_QUEUE_SIZE})`);
     }
     disconnect() {
         if (this.ws) {
@@ -807,13 +831,51 @@ class ChatWebSocketClient {
             this.connect();
         }, delay);
     }
+    /**
+     * Flush queued messages after connection is established
+     */
+    flushMessageQueue() {
+        if (this.messageQueue.length === 0) {
+            return;
+        }
+        console.log(`[Wabbit] Flushing ${this.messageQueue.length} queued message(s)`);
+        // Send all queued messages in order
+        const queuedMessages = [...this.messageQueue];
+        this.messageQueue = [];
+        queuedMessages.forEach(({ content, metadata }) => {
+            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                const message = {
+                    type: 'message',
+                    content,
+                    metadata: metadata || {},
+                };
+                this.ws.send(JSON.stringify(message));
+            }
+        });
+    }
     clearSession() {
         this.sessionId = null;
         storage.remove('session_id');
+        // Clear message queue only when user explicitly starts new session
+        // Queue should persist across reconnection attempts
+        this.messageQueue = [];
+    }
+    /**
+     * Clear the message queue
+     * Only call this when explicitly abandoning queued messages
+     */
+    clearMessageQueue() {
+        this.messageQueue = [];
     }
     getStoredSessionId() {
         return storage.get('session_id') || null;
     }
+    /**
+     * Get current message queue size
+     */
+    getQueueSize() {
+        return this.messageQueue.length;
+    }
 }
 
 /**
@@ -942,6 +1004,9 @@ class ChatPanel {
         this.isWaitingForResponse = false;
         this.closeButton = null;
         this.eventCleanup = [];
+        this.streamingMessages = new Map();
+        this.streamingCleanupInterval = null;
+        this.STREAMING_TIMEOUT_MS = 30000; // 30 seconds timeout for stale streams
         this.options = options;
     }
     /**
@@ -1128,8 +1193,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();
     }
@@ -1179,6 +1245,132 @@ class ChatPanel {
         formatted = formatted.replace(/\n/g, '<br>');
         return formatted;
     }
+    /**
+     * Start a streaming assistant message
+     */
+    startStreamingMessage(messageId) {
+        if (!this.messagesContainer)
+            return;
+        // Create message container
+        const messageDiv = createElement('div', {
+            class: 'wabbit-chat-message wabbit-chat-message-assistant wabbit-chat-message-streaming',
+            'data-message-id': messageId,
+        });
+        const bubble = createElement('div', { class: 'wabbit-chat-message-bubble' });
+        const content = createElement('div', { class: 'wabbit-chat-message-content' });
+        // Add streaming cursor
+        content.innerHTML = '<span class="wabbit-chat-cursor">▋</span>';
+        bubble.appendChild(content);
+        messageDiv.appendChild(bubble);
+        this.messagesContainer.appendChild(messageDiv);
+        // Store reference with timestamp for timeout tracking
+        this.streamingMessages.set(messageId, {
+            element: messageDiv,
+            content: '',
+            startTime: Date.now()
+        });
+        // Start cleanup interval if not already running
+        if (!this.streamingCleanupInterval) {
+            this.streamingCleanupInterval = window.setInterval(() => {
+                this.cleanupStaleStreamingMessages();
+            }, 5000); // Check every 5 seconds
+        }
+        this.scrollToBottom();
+    }
+    /**
+     * Append chunk to streaming message
+     */
+    appendToStreamingMessage(messageId, chunk) {
+        const streaming = this.streamingMessages.get(messageId);
+        if (!streaming) {
+            console.warn('[ChatPanel] No streaming message found for ID:', messageId);
+            return;
+        }
+        // Append to content
+        streaming.content += chunk;
+        // Update DOM
+        const contentDiv = streaming.element.querySelector('.wabbit-chat-message-content');
+        if (contentDiv) {
+            // Format the content and add cursor
+            contentDiv.innerHTML = this.formatMessage(streaming.content) + '<span class="wabbit-chat-cursor">▋</span>';
+        }
+        this.scrollToBottom();
+    }
+    /**
+     * Finish streaming message
+     */
+    finishStreamingMessage(messageId, metadata) {
+        const streaming = this.streamingMessages.get(messageId);
+        if (!streaming) {
+            // Don't warn - this is expected if cleanup already removed it or on error
+            return;
+        }
+        // Remove streaming class and cursor
+        streaming.element.classList.remove('wabbit-chat-message-streaming');
+        const contentDiv = streaming.element.querySelector('.wabbit-chat-message-content');
+        if (contentDiv) {
+            // Remove cursor, keep formatted content
+            contentDiv.innerHTML = this.formatMessage(streaming.content);
+        }
+        // Add to messages array
+        const message = {
+            id: messageId,
+            role: 'assistant',
+            content: streaming.content,
+            timestamp: new Date(),
+            metadata,
+        };
+        this.messages.push(message);
+        // Clean up
+        this.streamingMessages.delete(messageId);
+        this.scrollToBottom();
+    }
+    /**
+     * Cancel a streaming message (e.g., on error)
+     * Cleans up the streaming state without adding to message history
+     */
+    cancelStreamingMessage(messageId) {
+        const streaming = this.streamingMessages.get(messageId);
+        if (!streaming) {
+            return;
+        }
+        // Remove the streaming message element from DOM
+        streaming.element.remove();
+        // Clean up from map
+        this.streamingMessages.delete(messageId);
+    }
+    /**
+     * Cancel all active streaming messages
+     * Useful when connection drops or on error
+     */
+    cancelAllStreamingMessages() {
+        this.streamingMessages.forEach((streaming) => {
+            streaming.element.remove();
+        });
+        this.streamingMessages.clear();
+    }
+    /**
+     * Cleanup stale streaming messages that have exceeded timeout
+     * Runs periodically to prevent memory leaks from abandoned streams
+     */
+    cleanupStaleStreamingMessages() {
+        const now = Date.now();
+        const staleIds = [];
+        this.streamingMessages.forEach((streaming, messageId) => {
+            if (now - streaming.startTime > this.STREAMING_TIMEOUT_MS) {
+                console.warn('[ChatPanel] Cleaning up stale streaming message:', messageId);
+                streaming.element.remove();
+                staleIds.push(messageId);
+            }
+        });
+        // Remove stale entries from map
+        staleIds.forEach(id => this.streamingMessages.delete(id));
+        // Stop cleanup interval if no more streaming messages
+        if (this.streamingMessages.size === 0 && this.streamingCleanupInterval) {
+            clearInterval(this.streamingCleanupInterval);
+            this.streamingCleanupInterval = null;
+        }
+    }
     /**
      * Handle send message
      */
@@ -1211,29 +1403,38 @@ class ChatPanel {
         }
     }
     /**
-     * Scroll to bottom of messages - uses multiple techniques to ensure it works
+     * Scroll to bottom of messages - forces scroll with multiple attempts
      */
     scrollToBottom() {
         if (!this.messagesContainer)
             return;
         const container = this.messagesContainer;
-        // Immediate scroll
-        container.scrollTop = container.scrollHeight;
-        // Use requestAnimationFrame to scroll after next paint
+        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(() => {
-            container.scrollTop = container.scrollHeight;
-            // And again after another frame to be extra sure
-            requestAnimationFrame(() => {
-                container.scrollTop = container.scrollHeight;
-            });
+            forceScroll();
+            requestAnimationFrame(forceScroll);
         });
-        // Also use setTimeout as a fallback for slower renders
-        setTimeout(() => {
-            container.scrollTop = container.scrollHeight;
-        }, 50);
-        setTimeout(() => {
-            container.scrollTop = container.scrollHeight;
-        }, 150);
+        // Multiple delayed attempts
+        setTimeout(forceScroll, 10);
+        setTimeout(forceScroll, 50);
+        setTimeout(forceScroll, 100);
+        setTimeout(forceScroll, 200);
+        setTimeout(forceScroll, 500);
     }
     /**
      * Show the panel
@@ -1254,6 +1455,11 @@ class ChatPanel {
         if (this.element) {
             this.element.style.display = 'none';
         }
+        // Stop streaming cleanup interval when hidden to prevent memory leaks
+        if (this.streamingCleanupInterval) {
+            clearInterval(this.streamingCleanupInterval);
+            this.streamingCleanupInterval = null;
+        }
     }
     /**
      * Remove the panel from DOM and cleanup event listeners
@@ -1262,6 +1468,11 @@ class ChatPanel {
         // Run all event cleanup functions
         this.eventCleanup.forEach((cleanup) => cleanup());
         this.eventCleanup = [];
+        // Clear streaming cleanup interval
+        if (this.streamingCleanupInterval) {
+            clearInterval(this.streamingCleanupInterval);
+            this.streamingCleanupInterval = null;
+        }
         if (this.element) {
             this.element.remove();
             this.element = null;
@@ -1725,6 +1936,24 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
       }
     }
 
+    /* Streaming Cursor */
+    .wabbit-chat-cursor {
+      display: inline-block;
+      color: var(--wabbit-primary);
+      font-weight: bold;
+      animation: wabbit-cursor-blink 1s infinite;
+      margin-left: 2px;
+    }
+
+    @keyframes wabbit-cursor-blink {
+      0%, 50% {
+        opacity: 1;
+      }
+      51%, 100% {
+        opacity: 0;
+      }
+    }
+
     .wabbit-chat-panel {
       animation: wabbit-fade-in 0.3s ease-out;
     }
@@ -1739,24 +1968,25 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
 
     /* Inline Chat Panel - renders inside container instead of fixed position */
     .wabbit-chat-panel.wabbit-chat-panel-inline {
-      position: relative !important;
+      position: absolute !important;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       width: 100%;
       height: 100%;
-      min-height: 400px;
       max-height: none;
       max-width: none;
-      bottom: auto !important;
-      right: auto !important;
-      left: auto !important;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      border-radius: 0;
+      box-shadow: none;
       animation: none; /* Disable slide-in animation for inline */
     }
 
     /* 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) */
@@ -1931,6 +2161,26 @@ class ChatWidget {
                 this.panel.setMessages(messages);
             }
         };
+        // Streaming message handlers
+        this.wsClient.onMessageStart = (messageId) => {
+            console.log('[Wabbit] Streaming message started:', messageId);
+            if (this.panel) {
+                this.panel.startStreamingMessage(messageId);
+            }
+        };
+        this.wsClient.onMessageChunk = (messageId, chunk) => {
+            if (this.panel) {
+                this.panel.appendToStreamingMessage(messageId, chunk);
+            }
+        };
+        this.wsClient.onMessageEnd = (messageId, metadata) => {
+            console.log('[Wabbit] Streaming message ended:', messageId);
+            if (this.panel) {
+                this.panel.finishStreamingMessage(messageId, metadata);
+                this.panel.setWaitingForResponse(false);
+            }
+        };
+        // Non-streaming message handler (backward compatibility)
         this.wsClient.onMessage = (message) => {
             if (this.panel) {
                 this.panel.addMessage(message);
@@ -1940,6 +2190,8 @@ class ChatWidget {
         this.wsClient.onError = (error) => {
             console.error('[Wabbit] Chat error:', error);
             if (this.panel) {
+                // Clean up any active streaming messages on error
+                this.panel.cancelAllStreamingMessages();
                 this.panel.addSystemMessage(`Error: ${error}`);
                 this.panel.setWaitingForResponse(false);
             }
@@ -1951,10 +2203,24 @@ class ChatWidget {
         };
         this.wsClient.onDisconnect = () => {
             if (this.panel) {
-                this.panel.addSystemMessage('Disconnected from chat service');
+                // Clean up any active streaming messages on disconnect
+                this.panel.cancelAllStreamingMessages();
+                // Check if there are queued messages
+                const queueSize = this.wsClient.getQueueSize();
+                if (queueSize > 0) {
+                    this.panel.addSystemMessage(`Disconnected from chat service. ${queueSize} message(s) will be sent when reconnected.`);
+                }
+                else {
+                    this.panel.addSystemMessage('Disconnected from chat service');
+                }
                 this.panel.setDisabled(true);
             }
         };
+        this.wsClient.onQueueOverflow = (message) => {
+            if (this.panel) {
+                this.panel.addSystemMessage(message);
+            }
+        };
     }
     /**
      * Handle trigger type configuration
@@ -3744,7 +4010,6 @@ class EmailCaptureWidget {
         if (this.emailCaptured) {
             return;
         }
-        // Only count user messages
         this.messageCount++;
         const triggerAfter = this.config.triggerAfterMessages || 3;
         if (this.messageCount >= triggerAfter) {