@v-tilt/browser 1.5.1 → 1.7.0

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

@@ -1,545 +0,0 @@
-"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;
-    }
-    /**
-     * List of user's channels (multi-channel support)
-     */
-    get channels() {
-        var _a, _b;
-        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.channels) !== null && _b !== void 0 ? _b : [];
-    }
-    /**
-     * Current view state ('list' or 'conversation')
-     */
-    get currentView() {
-        var _a, _b;
-        return (_b = (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.currentView) !== null && _b !== void 0 ? _b : "list";
-    }
-    // ============================================================================
-    // 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 - Channel Management (Multi-channel support)
-    // ============================================================================
-    /**
-     * Fetch/refresh the list of user's channels
-     */
-    getChannels() {
-        this._lazyLoadAndThen(() => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.getChannels(); });
-    }
-    /**
-     * Select a channel and load its messages
-     */
-    selectChannel(channelId) {
-        this._lazyLoadAndThen(() => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.selectChannel(channelId); });
-    }
-    /**
-     * Create a new channel and enter it
-     */
-    createChannel() {
-        this._lazyLoadAndThen(() => { var _a; return (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.createChannel(); });
-    }
-    /**
-     * Go back to channel list from conversation view
-     */
-    goToChannelList() {
-        var _a;
-        (_a = this._lazyLoadedChat) === null || _a === void 0 ? void 0 : _a.goToChannelList();
-    }
-    // ============================================================================
-    // 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

@@ -1,99 +0,0 @@
-/**
- * Chat Widget - Lazy loaded chat implementation using Ably for real-time messaging.
- */
-import type { VTilt } from "../../vtilt";
-import { type ChatConfig, type ChatChannel, type ChatChannelSummary, type ChatWidgetView, type LazyLoadedChatInterface } from "../../utils/globals";
-import { type MessageCallback, type TypingCallback, type ConnectionCallback, type 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 _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;
-    get channels(): ChatChannelSummary[];
-    get currentView(): ChatWidgetView;
-    private get _theme();
-    private get _distinctId();
-    open(): void;
-    close(): void;
-    toggle(): void;
-    show(): void;
-    hide(): void;
-    getChannels(): Promise<void>;
-    selectChannel(channelId: string): Promise<void>;
-    createChannel(): Promise<void>;
-    goToChannelList(): void;
-    sendMessage(content: string): Promise<void>;
-    markAsRead(): void;
-    private _autoMarkAsRead;
-    private _isMessageReadByUser;
-    /**
-     * Calculate unread count based on messages and user_last_read_at
-     * (unread agent/AI messages for the user)
-     */
-    private _calculateUnreadCount;
-    onMessage(callback: MessageCallback): Unsubscribe;
-    onTyping(callback: TypingCallback): Unsubscribe;
-    onConnectionChange(callback: ConnectionCallback): Unsubscribe;
-    destroy(): void;
-    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 _updateHeader;
-    private _getChannelListHTML;
-    private _getChannelItemHTML;
-    private _getConversationHTML;
-    private _attachChannelListListeners;
-    private _attachConversationListeners;
-    private _formatRelativeTime;
-    private _renderMessages;
-    private _getContainerStyles;
-    private _getBubbleStyles;
-    private _getBubbleHTML;
-    private _getWidgetStyles;
-    private _getWidgetHTML;
-    private _getMessageHTML;
-    private _isMessageReadByAgent;
-    /**
-     * Handle streaming AI response
-     * Industry standard: Real-time streaming with progressive UI updates
-     */
-    private _handleStreamingResponse;
-    /**
-     * Remove temporary message by ID
-     */
-    private _removeTempMessage;
-    private _apiRequest;
-    private _trackEvent;
-    private _getTimeOpen;
-    private _escapeHTML;
-    private _formatTime;
-}