@v-tilt/browser 1.6.0 → 1.7.2

package/lib/extensions/chat/chat.js

@@ -1,1891 +0,0 @@
-"use strict";
-/**
- * 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 };
-};
-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: "#7B68EE", // Intercom-like purple
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    borderRadius: "16px",
-};
-// API endpoints
-const API = {
-    channels: "/api/chat/widget/channels",
-    messages: "/api/chat/widget/messages",
-    read: "/api/chat/widget/read",
-    ablyToken: "/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._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,
-            // Multi-channel support
-            currentView: "list",
-            channels: [],
-            // Current channel (when in conversation view)
-            channel: null,
-            messages: [],
-            isTyping: false,
-            typingSender: null,
-            typingSenderType: null,
-            agentLastReadAt: null, // Read cursor from agent
-        };
-        // Initialize UI
-        this._createUI();
-        this._attachEventListeners();
-    }
-    // ============================================================================
-    // 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;
-    }
-    get channels() {
-        return this._state.channels;
-    }
-    get currentView() {
-        return this._state.currentView;
-    }
-    // Theme getter to avoid repeated DEFAULT_THEME fallback
-    get _theme() {
-        return this._config.theme || DEFAULT_THEME;
-    }
-    // Distinct ID getter for convenience
-    get _distinctId() {
-        return this._instance.getDistinctId() || "";
-    }
-    // ============================================================================
-    // Public API - Widget Control
-    // ============================================================================
-    open() {
-        var _a;
-        if (this._state.isOpen) {
-            return;
-        }
-        this._state.isOpen = true;
-        this._updateUI();
-        // Add opening animation
-        if (this._widget) {
-            this._widget.classList.remove("vtilt-closing");
-            this._widget.classList.add("vtilt-opening");
-        }
-        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",
-        });
-        // Fetch channels if not already loaded
-        if (this._state.channels.length === 0) {
-            this.getChannels();
-        }
-    }
-    close() {
-        if (!this._state.isOpen) {
-            return;
-        }
-        const timeOpen = this._getTimeOpen();
-        // Add closing animation
-        if (this._widget) {
-            this._widget.classList.remove("vtilt-opening");
-            this._widget.classList.add("vtilt-closing");
-            // Hide after animation completes
-            setTimeout(() => {
-                this._state.isOpen = false;
-                this._updateUI();
-            }, 200);
-        }
-        else {
-            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,
-        });
-        this._disconnectRealtime();
-    }
-    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 - Channel Management (Multi-channel support)
-    // ============================================================================
-    async getChannels() {
-        this._state.isLoading = true;
-        this._updateUI();
-        try {
-            const response = await this._apiRequest(`${API.channels}?distinct_id=${encodeURIComponent(this._distinctId)}`, {
-                method: "GET",
-            });
-            if (response) {
-                this._state.channels = response.channels || [];
-                // For channel list, we need to calculate unread count based on user_last_read_at
-                // But since we don't have messages here, we'll use unread_count from server
-                // (which should be calculated server-side based on user_last_read_at)
-                // For now, sum up the unread_count from channels
-                this._state.unreadCount = this._state.channels.reduce((sum, ch) => sum + (ch.unread_count || 0), 0);
-            }
-        }
-        catch (error) {
-            console.error(`${LOGGER_PREFIX} Failed to fetch channels:`, error);
-        }
-        finally {
-            this._state.isLoading = false;
-            this._updateUI();
-        }
-    }
-    async selectChannel(channelId) {
-        this._state.isLoading = true;
-        this._updateUI();
-        try {
-            const response = await this._apiRequest(`${API.channels}/${channelId}?distinct_id=${encodeURIComponent(this._distinctId)}`, {
-                method: "GET",
-            });
-            if (response) {
-                this._state.channel = response.channel;
-                this._state.messages = response.messages || [];
-                this._state.currentView = "conversation";
-                this._state.agentLastReadAt =
-                    response.channel.agent_last_read_at || null;
-                this._initialUserReadAt = response.channel.user_last_read_at || null;
-                // Calculate unread count based on messages and user_last_read_at
-                this._state.unreadCount = this._calculateUnreadCount();
-                this._connectRealtime();
-                if (this._state.isOpen) {
-                    this._autoMarkAsRead();
-                }
-            }
-        }
-        catch (error) {
-            console.error(`${LOGGER_PREFIX} Failed to select channel:`, error);
-        }
-        finally {
-            this._state.isLoading = false;
-            this._updateUI();
-        }
-    }
-    async createChannel() {
-        var _a;
-        this._state.isLoading = true;
-        this._updateUI();
-        try {
-            const response = await this._apiRequest(API.channels, {
-                method: "POST",
-                body: JSON.stringify({
-                    distinct_id: this._distinctId,
-                    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 || [];
-                this._state.currentView = "conversation";
-                this._state.agentLastReadAt =
-                    response.channel.agent_last_read_at || null;
-                this._initialUserReadAt = response.channel.user_last_read_at || null;
-                // Calculate unread count based on messages and user_last_read_at
-                this._state.unreadCount = this._calculateUnreadCount();
-                const newChannelSummary = {
-                    id: response.channel.id,
-                    status: response.channel.status,
-                    ai_mode: response.channel.ai_mode,
-                    last_message_at: response.channel.last_message_at,
-                    last_message_preview: response.channel.last_message_preview,
-                    last_message_sender: response.channel.last_message_sender,
-                    unread_count: this._state.unreadCount, // Use calculated count
-                    user_last_read_at: response.channel.user_last_read_at,
-                    created_at: response.channel.created_at,
-                };
-                this._state.channels.unshift(newChannelSummary);
-                this._trackEvent(types_1.CHAT_EVENTS.STARTED, {
-                    $channel_id: response.channel.id,
-                    $initiated_by: "user",
-                    $ai_mode: response.channel.ai_mode,
-                });
-                this._connectRealtime();
-            }
-        }
-        catch (error) {
-            console.error(`${LOGGER_PREFIX} Failed to create channel:`, error);
-        }
-        finally {
-            this._state.isLoading = false;
-            this._updateUI();
-        }
-    }
-    goToChannelList() {
-        this._disconnectRealtime();
-        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) {
-                this._state.channels[channelIndex] = {
-                    ...this._state.channels[channelIndex],
-                    last_message_at: this._state.messages.length > 0
-                        ? this._state.messages[this._state.messages.length - 1].created_at
-                        : this._state.channels[channelIndex].last_message_at,
-                    last_message_preview: this._state.messages.length > 0
-                        ? 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.channels[channelIndex].last_message_sender,
-                    unread_count: 0, // We just viewed it
-                };
-            }
-        }
-        this._state.channel = null;
-        this._state.messages = [];
-        this._state.currentView = "list";
-        this._state.isTyping = false;
-        this._state.typingSender = null;
-        this._state.typingSenderType = null;
-        this._updateUI();
-    }
-    // ============================================================================
-    // Public API - Messaging
-    // ============================================================================
-    async sendMessage(content) {
-        var _a, _b, _c, _d;
-        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`);
-            return;
-        }
-        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._distinctId || 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 config = this._instance.getConfig();
-            const apiHost = config.api_host || "";
-            const token = config.token || "";
-            const separator = API.messages.includes("?") ? "&" : "?";
-            const url = `${apiHost}${API.messages}${separator}token=${encodeURIComponent(token)}`;
-            const response = await fetch(url, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    channel_id: channelId,
-                    distinct_id: this._distinctId,
-                    content,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error(`API error: ${response.status}`);
-            }
-            // Check if response is a stream (AI enabled) or JSON (AI disabled)
-            const contentType = response.headers.get("content-type") || "";
-            const isStream = contentType.includes("text/plain");
-            if (isStream) {
-                // Handle streaming AI response
-                await this._handleStreamingResponse(response, tempMessage, channelId);
-            }
-            else {
-                // Handle JSON response (AI disabled)
-                const data = await response.json();
-                // Replace temp message with real one
-                const index = this._state.messages.findIndex((m) => m.id === tempMessage.id);
-                if (index !== -1 && (data === null || data === void 0 ? void 0 : data.message)) {
-                    this._state.messages[index] = data.message;
-                }
-                this._trackEvent(types_1.CHAT_EVENTS.MESSAGE_SENT, {
-                    $channel_id: channelId,
-                    $message_id: (_b = data === null || data === void 0 ? void 0 : data.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();
-    }
-    _autoMarkAsRead() {
-        if (!this._state.channel || this._isMarkingRead) {
-            return;
-        }
-        const latestMessage = this._state.messages[this._state.messages.length - 1];
-        if (!latestMessage) {
-            return;
-        }
-        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();
-        this._apiRequest(API.read, {
-            method: "POST",
-            body: JSON.stringify({
-                channel_id: this._state.channel.id,
-                distinct_id: this._distinctId,
-                read_at: latestMessage.created_at,
-            }),
-        })
-            .then(() => {
-            this._initialUserReadAt = latestMessage.created_at;
-            // Recalculate unread count after marking as read
-            this._state.unreadCount = this._calculateUnreadCount();
-            this._isMarkingRead = false;
-            this._updateUI();
-        })
-            .catch(() => {
-            this._isMarkingRead = false;
-            this._updateUI();
-        });
-    }
-    _isMessageReadByUser(messageCreatedAt) {
-        if (!this._initialUserReadAt) {
-            return false;
-        }
-        return new Date(messageCreatedAt) <= new Date(this._initialUserReadAt);
-    }
-    /**
-     * Calculate unread count based on messages and user_last_read_at
-     * (unread agent/AI messages for the user)
-     */
-    _calculateUnreadCount() {
-        if (!this._state.channel || !this._initialUserReadAt) {
-            return 0;
-        }
-        return this._state.messages.filter((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
-            new Date(m.created_at) > new Date(this._initialUserReadAt)).length;
-    }
-    // ============================================================================
-    // 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() {
-        var _a;
-        this._disconnectRealtime();
-        if (this._typingDebounce) {
-            clearTimeout(this._typingDebounce);
-        }
-        if ((_a = this._container) === null || _a === void 0 ? void 0 : _a.parentNode) {
-            this._container.parentNode.removeChild(this._container);
-        }
-        this._messageCallbacks = [];
-        this._typingCallbacks = [];
-        this._connectionCallbacks = [];
-    }
-    // ============================================================================
-    // 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.ablyToken, {
-                method: "POST",
-                body: JSON.stringify({
-                    distinct_id: this._distinctId,
-                    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;
-            }
-            this._ably = new ably_1.default.Realtime({
-                authCallback: async (_, callback) => {
-                    var _a;
-                    try {
-                        const refreshResponse = await this._apiRequest(API.ablyToken, {
-                            method: "POST",
-                            body: JSON.stringify({
-                                distinct_id: this._distinctId,
-                                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",
-            });
-            await this._ably.auth.authorize(tokenResponse.tokenRequest);
-            const config = this._instance.getConfig();
-            const projectId = config.projectId || this._extractProjectId(config.token || "");
-            const ablyChannelName = `chat:${projectId}:${this._state.channel.id}`;
-            this._ablyChannel = this._ably.channels.get(ablyChannelName);
-            this._ablyChannel.subscribe("message", (msg) => {
-                this._handleNewMessage(msg.data);
-            });
-            this._ablyChannel.subscribe("read", (msg) => {
-                this._handleReadCursorEvent(msg.data);
-            });
-            this._typingChannel = this._ably.channels.get(`${ablyChannelName}:typing`);
-            this._typingChannel.subscribe("typing", (msg) => {
-                this._handleTypingEvent(msg.data);
-            });
-            this._ably.connection.on("connected", () => {
-                this._connectionState = "connected";
-                this._state.isConnected = true;
-                this._notifyConnectionChange(true);
-            });
-            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);
-            });
-            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) {
-        // If this is an AI message and we have a temp AI message, replace it
-        if (message.sender_type === "ai") {
-            const tempAiIndex = this._state.messages.findIndex((m) => m.id.startsWith("temp-ai-"));
-            if (tempAiIndex !== -1) {
-                // Replace temp message with real one
-                this._state.messages[tempAiIndex] = message;
-                // Continue processing (tracking, callbacks, etc.)
-            }
-            else if (this._state.messages.some((m) => m.id === message.id)) {
-                // Already have this message, skip
-                return;
-            }
-            else {
-                // New AI message, add it
-                this._state.messages.push(message);
-            }
-        }
-        else if (this._state.messages.some((m) => m.id === message.id)) {
-            // Already have this message, skip
-            return;
-        }
-        else if (message.sender_type === "user" &&
-            message.sender_id === this._distinctId) {
-            // Skip own messages but replace temp message 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;
-        }
-        else {
-            // New message, add it
-            this._state.messages.push(message);
-        }
-        if (message.sender_type !== "user") {
-            if (!this._state.isOpen) {
-                this._state.unreadCount++;
-            }
-            else {
-                setTimeout(() => this._autoMarkAsRead(), 100);
-            }
-            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,
-            });
-        }
-        this._state.isTyping = false;
-        this._state.typingSender = null;
-        this._state.typingSenderType = null;
-        this._messageCallbacks.forEach((cb) => cb(message));
-        this._updateUI();
-    }
-    _handleTypingEvent(event) {
-        if (event.sender_type === "user") {
-            return;
-        }
-        // Track sender type for proper display
-        this._state.isTyping = event.is_typing;
-        this._state.typingSenderType = event.is_typing
-            ? event.sender_type
-            : null;
-        // Only set senderName for non-AI types (AI uses "AI is thinking" instead)
-        const senderName = event.sender_type === "ai"
-            ? null
-            : event.sender_name || (event.sender_type === "agent" ? "Agent" : null);
-        this._state.typingSender = event.is_typing ? senderName : null;
-        this._typingCallbacks.forEach((cb) => cb(event.is_typing, senderName || ""));
-        this._updateUI();
-    }
-    _handleReadCursorEvent(event) {
-        if (event.reader_type !== "agent") {
-            return;
-        }
-        this._state.agentLastReadAt = event.read_at;
-        this._updateUI();
-    }
-    _notifyConnectionChange(connected) {
-        this._connectionCallbacks.forEach((cb) => cb(connected));
-    }
-    // ============================================================================
-    // Private - UI
-    // ============================================================================
-    _createUI() {
-        if (!globals_1.document) {
-            return;
-        }
-        this._container = globals_1.document.createElement("div");
-        this._container.id = "vtilt-chat-container";
-        this._container.setAttribute("style", this._getContainerStyles());
-        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);
-        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);
-        globals_1.document.body.appendChild(this._container);
-    }
-    _attachEventListeners() {
-        var _a, _b, _c;
-        (_a = this._bubble) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.toggle());
-        (_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() {
-        if (!this._typingChannel) {
-            return;
-        }
-        if (!this._isUserTyping) {
-            this._isUserTyping = true;
-            this._sendTypingIndicator(true);
-        }
-        if (this._typingDebounce) {
-            clearTimeout(this._typingDebounce);
-        }
-        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._distinctId,
-                sender_name: null,
-                is_typing: isTyping,
-            });
-        }
-        catch (_a) {
-            // Silently fail
-        }
-    }
-    _handleSend() {
-        var _a, _b;
-        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) {
-            if (this._isUserTyping) {
-                this._isUserTyping = false;
-                this._sendTypingIndicator(false);
-            }
-            if (this._typingDebounce) {
-                clearTimeout(this._typingDebounce);
-                this._typingDebounce = null;
-            }
-            this.sendMessage(content);
-            input.value = "";
-            // Reset textarea height after sending
-            input.style.height = "auto";
-            input.style.height = "60px";
-            // Update send button state after sending
-            const sendButton = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-send");
-            if (sendButton) {
-                const primary = this._theme.primaryColor;
-                sendButton.disabled = true;
-                sendButton.style.background = "#E5E5E5";
-                sendButton.style.color = "#999999";
-                sendButton.style.cursor = "not-allowed";
-                sendButton.style.opacity = "0.6";
-            }
-        }
-    }
-    _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 content based on current view
-        const contentContainer = this._widget.querySelector(".vtilt-chat-content");
-        if (contentContainer) {
-            if (this._state.currentView === "list") {
-                contentContainer.innerHTML = this._getChannelListHTML();
-                this._attachChannelListListeners();
-            }
-            else {
-                contentContainer.innerHTML = this._getConversationHTML();
-                this._attachConversationListeners();
-                this._renderMessages();
-            }
-        }
-        // Update header based on view
-        this._updateHeader();
-        // Update loading state
-        const loader = this._widget.querySelector(".vtilt-chat-loader");
-        if (loader) {
-            loader.style.display = this._state.isLoading
-                ? "flex"
-                : "none";
-        }
-        // Update typing indicator (only in conversation view)
-        const typing = this._widget.querySelector(".vtilt-chat-typing");
-        if (typing) {
-            typing.style.display =
-                this._state.isTyping && this._state.currentView === "conversation"
-                    ? "flex"
-                    : "none";
-            const typingText = typing.querySelector(".vtilt-chat-typing-text");
-            if (typingText && this._state.isTyping) {
-                // Show "AI is thinking..." for AI, otherwise show sender name
-                if (this._state.typingSenderType === "ai") {
-                    typingText.textContent = "AI is thinking...";
-                }
-                else if (this._state.typingSender) {
-                    typingText.textContent = `${this._state.typingSender} is typing...`;
-                }
-                else {
-                    typingText.textContent = "Agent is typing...";
-                }
-            }
-        }
-    }
-    _updateHeader() {
-        var _a, _b;
-        const header = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-header");
-        if (!header) {
-            return;
-        }
-        const greeting = this._config.greeting || "Messages";
-        const primary = this._theme.primaryColor;
-        if (this._state.currentView === "list") {
-            header.style.cssText = `
-        background: #ffffff;
-        border-bottom: 1px solid #E5E5E5;
-        padding: 18px 16px;
-        padding-top: max(18px, env(safe-area-inset-top, 18px));
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 60px;
-        box-sizing: border-box;
-        flex-shrink: 0;
-      `;
-            header.innerHTML = `
-        <div style="font-weight: 600; font-size: 17px; color: #000000;">${greeting}</div>
-        <button class="vtilt-chat-close" style="
-          background: transparent;
-          border: none;
-          color: #666666;
-          cursor: pointer;
-          padding: 6px;
-          margin: -6px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          -webkit-tap-highlight-color: transparent;
-        ">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6L6 18M6 6l12 12"></path>
-          </svg>
-        </button>
-      `;
-        }
-        else {
-            const isAiMode = (_b = this._state.channel) === null || _b === void 0 ? void 0 : _b.ai_mode;
-            header.style.cssText = `
-        background: #ffffff;
-        border-bottom: 1px solid #E5E5E5;
-        padding: 12px 16px;
-        padding-top: max(12px, env(safe-area-inset-top, 12px));
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        min-height: 60px;
-        box-sizing: border-box;
-        flex-shrink: 0;
-      `;
-            header.innerHTML = `
-        <button class="vtilt-chat-back" style="
-          background: transparent;
-          border: none;
-          color: #666666;
-          cursor: pointer;
-          padding: 6px;
-          margin-left: -6px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          -webkit-tap-highlight-color: transparent;
-        ">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M15 18l-6-6 6-6"></path>
-          </svg>
-        </button>
-        <div style="
-          width: 44px;
-          height: 44px;
-          border-radius: 50%;
-          background: ${isAiMode ? primary : "#DEDEDE"};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-        ">
-          ${isAiMode
-                ? `<svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
-                : `<svg width="22" height="22" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
-        </div>
-        <div style="flex: 1; min-width: 0;">
-          <div style="font-weight: 600; font-size: 16px; color: #000000;">${isAiMode ? "AI Assistant" : "Support"}</div>
-          <div style="font-size: 13px; color: #16A34A; display: flex; align-items: center; gap: 5px; margin-top: 1px;">
-            <span style="width: 7px; height: 7px; background: #16A34A; border-radius: 50%;"></span>
-            Online
-          </div>
-        </div>
-        <button class="vtilt-chat-close" style="
-          background: transparent;
-          border: none;
-          color: #666666;
-          cursor: pointer;
-          padding: 6px;
-          margin-right: -6px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          -webkit-tap-highlight-color: transparent;
-        ">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6L6 18M6 6l12 12"></path>
-          </svg>
-        </button>
-      `;
-        }
-        // Re-attach header event listeners
-        const closeBtn = header.querySelector(".vtilt-chat-close");
-        closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener("click", () => this.close());
-        const backBtn = header.querySelector(".vtilt-chat-back");
-        backBtn === null || backBtn === void 0 ? void 0 : backBtn.addEventListener("click", () => this.goToChannelList());
-    }
-    _getChannelListHTML() {
-        const primary = this._theme.primaryColor;
-        if (this._state.channels.length === 0 && !this._state.isLoading) {
-            return `
-        <div style="
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          padding: 48px 24px;
-          text-align: center;
-        ">
-          <div style="
-            width: 72px;
-            height: 72px;
-            margin-bottom: 24px;
-            background: ${primary};
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          ">
-            <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;">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;
-            border: none;
-            border-radius: 100px;
-            padding: 14px 28px;
-            cursor: pointer;
-            font-weight: 500;
-            font-size: 15px;
-            -webkit-tap-highlight-color: transparent;
-            touch-action: manipulation;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
-          ">
-            Send us a message
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
-              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-            </svg>
-          </button>
-        </div>
-      `;
-        }
-        const channelsHtml = this._state.channels
-            .map((ch) => this._getChannelItemHTML(ch))
-            .join("");
-        return `
-      <div style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;">
-        ${channelsHtml}
-      </div>
-      <div style="
-        padding: 16px;
-        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
-        border-top: 1px solid #E5E5E5;
-      ">
-        <button class="vtilt-chat-new-channel" style="
-          width: 100%;
-          background: ${primary};
-          color: white;
-          border: none;
-          border-radius: 100px;
-          padding: 14px 24px;
-          cursor: pointer;
-          font-weight: 500;
-          font-size: 15px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 10px;
-          -webkit-tap-highlight-color: transparent;
-          touch-action: manipulation;
-          box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
-        ">
-          Send us a message
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
-            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-          </svg>
-        </button>
-      </div>
-    `;
-    }
-    _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: " : "";
-        return `
-      <div class="vtilt-channel-item" data-channel-id="${channel.id}" style="
-        padding: 14px 16px;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        touch-action: manipulation;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        background: white;
-        border-bottom: 1px solid #EEEEEE;
-      ">
-        <div style="
-          width: 48px;
-          height: 48px;
-          border-radius: 50%;
-          background: ${channel.ai_mode ? primary : "#DEDEDE"};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-        ">
-          ${channel.ai_mode
-            ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
-            : `<svg width="24" height="24" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
-        </div>
-        <div style="flex: 1; min-width: 0;">
-          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px;">
-            <div style="font-weight: ${hasUnread ? "600" : "500"}; font-size: 15px; color: #000000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-              ${channel.ai_mode ? "AI Assistant" : "Support"}
-            </div>
-            <div style="font-size: 13px; color: #888888; white-space: nowrap; flex-shrink: 0;">${timeStr}</div>
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
-            <div style="
-              font-size: 14px;
-              color: ${hasUnread ? "#333333" : "#888888"};
-              font-weight: 400;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              flex: 1;
-              min-width: 0;
-              line-height: 1.4;
-            ">${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>
-    `;
-    }
-    _getConversationHTML() {
-        const primary = this._theme.primaryColor;
-        return `
-      <div class="vtilt-chat-messages" style="
-        flex: 1;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        padding: 20px 16px 24px 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        min-height: 0;
-        background: #FAFAFA;
-      "></div>
-      
-      <div class="vtilt-chat-typing" style="
-        display: none;
-        padding: 12px 16px;
-        background: #FAFAFA;
-        align-items: center;
-      ">
-        <div style="
-          display: flex;
-          align-items: center;
-          gap: 6px;
-        ">
-          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0s;"></span>
-          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0.2s;"></span>
-          <span style="width: 7px; height: 7px; background: #999; border-radius: 50%; animation: vtilt-typing 1.2s infinite 0.4s;"></span>
-          <span class="vtilt-chat-typing-text" style="
-            font-size: 12px;
-            color: #666;
-            font-weight: 500;
-            white-space: nowrap;
-            margin-left: 2px;
-          ">Agent is typing...</span>
-        </div>
-      </div>
-      <style>
-        @keyframes vtilt-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
-      </style>
-      
-      <div class="vtilt-chat-input-container" style="
-        padding: 8px 12px;
-        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
-        border-top: 1px solid #E5E5E5;
-        flex-shrink: 0;
-        background: #ffffff;
-      ">
-        <div style="
-          position: relative;
-          border: 1px solid #DDDDDD;
-          border-radius: 12px;
-          background: #ffffff;
-          overflow: hidden;
-        ">
-          <textarea
-            class="vtilt-chat-input"
-            placeholder="Message..."
-            autocomplete="off"
-            autocorrect="on"
-            autocapitalize="sentences"
-            rows="1"
-            style="
-              width: 100%;
-              box-sizing: border-box;
-              border: none;
-              border-radius: 0;
-              padding: 12px 12px 36px 12px;
-              font-size: 15px;
-              line-height: 1.4;
-              outline: none;
-              background: transparent;
-              -webkit-appearance: none;
-              appearance: none;
-              color: #000000;
-              transition: none;
-              resize: none;
-              overflow-y: auto;
-              overflow-x: hidden;
-              min-height: 60px;
-              max-height: 120px;
-              font-family: inherit;
-            "
-          ></textarea>
-          <div style="
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 0 8px 10px;
-            pointer-events: none;
-            z-index: 1;
-          ">
-            <button
-              class="vtilt-chat-attach"
-              style="
-                background: none;
-                border: none;
-                padding: 0;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 20px;
-                height: 20px;
-                pointer-events: auto;
-                color: #666666;
-                transition: color 0.15s ease;
-              "
-              title="Attach file"
-            >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-              </svg>
-            </button>
-            <button
-              class="vtilt-chat-mic"
-              style="
-                background: none;
-                border: none;
-                padding: 0;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 20px;
-                height: 20px;
-                pointer-events: auto;
-                color: #666666;
-                transition: color 0.15s ease;
-              "
-              title="Voice message"
-            >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                <line x1="12" y1="19" x2="12" y2="23"></line>
-                <line x1="8" y1="23" x2="16" y2="23"></line>
-              </svg>
-            </button>
-          </div>
-          <button class="vtilt-chat-send" disabled style="
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            background: #E5E5E5;
-            color: #999999;
-            border: none;
-            border-radius: 50%;
-            padding: 0;
-            width: 32px;
-            height: 32px;
-            margin: 6px 8px 6px 6px;
-            cursor: not-allowed;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            -webkit-tap-highlight-color: transparent;
-            touch-action: manipulation;
-            z-index: 2;
-            transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, cursor 0.15s ease;
-            opacity: 0.6;
-          ">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-            </svg>
-          </button>
-        </div>
-      </div>
-    `;
-    }
-    _attachChannelListListeners() {
-        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) {
-                    this.selectChannel(channelId);
-                }
-            });
-        });
-    }
-    _attachConversationListeners() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const sendButton = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
-        sendButton === null || sendButton === void 0 ? void 0 : sendButton.addEventListener("click", () => {
-            if (!sendButton.disabled) {
-                this._handleSend();
-            }
-        });
-        const input = (_b = this._widget) === null || _b === void 0 ? void 0 : _b.querySelector(".vtilt-chat-input");
-        // Attachment button (placeholder for future functionality)
-        (_d = (_c = this._widget) === null || _c === void 0 ? void 0 : _c.querySelector(".vtilt-chat-attach")) === null || _d === void 0 ? void 0 : _d.addEventListener("click", (e) => {
-            e.preventDefault();
-            alert("File attachments coming soon!");
-        });
-        // Emoji button (placeholder for future functionality)
-        (_f = (_e = this._widget) === null || _e === void 0 ? void 0 : _e.querySelector(".vtilt-chat-emoji")) === null || _f === void 0 ? void 0 : _f.addEventListener("click", (e) => {
-            e.preventDefault();
-            // TODO: Implement emoji picker functionality
-            console.log("Emoji clicked - functionality coming soon");
-        });
-        // GIF button (placeholder for future functionality)
-        (_h = (_g = this._widget) === null || _g === void 0 ? void 0 : _g.querySelector(".vtilt-chat-gif")) === null || _h === void 0 ? void 0 : _h.addEventListener("click", (e) => {
-            e.preventDefault();
-            // TODO: Implement GIF picker functionality
-            console.log("GIF clicked - functionality coming soon");
-        });
-        // Microphone button (placeholder for future functionality)
-        (_k = (_j = this._widget) === null || _j === void 0 ? void 0 : _j.querySelector(".vtilt-chat-mic")) === null || _k === void 0 ? void 0 : _k.addEventListener("click", (e) => {
-            e.preventDefault();
-            alert("Voice messages coming soon!");
-        });
-        // Auto-resize textarea
-        const autoResize = () => {
-            if (input) {
-                input.style.height = "auto";
-                const scrollHeight = input.scrollHeight;
-                const minHeight = 60;
-                const maxHeight = 120;
-                input.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
-            }
-        };
-        // Update send button state
-        const primary = this._theme.primaryColor;
-        const updateSendButton = () => {
-            var _a;
-            const sendButton = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-send");
-            if (sendButton && input) {
-                const hasText = input.value.trim().length > 0;
-                sendButton.disabled = !hasText;
-                if (hasText) {
-                    sendButton.style.background = primary || "#E5E5E5";
-                    sendButton.style.color = "white";
-                    sendButton.style.cursor = "pointer";
-                    sendButton.style.opacity = "1";
-                }
-                else {
-                    sendButton.style.background = "#E5E5E5";
-                    sendButton.style.color = "#999999";
-                    sendButton.style.cursor = "not-allowed";
-                    sendButton.style.opacity = "0.6";
-                }
-            }
-        };
-        input === null || input === void 0 ? void 0 : input.addEventListener("input", () => {
-            autoResize();
-            this._handleUserTyping();
-            updateSendButton();
-        });
-        // Keyboard handling: Enter sends, Shift+Enter creates new line
-        input === null || input === void 0 ? void 0 : input.addEventListener("keydown", (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                this._handleSend();
-            }
-        });
-        // Initial resize on mount
-        if (input) {
-            autoResize();
-            updateSendButton();
-        }
-    }
-    _formatRelativeTime(isoString) {
-        const date = new Date(isoString);
-        const now = new Date();
-        const diffMs = now.getTime() - date.getTime();
-        const diffMins = Math.floor(diffMs / 60000);
-        const diffHours = Math.floor(diffMs / 3600000);
-        const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1) {
-            return "Just now";
-        }
-        if (diffMins < 60) {
-            return `${diffMins}m ago`;
-        }
-        if (diffHours < 24) {
-            return `${diffHours}h ago`;
-        }
-        if (diffDays < 7) {
-            return `${diffDays}d ago`;
-        }
-        return date.toLocaleDateString();
-    }
-    _renderMessages() {
-        var _a;
-        const container = (_a = this._widget) === null || _a === void 0 ? void 0 : _a.querySelector(".vtilt-chat-messages");
-        if (!container) {
-            return;
-        }
-        const primary = this._theme.primaryColor;
-        const firstUnreadIndex = this._state.messages.findIndex((m) => (m.sender_type === "agent" || m.sender_type === "ai") &&
-            !this._isMessageReadByUser(m.created_at));
-        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("");
-        container.innerHTML = html;
-        container.scrollTop = container.scrollHeight;
-    }
-    // ============================================================================
-    // Private - Styles & HTML
-    // ============================================================================
-    _getContainerStyles() {
-        const isRight = (this._config.position || DEFAULT_POSITION) === "bottom-right";
-        return `
-      position: fixed;
-      bottom: 20px;
-      ${isRight ? "right: 20px;" : "left: 20px;"}
-      z-index: 999999;
-      font-family: ${this._theme.fontFamily};
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    `;
-    }
-    _getBubbleStyles() {
-        const primary = this._theme.primaryColor;
-        return `
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      background: ${primary};
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 4px 16px rgba(123, 104, 238, 0.4);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-      position: relative;
-      -webkit-tap-highlight-color: transparent;
-      touch-action: manipulation;
-    `;
-    }
-    _getBubbleHTML() {
-        return `
-      <svg width="28" height="28" viewBox="0 0 28 28" fill="white">
-        <path d="M14 3C7.925 3 3 7.262 3 12.5c0 2.56 1.166 4.884 3.063 6.606L4.5 24l5.25-2.625C11.1 21.79 12.52 22 14 22c6.075 0 11-4.262 11-9.5S20.075 3 14 3z"/>
-      </svg>
-      <div class="vtilt-chat-badge" style="
-        display: none;
-        position: absolute;
-        top: -4px;
-        right: -4px;
-        background: #E53935;
-        color: white;
-        font-size: 11px;
-        font-weight: 700;
-        min-width: 20px;
-        height: 20px;
-        border-radius: 10px;
-        align-items: center;
-        justify-content: center;
-        padding: 0 6px;
-        box-sizing: border-box;
-        border: 2px solid white;
-      ">0</div>
-    `;
-    }
-    _getWidgetStyles() {
-        return `
-      display: none;
-      flex-direction: column;
-      position: absolute;
-      bottom: 80px;
-      right: 0;
-      width: 380px;
-      max-width: calc(100vw - 40px);
-      height: 600px;
-      max-height: calc(100vh - 120px);
-      max-height: calc(100dvh - 120px);
-      background: #ffffff;
-      border-radius: 16px;
-      box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-      overflow: hidden;
-    `;
-    }
-    _getWidgetHTML() {
-        const greeting = this._config.greeting || "Messages";
-        const primary = this._theme.primaryColor;
-        return `
-      <div class="vtilt-chat-header" style="
-        background: #ffffff;
-        border-bottom: 1px solid #E5E5E5;
-        padding: 18px 16px;
-        padding-top: max(18px, env(safe-area-inset-top, 18px));
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 60px;
-        box-sizing: border-box;
-        flex-shrink: 0;
-      ">
-        <div style="font-weight: 600; font-size: 17px; color: #000000;">${greeting}</div>
-        <button class="vtilt-chat-close" style="
-          background: transparent;
-          border: none;
-          color: #666666;
-          cursor: pointer;
-          padding: 6px;
-          margin: -6px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          -webkit-tap-highlight-color: transparent;
-          touch-action: manipulation;
-        ">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6L6 18M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="vtilt-chat-content" style="
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        min-height: 0;
-        background: #ffffff;
-      ">
-      </div>
-      
-      <div class="vtilt-chat-loader" style="
-        display: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(255, 255, 255, 0.95);
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-      ">
-        <div style="
-          width: 32px;
-          height: 32px;
-          border: 3px solid #E5E5E5;
-          border-top-color: ${primary};
-          border-radius: 50%;
-          animation: vtilt-spin 0.8s linear infinite;
-        "></div>
-      </div>
-      
-      <style>
-        @keyframes vtilt-spin { to { transform: rotate(360deg); } }
-        @keyframes vtilt-fade { from { opacity: 0; } to { opacity: 1; } }
-        
-        #vtilt-chat-bubble { transition: transform 0.15s ease, box-shadow 0.15s ease; }
-        #vtilt-chat-bubble:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(123, 104, 238, 0.45); }
-        #vtilt-chat-bubble:active { transform: scale(0.95); }
-        
-        #vtilt-chat-widget { transition: opacity 0.2s ease; }
-        #vtilt-chat-widget.vtilt-opening { animation: vtilt-fade 0.2s ease forwards; }
-        #vtilt-chat-widget.vtilt-closing { opacity: 0; }
-        
-        .vtilt-chat-content { transition: opacity 0.15s ease; }
-        
-        .vtilt-chat-close:hover { color: #000 !important; background: #F0F0F0 !important; }
-        .vtilt-chat-back:hover { color: #000 !important; background: #F0F0F0 !important; }
-        
-        .vtilt-chat-input-container > div:first-child:focus-within { 
-          border-color: ${primary} !important; 
-          box-shadow: 0 0 0 2px ${primary}20 !important; 
-        }
-        .vtilt-chat-input { 
-          font-size: 16px !important; 
-          -webkit-text-size-adjust: 100%; 
-        }
-        .vtilt-chat-input:focus { 
-          outline: none !important; 
-        }
-        .vtilt-chat-input::placeholder { 
-          color: #999999; 
-        }
-        .vtilt-chat-input::-webkit-scrollbar { 
-          width: 4px; 
-        }
-        .vtilt-chat-input::-webkit-scrollbar-track { 
-          background: transparent; 
-        }
-        .vtilt-chat-input::-webkit-scrollbar-thumb { 
-          background: rgba(0, 0, 0, 0.2); 
-          border-radius: 2px; 
-        }
-        .vtilt-chat-input::-webkit-scrollbar-thumb:hover { 
-          background: rgba(0, 0, 0, 0.3); 
-        }
-        /* Firefox scrollbar */
-        .vtilt-chat-input { 
-          scrollbar-width: thin; 
-          scrollbar-color: rgba(0, 0, 0, 0.2) transparent; 
-        }
-        .vtilt-chat-attach:hover,
-        .vtilt-chat-emoji:hover,
-        .vtilt-chat-gif:hover,
-        .vtilt-chat-mic:hover {
-          color: #333333 !important;
-        }
-        .vtilt-chat-attach:active,
-        .vtilt-chat-emoji:active,
-        .vtilt-chat-gif:active,
-        .vtilt-chat-mic:active {
-          color: #000000 !important;
-        }
-        .vtilt-chat-send:not(:disabled):hover {
-          opacity: 0.9 !important;
-          transform: scale(1.05);
-        }
-        .vtilt-chat-send:not(:disabled):active {
-          opacity: 0.8 !important;
-          transform: scale(0.95);
-        }
-        .vtilt-chat-send:disabled {
-          cursor: not-allowed !important;
-        }
-        
-        .vtilt-chat-send { transition: opacity 0.1s ease; }
-        
-        .vtilt-chat-new-channel { transition: opacity 0.1s ease; }
-        .vtilt-chat-new-channel:hover { opacity: 0.9; }
-        .vtilt-chat-new-channel:active { opacity: 0.8; }
-        
-        .vtilt-channel-item { transition: background 0.1s ease; cursor: pointer; }
-        .vtilt-channel-item:hover { background: #F5F5F5 !important; }
-        .vtilt-channel-item:active { background: #EBEBEB !important; }
-        
-        @media (max-width: 480px) {
-          #vtilt-chat-container { bottom: 16px !important; right: 16px !important; }
-          #vtilt-chat-bubble { width: 56px !important; height: 56px !important; }
-          #vtilt-chat-bubble svg { width: 24px !important; height: 24px !important; }
-          #vtilt-chat-widget {
-            position: fixed !important;
-            top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
-            width: 100% !important; max-width: 100% !important;
-            height: 100% !important; max-height: 100% !important;
-            border-radius: 0 !important;
-            z-index: 1000000 !important;
-          }
-        }
-        
-        @media (prefers-reduced-motion: reduce) {
-          * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
-        }
-      </style>
-    `;
-    }
-    _getMessageHTML(message) {
-        const isUser = message.sender_type === "user";
-        const isAi = message.sender_type === "ai";
-        const isReadByAgent = isUser && this._isMessageReadByAgent(message.created_at);
-        const primary = this._theme.primaryColor;
-        if (isUser) {
-            return `
-        <div class="vtilt-msg" style="
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-        ">
-          <div style="
-            max-width: 80%;
-            padding: 12px 16px;
-            background: ${primary};
-            color: white;
-            border-radius: 20px 20px 4px 20px;
-            font-size: 15px;
-            line-height: 1.45;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-          ">${this._escapeHTML(message.content)}</div>
-          <div style="font-size: 12px; color: #888888; margin-top: 6px; display: flex; align-items: center; gap: 4px;">
-            ${this._formatTime(message.created_at)}
-            ${isReadByAgent ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="${primary}"><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>` : ""}
-          </div>
-        </div>
-      `;
-        }
-        const senderLabel = isAi
-            ? "AI Assistant"
-            : message.sender_name || "Support";
-        return `
-      <div class="vtilt-msg" style="
-        display: flex;
-        gap: 10px;
-        align-items: flex-end;
-      ">
-        <div style="
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-          background: ${isAi ? primary : "#DEDEDE"};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-        ">
-          ${isAi
-            ? `<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A1.5 1.5 0 0 0 6 14.5A1.5 1.5 0 0 0 7.5 16A1.5 1.5 0 0 0 9 14.5A1.5 1.5 0 0 0 7.5 13m9 0a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 0 0 1.5 1.5a1.5 1.5 0 0 0 1.5-1.5a1.5 1.5 0 0 0-1.5-1.5"/></svg>`
-            : `<svg width="16" height="16" viewBox="0 0 24 24" fill="#666"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>`}
-        </div>
-        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;">
-          <div style="
-            max-width: 85%;
-            padding: 12px 16px;
-            background: #ffffff;
-            color: #000000;
-            border-radius: 20px 20px 20px 4px;
-            font-size: 15px;
-            line-height: 1.45;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-          ">${this._escapeHTML(message.content)}</div>
-          <div style="font-size: 12px; color: #888888; margin-top: 6px; margin-left: 4px;">
-            ${senderLabel} · ${this._formatTime(message.created_at)}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    _isMessageReadByAgent(messageCreatedAt) {
-        if (!this._state.agentLastReadAt) {
-            return false;
-        }
-        return new Date(messageCreatedAt) <= new Date(this._state.agentLastReadAt);
-    }
-    // ============================================================================
-    // Private - Utilities
-    // ============================================================================
-    /**
-     * Handle streaming AI response
-     * Industry standard: Real-time streaming with progressive UI updates
-     */
-    async _handleStreamingResponse(response, userMessage, channelId) {
-        var _a, _b, _c;
-        // Create temporary AI message for streaming
-        const tempAiMessage = {
-            id: `temp-ai-${Date.now()}`,
-            channel_id: channelId,
-            sender_type: "ai",
-            sender_id: null,
-            sender_name: "AI Assistant",
-            sender_avatar_url: null,
-            content: "",
-            content_type: "text",
-            metadata: {},
-            created_at: new Date().toISOString(),
-        };
-        this._state.messages.push(tempAiMessage);
-        this._updateUI();
-        const reader = (_a = response.body) === null || _a === void 0 ? void 0 : _a.getReader();
-        if (!reader) {
-            console.error(`${LOGGER_PREFIX} No response body reader available`);
-            this._removeTempMessage(tempAiMessage.id);
-            return;
-        }
-        const decoder = new TextDecoder();
-        let fullText = "";
-        let updateThrottle = null;
-        try {
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                // Decode chunk and append
-                const chunk = decoder.decode(value, { stream: true });
-                fullText += chunk;
-                // Throttle UI updates for performance (update every 50ms)
-                if (!updateThrottle) {
-                    updateThrottle = setTimeout(() => {
-                        const aiMessageIndex = this._state.messages.findIndex((m) => m.id === tempAiMessage.id);
-                        if (aiMessageIndex !== -1) {
-                            this._state.messages[aiMessageIndex].content = fullText;
-                            this._updateUI();
-                        }
-                        updateThrottle = null;
-                    }, 50);
-                }
-            }
-            // Final update with complete text
-            const aiMessageIndex = this._state.messages.findIndex((m) => m.id === tempAiMessage.id);
-            if (aiMessageIndex !== -1) {
-                this._state.messages[aiMessageIndex].content = fullText;
-                this._updateUI();
-            }
-            // Track event after streaming completes
-            this._trackEvent(types_1.CHAT_EVENTS.MESSAGE_SENT, {
-                $channel_id: channelId,
-                $message_id: userMessage.id,
-                $content_preview: userMessage.content.substring(0, 100),
-                $sender_type: "user",
-                $ai_mode: (_c = (_b = this._state.channel) === null || _b === void 0 ? void 0 : _b.ai_mode) !== null && _c !== void 0 ? _c : true,
-                $word_count: userMessage.content.split(/\s+/).length,
-            });
-            // Note: Complete AI message will arrive via Ably and replace temp message
-        }
-        catch (error) {
-            console.error(`${LOGGER_PREFIX} Failed to handle streaming response:`, error);
-            this._removeTempMessage(tempAiMessage.id);
-        }
-        finally {
-            reader.releaseLock();
-            if (updateThrottle) {
-                clearTimeout(updateThrottle);
-            }
-        }
-    }
-    /**
-     * Remove temporary message by ID
-     */
-    _removeTempMessage(messageId) {
-        this._state.messages = this._state.messages.filter((m) => m.id !== messageId);
-        this._updateUI();
-    }
-    async _apiRequest(endpoint, options = {}) {
-        const config = this._instance.getConfig();
-        const apiHost = config.api_host || "";
-        const token = config.token || "";
-        // Use & if endpoint already has query params, otherwise use ?
-        const separator = endpoint.includes("?") ? "&" : "?";
-        const url = `${apiHost}${endpoint}${separator}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;