@wabbit-dashboard/embed 1.1.1 → 1.1.3

package/dist/wabbit-embed.d.ts

@@ -444,6 +444,7 @@ declare class ChatPanel {
     private messages;
     private isWaitingForResponse;
     private closeButton;
+    private statusIndicator;
     private eventCleanup;
     private streamingMessages;
     private streamingCleanupInterval;
@@ -470,9 +471,11 @@ declare class ChatPanel {
      */
     setMessages(messages: Message[]): void;
     /**
-     * Add system message
+     * Add system message (e.g. welcome or server/guardrail error).
+     * @param content - Message text
+     * @param isError - If true, message is styled as an error (e.g. guardrail/rate limit)
      */
-    addSystemMessage(content: string): void;
+    addSystemMessage(content: string, isError?: boolean): void;
     /**
      * Set waiting for response state
      */
@@ -481,8 +484,14 @@ declare class ChatPanel {
      * Set disabled state
      */
     setDisabled(disabled: boolean): void;
+    /**
+     * Update the connection status indicator
+     */
+    setConnectionStatus(status: ConnectionStatus): void;
     /**
      * Render a single message
+     * @param message - Message to render
+     * @param isSystemError - If true, add error styling (for system role only)
      */
     private renderMessage;
     /**

package/dist/wabbit-embed.esm.js

@@ -1047,6 +1047,7 @@ class ChatPanel {
         this.messages = [];
         this.isWaitingForResponse = false;
         this.closeButton = null;
+        this.statusIndicator = null;
         this.eventCleanup = [];
         this.streamingMessages = new Map();
         this.streamingCleanupInterval = null;
@@ -1182,6 +1183,14 @@ class ChatPanel {
             this.sendButton?.removeEventListener('click', sendClickHandler);
         });
         this.updateSendButtonState();
+        this.statusIndicator = createElement('div', {
+            class: 'wabbit-chat-status-indicator',
+            'data-status': 'connecting',
+            title: 'Connecting...',
+            'aria-label': 'Connection status: connecting',
+            role: 'status'
+        });
+        inputWrapper.appendChild(this.statusIndicator);
         inputWrapper.appendChild(this.inputElement);
         inputWrapper.appendChild(this.sendButton);
         inputArea.appendChild(inputWrapper);
@@ -1207,16 +1216,20 @@ class ChatPanel {
         }
     }
     /**
-     * Add system message
+     * Add system message (e.g. welcome or server/guardrail error).
+     * @param content - Message text
+     * @param isError - If true, message is styled as an error (e.g. guardrail/rate limit)
      */
-    addSystemMessage(content) {
+    addSystemMessage(content, isError) {
         const message = {
             id: `system-${Date.now()}`,
             role: 'system',
             content,
             timestamp: new Date()
         };
-        this.addMessage(message);
+        this.messages.push(message);
+        this.renderMessage(message, isError);
+        this.scrollToBottom();
     }
     /**
      * Set waiting for response state
@@ -1253,14 +1266,34 @@ class ChatPanel {
             this.updateSendButtonState();
         }
     }
+    /**
+     * Update the connection status indicator
+     */
+    setConnectionStatus(status) {
+        if (!this.statusIndicator)
+            return;
+        this.statusIndicator.setAttribute('data-status', status);
+        const labels = {
+            connected: 'Connected',
+            disconnected: 'Disconnected',
+            connecting: 'Connecting...',
+            reconnecting: 'Reconnecting...',
+        };
+        this.statusIndicator.setAttribute('title', labels[status]);
+        this.statusIndicator.setAttribute('aria-label', `Connection status: ${labels[status].toLowerCase()}`);
+    }
     /**
      * Render a single message
+     * @param message - Message to render
+     * @param isSystemError - If true, add error styling (for system role only)
      */
-    renderMessage(message) {
+    renderMessage(message, isSystemError) {
         if (!this.messagesContainer)
             return;
+        const baseClass = `wabbit-chat-message wabbit-chat-message-${message.role}`;
+        const errorClass = message.role === 'system' && isSystemError ? ' wabbit-chat-message-system-error' : '';
         const messageDiv = createElement('div', {
-            class: `wabbit-chat-message wabbit-chat-message-${message.role}`
+            class: baseClass + errorClass
         });
         const bubble = createElement('div', { class: 'wabbit-chat-message-bubble' });
         const content = createElement('div', { class: 'wabbit-chat-message-content' });
@@ -1535,6 +1568,7 @@ class ChatPanel {
             this.inputElement = null;
             this.sendButton = null;
             this.closeButton = null;
+            this.statusIndicator = null;
         }
     }
 }
@@ -1844,6 +1878,15 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
       padding: 8px 12px;
     }
 
+    .wabbit-chat-message-system-error .wabbit-chat-message-bubble {
+      background: rgba(220, 38, 38, 0.1);
+      border: 1px solid rgba(220, 38, 38, 0.4);
+      color: #b91c1c;
+      text-align: left;
+      font-size: 13px;
+      padding: 10px 14px;
+    }
+
     .wabbit-chat-message-content {
       font-size: 14px;
       line-height: 1.5;
@@ -1975,6 +2018,35 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
       height: 20px;
     }
 
+    /* Connection Status Indicator */
+    .wabbit-chat-status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      align-self: center;
+      transition: background-color 0.3s ease;
+    }
+
+    .wabbit-chat-status-indicator[data-status="connected"] {
+      background-color: #22c55e;
+    }
+
+    .wabbit-chat-status-indicator[data-status="disconnected"] {
+      background-color: #ef4444;
+    }
+
+    .wabbit-chat-status-indicator[data-status="connecting"],
+    .wabbit-chat-status-indicator[data-status="reconnecting"] {
+      background-color: #f59e0b;
+      animation: wabbit-status-pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes wabbit-status-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+
     /* Scrollbar */
     .wabbit-chat-messages::-webkit-scrollbar {
       width: 6px;
@@ -2258,38 +2330,27 @@ class ChatWidget {
             }
         };
         this.wsClient.onError = (error) => {
-            console.error('[Wabbit] Chat error:', error);
+            const message = typeof error === 'string' ? error : (error?.message ?? 'An error occurred');
+            console.error('[Wabbit] Chat error:', message);
             if (this.panel) {
-                // Clean up any active streaming messages on error
                 this.panel.cancelAllStreamingMessages();
-                this.panel.addSystemMessage(`Error: ${error}`);
                 this.panel.setWaitingForResponse(false);
             }
         };
         this.wsClient.onStatusChange = (status) => {
             if (this.panel) {
                 this.panel.setDisabled(status !== 'connected');
+                this.panel.setConnectionStatus(status);
             }
         };
         this.wsClient.onDisconnect = () => {
             if (this.panel) {
-                // 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);
-            }
+            console.warn('[Wabbit] Queue overflow:', message);
         };
     }
     /**