@wabbit-dashboard/embed 1.1.0 → 1.1.2

package/dist/wabbit-embed.umd.js

@@ -122,6 +122,143 @@
         };
     }
 
+    /**
+     * localStorage wrapper with type safety
+     */
+    /**
+     * Memory storage implementation (clears on page reload)
+     */
+    class MemoryStorage {
+        constructor() {
+            this.store = new Map();
+        }
+        getItem(key) {
+            return this.store.get(key) ?? null;
+        }
+        setItem(key, value) {
+            this.store.set(key, value);
+        }
+        removeItem(key) {
+            this.store.delete(key);
+        }
+        clear() {
+            this.store.clear();
+        }
+        get length() {
+            return this.store.size;
+        }
+        key(index) {
+            const keys = Array.from(this.store.keys());
+            return keys[index] ?? null;
+        }
+    }
+    /**
+     * Safe storage wrapper
+     */
+    class SafeStorage {
+        constructor(storage = localStorage, prefix = 'wabbit_') {
+            this.storage = storage;
+            this.prefix = prefix;
+        }
+        /**
+         * Get item from storage
+         */
+        get(key) {
+            try {
+                const item = this.storage.getItem(this.prefix + key);
+                if (item === null) {
+                    return null;
+                }
+                return JSON.parse(item);
+            }
+            catch (error) {
+                console.error(`[Wabbit] Failed to get storage item "${key}":`, error);
+                return null;
+            }
+        }
+        /**
+         * Set item in storage
+         */
+        set(key, value) {
+            try {
+                this.storage.setItem(this.prefix + key, JSON.stringify(value));
+                return true;
+            }
+            catch (error) {
+                console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
+                return false;
+            }
+        }
+        /**
+         * Remove item from storage
+         */
+        remove(key) {
+            this.storage.removeItem(this.prefix + key);
+        }
+        /**
+         * Clear all items with prefix
+         */
+        clear() {
+            if (this.storage.length !== undefined && this.storage.key) {
+                const keys = [];
+                for (let i = 0; i < this.storage.length; i++) {
+                    const key = this.storage.key(i);
+                    if (key && key.startsWith(this.prefix)) {
+                        keys.push(key);
+                    }
+                }
+                keys.forEach((key) => this.storage.removeItem(key));
+            }
+            else {
+                // Fallback: try to clear common keys
+                const commonKeys = ['session_id', 'email_capture_dismissed'];
+                commonKeys.forEach((key) => this.remove(key));
+            }
+        }
+    }
+    // Export singleton instance (for backward compatibility)
+    const storage = new SafeStorage();
+    /**
+     * Create a storage instance with the specified backend
+     *
+     * @param persistSession - Whether to persist sessions across browser sessions
+     * @returns SafeStorage instance with appropriate backend
+     */
+    function createStorage(persistSession = true) {
+        let storageBackend;
+        if (persistSession) {
+            // Use localStorage (persists across browser sessions)
+            storageBackend = typeof window !== 'undefined' ? window.localStorage : new MemoryStorage();
+        }
+        else {
+            // Use sessionStorage (clears when browser closes)
+            storageBackend = typeof window !== 'undefined' ? window.sessionStorage : new MemoryStorage();
+        }
+        return new SafeStorage(storageBackend);
+    }
+    /**
+     * Get item from storage (simple string getter)
+     */
+    function getStorageItem(key) {
+        try {
+            return localStorage.getItem('wabbit_' + key);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Set item in storage (simple string setter)
+     */
+    function setStorageItem(key, value) {
+        try {
+            localStorage.setItem('wabbit_' + key, value);
+        }
+        catch (error) {
+            console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
+        }
+    }
+
     /**
      * Main Wabbit SDK class
      *
@@ -138,6 +275,8 @@
             this.formsWidget = null; // FormWidget | null
             this.emailCaptureWidget = null; // EmailCapture | null
             this.config = config;
+            // Create storage instance with appropriate backend based on persistSession
+            this.storage = createStorage(config.persistSession ?? true);
         }
         /**
          * Initialize the Wabbit SDK
@@ -217,7 +356,7 @@
                             }
                         }
                     };
-                    const chatWidget = new ChatWidget(chatConfig);
+                    const chatWidget = new ChatWidget(chatConfig, Wabbit.instance.storage);
                     chatWidget.init();
                     Wabbit.instance.chatWidget = chatWidget;
                 });
@@ -540,105 +679,13 @@
     }
     Wabbit.instance = null;
 
-    /**
-     * localStorage wrapper with type safety
-     */
-    /**
-     * Safe storage wrapper
-     */
-    class SafeStorage {
-        constructor(storage = localStorage, prefix = 'wabbit_') {
-            this.storage = storage;
-            this.prefix = prefix;
-        }
-        /**
-         * Get item from storage
-         */
-        get(key) {
-            try {
-                const item = this.storage.getItem(this.prefix + key);
-                if (item === null) {
-                    return null;
-                }
-                return JSON.parse(item);
-            }
-            catch (error) {
-                console.error(`[Wabbit] Failed to get storage item "${key}":`, error);
-                return null;
-            }
-        }
-        /**
-         * Set item in storage
-         */
-        set(key, value) {
-            try {
-                this.storage.setItem(this.prefix + key, JSON.stringify(value));
-                return true;
-            }
-            catch (error) {
-                console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
-                return false;
-            }
-        }
-        /**
-         * Remove item from storage
-         */
-        remove(key) {
-            this.storage.removeItem(this.prefix + key);
-        }
-        /**
-         * Clear all items with prefix
-         */
-        clear() {
-            if (this.storage.length !== undefined && this.storage.key) {
-                const keys = [];
-                for (let i = 0; i < this.storage.length; i++) {
-                    const key = this.storage.key(i);
-                    if (key && key.startsWith(this.prefix)) {
-                        keys.push(key);
-                    }
-                }
-                keys.forEach((key) => this.storage.removeItem(key));
-            }
-            else {
-                // Fallback: try to clear common keys
-                const commonKeys = ['session_id', 'email_capture_dismissed'];
-                commonKeys.forEach((key) => this.remove(key));
-            }
-        }
-    }
-    // Export singleton instance
-    const storage = new SafeStorage();
-    /**
-     * Get item from storage (simple string getter)
-     */
-    function getStorageItem(key) {
-        try {
-            return localStorage.getItem('wabbit_' + key);
-        }
-        catch {
-            return null;
-        }
-    }
-    /**
-     * Set item in storage (simple string setter)
-     */
-    function setStorageItem(key, value) {
-        try {
-            localStorage.setItem('wabbit_' + key, value);
-        }
-        catch (error) {
-            console.error(`[Wabbit] Failed to set storage item "${key}":`, error);
-        }
-    }
-
     /**
      * WebSocket client for chat functionality
      *
      * Based on demo-website/src/lib/websocket.ts but without React dependencies
      */
     class ChatWebSocketClient {
-        constructor(apiKey, wsUrl, sessionId = null) {
+        constructor(apiKey, wsUrl, sessionId = null, storage) {
             this.ws = null;
             this.status = 'disconnected';
             this.reconnectAttempts = 0;
@@ -661,6 +708,7 @@
             this.onMessageEnd = null;
             this.apiKey = apiKey;
             this.wsUrl = wsUrl;
+            this.storage = storage;
             this.sessionId = sessionId || this.getStoredSessionId();
         }
         setStatus(status) {
@@ -729,9 +777,9 @@
             switch (data.type) {
                 case 'welcome':
                     this.sessionId = data.session_id;
-                    // Store session ID in localStorage
+                    // Store session ID in storage (localStorage or sessionStorage)
                     if (this.sessionId) {
-                        storage.set('session_id', this.sessionId);
+                        this.storage.set('session_id', this.sessionId);
                     }
                     if (this.onWelcome) {
                         this.onWelcome(data.session_id, data.collection_id, data.message || 'Connected');
@@ -857,7 +905,7 @@
         }
         clearSession() {
             this.sessionId = null;
-            storage.remove('session_id');
+            this.storage.remove('session_id');
             // Clear message queue only when user explicitly starts new session
             // Queue should persist across reconnection attempts
             this.messageQueue = [];
@@ -870,7 +918,7 @@
             this.messageQueue = [];
         }
         getStoredSessionId() {
-            return storage.get('session_id') || null;
+            return this.storage.get('session_id') || null;
         }
         /**
          * Get current message queue size
@@ -1005,6 +1053,7 @@
             this.messages = [];
             this.isWaitingForResponse = false;
             this.closeButton = null;
+            this.statusIndicator = null;
             this.eventCleanup = [];
             this.streamingMessages = new Map();
             this.streamingCleanupInterval = null;
@@ -1140,6 +1189,14 @@
                 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);
@@ -1211,6 +1268,22 @@
                 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
          */
@@ -1240,10 +1313,21 @@
         formatMessage(content) {
             // Escape HTML first
             let formatted = escapeHtml(content);
+            // Markdown links [text](url) - must come before URL auto-linking
+            formatted = formatted.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
             // Simple markdown-like formatting
             formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
             formatted = formatted.replace(/\*(.+?)\*/g, '<em>$1</em>');
             formatted = formatted.replace(/`(.+?)`/g, '<code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">$1</code>');
+            // Auto-link URLs (not already inside an href attribute)
+            formatted = formatted.replace(/(?<!href=")(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
+            // Auto-link email addresses
+            formatted = formatted.replace(/(?<!["\/])([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g, '<a href="mailto:$1">$1</a>');
+            // Auto-link phone numbers (international format with +)
+            formatted = formatted.replace(/(?<!["\/])(\+\d[\d\s-]{7,})/g, (_match, phone) => {
+                const cleanPhone = phone.replace(/[\s-]/g, '');
+                return `<a href="tel:${cleanPhone}">${phone}</a>`;
+            });
             formatted = formatted.replace(/\n/g, '<br>');
             return formatted;
         }
@@ -1482,6 +1566,7 @@
                 this.inputElement = null;
                 this.sendButton = null;
                 this.closeButton = null;
+                this.statusIndicator = null;
             }
         }
     }
@@ -1796,6 +1881,20 @@
       line-height: 1.5;
     }
 
+    .wabbit-chat-message-content a {
+      color: var(--wabbit-primary);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .wabbit-chat-message-content a:hover {
+      opacity: 0.8;
+    }
+
+    .wabbit-chat-message-user .wabbit-chat-message-content a {
+      color: inherit;
+    }
+
     /* Typing Indicator */
     .wabbit-chat-typing {
       display: flex;
@@ -1908,6 +2007,35 @@
       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;
@@ -2031,7 +2159,7 @@
      * Chat Widget - Main class that integrates all chat components
      */
     class ChatWidget {
-        constructor(config) {
+        constructor(config, storage) {
             this.wsClient = null;
             this.bubble = null;
             this.panel = null;
@@ -2041,6 +2169,7 @@
             this.onChatReadyCallback = null;
             this.chatReadyFired = false;
             this.config = config;
+            this.storage = storage;
             this.onChatReadyCallback = config.onChatReady || null;
         }
         /**
@@ -2069,8 +2198,8 @@
             this.setupThemeWatcher();
             // Create WebSocket client
             const wsUrl = this.getWebSocketUrl();
-            this.wsClient = new ChatWebSocketClient(this.config.apiKey || '', wsUrl, null // Will use stored session if available
-            );
+            this.wsClient = new ChatWebSocketClient(this.config.apiKey || '', wsUrl, null, // Will use stored session if available
+            this.storage);
             // Set up event handlers
             this.setupWebSocketHandlers();
             // Only create bubble for widget mode (not inline)
@@ -2192,36 +2321,24 @@
             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);
                 }
             };
             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);
             };
         }
         /**