@v-tilt/browser 1.4.2 → 1.4.4

package/lib/extensions/chat/chat.js

@@ -1,11 +1,6 @@
 "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.
+ * Chat Widget - Lazy loaded chat implementation using Ably for real-time messaging.
  */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -51,13 +46,11 @@ class LazyLoadedChat {
         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._previousView = "list";
         this._instance = instance;
         this._config = {
             enabled: true,
@@ -86,7 +79,6 @@ class LazyLoadedChat {
         // Initialize UI
         this._createUI();
         this._attachEventListeners();
-        console.info(`${LOGGER_PREFIX} initialized`);
     }
     // ============================================================================
     // Public API - State (LazyLoadedChatInterface)
@@ -125,8 +117,9 @@ class LazyLoadedChat {
     // ============================================================================
     open() {
         var _a;
-        if (this._state.isOpen)
+        if (this._state.isOpen) {
             return;
+        }
         this._state.isOpen = true;
         this._updateUI();
         // Add opening animation
@@ -138,17 +131,15 @@ class LazyLoadedChat {
             $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",
         });
-        // Show channel list view first (multi-channel support)
-        // Only fetch channels if not already loaded
+        // Fetch channels if not already loaded
         if (this._state.channels.length === 0) {
             this.getChannels();
         }
-        // NOTE: Ably connection is now established only when entering conversation view
-        // This saves connection minutes when user is just browsing the channel list
     }
     close() {
-        if (!this._state.isOpen)
+        if (!this._state.isOpen) {
             return;
+        }
         const timeOpen = this._getTimeOpen();
         // Add closing animation
         if (this._widget) {
@@ -168,7 +159,6 @@ class LazyLoadedChat {
             $time_open_seconds: timeOpen,
             $messages_sent: this._state.messages.filter((m) => m.sender_type === "user").length,
         });
-        // Disconnect Ably when widget closes to save connection minutes
         this._disconnectRealtime();
     }
     toggle() {
@@ -190,9 +180,6 @@ class LazyLoadedChat {
     // ============================================================================
     // Public API - Channel Management (Multi-channel support)
     // ============================================================================
-    /**
-     * Fetch/refresh the list of user's channels
-     */
     async getChannels() {
         this._state.isLoading = true;
         this._updateUI();
@@ -214,9 +201,6 @@ class LazyLoadedChat {
             this._updateUI();
         }
     }
-    /**
-     * Select a channel and load its messages
-     */
     async selectChannel(channelId) {
         this._state.isLoading = true;
         this._updateUI();
@@ -228,13 +212,10 @@ class LazyLoadedChat {
                 this._state.channel = response.channel;
                 this._state.messages = response.messages || [];
                 this._state.currentView = "conversation";
-                // Initialize read cursors from channel
                 this._state.agentLastReadAt =
                     response.channel.agent_last_read_at || null;
                 this._initialUserReadAt = response.channel.user_last_read_at || null;
-                // Connect to Ably for this channel
                 this._connectRealtime();
-                // Auto-mark unread messages as read if widget is open
                 if (this._state.isOpen) {
                     this._autoMarkAsRead();
                 }
@@ -248,9 +229,6 @@ class LazyLoadedChat {
             this._updateUI();
         }
     }
-    /**
-     * Create a new channel and enter it
-     */
     async createChannel() {
         var _a;
         this._state.isLoading = true;
@@ -268,11 +246,9 @@ class LazyLoadedChat {
                 this._state.channel = response.channel;
                 this._state.messages = response.messages || [];
                 this._state.currentView = "conversation";
-                // Initialize read cursors
                 this._state.agentLastReadAt =
                     response.channel.agent_last_read_at || null;
                 this._initialUserReadAt = response.channel.user_last_read_at || null;
-                // Add new channel to the list
                 const newChannelSummary = {
                     id: response.channel.id,
                     status: response.channel.status,
@@ -285,13 +261,11 @@ class LazyLoadedChat {
                     created_at: response.channel.created_at,
                 };
                 this._state.channels.unshift(newChannelSummary);
-                // Track channel started
                 this._trackEvent(types_1.CHAT_EVENTS.STARTED, {
                     $channel_id: response.channel.id,
                     $initiated_by: "user",
                     $ai_mode: response.channel.ai_mode,
                 });
-                // Connect to Ably for this channel
                 this._connectRealtime();
             }
         }
@@ -303,13 +277,8 @@ class LazyLoadedChat {
             this._updateUI();
         }
     }
-    /**
-     * Go back to channel list from conversation view
-     */
     goToChannelList() {
-        // Disconnect Ably when leaving conversation to save connection minutes
         this._disconnectRealtime();
-        // Update the channel in the list with latest data
         if (this._state.channel) {
             const channelIndex = this._state.channels.findIndex((ch) => { var _a; return ch.id === ((_a = this._state.channel) === null || _a === void 0 ? void 0 : _a.id); });
             if (channelIndex !== -1) {
@@ -322,13 +291,13 @@ class LazyLoadedChat {
                         ? this._state.messages[this._state.messages.length - 1].content.substring(0, 100)
                         : this._state.channels[channelIndex].last_message_preview,
                     last_message_sender: this._state.messages.length > 0
-                        ? this._state.messages[this._state.messages.length - 1].sender_type
+                        ? this._state.messages[this._state.messages.length - 1]
+                            .sender_type
                         : this._state.channels[channelIndex].last_message_sender,
                     unread_count: 0, // We just viewed it
                 };
             }
         }
-        // Clear current channel state
         this._state.channel = null;
         this._state.messages = [];
         this._state.currentView = "list";
@@ -341,8 +310,9 @@ class LazyLoadedChat {
     // ============================================================================
     async sendMessage(content) {
         var _a, _b, _c, _d;
-        if (!content.trim())
+        if (!content.trim()) {
             return;
+        }
         // Ensure we're in conversation view with a channel
         if (!this._state.channel || this._state.currentView !== "conversation") {
             console.error(`${LOGGER_PREFIX} Cannot send message: not in conversation view`);
@@ -383,9 +353,6 @@ class LazyLoadedChat {
             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,
@@ -406,28 +373,22 @@ class LazyLoadedChat {
     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)
+        if (!this._state.channel || this._isMarkingRead) {
             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)
+        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)
+        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.read, {
             method: "POST",
             body: JSON.stringify({
@@ -437,23 +398,19 @@ class LazyLoadedChat {
             }),
         })
             .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);
+            .catch(() => {
             this._isMarkingRead = false;
             this._updateUI();
         });
     }
-    /**
-     * Check if a message has been read by the user (using initial cursor)
-     */
     _isMessageReadByUser(messageCreatedAt) {
-        if (!this._initialUserReadAt)
+        if (!this._initialUserReadAt) {
             return false;
+        }
         return new Date(messageCreatedAt) <= new Date(this._initialUserReadAt);
     }
     // ============================================================================
@@ -463,46 +420,44 @@ class LazyLoadedChat {
         this._messageCallbacks.push(callback);
         return () => {
             const index = this._messageCallbacks.indexOf(callback);
-            if (index > -1)
+            if (index > -1) {
                 this._messageCallbacks.splice(index, 1);
+            }
         };
     }
     onTyping(callback) {
         this._typingCallbacks.push(callback);
         return () => {
             const index = this._typingCallbacks.indexOf(callback);
-            if (index > -1)
+            if (index > -1) {
                 this._typingCallbacks.splice(index, 1);
+            }
         };
     }
     onConnectionChange(callback) {
         this._connectionCallbacks.push(callback);
         return () => {
             const index = this._connectionCallbacks.indexOf(callback);
-            if (index > -1)
+            if (index > -1) {
                 this._connectionCallbacks.splice(index, 1);
+            }
         };
     }
     // ============================================================================
     // Public API - Lifecycle
     // ============================================================================
     destroy() {
-        // Disconnect Ably
+        var _a;
         this._disconnectRealtime();
-        // Clear timers
-        if (this._typingTimeout)
-            clearTimeout(this._typingTimeout);
-        if (this._typingDebounce)
+        if (this._typingDebounce) {
             clearTimeout(this._typingDebounce);
-        // Remove DOM elements
-        if (this._container && this._container.parentNode) {
+        }
+        if ((_a = this._container) === null || _a === void 0 ? void 0 : _a.parentNode) {
             this._container.parentNode.removeChild(this._container);
         }
-        // Clear callbacks
         this._messageCallbacks = [];
         this._typingCallbacks = [];
         this._connectionCallbacks = [];
-        console.info(`${LOGGER_PREFIX} destroyed`);
     }
     // ============================================================================
     // Private - Ably Realtime Connection
@@ -527,7 +482,6 @@ class LazyLoadedChat {
                 this._connectionState = "error";
                 return;
             }
-            // Create Ably client with token auth
             this._ably = new ably_1.default.Realtime({
                 authCallback: async (_, callback) => {
                     var _a;
@@ -552,37 +506,25 @@ class LazyLoadedChat {
                 },
                 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);
+                this._handleNewMessage(msg.data);
             });
-            // Subscribe to read cursor events
             this._ablyChannel.subscribe("read", (msg) => {
-                const event = msg.data;
-                this._handleReadCursorEvent(event);
+                this._handleReadCursorEvent(msg.data);
+            });
+            this._typingChannel = this._ably.channels.get(`${ablyChannelName}:typing`);
+            this._typingChannel.subscribe("typing", (msg) => {
+                this._handleTypingEvent(msg.data);
             });
-            // 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";
@@ -594,7 +536,6 @@ class LazyLoadedChat {
                 this._state.isConnected = false;
                 this._notifyConnectionChange(false);
             });
-            // Initial connection
             this._ably.connect();
         }
         catch (error) {
@@ -624,14 +565,12 @@ class LazyLoadedChat {
         return parts[0] || "";
     }
     _handleNewMessage(message) {
-        // Avoid duplicates by ID
-        if (this._state.messages.some((m) => m.id === message.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
+        }
+        // Skip own messages but replace temp message if present
         if (message.sender_type === "user" &&
             message.sender_id === this._distinctId) {
-            // 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");
@@ -641,19 +580,14 @@ class LazyLoadedChat {
             }
             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,
@@ -661,32 +595,27 @@ class LazyLoadedChat {
                 $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")
+        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")
+        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) {
@@ -696,59 +625,49 @@ class LazyLoadedChat {
     // Private - UI
     // ============================================================================
     _createUI() {
-        if (!globals_1.document)
+        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;
-        // Bubble click
+        var _a, _b, _c;
         (_a = this._bubble) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.toggle());
-        // Close button (initial attachment - re-attached in _updateHeader)
-        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());
-        // Note: Channel list and conversation listeners are attached dynamically
-        // in _attachChannelListListeners() and _attachConversationListeners()
+        (_c = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-close")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", () => this.close());
     }
     _handleUserTyping() {
-        // Don't send typing if not connected to Ably
-        if (!this._typingChannel)
+        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)
+        if (!this._typingChannel) {
             return;
+        }
         try {
             this._typingChannel.publish("typing", {
                 sender_type: "user",
@@ -757,18 +676,18 @@ class LazyLoadedChat {
                 is_typing: isTyping,
             });
         }
-        catch (err) {
-            console.error(`${LOGGER_PREFIX} Failed to send typing indicator:`, err);
+        catch (_a) {
+            // Silently fail
         }
     }
     _handleSend() {
         var _a;
         const input = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-input");
-        if (!input)
+        if (!input) {
             return;
+        }
         const content = input.value.trim();
         if (content) {
-            // Stop typing indicator
             if (this._isUserTyping) {
                 this._isUserTyping = false;
                 this._sendTypingIndicator(false);
@@ -782,8 +701,9 @@ class LazyLoadedChat {
         }
     }
     _updateUI() {
-        if (!this._container || !this._widget || !this._bubble)
+        if (!this._container || !this._widget || !this._bubble) {
             return;
+        }
         // Update visibility
         this._container.style.display = this._state.isVisible ? "block" : "none";
         // Update widget open state
@@ -795,18 +715,9 @@ class LazyLoadedChat {
                 this._state.unreadCount > 0 ? "flex" : "none";
             badge.textContent = String(this._state.unreadCount);
         }
-        // Detect view change for animation
-        const viewChanged = this._previousView !== this._state.currentView;
-        const animationClass = viewChanged
-            ? this._state.currentView === "conversation"
-                ? "vtilt-view-enter-right"
-                : "vtilt-view-enter-left"
-            : "";
         // Update content based on current view
         const contentContainer = this._widget.querySelector(".vtilt-chat-content");
         if (contentContainer) {
-            // Remove previous animation classes
-            contentContainer.classList.remove("vtilt-view-enter-right", "vtilt-view-enter-left");
             if (this._state.currentView === "list") {
                 contentContainer.innerHTML = this._getChannelListHTML();
                 this._attachChannelListListeners();
@@ -814,18 +725,9 @@ class LazyLoadedChat {
             else {
                 contentContainer.innerHTML = this._getConversationHTML();
                 this._attachConversationListeners();
-                // Render messages in conversation view
                 this._renderMessages();
             }
-            // Add animation class if view changed
-            if (animationClass) {
-                // Force reflow to restart animation
-                void contentContainer.offsetWidth;
-                contentContainer.classList.add(animationClass);
-            }
         }
-        // Update previous view
-        this._previousView = this._state.currentView;
         // Update header based on view
         this._updateHeader();
         // Update loading state
@@ -851,8 +753,9 @@ class LazyLoadedChat {
     _updateHeader() {
         var _a, _b;
         const header = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-header");
-        if (!header)
+        if (!header) {
             return;
+        }
         const greeting = this._config.greeting || "Messages";
         const primary = this._theme.primaryColor;
         if (this._state.currentView === "list") {
@@ -979,7 +882,6 @@ class LazyLoadedChat {
           justify-content: center;
           padding: 48px 24px;
           text-align: center;
-          animation: vtilt-fadein 0.4s ease;
         ">
           <div style="
             width: 72px;
@@ -990,14 +892,13 @@ class LazyLoadedChat {
             display: flex;
             align-items: center;
             justify-content: center;
-            animation: vtilt-bubble-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
           ">
             <svg width="36" height="36" viewBox="0 0 24 24" fill="white">
               <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
             </svg>
           </div>
-          <div style="font-size: 18px; font-weight: 600; color: #000000; margin-bottom: 8px; animation: vtilt-fadein 0.4s ease 0.15s both;">No conversations yet</div>
-          <div style="font-size: 15px; color: #666666; margin-bottom: 28px; line-height: 1.5; max-width: 280px; animation: vtilt-fadein 0.4s ease 0.2s both;">Questions? We're here to help. Start a conversation with us.</div>
+          <div style="font-size: 18px; font-weight: 600; color: #000000; margin-bottom: 8px;">No conversations yet</div>
+          <div style="font-size: 15px; color: #666666; margin-bottom: 28px; line-height: 1.5; max-width: 280px;">Questions? We're here to help. Start a conversation with us.</div>
           <button class="vtilt-chat-new-channel" style="
             background: ${primary};
             color: white;
@@ -1013,7 +914,6 @@ class LazyLoadedChat {
             align-items: center;
             gap: 10px;
             box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
-            animation: vtilt-fadein 0.4s ease 0.25s both;
           ">
             Send us a message
             <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
@@ -1024,7 +924,7 @@ class LazyLoadedChat {
       `;
         }
         const channelsHtml = this._state.channels
-            .map((ch, index) => this._getChannelItemHTML(ch, index))
+            .map((ch) => this._getChannelItemHTML(ch))
             .join("");
         return `
       <div style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;">
@@ -1061,13 +961,12 @@ class LazyLoadedChat {
       </div>
     `;
     }
-    _getChannelItemHTML(channel, index = 0) {
+    _getChannelItemHTML(channel) {
         const hasUnread = channel.unread_count > 0;
         const timeStr = this._formatRelativeTime(channel.last_message_at || channel.created_at);
         const preview = channel.last_message_preview || "No messages yet";
         const primary = this._theme.primaryColor;
         const senderPrefix = channel.last_message_sender === "user" ? "You: " : "";
-        const animationDelay = Math.min(index * 0.05, 0.3); // Max 300ms total delay
         return `
       <div class="vtilt-channel-item" data-channel-id="${channel.id}" style="
         padding: 14px 16px;
@@ -1079,7 +978,6 @@ class LazyLoadedChat {
         gap: 12px;
         background: white;
         border-bottom: 1px solid #EEEEEE;
-        animation: vtilt-item-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) ${animationDelay}s both;
       ">
         <div style="
           width: 48px;
@@ -1113,15 +1011,17 @@ class LazyLoadedChat {
               flex: 1;
               min-width: 0;
               line-height: 1.4;
-            ">${senderPrefix}${this._escapeHTML(preview)}${channel.status === "closed" ? ' · Closed' : ""}</div>
-            ${hasUnread ? `<div style="
+            ">${senderPrefix}${this._escapeHTML(preview)}${channel.status === "closed" ? " · Closed" : ""}</div>
+            ${hasUnread
+            ? `<div style="
               min-width: 10px;
               width: 10px;
               height: 10px;
               background: ${primary};
               border-radius: 50%;
               flex-shrink: 0;
-            "></div>` : ""}
+            "></div>`
+            : ""}
           </div>
         </div>
       </div>
@@ -1224,47 +1124,28 @@ class LazyLoadedChat {
     `;
     }
     _attachChannelListListeners() {
-        var _a, _b;
-        // New channel button
-        const newChannelBtn = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-new-channel");
-        newChannelBtn === null || newChannelBtn === void 0 ? void 0 : newChannelBtn.addEventListener("click", () => this.createChannel());
-        // Channel items
-        const channelItems = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelectorAll(".vtilt-channel-item");
-        const isTouchDevice = globals_1.window && ("ontouchstart" in globals_1.window || navigator.maxTouchPoints > 0);
-        channelItems === null || channelItems === void 0 ? void 0 : channelItems.forEach((item) => {
+        var _a, _b, _c, _d;
+        (_b = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-new-channel")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", () => this.createChannel());
+        (_d = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".vtilt-channel-item")) === null || _d === void 0 ? void 0 : _d.forEach((item) => {
             item.addEventListener("click", () => {
                 const channelId = item.getAttribute("data-channel-id");
-                if (channelId)
+                if (channelId) {
                     this.selectChannel(channelId);
+                }
             });
-            // Hover effect (only on non-touch devices)
-            if (!isTouchDevice) {
-                item.addEventListener("mouseenter", () => {
-                    item.style.background = "#F5F5F5";
-                });
-                item.addEventListener("mouseleave", () => {
-                    item.style.background = "white";
-                });
-            }
         });
     }
     _attachConversationListeners() {
-        var _a, _b;
-        // Send button
-        const sendBtn = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
-        sendBtn === null || sendBtn === void 0 ? void 0 : sendBtn.addEventListener("click", () => this._handleSend());
-        // Input enter key and typing indicator
-        const input = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-input");
+        var _a, _b, _c;
+        (_b = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", () => this._handleSend());
+        const input = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.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();
-        });
+        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => this._handleUserTyping());
     }
     _formatRelativeTime(isoString) {
         const date = new Date(isoString);
@@ -1273,52 +1154,43 @@ class LazyLoadedChat {
         const diffMins = Math.floor(diffMs / 60000);
         const diffHours = Math.floor(diffMs / 3600000);
         const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1)
+        if (diffMins < 1) {
             return "Just now";
-        if (diffMins < 60)
+        }
+        if (diffMins < 60) {
             return `${diffMins}m ago`;
-        if (diffHours < 24)
+        }
+        if (diffHours < 24) {
             return `${diffHours}h ago`;
-        if (diffDays < 7)
+        }
+        if (diffDays < 7) {
             return `${diffDays}d ago`;
+        }
         return date.toLocaleDateString();
     }
     _renderMessages() {
         var _a;
-        const messagesContainer = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-messages");
-        if (!messagesContainer)
+        const container = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-messages");
+        if (!container) {
             return;
+        }
         const primary = this._theme.primaryColor;
-        // 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: 12px 0;">
-              <div style="flex: 1; height: 1px; background: #DDDDDD;"></div>
-              <span style="font-size: 12px; font-weight: 600; color: ${primary};">New</span>
-              <div style="flex: 1; height: 1px; background: #DDDDDD;"></div>
-            </div>
-          `;
-            }
-            html += this._getMessageHTML(msg);
-            return html;
+        const html = this._state.messages
+            .map((msg, i) => {
+            const divider = i === firstUnreadIndex && firstUnreadIndex > 0
+                ? `<div style="display:flex;align-items:center;gap:12px;margin:12px 0"><div style="flex:1;height:1px;background:#DDD"></div><span style="font-size:12px;font-weight:600;color:${primary}">New</span><div style="flex:1;height:1px;background:#DDD"></div></div>`
+                : "";
+            return divider + this._getMessageHTML(msg);
         })
             .join("");
-        messagesContainer.innerHTML = messagesHtml;
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        container.innerHTML = html;
+        container.scrollTop = container.scrollHeight;
     }
     // ============================================================================
     // Private - Styles & HTML
     // ============================================================================
-    _isMobile() {
-        return globals_1.window ? globals_1.window.innerWidth < 480 : false;
-    }
     _getContainerStyles() {
         const isRight = (this._config.position || DEFAULT_POSITION) === "bottom-right";
         return `
@@ -1544,7 +1416,9 @@ class LazyLoadedChat {
         </div>
       `;
         }
-        const senderLabel = isAi ? "AI Assistant" : (message.sender_name || "Support");
+        const senderLabel = isAi
+            ? "AI Assistant"
+            : message.sender_name || "Support";
         return `
       <div class="vtilt-msg" style="
         display: flex;
@@ -1584,12 +1458,10 @@ class LazyLoadedChat {
       </div>
     `;
     }
-    /**
-     * Check if a message has been read by the agent using cursor comparison
-     */
     _isMessageReadByAgent(messageCreatedAt) {
-        if (!this._state.agentLastReadAt)
+        if (!this._state.agentLastReadAt) {
             return false;
+        }
         return new Date(messageCreatedAt) <= new Date(this._state.agentLastReadAt);
     }
     // ============================================================================
@@ -1628,8 +1500,9 @@ class LazyLoadedChat {
         return 0;
     }
     _escapeHTML(text) {
-        if (!globals_1.document)
+        if (!globals_1.document) {
             return text;
+        }
         const div = globals_1.document.createElement("div");
         div.textContent = text;
         return div.innerHTML;