@wabbit-dashboard/embed 1.0.10 → 1.0.12

package/README.md

@@ -33,12 +33,14 @@ import { Wabbit } from '@wabbit-dashboard/embed';
 
 ### Using CDN
 
-**Production:**
+**Production (deployed website):**
 ```html
 <script src="https://unpkg.com/@wabbit-dashboard/embed@1/dist/wabbit-embed.umd.min.js"></script>
 <script>
   Wabbit.init({
     apiKey: 'pk_live_xxx',
+    apiUrl: 'https://platform.insourcedata.ai',
+    wsUrl: 'wss://chat.insourcedata.ai/ws/chat',
     chat: {
       enabled: true,
       collectionId: 'abc123',
@@ -48,7 +50,9 @@ import { Wabbit } from '@wabbit-dashboard/embed';
 </script>
 ```
 
-**Local Development:**
+> **Note**: The `apiUrl` and `wsUrl` are required when your website runs on localhost but connects to production services. For fully deployed production websites, these can be omitted as the SDK auto-detects the correct URLs.
+
+**Local Development (local services):**
 ```html
 <script src="http://localhost:3000/sdk/wabbit-embed.umd.js"></script>
 <script>

package/dist/wabbit-embed.cjs.js

@@ -23,6 +23,10 @@ function validateConfig(config) {
         if (!config.chat.collectionId) {
             throw new Error('[Wabbit] collectionId is required when chat is enabled');
         }
+        // Validate inline mode requires a container
+        if (config.chat.mode === 'inline' && !config.chat.container) {
+            throw new Error('[Wabbit] container is required when chat mode is "inline"');
+        }
     }
     // Validate forms config if enabled
     if (config.forms?.enabled) {
@@ -90,11 +94,14 @@ function mergeConfig(config) {
         chat: config.chat
             ? {
                 ...config.chat,
+                mode: config.chat.mode || 'widget',
                 position: config.chat.position || 'bottom-right',
                 triggerType: config.chat.triggerType || 'button',
                 theme: config.chat.theme || 'auto',
                 primaryColor: config.chat.primaryColor || '#6366f1',
-                placeholder: config.chat.placeholder || 'Type your message...'
+                placeholder: config.chat.placeholder || 'Type your message...',
+                showHeader: config.chat.showHeader ?? true,
+                headerTitle: config.chat.headerTitle || 'AI Assistant'
             }
             : undefined,
         forms: config.forms
@@ -157,6 +164,11 @@ class Wabbit {
         if (mergedConfig.chat?.enabled && mergedConfig.chat) {
             // Import ChatWidget dynamically to avoid circular dependencies
             Promise.resolve().then(function () { return ChatWidget$1; }).then(({ ChatWidget }) => {
+                // Check if instance was destroyed during async import (e.g., React StrictMode)
+                if (!Wabbit.instance) {
+                    console.warn('[Wabbit] Instance was destroyed before chat widget could initialize');
+                    return;
+                }
                 const chat = mergedConfig.chat;
                 const chatConfig = {
                     enabled: chat.enabled,
@@ -165,13 +177,23 @@ class Wabbit {
                     apiKey: chat.apiKey || mergedConfig.apiKey,
                     apiUrl: chat.apiUrl || mergedConfig.apiUrl,
                     wsUrl: mergedConfig.wsUrl || chat.wsUrl, // Use global wsUrl or chat-specific wsUrl
+                    // Embedding mode
+                    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
+                    placeholder: chat.placeholder,
+                    // Header customization
+                    showHeader: chat.showHeader,
+                    headerTitle: chat.headerTitle,
+                    // Callbacks - prefer chat-specific, fallback to global
+                    onChatReady: chat.onChatReady || config.onChatReady
                 };
                 const chatWidget = new ChatWidget(chatConfig);
                 chatWidget.init();
@@ -181,6 +203,11 @@ class Wabbit {
         if (mergedConfig.forms?.enabled && mergedConfig.forms) {
             // Import FormWidget dynamically to avoid circular dependencies
             Promise.resolve().then(function () { return FormWidget$1; }).then(({ FormWidget }) => {
+                // Check if instance was destroyed during async import
+                if (!Wabbit.instance) {
+                    console.warn('[Wabbit] Instance was destroyed before form widget could initialize');
+                    return;
+                }
                 const forms = mergedConfig.forms;
                 const formConfig = {
                     enabled: forms.enabled,
@@ -205,6 +232,11 @@ class Wabbit {
         if (mergedConfig.emailCapture?.enabled) {
             const emailCapture = mergedConfig.emailCapture;
             Promise.resolve().then(function () { return EmailCaptureWidget$1; }).then(({ EmailCaptureWidget }) => {
+                // Check if instance was destroyed during async import
+                if (!Wabbit.instance) {
+                    console.warn('[Wabbit] Instance was destroyed before email capture widget could initialize');
+                    return;
+                }
                 const emailCaptureConfig = {
                     enabled: emailCapture.enabled,
                     triggerAfterMessages: emailCapture.triggerAfterMessages,
@@ -219,7 +251,7 @@ class Wabbit {
                 // Connect to chat widget after it's initialized
                 // Use a small delay to ensure chat widget is ready
                 setTimeout(() => {
-                    if (Wabbit.instance.chatWidget) {
+                    if (Wabbit.instance?.chatWidget) {
                         const chatWidget = Wabbit.instance.chatWidget;
                         // Set WebSocket client
                         if (chatWidget.wsClient) {
@@ -239,7 +271,9 @@ class Wabbit {
             });
         }
         // Auto-initialize forms with data-wabbit-form-id (backward compatibility)
-        Wabbit.instance.initLegacyForms(config);
+        if (Wabbit.instance) {
+            Wabbit.instance.initLegacyForms(config);
+        }
         // Call onReady callback if provided
         if (config.onReady) {
             // Wait for DOM to be ready
@@ -293,6 +327,60 @@ class Wabbit {
             Wabbit.instance = null;
         }
     }
+    /**
+     * Get the URL for a dedicated chat page
+     *
+     * @param collectionId - The collection ID
+     * @param options - Optional parameters
+     * @returns Full URL to the chat page
+     *
+     * @example
+     * ```typescript
+     * const url = Wabbit.getChatPageUrl('abc123', {
+     *   initialMessage: 'How do I get started?',
+     *   theme: 'dark'
+     * });
+     * // Returns: https://platform.insourcedata.ai/c/abc123?q=How%20do%20I%20get%20started%3F&theme=dark
+     * ```
+     */
+    static getChatPageUrl(collectionId, options) {
+        // Determine base URL
+        const baseUrl = options?.baseUrl ||
+            (typeof window !== 'undefined' && window.WABBIT_BASE_URL) ||
+            (typeof window !== 'undefined' &&
+                (window.location.hostname === 'localhost' ||
+                    window.location.hostname === '127.0.0.1')
+                ? 'http://localhost:3000'
+                : 'https://platform.insourcedata.ai');
+        const url = new URL(`/c/${collectionId}`, baseUrl);
+        // Add query parameters
+        if (options?.initialMessage) {
+            url.searchParams.set('q', options.initialMessage);
+        }
+        if (options?.theme && options.theme !== 'auto') {
+            url.searchParams.set('theme', options.theme);
+        }
+        if (options?.primaryColor) {
+            url.searchParams.set('color', options.primaryColor.replace('#', ''));
+        }
+        return url.toString();
+    }
+    /**
+     * Open chat in a new tab/window
+     *
+     * @param collectionId - The collection ID
+     * @param options - Optional parameters (same as getChatPageUrl)
+     *
+     * @example
+     * ```typescript
+     * // Open chat page with initial message
+     * Wabbit.openChatPage('abc123', { initialMessage: 'Hello!' });
+     * ```
+     */
+    static openChatPage(collectionId, options) {
+        const url = Wabbit.getChatPageUrl(collectionId, options);
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
     /**
      * Get current configuration
      */
@@ -812,6 +900,8 @@ class ChatPanel {
         this.sendButton = null;
         this.messages = [];
         this.isWaitingForResponse = false;
+        this.closeButton = null;
+        this.eventCleanup = [];
         this.options = options;
     }
     /**
@@ -821,36 +911,83 @@ class ChatPanel {
         if (this.element) {
             return this.element;
         }
-        // Main panel
+        const isInline = this.options.mode === 'inline';
+        // Main panel - use different class for inline mode
         this.element = createElement('div', {
-            class: `wabbit-chat-panel ${this.options.position}`
+            class: isInline
+                ? 'wabbit-chat-panel wabbit-chat-panel-inline'
+                : `wabbit-chat-panel ${this.options.position}`
         });
-        // Header
+        // Header (conditionally shown based on showHeader option, default: true)
+        if (this.options.showHeader !== false) {
+            const header = this.createHeader(isInline);
+            this.element.appendChild(header);
+        }
+        // Messages area
+        this.messagesContainer = createElement('div', { class: 'wabbit-chat-messages' });
+        // Input area
+        const inputArea = this.createInputArea();
+        // Assemble panel
+        this.element.appendChild(this.messagesContainer);
+        this.element.appendChild(inputArea);
+        // Append to container (inline) or document.body (widget)
+        if (isInline && this.options.container) {
+            this.options.container.appendChild(this.element);
+            // In inline mode, always visible
+            this.element.style.display = 'flex';
+        }
+        else {
+            document.body.appendChild(this.element);
+            // In widget mode, initially hidden until opened
+            this.element.style.display = 'none';
+        }
+        // Show welcome message if provided
+        if (this.options.welcomeMessage) {
+            this.addSystemMessage(this.options.welcomeMessage);
+        }
+        // Ensure scroll to bottom after DOM settles (for initial load and history)
+        setTimeout(() => this.scrollToBottom(), 100);
+        return this.element;
+    }
+    /**
+     * Create the header element
+     */
+    createHeader(isInline) {
         const header = createElement('div', { class: 'wabbit-chat-panel-header' });
         const headerTitle = createElement('div', { class: 'wabbit-chat-panel-header-title' });
         const headerIcon = createElement('div', { class: 'wabbit-chat-panel-header-icon' });
         headerIcon.textContent = 'AI';
         const headerText = createElement('div', { class: 'wabbit-chat-panel-header-text' });
         const headerH3 = createElement('h3');
-        headerH3.textContent = 'AI Assistant';
+        headerH3.textContent = this.options.headerTitle || 'AI Assistant';
         const headerP = createElement('p');
         headerP.textContent = 'Powered by Wabbit';
         headerText.appendChild(headerH3);
         headerText.appendChild(headerP);
         headerTitle.appendChild(headerIcon);
         headerTitle.appendChild(headerText);
-        const closeButton = createElement('button', {
-            class: 'wabbit-chat-panel-close',
-            'aria-label': 'Close chat',
-            type: 'button'
-        });
-        closeButton.innerHTML = '×';
-        closeButton.addEventListener('click', this.options.onClose);
         header.appendChild(headerTitle);
-        header.appendChild(closeButton);
-        // Messages area
-        this.messagesContainer = createElement('div', { class: 'wabbit-chat-messages' });
-        // Input area
+        // Only add close button for widget mode (not inline)
+        if (!isInline) {
+            this.closeButton = createElement('button', {
+                class: 'wabbit-chat-panel-close',
+                'aria-label': 'Close chat',
+                type: 'button'
+            });
+            this.closeButton.innerHTML = '×';
+            const closeHandler = this.options.onClose;
+            this.closeButton.addEventListener('click', closeHandler);
+            this.eventCleanup.push(() => {
+                this.closeButton?.removeEventListener('click', closeHandler);
+            });
+            header.appendChild(this.closeButton);
+        }
+        return header;
+    }
+    /**
+     * Create the input area element
+     */
+    createInputArea() {
         const inputArea = createElement('div', { class: 'wabbit-chat-input-area' });
         const inputWrapper = createElement('div', { class: 'wabbit-chat-input-wrapper' });
         this.inputElement = document.createElement('textarea');
@@ -858,17 +995,26 @@ class ChatPanel {
         this.inputElement.placeholder = this.options.placeholder || 'Type your message...';
         this.inputElement.rows = 1;
         this.inputElement.disabled = this.options.disabled || false;
-        // Auto-resize textarea
-        this.inputElement.addEventListener('input', () => {
+        // Auto-resize textarea and update send button state on input
+        const inputHandler = () => {
             this.inputElement.style.height = 'auto';
             this.inputElement.style.height = `${Math.min(this.inputElement.scrollHeight, 120)}px`;
+            this.updateSendButtonState();
+        };
+        this.inputElement.addEventListener('input', inputHandler);
+        this.eventCleanup.push(() => {
+            this.inputElement?.removeEventListener('input', inputHandler);
         });
         // Send on Enter (Shift+Enter for new line)
-        this.inputElement.addEventListener('keydown', (e) => {
+        const keydownHandler = (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 this.handleSend();
             }
+        };
+        this.inputElement.addEventListener('keydown', keydownHandler);
+        this.eventCleanup.push(() => {
+            this.inputElement?.removeEventListener('keydown', keydownHandler);
         });
         this.sendButton = createElement('button', {
             class: 'wabbit-chat-send-button',
@@ -881,23 +1027,16 @@ class ChatPanel {
         <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
       </svg>
     `;
