@v-tilt/browser 1.3.0 → 1.4.0

package/lib/extensions/chat/chat.js

@@ -0,0 +1,998 @@
+"use strict";
+/**
+ * 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyLoadedChat = void 0;
+const globals_1 = require("../../utils/globals");
+const types_1 = require("./types");
+const ably_1 = __importDefault(require("ably"));
+const LOGGER_PREFIX = "[Chat]";
+// ============================================================================
+// Constants
+// ============================================================================
+const DEFAULT_POSITION = "bottom-right";
+const DEFAULT_THEME = {
+    primaryColor: "#6366f1",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    borderRadius: "12px",
+    headerBgColor: "#6366f1",
+    userBubbleColor: "#6366f1",
+    agentBubbleColor: "#f3f4f6",
+};
+// API endpoints (widget endpoints for SDK use)
+const API_WIDGET = "/api/chat/widget";
+const API_WIDGET_MESSAGES = "/api/chat/widget/messages";
+const API_WIDGET_READ = "/api/chat/widget/read";
+const API_ABLY_TOKEN = "/api/chat/ably-token";
+// ============================================================================
+// LazyLoadedChat Implementation
+// ============================================================================
+class LazyLoadedChat {
+    constructor(instance, config = {}) {
+        // DOM elements
+        this._container = null;
+        this._widget = null;
+        this._bubble = null;
+        // Ably Realtime
+        this._ably = null;
+        this._ablyChannel = null;
+        this._typingChannel = null;
+        this._connectionState = "disconnected";
+        // Callbacks
+        this._messageCallbacks = [];
+        this._typingCallbacks = [];
+        this._connectionCallbacks = [];
+        // Timers
+        this._typingTimeout = null;
+        this._typingDebounce = null;
+        this._isUserTyping = false;
+        // Read tracking - initial position when widget opens (to show unread indicators)
+        this._initialUserReadAt = null;
+        this._isMarkingRead = false;
+        this._instance = instance;
+        this._config = {
+            enabled: true,
+            position: DEFAULT_POSITION,
+            aiMode: true,
+            preload: false,
+            ...config,
+            theme: { ...DEFAULT_THEME, ...config.theme },
+        };
+        this._state = {
+            isOpen: false,
+            isVisible: true,
+            isConnected: false,
+            isLoading: false,
+            unreadCount: 0,
+            channel: null,
+            messages: [],
+            isTyping: false,
+            typingSender: null,
+            agentLastReadAt: null, // Read cursor from agent
+        };
+        // Initialize UI
+        this._createUI();
+        this._attachEventListeners();
+        console.info(`${LOGGER_PREFIX} initialized`);
+    }
+    // ============================================================================
+    // Public API - State (LazyLoadedChatInterface)
+    // ============================================================================
+    get isOpen() {
+        return this._state.isOpen;
+    }
+    get isConnected() {
+        return this._state.isConnected;
+    }
+    get isLoading() {
+        return this._state.isLoading;
+    }
+    get unreadCount() {
+        return this._state.unreadCount;
+    }
+    get channel() {
+        return this._state.channel;
+    }
+    // ============================================================================
+    // Public API - Widget Control
+    // ============================================================================
+    open() {
+        var _a;
+        if (this._state.isOpen)
+            return;
+        this._state.isOpen = true;
+        this._updateUI();
+        this._trackEvent(types_1.CHAT_EVENTS.WIDGET_OPENED, {
+            $page_url: (_a = globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.location) === null || _a === void 0 ? void 0 : _a.href,
+            $trigger: "api",
+        });
+        // Initialize channel if needed
+        if (!this._state.channel) {
+            this._initializeChannel();
+        }
+        else {
+            // Channel exists, mark any unread messages as read
+            this._autoMarkAsRead();
+        }
+        // Connect to Ably
+        if (!this._state.isConnected) {
+            this._connectRealtime();
+        }
+    }
+    close() {
+        if (!this._state.isOpen)
+            return;
+        const timeOpen = this._getTimeOpen();
+        this._state.isOpen = false;
+        this._updateUI();
+        this._trackEvent(types_1.CHAT_EVENTS.WIDGET_CLOSED, {
+            $time_open_seconds: timeOpen,
+            $messages_sent: this._state.messages.filter((m) => m.sender_type === "user")
+                .length,
+        });
+    }
+    toggle() {
+        if (this._state.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    show() {
+        this._state.isVisible = true;
+        this._updateUI();
+    }
+    hide() {
+        this._state.isVisible = false;
+        this._updateUI();
+    }
+    // ============================================================================
+    // Public API - Messaging
+    // ============================================================================
+    async sendMessage(content) {
+        var _a, _b, _c, _d;
+        if (!content.trim())
+            return;
+        // Ensure channel exists
+        if (!this._state.channel) {
+            await this._initializeChannel();
+        }
+        const channelId = (_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id;
+        if (!channelId) {
+            console.error(`${LOGGER_PREFIX} No channel to send message to`);
+            return;
+        }
+        // Optimistic update
+        const tempMessage = {
+            id: `temp-${Date.now()}`,
+            channel_id: channelId,
+            sender_type: "user",
+            sender_id: this._instance.getDistinctId() || null,
+            sender_name: null,
+            sender_avatar_url: null,
+            content,
+            content_type: "text",
+            metadata: {},
+            created_at: new Date().toISOString(),
+        };
+        this._state.messages.push(tempMessage);
+        this._updateUI();
+        try {
+            // Send to API
+            const response = await this._apiRequest(`${API_WIDGET_MESSAGES}`, {
+                method: "POST",
+                body: JSON.stringify({
+                    channel_id: channelId,
+                    distinct_id: this._instance.getDistinctId(),
+                    content,
+                }),
+            });
+            // Replace temp message with real one
+            const index = this._state.messages.findIndex((m) => m.id === tempMessage.id);
+            if (index !== -1 && (response === null || response === void 0 ? void 0 : response.message)) {
+                this._state.messages[index] = response.message;
+            }
+            // Note: AI response will come through Ably channel if AI mode is enabled
+            // No need to handle it here since server publishes to Ably
+            // Track event
+            this._trackEvent(types_1.CHAT_EVENTS.MESSAGE_SENT, {
+                $channel_id: channelId,
+                $message_id: (_b = response === null || response === void 0 ? void 0 : response.message) === null || _b === void 0 ? void 0 : _b.id,
+                $content_preview: content.substring(0, 100),
+                $sender_type: "user",
+                $ai_mode: (_d = (_c = this._state.channel) === null || _c === void 0 ? void 0 : _c.ai_mode) !== null && _d !== void 0 ? _d : true,
+                $word_count: content.split(/\s+/).length,
+            });
+            this._updateUI();
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to send message:`, error);
+            // Remove temp message on error
+            this._state.messages = this._state.messages.filter((m) => m.id !== tempMessage.id);
+            this._updateUI();
+        }
+    }
+    markAsRead() {
+        this._autoMarkAsRead();
+    }
+    /**
+     * Automatically mark unread agent/AI messages as read
+     * Called when widget opens or new messages arrive while open
+     */
+    _autoMarkAsRead() {
+        if (!this._state.channel)
+            return;
+        if (this._isMarkingRead)
+            return; // Already in progress
+        // Get the latest message timestamp
+        const latestMessage = this._state.messages[this._state.messages.length - 1];
+        if (!latestMessage)
+            return;
+        // Check if there are unread agent messages
+        const hasUnreadAgentMessages = this._state.messages.some((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        if (!hasUnreadAgentMessages)
+            return;
+        this._state.unreadCount = 0;
+        this._isMarkingRead = true;
+        this._updateUI();
+        // API call to update read cursor with latest message timestamp
+        this._apiRequest(API_WIDGET_READ, {
+            method: "POST",
+            body: JSON.stringify({
+                channel_id: this._state.channel.id,
+                distinct_id: this._instance.getDistinctId(),
+                read_at: latestMessage.created_at,
+            }),
+        })
+            .then(() => {
+            // Update initial read position after successful mark
+            this._initialUserReadAt = latestMessage.created_at;
+            this._isMarkingRead = false;
+            this._updateUI();
+        })
+            .catch((err) => {
+            console.error(`${LOGGER_PREFIX} Failed to mark as read:`, err);
+            this._isMarkingRead = false;
+            this._updateUI();
+        });
+    }
+    /**
+     * Check if a message has been read by the user (using initial cursor)
+     */
+    _isMessageReadByUser(messageCreatedAt) {
+        if (!this._initialUserReadAt)
+            return false;
+        return new Date(messageCreatedAt) <= new Date(this._initialUserReadAt);
+    }
+    // ============================================================================
+    // Public API - Events
+    // ============================================================================
+    onMessage(callback) {
+        this._messageCallbacks.push(callback);
+        return () => {
+            const index = this._messageCallbacks.indexOf(callback);
+            if (index > -1)
+                this._messageCallbacks.splice(index, 1);
+        };
+    }
+    onTyping(callback) {
+        this._typingCallbacks.push(callback);
+        return () => {
+            const index = this._typingCallbacks.indexOf(callback);
+            if (index > -1)
+                this._typingCallbacks.splice(index, 1);
+        };
+    }
+    onConnectionChange(callback) {
+        this._connectionCallbacks.push(callback);
+        return () => {
+            const index = this._connectionCallbacks.indexOf(callback);
+            if (index > -1)
+                this._connectionCallbacks.splice(index, 1);
+        };
+    }
+    // ============================================================================
+    // Public API - Lifecycle
+    // ============================================================================
+    destroy() {
+        // Disconnect Ably
+        this._disconnectRealtime();
+        // Clear timers
+        if (this._typingTimeout)
+            clearTimeout(this._typingTimeout);
+        if (this._typingDebounce)
+            clearTimeout(this._typingDebounce);
+        // Remove DOM elements
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+        // Clear callbacks
+        this._messageCallbacks = [];
+        this._typingCallbacks = [];
+        this._connectionCallbacks = [];
+        console.info(`${LOGGER_PREFIX} destroyed`);
+    }
+    // ============================================================================
+    // Private - Channel Management
+    // ============================================================================
+    async _initializeChannel() {
+        var _a;
+        this._state.isLoading = true;
+        this._updateUI();
+        try {
+            const response = await this._apiRequest(`${API_WIDGET}`, {
+                method: "POST",
+                body: JSON.stringify({
+                    distinct_id: this._instance.getDistinctId(),
+                    page_url: (_a = globals_1.window === null || globals_1.window === void 0 ? void 0 : globals_1.window.location) === null || _a === void 0 ? void 0 : _a.href,
+                    page_title: globals_1.document === null || globals_1.document === void 0 ? void 0 : globals_1.document.title,
+                }),
+            });
+            if (response) {
+                this._state.channel = response.channel;
+                this._state.messages = response.messages || [];
+                // Initialize read cursors from channel
+                this._state.agentLastReadAt = response.channel.agent_last_read_at || null;
+                this._initialUserReadAt = response.channel.user_last_read_at || null;
+                // Track channel started (only if new)
+                if (response.messages.length === 0 || response.messages.length === 1) {
+                    this._trackEvent(types_1.CHAT_EVENTS.STARTED, {
+                        $channel_id: response.channel.id,
+                        $initiated_by: "user",
+                        $ai_mode: response.channel.ai_mode,
+                    });
+                }
+                // Connect to Ably now that we have channel ID
+                this._connectRealtime();
+                // Auto-mark unread messages as read if widget is open
+                if (this._state.isOpen) {
+                    this._autoMarkAsRead();
+                }
+            }
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to initialize channel:`, error);
+        }
+        finally {
+            this._state.isLoading = false;
+            this._updateUI();
+        }
+    }
+    // ============================================================================
+    // Private - Ably Realtime Connection
+    // ============================================================================
+    async _connectRealtime() {
+        if (this._ably || !this._state.channel) {
+            return;
+        }
+        this._connectionState = "connecting";
+        this._notifyConnectionChange(false);
+        try {
+            // Get Ably token from server
+            const tokenResponse = await this._apiRequest(API_ABLY_TOKEN, {
+                method: "POST",
+                body: JSON.stringify({
+                    distinct_id: this._instance.getDistinctId(),
+                    channel_id: this._state.channel.id,
+                }),
+            });
+            if (!(tokenResponse === null || tokenResponse === void 0 ? void 0 : tokenResponse.tokenRequest)) {
+                console.warn(`${LOGGER_PREFIX} Failed to get Ably token`);
+                this._connectionState = "error";
+                return;
+            }
+            // Create Ably client with token auth
+            this._ably = new ably_1.default.Realtime({
+                authCallback: async (_, callback) => {
+                    var _a;
+                    try {
+                        const refreshResponse = await this._apiRequest(API_ABLY_TOKEN, {
+                            method: "POST",
+                            body: JSON.stringify({
+                                distinct_id: this._instance.getDistinctId(),
+                                channel_id: (_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id,
+                            }),
+                        });
+                        if (refreshResponse === null || refreshResponse === void 0 ? void 0 : refreshResponse.tokenRequest) {
+                            callback(null, refreshResponse.tokenRequest);
+                        }
+                        else {
+                            callback("Failed to refresh token", null);
+                        }
+                    }
+                    catch (err) {
+                        callback(String(err), null);
+                    }
+                },
+                authMethod: "POST",
+            });
+            // Authenticate with initial token
+            await this._ably.auth.authorize(tokenResponse.tokenRequest);
+            // Get project ID from instance config
+            const config = this._instance.getConfig();
+            const projectId = config.projectId || this._extractProjectId(config.token || "");
+            // Subscribe to chat channel (Ably channel)
+            const ablyChannelName = `chat:${projectId}:${this._state.channel.id}`;
+            this._ablyChannel = this._ably.channels.get(ablyChannelName);
+            // Listen for new messages
+            this._ablyChannel.subscribe("message", (msg) => {
+                const message = msg.data;
+                this._handleNewMessage(message);
+            });
+            // Subscribe to typing channel
+            const typingChannelName = `${ablyChannelName}:typing`;
+            this._typingChannel = this._ably.channels.get(typingChannelName);
+            this._typingChannel.subscribe("typing", (msg) => {
+                const event = msg.data;
+                this._handleTypingEvent(event);
+            });
+            // Subscribe to read cursor events
+            this._ablyChannel.subscribe("read", (msg) => {
+                const event = msg.data;
+                this._handleReadCursorEvent(event);
+            });
+            // Handle connection state changes
+            this._ably.connection.on("connected", () => {
+                this._connectionState = "connected";
+                this._state.isConnected = true;
+                this._notifyConnectionChange(true);
+                console.info(`${LOGGER_PREFIX} Connected to Ably`);
+            });
+            this._ably.connection.on("disconnected", () => {
+                this._connectionState = "disconnected";
+                this._state.isConnected = false;
+                this._notifyConnectionChange(false);
+            });
+            this._ably.connection.on("failed", () => {
+                this._connectionState = "error";
+                this._state.isConnected = false;
+                this._notifyConnectionChange(false);
+            });
+            // Initial connection
+            this._ably.connect();
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} Failed to connect to Ably:`, error);
+            this._connectionState = "error";
+        }
+    }
+    _disconnectRealtime() {
+        if (this._ablyChannel) {
+            this._ablyChannel.unsubscribe();
+            this._ablyChannel = null;
+        }
+        if (this._typingChannel) {
+            this._typingChannel.unsubscribe();
+            this._typingChannel = null;
+        }
+        if (this._ably) {
+            this._ably.close();
+            this._ably = null;
+        }
+        this._connectionState = "disconnected";
+        this._state.isConnected = false;
+    }
+    _extractProjectId(token) {
+        // Token format: project_id.hash
+        const parts = token.split(".");
+        return parts[0] || "";
+    }
+    _handleNewMessage(message) {
+        // Avoid duplicates by ID
+        if (this._state.messages.some((m) => m.id === message.id))
+            return;
+        // Skip user's own messages - we already have them from optimistic updates
+        // The sender_id for user messages is the distinct_id
+        if (message.sender_type === "user" && message.sender_id === this._instance.getDistinctId()) {
+            // But DO replace temp message with real one if present
+            const tempIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-") && m.content === message.content && m.sender_type === "user");
+            if (tempIndex !== -1) {
+                this._state.messages[tempIndex] = message;
+                this._updateUI();
+            }
+            return;
+        }
+        // Add to messages
+        this._state.messages.push(message);
+        // Update unread count if from agent/AI
+        if (message.sender_type !== "user") {
+            if (!this._state.isOpen) {
+                this._state.unreadCount++;
+            }
+            else {
+                // Widget is open, auto-mark as read after a short delay
+                // to ensure UI updates first
+                setTimeout(() => this._autoMarkAsRead(), 100);
+            }
+            // Track received event
+            this._trackEvent(types_1.CHAT_EVENTS.MESSAGE_RECEIVED, {
+                $channel_id: message.channel_id,
+                $message_id: message.id,
+                $content_preview: message.content.substring(0, 100),
+                $sender_type: message.sender_type,
+            });
+        }
+        // Clear typing indicator when message arrives
+        this._state.isTyping = false;
+        this._state.typingSender = null;
+        // Notify callbacks
+        this._messageCallbacks.forEach((cb) => cb(message));
+        this._updateUI();
+    }
+    _handleTypingEvent(event) {
+        // Only show typing for non-user senders
+        if (event.sender_type === "user")
+            return;
+        const senderName = event.sender_name || (event.sender_type === "ai" ? "AI Assistant" : "Agent");
+        this._state.isTyping = event.is_typing;
+        this._state.typingSender = event.is_typing ? senderName : null;
+        // Notify callbacks
+        this._typingCallbacks.forEach((cb) => cb(event.is_typing, senderName));
+        this._updateUI();
+    }
+    _handleReadCursorEvent(event) {
+        // Only handle agent read events (user's own reads are local)
+        if (event.reader_type !== "agent")
+            return;
+        // Update the agent read cursor
+        this._state.agentLastReadAt = event.read_at;
+        // Update UI to show read status on user messages
+        this._updateUI();
+    }
+    _notifyConnectionChange(connected) {
+        this._connectionCallbacks.forEach((cb) => cb(connected));
+    }
+    // ============================================================================
+    // Private - UI
+    // ============================================================================
+    _createUI() {
+        if (!globals_1.document)
+            return;
+        // Create container
+        this._container = globals_1.document.createElement("div");
+        this._container.id = "vtilt-chat-container";
+        this._container.setAttribute("style", this._getContainerStyles());
+        // Create bubble (launcher button)
+        this._bubble = globals_1.document.createElement("div");
+        this._bubble.id = "vtilt-chat-bubble";
+        this._bubble.innerHTML = this._getBubbleHTML();
+        this._bubble.setAttribute("style", this._getBubbleStyles());
+        this._container.appendChild(this._bubble);
+        // Create widget (chat window)
+        this._widget = globals_1.document.createElement("div");
+        this._widget.id = "vtilt-chat-widget";
+        this._widget.innerHTML = this._getWidgetHTML();
+        this._widget.setAttribute("style", this._getWidgetStyles());
+        this._container.appendChild(this._widget);
+        // Add to DOM
+        globals_1.document.body.appendChild(this._container);
+    }
+    _attachEventListeners() {
+        var _a, _b, _c, _d;
+        // Bubble click
+        (_a = this._bubble) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.toggle());
+        // Close button
+        const closeBtn = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-close");
+        closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener("click", () => this.close());
+        // Send button
+        const sendBtn = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelector(".vtilt-chat-send");
+        sendBtn === null || sendBtn === void 0 ? void 0 : sendBtn.addEventListener("click", () => this._handleSend());
+        // Input enter key and typing indicator
+        const input = (_d = this._widget) === null || _d === void 0 ? void 0 : _d.querySelector(".vtilt-chat-input");
+        input === null || input === void 0 ? void 0 : input.addEventListener("keypress", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                this._handleSend();
+            }
+        });
+        // Send typing indicator on input
+        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => {
+            this._handleUserTyping();
+        });
+    }
+    _handleUserTyping() {
+        // Don't send typing if not connected to Ably
+        if (!this._typingChannel)
+            return;
+        // Send typing started if not already typing
+        if (!this._isUserTyping) {
+            this._isUserTyping = true;
+            this._sendTypingIndicator(true);
+        }
+        // Clear existing debounce timer
+        if (this._typingDebounce) {
+            clearTimeout(this._typingDebounce);
+        }
+        // Set timer to send typing stopped after 2 seconds of no input
+        this._typingDebounce = setTimeout(() => {
+            this._isUserTyping = false;
+            this._sendTypingIndicator(false);
+        }, 2000);
+    }
+    _sendTypingIndicator(isTyping) {
+        if (!this._typingChannel)
+            return;
+        try {
+            this._typingChannel.publish("typing", {
+                sender_type: "user",
+                sender_id: this._instance.getDistinctId(),
+                sender_name: null,
+                is_typing: isTyping,
+            });
+        }
+        catch (err) {
+            console.error(`${LOGGER_PREFIX} Failed to send typing indicator:`, err);
+        }
+    }
+    _handleSend() {
+        var _a;
+        const input = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-input");
+        if (!input)
+            return;
+        const content = input.value.trim();
+        if (content) {
+            // Stop typing indicator
+            if (this._isUserTyping) {
+                this._isUserTyping = false;
+                this._sendTypingIndicator(false);
+            }
+            if (this._typingDebounce) {
+                clearTimeout(this._typingDebounce);
+                this._typingDebounce = null;
+            }
+            this.sendMessage(content);
+            input.value = "";
+        }
+    }
+    _updateUI() {
+        if (!this._container || !this._widget || !this._bubble)
+            return;
+        // Update visibility
+        this._container.style.display = this._state.isVisible ? "block" : "none";
+        // Update widget open state
+        this._widget.style.display = this._state.isOpen ? "flex" : "none";
+        // Update bubble badge
+        const badge = this._bubble.querySelector(".vtilt-chat-badge");
+        if (badge) {
+            badge.style.display =
+                this._state.unreadCount > 0 ? "flex" : "none";
+            badge.textContent = String(this._state.unreadCount);
+        }
+        // Update messages
+        this._renderMessages();
+        // Update loading state
+        const loader = this._widget.querySelector(".vtilt-chat-loader");
+        if (loader) {
+            loader.style.display = this._state.isLoading
+                ? "flex"
+                : "none";
+        }
+        // Update typing indicator
+        const typing = this._widget.querySelector(".vtilt-chat-typing");
+        if (typing) {
+            typing.style.display = this._state.isTyping
+                ? "flex"
+                : "none";
+            const typingText = typing.querySelector("span");
+            if (typingText && this._state.typingSender) {
+                typingText.textContent = `${this._state.typingSender} is typing...`;
+            }
+        }
+    }
+    _renderMessages() {
+        var _a;
+        const messagesContainer = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-messages");
+        if (!messagesContainer)
+            return;
+        const theme = this._config.theme || DEFAULT_THEME;
+        // Find first unread agent message index
+        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") && !this._isMessageReadByUser(m.created_at));
+        // Build HTML with unread divider
+        const messagesHtml = this._state.messages
+            .map((msg, index) => {
+            let html = "";
+            // Add unread divider before first unread message
+            if (index === firstUnreadIndex && firstUnreadIndex > 0) {
+                html += `
+            <div style="display: flex; align-items: center; gap: 12px; margin: 8px 0;">
+              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
+              <span style="font-size: 11px; font-weight: 500; color: ${theme.primaryColor}; padding: 0 8px;">New messages</span>
+              <div style="flex: 1; height: 1px; background: ${theme.primaryColor}40;"></div>
+            </div>
+          `;
+            }
+            html += this._getMessageHTML(msg);
+            return html;
+        })
+            .join("");
+        messagesContainer.innerHTML = messagesHtml;
+        // Scroll to bottom
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+    // ============================================================================
+    // Private - Styles & HTML
+    // ============================================================================
+    _getContainerStyles() {
+        var _a;
+        const position = this._config.position || DEFAULT_POSITION;
+        const isRight = position === "bottom-right";
+        return `
+      position: fixed;
+      bottom: 20px;
+      ${isRight ? "right: 20px;" : "left: 20px;"}
+      z-index: 999999;
+      font-family: ${((_a = this._config.theme) === null || _a === void 0 ? void 0 : _a.fontFamily) || DEFAULT_THEME.fontFamily};
+    `;
+    }
+    _getBubbleStyles() {
+        const theme = this._config.theme || DEFAULT_THEME;
+        return `
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${theme.primaryColor};
+      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;
+      position: relative;
+    `;
+    }
+    _getBubbleHTML() {
+        return `
+      <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>
+      <div class="vtilt-chat-badge" style="
+        display: none;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background: #ef4444;
+        color: white;
+        font-size: 12px;
+        font-weight: 600;
+        min-width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        align-items: center;
+        justify-content: center;
+      ">0</div>
+    `;
+    }
+    _getWidgetStyles() {
+        const theme = this._config.theme || DEFAULT_THEME;
+        return `
+      display: none;
+      flex-direction: column;
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 380px;
+      height: 520px;
+      background: white;
+      border-radius: ${theme.borderRadius};
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+      overflow: hidden;
+    `;
+    }
+    _getWidgetHTML() {
+        const theme = this._config.theme || DEFAULT_THEME;
+        const greeting = this._config.greeting || "How can we help you?";
+        return `
+      <div class="vtilt-chat-header" style="
+        background: ${theme.headerBgColor};
+        color: white;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      ">
+        <div style="font-weight: 600; font-size: 16px;">${greeting}</div>
+        <button class="vtilt-chat-close" style="
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+          padding: 4px;
+        ">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="vtilt-chat-messages" style="
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      "></div>
+      
+      <div class="vtilt-chat-loader" style="
+        display: none;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+      ">
+        <div style="
+          width: 24px;
+          height: 24px;
+          border: 2px solid #e5e7eb;
+          border-top-color: ${theme.primaryColor};
+          border-radius: 50%;
+          animation: vtilt-spin 0.8s linear infinite;
+        "></div>
+      </div>
+      
+      <div class="vtilt-chat-typing" style="
+        display: none;
+        padding: 8px 16px;
+        color: #6b7280;
+        font-size: 14px;
+      ">
+        <span style="animation: vtilt-pulse 1.5s infinite;">Agent is typing...</span>
+      </div>
+      
+      <div class="vtilt-chat-input-container" style="
+        padding: 16px;
+        border-top: 1px solid #e5e7eb;
+        display: flex;
+        gap: 8px;
+      ">
+        <input
+          type="text"
+          class="vtilt-chat-input"
+          placeholder="Type a message..."
+          style="
+            flex: 1;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 10px 14px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.2s;
+          "
+        />
+        <button class="vtilt-chat-send" style="
+          background: ${theme.primaryColor};
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 10px 16px;
+          cursor: pointer;
+          font-weight: 500;
+          transition: opacity 0.2s;
+        ">Send</button>
+      </div>
+      
+      <style>
+        @keyframes vtilt-spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes vtilt-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        #vtilt-chat-bubble:hover {
+          transform: scale(1.05);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+        .vtilt-chat-input:focus {
+          border-color: ${theme.primaryColor} !important;
+        }
+        .vtilt-chat-send:hover {
+          opacity: 0.9;
+        }
+      </style>
+    `;
+    }
+    _getMessageHTML(message) {
+        const theme = this._config.theme || DEFAULT_THEME;
+        const isUser = message.sender_type === "user";
+        const isAgentOrAI = message.sender_type === "agent" || message.sender_type === "ai";
+        // Check read status
+        const isReadByAgent = isUser && this._isMessageReadByAgent(message.created_at);
+        const isUnread = isAgentOrAI && !this._isMessageReadByUser(message.created_at);
+        const bubbleStyle = isUser
+            ? `background: ${theme.userBubbleColor}; color: white; margin-left: auto;`
+            : `background: ${theme.agentBubbleColor}; color: #1f2937; margin-right: auto;${isUnread && !this._isMarkingRead ? " box-shadow: 0 0 0 2px " + theme.primaryColor + "40;" : ""}`;
+        const senderLabel = message.sender_type === "ai"
+            ? "AI Assistant"
+            : message.sender_type === "agent"
+                ? message.sender_name || "Agent"
+                : "";
+        // Read receipt SVG icons
+        const singleCheckSvg = `<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="color: #9ca3af;"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>`;
+        const doubleCheckSvg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="color: ${theme.primaryColor};"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>`;
+        // Unread badge for agent messages
+        const unreadBadge = isUnread && !this._isMarkingRead
+            ? `<span style="font-size: 10px; font-weight: 600; color: ${theme.primaryColor}; background: ${theme.primaryColor}20; padding: 2px 6px; border-radius: 9999px;">NEW</span>`
+            : "";
+        return `
+      <div style="display: flex; flex-direction: column; ${isUser ? "align-items: flex-end;" : "align-items: flex-start;"}${isUnread && !this._isMarkingRead ? " position: relative;" : ""}">
+        ${!isUser && senderLabel ? `<div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">${senderLabel}</div>` : ""}
+        <div style="
+          max-width: 80%;
+          padding: 10px 14px;
+          border-radius: 12px;
+          font-size: 14px;
+          line-height: 1.4;
+          transition: opacity 0.3s, box-shadow 0.3s;
+          ${bubbleStyle}${this._isMarkingRead && isUnread ? " opacity: 0.7;" : ""}
+        ">${this._escapeHTML(message.content)}</div>
+        <div style="font-size: 11px; color: #9ca3af; margin-top: 4px; display: flex; align-items: center; gap: 4px;">
+          ${this._formatTime(message.created_at)}
+          ${isUser ? (isReadByAgent ? doubleCheckSvg : singleCheckSvg) : unreadBadge}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Check if a message has been read by the agent using cursor comparison
+     */
+    _isMessageReadByAgent(messageCreatedAt) {
+        if (!this._state.agentLastReadAt)
+            return false;
+        return new Date(messageCreatedAt) <= new Date(this._state.agentLastReadAt);
+    }
+    // ============================================================================
+    // Private - Utilities
+    // ============================================================================
+    async _apiRequest(endpoint, options = {}) {
+        const config = this._instance.getConfig();
+        const apiHost = config.api_host || "";
+        const token = config.token || "";
+        const url = `${apiHost}${endpoint}?token=${encodeURIComponent(token)}`;
+        try {
+            const response = await fetch(url, {
+                ...options,
+                headers: {
+                    "Content-Type": "application/json",
+                    ...options.headers,
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error(`${LOGGER_PREFIX} API request failed:`, error);
+            return null;
+        }
+    }
+    _trackEvent(event, properties) {
+        this._instance.capture(event, properties);
+    }
+    _getTimeOpen() {
+        // TODO: Track actual open time
+        return 0;
+    }
+    _escapeHTML(text) {
+        if (!globals_1.document)
+            return text;
+        const div = globals_1.document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    _formatTime(isoString) {
+        const date = new Date(isoString);
+        return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    }
+}
+exports.LazyLoadedChat = LazyLoadedChat;