mini-chat-bot-widget 0.6.0 → 0.8.0

package/src/chat-widget.js

@@ -1,14 +1,109 @@
-// chat-widget.js - Modern vanilla JS chat bot widget
+// chat-widget.js - Basic vanilla JS chat widget skeleton
+
+// Import screen components
+import TextChatScreen from "./text-chat-screen.js";
+import AudioChatScreen from "./audio-chat-screen.js";
 
 class ChatWidget {
   constructor(options = {}) {
     this.title = options.title || "Chat Assistant";
     this.placeholder = options.placeholder || "Type your message...";
-    this.primaryColor = options.primaryColor || "#6366f1";
+    this.primaryColor = options.primaryColor || "#1a5c4b";
     this.container = null;
     this.messages = [];
     this.isMinimized = false;
+    this.currentScreen = "welcome"; // welcome, text, audio
+    this.textChatScreen = null;
+    this.audioChatScreen = null;
+
+    // Configuration options for message sending
+    this.langgraphUrl = options.langgraphUrl || "http://localhost:8080";
+    this.authToken = options.authToken || null;
+    this.threadId = options.threadId || null;
+    this.assistantId = options.assistantId || null;
+    this.selectedLanguage = options.selectedLanguage || "en";
+    this.accessToken = options.accessToken || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhpZHdnbHl5emRqc2dyaW92bWdtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDczOTE5NjEsImV4cCI6MjA2Mjk2Nzk2MX0.jAdwoGNbwK";
+    this.supabaseToken = options.supabaseToken || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhpZHdnbHl5emRqc2dyaW92bWdtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDczOTE5NjEsImV4cCI6MjA2Mjk2Nzk2MX0.jAdwoGNbwK";
+    this.userInfo = options.userInfo || {};
+    // Store the custom getHeaders function or use default
+    this._customGetHeaders = options.getHeaders;
+
+    // Default getHeaders implementation
+    this.getHeaders = () => {
+      if (this._customGetHeaders) {
+        return this._customGetHeaders();
+      }
+      const authToken = this.authToken || this.accessToken;
+      const supabaseToken = this.supabaseToken || authToken;
+      return {
+        "Content-Type": "application/json",
+        ...(authToken && { Authorization: `Bearer ${authToken}` }),
+        ...(supabaseToken && { "x-supabase-access-token": supabaseToken }),
+        Origin: (typeof window !== 'undefined' ? window.location.origin : "*") || "*",
+      };
+    };
+    this.getLatestCheckpoint = options.getLatestCheckpoint || (async () => null);
+    this.updateThread = options.updateThread || (async () => { });
+    this.getUserThreads = options.getUserThreads || (async ({ userId, userUuid }) => {
+      try {
+        const params = new URLSearchParams();
+        if (userUuid) params.append("user_uuid", userUuid);
+        const url = `${this.langgraphUrl}/history?${params.toString()}`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: this.getHeaders(),
+        });
+        if (!response.ok) return { threads: [] };
+        return await response.json();
+      } catch (e) {
+        console.error("Error fetching threads", e);
+        return { threads: [] };
+      }
+    });
+    this.setUserInfoFromDirectChatLogin = options.setUserInfoFromDirectChatLogin || (() => { });
+    this.setUserThreads = options.setUserThreads || (() => { });
+    this.setUserThreadsMetaData = options.setUserThreadsMetaData || (() => { });
+
+    this.languageOptions = [
+      { label: "Assamese", value: "as" },
+      { label: "Bengali", value: "bn" },
+      { label: "Dogri", value: "doi" },
+      { label: "English", value: "en" },
+      { label: "Gujarati", value: "gu" },
+      { label: "Hindi", value: "hi" },
+      { label: "Kannada", value: "kn" },
+      { label: "Konkani", value: "gom" },
+      { label: "Maithili", value: "mai" },
+      { label: "Malayalam", value: "ml" },
+      { label: "Marathi", value: "mr" },
+      { label: "Oriya", value: "or" },
+      { label: "Punjabi", value: "pa" },
+      { label: "Sanskrit", value: "sa" },
+      { label: "Sindhi", value: "sd" },
+      { label: "Tamil", value: "ta" },
+      { label: "Telugu", value: "te" },
+      { label: "Urdu", value: "ur" },
+    ];
+
+    // State management
+    this.isLoading = false;
+    this.isConnected = false;
+    this.initialized = false;
+    this.contentBlocks = [];
+    this.playedAudioIds = new Set();
+    this.currentInputAudio = null;
+    this.submissionInProgress = false;
+    this.processingAudioId = null;
+
     this._init();