-        this.sendButton.addEventListener('click', () => this.handleSend());
+        const sendClickHandler = () => this.handleSend();
+        this.sendButton.addEventListener('click', sendClickHandler);
+        this.eventCleanup.push(() => {
+            this.sendButton?.removeEventListener('click', sendClickHandler);
+        });
         this.updateSendButtonState();
         inputWrapper.appendChild(this.inputElement);
         inputWrapper.appendChild(this.sendButton);
         inputArea.appendChild(inputWrapper);
-        // Assemble panel
-        this.element.appendChild(header);
-        this.element.appendChild(this.messagesContainer);
-        this.element.appendChild(inputArea);
-        document.body.appendChild(this.element);
-        // Initially hide the panel (it will be shown when opened)
-        this.element.style.display = 'none';
-        // Show welcome message if provided
-        if (this.options.welcomeMessage) {
-            this.addSystemMessage(this.options.welcomeMessage);
-        }
-        return this.element;
+        return inputArea;
     }
     /**
      * Add a message to the panel
@@ -1020,7 +1159,12 @@ class ChatPanel {
             return;
         const hasText = this.inputElement.value.trim().length > 0;
         const disabled = this.options.disabled || this.isWaitingForResponse || !hasText;
-        this.sendButton.setAttribute('disabled', disabled ? 'true' : 'false');
+        if (disabled) {
+            this.sendButton.setAttribute('disabled', 'true');
+        }
+        else {
+            this.sendButton.removeAttribute('disabled');
+        }
         if (this.sendButton instanceof HTMLButtonElement) {
             this.sendButton.disabled = disabled;
         }
@@ -1039,8 +1183,9 @@ class ChatPanel {
     show() {
         if (this.element) {
             this.element.style.display = 'flex';
-            // Focus input after a brief delay
+            // Focus input and scroll to bottom after a brief delay
             setTimeout(() => {
+                this.scrollToBottom();
                 if (this.inputElement) {
                     this.inputElement.focus();
                 }
@@ -1056,15 +1201,19 @@ class ChatPanel {
         }
     }
     /**
-     * Remove the panel from DOM
+     * Remove the panel from DOM and cleanup event listeners
      */
     destroy() {
+        // Run all event cleanup functions
+        this.eventCleanup.forEach((cleanup) => cleanup());
+        this.eventCleanup = [];
         if (this.element) {
             this.element.remove();
             this.element = null;
             this.messagesContainer = null;
             this.inputElement = null;
             this.sendButton = null;
+            this.closeButton = null;
         }
     }
 }
