@makemore/agent-frontend 2.7.2 → 2.8.3

package/dist/chat-widget-vanilla.js.bak

@@ -0,0 +1,1264 @@
+/**
+ * Embeddable Chat Widget
+ * A standalone chat widget that can be embedded in any website.
+ * 
+ * Usage (Single Instance - Original API):
+ *   <script src="chat-widget.js"></script>
+ *   <link rel="stylesheet" href="chat-widget.css">
+ *   <script>
+ *     ChatWidget.init({
+ *       backendUrl: 'https://your-api.com',
+ *       agentKey: 'your-agent',
+ *       title: 'Support Chat',
+ *       primaryColor: '#0066cc',
+ *     });
+ *   </script>
+ * 
+ * Usage (Multiple Instances):
+ *   <script>
+ *     const widget1 = ChatWidget.createInstance({
+ *       containerId: 'chat-container-1',
+ *       backendUrl: 'https://your-api.com',
+ *       agentKey: 'agent-1',
+ *       embedded: true,
+ *     });
+ *     
+ *     const widget2 = ChatWidget.createInstance({
+ *       containerId: 'chat-container-2',
+ *       backendUrl: 'https://your-api.com',
+ *       agentKey: 'agent-2',
+ *       embedded: true,
+ *     });
+ *   </script>
+ */
+(function(global) {
+  'use strict';
+
+  // Default configuration
+  const DEFAULT_CONFIG = {
+    backendUrl: 'http://localhost:8000',
+    agentKey: 'insurance-agent',
+    title: 'Chat Assistant',
+    subtitle: 'How can we help you today?',
+    primaryColor: '#0066cc',
+    position: 'bottom-right',
+    defaultJourneyType: 'general',
+    enableDebugMode: true,
+    enableAutoRun: true,
+    journeyTypes: {},
+    customerPrompts: {},
+    placeholder: 'Type your message...',
+    emptyStateTitle: 'Start a Conversation',
+    emptyStateMessage: 'Send a message to get started.',
+    authStrategy: null,
+    authToken: null,
+    authHeader: null,
+    authTokenPrefix: null,
+    anonymousSessionEndpoint: null,
+    anonymousTokenKey: 'chat_widget_anonymous_token',
+    onAuthError: null,
+    anonymousTokenHeader: 'X-Anonymous-Token',
+    conversationIdKey: 'chat_widget_conversation_id',
+    sessionTokenKey: 'chat_widget_session_token',
+    modelKey: 'chat_widget_selected_model',
+    apiPaths: {
+      anonymousSession: '/api/accounts/anonymous-session/',
+      conversations: '/api/agent-runtime/conversations/',
+      runs: '/api/agent-runtime/runs/',
+      runEvents: '/api/agent-runtime/runs/{runId}/events/',
+      simulateCustomer: '/api/agent-runtime/simulate-customer/',
+      ttsVoices: '/api/tts/voices/',
+      ttsSetVoice: '/api/tts/set-voice/',
+      models: '/api/agent-runtime/models/',
+    },
+    // Conversation sidebar
+    showConversationSidebar: true,
+    autoRunDelay: 1000,
+    autoRunMode: 'automatic',
+    enableTTS: false,
+    ttsProxyUrl: null,
+    elevenLabsApiKey: null,
+    ttsVoices: { assistant: null, user: null },
+    ttsModel: 'eleven_turbo_v2_5',
+    ttsSettings: { stability: 0.5, similarity_boost: 0.75, style: 0.0, use_speaker_boost: true },
+    availableVoices: [],
+    showClearButton: true,
+    showDebugButton: true,
+    showTTSButton: true,
+    showVoiceSettings: true,
+    showExpandButton: true,
+    onEvent: null,
+    // Multi-instance options
+    containerId: null,
+    embedded: false,
+    metadata: {},
+  };
+
+  // Track instances
+  const instances = new Map();
+  let instanceCounter = 0;
+  let defaultInstance = null;
+
+  // ============================================================================
+  // ChatWidgetInstance Class
+  // ============================================================================
+
+  class ChatWidgetInstance {
+    constructor(userConfig = {}) {
+      this.instanceId = `cw-${++instanceCounter}`;
+      
+      const mergedApiPaths = { ...DEFAULT_CONFIG.apiPaths, ...(userConfig.apiPaths || {}) };
+      this.config = { ...DEFAULT_CONFIG, ...userConfig, apiPaths: mergedApiPaths };
+
+      this.state = {
+        isOpen: this.config.embedded,
+        isExpanded: false,
+        isLoading: false,
+        isSimulating: false,
+        autoRunActive: false,
+        autoRunPaused: false,
+        debugMode: false,
+        journeyType: this.config.defaultJourneyType,
+        messages: [],
+        conversationId: null,
+        authToken: this.config.authToken || null,
+        error: null,
+        eventSource: null,
+        currentAudio: null,
+        isSpeaking: false,
+        speechQueue: [],
+        voiceSettingsOpen: false,
+        // Conversation sidebar state
+        sidebarOpen: false,
+        conversations: [],
+        conversationsLoading: false,
+        // Message pagination state
+        totalMessages: 0,
+        hasMoreMessages: false,
+        loadingMoreMessages: false,
+        messagesOffset: 0,
+        // Model selection state
+        selectedModel: null,
+        availableModels: [],
+        defaultModel: null,
+        modelSelectorOpen: false,
+      };
+
+      this.container = null;
+      instances.set(this.instanceId, this);
+    }
+
+    // Storage helpers with instance-specific keys
+    _storageKey(key) {
+      return this.config.containerId ? `${key}_${this.config.containerId}` : key;
+    }
+
+    _getStored(key) {
+      try { return localStorage.getItem(this._storageKey(key)); } catch (e) { return null; }
+    }
+
+    _setStored(key, value) {
+      try {
+        const k = this._storageKey(key);
+        value === null ? localStorage.removeItem(k) : localStorage.setItem(k, value);
+      } catch (e) {}
+    }
+
+    // Model selection
+    async loadAvailableModels() {
+      try {
+        const response = await fetch(
+          `${this.config.backendUrl}${this.config.apiPaths.models}`,
+          this._getFetchOptions({ method: 'GET' })
+        );
+        if (response.ok) {
+          const data = await response.json();
+          this.state.availableModels = data.models || [];
+          this.state.defaultModel = data.default;
+          // Restore saved model or use default
+          const savedModel = this._getStored(this.config.modelKey);
+          if (savedModel && this.state.availableModels.some(m => m.id === savedModel)) {
+            this.state.selectedModel = savedModel;
+          } else {
+            this.state.selectedModel = data.default;
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load models:', err);
+      }
+    }
+
+    setModel(modelId) {
+      this.state.selectedModel = modelId;
+      this._setStored(this.config.modelKey, modelId);
+      this.state.modelSelectorOpen = false;
+      this.render();
+    }
+
+    toggleModelSelector() {
+      this.state.modelSelectorOpen = !this.state.modelSelectorOpen;
+      this.render();
+    }
+
+    // Utility
+    _generateId() {
+      return 'msg-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+    }
+
+    _escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    _parseMarkdown(text) {
+      if (global.ChatWidget && global.ChatWidget._enhancedMarkdownParser) {
+        return global.ChatWidget._enhancedMarkdownParser(text);
+      }
+      let html = this._escapeHtml(text);
+      html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+      html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+      html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+      html = html.replace(/_(.+?)_/g, '<em>$1</em>');
+      html = html.replace(/`(.+?)`/g, '<code>$1</code>');
+      html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+      html = html.replace(/\n/g, '<br>');
+      return html;
+    }
+
+    _formatDate(dateStr) {
+      if (!dateStr) return '';
+      try {
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now - date;
+        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();
+      } catch (e) {
+        return '';
+      }
+    }
+
+    // Authentication
+    _getAuthStrategy() {
+      if (this.config.authStrategy) return this.config.authStrategy;
+      if (this.config.authToken) return 'token';
+      if (this.config.apiPaths.anonymousSession || this.config.anonymousSessionEndpoint) return 'anonymous';
+      return 'none';
+    }
+
+    _getAuthHeaders() {
+      const strategy = this._getAuthStrategy();
+      const headers = {};
+      const token = this.config.authToken || this.state.authToken;
+
+      if (strategy === 'token' && token) {
+        const headerName = this.config.authHeader || 'Authorization';
+        const prefix = this.config.authTokenPrefix !== undefined ? this.config.authTokenPrefix : 'Token';
+        headers[headerName] = prefix ? `${prefix} ${token}` : token;
+      } else if (strategy === 'jwt' && token) {
+        const headerName = this.config.authHeader || 'Authorization';
+        const prefix = this.config.authTokenPrefix !== undefined ? this.config.authTokenPrefix : 'Bearer';
+        headers[headerName] = prefix ? `${prefix} ${token}` : token;
+      } else if (strategy === 'anonymous' && token) {
+        const headerName = this.config.authHeader || this.config.anonymousTokenHeader || 'X-Anonymous-Token';
+        headers[headerName] = token;
+      }
+
+      // Add CSRF token for session-based auth (Django)
+      if (strategy === 'session') {
+        const csrfToken = this._getCSRFToken();
+        if (csrfToken) {
+          headers['X-CSRFToken'] = csrfToken;
+        }
+      }
+
+      return headers;
+    }
+
+    _getCSRFToken() {
+      // Try to get from cookie (Django default)
+      const cookieName = this.config.csrfCookieName || 'csrftoken';
+      const cookies = document.cookie.split(';');
+      for (let cookie of cookies) {
+        const [name, value] = cookie.trim().split('=');
+        if (name === cookieName) {
+          return decodeURIComponent(value);
+        }
+      }
+      // Try to get from meta tag (alternative Django pattern)
+      const metaTag = document.querySelector('meta[name="csrf-token"]');
+      if (metaTag) {
+        return metaTag.getAttribute('content');
+      }
+      return null;
+    }
+
+    _getFetchOptions(options = {}) {
+      const strategy = this._getAuthStrategy();
+      const fetchOptions = { ...options };
+      fetchOptions.headers = { ...fetchOptions.headers, ...this._getAuthHeaders() };
+      if (strategy === 'session') fetchOptions.credentials = 'include';
+      return fetchOptions;
+    }
+
+    async _getOrCreateSession() {
+      const strategy = this._getAuthStrategy();
+      if (strategy !== 'anonymous') return this.config.authToken || this.state.authToken;
+      if (this.state.authToken) return this.state.authToken;
+
+      const storageKey = this.config.anonymousTokenKey || this.config.sessionTokenKey;
+      const stored = this._getStored(storageKey);
+      if (stored) { this.state.authToken = stored; return stored; }
+
+      try {
+        const endpoint = this.config.anonymousSessionEndpoint || this.config.apiPaths.anonymousSession;
+        const response = await fetch(`${this.config.backendUrl}${endpoint}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        });
+        if (response.ok) {
+          const data = await response.json();
+          this.state.authToken = data.token;
+          this._setStored(storageKey, data.token);
+          return data.token;
+        }
+      } catch (e) {
+        console.warn('[ChatWidget] Failed to create session:', e);
+      }
+      return null;
+    }
+
+    // TTS
+    async speakText(text, role) {
+      if (!this.config.enableTTS) return;
+      if (!this.config.ttsProxyUrl && !this.config.elevenLabsApiKey) return;
+      this.state.speechQueue.push({ text, role });
+      if (!this.state.isSpeaking) this._processSpeechQueue();
+    }
+
+    async _processSpeechQueue() {
+      if (this.state.speechQueue.length === 0) {
+        this.state.isSpeaking = false;
+        this.render();
+        return;
+      }
+      this.state.isSpeaking = true;
+      this.render();
+
+      const { text, role } = this.state.speechQueue.shift();
+      try {
+        let response;
+        if (this.config.ttsProxyUrl) {
+          response = await fetch(this.config.ttsProxyUrl, this._getFetchOptions({
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text, role }),
+          }));
+        } else {
+          const voiceId = role === 'assistant' ? this.config.ttsVoices.assistant : this.config.ttsVoices.user;
+          response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
+            method: 'POST',
+            headers: { 'Accept': 'audio/mpeg', 'Content-Type': 'application/json', 'xi-api-key': this.config.elevenLabsApiKey },
+            body: JSON.stringify({ text, model_id: this.config.ttsModel, voice_settings: this.config.ttsSettings }),
+          });
+        }
+        if (!response.ok) throw new Error(`TTS API error: ${response.status}`);
+        const audioBlob = await response.blob();
+        const audioUrl = URL.createObjectURL(audioBlob);
+        const audio = new Audio(audioUrl);
+        this.state.currentAudio = audio;
+        audio.onended = () => { URL.revokeObjectURL(audioUrl); this.state.currentAudio = null; this._processSpeechQueue(); };
+        audio.onerror = () => { URL.revokeObjectURL(audioUrl); this.state.currentAudio = null; this._processSpeechQueue(); };
+        await audio.play();
+      } catch (err) {
+        console.error('[ChatWidget] TTS error:', err);
+        this.state.currentAudio = null;
+        this._processSpeechQueue();
+      }
+    }
+
+    stopSpeech() {
+      if (this.state.currentAudio) { this.state.currentAudio.pause(); this.state.currentAudio = null; }
+      this.state.speechQueue = [];
+      this.state.isSpeaking = false;
+      this.render();
+    }
+
+    toggleTTS() {
+      this.config.enableTTS = !this.config.enableTTS;
+      if (!this.config.enableTTS) this.stopSpeech();
+      this.render();
+    }
+
+    // API Functions
+    async sendMessage(content) {
+      if (!content.trim() || this.state.isLoading) return;
+
+      this.state.isLoading = true;
+      this.state.error = null;
+
+      const userMessage = {
+        id: this._generateId(),
+        role: 'user',
+        content: content.trim(),
+        timestamp: new Date(),
+        type: 'message',
+      };
+      this.state.messages.push(userMessage);
+      this.render();
+
+      try {
+        const token = await this._getOrCreateSession();
+        if (!this.state.conversationId) {
+          this.state.conversationId = this._getStored(this.config.conversationIdKey);
+        }
+
+        // Build params with model selection
+        const params = {};
+        if (this.state.selectedModel) {
+          params.model = this.state.selectedModel;
+        }
+
+        const response = await fetch(`${this.config.backendUrl}${this.config.apiPaths.runs}`, this._getFetchOptions({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            agentKey: this.config.agentKey,
+            conversationId: this.state.conversationId,
+            messages: [{ role: 'user', content: content.trim() }],
+            metadata: { ...this.config.metadata, journeyType: this.state.journeyType },
+            params: params,
+          }),
+        }));
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || `HTTP ${response.status}`);
+        }
+
+        const run = await response.json();
+        // Handle both camelCase and snake_case from backend
+        const runConversationId = run.conversationId || run.conversation_id;
+        if (!this.state.conversationId && runConversationId) {
+          this.state.conversationId = runConversationId;
+          this._setStored(this.config.conversationIdKey, runConversationId);
+        }
+
+        await this._subscribeToEvents(run.id, token);
+      } catch (err) {
+        this.state.error = err.message || 'Failed to send message';
+        this.state.isLoading = false;
+        this.render();
+      }
+    }
+
+    async _subscribeToEvents(runId, token) {
+      if (this.state.eventSource) this.state.eventSource.close();
+
+      const eventPath = this.config.apiPaths.runEvents.replace('{runId}', runId);
+      let url = `${this.config.backendUrl}${eventPath}`;
+      if (token) url += `?anonymous_token=${encodeURIComponent(token)}`;
+
+      const eventSource = new EventSource(url);
+      this.state.eventSource = eventSource;
+      let assistantContent = '';
+      const self = this;
+
+      eventSource.addEventListener('assistant.message', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (self.config.onEvent) self.config.onEvent('assistant.message', data.payload);
+          const content = data.payload.content;
+          if (content) {
+            assistantContent += content;
+            const lastMsg = self.state.messages[self.state.messages.length - 1];
+            if (lastMsg?.role === 'assistant' && lastMsg.id.startsWith('assistant-stream-')) {
+              lastMsg.content = assistantContent;
+            } else {
+              self.state.messages.push({
+                id: 'assistant-stream-' + Date.now(),
+                role: 'assistant',
+                content: assistantContent,
+                timestamp: new Date(),
+                type: 'message',
+              });
+            }
+            self.render();
+          }
+        } catch (err) { console.error('[ChatWidget] Parse error:', err); }
+      });
+
+      eventSource.addEventListener('tool.call', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (self.config.onEvent) self.config.onEvent('tool.call', data.payload);
+          // Always show tool calls (like Claude) - they're part of the conversation
+          const toolCallId = data.payload.id || data.payload.tool_call_id || ('tool-' + Date.now());
+          self.state.messages.push({
+            id: toolCallId,
+            role: 'assistant',
+            content: '',
+            timestamp: new Date(),
+            type: 'tool_call',
+            toolName: data.payload.name,
+            toolArguments: data.payload.arguments,
+            toolStatus: 'running',
+          });
+          self.render();
+        } catch (err) { console.error('[ChatWidget] Parse error:', err); }
+      });
+
+      eventSource.addEventListener('tool.result', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (self.config.onEvent) self.config.onEvent('tool.result', data.payload);
+          // Find the matching tool call and update it with the result
+          const toolCallId = data.payload.tool_call_id;
+          const toolMsg = self.state.messages.find(m => m.id === toolCallId && m.type === 'tool_call');
+          if (toolMsg) {
+            toolMsg.toolResult = data.payload.result;
+            toolMsg.toolStatus = 'complete';
+          } else {
+            // If we can't find the tool call, add a standalone result
+            self.state.messages.push({
+              id: 'tool-result-' + Date.now(),
+              role: 'assistant',
+              content: '',
+              timestamp: new Date(),
+              type: 'tool_result',
+              toolName: data.payload.name,
+              toolResult: data.payload.result,
+              toolStatus: 'complete',
+            });
+          }
+          self.render();
+        } catch (err) { console.error('[ChatWidget] Parse error:', err); }
+      });
+
+      const handleTerminal = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (self.config.onEvent) self.config.onEvent(data.type, data.payload);
+          if (data.type === 'run.failed') {
+            self.state.error = data.payload.error || 'Agent run failed';
+            self.state.messages.push({
+              id: 'error-' + Date.now(),
+              role: 'system',
+              content: `❌ Error: ${self.state.error}`,
+              timestamp: new Date(),
+              type: 'error',
+            });
+          }
+        } catch (err) { console.error('[ChatWidget] Parse error:', err); }
+        self.state.isLoading = false;
+        eventSource.close();
+        self.state.eventSource = null;
+        self.render();
+        if (assistantContent && !self.state.error) self.speakText(assistantContent, 'assistant');
+      };
+
+      eventSource.addEventListener('run.succeeded', handleTerminal);
+      eventSource.addEventListener('run.failed', handleTerminal);
+      eventSource.addEventListener('run.cancelled', handleTerminal);
+      eventSource.addEventListener('run.timed_out', handleTerminal);
+
+      eventSource.onerror = () => {
+        self.state.isLoading = false;
+        eventSource.close();
+        self.state.eventSource = null;
+        self.render();
+      };
+    }
+
+    // UI Actions
+    open() {
+      this.state.isOpen = true;
+      this._getOrCreateSession();
+      this.render();
+    }
+
+    close() {
+      this.state.isOpen = false;
+      this.state.autoRunActive = false;
+      this.state.autoRunPaused = false;
+      this.render();
+    }
+
+    toggleExpand() {
+      this.state.isExpanded = !this.state.isExpanded;
+      this.render();
+    }
+
+    toggleDebugMode() {
+      this.state.debugMode = !this.state.debugMode;
+      this.render();
+    }
+
+    clearMessages() {
+      this.state.messages = [];
+      this.state.conversationId = null;
+      this.state.error = null;
+      this.state.autoRunActive = false;
+      this.state.autoRunPaused = false;
+      this.state.totalMessages = 0;
+      this.state.hasMoreMessages = false;
+      this.state.messagesOffset = 0;
+      this._setStored(this.config.conversationIdKey, null);
+      this.render();
+    }
+
+    // Conversation sidebar methods
+    toggleSidebar() {
+      this.state.sidebarOpen = !this.state.sidebarOpen;
+      if (this.state.sidebarOpen) {
+        this.loadConversations();
+      }
+      this.render();
+    }
+
+    async loadConversations() {
+      if (!this.config.showConversationSidebar) return;
+
+      this.state.conversationsLoading = true;
+      this.render();
+
+      try {
+        const token = await this._getOrCreateSession();
+        const url = `${this.config.backendUrl}${this.config.apiPaths.conversations}?agent_key=${encodeURIComponent(this.config.agentKey)}`;
+
+        const response = await fetch(url, this._getFetchOptions({
+          method: 'GET',
+        }));
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        const data = await response.json();
+        // Handle paginated response or array
+        this.state.conversations = data.results || data;
+      } catch (err) {
+        console.error('[ChatWidget] Failed to load conversations:', err);
+        this.state.conversations = [];
+      } finally {
+        this.state.conversationsLoading = false;
+        this.render();
+      }
+    }
+
+    async switchConversation(conversationId) {
+      if (conversationId === this.state.conversationId) {
+        this.state.sidebarOpen = false;
+        this.render();
+        return;
+      }
+
+      // Save current conversation ID
+      this.state.conversationId = conversationId;
+      this._setStored(this.config.conversationIdKey, conversationId);
+
+      // Clear current messages and reset pagination state
+      this.state.messages = [];
+      this.state.sidebarOpen = false;
+      this.state.isLoading = true;
+      this.state.totalMessages = 0;
+      this.state.hasMoreMessages = false;
+      this.state.messagesOffset = 0;
+      this.render();
+
+      try {
+        // Fetch conversation details with last 10 messages
+        const token = await this._getOrCreateSession();
+        const limit = 10;
+        const url = `${this.config.backendUrl}${this.config.apiPaths.conversations}${conversationId}/?limit=${limit}&offset=0`;
+
+        const response = await fetch(url, this._getFetchOptions({
+          method: 'GET',
+        }));
+
+        if (response.ok) {
+          const conversation = await response.json();
+          // Load messages from conversation runs if available
+          if (conversation.messages) {
+            this.state.messages = conversation.messages.map(m => ({
+              id: this._generateId(),
+              role: m.role,
+              content: m.content,
+            }));
+          }
+          // Update pagination state
+          this.state.totalMessages = conversation.total_messages || conversation.totalMessages || 0;
+          this.state.hasMoreMessages = conversation.has_more || conversation.hasMore || false;
+          this.state.messagesOffset = this.state.messages.length;
+        }
+      } catch (err) {
+        console.error('[ChatWidget] Failed to load conversation:', err);
+      } finally {
+        this.state.isLoading = false;
+        this.render();
+      }
+    }
+
+    async loadMoreMessages() {
+      if (!this.state.conversationId || this.state.loadingMoreMessages || !this.state.hasMoreMessages) {
+        return;
+      }
+
+      this.state.loadingMoreMessages = true;
+      this.render();
+
+      try {
+        const token = await this._getOrCreateSession();
+        const limit = 10;
+        const offset = this.state.messagesOffset;
+        const url = `${this.config.backendUrl}${this.config.apiPaths.conversations}${this.state.conversationId}/?limit=${limit}&offset=${offset}`;
+
+        const response = await fetch(url, this._getFetchOptions({
+          method: 'GET',
+        }));
+
+        if (response.ok) {
+          const conversation = await response.json();
+          if (conversation.messages && conversation.messages.length > 0) {
+            // Prepend older messages to the beginning
+            const olderMessages = conversation.messages.map(m => ({
+              id: this._generateId(),
+              role: m.role,
+              content: m.content,
+            }));
+            this.state.messages = [...olderMessages, ...this.state.messages];
+            this.state.messagesOffset += olderMessages.length;
+            this.state.hasMoreMessages = conversation.has_more || conversation.hasMore || false;
+          } else {
+            this.state.hasMoreMessages = false;
+          }
+        }
+      } catch (err) {
+        console.error('[ChatWidget] Failed to load more messages:', err);
+      } finally {
+        this.state.loadingMoreMessages = false;
+        this.render();
+      }
+    }
+
+    newConversation() {
+      this.state.conversationId = null;
+      this.state.messages = [];
+      this.state.totalMessages = 0;
+      this.state.hasMoreMessages = false;
+      this.state.messagesOffset = 0;
+      this._setStored(this.config.conversationIdKey, null);
+      this.state.sidebarOpen = false;
+      this.render();
+    }
+
+    send(message) {
+      if (!this.state.isOpen) this.open();
+      this.sendMessage(message);
+    }
+
+    setAuth(authConfig = {}) {
+      if (authConfig.strategy) this.config.authStrategy = authConfig.strategy;
+      if (authConfig.token !== undefined) {
+        this.config.authToken = authConfig.token;
+        this.state.authToken = authConfig.token;
+      }
+    }
+
+    clearAuth() {
+      this.config.authToken = null;
+      this.state.authToken = null;
+      this._setStored(this.config.anonymousTokenKey, null);
+    }
+
+    getState() { return { ...this.state }; }
+    getConfig() { return { ...this.config }; }
+
+    // Render
+    _renderMessage(msg) {
+      const isUser = msg.role === 'user';
+      const isToolCall = msg.type === 'tool_call';
+      const isToolResult = msg.type === 'tool_result';
+      const isError = msg.type === 'error';
+
+      // Render tool calls as collapsible cards (like Claude)
+      if (isToolCall) {
+        return this._renderToolCall(msg);
+      }
+
+      // Skip standalone tool results (they're merged into tool calls)
+      if (isToolResult) return '';
+
+      let classes = 'cw-message';
+      if (isUser) classes += ' cw-message-user';
+      if (isError) classes += ' cw-message-error';
+
+      let content = msg.role === 'assistant' ? this._parseMarkdown(msg.content) : this._escapeHtml(msg.content);
+
+      return `<div class="cw-message-row ${isUser ? 'cw-message-row-user' : ''}"><div class="${classes}">${content}</div></div>`;
+    }
+
+    _renderToolCall(msg) {
+      const isRunning = msg.toolStatus === 'running';
+      const hasResult = msg.toolResult !== undefined;
+      const toolId = msg.id.replace(/[^a-zA-Z0-9-]/g, '');
+
+      // Format arguments for display
+      let argsDisplay = '';
+      if (msg.toolArguments) {
+        try {
+          const args = typeof msg.toolArguments === 'string'
+            ? JSON.parse(msg.toolArguments)
+            : msg.toolArguments;
+          argsDisplay = JSON.stringify(args, null, 2);
+        } catch (e) {
+          argsDisplay = String(msg.toolArguments);
+        }
+      }
+
+      // Format result for display
+      let resultDisplay = '';
+      if (hasResult) {
+        try {
+          const result = typeof msg.toolResult === 'string'
+            ? (msg.toolResult.startsWith('{') || msg.toolResult.startsWith('[')
+                ? JSON.parse(msg.toolResult)
+                : msg.toolResult)
+            : msg.toolResult;
+          resultDisplay = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+        } catch (e) {
+          resultDisplay = String(msg.toolResult);
+        }
+      }
+
+      return `
+        <div class="cw-message-row">
+          <div class="cw-tool-card" data-tool-id="${toolId}">
+            <div class="cw-tool-header" data-action="toggle-tool" data-tool-target="${toolId}">
+              <span class="cw-tool-icon">${isRunning ? '<span class="cw-spinner-small"></span>' : '🔧'}</span>
+              <span class="cw-tool-name">${this._escapeHtml(msg.toolName || 'Tool')}</span>
+              <span class="cw-tool-status ${isRunning ? 'cw-tool-running' : 'cw-tool-complete'}">
+                ${isRunning ? 'Running...' : '✓'}
+              </span>
+              <span class="cw-tool-chevron">▼</span>
+            </div>
+            <div class="cw-tool-body" id="tool-body-${toolId}" style="display: none;">
+              <div class="cw-tool-section">
+                <div class="cw-tool-section-title">Arguments</div>
+                <pre class="cw-tool-code">${this._escapeHtml(argsDisplay || '{}')}</pre>
+              </div>
+              ${hasResult ? `
+              <div class="cw-tool-section">
+                <div class="cw-tool-section-title">Result</div>
+                <pre class="cw-tool-code">${this._escapeHtml(resultDisplay)}</pre>
+              </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    render() {
+      if (!this.container) return;
+      const cfg = this.config;
+      const st = this.state;
+
+      // Embedded mode: always show widget inline
+      if (cfg.embedded) {
+        this._renderWidget();
+        return;
+      }
+
+      // Floating mode: show FAB or widget
+      if (!st.isOpen) {
+        this.container.innerHTML = `
+          <button class="cw-fab" style="background-color: ${cfg.primaryColor}">
+            <svg class="cw-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+          </button>
+        `;
+        this.container.querySelector('.cw-fab').addEventListener('click', () => this.open());
+        return;
+      }
+
+      this._renderWidget();
+    }
+
+    _renderWidget() {
+      const cfg = this.config;
+      const st = this.state;
+      const self = this;
+
+      // Load more indicator at the top
+      const loadMoreHtml = st.hasMoreMessages ? `
+        <div class="cw-load-more" data-action="load-more">
+          ${st.loadingMoreMessages
+            ? '<span class="cw-spinner"></span><span>Loading...</span>'
+            : '<span>↑ Scroll up or click to load older messages</span>'}
+        </div>
+      ` : '';
+
+      const messagesHtml = st.messages.length === 0
+        ? `<div class="cw-empty-state">
+            <svg class="cw-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            <h3>${this._escapeHtml(cfg.emptyStateTitle)}</h3>
+            <p>${this._escapeHtml(cfg.emptyStateMessage)}</p>
+          </div>`
+        : loadMoreHtml + st.messages.map(m => this._renderMessage(m)).join('');
+
+      const typingIndicator = st.isLoading ? `
+        <div class="cw-message-row">
+          <div class="cw-typing"><span class="cw-spinner"></span><span>Thinking...</span></div>
+        </div>
+      ` : '';
+
+      const statusBar = st.debugMode ? '<div class="cw-status-bar"><span>🐛 Debug</span></div>' : '';
+      const errorBar = st.error ? `<div class="cw-error-bar">${this._escapeHtml(st.error)}</div>` : '';
+
+      // Render conversation sidebar
+      const sidebarHtml = cfg.showConversationSidebar ? `
+        <div class="cw-sidebar ${st.sidebarOpen ? 'cw-sidebar-open' : ''}">
+          <div class="cw-sidebar-header">
+            <span>Conversations</span>
+            <button class="cw-sidebar-close" data-action="toggle-sidebar">✕</button>
+          </div>
+          <button class="cw-new-conversation" data-action="new-conversation">
+            <span>+ New Conversation</span>
+          </button>
+          <div class="cw-conversation-list">
+            ${st.conversationsLoading ? '<div class="cw-sidebar-loading"><span class="cw-spinner"></span></div>' : ''}
+            ${!st.conversationsLoading && st.conversations.length === 0 ? '<div class="cw-sidebar-empty">No conversations yet</div>' : ''}
+            ${st.conversations.map(conv => `
+              <div class="cw-conversation-item ${conv.id === st.conversationId ? 'cw-conversation-active' : ''}"
+                   data-action="switch-conversation" data-conversation-id="${conv.id}">
+                <div class="cw-conversation-title">${this._escapeHtml(conv.title || 'Untitled')}</div>
+                <div class="cw-conversation-date">${this._formatDate(conv.updatedAt || conv.createdAt)}</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+        <div class="cw-sidebar-overlay ${st.sidebarOpen ? 'cw-sidebar-overlay-visible' : ''}" data-action="toggle-sidebar"></div>
+      ` : '';
+
+      // Hamburger menu button for sidebar
+      const hamburgerBtn = cfg.showConversationSidebar ? `
+        <button class="cw-header-btn cw-hamburger" data-action="toggle-sidebar" title="Conversations">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+      ` : '';
+
+      this.container.innerHTML = `
+        <div class="cw-widget ${st.isExpanded ? 'cw-widget-expanded' : ''} ${cfg.embedded ? 'cw-widget-embedded' : ''}" style="--cw-primary: ${cfg.primaryColor}">
+          ${sidebarHtml}
+          <div class="cw-header" style="background-color: ${cfg.primaryColor}">
+            ${hamburgerBtn}
+            <span class="cw-title">${this._escapeHtml(cfg.title)}</span>
+            <div class="cw-header-actions">
+              ${cfg.showClearButton ? `<button class="cw-header-btn" data-action="clear" title="Clear" ${st.isLoading || st.messages.length === 0 ? 'disabled' : ''}>🗑️</button>` : ''}
+              ${cfg.showDebugButton && cfg.enableDebugMode ? `<button class="cw-header-btn ${st.debugMode ? 'cw-btn-active' : ''}" data-action="toggle-debug" title="Debug">🐛</button>` : ''}
+              ${cfg.showTTSButton && (cfg.elevenLabsApiKey || cfg.ttsProxyUrl) ? `<button class="cw-header-btn ${cfg.enableTTS ? 'cw-btn-active' : ''}" data-action="toggle-tts" title="TTS">${cfg.enableTTS ? '🔊' : '🔇'}</button>` : ''}
+              ${cfg.showExpandButton && !cfg.embedded ? `<button class="cw-header-btn" data-action="toggle-expand" title="${st.isExpanded ? 'Minimize' : 'Expand'}">${st.isExpanded ? '⊖' : '⊕'}</button>` : ''}
+              ${!cfg.embedded ? '<button class="cw-header-btn" data-action="close" title="Close">✕</button>' : ''}
+            </div>
+          </div>
+          ${statusBar}
+          <div class="cw-messages" id="${this.instanceId}-messages">
+            ${messagesHtml}
+            ${typingIndicator}
+          </div>
+          ${errorBar}
+          ${st.availableModels.length > 0 ? `
+          <div class="cw-model-selector">
+            <button class="cw-model-btn" data-action="toggle-model-selector" title="Select Model">
+              <span class="cw-model-icon">🤖</span>
+              <span class="cw-model-name">${st.availableModels.find(m => m.id === st.selectedModel)?.name || 'Select Model'}</span>
+              <span class="cw-model-chevron">${st.modelSelectorOpen ? '▲' : '▼'}</span>
+            </button>
+            ${st.modelSelectorOpen ? `
+            <div class="cw-model-dropdown">
+              ${st.availableModels.map(m => `
+                <button class="cw-model-option ${m.id === st.selectedModel ? 'cw-model-option-selected' : ''}"
+                        data-action="select-model" data-model-id="${m.id}">
+                  <span class="cw-model-option-name">${this._escapeHtml(m.name)}</span>
+                  <span class="cw-model-option-provider">${this._escapeHtml(m.provider)}</span>
+                  ${m.description ? `<span class="cw-model-option-desc">${this._escapeHtml(m.description)}</span>` : ''}
+                </button>
+              `).join('')}
+            </div>
+            ` : ''}
+          </div>
+          ` : ''}
+          <form class="cw-input-form" id="${this.instanceId}-form">
+            <input type="text" class="cw-input" placeholder="${this._escapeHtml(cfg.placeholder)}" ${st.isLoading ? 'disabled' : ''}>
+            <button type="submit" class="cw-send-btn" style="background-color: ${cfg.primaryColor}" ${st.isLoading ? 'disabled' : ''}>
+              ${st.isLoading ? '<span class="cw-spinner"></span>' : '➤'}
+            </button>
+          </form>
+        </div>
+      `;
+
+      // Attach event listeners
+      this.container.querySelectorAll('[data-action]').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const action = btn.dataset.action;
+          if (action === 'close') self.close();
+          else if (action === 'toggle-expand') self.toggleExpand();
+          else if (action === 'toggle-debug') self.toggleDebugMode();
+          else if (action === 'toggle-tts') self.toggleTTS();
+          else if (action === 'clear') self.clearMessages();
+          else if (action === 'toggle-sidebar') self.toggleSidebar();
+          else if (action === 'new-conversation') self.newConversation();
+          else if (action === 'switch-conversation') {
+            const convId = btn.dataset.conversationId;
+            if (convId) self.switchConversation(convId);
+          }
+          else if (action === 'load-more') self.loadMoreMessages();
+          else if (action === 'toggle-model-selector') self.toggleModelSelector();
+          else if (action === 'select-model') {
+            const modelId = btn.dataset.modelId;
+            if (modelId) self.setModel(modelId);
+          }
+          else if (action === 'toggle-tool') {
+            const toolTarget = btn.dataset.toolTarget;
+            const toolBody = document.getElementById(`tool-body-${toolTarget}`);
+            const chevron = btn.querySelector('.cw-tool-chevron');
+            if (toolBody) {
+              const isHidden = toolBody.style.display === 'none';
+              toolBody.style.display = isHidden ? 'block' : 'none';
+              if (chevron) chevron.textContent = isHidden ? '▲' : '▼';
+            }
+          }
+        });
+      });
+
+      const form = document.getElementById(`${this.instanceId}-form`);
+      if (form) {
+        form.addEventListener('submit', (e) => {
+          e.preventDefault();
+          const input = form.querySelector('.cw-input');
+          if (input && input.value.trim()) {
+            self.sendMessage(input.value);
+            input.value = '';
+            input.focus();
+          }
+        });
+      }
+
+      // Handle scroll to load more messages
+      const messagesEl = document.getElementById(`${this.instanceId}-messages`);
+      if (messagesEl) {
+        // Store previous scroll height to maintain position after loading more
+        const prevScrollHeight = messagesEl.scrollHeight;
+        const prevScrollTop = messagesEl.scrollTop;
+
+        // Add scroll listener for loading more messages
+        messagesEl.addEventListener('scroll', () => {
+          // If scrolled near the top (within 50px) and has more messages, load more
+          if (messagesEl.scrollTop < 50 && st.hasMoreMessages && !st.loadingMoreMessages) {
+            const currentScrollHeight = messagesEl.scrollHeight;
+            self.loadMoreMessages().then(() => {
+              // After loading, adjust scroll position to maintain view
+              const newScrollHeight = messagesEl.scrollHeight;
+              messagesEl.scrollTop = newScrollHeight - currentScrollHeight + messagesEl.scrollTop;
+            });
+          }
+        });
+
+        // Scroll to bottom only on initial load or new messages (not when loading older)
+        if (!st.loadingMoreMessages && st.messagesOffset <= 10) {
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        }
+      }
+
+      // Focus input
+      const inputEl = this.container.querySelector('.cw-input');
+      if (inputEl && !st.isLoading) setTimeout(() => inputEl.focus(), 0);
+    }
+
+    // Initialize
+    init() {
+      this.state.conversationId = this._getStored(this.config.conversationIdKey);
+
+      if (this.config.containerId) {
+        // Embedded mode: use existing container
+        this.container = document.getElementById(this.config.containerId);
+        if (!this.container) {
+          console.error(`[ChatWidget] Container not found: ${this.config.containerId}`);
+          return this;
+        }
+        this.container.classList.add('cw-container-embedded');
+      } else {
+        // Floating mode: create container
+        this.container = document.createElement('div');
+        this.container.id = this.instanceId;
+        this.container.className = `cw-container cw-position-${this.config.position}`;
+        document.body.appendChild(this.container);
+      }
+
+      this.render();
+
+      // Load available models for the model selector
+      this.loadAvailableModels().then(() => this.render());
+
+      // If we have a stored conversation ID, load its messages
+      if (this.state.conversationId) {
+        this._loadConversationMessages(this.state.conversationId);
+      }
+
+      console.log(`[ChatWidget] Instance ${this.instanceId} initialized`);
+      return this;
+    }
+
+    async _loadConversationMessages(conversationId) {
+      // Load messages for an existing conversation (e.g., on page reload)
+      this.state.isLoading = true;
+      this.render();
+
+      try {
+        const token = await this._getOrCreateSession();
+        const limit = 10;
+        const url = `${this.config.backendUrl}${this.config.apiPaths.conversations}${conversationId}/?limit=${limit}&offset=0`;
+
+        const response = await fetch(url, this._getFetchOptions({
+          method: 'GET',
+        }));
+
+        if (response.ok) {
+          const conversation = await response.json();
+          if (conversation.messages && conversation.messages.length > 0) {
+            this.state.messages = conversation.messages.map(m => ({
+              id: this._generateId(),
+              role: m.role,
+              content: m.content,
+            }));
+            this.state.totalMessages = conversation.total_messages || conversation.totalMessages || 0;
+            this.state.hasMoreMessages = conversation.has_more || conversation.hasMore || false;
+            this.state.messagesOffset = this.state.messages.length;
+          }
+        } else if (response.status === 404) {
+          // Conversation not found - clear the stored ID
+          console.log('[ChatWidget] Stored conversation not found, clearing');
+          this.state.conversationId = null;
+          this._setStored(this.config.conversationIdKey, null);
+        }
+      } catch (err) {
+        console.error('[ChatWidget] Failed to load conversation messages:', err);
+      } finally {
+        this.state.isLoading = false;
+        this.render();
+      }
+    }
+
+    destroy() {
+      if (this.state.eventSource) this.state.eventSource.close();
+      if (this.state.currentAudio) { this.state.currentAudio.pause(); this.state.currentAudio = null; }
+
+      if (this.container) {
+        if (this.config.containerId) {
+          // Embedded: just clear the container
+          this.container.innerHTML = '';
+          this.container.classList.remove('cw-container-embedded');
+        } else {
+          // Floating: remove the container
+          this.container.remove();
+        }
+        this.container = null;
+      }
+
+      instances.delete(this.instanceId);
+      console.log(`[ChatWidget] Instance ${this.instanceId} destroyed`);
+    }
+  }
+
+  // ============================================================================
+  // Public API
+  // ============================================================================
+
+  /**
+   * Create a new chat widget instance.
+   * Use this for multiple widgets on the same page.
+   */
+  function createInstance(config = {}) {
+    const instance = new ChatWidgetInstance(config);
+    return instance.init();
+  }
+
+  /**
+   * Initialize the default (singleton) chat widget.
+   * For backwards compatibility with the original API.
+   */
+  function init(config = {}) {
+    if (defaultInstance) {
+      defaultInstance.destroy();
+    }
+    defaultInstance = createInstance(config);
+    return defaultInstance;
+  }
+
+  /**
+   * Destroy the default instance.
+   */
+  function destroy() {
+    if (defaultInstance) {
+      defaultInstance.destroy();
+      defaultInstance = null;
+    }
+  }
+
+  // Proxy methods to default instance for backwards compatibility
+  function open() { if (defaultInstance) defaultInstance.open(); }
+  function close() { if (defaultInstance) defaultInstance.close(); }
+  function send(message) { if (defaultInstance) defaultInstance.send(message); }
+  function clearMessages() { if (defaultInstance) defaultInstance.clearMessages(); }
+  function toggleTTS() { if (defaultInstance) defaultInstance.toggleTTS(); }
+  function stopSpeech() { if (defaultInstance) defaultInstance.stopSpeech(); }
+  function setAuth(config) { if (defaultInstance) defaultInstance.setAuth(config); }
+  function clearAuth() { if (defaultInstance) defaultInstance.clearAuth(); }
+  function getState() { return defaultInstance ? defaultInstance.getState() : null; }
+  function getConfig() { return defaultInstance ? defaultInstance.getConfig() : null; }
+
+  // Export public API
+  global.ChatWidget = {
+    // Multi-instance API
+    createInstance,
+    getInstance: (id) => instances.get(id),
+    getAllInstances: () => Array.from(instances.values()),
+
+    // Singleton API (backwards compatible)
+    init,
+    destroy,
+    open,
+    close,
+    send,
+    clearMessages,
+    toggleTTS,
+    stopSpeech,
+    setAuth,
+    clearAuth,
+    getState,
+    getConfig,
+
+    // For markdown plugin
+    _enhancedMarkdownParser: null,
+  };
+
+})(typeof window !== 'undefined' ? window : this);