+
+    // Initialize chat after DOM is ready
+    if (typeof window !== 'undefined') {
+      // Use setTimeout to ensure DOM is ready
+      setTimeout(() => {
+        this.initializeChat();
+      }, 100);
+    }
   }
 
   _init() {
@@ -22,45 +117,45 @@ class ChatWidget {
         </svg>
       </div>
       <div class="chat-widget-expanded" id="chat-expanded">
-        <div class="chat-header">
-          <div class="chat-header-content">
-            <div class="chat-avatar">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
-                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-              </svg>
+        <div class="chat-screen-container" id="chat-screen-container">
+          <!-- Screens will be rendered here -->
+        </div>
+        <div class="chat-drawer-overlay" id="chat-drawer-overlay">
+          <div class="chat-drawer">
+            <div class="drawer-header">
+              <div class="drawer-title">Menu</div>
             </div>
-            <div class="chat-header-text">
-              <div class="chat-title">${this.title}</div>
-              <div class="chat-status">● Online</div>
+            <div class="drawer-content">
+              <button class="drawer-item" id="drawer-new-chat">
+                New Chat
+              </button>       
+              <div class="language-selector-container">
+                 <div class="custom-select" id="language-selector">
+                   <div class="select-trigger" id="language-trigger">
+                     <span id="selected-language-text">English</span>
+                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron"><path d="m6 9 6 6 6-6"/></svg>
+                   </div>
+                   <div class="select-options" id="language-options"></div>
+                 </div>
+              </div>
+              <div class="drawer-divider" style="height: 1px; background: #e2e8f0; margin: 8px 0;"></div>
+              
+              <div id="drawer-threads" class="threads-container">
+                <!-- Threads will be rendered here -->
+                <div class="threads-loading">Loading history...</div>
+              </div>
             </div>
+            
           </div>
-          <button class="chat-close" id="chat-close">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-        </div>
-        <div class="chat-messages" id="chat-messages">
-          <div class="chat-welcome">
-            <div class="welcome-icon">👋</div>
-            <div class="welcome-text">Hello! How can I help you today?</div>
-          </div>
-        </div>
-        <div class="chat-input-wrapper">
-          <input type="text" id="chat-input" placeholder="${this.placeholder}" autocomplete="off" />
-          <button id="chat-send" disabled>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="22" y1="2" x2="11" y2="13"></line>
-              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-            </svg>
-          </button>
+          <div class="drawer-backdrop" id="drawer-backdrop"></div>
         </div>
       </div>
     `;
     document.body.appendChild(this.container);
     this._applyStyles();
+    this._initScreens();
+    this._renderScreen();
+    this._populateLanguageOptions();
     this._bindEvents();
   }
 
@@ -76,62 +171,15 @@ class ChatWidget {
         z-index: 10000;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       }
-
-      .chat-widget-minimized {
-        width: 60px;
-        height: 60px;
-        border-radius: 50%;
-        background: linear-gradient(135deg, ${this.primaryColor} 0%, #8b5cf6 100%);
-        color: white;
+.text-chat-screen {
+        flex: 1;
         display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        animation: pulse 2s infinite;
-      }
-
-      .chat-widget-minimized:hover {
-        transform: scale(1.1);
-        box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);
-      }
-
-      @keyframes pulse {
-        0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); }
-        50% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6); }
-      }
-
-      .chat-widget-expanded {
-        width: 380px;
-        height: 600px;
-        background: white;
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-        display: none;
         flex-direction: column;
         overflow: hidden;
-        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      @keyframes slideUp {
-        from {
-          opacity: 0;
-          transform: translateY(20px) scale(0.95);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-      }
-
-      .chat-widget-expanded.visible {
-        display: flex;
       }
 
       .chat-header {
-        background: linear-gradient(135deg, ${this.primaryColor} 0%, #8b5cf6 100%);
-        color: white;
+        color: ${this.primaryColor};
         padding: 20px;
         display: flex;
         align-items: center;
@@ -142,6 +190,25 @@ class ChatWidget {
         display: flex;
         align-items: center;
         gap: 12px;
+        flex: 1;
+      }
+
+      .chat-back {
+        background: transparent;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        margin-right: 8px;
+      }
+
+      .chat-back:hover {
+        background: rgba(255, 255, 255, 0.15);
       }
 
       .chat-avatar {
@@ -160,10 +227,10 @@ class ChatWidget {
         flex-direction: column;
         gap: 2px;
       }
-
+      
       .chat-title {
         font-weight: 600;
-        font-size: 16px;
+        font-size: 20px;
       }
 
       .chat-status {
@@ -175,284 +242,2282 @@ class ChatWidget {
       }
 
       .chat-close {
-        background: transparent;
+        background: ${this.primaryColor};
         border: none;
         color: white;
         cursor: pointer;
         padding: 8px;
-        border-radius: 8px;
+        border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s;
       }
 
-      .chat-close:hover {
-        background: rgba(255, 255, 255, 0.15);
-      }
-
-      .chat-messages {
-        flex: 1;
-        padding: 20px;
-        overflow-y: auto;
-        background: #f9fafb;
+      .chat-widget-minimized {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        background: ${this.primaryColor};
+        color: white;
         display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-
-      .chat-messages::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      .chat-messages::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      .chat-messages::-webkit-scrollbar-thumb {
-        background: #cbd5e1;
-        border-radius: 3px;
-      }
-
-      .chat-welcome {
-        text-align: center;
-        padding: 40px 20px;
-        color: #64748b;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      .welcome-icon {
-        font-size: 48px;
-        margin-bottom: 12px;
+      .chat-widget-minimized:hover {
+        transform: scale(1.1);
       }
 
-      .welcome-text {
-        font-size: 15px;
-        font-weight: 500;
-        color: #475569;
+      @keyframes pulse {
+        0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); }
+        50% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6); }
       }
 
-      .chat-message {
-        display: flex;
-        gap: 8px;
-        animation: messageSlide 0.3s ease-out;
+      .chat-widget-expanded {
+        position: relative;
+        width: 480px;
+        height: 640px;
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+        display: none;
+        flex-direction: column;
+        overflow: hidden;
+        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      @keyframes messageSlide {
+      @keyframes slideUp {
         from {
           opacity: 0;
-          transform: translateY(10px);
+          transform: translateY(20px) scale(0.95);
         }
         to {
           opacity: 1;
-          transform: translateY(0);
+          transform: translateY(0) scale(1);
         }
       }
 
-      .chat-message.user {
-        flex-direction: row-reverse;
-      }
-
-      .message-bubble {
-        max-width: 75%;
-        padding: 12px 16px;
-        border-radius: 16px;
-        font-size: 14px;
-        line-height: 1.5;
-        word-wrap: break-word;
+      .chat-widget-expanded.visible {
+        display: flex;
       }
 
-      .chat-message.user .message-bubble {
-        background: linear-gradient(135deg, ${this.primaryColor} 0%, #8b5cf6 100%);
-        color: white;
-        border-bottom-right-radius: 4px;
+      .chat-screen-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
       }
 
-      .chat-message.bot .message-bubble {
-        background: white;
-        color: #1e293b;
-        border-bottom-left-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      /* Welcome Screen Styles */
+      .welcome-screen {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: start;
+        background: linear-gradient(180deg, white 10%, #E1EFCC );
+        padding: 0px;
       }
 
-      .typing-indicator {
-        display: flex;
-        gap: 4px;
-        padding: 12px 16px;
-        background: white;
-        border-radius: 16px;
-        border-bottom-left-radius: 4px;
-        max-width: 60px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      .welcome-content {
+        width: 80%;
+        margin: auto;
+        text-align: center;
+        padding-top: 20px;
       }
 
-      .typing-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #94a3b8;
-        animation: typing 1.4s infinite;
+      .welcome-icon {
+        font-size: 64px;
+        margin-bottom: 16px;
+        animation: bounce 2s infinite;
       }
 
-      .typing-dot:nth-child(2) {
-        animation-delay: 0.2s;
+      @keyframes bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-10px); }
       }
 
-      .typing-dot:nth-child(3) {
-        animation-delay: 0.4s;
+      .welcome-title {
+        font-size: 24px;
+        font-weight: 600;
+        color: #1e293b;
+        margin: 0 0 8px 0;
       }
 
-      @keyframes typing {
-        0%, 60%, 100% {
-          transform: translateY(0);
-          opacity: 0.7;
-        }
-        30% {
-          transform: translateY(-10px);
-          opacity: 1;
-        }
+      .welcome-subtitle {
+        font-size: 14px;
+        color: #64748b;
+        margin: 0 0 32px 0;
       }
 
-      .chat-input-wrapper {
+      .welcome-options {
         display: flex;
-        padding: 16px;
-        gap: 8px;
-        background: white;
-        border-top: 1px solid #e2e8f0;
+        flex-direction: column;
+        gap: 12px;
       }
 
-      #chat-input {
-        flex: 1;
+      .welcome-option-btn {
+        background: white;
         border: 2px solid #e2e8f0;
         border-radius: 12px;
-        padding: 12px 16px;
-        font-size: 14px;
-        outline: none;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        cursor: pointer;
         transition: all 0.2s;
-        font-family: inherit;
+        text-align: left;
+        width: 100%;
       }
 
-      #chat-input:focus {
+      .welcome-option-btn:hover {
         border-color: ${this.primaryColor};
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
       }
 
-      #chat-send {
-        background: linear-gradient(135deg, ${this.primaryColor} 0%, #8b5cf6 100%);
-        color: white;
-        border: none;
-        border-radius: 12px;
-        padding: 12px 16px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
+      .option-icon {
+        font-size: 32px;
+        flex-shrink: 0;
+      }
+
+      .option-content {
+        flex: 1;
       }
 
-      #chat-send:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+      .option-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1e293b;
+        margin-bottom: 4px;
+      }
+
+      .option-description {
+        font-size: 13px;
+        color: #64748b;
       }
 
-      #chat-send:not(:disabled):hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+      .welcome-option-btn svg {
+        color: #94a3b8;
+        flex-shrink: 0;
       }
 
-      #chat-send:not(:disabled):active {
-        transform: scale(0.95);
+      .welcome-option-btn:hover svg {
+        color: ${this.primaryColor};
       }
-    `;
-    document.head.appendChild(style);
+.gradient-sphere-welcome-screen {
+  width: 200px !important;
+  height: 200px !important;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0a0d120f 0%, #85bc31 50%, #d0f19e 100%)
+    !important;
+  position: relative;
+  margin: 20px auto 30px auto;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  animation: float 3s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.sphere-highlight {
+  position: absolute;
+  top: 20%;
+  right: 20%;
+  width: 35px;
+  height: 35px;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.8) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  filter: blur(1px);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
   }
+  50% {
+    transform: translateY(-10px);
+  }
+}
 
-  _bindEvents() {
-    const toggle = this.container.querySelector("#chat-toggle");
-    const closeBtn = this.container.querySelector("#chat-close");
-    const expanded = this.container.querySelector("#chat-expanded");
-    const input = this.container.querySelector("#chat-input");
-    const sendBtn = this.container.querySelector("#chat-send");
+.welcome-text {
+  max-width: 400px;
+  margin-bottom: 30px;
+  flex-shrink: 0;
+  text-align: left;
+}
 
-    toggle.addEventListener("click", () => {
-      toggle.style.display = "none";
-      expanded.classList.add("visible");
-      input.focus();
-    });
+.greeting {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a5c4b;
+  margin: 0 0 16px 0;
+}
 
-    closeBtn.addEventListener("click", () => {
-      expanded.classList.remove("visible");
-      toggle.style.display = "flex";
-    });
+.intro {
+  font-size: 18px;
+  font-weight: 500;
+  color: #1a5c4b;
+  margin: 0 0 12px 0;
+  line-height: 1.4;
+}
 
-    input.addEventListener("input", () => {
-      sendBtn.disabled = !input.value.trim();
-    });
 
-    const send = () => {
-      const text = input.value.trim();
-      if (!text) return;
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+  margin-top: auto;
+  /* padding-top: 10px; */
+  padding-bottom: 20px;
+  justify-content: center;
+  width: 100%;
+  align-self: center;
+}
 
-      this._addMessage(text, true);
-      input.value = "";
-      sendBtn.disabled = true;
+.primary-button {
+  background: #1a5c4b;
+  display:flex;
+  color: white;
+  border: none;
+  padding: 16px 32px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(26, 92, 75, 0.3);
+}
 
-      this._showTypingIndicator();
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(26, 92, 75, 0.4);
+}
 
-      setTimeout(() => {
-        this._hideTypingIndicator();
-        this._addMessage(`Thanks for your message! You said: "${text}"`, false);
-      }, 1000 + Math.random() * 1000);
-    };
+      @media (max-width: 768px) {
+        #chat-widget-container {
+          bottom: 16px;
+          right: 16px;
+        }
 
-    sendBtn.addEventListener("click", send);
-    input.addEventListener("keypress", (e) => {
-      if (e.key === "Enter" && !sendBtn.disabled) send();
-    });
-  }
+        .chat-widget-expanded {
+          width: 100vw;
+          height: 100vh;
+          border-radius: 0;
+          max-width: 100vw;
+          max-height: 100vh;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
 
-  _addMessage(text, isUser) {
-    const messagesContainer = this.container.querySelector("#chat-messages");
-    const welcome = messagesContainer.querySelector(".chat-welcome");
-    if (welcome) welcome.remove();
+        .chat-widget-expanded.visible {
+          display: flex;
+        }
 
-    const messageEl = document.createElement("div");
-    messageEl.className = `chat-message ${isUser ? "user" : "bot"}`;
-    messageEl.innerHTML = `<div class="message-bubble">${this._escapeHtml(text)}</div>`;
-    messagesContainer.appendChild(messageEl);
-    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-  }
+        .welcome-content {
+          max-width: 100%;
+          padding-top: 40px;
+        }
 
-  _showTypingIndicator() {
-    const messagesContainer = this.container.querySelector("#chat-messages");
-    const indicator = document.createElement("div");
-    indicator.className = "chat-message bot";
-    indicator.id = "typing-indicator";
-    indicator.innerHTML = `
-      <div class="typing-indicator">
-        <div class="typing-dot"></div>
-        <div class="typing-dot"></div>
-        <div class="typing-dot"></div>
-      </div>
-    `;
-    messagesContainer.appendChild(indicator);
-    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-  }
+        .chat-drawer {
+          width: 85% !important; /* Wider drawer on mobile */
+        }
+      }
 
