@v-tilt/browser 1.3.0 → 1.4.0

package/lib/extensions/chat/chat-wrapper.js

@@ -0,0 +1,497 @@
+"use strict";
+/**
+ * Chat Wrapper
+ *
+ * Lightweight wrapper that handles the decision of WHEN to load the chat widget.
+ * The actual chat logic is in LazyLoadedChat which is loaded on demand.
+ *
+ * This follows the same pattern as SessionRecordingWrapper.
+ *
+ * ## Initialization Modes (Intercom-like flexibility)
+ *
+ * 1. **Snippet-only (dashboard configured)**:
+ *    Just add the vTilt snippet - widget auto-configures from project settings.
+ *    ```js
+ *    vt.init('token', { api_host: '...' })
+ *    // Chat widget appears based on dashboard settings
+ *    ```
+ *
+ * 2. **Code-configured (optional overrides)**:
+ *    Override dashboard settings with code for advanced customization.
+ *    ```js
+ *    vt.init('token', {
+ *      api_host: '...',
+ *      chat: {
+ *        enabled: true,
+ *        position: 'bottom-left',
+ *        greeting: 'Custom greeting!'
+ *      }
+ *    })
+ *    ```
+ *
+ * Code config always takes precedence over dashboard settings.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWrapper = exports.CHAT_LOADING = void 0;
+const globals_1 = require("../../utils/globals");
+const LOGGER_PREFIX = "[Chat]";
+/** Status when lazy loading is in progress */
+exports.CHAT_LOADING = "loading";
+/**
+ * Chat Wrapper
+ *
+ * This is the lightweight class that lives in the main bundle.
+ * It handles:
+ * - Auto-fetching settings from dashboard (Intercom-like)
+ * - Merging server settings with code config
+ * - Deciding if chat should be enabled
+ * - Lazy loading the actual chat widget code
+ * - Delegating to LazyLoadedChat
+ * - Queuing messages/callbacks before widget loads
+ */
+class ChatWrapper {
+    constructor(_instance, config = {}) {
+        this._instance = _instance;
+        this._serverConfig = null;
+        this._configFetched = false;
+        this._isLoading = false;
+        this._loadError = null;
+        // Queues for operations before widget loads
+        this._pendingMessages = [];
+        this._pendingCallbacks = [];
+        this._messageCallbacks = [];
+        this._typingCallbacks = [];
+        this._connectionCallbacks = [];
+        this._config = config;
+    }
+    // ============================================================================
+    // Public API - State
+    // ============================================================================
+    /**
+     * Whether the chat widget is open
+     */
+    get isOpen() {
+        var _a, _b;
+        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Whether connected to realtime service
+     */
+    get isConnected() {
+        var _a, _b;
+        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.isConnected) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Whether the widget is loading
+     */
+    get isLoading() {
+        var _a, _b;
+        return this._isLoading || ((_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.isLoading) !== null && _b !== void 0 ? _b : false);
+    }
+    /**
+     * Number of unread messages
+     */
+    get unreadCount() {
+        var _a, _b;
+        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.unreadCount) !== null && _b !== void 0 ? _b : 0;
+    }
+    /**
+     * Current channel (if any)
+     */
+    get channel() {
+        var _a, _b;
+        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.channel) !== null && _b !== void 0 ? _b : null;
+    }
+    // ============================================================================
+    // Public API - Widget Control
+    // ============================================================================
+    /**
+     * Open the chat widget
+     */
+    open() {
+        this._lazyLoadAndThen(() => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.open(); });
+    }
+    /**
+     * Close the chat widget
+     */
+    close() {
+        var _a;
+        (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    /**
+     * Toggle the chat widget open/closed
+     */
+    toggle() {
+        if (this._lazyLoadedChat) {
+            this._lazyLoadedChat.toggle();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Show the chat widget (make visible but not necessarily open)
+     */
+    show() {
+        this._lazyLoadAndThen(() => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.show(); });
+    }
+    /**
+     * Hide the chat widget
+     */
+    hide() {
+        var _a;
+        (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    // ============================================================================
+    // Public API - Messaging
+    // ============================================================================
+    /**
+     * Send a message
+     */
+    sendMessage(content) {
+        if (this._lazyLoadedChat) {
+            this._lazyLoadedChat.sendMessage(content);
+        }
+        else {
+            // Queue message until widget loads
+            this._pendingMessages.push(content);
+            this._lazyLoadAndThen(() => {
+                // Send all queued messages
+                this._pendingMessages.forEach((msg) => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.sendMessage(msg); });
+                this._pendingMessages = [];
+            });
+        }
+    }
+    /**
+     * Mark messages as read
+     */
+    markAsRead() {
+        var _a;
+        (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.markAsRead();
+    }
+    // ============================================================================
+    // Public API - Events
+    // ============================================================================
+    /**
+     * Subscribe to new messages
+     */
+    onMessage(callback) {
+        this._messageCallbacks.push(callback);
+        if (this._lazyLoadedChat) {
+            return this._lazyLoadedChat.onMessage(callback);
+        }
+        // Return unsubscribe that removes from queue
+        return () => {
+            const index = this._messageCallbacks.indexOf(callback);
+            if (index > -1) {
+                this._messageCallbacks.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Subscribe to typing indicators
+     */
+    onTyping(callback) {
+        this._typingCallbacks.push(callback);
+        if (this._lazyLoadedChat) {
+            return this._lazyLoadedChat.onTyping(callback);
+        }
+        return () => {
+            const index = this._typingCallbacks.indexOf(callback);
+            if (index > -1) {
+                this._typingCallbacks.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback) {
+        this._connectionCallbacks.push(callback);
+        if (this._lazyLoadedChat) {
+            return this._lazyLoadedChat.onConnectionChange(callback);
+        }
+        return () => {
+            const index = this._connectionCallbacks.indexOf(callback);
+            if (index > -1) {
+                this._connectionCallbacks.splice(index, 1);
+            }
+        };
+    }
+    // ============================================================================
+    // Initialization
+    // ============================================================================
+    /**
+     * Start chat if enabled, called by VTilt after init
+     *
+     * This method supports two modes (Intercom-like):
+     * 1. Auto-config: Fetch settings from /api/chat/settings (default)
+     * 2. Code-only: Use only code config (autoConfig: false)
+     */
+    async startIfEnabled() {
+        var _a, _b, _c, _d;
+        // If explicitly disabled in code, don't even fetch settings
+        if (this._config.enabled === false) {
+            console.info(`${LOGGER_PREFIX} disabled by code config`);
+            return;
+        }
+        // If disable_chat is set in main config, don't enable
+        const mainConfig = this._instance.getConfig();
+        if (mainConfig.disable_chat) {
+            console.info(`${LOGGER_PREFIX} disabled by disable_chat config`);
+            return;
+        }
+        // Fetch server settings unless autoConfig is explicitly false
+        if (this._config.autoConfig !== false) {
+            await this._fetchServerSettings();
+        }
+        // After fetching, check if chat should be enabled
+        if (!this._isChatEnabled) {
+            console.info(`${LOGGER_PREFIX} not enabled (check dashboard settings)`);
+            return;
+        }
+        // Preload on idle if configured (code or server)
+        const shouldPreload = (_c = (_a = this._config.preload) !== null && _a !== void 0 ? _a : (_b = this._serverConfig) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : false;
+        if (shouldPreload) {
+            this._schedulePreload();
+        }
+        // If enabled by server, show the chat bubble immediately
+        // (Note: we already returned above if this._config.enabled === false)
+        if ((_d = this._serverConfig) === null || _d === void 0 ? void 0 : _d.enabled) {
+            this._showBubble();
+        }
+        console.info(`${LOGGER_PREFIX} ready (lazy-load on demand)`);
+    }
+    /**
+     * Update configuration
+     */
+    updateConfig(config) {
+        this._config = { ...this._config, ...config };
+    }
+    /**
+     * Get the merged configuration (server + code, code takes precedence)
+     */
+    getMergedConfig() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        const server = this._serverConfig;
+        const code = this._config;
+        return {
+            enabled: (_b = (_a = code.enabled) !== null && _a !== void 0 ? _a : server === null || server === void 0 ? void 0 : server.enabled) !== null && _b !== void 0 ? _b : false,
+            autoConfig: (_c = code.autoConfig) !== null && _c !== void 0 ? _c : true,
+            position: (_e = (_d = code.position) !== null && _d !== void 0 ? _d : server === null || server === void 0 ? void 0 : server.position) !== null && _e !== void 0 ? _e : "bottom-right",
+            greeting: (_f = code.greeting) !== null && _f !== void 0 ? _f : server === null || server === void 0 ? void 0 : server.greeting,
+            color: (_h = (_g = code.color) !== null && _g !== void 0 ? _g : server === null || server === void 0 ? void 0 : server.color) !== null && _h !== void 0 ? _h : "#6366f1",
+            aiMode: (_k = (_j = code.aiMode) !== null && _j !== void 0 ? _j : server === null || server === void 0 ? void 0 : server.ai_enabled) !== null && _k !== void 0 ? _k : true,
+            aiGreeting: (_l = code.aiGreeting) !== null && _l !== void 0 ? _l : server === null || server === void 0 ? void 0 : server.ai_greeting,
+            preload: (_m = code.preload) !== null && _m !== void 0 ? _m : false,
+            theme: (_o = code.theme) !== null && _o !== void 0 ? _o : {
+                primaryColor: (_q = (_p = code.color) !== null && _p !== void 0 ? _p : server === null || server === void 0 ? void 0 : server.color) !== null && _q !== void 0 ? _q : "#6366f1",
+            },
+            offlineMessage: (_r = code.offlineMessage) !== null && _r !== void 0 ? _r : server === null || server === void 0 ? void 0 : server.offline_message,
+            collectEmailOffline: (_t = (_s = code.collectEmailOffline) !== null && _s !== void 0 ? _s : server === null || server === void 0 ? void 0 : server.collect_email_offline) !== null && _t !== void 0 ? _t : true,
+        };
+    }
+    /**
+     * Destroy the chat widget
+     */
+    destroy() {
+        var _a;
+        (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._lazyLoadedChat = undefined;
+        this._pendingMessages = [];
+        this._pendingCallbacks = [];
+        this._messageCallbacks = [];
+        this._typingCallbacks = [];
+        this._connectionCallbacks = [];
+    }
+    // ============================================================================
+    // Private - Configuration
+    // ============================================================================
+    get _isChatEnabled() {
+        var _a;
+        // Code config takes precedence
+        if (this._config.enabled === false)
+            return false;
+        if (this._config.enabled === true)
+            return true;
+        // Fall back to server config
+        if (((_a = this._serverConfig) === null || _a === void 0 ? void 0 : _a.enabled) === true)
+            return true;
+        // Default: disabled unless explicitly enabled
+        return false;
+    }
+    /**
+     * Fetch chat settings from the server
+     * This enables "snippet-only" installation where widget configures from dashboard
+     */
+    async _fetchServerSettings() {
+        if (this._configFetched)
+            return;
+        const config = this._instance.getConfig();
+        const token = config.token;
+        const apiHost = config.api_host;
+        if (!token || !apiHost) {
+            console.warn(`${LOGGER_PREFIX} Cannot fetch settings: missing token or api_host`);
+            this._configFetched = true;
+            return;
+        }
+        try {
+            const url = `${apiHost}/api/chat/settings?token=${encodeURIComponent(token)}`;
+            const response = await fetch(url);
+            if (!response.ok) {
+                console.warn(`${LOGGER_PREFIX} Failed to fetch settings: ${response.status}`);
+                this._configFetched = true;
+                return;
+            }
+            this._serverConfig = await response.json();
+            this._configFetched = true;
+            console.info(`${LOGGER_PREFIX} Loaded settings from dashboard`);
+        }
+        catch (error) {
+            console.warn(`${LOGGER_PREFIX} Error fetching settings:`, error);
+            this._configFetched = true;
+        }
+    }
+    /**
+     * Show the chat bubble (launcher button) without fully loading the widget
+     * This creates a lightweight bubble that loads the full widget on click
+     */
+    _showBubble() {
+        if (!(globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.document))
+            return;
+        // Don't create if already exists
+        if (document.getElementById("vtilt-chat-bubble"))
+            return;
+        const mergedConfig = this.getMergedConfig();
+        const position = mergedConfig.position || "bottom-right";
+        const color = mergedConfig.color || "#6366f1";
+        const bubble = document.createElement("div");
+        bubble.id = "vtilt-chat-bubble";
+        bubble.setAttribute("style", `
+      position: fixed;
+      bottom: 20px;
+      ${position === "bottom-right" ? "right: 20px;" : "left: 20px;"}
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${color};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+      z-index: 999999;
+    `.trim());
+        bubble.innerHTML = `
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
+    `;
+        // Hover effect
+        bubble.addEventListener("mouseenter", () => {
+            bubble.style.transform = "scale(1.05)";
+            bubble.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.2)";
+        });
+        bubble.addEventListener("mouseleave", () => {
+            bubble.style.transform = "scale(1)";
+            bubble.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+        });
+        // Click to open (this will lazy load the full widget)
+        bubble.addEventListener("click", () => {
+            this.open();
+        });
+        document.body.appendChild(bubble);
+    }
+    get _scriptName() {
+        return "chat";
+    }
+    // ============================================================================
+    // Private - Lazy Loading
+    // ============================================================================
+    /**
+     * Schedule preload on idle
+     */
+    _schedulePreload() {
+        if (typeof requestIdleCallback !== "undefined") {
+            requestIdleCallback(() => this._lazyLoad(), { timeout: 5000 });
+        }
+        else {
+            // Fallback for browsers without requestIdleCallback
+            setTimeout(() => this._lazyLoad(), 3000);
+        }
+    }
+    /**
+     * Lazy load and then execute callback
+     */
+    _lazyLoadAndThen(callback) {
+        if (this._lazyLoadedChat) {
+            callback();
+            return;
+        }
+        this._pendingCallbacks.push(callback);
+        this._lazyLoad();
+    }
+    /**
+     * Lazy load the chat script
+     */
+    _lazyLoad() {
+        var _a, _b;
+        if (this._isLoading || this._lazyLoadedChat || this._loadError) {
+            return;
+        }
+        // Check if already loaded
+        if ((_a = globals_1.assignableWindow.__VTiltExtensions__) === null || _a === void 0 ? void 0 : _a.initChat) {
+            this._onScriptLoaded();
+            return;
+        }
+        this._isLoading = true;
+        const loadExternalDependency = (_b = globals_1.assignableWindow.__VTiltExtensions__) === null || _b === void 0 ? void 0 : _b.loadExternalDependency;
+        if (!loadExternalDependency) {
+            console.error(`${LOGGER_PREFIX} loadExternalDependency not available. Chat cannot start.`);
+            this._isLoading = false;
+            this._loadError = "loadExternalDependency not available";
+            return;
+        }
+        loadExternalDependency(this._instance, this._scriptName, (err) => {
+            this._isLoading = false;
+            if (err) {
+                console.error(`${LOGGER_PREFIX} Failed to load:`, err);
+                this._loadError = String(err);
+                return;
+            }
+            this._onScriptLoaded();
+        });
+    }
+    /**
+     * Called after the chat script is loaded
+     */
+    _onScriptLoaded() {
+        var _a;
+        const initChat = (_a = globals_1.assignableWindow.__VTiltExtensions__) === null || _a === void 0 ? void 0 : _a.initChat;
+        if (!initChat) {
+            console.error(`${LOGGER_PREFIX} initChat not available after script load`);
+            this._loadError = "initChat not available";
+            return;
+        }
+        if (!this._lazyLoadedChat) {
+            // Use merged config (server + code)
+            const mergedConfig = this.getMergedConfig();
+            this._lazyLoadedChat = initChat(this._instance, mergedConfig);
+            // Re-register queued callbacks
+            this._messageCallbacks.forEach((cb) => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.onMessage(cb); });
+            this._typingCallbacks.forEach((cb) => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.onTyping(cb); });
+            this._connectionCallbacks.forEach((cb) => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.onConnectionChange(cb); });
+            // Remove the lightweight bubble since full widget is now loaded
+            const existingBubble = document === null || document === void 0 ? void 0 : document.getElementById("vtilt-chat-bubble");
+            if (existingBubble) {
+                existingBubble.remove();
+            }
+        }
+        // Execute pending callbacks
+        this._pendingCallbacks.forEach((cb) => cb());
+        this._pendingCallbacks = [];
+        console.info(`${LOGGER_PREFIX} loaded and ready`);
+    }
+}
+exports.ChatWrapper = ChatWrapper;

package/lib/extensions/chat/chat.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Lazy Loaded Chat Implementation
+ *
+ * The actual chat widget implementation that is loaded on demand.
+ * This file is bundled into chat.js and loaded when chat is enabled.
+ *
+ * Uses Ably for real-time messaging.
+ */
+import type { VTilt } from "../../vtilt";
+import type { ChatConfig, ChatChannel, LazyLoadedChatInterface } from "../../utils/globals";
+import type { MessageCallback, TypingCallback, ConnectionCallback, Unsubscribe } from "./types";
+export declare class LazyLoadedChat implements LazyLoadedChatInterface {
+    private _instance;
+    private _config;
+    private _state;
+    private _container;
+    private _widget;
+    private _bubble;
+    private _ably;
+    private _ablyChannel;
+    private _typingChannel;
+    private _connectionState;
+    private _messageCallbacks;
+    private _typingCallbacks;
+    private _connectionCallbacks;
+    private _typingTimeout;
+    private _typingDebounce;
+    private _isUserTyping;
+    private _initialUserReadAt;
+    private _isMarkingRead;
+    constructor(instance: VTilt, config?: ChatConfig);
+    get isOpen(): boolean;
+    get isConnected(): boolean;
+    get isLoading(): boolean;
+    get unreadCount(): number;
+    get channel(): ChatChannel | null;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    show(): void;
+    hide(): void;
+    sendMessage(content: string): Promise<void>;
+    markAsRead(): void;
+    /**
+     * Automatically mark unread agent/AI messages as read
+     * Called when widget opens or new messages arrive while open
+     */
+    private _autoMarkAsRead;
+    /**
+     * Check if a message has been read by the user (using initial cursor)
+     */
+    private _isMessageReadByUser;
+    onMessage(callback: MessageCallback): Unsubscribe;
+    onTyping(callback: TypingCallback): Unsubscribe;
+    onConnectionChange(callback: ConnectionCallback): Unsubscribe;
+    destroy(): void;
+    private _initializeChannel;
+    private _connectRealtime;
+    private _disconnectRealtime;
+    private _extractProjectId;
+    private _handleNewMessage;
+    private _handleTypingEvent;
+    private _handleReadCursorEvent;
+    private _notifyConnectionChange;
+    private _createUI;
+    private _attachEventListeners;
+    private _handleUserTyping;
+    private _sendTypingIndicator;
+    private _handleSend;
+    private _updateUI;
+    private _renderMessages;
+    private _getContainerStyles;
+    private _getBubbleStyles;
+    private _getBubbleHTML;
+    private _getWidgetStyles;
+    private _getWidgetHTML;
+    private _getMessageHTML;
+    /**
+     * Check if a message has been read by the agent using cursor comparison
+     */
+    private _isMessageReadByAgent;
+    private _apiRequest;
+    private _trackEvent;
+    private _getTimeOpen;
+    private _escapeHTML;
+    private _formatTime;
+}