@wabbit-dashboard/embed 1.0.17 → 1.1.0

package/dist/wabbit-embed.umd.js

@@ -644,6 +644,9 @@
             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;
@@ -651,6 +654,11 @@
             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();
@@ -682,6 +690,8 @@
                     this.setStatus('connected');
                     this.reconnectAttempts = 0;
                     console.log('[Wabbit] WebSocket connected');
+                    // Flush any queued messages
+                    this.flushMessageQueue();
                 };
                 this.ws.onmessage = (event) => {
                     try {
@@ -740,7 +750,26 @@
                         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(),
@@ -762,18 +791,27 @@
             }
         }
         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) {
@@ -795,13 +833,51 @@
                 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;
+        }
     }
 
     /**
@@ -930,6 +1006,9 @@
             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;
         }
         /**
@@ -1168,6 +1247,132 @@
             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
          */
@@ -1252,6 +1457,11 @@
             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
@@ -1260,6 +1470,11 @@
             // 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;
@@ -1723,6 +1938,24 @@
       }
     }
 
+    /* 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;
     }
@@ -1737,17 +1970,17 @@
 
     /* 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 */
     }
 
@@ -1930,6 +2163,26 @@
                     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);
@@ -1939,6 +2192,8 @@
             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);
                 }
@@ -1950,10 +2205,24 @@
             };
             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