@@ -1528,6 +1677,47 @@ function injectChatStyles(primaryColor = '#6366f1', theme) {
     .wabbit-chat-message {
       animation: wabbit-fade-in 0.2s ease-out;
     }
+
+    /* ========================================
+     * INLINE MODE STYLES
+     * ======================================== */
+
+    /* Inline Chat Panel - renders inside container instead of fixed position */
+    .wabbit-chat-panel.wabbit-chat-panel-inline {
+      position: relative !important;
+      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);
+      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;
+    }
+
+    /* Full-height variant for inline mode (used in standalone chat pages) */
+    .wabbit-chat-panel-inline.wabbit-chat-panel-fullheight {
+      height: 100vh;
+      max-height: 100vh;
+      border-radius: 0;
+    }
+
+    /* Mobile responsive for inline mode */
+    @media (max-width: 480px) {
+      .wabbit-chat-panel.wabbit-chat-panel-inline {
+        border-radius: 0;
+        min-height: 300px;
+      }
+    }
   `;
     const style = document.createElement('style');
     style.id = styleId;
@@ -1561,7 +1751,10 @@ class ChatWidget {
         this.isOpen = false;
         this.cleanup = [];
         this.themeCleanup = null;
+        this.onChatReadyCallback = null;
+        this.chatReadyFired = false;
         this.config = config;
+        this.onChatReadyCallback = config.onChatReady || null;
     }
     /**
      * Initialize the chat widget
@@ -1573,6 +1766,16 @@ class ChatWidget {
                 resolve();
             });
         });
+        const isInlineMode = this.config.mode === 'inline';
+        // Resolve container for inline mode
+        let containerElement = null;
+        if (isInlineMode) {
+            containerElement = this.resolveContainer();
+            if (!containerElement) {
+                console.error(`[Wabbit] Container not found: ${this.config.container}`);
+                return;
+            }
+        }
         // Inject styles with theme configuration
         injectChatStyles(this.config.primaryColor || '#6366f1', this.config.theme);
         // Setup theme watcher if theme is 'auto'
@@ -1583,37 +1786,63 @@ class ChatWidget {
         );
         // Set up event handlers
         this.setupWebSocketHandlers();
-        // Create bubble
-        this.bubble = new ChatBubble({
-            position: this.config.position || 'bottom-right',
-            onClick: () => this.toggle()
-        });
-        // Create panel
+        // Only create bubble for widget mode (not inline)
+        if (!isInlineMode) {
+            this.bubble = new ChatBubble({
+                position: this.config.position || 'bottom-right',
+                onClick: () => this.toggle()
+            });
+        }
+        // Create panel with mode-specific options
         this.panel = new ChatPanel({
             position: this.config.position || 'bottom-right',
             welcomeMessage: this.config.welcomeMessage,
             placeholder: this.config.placeholder,
             onSendMessage: (content) => this.handleSendMessage(content),
             onClose: () => this.close(),
-            disabled: true
+            disabled: true,
+            mode: this.config.mode || 'widget',
+            container: containerElement || undefined,
+            showHeader: this.config.showHeader,
+            headerTitle: this.config.headerTitle
         });
         // Render components
-        this.bubble.render();
+        if (this.bubble) {
+            this.bubble.render();
+        }
         this.panel.render();
-        // Ensure initial state: panel hidden, bubble visible
-        // This prevents state mismatch where panel might be visible but isOpen is false
-        if (this.panel) {
-            this.panel.hide();
+        // Set initial state based on mode
+        if (isInlineMode) {
+            // Inline mode: always visible, mark as open
+            this.isOpen = true;
         }
-        if (this.bubble) {
-            this.bubble.show();
+        else {
+            // Widget mode: panel hidden, bubble visible
+            if (this.panel) {
+                this.panel.hide();
+            }
+            if (this.bubble) {
+                this.bubble.show();
+            }
+            this.isOpen = false;
+            // Handle trigger types (only for widget mode)
+            this.handleTriggerType();
         }
-        this.isOpen = false; // Ensure state is consistent
-        // Handle trigger types
-        this.handleTriggerType();
         // Connect WebSocket
         await this.wsClient.connect();
     }
+    /**
+     * Resolve container element for inline mode
+     */
+    resolveContainer() {
+        if (!this.config.container)
+            return null;
+        // Try as ID first (with or without # prefix), then as CSS selector
+        const selector = this.config.container;
+        const idWithoutHash = selector.startsWith('#') ? selector.slice(1) : selector;
+        return document.getElementById(idWithoutHash) ||
+            document.querySelector(selector);
+    }
     /**
      * Setup WebSocket event handlers
      */
@@ -1628,6 +1857,18 @@ class ChatWidget {
                     this.panel.addSystemMessage(message);
                 }
             }
+            // Fire onChatReady callback once when chat is ready
+            // Use requestAnimationFrame to ensure the panel DOM is fully painted
+            // before the callback runs (important for sending initial messages)
+            if (!this.chatReadyFired && this.onChatReadyCallback) {
+                this.chatReadyFired = true;
+                requestAnimationFrame(() => {
+                    console.log('[Wabbit] Chat ready, firing onChatReady callback');
+                    if (this.onChatReadyCallback) {
+                        this.onChatReadyCallback();
+                    }
+                });
+            }
         };
         this.wsClient.onMessageHistory = (messages) => {
             console.log('[Wabbit] Loaded message history:', messages.length);
@@ -1726,9 +1967,12 @@ class ChatWidget {
         this.wsClient.sendMessage(content);
     }
     /**
-     * Open the chat panel
+     * Open the chat panel (no-op in inline mode)
      */
     open() {
+        // Inline mode is always open
+        if (this.config.mode === 'inline')
+            return;
         if (this.isOpen)
             return;
         this.isOpen = true;
@@ -1740,9 +1984,12 @@ class ChatWidget {
         }
     }
     /**
-     * Close the chat panel
+     * Close the chat panel (no-op in inline mode)
      */
     close() {
+        // Inline mode cannot be closed
+        if (this.config.mode === 'inline')
+            return;
         if (!this.isOpen)
             return;
         this.isOpen = false;
@@ -1754,9 +2001,12 @@ class ChatWidget {
         }
     }
     /**
-     * Toggle chat panel
+     * Toggle chat panel (no-op in inline mode)
      */
     toggle() {
+        // Inline mode cannot be toggled
+        if (this.config.mode === 'inline')
+            return;
         if (this.isOpen) {
             this.close();
         }
@@ -3562,12 +3812,43 @@ function getInstance() {
 function destroy() {
     return Wabbit.destroy();
 }
+/**
+ * Get the URL for a dedicated chat page
+ *
+ * @param collectionId - The collection ID
+ * @param options - Optional parameters
+ * @returns Full URL to the chat page
+ *
+ * @example
+ * ```typescript
+ * const url = Wabbit.getChatPageUrl('abc123', { initialMessage: 'Hello!' });
+ * ```
+ */
+function getChatPageUrl(collectionId, options) {
+    return Wabbit.getChatPageUrl(collectionId, options);
+}
+/**
+ * Open chat in a new tab/window
+ *
+ * @param collectionId - The collection ID
+ * @param options - Optional parameters
+ *
+ * @example
+ * ```typescript
+ * Wabbit.openChatPage('abc123', { initialMessage: 'Hello!' });
+ * ```
+ */
+function openChatPage(collectionId, options) {
+    return Wabbit.openChatPage(collectionId, options);
+}
 // Create an object as default export (for ESM/CJS: import Wabbit from '@wabbit-dashboard/embed')
 // Note: For UMD, we don't use default export, but directly use named exports
 const WabbitSDK = {
     init,
     getInstance,
-    destroy
+    destroy,
+    getChatPageUrl,
+    openChatPage
 };
 
 exports.ApiClient = ApiClient;
@@ -3588,10 +3869,12 @@ exports.default = WabbitSDK;
 exports.destroy = destroy;
 exports.detectTheme = detectTheme;
 exports.escapeHtml = escapeHtml;
+exports.getChatPageUrl = getChatPageUrl;
 exports.getInstance = getInstance;
 exports.init = init;
 exports.mergeConfig = mergeConfig;
 exports.onDOMReady = onDOMReady;
+exports.openChatPage = openChatPage;
 exports.storage = storage;
 exports.validateConfig = validateConfig;
 exports.watchTheme = watchTheme;