@wabbit-dashboard/embed 1.1.0 → 1.1.2

package/README.md

@@ -127,6 +127,34 @@ Wabbit.init({
 });
 ```
 
+### Session Persistence
+
+Control whether chat sessions persist across browser sessions:
+
+```javascript
+Wabbit.init({
+  apiKey: 'pk_live_xxx',
+  persistSession: true,  // Default: sessions persist (uses localStorage)
+  chat: {
+    enabled: true,
+    collectionId: 'abc123'
+  }
+});
+```
+
+**Options:**
+- `persistSession: true` (default) - Sessions persist across browser close/reopen using **localStorage**. Users can continue conversations after reopening the browser.
+- `persistSession: false` - Sessions are cleared when browser closes using **sessionStorage**. Users start fresh each browser session, but conversations persist during page refreshes.
+
+**Use Cases:**
+- **Persistent (true)**: Customer support, ongoing consultations, learning platforms
+- **Ephemeral (false)**: Sensitive data, temporary assistance, demo sites
+
+**Technical Details:**
+- `true`: Session ID stored in localStorage, survives browser restart
+- `false`: Session ID stored in sessionStorage, cleared on browser close but survives page refresh
+- Message history fetched from server on reconnect (not stored locally)
+
 ## Testing
 
 ### Option 1: Copy Embed Code from Dashboard (Recommended)
@@ -266,6 +294,7 @@ Initialize the Wabbit SDK.
 **Parameters:**
 - `config.apiKey` (string, required): Your Wabbit API key
 - `config.apiUrl` (string, optional): API base URL (default: auto-detected)
+- `config.persistSession` (boolean, optional): Whether to persist sessions across browser sessions (default: `true`)
 - `config.chat` (ChatConfig, optional): Chat widget configuration
 - `config.forms` (FormConfig, optional): Form widget configuration
 - `config.emailCapture` (EmailCaptureConfig, optional): Email capture configuration
@@ -274,6 +303,7 @@ Initialize the Wabbit SDK.
 ```javascript
 Wabbit.init({
   apiKey: 'pk_live_xxx',
+  persistSession: true, // Optional: default is true
   chat: { enabled: true, collectionId: 'abc123' }
 });
 ```

package/dist/wabbit-embed.cjs.js

@@ -120,6 +120,143 @@ function mergeConfig(config) {
     };
 }
 
+/**
+ * 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
  *
@@ -136,6 +273,8 @@ class Wabbit {
         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
@@ -215,7 +354,7 @@ class Wabbit {
                         }
                     }
                 };
-                const chatWidget = new ChatWidget(chatConfig);
+                const chatWidget = new ChatWidget(chatConfig, Wabbit.instance.storage);
                 chatWidget.init();
                 Wabbit.instance.chatWidget = chatWidget;
             });
@@ -538,105 +677,13 @@ class Wabbit {
 }
 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;
@@ -659,6 +706,7 @@ class ChatWebSocketClient {
         this.onMessageEnd = null;
         this.apiKey = apiKey;
         this.wsUrl = wsUrl;
+        this.storage = storage;
         this.sessionId = sessionId || this.getStoredSessionId();
     }
     setStatus(status) {
@@ -727,9 +775,9 @@ class ChatWebSocketClient {
         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');
@@ -855,7 +903,7 @@ class ChatWebSocketClient {
     }
     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 = [];
@@ -868,7 +916,7 @@ class ChatWebSocketClient {
         this.messageQueue = [];
     }
     getStoredSessionId() {
-        return storage.get('session_id') || null;
+        return this.storage.get('session_id') || null;
     }
     /**
      * Get current message queue size
@@ -1003,6 +1051,7 @@ class ChatPanel {
         this.messages = [];
         this.isWaitingForResponse = false;
         this.closeButton = null;
+        this.statusIndicator = null;
         this.eventCleanup = [];
         this.streamingMessages = new Map();
         this.streamingCleanupInterval = null;
@@ -1138,6 +1187,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);
@@ -1209,6 +1266,22 @@ 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
      */
@@ -1238,10 +1311,21 @@ class ChatPanel {
     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;
     }
@@ -1480,6 +1564,7 @@ class ChatPanel {
             this.inputElement = null;
             this.sendButton = null;
             this.closeButton = null;
+            this.statusIndicator = null;
         }
     }
 }
@@ -1794,6 +1879,20 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
       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;
@@ -1906,6 +2005,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;
@@ -2029,7 +2157,7 @@ function adjustColor(color, amount) {
  * 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;
@@ -2039,6 +2167,7 @@ class ChatWidget {
         this.onChatReadyCallback = null;
         this.chatReadyFired = false;
         this.config = config;
+        this.storage = storage;
         this.onChatReadyCallback = config.onChatReady || null;
     }
     /**
@@ -2067,8 +2196,8 @@ class ChatWidget {
         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)
@@ -2190,36 +2319,24 @@ 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);
             }
         };
         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);
         };
     }
     /**