-  _hideTypingIndicator() {
-    const indicator = this.container.querySelector("#typing-indicator");
-    if (indicator) indicator.remove();
-  }
+      /* Drawer Styles */
+      .chat-drawer-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2000;
+        display: flex;
+        pointer-events: none;
+        visibility: hidden;
+      }
+
+      .chat-drawer-overlay.visible {
+        pointer-events: auto;
+        visibility: visible;
+      }
+
+      .chat-drawer {
+        width: 65%;
+        background: white;
+        height: 100%;
+        transform: translateX(-100%);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        flex-direction: column;
+        z-index: 2002;
+        box-shadow: 4px 0 24px rgba(0,0,0,0.1);
+      }
+
+      .chat-drawer-overlay.visible .chat-drawer {
+        transform: translateX(0);
+      }
+
+      .drawer-backdrop {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        backdrop-filter: blur(2px);
+        cursor: pointer;
+      }
+
+      .chat-drawer-overlay.visible .drawer-backdrop {
+        opacity: 1;
+      }
+
+      .drawer-header {
+        padding: 24px;
+        border-bottom: 1px solid #f1f5f9;
+      }
+
+      .drawer-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: ${this.primaryColor};
+      }
+
+      .drawer-content {
+        flex: 1;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow-y: auto;
+      }
+
+      .drawer-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background: transparent;
+        border: none;
+        border-radius: 8px;
+        color: #475569;
+        font-size: 15px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: left;
+      }
+
+      .drawer-item:hover {
+        background: #f1f5f9;
+        color: ${this.primaryColor};
+      }
+
+      .drawer-item svg {
+        opacity: 0.7;
+      }
+
+      .drawer-item:hover svg {
+        opacity: 1;
+        color: ${this.primaryColor};
+      }
+
+      .drawer-footer {
+        padding: 16px 24px;
+        border-top: 1px solid #f1f5f9;
+      }
+
+      .drawer-version {
+        font-size: 12px;
+        color: #94a3b8;
+        text-align: center;
+      }
+
+      /* Language Selector Styles */
+      .language-selector-container {
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+
+      .language-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #94a3b8;
+        margin-bottom: 6px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding-left: 4px;
+      }
+
+      .custom-select {
+        position: relative;
+        width: 100%;
+        user-select: none;
+      }
+
+      .select-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 14px;
+        color: #334155;
+      }
+
+      .select-trigger:hover {
+        border-color: ${this.primaryColor};
+        background: white;
+      }
+
+      .select-trigger.active {
+        border-color: ${this.primaryColor};
+        background: white;
+        box-shadow: 0 0 0 2px rgba(26, 92, 75, 0.1);
+      }
+
+      .select-options {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        right: 0;
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 50;
+        display: none;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .select-options.open {
+        display: block;
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .select-option {
+        padding: 10px 12px;
+        font-size: 14px;
+        color: #334155;
+        cursor: pointer;
+        transition: all 0.1s;
+      }
+
+      .select-option:hover {
+        background: #f1f5f9;
+        color: ${this.primaryColor};
+      }
+
+      .select-option.selected {
+        background: rgba(26, 92, 75, 0.08);
+        color: ${this.primaryColor};
+        font-weight: 500;
+      }
+      
+      .chevron {
+        transition: transform 0.2s ease;
+        color: #94a3b8;
+      }
+      
+      .select-trigger.active .chevron {
+        transform: rotate(180deg);
+        color: ${this.primaryColor};
+      }
+      
+      /* Thread List Styles */
+      .threads-container {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding-top: 8px;
+      }
+      
+      .threads-loading {
+        padding: 16px;
+        text-align: center;
+        color: #94a3b8;
+        font-size: 13px;
+      }
+      
+      .thread-item {
+        display: flex;
+        flex-direction: column;
+        padding: 10px 12px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: left;
+        border: none;
+        background: transparent;
+        width: 100%;
+        color: #475569;
+      }
+      
+      .thread-item:hover {
+        background-color: #f1f5f9; /* action.hover */
+        color: ${this.primaryColor};
+      }
+      
+      .thread-item.selected {
+        background-color: rgba(26, 92, 75, 0.08); /* action.selected */
+      }
+      
+      .thread-content {
+        font-size: 0.9rem;
+        color: #334155;
+        line-height: 1.3;
+        margin-bottom: 4px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-weight: 500;
+      }
+      
+      .thread-date {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #94a3b8;
+      }
+      
+      .no-history {
+         padding: 16px;
+         text-align: center;
+         color: #94a3b8;
+         font-size: 14px;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  _renderScreen() {
+    const screenContainer = this.container.querySelector("#chat-screen-container");
+
+    switch (this.currentScreen) {
+      case "welcome":
+        this._renderWelcomeScreen(screenContainer);
+        break;
+      case "text":
+        this._renderTextChatScreen(screenContainer);
+        break;
+      case "audio":
+        this._renderAudioChatScreen(screenContainer);
+        break;
+    }
+  }
+
+  _initScreens() {
+    // Initialize text chat screen
+    this.textChatScreen = new TextChatScreen({
+      title: this.title,
+      placeholder: this.placeholder,
+      primaryColor: this.primaryColor,
+      onMessage: (text, respond) => {
+        this._handleUserMessage(text, respond);
+      },
+      onBack: () => {
+        this.currentScreen = "welcome";
+        this._renderScreen();
+      },
+      onOpenDrawer: () => {
+        this._toggleDrawer(true);
+      },
+      onClose: () => {
+        const expanded = this.container.querySelector("#chat-expanded");
+        const toggle = this.container.querySelector("#chat-toggle");
+        expanded.classList.remove("visible");
+        toggle.style.display = "flex";
+        this.currentScreen = "welcome";
+        this.messages = [];
+        this.contentBlocks = [];
+        this._initScreens();
+      },
+      messages: this.messages,
+      sendMessage: (text, contentBlocks) => {
+        return this.sendMessage(text, contentBlocks);
+      },
+      contentBlocks: this.contentBlocks,
+      onContentBlocksChange: (contentBlocks) => {
+        this.contentBlocks = contentBlocks;
+      },
+      navigateToAudioScreen: () => {
+        this._navigateToScreen("audio")
+      }
+    });
+
+    // Initialize audio chat screen
+    this.audioChatScreen = new AudioChatScreen({
+      title: this.title,
+      primaryColor: this.primaryColor,
+      onRecordStart: () => {
+        // Handle recording start
+      },
+      onRecordStop: () => {
+        // Handle recording stop
+      },
+      onBack: () => {
+        this.currentScreen = "welcome";
+        this._renderScreen();
+      },
+      onOpenDrawer: () => {
+        this._toggleDrawer(true);
+      },
+      onClose: () => {
+        const expanded = this.container.querySelector("#chat-expanded");
+        const toggle = this.container.querySelector("#chat-toggle");
+        expanded.classList.remove("visible");
+        toggle.style.display = "flex";
+        this.currentScreen = "welcome";
+        this.messages = [];
+        this._initScreens();
+      },
+      messages: this.messages,
+      sendMessage: (text, contentBlocks) => {
+        return this.sendMessage(text, contentBlocks);
+      },
+      selectedLanguage: this.selectedLanguage,
+      navigateToTextScreen: () => {
+        this._navigateToScreen("text")
+      }
+    });
+  }
+
+  _renderWelcomeScreen(container) {
+    container.innerHTML = `
+    <main class="welcome-screen">
+    <div class="chat-header">
+          <div class="chat-header-content visible">
+            <div class="chat-header-text">
+              <div class="chat-title">${this.title}</div>
+            </div>
+          </div>
+          <button class="chat-close" id="text-chat-close">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      <div >
+        <div class="welcome-content">
+          <div class="gradient-sphere-welcome-screen">
+            <div class="sphere-highlight">
+            </div>
+          </div>
+          
+          <div class="welcome-text">
+            <p class="greeting">Hello!</p>
+            <p class="intro">
+              We are your Krishi Vigyan Sahayak—KVS, a companion to help with every farming question! Tell us, what do you want to know today?
+            </p>
+          </div>
+          
+          <div class="action-buttons">
+          <button
+            class="primary-button !rounded-full"
+            id="welcome-audio-btn"
+          >
+            Let's talk &#8203; &#8203;  <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic-icon lucide-mic"><path d="M12 19v3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><rect x="9" y="2" width="6" height="13" rx="3"/></svg>
+          </button>
+        </div>
+          
+          
+
+        </div>
+      </div>
+    </main>
+    `;
+
+    // Bind welcome screen events
+    // const textBtn = container.querySelector("#welcome-text-btn");
+    const audioBtn = container.querySelector("#welcome-audio-btn");
+    const closeBtn = container.querySelector("#text-chat-close");
+
+    // textBtn.addEventListener("click", () => this._navigateToScreen("text"));
+    audioBtn.addEventListener("click", () => this._navigateToScreen("audio"));
+
+    if (closeBtn) {
+      closeBtn.addEventListener("click", () => {
+        const expanded = this.container.querySelector("#chat-expanded");
+        const toggle = this.container.querySelector("#chat-toggle");
+        expanded.classList.remove("visible");
+        toggle.style.display = "flex";
+        this.currentScreen = "welcome";
+        this.messages = [];
+        this._initScreens();
+      });
+    }
+  }
+
+  _renderTextChatScreen(container) {
+    if (this.textChatScreen) {
+      // Sync contentBlocks before rendering
+      this.textChatScreen.contentBlocks = this.contentBlocks;
+      this.textChatScreen.messages = this.messages;
+      this.textChatScreen.render(container);
+    }
+  }
+
+  _renderAudioChatScreen(container) {
+    if (this.audioChatScreen) {
+      this.audioChatScreen.messages = this.messages;
+      this.audioChatScreen.render(container);
+    }
+  }
+
+
+
+  _navigateToScreen(screen) {
+    this.currentScreen = screen;
+    this._renderScreen();
+  }
+
+  _populateLanguageOptions() {
+    const optionsContainer = this.container.querySelector("#language-options");
+    if (!optionsContainer) return;
+
+    optionsContainer.innerHTML = this.languageOptions.map(opt => `
+        <div class="select-option ${opt.value === this.selectedLanguage ? 'selected' : ''}" data-value="${opt.value}">
+            ${opt.label}
+        </div>
+    `).join('');
+
+    this._updateSelectedLanguageDisplay();
+  }
+
+  _updateSelectedLanguageDisplay() {
+    const textSpan = this.container.querySelector("#selected-language-text");
+    if (textSpan) {
+      const option = this.languageOptions.find(opt => opt.value === this.selectedLanguage);
+      textSpan.textContent = option ? option.label : "English";
+    }
+  }
+
+  _bindLanguageSelectorEvents() {
+    const selector = this.container.querySelector("#language-selector");
+    const trigger = this.container.querySelector("#language-trigger");
+    const optionsFn = this.container.querySelector("#language-options");
+
+    if (trigger && optionsFn) {
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = optionsFn.classList.contains("open");
+        if (isOpen) {
+          optionsFn.classList.remove("open");
+          trigger.classList.remove("active");
+        } else {
+          optionsFn.classList.add("open");
+          trigger.classList.add("active");
+        }
+      });
+
+      const options = optionsFn.querySelectorAll(".select-option");
+      options.forEach(opt => {
+        opt.addEventListener("click", (e) => {
+          const value = e.currentTarget.dataset.value;
+          this.selectedLanguage = value;
+
+          // Update UI
+          this._updateSelectedLanguageDisplay();
+          optionsFn.querySelectorAll(".select-option").forEach(o => o.classList.remove("selected"));
+          e.currentTarget.classList.add("selected");
+
+          // Close dropdown
+          optionsFn.classList.remove("open");
+          trigger.classList.remove("active");
+
+          console.log("Language selected:", this.selectedLanguage);
+        });
+      });
+
+      // Close on click outside
+      document.addEventListener("click", (e) => {
+        if (selector && !selector.contains(e.target)) {
+          optionsFn.classList.remove("open");
+          trigger.classList.remove("active");
+        }
+      });
+    }
+  }
+
+  async _fetchThreads() {
+    const threadsContainer = this.container.querySelector("#drawer-threads");
+    if (!threadsContainer) return;
+
+    threadsContainer.innerHTML = '<div class="threads-loading">Loading history...</div>';
+
+    try {
+      const storedUser = localStorage.getItem("DfsWeb.user-info");
+      const user = storedUser ? JSON.parse(storedUser) : null;
+
+      if (!user?.uuid) {
+        threadsContainer.innerHTML = '<div class="no-history">Please log in to view history</div>';
+        return;
+      }
+
+      console.log("USER ID", user.id, "USER UUID", user.uuid);
+
+      const data = await this.getUserThreads({ userId: user.id, userUuid: user.uuid });
+      console.log("THREAD DATA", data);
+
+      const threads = data.threads || [];
+      const threadsWithHistory = threads.filter((thread) => thread.history && thread.history.length > 0);
+
+      this._renderThreadList(threadsWithHistory);
+
+    } catch (error) {
+      console.error("UNEXPECTED ERROR IN FETCHING THREADS", error.message);
+      threadsContainer.innerHTML = '<div class="no-history">Failed to load history</div>';
+    }
+  }
+
+  _renderThreadList(threads) {
+    const threadsContainer = this.container.querySelector("#drawer-threads");
+    if (!threadsContainer) return;
+
+    if (threads.length === 0) {
+      threadsContainer.innerHTML = '<div class="no-history">No history available</div>';
+      return;
+    }
+
+    threadsContainer.innerHTML = '';
+
+    threads.forEach(thread => {
+      const isSelected = thread.thread_id === this.threadId; // Use current threadId
+
+      const threadItem = document.createElement('div');
+      threadItem.className = `thread-item ${isSelected ? 'selected' : ''}`;
+
+      // Get primary text (first user message)
+      const primaryText = thread.history[0]?.values?.messages[0]?.content || "New Chat";
+      // Handle array content (if content is array of blocks)
+      let displayText = primaryText;
+      if (Array.isArray(primaryText)) {
+        const textBlock = primaryText.find(b => b.type === 'text');
+        displayText = textBlock ? textBlock.text : "Multimedia Message";
+      } else if (typeof primaryText === 'object') {
+        displayText = "Message";
+      }
+
+      const date = new Date(thread.created_at).toLocaleString();
+
+      threadItem.innerHTML = `
+        <div class="thread-content">${displayText}</div>
+        <div class="thread-date">${date}</div>
+      `;
+
+      threadItem.addEventListener('click', () => {
+        this._handleThreadSelect(thread.thread_id);
+      });
+
+      threadsContainer.appendChild(threadItem);
+    });
+  }
+
+  _handleThreadSelect(threadId) {
+    console.log("Select thread:", threadId);
+    this.threadId = threadId;
+    this._toggleDrawer(false);
+
+    // Switch to text screen to show history
+    this.currentScreen = "text";
+
+    // Clear current messages
+    this.messages = [];
+    this.setIsLoading = true; // Set loading state if you have setter, otherwise this.isLoading = true
+    this.isLoading = true;
+
+    // Re-initialize screens (clears them)
+    // this._initScreens(); // Can't fully re-init as it might break event listeners
+    // Better to just load history and render
+
+    this._renderScreen();
+
+    // Load history for this thread
+    this.loadHistory(threadId).then(() => {
+      this.isLoading = false;
+      this._renderScreen(); // Re-render with new messages
+    });
+  }
+
+  _bindEvents() {
+    const toggle = this.container.querySelector("#chat-toggle");
+    const expanded = this.container.querySelector("#chat-expanded");
+
+    // Ensure toggle button is visible
+    if (toggle) {
+      toggle.style.display = "flex";
+    }
+
+    toggle.addEventListener("click", () => {
+      console.log("Clicked")
+      toggle.style.display = "none";
+      expanded.classList.add("visible");
+      this.currentScreen = "welcome";
+      this._renderScreen();
+    });
+
+    // Drawer events
+    const drawerBackdrop = this.container.querySelector("#drawer-backdrop");
+    if (drawerBackdrop) {
+      drawerBackdrop.addEventListener("click", () => {
+        this._toggleDrawer(false);
+      });
+    }
+
+    const drawerItems = this.container.querySelectorAll(".drawer-item");
+    drawerItems.forEach(item => {
+      item.addEventListener("click", (e) => {
+        // Handle drawer item click
+        this._toggleDrawer(false);
+        const targetId = e.currentTarget.id;
+        if (targetId === "drawer-new-chat") {
+          this._resetChat();
+        }
+      });
+    });
+
+    this._bindLanguageSelectorEvents();
+  }
+
+  _toggleDrawer(show) {
+    const overlay = this.container.querySelector("#chat-drawer-overlay");
+    if (!overlay) return;
+
+    if (show) {
+      overlay.classList.add("visible");
+      // Fetch threads when drawer is opened
+      this._fetchThreads();
+    } else {
+      overlay.classList.remove("visible");
+    }
+  }
+
+  _resetChat() {
+    this.messages = [];
+    this.threadId = null;
+    this.contentBlocks = [];
+    // this.currentScreen = "welcome";
+    this._initScreens();
+    this._renderScreen();
+  }
+
+  _handleUserMessage(text, respond) {
+    // Simple echo response - just returns what the user typed
+    // The respond callback is provided by TextChatScreen
+    if (respond) {
+      respond(`You said: "${text}"`);
+    }
+  }
+
+  // Add message to shared messages array and update UI
+  _addMessageToArray(message) {
+    this.messages.push(message);
+    this._notifyScreensUpdate();
+  }
+
+  // Update message in shared messages array
+  _updateMessageInArray(messageId, updates) {
+    const index = this.messages.findIndex(msg => msg.id === messageId);
+    if (index !== -1) {
+      this.messages[index] = { ...this.messages[index], ...updates };
+      this._notifyScreensUpdate();
+    }
+  }
+
+  // Notify all screens to update their UI
+  _notifyScreensUpdate() {
+    if (this.textChatScreen && this.textChatScreen.container) {
+      this.textChatScreen._syncMessages(this.messages);
+    }
+    if (this.audioChatScreen && this.audioChatScreen.container) {
+      this.audioChatScreen._syncMessages(this.messages);
+    }
+  }
+
+  // Send message function adapted from React version
+  async sendMessage(inputValue, contentBlocks = []) {
+    if ((!inputValue.trim() && contentBlocks.length === 0) || this.isLoading) {
+      return;
+    }
+
+    console.log(
+      "📤 Sending text message - Language:",
+      this.selectedLanguage,
+      "Assistant ID:",
+      this.assistantId || "Not available",
+      "Thread ID:",
+      this.threadId || "Not available",
+      "Access token:",
+      this.accessToken ? "Present" : "Empty - backend will handle",
+    );
+
+    // Prepare content blocks for the message
+    const messageContent = [];
+
+    // Add text content if present
+    if (inputValue.trim()) {
+      const textContent = inputValue;
+      messageContent.push({ type: "text", text: textContent });
+    }
+
+    // Add file attachments
+    contentBlocks.forEach((block) => {
+      messageContent.push(block);
+    });
+
+    // Create user message for display
+    const userMessage = {
+      id: Date.now(),
+      content: inputValue.trim() || "📎 File attachments",
+      sender: "user",
+      timestamp: new Date().toISOString(),
+      attachments: contentBlocks.length > 0 ? contentBlocks : null,
+    };
+
+    console.log("USER MESSAGE", userMessage);
+    console.log("USER MESSAGE CONTENTBLOCKS", contentBlocks);
+    console.log("USER MESSAGE CONTENT", messageContent);
+
+    this._addMessageToArray(userMessage);
+    this.contentBlocks = [];
+
+    // Clear contentBlocks in text chat screen
+    if (this.textChatScreen) {
+      this.textChatScreen.contentBlocks = [];
+      this.textChatScreen.renderFilePreview();
+      this.textChatScreen.updateSendButton();
+    }
+
+    // Reset states for text messages
+    this.playedAudioIds.clear();
+    this.currentInputAudio = null;
+    this.submissionInProgress = false;
+    this.processingAudioId = null;
+
+    this.isLoading = true;
+
+    try {
+      // Always attempt to send message, let backend handle auth
+      await this.sendMessageWithStreaming(messageContent);
+    } catch (error) {
+      console.error("Error sending message:", error);
+      const errorMessage = {
+        id: Date.now() + 1,
+        content: "Sorry, I encountered an error. Please try again.",
+        sender: "assistant",
+        timestamp: new Date().toISOString(),
+        isError: true,
+      };
+      this._addMessageToArray(errorMessage);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  // Send message with streaming function adapted from React version
+  async sendMessageWithStreaming(messageContent) {
+    console.log("USER MESSAGE STREAMING", messageContent);
+    console.log(
+      "📤 Sending text message - Language:",
+      this.selectedLanguage,
+      "Access token:",
+      this.accessToken ? "Present" : "Not found",
+    );
+
+    const assistantMessage = {
+      id: Date.now() + 1,
+      content: "",
+      sender: "assistant",
+      timestamp: new Date().toISOString(),
+      isStreaming: true,
+      isProcessing: true,
+      textSessionId: Date.now() + 1,
+      hasAudioResponse: false,
+      inputType: "text",
+    };
+
+    this._addMessageToArray(assistantMessage);
+
+    let latestRunId = null;
+
+    try {
+      // Get the latest checkpoint to resume from the latest state
+      const latestCheckpoint = await this.getLatestCheckpoint(this.threadId);
+
+      console.log("📤 Sending message to backend:", {
+        input: {
+          messages: [
+            {
+              id: `msg-${Date.now()}`,
+              type: "human",
+              content: messageContent,
+            },
+          ],
+          user_language: this.selectedLanguage,
+          access_token: "[redacted]",
+          user_info: JSON.stringify(this.userInfo),
+        },
+        config: { configurable: {} },
+        metadata: {
+          supabaseAccessToken: "[redacted]",
+          user_language: this.selectedLanguage,
+          input_type: "text",
+          audio_content: null,
+        },
+        stream_mode: ["values", "messages-tuple", "custom"],
+        stream_subgraphs: true,
+        assistant_id: this.assistantId,
+        on_disconnect: "cancel",
+        ...(latestCheckpoint && { checkpoint: latestCheckpoint }),
+      });
+
+      const response = await fetch(
+        `${this.langgraphUrl}/threads/${this.threadId}/runs/stream`,
+        {
+          method: "POST",
+          headers: this.getHeaders(),
+          body: JSON.stringify({
+            input: {
+              messages: [
+                {
+                  id: `msg-${Date.now()}`,
+                  type: "human",
+                  content: messageContent,
+                },
+              ],
+              user_language: this.selectedLanguage,
+              access_token: this.accessToken,
+              user_info: JSON.stringify(this.userInfo),
+            },
+            config: { configurable: {} },
+            metadata: {
+              supabaseAccessToken: this.supabaseToken,
+              user_language: this.selectedLanguage,
+            },
+            stream_mode: ["values", "messages-tuple", "custom"],
+            stream_subgraphs: true,
+            assistant_id: this.assistantId,
+            on_disconnect: "cancel",
+            ...(latestCheckpoint && { checkpoint: latestCheckpoint }),
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      // Handle streaming response
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentMessage = ""; // Local to this function scope
+      let bestMessageText = "";
+      let bestMessagePriority = -1;
+      let lastUpdateTime = 0;
+      const UPDATE_THROTTLE = 150; // Throttle updates to max ~7 per second
+      const requestId = Date.now(); // Unique ID for this request
+      let currentEvent = null; // Track current event type
+      let currentData = null; // Track current data
+      let hasReceivedMeaningfulResponse = false; // Track if we've received a meaningful response
+      let finalResponse = ""; // Store the final meaningful response
+      let latestUiAction = null; // Track the last ui_action from the last ui_action_mapper
+      let endEventFinalized = false; // Track if we finalized on 'end' event
+      let endFinalContent = ""; // Content used at 'end' event
+      let currentAdditionalKwargs = null; // Chart-related additional kwargs captured from stream
+      let chartUrlFromViz = null; // If stream provides a chart image URL, store it here and use it for the assistant message
+
+      console.log(
+        "🔍 Starting to process streaming response for requestId:",
+        requestId,
+      );
+
+      // Prioritize human-readable assistant text over tool/JSON outputs
+      const getNodePriority = (nodeKey) => {
+        if (!nodeKey) return 0;
+        const key = String(nodeKey).toLowerCase();
+        if (
+          key.includes("mdms_assistant") ||
+          key.includes("grievance_assistant") ||
+          key.includes("mandiprice_assistant")
+        ) return 0;
+        if (key.includes("assistant") && !key.includes("tools")) return 3;
+        if (key.includes("response_processor")) return 2;
+        if (key.includes("post_assistant")) return 2;
+        if (key.includes("ui_action_mapper")) return 1;
+        return 0;
+      };
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+
+        buffer = lines.pop() || "";
+
+        for (const line of lines) {
+          if (line.trim() === "") continue;
+
+          console.log("📝 Processing SSE line:", {
+            line: line.substring(0, 100) + (line.length > 100 ? "..." : ""),
+            requestId: requestId,
+          });
+
+          if (line.startsWith("data:")) {
+            try {
+              const data = JSON.parse(line.slice(5).trim());
+              if (data.run_id) {
+                console.log("🟢 Run ID:", data.run_id);
+                latestRunId = data.run_id;
+              }
+            } catch (err) {
+              console.error("Error parsing JSON:", err, line);
+            }
+          }
+
+          if (line.startsWith("event: ")) {
+            currentEvent = line.slice(7).trim();
+            console.log("🎯 Event type:", currentEvent);
+          } else if (line.startsWith("data: ")) {
+            const jsonStr = line.slice(6).trim();
+
+            if (jsonStr === "[DONE]") {
+              console.log("🏁 Stream completed");
+              break;
+            }
+
+            try {
+              const data = JSON.parse(jsonStr);
+              currentData = data;
+
+              if (data.run_id) {
+                console.log(
+                  "🟢 Capturing run_id from parsed data:",
+                  data.run_id,
+                );
+                latestRunId = data.run_id;
+              }
+
+              // Handle end event
+              if (currentEvent === "end") {
+                console.log(
+                  "🏁 Received event: end - finalizing message with run_id:",
+                  latestRunId,
+                );
+                if (data.run_id) {
+                  latestRunId = data.run_id;
+                  console.log(
+                    "🟢 Updated run_id from end event:",
+                    latestRunId,
+                  );
+                }
+
+                if (currentMessage && currentMessage.length > 0) {
+                  this._updateMessageInArray(assistantMessage.id, {
+                    content: currentMessage,
+                    additional_kwargs: currentAdditionalKwargs,
+                    isStreaming: false,
+                    isProcessing: false,
+                    hasAudioResponse: this.messages.find(m => m.id === assistantMessage.id)?.hasAudioResponse || false,
+                    latestRunId: latestRunId,
+                  });
+                  endEventFinalized = true;
+                  endFinalContent = currentMessage;
+                } else if (latestRunId) {
+                  this._updateMessageInArray(assistantMessage.id, {
+                    latestRunId: latestRunId,
+                    isStreaming: false,
+                    isProcessing: false,
+                  });
+                }
+              }
+
+              console.log("🔍 Parsed SSE data:", {
+                event: currentEvent,
+                hasData: !!data,
+                dataKeys: data ? Object.keys(data) : "no data",
+                topLevelKeys: Object.keys(data),
+                hasAudioContent: data?.audio_content ? "YES" : "NO",
+                hasResponseProcessor: data?.response_processor ? "YES" : "NO",
+                hasRunId: data?.run_id ? "YES" : "NO",
+                runId: data?.run_id || "N/A",
+                requestId: requestId,
+              });
+
+              // Handle Authentication from smart_router
+              if (
+                data.smart_router &&
+                data.smart_router.access_token &&
+                data.smart_router.farmer_profile &&
+                data.smart_router.farmer_profile_fetched === true
+              ) {
+                console.log(
+                  "🔐 Authentication data detected in smart_router:",
+                  {
+                    hasAccessToken: !!data.smart_router.access_token,
+                    mobileNumber: data.smart_router.mobile_number,
+                    userUuid: data.smart_router.userUuid,
+                    hasFarmerProfile: !!data.smart_router.farmer_profile,
+                    farmerId: data.smart_router.farmer_profile?.individualId,
+                    farmerName: data.smart_router.farmer_profile?.name,
+                    requestId: requestId,
+                  },
+                );
+
+                try {
+                  const smartRouter = data.smart_router;
+                  const farmerProfile = smartRouter.farmer_profile;
+                  const accessToken = smartRouter.access_token;
+
+                  localStorage.setItem("DfsWeb.access-token", accessToken);
+
+                  let userInfo = {};
+                  if (farmerProfile.user_details) {
+                    userInfo = { ...farmerProfile.user_details };
+                    userInfo.name = farmerProfile.name || userInfo.name || "";
+                    if (!userInfo.uuid) {
+                      userInfo.uuid = smartRouter.userUuid;
+                    }
+                    if (!userInfo.mobileNumber) {
+                      userInfo.mobileNumber = smartRouter.mobile_number ||
+                        farmerProfile.mobileNumber;
+                    }
+                  } else {
+                    userInfo = {
+                      id: null,
+                      uuid: smartRouter.userUuid,
+                      userName: smartRouter.mobile_number,
+                      name: farmerProfile.name || "",
+                      mobileNumber: smartRouter.mobile_number ||
+                        farmerProfile.mobileNumber,
+                      emailId: farmerProfile.email || null,
+                      locale: null,
+                      type: "CITIZEN",
+                      roles: [
+                        {
+                          name: "Citizen",
+                          code: "CITIZEN",
+                          tenantId: farmerProfile.tenantId || "br",
+                        },
+                      ],
+                      active: true,
+                      tenantId: farmerProfile.tenantId || "br",
+                      permanentCity: null,
+                    };
+                    this.setUserInfoFromDirectChatLogin(userInfo);
+                  }
+
+                  this.userInfo = userInfo;
+                  this.accessToken = accessToken;
+
+                  if (userInfo.uuid) {
+                    console.log("USER INFO FOR UPDATING THREAD", userInfo);
+                    if (this.threadId) {
+                      this.updateThread(this.threadId, userInfo.uuid)
+                        .then((updatedThread) => {
+                          console.log(
+                            "✅ Thread updated after authentication:",
+                            updatedThread,
+                          );
+                        })
+                        .catch((error) => {
+                          console.error(
+                            "❌ Error updating thread after authentication:",
+                            error.message,
+                          );
+                        });
+                    }
+
+                    this.getUserThreads({
+                      userId: userInfo.id,
+                      userUuid: userInfo.uuid,
+                    })
+                      .then((data) => {
+                        console.log(
+                          "✅ Thread data fetched after authentication:",
+                          data,
+                        );
+                        this.setUserThreads(data.threads);
+                        this.setUserThreadsMetaData({
+                          threads_processed: data.threads_processed,
+                          total_history_items: data.total_history_items,
+                          total_threads: data.total_threads,
+                        });
+                      })
+                      .catch((error) => {
+                        console.error(
+                          "❌ Error fetching threads after authentication:",
+                          error.message,
+                        );
+                      });
+                  }
+                } catch (authError) {
+                  console.error(
+                    "❌ Error processing authentication data:",
+                    authError,
+                  );
+                }
+              }
+
+              // Handle UI Actions
+              let uiActionSource = null;
+              let actions = null;
+
+              if (
+                data.response_processor &&
+                Array.isArray(data.response_processor.ui_actions)
+              ) {
+                actions = data.response_processor.ui_actions;
+              } else if (
+                data.response_processor && data.response_processor.messages &&
+                Array.isArray(data.response_processor.messages) &&
+                data.response_processor.messages.length > 0 &&
+                data.response_processor.messages[0].additional_kwargs &&
+                Array.isArray(
+                  data.response_processor.messages[0].additional_kwargs
+                    .ui_actions,
+                )
+              ) {
+                actions =
+                  data.response_processor.messages[0].additional_kwargs
+                    .ui_actions;
+              } else if (
+                data.ui_action_mapper &&
+                Array.isArray(data.ui_action_mapper.ui_actions)
+              ) {
+                uiActionSource = data.ui_action_mapper;
+                actions = uiActionSource.ui_actions;
+              } else if (
+                data.mdms_ui_action_mapper &&
+                Array.isArray(data.mdms_ui_action_mapper.ui_actions)
+              ) {
+                uiActionSource = data.mdms_ui_action_mapper;
+                actions = uiActionSource.ui_actions;
+              }
+
+              if (actions && actions.length > 0) {
+                console.log("UI ACTIONS", actions);
+                const action = actions[actions.length - 1];
+                if (action.web && action.web.link) {
+                  let scrollToId = null;
+                  let navigationParams = {};
+
+                  if (action.web.parameters) {
+                    if (action.web.parameters.scrollTo) {
+                      scrollToId = action.web.parameters.scrollTo;
+                    }
+                    navigationParams = { ...action.web.parameters };
+                  } else if (
+                    action.web.link &&
+                    action.web.link.includes("scrollTo=")
+                  ) {
+                    const urlParams = new URLSearchParams(
+                      action.web.link.split("?")[1],
+                    );
+                    scrollToId = urlParams.get("scrollTo");
+                  }
+
+                  let finalLink = action.web.link;
+                  let finalMessage = action.message || "";
+
+                  const hasSchemeId = action.web.parameters?.schemeId &&
+                    action.web.parameters.schemeId !== "";
+                  let hasHelpName = null;
+
+                  if (action.web.parameters?.button_title) {
+                    hasHelpName = true;
+                  } else if (action.web.parameters?.name) {
+                    hasHelpName = true;
+                  } else {
+                    hasHelpName = false;
+                  }
+
+                  if (!hasSchemeId && !hasHelpName) {
+                    finalLink = "/help";
+                    finalMessage =
+                      "Please find more information about available schemes and services";
+                  }
+                  latestUiAction = {
+                    content: "",
+                    url: finalLink && !finalLink.startsWith("http")
+                      ? window.location.origin + finalLink
+                      : finalLink,
+                    originalUrl: finalLink,
+                    uiActionType: action.ui_action,
+                    scrollToId: scrollToId,
+                    navigationParams: {
+                      ...navigationParams,
+                      ...(hasHelpName && {
+                        name: action.web.parameters?.button_title ||
+                          action.web.parameters?.name,
+                      }),
+                    },
+                  };
+                }
+              }
+
+              // Chart Image Extraction
+              if (
+                data.analytics_visualization_node &&
+                data.analytics_visualization_node.messages
+              ) {
+                const vizMessages =
+                  data.analytics_visualization_node.messages;
+                if (vizMessages.length > 0) {
+                  const vizMessage = vizMessages[vizMessages.length - 1];
+
+                  if (
+                    typeof vizMessage === "string" &&
+                    vizMessage.includes("additional_kwargs")
+                  ) {
+                    const kwargsStart =
+                      vizMessage.indexOf("additional_kwargs=") + 18;
+                    const kwargsEnd = vizMessage.indexOf(
+                      "} response_metadata",
+                    );
+
+                    if (kwargsStart < kwargsEnd) {
+                      const kwargsString = vizMessage.substring(
+                        kwargsStart,
+                        kwargsEnd + 1,
+                      );
+                      try {
+                        let cleanedKwargsString = kwargsString
+                          .replace(/'/g, '"')
+                          .replace(/None/g, "null")
+                          .replace(/True/g, "true")
+                          .replace(/False/g, "false");
+
+                        const additionalKwargs = JSON.parse(
+                          cleanedKwargsString,
+                        );
+
+                        if (additionalKwargs.chart_image_url) {
+                          console.log(
+                            "🎯 Found chart image URL:",
+                            additionalKwargs.chart_image_url,
+                          );
+                          currentAdditionalKwargs = additionalKwargs;
+                          try {
+                            const chartUrl = String(
+                              additionalKwargs.chart_image_url,
+                            ).trim();
+                            if (chartUrl.startsWith("http")) {
+                              chartUrlFromViz = chartUrl;
+                              console.log(
+                                "🔖 Stored chartUrlFromViz:",
+                                chartUrlFromViz,
+                              );
+                            }
+                          } catch (e) {
+                            console.warn(
+                              "Failed to store chart image URL:",
+                              e,
+                            );
+                          }
+                        } else if (additionalKwargs.antv_chart_data) {
+                          console.log(
+                            "🎯 Found chart data (fallback):",
+                            additionalKwargs.antv_chart_data,
+                          );
+                          currentAdditionalKwargs = additionalKwargs;
+                        }
+                      } catch (e) {
+                        console.warn(
+                          "Failed to parse chart image additional_kwargs:",
+                          e,
+                        );
+                      }
+                    }
+                  }
+                  if (typeof vizMessage === "string") {
+                    const contentMatch = vizMessage.match(
+                      /content=['"]([^'"]+)['"]/,
+                    );
+                    if (contentMatch && contentMatch[1]) {
+                      const extractedUrl = contentMatch[1].trim();
+                      if (extractedUrl.startsWith("http")) {
+                        chartUrlFromViz = extractedUrl;
+                        console.log(
+                          "🔖 Stored extracted chartUrlFromViz:",
+                          chartUrlFromViz,
+                        );
+                      }
+                    }
+                  }
+                }
+              }
+
+              // Generic Content Extraction
+              let lastContent = null;
+              let lastNodeKey = null;
+              let lastNodeMessages = null;
+              Object.keys(data).forEach((nodeKey) => {
+                if (
+                  nodeKey !== "audio_content" &&
+                  nodeKey !== "audio_processor" &&
+                  nodeKey !== "ui_action_mapper"
+                ) {
+                  const nodeData = data[nodeKey];
+                  if (
+                    nodeData &&
+                    Array.isArray(nodeData.messages) &&
+                    nodeData.messages.length > 0
+                  ) {
+                    lastNodeKey = nodeKey;
+                    lastNodeMessages = nodeData.messages;
+                  }
+                }
+              });
+              if (lastNodeMessages && lastNodeMessages.length > 0) {
+                let lastMessage =
+                  lastNodeMessages[lastNodeMessages.length - 1];
+                let content = "";
+                if (typeof lastMessage === "string") {
+                  if (
+                    lastMessage.startsWith("content='") &&
+                    lastMessage.includes("' additional_kwargs")
+                  ) {
+                    const start = lastMessage.indexOf("content='") + 9;
+                    const end = lastMessage.indexOf("' additional_kwargs");
+                    content = lastMessage
+                      .substring(start, end)
+                      .replace(/\\n/g, "\n")
+                      .replace(/\\t/g, "\t")
+                      .replace(/\\"/g, '"')
+                      .replace(/\\'/g, "'");
+                  } else if (
+                    lastMessage.startsWith('content="') &&
+                    lastMessage.includes('" additional_kwargs')
+                  ) {
+                    const start = lastMessage.indexOf('content="') + 9;
+                    const end = lastMessage.indexOf('" additional_kwargs');
+                    content = lastMessage
+                      .substring(start, end)
+                      .replace(/\\n/g, "\n")
+                      .replace(/\\t/g, "\t")
+                      .replace(/\\"/g, '"')
+                      .replace(/\\'/g, "'");
+                  } else {
+                    const singleQuoteMatch = lastMessage.match(
+                      /content='([^']+)'/,
+                    );
+                    const doubleQuoteMatch = lastMessage.match(
+                      /content="([^"]+)"/,
+                    );
+                    if (singleQuoteMatch) {
+                      content = singleQuoteMatch[1];
+                    } else if (doubleQuoteMatch) {
+                      content = doubleQuoteMatch[1];
+                    } else {
+                      content = lastMessage;
+                    }
+                  }
+                } else if (lastMessage && typeof lastMessage === "object") {
+                  if (typeof lastMessage.content === "string") {
+                    content = lastMessage.content;
+                  } else if (
+                    Array.isArray(lastMessage.content) &&
+                    lastMessage.content.length > 0
+                  ) {
+                    const textParts = lastMessage.content
+                      .map((part) =>
+                        typeof part === "string"
+                          ? part
+                          : typeof part?.text === "string"
+                            ? part.text
+                            : typeof part?.value === "string"
+                              ? part.value
+                              : ""
+                      )
+                      .filter(Boolean);
+                    content = textParts.join(" ").trim();
+                  } else {
+                    content = "";
+                  }
+                }
+                if (
+                  typeof content === "string" &&
+                  content.trim().length > 0
+                ) {
+                  const looksLikeJson = content.trim().startsWith("{") ||
+                    content.trim().startsWith("[");
+                  const priority = getNodePriority(lastNodeKey);
+                  if (looksLikeJson && priority < 2) {
+                    console.log(
+                      `⏭️ Skipping JSON-like content from ${lastNodeKey}`,
+                    );
+                  } else {
+                    const MAX_LEN = 8000;
+                    const safeContent = content.length > MAX_LEN
+                      ? content.slice(0, MAX_LEN) + "\n\n… (truncated)"
+                      : content;
+                    currentMessage = safeContent;
+                    if (
+                      priority > bestMessagePriority ||
+                      (priority === bestMessagePriority &&
+                        safeContent.length > bestMessageText.length)
+                    ) {
+                      bestMessageText = safeContent;
+                      bestMessagePriority = priority;
+                    }
+                    hasReceivedMeaningfulResponse = true;
+                    console.log(
+                      `🟢 Found content from ${lastNodeKey}:`,
+                      safeContent.substring(0, 100) + "...",
+                    );
+                  }
+                }
+              }
+
+              // Process based on event type
+              if (data) {
+                // Set default event type for data messages without explicit event
+                const eventType = currentEvent || "values";
+
+                console.log("🎵 Processing data message:", {
+                  eventType: eventType,
+                  currentEvent: currentEvent,
+                  dataKeys: Object.keys(data),
+                  requestId: requestId,
+                });
+
+                // Handle audio content in response
+                if (
+                  data.audio_content &&
+                  typeof data.audio_content === "string"
+                ) {
+                  console.log("🎵 AUDIO CONTENT FOUND in text stream:", {
+                    audioContentLength: data.audio_content.length,
+                    audioContentPreview: data.audio_content.substring(0, 20) +
+                      "...",
+                  });
+
+                  const audioResponseId = `text_response_${requestId}_${data.audio_content.substring(
+                    0,
+                    30,
+                  )
+                    }`;
+                  const alreadyPlayed = this.playedAudioIds.has(
+                    audioResponseId,
+                  );
+
+                  console.log("🔊 Text stream audio content received:", {
+                    audioResponseId: audioResponseId,
+                    requestId: requestId,
+                    alreadyPlayed: alreadyPlayed,
+                    audioContentLength: data.audio_content.length,
+                  });
+
+                  if (!alreadyPlayed) {
+                    this.playedAudioIds.add(audioResponseId);
+                    // Mark the current assistant message as having audio response
+                    console.log("🔍 Setting audio content for message:", {
+                      targetMessageId: assistantMessage.id,
+                      audioContentLength: data.audio_content.length,
+                      audioContentPreview:
+                        data.audio_content.substring(0, 20) + "...",
+                    });
+                    this._updateMessageInArray(assistantMessage.id, {
+                      hasAudioResponse: true,
+                      audioContent: data.audio_content,
+                      latestRunId: latestRunId,
+                    });
+                    console.log("✅ Stored audio response (text stream)");
+
+                    // Clean up old audio IDs to prevent memory issues
+                    if (this.playedAudioIds.size > 10) {
+                      const audioIds = Array.from(this.playedAudioIds);
+                      this.playedAudioIds.clear();
+                      audioIds
+                        .slice(-5)
+                        .forEach((id) => this.playedAudioIds.add(id));
+                    }
+                  } else {
+                    console.log("⏭️ Skipping audio: already played");
+                  }
+                } else {
+                  console.log(
+                    "❌ No audio_content found in text stream data",
+                  );
+                }
+
+                // Handle audio content in response_processor
+                if (
+                  data.response_processor &&
+                  data.response_processor.audio_content &&
+                  typeof data.response_processor.audio_content === "string"
+                ) {
+                  console.log(
+                    "🔍 Found audio_content in response_processor:",
+                    {
+                      audioContentLength:
+                        data.response_processor.audio_content.length,
+                      audioContentPreview:
+                        data.response_processor.audio_content.substring(
+                          0,
+                          50,
+                        ) + "...",
+                    },
+                  );
+
+                  const audioResponseId = `text_response_${requestId}_${data.response_processor.audio_content.substring(
+                    0,
+                    30,
+                  )
+                    }`;
+                  const alreadyPlayed = this.playedAudioIds.has(
+                    audioResponseId,
+                  );
+
+                  console.log(
+                    "🔊 Response processor audio content received:",
+                    {
+                      audioResponseId: audioResponseId,
+                      requestId: requestId,
+                      alreadyPlayed: alreadyPlayed,
+                      audioContentLength:
+                        data.response_processor.audio_content.length,
+                    },
+                  );
+
+                  if (!alreadyPlayed) {
+                    this.playedAudioIds.add(audioResponseId);
+
+                    // Mark the current assistant message as having audio response
+                    console.log(
+                      "🔍 Setting response processor audio content for message:",
+                      {
+                        targetMessageId: assistantMessage.id,
+                        audioContentLength:
+                          data.response_processor.audio_content.length,
+                        audioContentPreview:
+                          data.response_processor.audio_content.substring(
+                            0,
+                            20,
+                          ) + "...",
+                      },
+                    );
+                    this._updateMessageInArray(assistantMessage.id, {
+                      latestRunId: latestRunId,
+                      hasAudioResponse: true,
+                      audioContent:
+                        data.response_processor.audio_content,
+                    });
+                    console.log(
+                      "✅ Found matching message, setting response processor audio content",
+                    );
+
+                    // Clean up old audio IDs to prevent memory issues
+                    if (this.playedAudioIds.size > 10) {
+                      const audioIds = Array.from(this.playedAudioIds);
+                      this.playedAudioIds.clear();
+                      audioIds
+                        .slice(-5)
+                        .forEach((id) => this.playedAudioIds.add(id));
+                    }
+                  } else {
+                    console.log(
+                      "⏭️ Skipping response processor audio: already played",
+                    );
+                  }
+                }
+              }
+            } catch (parseError) {
+              console.log("⚠️ Failed to parse streaming data:", parseError);
+            }
+          }
+        }
+      }
+
+      // Ensure streaming is marked as complete for this specific assistant message
+      console.log("🏁 Finalizing assistant message:", assistantMessage.id);
+
+      // Add a small delay to ensure audio content is properly set
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Get the current state to ensure we have the latest audio content
+      const currentAssistantMessage = this.messages.find(
+        (msg) => msg.id === assistantMessage.id,
+      );
+      console.log("🔍 Current assistant message before finalization:", {
+        messageId: assistantMessage.id,
+        hasAudioContent: !!currentAssistantMessage?.audioContent,
+        hasAudioResponse: currentAssistantMessage?.hasAudioResponse,
+        audioContentLength: currentAssistantMessage?.audioContent?.length || 0,
+      });
+
+      // If message was already finalized at 'end' with content, do not override
+      if (
+        endEventFinalized &&
+        endFinalContent &&
+        endFinalContent.length > 10
+      ) {
+        console.log(
+          "✅ Message already finalized on end event; skipping overwrite",
+        );
+      } else {
+        // Check if we have a meaningful response to display
+        const finalText = bestMessageText && bestMessageText.length > 5
+          ? bestMessageText
+          : currentMessage;
+        // If a chart URL was captured from the viz node, prefer it and show only the image
+        const contentToSet =
+          chartUrlFromViz && String(chartUrlFromViz).startsWith("http")
+            ? chartUrlFromViz
+            : finalText;
+
+        if (contentToSet && contentToSet.length > 10) {
+          console.log("🔍 Finalizing message with content:", {
+            messageId: assistantMessage.id,
+            currentMessageLength: String(contentToSet).length,
+            currentMessagePreview: String(contentToSet).substring(0, 50) +
+              "...",
+          });
+          const currentMsg = this.messages.find(m => m.id === assistantMessage.id);
+          console.log("🔍 Finalizing message:", {
+            latestRunId,
+            messageId: assistantMessage.id,
+            existingAudioContent: !!currentMsg?.audioContent,
+            existingAudioResponse: currentMsg?.hasAudioResponse,
+            audioContentLength: currentMsg?.audioContent?.length || 0,
+          });
+          this._updateMessageInArray(assistantMessage.id, {
+            latestRunId: latestRunId,
+            content: contentToSet,
+            additional_kwargs: currentAdditionalKwargs,
+            isStreaming: false,
+            isProcessing: false,
+            hasAudioResponse: currentMsg?.hasAudioResponse || false, // Preserve existing audio response state
+            audioContent: currentMsg?.audioContent || null, // Preserve existing audio content
+          });
+        } else {
+          // If no meaningful response was found, show a clear, user-friendly fallback
+          console.log("🔍 Finalizing message with friendly fallback");
+          const currentMsg = this.messages.find(m => m.id === assistantMessage.id);
+          this._updateMessageInArray(assistantMessage.id, {
+            content: "Processing your request...",
+            latestRunId: latestRunId,
+            additional_kwargs: currentAdditionalKwargs,
+            isStreaming: false,
+            isProcessing: false,
+            hasAudioResponse: currentMsg?.hasAudioResponse || false,
+            audioContent: currentMsg?.audioContent || null,
+          });
+        }
+      }
+
+      // Handle UI actions if present
+      if (latestUiAction) {
+        console.log("🔗 Adding UI action message:", latestUiAction);
+        const uiActionMessage = {
+          id: Date.now() + 2,
+          content: "",
+          sender: "assistant",
+          timestamp: new Date().toISOString(),
+          isUiAction: true,
+          url: latestUiAction.url,
+          uiActionType: latestUiAction.uiActionType,
+          scrollToId: latestUiAction.scrollToId,
+          navigationParams: latestUiAction.navigationParams,
+          originalUrl: latestUiAction.originalUrl,
+          isScrollAction: latestUiAction.uiActionType === "scroll",
+          isNavigateStateAction:
+            latestUiAction.uiActionType === "navigate-state",
+        };
+
+        const lastMessage = this.messages[this.messages.length - 1];
+        if (lastMessage) {
+          const updatedLastMessage = {
+            ...lastMessage,
+            uiActionMessage,
+            latestRunId,
+          };
+          console.log("UPDATED LAST MESSAGE", updatedLastMessage);
+          this._updateMessageInArray(lastMessage.id, {
+            uiActionMessage,
+            latestRunId,
+          });
+        }
+      }
+    } catch (error) {
+      console.error("❌ Streaming error:", error);
+      const currentMsg = this.messages.find(m => m.id === assistantMessage.id);
+      this._updateMessageInArray(assistantMessage.id, {
+        isStreaming: false,
+        isProcessing: false,
+        isError: true,
+        content: "Error occurred while processing request",
+        latestRunId: latestRunId || currentMsg?.latestRunId, // Preserve or set latestRunId
+      });
+    }
+  }
+
+  // Fetch assistant ID from API
+  async fetchAssistantId() {
+    try {
+      console.log("🔍 Fetching assistant ID from API...");
+
+      // Use provided authToken or fallback to accessToken
+      const authToken = this.authToken || this.accessToken;
+      const supabaseToken = this.supabaseToken || authToken;
+
+      const response = await fetch(`${this.langgraphUrl}/assistants/search`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${authToken}`,
+          "x-supabase-access-token": supabaseToken,
+          Origin: window.location.origin || "*",
+        },
+        body: JSON.stringify({
+          limit: 100,
+          offset: 0,
+        }),
+      });
+
+      if (!response.ok) {
+        console.log(
+          `❌ API call failed with status: ${response.status} - backend may have rejected due to auth`,
+        );
+        return null; // Return null instead of throwing to let backend handle auth
+      }
+
+      const assistants = await response.json();
+      console.log("📋 Available assistants:", assistants);
+
+      // Log assistant details for debugging
+      assistants.forEach((assistant, index) => {
+        console.log(`Assistant ${index}:`, {
+          id: assistant.assistant_id,
+          name: assistant.name,
+          hasName: !!assistant.name,
+          type: typeof assistant.name,
+        });
+      });
+
+      // Find the assistant with name "Default Assistant"
+      const defaultAssistant = assistants.filter(
+        (assistant) => assistant.name && assistant.name.includes("Default"),
+      )[0];
+
+      if (defaultAssistant) {
+        console.log(
+          "✅ Found Default Assistant:",
+          defaultAssistant.assistant_id,
+        );
+        this.assistantId = defaultAssistant.assistant_id;
+        return defaultAssistant.assistant_id;
+      } else {
+        console.log("⚠️ Default Assistant not found in the list");
+
+        // Find first assistant with a valid name
+        const firstValidAssistant = assistants.find(
+          (assistant) => assistant.name && assistant.name.trim() !== "",
+        );
+
+        if (firstValidAssistant) {
+          console.log(
+            "⚠️ Using first valid assistant as fallback:",
+            firstValidAssistant.assistant_id,
+            "Name:",
+            firstValidAssistant.name,
+          );
+          this.assistantId = firstValidAssistant.assistant_id;
+          return firstValidAssistant.assistant_id;
+        } else {
+          console.log("❌ No assistants with valid names available");
+          return null;
+        }
+      }
+    } catch (error) {
+      console.error("❌ Error fetching assistant ID:", error);
+      console.log("🔍 Error details:", {
+        name: error.name,
+        message: error.message,
+        isNetworkError: error.name === "TypeError",
+      });
+      return null; // Return null instead of throwing to let backend handle auth
+    }
+  }
+
+  // Load conversation history for a thread
+  async loadHistory(threadId) {
+    try {
+      const response = await fetch(
+        `${this.langgraphUrl}/threads/${threadId}/history`,
+        {
+          method: "POST",
+          headers: this.getHeaders(),
+          body: JSON.stringify({ limit: 10 }),
+        },
+      );
+
+      if (response.ok) {
+        const history = await response.json();
+        console.log("📜 Loaded history:", history);
+
+        // Get only the LATEST state (first item) which contains the complete conversation
+        const latestState = history[0];
+
+        if (!latestState?.values?.messages) {
+          console.log("No messages found in history");
+          return;
+        }
+
+        // Convert messages from the latest state only
+        const historyMessages = [];
+        latestState.values.messages.forEach((msg, msgIndex) => {
+          if (msg.type === "human") {
+            // Handle both text and audio content
+            let content = "";
+            let isAudio = false;
+
+            if (Array.isArray(msg.content)) {
+              const textContent = msg.content.find(
+                (c) => c.type === "text",
+              );
+              const audioContent = msg.content.find(
+                (c) => c.type === "audio",
+              );
+
+              if (audioContent) {
+                content = "🎤 Audio message";
+                isAudio = true;
+              } else if (textContent) {
+                content = textContent.text;
+              }
+            } else {
+              content = msg.content;
+            }
+
+            historyMessages.push({
+              id: `history-${msgIndex}-human`,
+              content: content,
+              sender: "user",
+              timestamp: new Date().toISOString(),
+              isAudio: isAudio,
+            });
+          } else if (msg.type === "ai") {
+            historyMessages.push({
+              id: `history-${msgIndex}-ai`,
+              content: msg.content,
+              sender: "assistant",
+              timestamp: new Date().toISOString(),
+            });
+          }
+        });
+
+        if (historyMessages && historyMessages.length > 0) {
+          console.log(`📝 Loading ${historyMessages.length} messages from history`);
+          // Add history messages to the messages array
+          historyMessages.forEach(msg => {
+            this._addMessageToArray(msg);
+          });
+        }
+      }
+    } catch (error) {
+      console.error("❌ Failed to load history:", error);
+    }
+  }
+
+  // Initialize chat - fetch assistant ID and create thread
+  async initializeChat() {
+    try {
+      console.log("🔄 Initializing chat...");
+
+      // Always attempt API calls, let backend handle authentication
+      const currentToken = localStorage.getItem("DfsWeb.access-token");
+      console.log(
+        "🔑 Access token status:",
+        currentToken ? "Present" : "Empty - backend will handle",
+      );
+
+      // Always attempt to fetch assistant ID
+      console.log("📞 Making API call to /assistants/search...");
+      const fetchedAssistantId = await this.fetchAssistantId();
+
+      if (!fetchedAssistantId) {
+        console.log(
+          "❌ Failed to fetch assistant ID - backend may have rejected due to auth",
+        );
+        this.isConnected = false;
+        this.initialized = true;
+        return;
+      }
+
+      console.log(
+        "✅ Assistant ID fetched successfully:",
+        fetchedAssistantId,
+      );
+
+      const storedUser = localStorage.getItem("DfsWeb.user-info");
+      const user = storedUser ? JSON.parse(storedUser) : null;
+
+      // Always attempt to create thread
+      console.log("📞 Making API call to /threads...");
+      const response = await fetch(`${this.langgraphUrl}/threads`, {
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          metadata: {
+            user_id: user?.id || null,
+            user_uuid: user?.uuid || null,
+          },
+        }),
+      });
+
+      if (response.ok) {
+        const thread = await response.json();
+        this.threadId = thread.thread_id;
+        this.isConnected = true;
+        console.log("✅ Thread created:", thread.thread_id, "\n", thread);
+
+        // Load conversation history
+        await this.loadHistory(thread.thread_id);
+      } else {
+        console.log("Thread created NOT");
+        const errorText = await response.text();
+        console.error(
+          "❌ Failed to create thread:",
+          response.status,
+          errorText,
+        );
+        this.isConnected = false;
+      }
 
-  _escapeHtml(text) {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
+      this.initialized = true;
+    } catch (error) {
+      console.error("❌ Thread creation error:", error);
+      this.isConnected = false;
+      this.initialized = true;
+    }
   }
 }
 
-// Export as UMD and ESM compatible
-if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
-  module.exports = ChatWidget;
-} else {
-  window.ChatWidget = ChatWidget;
-}
+// Export as ESM (Rollup will handle UMD conversion)
+export default ChatWidget;