mini-chat-bot-widget 0.6.0 → 0.9.0

package/dist/chat-widget.esm.js

@@ -1,16 +1,31 @@
-function _classCallCheck(a, n) {
-  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
 }
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
+  return t;
 }
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
-    writable: false
-  }), e;
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
 }
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -20,132 +35,3049 @@ function _toPrimitive(t, r) {
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (String )(t);
+  return ("string" === r ? String : Number)(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+// text-chat-screen.js - Text chat screen component
+
+class TextChatScreen {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.placeholder = options.placeholder || "Type your message...";
+    this.primaryColor = options.primaryColor || "#1a5c4b";
+    this.title = options.title || "Chat Assistant";
+    this.onMessage = options.onMessage || (() => {});
+    this.onBack = options.onBack || (() => {});
+    this.onOpenDrawer = options.onOpenDrawer || (() => {});
+    this.onClose = options.onClose || (() => {});
+    this.container = null;
+    this.messages = options.messages;
+    this.sendMessage = options.sendMessage || null;
+    this.contentBlocks = options.contentBlocks || [];
+    this.onContentBlocksChange = options.onContentBlocksChange || (() => {});
+    this.navigateToAudioScreen = options.navigateToAudioScreen;
+    // Supported file types
+    this.SUPPORTED_FILE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+  }
+  render(container) {
+    this.container = container;
+    this._applyStyles();
+    container.innerHTML = "\n      <div class=\"text-chat-screen\">\n        <div class=\"chat-header\">\n          <div class=\"chat-header-content\">\n            <button class=\"chat-back\" id=\"text-chat-menu\">\n              <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-menu-icon lucide-menu\"><path d=\"M4 5h16\"/><path d=\"M4 12h16\"/><path d=\"M4 19h16\"/></svg>\n            </button>\n            \n            <div class=\"chat-header-text\">\n              <div class=\"chat-title\">".concat(this.title, "</div>\n            </div>\n          </div>\n          <button class=\"chat-close\" id=\"navigate-to-audio-screen\">\n            <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>\n          </button>\n           &#8203; &#8203; &#8203;\n          <button class=\"chat-close\" id=\"text-chat-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n        <div class=\"chat-messages\" id=\"chat-messages\">\n          <div class=\"chat-welcome\">\n            <div class=\"welcome-text\">\uD83D\uDC4B Hello! I'm your AI assistant. How can I help you today?</div>\n          </div>\n        </div>\n        <div class=\"file-attachments-container\" id=\"file-attachments-container\" style=\"display: none;\"></div>\n        <div class=\"chat-input-wrapper\">\n          <div class=\"file-upload-controls\">\n            <input\n              type=\"file\"\n              id=\"file-upload-input\"\n              accept=\"image/jpeg,image/png,image/gif,image/webp\"\n              style=\"display: none;\"\n            />\n            <button id=\"file-upload-button\" class=\"file-upload-button\" title=\"Attach files\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48\"></path>\n              </svg>\n            </button>\n          </div>\n          <input type=\"text\" id=\"chat-input\" placeholder=\"").concat(this.placeholder, "\" autocomplete=\"off\" />\n          <button id=\"chat-send\" disabled>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n            </svg>\n          </button>\n        </div>\n      </div>\n    ");
+
+    // Bind header events
+    const menuBtn = container.querySelector("#text-chat-menu");
+    const closeBtn = container.querySelector("#text-chat-close");
+    const navigateToAudioBtn = container.querySelector("#navigate-to-audio-screen");
+    if (menuBtn) {
+      menuBtn.addEventListener("click", () => {
+        if (this.onOpenDrawer) {
+          this.onOpenDrawer();
+        } else if (this.onBack) {
+          this.onBack();
+        }
+      });
+    }
+    if (closeBtn) {
+      closeBtn.addEventListener("click", () => {
+        if (this.onClose) this.onClose();
+      });
+    }
+    if (navigateToAudioBtn) {
+      navigateToAudioBtn.addEventListener("click", () => {
+        if (this.navigateToAudioScreen) this.navigateToAudioScreen();
+      });
+    }
+
+    // Bind text chat events
+    const input = container.querySelector("#chat-input");
+    const sendBtn = container.querySelector("#chat-send");
+    const fileInput = container.querySelector("#file-upload-input");
+    const fileUploadBtn = container.querySelector("#file-upload-button");
+
+    // File upload handler
+    fileUploadBtn.addEventListener("click", () => {
+      fileInput.click();
+    });
+    fileInput.addEventListener("change", e => {
+      this.handleFileUpload(e);
+    });
+
+    // Update send button state based on input and contentBlocks
+    const updateSendButton = () => {
+      const hasText = input.value.trim().length > 0;
+      const hasFiles = this.contentBlocks.length > 0;
+      sendBtn.disabled = !(hasText || hasFiles);
+    };
+    input.addEventListener("input", () => {
+      updateSendButton();
+    });
+    const send = async () => {
+      const text = input.value.trim();
+      if (!text && this.contentBlocks.length === 0) return;
+
+      // Add user message to UI immediately
+      this.addMessage(text || "📎 File attachments", true);
+      input.value = "";
+      sendBtn.disabled = true;
+      this.hideTypingIndicator();
+
+      // Use the sendMessage function from widget if available
+      if (this.sendMessage) {
+        try {
+          await this.sendMessage(text, this.contentBlocks);
+          // Content blocks are cleared in widget's sendMessage, but ensure UI is updated
+          this.contentBlocks = [];
+          this.onContentBlocksChange(this.contentBlocks);
+          this.renderFilePreview(); // Update preview
+          this.updateSendButton();
+        } catch (error) {
+          console.error("Error sending message:", error);
+          this.addMessage("Sorry, I encountered an error. Please try again.", false);
+        } finally {
+          this.hideTypingIndicator();
+        }
+      } else {
+        // Fallback to old behavior
+        setTimeout(() => {
+          this.hideTypingIndicator();
+          this.handleUserMessage(text);
+        }, 1000 + Math.random() * 1000);
+      }
+    };
+    sendBtn.addEventListener("click", send);
+    input.addEventListener("keypress", e => {
+      if (e.key === "Enter" && !sendBtn.disabled) send();
+    });
+
+    // Focus input when screen loads
+    setTimeout(() => input.focus(), 100);
+
+    // Render file preview if contentBlocks exist
+    this.renderFilePreview();
+
+    // Sync existing messages on render
+    if (this.messages && this.messages.length > 0) {
+      setTimeout(() => {
+        this._syncMessages(this.messages);
+      }, 50);
+    }
+  }
+
+  // Convert file to content block
+  fileToContentBlock(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64Data = reader.result.split(",")[1]; // Remove data:mime;base64, prefix
+
+        if (this.SUPPORTED_FILE_TYPES.includes(file.type)) {
+          resolve({
+            type: "image",
+            source_type: "base64",
+            mime_type: file.type,
+            data: base64Data,
+            metadata: {
+              name: file.name,
+              size: file.size
+            }
+          });
+        } else {
+          reject(new Error("Unsupported file type: ".concat(file.type)));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error("Failed to read file: ".concat(file.name)));
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  // Check if file is duplicate
+  isDuplicateFile(file, existingBlocks) {
+    if (this.SUPPORTED_FILE_TYPES.includes(file.type)) {
+      return existingBlocks.some(block => {
+        var _block$metadata;
+        return block.type === "image" && ((_block$metadata = block.metadata) === null || _block$metadata === void 0 ? void 0 : _block$metadata.name) === file.name && block.mime_type === file.type;
+      });
+    }
+    return false;
+  }
+
+  // Format file size
+  formatFileSize(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+
+  // Get file type display name
+  getFileTypeDisplay(mimeType) {
+    switch (mimeType) {
+      case "image/jpeg":
+      case "image/jpg":
+        return "JPEG Image";
+      case "image/png":
+        return "PNG Image";
+      case "image/gif":
+        return "GIF Image";
+      case "image/webp":
+        return "WebP Image";
+      default:
+        return "Unknown File";
+    }
+  }
+
+  // Handle file upload
+  async handleFileUpload(e) {
+    const files = e.target.files;
+    if (!files) return;
+    const fileArray = Array.from(files);
+    const validFiles = fileArray.filter(file => this.SUPPORTED_FILE_TYPES.includes(file.type));
+    const invalidFiles = fileArray.filter(file => !this.SUPPORTED_FILE_TYPES.includes(file.type));
+    if (invalidFiles.length > 0) {
+      console.warn("Invalid file type. Please upload a JPEG, PNG, GIF, or WEBP image.");
+      // Could show a toast/alert here
+    }
+
+    // Since we only allow 1 file, we take the first valid one and replace existing
+    const fileToProcess = validFiles[0];
+    if (fileToProcess) {
+      try {
+        const newBlocks = await this.fileToContentBlock(fileToProcess);
+        // Replace existing blocks with new one
+        this.contentBlocks = [newBlocks];
+        this.onContentBlocksChange(this.contentBlocks);
+        this.renderFilePreview();
+        this.updateSendButton();
+      } catch (error) {
+        console.error("Failed to process files: ".concat(error.message));
+      }
+    }
+
+    // Clear the input
+    e.target.value = "";
+  }
+
+  // Remove content block
+  removeBlock(index) {
+    this.contentBlocks = this.contentBlocks.filter((_, i) => i !== index);
+    this.onContentBlocksChange(this.contentBlocks);
+    this.renderFilePreview();
+    this.updateSendButton();
+  }
+
+  // Update send button state
+  updateSendButton() {
+    if (!this.container) return;
+    const input = this.container.querySelector("#chat-input");
+    const sendBtn = this.container.querySelector("#chat-send");
+    if (!input || !sendBtn) return;
+    const hasText = input.value.trim().length > 0;
+    const hasFiles = this.contentBlocks.length > 0;
+    sendBtn.disabled = !(hasText || hasFiles);
+  }
+
+  // Render file preview
+  renderFilePreview() {
+    if (!this.container) return;
+    const container = this.container.querySelector("#file-attachments-container");
+    if (!container) return;
+    if (!this.contentBlocks || this.contentBlocks.length === 0) {
+      container.innerHTML = "";
+      container.style.display = "none";
+      return;
+    }
+    container.style.display = "flex";
+    container.innerHTML = this.contentBlocks.map((block, index) => {
+      var _block$metadata2, _block$metadata3, _block$metadata4;
+      const displayName = ((_block$metadata2 = block.metadata) === null || _block$metadata2 === void 0 ? void 0 : _block$metadata2.filename) || ((_block$metadata3 = block.metadata) === null || _block$metadata3 === void 0 ? void 0 : _block$metadata3.name) || "file";
+      const size = this.formatFileSize(((_block$metadata4 = block.metadata) === null || _block$metadata4 === void 0 ? void 0 : _block$metadata4.size) || 0);
+      const isImage = block.type === "image";
+      const src = isImage ? "data:".concat(block.mime_type, ";base64,").concat(block.data) : null;
+      return "\n          <div class=\"file-attachment ".concat(isImage ? "has-thumbnail" : "", "\" data-index=\"").concat(index, "\">\n            ").concat(isImage ? "\n              <div class=\"file-thumbnail\">\n                <img src=\"".concat(src, "\" alt=\"").concat(displayName, "\" class=\"file-thumbnail-image\" />\n              </div>\n            ") : '<div class="file-attachment-icon">📄</div>', "\n            <div class=\"file-attachment-info\">\n              <div class=\"file-attachment-name\" title=\"").concat(displayName, "\">\n                ").concat(displayName, "\n              </div>\n              <div class=\"file-attachment-size\">").concat(size, "</div>\n            </div>\n            <button\n              class=\"file-attachment-remove\"\n              data-index=\"").concat(index, "\"\n              title=\"Remove file\"\n            >\n              \u2715\n            </button>\n          </div>\n        ");
+    }).join("");
+
+    // Bind remove buttons
+    container.querySelectorAll(".file-attachment-remove").forEach(btn => {
+      btn.addEventListener("click", e => {
+        e.stopPropagation();
+        const index = parseInt(btn.getAttribute("data-index"));
+        this.removeBlock(index);
+      });
+    });
+
+    // Bind image click for expansion (optional - can add modal later)
+    container.querySelectorAll(".file-thumbnail-image").forEach(img => {
+      img.addEventListener("click", e => {
+        e.stopPropagation();
+        // Could add image expansion modal here
+      });
+    });
+  }
+  _formatTime(date) {
+    let hours = date.getHours();
+    const minutes = date.getMinutes();
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    const strTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ' ' + ampm;
+    return strTime;
+  }
+  addMessage(text, isUser) {
+    let messageData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    console.log("Is user", isUser);
+    if (!this.container) return;
+    const messagesContainer = this.container.querySelector("#chat-messages");
+    if (!messagesContainer) return;
+    const welcome = messagesContainer.querySelector(".chat-welcome");
+    if (welcome) welcome.remove();
+
+    // Check if message already exists (for syncing)
+    const messageId = (messageData === null || messageData === void 0 ? void 0 : messageData.id) || Date.now();
+    console.log("Message ID", messageId);
+    const existingMessage = messagesContainer.querySelector("[data-message-id=\"".concat(messageId, "\"]"));
+    if (existingMessage && messageData) {
+      // Update existing message
+      const bubble = existingMessage.querySelector(".message-bubble");
+      if (bubble) {
+        // Parse markdown for assistant messages, escape for user messages
+        const content = messageData.content || text;
+        bubble.innerHTML = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+      }
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      return;
+    }
+    const messageEl = document.createElement("div");
+    messageEl.className = "chat-message ".concat(isUser ? "user" : "bot");
+    messageEl.setAttribute("data-message-id", messageId);
+
+    // Handle different message types
+    let content = text;
+    if (messageData) {
+      if (messageData.isStreaming) {
+        content = messageData.content || "Thinking...";
+      } else if (messageData.isError) {
+        content = messageData.content || "Error occurred";
+        messageEl.classList.add("error");
+      } else {
+        content = messageData.content || text;
+      }
+    }
+
+    // Build attachments HTML if present
+    let attachmentsHTML = "";
+    if (messageData && messageData.attachments && messageData.attachments.length > 0) {
+      attachmentsHTML = "\n        <div class=\"message-attachments\">\n          ".concat(messageData.attachments.map((attachment, index) => {
+        var _attachment$metadata, _attachment$metadata2, _attachment$metadata3;
+        const displayName = ((_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.name) || ((_attachment$metadata2 = attachment.metadata) === null || _attachment$metadata2 === void 0 ? void 0 : _attachment$metadata2.filename) || "Unknown file";
+        const isImage = attachment.type === "image";
+        const imageSrc = isImage && attachment.data ? "data:".concat(attachment.mime_type, ";base64,").concat(attachment.data) : null;
+        return "\n              <div class=\"message-attachment ".concat(isImage ? "image" : "pdf", "\" data-attachment-index=\"").concat(index, "\">\n                <span class=\"message-attachment-icon\">\n                  ").concat(isImage ? "🖼️" : "📄", "\n                </span>\n                <div class=\"message-attachment-info\">\n                  <div \n                    class=\"message-attachment-name ").concat(isImage ? "clickable" : "", "\"\n                    ").concat(isImage && imageSrc ? "data-image-src=\"".concat(imageSrc, "\" data-image-alt=\"").concat(displayName, "\"") : "", "\n                    style=\"cursor: ").concat(isImage ? "pointer" : "default", ";\"\n                  >\n                    ").concat(this._escapeHtml(displayName), "\n                  </div>\n                  <div class=\"message-attachment-size\">\n                    ").concat(this.formatFileSize(((_attachment$metadata3 = attachment.metadata) === null || _attachment$metadata3 === void 0 ? void 0 : _attachment$metadata3.size) || 0), " \u2022 ").concat(this.getFileTypeDisplay(attachment.mime_type), "\n                  </div>\n                </div>\n              </div>\n            ");
+      }).join(""), "\n        </div>\n      ");
+    }
+    const timestamp = messageData !== null && messageData !== void 0 && messageData.timestamp ? new Date(messageData.timestamp) : new Date();
+    const formattedTime = this._formatTime(timestamp);
+
+    // Parse markdown for assistant messages, escape for user messages
+    const renderedContent = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+    messageEl.innerHTML = "\n      <div class=\"message-content\">\n        ".concat(attachmentsHTML, "\n        <div class=\"message-bubble\">\n          ").concat(renderedContent, "\n          </div>\n        <div class=\"message-time\">").concat(formattedTime, "</div>\n      </div>\n    ");
+
+    // Bind image click handlers for expansion
+    if (messageData && messageData.attachments) {
+      messageEl.querySelectorAll(".message-attachment-name.clickable").forEach(el => {
+        el.addEventListener("click", e => {
+          e.stopPropagation();
+          const imageSrc = el.getAttribute("data-image-src");
+          const imageAlt = el.getAttribute("data-image-alt");
+          if (imageSrc) {
+            this.showExpandedImage(imageSrc, imageAlt);
+          }
+        });
+      });
+    }
+    messagesContainer.appendChild(messageEl);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+
+  // Sync messages from shared array
+  _syncMessages(messages) {
+    if (!this.container) return;
+    const messagesContainer = this.container.querySelector("#chat-messages");
+    if (!messagesContainer) return;
+
+    // Remove welcome message if there are any messages
+    if (messages.length > 0) {
+      const welcome = messagesContainer.querySelector(".chat-welcome");
+      if (welcome) welcome.remove();
+    }
+
+    // Get existing message elements
+    const existingMessages = messagesContainer.querySelectorAll("[data-message-id]");
+    const existingIds = new Set(Array.from(existingMessages).map(el => el.getAttribute("data-message-id")));
+
+    // Add or update messages
+    messages.forEach(msg => {
+      const msgId = String(msg.id);
+      if (existingIds.has(msgId)) {
+        // Update existing message
+        const existingEl = messagesContainer.querySelector("[data-message-id=\"".concat(msgId, "\"]"));
+        if (existingEl) {
+          const bubble = existingEl.querySelector(".message-bubble");
+          if (bubble) {
+            // Parse markdown for assistant messages, escape for user messages
+            const content = msg.content || "";
+            const isUserMessage = msg.sender === "user";
+            bubble.innerHTML = !isUserMessage ? this._parseMarkdown(content) : this._escapeHtml(content);
+          }
+
+          // Update attachments if they exist
+          const messageContent = existingEl.querySelector(".message-content");
+          if (messageContent && msg.attachments && msg.attachments.length > 0) {
+            let attachmentsHTML = "\n              <div class=\"message-attachments\">\n                ".concat(msg.attachments.map((attachment, index) => {
+              var _attachment$metadata4, _attachment$metadata5, _attachment$metadata6;
+              const displayName = ((_attachment$metadata4 = attachment.metadata) === null || _attachment$metadata4 === void 0 ? void 0 : _attachment$metadata4.name) || ((_attachment$metadata5 = attachment.metadata) === null || _attachment$metadata5 === void 0 ? void 0 : _attachment$metadata5.filename) || "Unknown file";
+              const isImage = attachment.type === "image";
+              const imageSrc = isImage && attachment.data ? "data:".concat(attachment.mime_type, ";base64,").concat(attachment.data) : null;
+              return "\n                    <div class=\"message-attachment ".concat(isImage ? "image" : "pdf", "\" data-attachment-index=\"").concat(index, "\">\n                      <span class=\"message-attachment-icon\">\n                        ").concat(isImage ? "🖼️" : "📄", "\n                      </span>\n                      <div class=\"message-attachment-info\">\n                        <div \n                          class=\"message-attachment-name ").concat(isImage ? "clickable" : "", "\"\n                          ").concat(isImage && imageSrc ? "data-image-src=\"".concat(imageSrc, "\" data-image-alt=\"").concat(displayName, "\"") : "", "\n                          style=\"cursor: ").concat(isImage ? "pointer" : "default", ";\"\n                        >\n                          ").concat(this._escapeHtml(displayName), "\n                        </div>\n                        <div class=\"message-attachment-size\">\n                          ").concat(this.formatFileSize(((_attachment$metadata6 = attachment.metadata) === null || _attachment$metadata6 === void 0 ? void 0 : _attachment$metadata6.size) || 0), " \u2022 ").concat(this.getFileTypeDisplay(attachment.mime_type), "\n                        </div>\n                      </div>\n                    </div>\n                  ");
+            }).join(""), "\n              </div>\n            ");
+
+            // Insert or update attachments
+            const existingAttachments = messageContent.querySelector(".message-attachments");
+            if (existingAttachments) {
+              existingAttachments.outerHTML = attachmentsHTML;
+            } else {
+              messageContent.insertAdjacentHTML("afterbegin", attachmentsHTML);
+            }
+
+            // Re-bind image click handlers
+            messageContent.querySelectorAll(".message-attachment-name.clickable").forEach(el => {
+              // Remove existing listeners by cloning
+              const newEl = el.cloneNode(true);
+              el.parentNode.replaceChild(newEl, el);
+              newEl.addEventListener("click", e => {
+                e.stopPropagation();
+                const imageSrc = newEl.getAttribute("data-image-src");
+                const imageAlt = newEl.getAttribute("data-image-alt");
+                if (imageSrc) {
+                  this.showExpandedImage(imageSrc, imageAlt);
+                }
+              });
+            });
+          }
+
+          // Update classes based on message state
+          if (msg.isStreaming) {
+            existingEl.classList.add("streaming");
+          } else {
+            existingEl.classList.remove("streaming");
+          }
+          if (msg.isError) {
+            existingEl.classList.add("error");
+          }
+        }
+      } else {
+        // Add new message
+        this.addMessage(msg.content || "", msg.sender === "user", msg);
+      }
+    });
+
+    // Remove messages that are no longer in the array
+    existingMessages.forEach(el => {
+      const msgId = el.getAttribute("data-message-id");
+      const exists = messages.some(msg => String(msg.id) === msgId);
+      if (!exists) {
+        el.remove();
+      }
+    });
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  showTypingIndicator() {
+    if (!this.container) return;
+    const messagesContainer = this.container.querySelector("#chat-messages");
+    if (!messagesContainer) return;
+    const indicator = document.createElement("div");
+    indicator.className = "chat-message bot";
+    indicator.id = "typing-indicator";
+    indicator.innerHTML = "\n      <div class=\"typing-indicator\">\n        <div class=\"typing-dot\"></div>\n        <div class=\"typing-dot\"></div>\n        <div class=\"typing-dot\"></div>\n      </div>\n    ";
+    messagesContainer.appendChild(indicator);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  hideTypingIndicator() {
+    if (!this.container) return;
+    const indicator = this.container.querySelector("#typing-indicator");
+    if (indicator) indicator.remove();
+  }
+  handleUserMessage(text) {
+    // Call the callback if provided, otherwise use default echo
+    if (this.onMessage) {
+      this.onMessage(text, response => {
+        this.addMessage(response, false);
+      });
+    } else {
+      // Default echo response
+      this.addMessage("You said: \"".concat(text, "\""), false);
+    }
+  }
+  _escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Parse markdown to HTML
+  _parseMarkdown(text) {
+    if (!text || typeof text !== 'string') return '';
+    let html = text;
+
+    // Escape HTML first to prevent XSS
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    // Split into lines for processing
+    const lines = html.split('\n');
+    const processedLines = [];
+    let inList = false;
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+
+      // Check for headers first (#, ##, ###, etc.)
+      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+      if (headerMatch) {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        const level = headerMatch[1].length;
+        const headerText = headerMatch[2];
+        // Process markdown inside header
+        let processedHeader = headerText;
+        processedHeader = processedHeader.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        processedHeader = processedHeader.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        processedLines.push("<h".concat(level, ">").concat(processedHeader, "</h").concat(level, ">"));
+        continue;
+      }
+
+      // Check if this is a list item (before processing bold/italic)
+      const listMatch = line.match(/^[\s]*[-*]\s+(.+)$/);
+      if (listMatch) {
+        // Process markdown inside list item
+        let listContent = listMatch[1];
+
+        // Bold: **text** (must be processed before italic)
+        listContent = listContent.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        listContent = listContent.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        listContent = listContent.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        listContent = listContent.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        if (!inList) {
+          processedLines.push('<ul>');
+          inList = true;
+        }
+        processedLines.push("<li>".concat(listContent, "</li>"));
+      } else {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+
+        // Skip empty lines (they'll become <br> later)
+        if (line.trim() === '') {
+          processedLines.push('');
+          continue;
+        }
+
+        // Process markdown in non-list lines
+        // Bold: **text** (must be processed before italic)
+        line = line.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        line = line.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        line = line.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        line = line.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+
+        // Inline code: `code`
+        line = line.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+        // Links: [text](url)
+        line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        processedLines.push(line);
+      }
+    }
+    if (inList) {
+      processedLines.push('</ul>');
+    }
+
+    // Join lines with <br> and return
+    html = processedLines.join('<br>');
+    return html;
+  }
+
+  // Show expanded image modal
+  showExpandedImage(src, alt) {
+    // Remove existing modal if any
+    const existingModal = document.querySelector(".expanded-image-modal");
+    if (existingModal) {
+      existingModal.remove();
+    }
+    const modal = document.createElement("div");
+    modal.className = "expanded-image-modal";
+    modal.innerHTML = "\n      <div class=\"expanded-image-container\">\n        <button class=\"expanded-image-close\" title=\"Close\">\u2715</button>\n        <img src=\"".concat(src, "\" alt=\"").concat(alt || "Image", "\" class=\"expanded-image\" />\n        <div class=\"expanded-image-caption\">").concat(this._escapeHtml(alt || "Image preview"), "</div>\n      </div>\n    ");
+
+    // Close handlers
+    const closeModal = e => {
+      e === null || e === void 0 || e.stopPropagation();
+      modal.remove();
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+    const handleClickOutside = e => {
+      if (!e.target.closest(".expanded-image-container")) {
+        closeModal(e);
+      }
+    };
+    modal.querySelector(".expanded-image-close").addEventListener("click", closeModal);
+    modal.addEventListener("click", e => {
+      if (e.target === modal) {
+        closeModal(e);
+      }
+    });
+    document.addEventListener("mousedown", handleClickOutside);
+    document.body.appendChild(modal);
+  }
+  _applyStyles() {
+    // Check if styles already applied
+    if (document.getElementById('text-chat-screen-styles')) return;
+    const style = document.createElement("style");
+    style.id = 'text-chat-screen-styles';
+    style.textContent = "\n      .text-chat-screen {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        \n      }\n\n      .text-chat-screen .chat-header {\n        background: transparent;\n        color: ".concat(this.primaryColor, ";\n        padding: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .text-chat-screen .chat-header-content {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        flex: 1;\n      }\n\n      .text-chat-screen .chat-back {\n        background: ").concat(this.primaryColor, ";\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n        margin-right: 8px;\n      }\n\n    \n\n      .text-chat-screen .chat-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.2);\n        backdrop-filter: blur(10px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .text-chat-screen .chat-header-text {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .text-chat-screen .chat-title {\n        font-weight: 600;\n        font-size: 20px;\n      }\n\n      .text-chat-screen .chat-status {\n        font-size: 12px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .text-chat-screen .chat-close {\n        background: ").concat(this.primaryColor, ";\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n \n\n      .text-chat-screen .chat-messages {\n        flex: 1;\n        padding: 20px;\n        overflow-y: auto;\n        background: linear-gradient(180deg, white 10%, #E1EFCC );\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .text-chat-screen .chat-messages::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      .text-chat-screen .chat-messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      .text-chat-screen .chat-messages::-webkit-scrollbar-thumb {\n        background: #cbd5e1;\n        border-radius: 3px;\n      }\n\n      .text-chat-screen .chat-welcome {\n        text-align: center;\n        padding: 100px 20px;\n        color: #64748b;\n        \n      }\n\n      .text-chat-screen .chat-welcome .welcome-icon {\n        font-size: 48px;\n        margin-bottom: 12px;\n      }\n\n      .text-chat-screen .welcome-text {\n        font-size: 15px;\n        font-weight: 500;\n        color: #475569;\n      }\n\n      .text-chat-screen .chat-message {\n        display: flex;\n        gap: 8px;\n        animation: messageSlide 0.3s ease-out;\n      }\n\n      @keyframes messageSlide {\n        from {\n          opacity: 0;\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .text-chat-screen .chat-message.user {\n        flex-direction: row-reverse;\n      }\n\n      .text-chat-screen .message-content {\n        max-width: 75%;\n      }\n\n      .text-chat-screen .message-bubble {\n        padding: 12px 16px;\n        border-radius: 16px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .text-chat-screen .chat-message.user .message-bubble {\n        background: #e9f5d7;\n        color: ").concat(this.primaryColor, ";\n        border-bottom-right-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .text-chat-screen .chat-message.bot .message-bubble {\n        background: white;\n        color: #1e293b;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      /* ============================================\n   Text Chat Message Bubble Styles\n   ============================================ */\n\n/* Typography - Bold */\n.text-chat-screen .message-bubble strong {\n  font-weight: 600;\n  color: inherit;\n}\n\n/* Typography - Italic */\n.text-chat-screen .message-bubble em {\n  font-style: italic;\n}\n\n/* Lists */\n.text-chat-screen .message-bubble ul {\n  margin: 0px 0;\n  padding-left: 20px;\n  list-style-type: disc;\n  margin-bottom:0px;\n  margin-top:5px;\n}\n\n.text-chat-screen .message-bubble li {\n  margin: 0;\n  line-height: 1.1;\n  padding-left: 3px;\n}\n\n/* Headings - Shared Styles */\n.text-chat-screen .message-bubble h1,\n.text-chat-screen .message-bubble h2,\n.text-chat-screen .message-bubble h3,\n.text-chat-screen .message-bubble h4,\n.text-chat-screen .message-bubble h5,\n.text-chat-screen .message-bubble h6 {\n  margin: 0px 0 0px 0;\n  font-weight: 600;\n  color: inherit;\n  line-height: 1.3;\n}\n\n/* Heading Sizes */\n.text-chat-screen .message-bubble h1 { font-size: 1.5em; }\n.text-chat-screen .message-bubble h2 { font-size: 1.3em; }\n.text-chat-screen .message-bubble h3 { font-size: 1.15em; }\n.text-chat-screen .message-bubble h4 { font-size: 1.05em; }\n.text-chat-screen .message-bubble h5 { font-size: 1em; }\n.text-chat-screen .message-bubble h6 { font-size: 0.95em; }\n\n/* Inline Code */\n.text-chat-screen .message-bubble code {\n  background: rgba(0, 0, 0, 0.05);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-family: 'Courier New', Courier, monospace;\n  font-size: 0.9em;\n}\n\n/* Links */\n.text-chat-screen .message-bubble a {\n  color: ").concat(this.primaryColor, ";\n  text-decoration: underline;\n}\n\n.text-chat-screen .message-bubble a:hover {\n  opacity: 0.8;\n}\n.text-chat-screen .message-bubble br {\n  line-height: 0.1; /* Adjust between 0 and 1 */\n}\n\n      .text-chat-screen .message-time {\n        font-size: 10px;\n        color: #94a3b8;\n        margin-top: 4px;\n        text-align: right;\n      }\n\n      .text-chat-screen .typing-indicator {\n        display: flex;\n        gap: 4px;\n        padding: 12px 16px;\n        background: white;\n        border-radius: 16px;\n        border-bottom-left-radius: 4px;\n        max-width: 60px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .text-chat-screen .typing-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #94a3b8;\n        animation: typing 1.4s infinite;\n      }\n\n      .text-chat-screen .typing-dot:nth-child(2) {\n        animation-delay: 0.2s;\n      }\n\n      .text-chat-screen .typing-dot:nth-child(3) {\n        animation-delay: 0.4s;\n      }\n\n      @keyframes typing {\n        0%, 60%, 100% {\n          transform: translateY(0);\n          opacity: 0.7;\n        }\n        30% {\n          transform: translateY(-10px);\n          opacity: 1;\n        }\n      }\n\n      .text-chat-screen .file-attachments-container {\n        padding: 8px 12px;\n        background: white;\n        border-top: 1px solid #e2e8f0;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        max-height: 120px;\n        overflow-y: auto;\n      }\n\n      .text-chat-screen .file-attachments-container::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n      }\n\n      .text-chat-screen .file-attachments-container::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      .text-chat-screen .file-attachments-container::-webkit-scrollbar-thumb {\n        background: #cbd5e1;\n        border-radius: 2px;\n      }\n\n      .text-chat-screen .file-attachment {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 6px 10px;\n        background: #f1f5f9;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        font-size: 12px;\n        max-width: 200px;\n        position: relative;\n      }\n\n      .text-chat-screen .file-attachment.has-thumbnail {\n        padding: 4px;\n      }\n\n      .text-chat-screen .file-thumbnail {\n        width: 40px;\n        height: 40px;\n        border-radius: 6px;\n        overflow: hidden;\n        flex-shrink: 0;\n        background: #e2e8f0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .text-chat-screen .file-thumbnail-image {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        cursor: pointer;\n      }\n\n      .text-chat-screen .file-attachment-icon {\n        font-size: 24px;\n        flex-shrink: 0;\n      }\n\n      .text-chat-screen .file-attachment-info {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .text-chat-screen .file-attachment-name {\n        font-weight: 500;\n        color: #1e293b;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: 120px;\n      }\n\n      .text-chat-screen .file-attachment-size {\n        font-size: 11px;\n        color: #64748b;\n      }\n\n      .text-chat-screen .file-attachment-remove {\n        background: transparent;\n        border: none;\n        color: #64748b;\n        cursor: pointer;\n        padding: 4px;\n        border-radius: 4px;\n        font-size: 16px;\n        line-height: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n        flex-shrink: 0;\n      }\n\n      .text-chat-screen .file-attachment-remove:hover {\n        background: #fee2e2;\n        color: #dc2626;\n      }\n\n      .text-chat-screen .chat-input-wrapper {\n        display: flex;\n        padding: 10px;\n        gap: 8px;\n        background: white;\n        border-top: 1px solid #e2e8f0;\n        align-items: center;\n      }\n\n      .text-chat-screen .file-upload-controls {\n        display: flex;\n        align-items: center;\n      }\n\n      .text-chat-screen .file-upload-button {\n        background: transparent;\n        border: none;\n        color: ").concat(this.primaryColor, ";\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n      .text-chat-screen .file-upload-button:hover {\n        background: rgba(26, 92, 75, 0.1);\n      }\n\n      .text-chat-screen .file-upload-button:active {\n        transform: scale(0.95);\n      }\n\n      .text-chat-screen #chat-input {\n        flex: 1;\n        border: 2px solid #e2e8f0;\n        border-radius: 12px;\n        padding: 12px 16px;\n        font-size: 14px;\n        outline: none;\n        transition: all 0.2s;\n        font-family: inherit;\n      }\n\n      .text-chat-screen #chat-input:focus {\n        border-color: ").concat(this.primaryColor, ";\n        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n      }\n\n      .text-chat-screen #chat-send {\n        background: ").concat(this.primaryColor, ";\n        color: white;\n        border: none;\n        border-radius: 12px;\n        padding: 12px 16px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n      .text-chat-screen #chat-send:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .text-chat-screen #chat-send:not(:disabled):hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n      }\n\n      .text-chat-screen #chat-send:not(:disabled):active {\n        transform: scale(0.95);\n      }\n\n      /* Message Attachments Styles */\n      .text-chat-screen .message-attachments {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        margin-bottom: 8px;\n      }\n\n      .text-chat-screen .message-attachment {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 12px;\n        background: #f1f5f9;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        font-size: 12px;\n        max-width: 100%;\n      }\n\n      .text-chat-screen .message-attachment.image {\n        background: #f8fafc;\n      }\n\n      .text-chat-screen .message-attachment.pdf {\n        background: #fef2f2;\n      }\n\n      .text-chat-screen .message-attachment-icon {\n        font-size: 20px;\n        flex-shrink: 0;\n      }\n\n      .text-chat-screen .message-attachment-info {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .text-chat-screen .message-attachment-name {\n        font-weight: 500;\n        color: #1e293b;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .text-chat-screen .message-attachment-name.clickable:hover {\n        color: ").concat(this.primaryColor, ";\n        text-decoration: underline;\n      }\n\n      .text-chat-screen .message-attachment-size {\n        font-size: 11px;\n        color: #64748b;\n      }\n\n      /* Expanded Image Modal Styles */\n      .expanded-image-modal {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.8);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10000;\n        animation: fadeIn 0.2s ease;\n      }\n\n      @keyframes fadeIn {\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n\n      .expanded-image-container {\n        position: relative;\n        max-width: 90%;\n        max-height: 90vh;\n        background: #fff;\n        border-radius: 8px;\n        overflow: hidden;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n        animation: scaleIn 0.2s ease;\n        display: flex;\n        flex-direction: column;\n      }\n\n      @keyframes scaleIn {\n        from {\n          transform: scale(0.9);\n          opacity: 0;\n        }\n        to {\n          transform: scale(1);\n          opacity: 1;\n        }\n      }\n\n      .expanded-image-close {\n        position: absolute;\n        top: 12px;\n        right: 12px;\n        background: rgba(0, 0, 0, 0.6);\n        border: none;\n        color: white;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 18px;\n        z-index: 1;\n        transition: all 0.2s;\n      }\n\n      .expanded-image-close:hover {\n        background: rgba(0, 0, 0, 0.8);\n        transform: scale(1.1);\n      }\n\n      .expanded-image {\n        max-width: 100%;\n        max-height: calc(90vh - 60px);\n        object-fit: contain;\n        display: block;\n      }\n\n      .expanded-image-caption {\n        padding: 12px 16px;\n        background: #fff;\n        color: #1e293b;\n        font-size: 14px;\n        text-align: center;\n        border-top: 1px solid #e2e8f0;\n      }\n    ");
+    document.head.appendChild(style);
+  }
 }
 
-var chatWidget = {exports: {}};
-
-(function (module) {
-  // chat-widget.js - Modern vanilla JS chat bot widget
-  var ChatWidget = /*#__PURE__*/function () {
-    function ChatWidget() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _classCallCheck(this, ChatWidget);
-      this.title = options.title || "Chat Assistant";
-      this.placeholder = options.placeholder || "Type your message...";
-      this.primaryColor = options.primaryColor || "#6366f1";
-      this.container = null;
-      this.messages = [];
-      this.isMinimized = false;
-      this._init();
-    }
-    return _createClass(ChatWidget, [{
-      key: "_init",
-      value: function _init() {
-        // Create container
-        this.container = document.createElement("div");
-        this.container.id = "chat-widget-container";
-        this.container.innerHTML = "\n      <div class=\"chat-widget-minimized\" id=\"chat-toggle\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n        </svg>\n      </div>\n      <div class=\"chat-widget-expanded\" id=\"chat-expanded\">\n        <div class=\"chat-header\">\n          <div class=\"chat-header-content\">\n            <div class=\"chat-avatar\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"></path>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n              </svg>\n            </div>\n            <div class=\"chat-header-text\">\n              <div class=\"chat-title\">".concat(this.title, "</div>\n              <div class=\"chat-status\">\u25CF Online</div>\n            </div>\n          </div>\n          <button class=\"chat-close\" id=\"chat-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n        <div class=\"chat-messages\" id=\"chat-messages\">\n          <div class=\"chat-welcome\">\n            <div class=\"welcome-icon\">\uD83D\uDC4B</div>\n            <div class=\"welcome-text\">Hello! How can I help you today?</div>\n          </div>\n        </div>\n        <div class=\"chat-input-wrapper\">\n          <input type=\"text\" id=\"chat-input\" placeholder=\"").concat(this.placeholder, "\" autocomplete=\"off\" />\n          <button id=\"chat-send\" disabled>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n            </svg>\n          </button>\n        </div>\n      </div>\n    ");
-        document.body.appendChild(this.container);
-        this._applyStyles();
-        this._bindEvents();
-      }
-    }, {
-      key: "_applyStyles",
-      value: function _applyStyles() {
-        var style = document.createElement("style");
-        style.textContent = "\n      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');\n      \n      #chat-widget-container {\n        position: fixed;\n        bottom: 24px;\n        right: 24px;\n        z-index: 10000;\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n      }\n\n      .chat-widget-minimized {\n        width: 60px;\n        height: 60px;\n        border-radius: 50%;\n        background: linear-gradient(135deg, ".concat(this.primaryColor, " 0%, #8b5cf6 100%);\n        color: white;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        animation: pulse 2s infinite;\n      }\n\n      .chat-widget-minimized:hover {\n        transform: scale(1.1);\n        box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);\n      }\n\n      @keyframes pulse {\n        0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); }\n        50% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6); }\n      }\n\n      .chat-widget-expanded {\n        width: 380px;\n        height: 600px;\n        background: white;\n        border-radius: 16px;\n        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n        display: none;\n        flex-direction: column;\n        overflow: hidden;\n        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      @keyframes slideUp {\n        from {\n          opacity: 0;\n          transform: translateY(20px) scale(0.95);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0) scale(1);\n        }\n      }\n\n      .chat-widget-expanded.visible {\n        display: flex;\n      }\n\n      .chat-header {\n        background: linear-gradient(135deg, ").concat(this.primaryColor, " 0%, #8b5cf6 100%);\n        color: white;\n        padding: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .chat-header-content {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n      }\n\n      .chat-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.2);\n        backdrop-filter: blur(10px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .chat-header-text {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .chat-title {\n        font-weight: 600;\n        font-size: 16px;\n      }\n\n      .chat-status {\n        font-size: 12px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .chat-close {\n        background: transparent;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n      .chat-close:hover {\n        background: rgba(255, 255, 255, 0.15);\n      }\n\n      .chat-messages {\n        flex: 1;\n        padding: 20px;\n        overflow-y: auto;\n        background: #f9fafb;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .chat-messages::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      .chat-messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      .chat-messages::-webkit-scrollbar-thumb {\n        background: #cbd5e1;\n        border-radius: 3px;\n      }\n\n      .chat-welcome {\n        text-align: center;\n        padding: 40px 20px;\n        color: #64748b;\n      }\n\n      .welcome-icon {\n        font-size: 48px;\n        margin-bottom: 12px;\n      }\n\n      .welcome-text {\n        font-size: 15px;\n        font-weight: 500;\n        color: #475569;\n      }\n\n      .chat-message {\n        display: flex;\n        gap: 8px;\n        animation: messageSlide 0.3s ease-out;\n      }\n\n      @keyframes messageSlide {\n        from {\n          opacity: 0;\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .chat-message.user {\n        flex-direction: row-reverse;\n      }\n\n      .message-bubble {\n        max-width: 75%;\n        padding: 12px 16px;\n        border-radius: 16px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .chat-message.user .message-bubble {\n        background: linear-gradient(135deg, ").concat(this.primaryColor, " 0%, #8b5cf6 100%);\n        color: white;\n        border-bottom-right-radius: 4px;\n      }\n\n      .chat-message.bot .message-bubble {\n        background: white;\n        color: #1e293b;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .typing-indicator {\n        display: flex;\n        gap: 4px;\n        padding: 12px 16px;\n        background: white;\n        border-radius: 16px;\n        border-bottom-left-radius: 4px;\n        max-width: 60px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .typing-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #94a3b8;\n        animation: typing 1.4s infinite;\n      }\n\n      .typing-dot:nth-child(2) {\n        animation-delay: 0.2s;\n      }\n\n      .typing-dot:nth-child(3) {\n        animation-delay: 0.4s;\n      }\n\n      @keyframes typing {\n        0%, 60%, 100% {\n          transform: translateY(0);\n          opacity: 0.7;\n        }\n        30% {\n          transform: translateY(-10px);\n          opacity: 1;\n        }\n      }\n\n      .chat-input-wrapper {\n        display: flex;\n        padding: 16px;\n        gap: 8px;\n        background: white;\n        border-top: 1px solid #e2e8f0;\n      }\n\n      #chat-input {\n        flex: 1;\n        border: 2px solid #e2e8f0;\n        border-radius: 12px;\n        padding: 12px 16px;\n        font-size: 14px;\n        outline: none;\n        transition: all 0.2s;\n        font-family: inherit;\n      }\n\n      #chat-input:focus {\n        border-color: ").concat(this.primaryColor, ";\n        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n      }\n\n      #chat-send {\n        background: linear-gradient(135deg, ").concat(this.primaryColor, " 0%, #8b5cf6 100%);\n        color: white;\n        border: none;\n        border-radius: 12px;\n        padding: 12px 16px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n      #chat-send:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      #chat-send:not(:disabled):hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n      }\n\n      #chat-send:not(:disabled):active {\n        transform: scale(0.95);\n      }\n    ");
-        document.head.appendChild(style);
-      }
-    }, {
-      key: "_bindEvents",
-      value: function _bindEvents() {
-        var _this = this;
-        var toggle = this.container.querySelector("#chat-toggle");
-        var closeBtn = this.container.querySelector("#chat-close");
-        var expanded = this.container.querySelector("#chat-expanded");
-        var input = this.container.querySelector("#chat-input");
-        var sendBtn = this.container.querySelector("#chat-send");
-        toggle.addEventListener("click", function () {
-          toggle.style.display = "none";
-          expanded.classList.add("visible");
-          input.focus();
+class BhashiniFrontend {
+  constructor() {
+    this.apiKey = '23588533c1-d990-4a7d-b052-d970c886147e';
+    this.userId = '749bd0b0c65e4d17a372be0ad92af981';
+    this.callbackUrl = 'https://meity-auth.ulcacontrib.org/ulca/apis/v0/model/getModelsPipeline';
+    this.inferenceUrl = null;
+    this.inferenceHeaders = {};
+    this.asrServiceId = {
+      'hi': 'ai4bharat/conformer-hi-gpu--t4',
+      'en': 'ai4bharat/whisper-medium-en--gpu--t4'
+    };
+    this.ttsServiceId = {
+      'hi': 'ai4bharat/indic-tts-coqui-indo_aryan-gpu--t4',
+      'en': 'ai4bharat/indic-tts-coqui-misc-gpu--t4'
+    };
+    this.translationServiceId = 'ai4bharat/indictrans-v2-all-gpu--t4';
+  }
+  async initialize() {
+    try {
+      const response = await fetch(this.callbackUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'userID': this.userId,
+          'ulcaApiKey': this.apiKey
+        },
+        body: JSON.stringify({
+          pipelineTasks: [{
+            taskType: 'asr'
+          }],
+          pipelineRequestConfig: {
+            pipelineId: '64392f96daac500b55c543cd'
+          }
+        })
+      });
+      const data = await response.json();
+      if (data.pipelineInferenceAPIEndPoint) {
+        this.inferenceUrl = data.pipelineInferenceAPIEndPoint.callbackUrl;
+        const keyName = data.pipelineInferenceAPIEndPoint.inferenceApiKey.name;
+        const keyValue = data.pipelineInferenceAPIEndPoint.inferenceApiKey.value;
+        this.inferenceHeaders = {
+          'Content-Type': 'application/json',
+          [keyName]: keyValue
+        };
+      } else {
+        // Fallback to direct endpoint
+        this.inferenceUrl = 'https://dhruva-api.bhashini.gov.in/services/inference/pipeline';
+        this.inferenceHeaders = {
+          'Content-Type': 'application/json',
+          'userID': this.userId,
+          'ulcaApiKey': this.apiKey
+        };
+      }
+      return true;
+    } catch (error) {
+      console.error('Failed to initialize Bhashini:', error);
+      // Use fallback endpoint
+      this.inferenceUrl = 'https://dhruva-api.bhashini.gov.in/services/inference/pipeline';
+      this.inferenceHeaders = {
+        'Content-Type': 'application/json',
+        'userID': this.userId,
+        'ulcaApiKey': this.apiKey
+      };
+      return false;
+    }
+  }
+  async convertToWav(audioBlob) {
+    return new Promise((resolve, reject) => {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const reader = new FileReader();
+      reader.onload = async e => {
+        try {
+          const arrayBuffer = e.target.result;
+          const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+          // Convert to mono 16kHz
+          const offlineContext = new OfflineAudioContext(1, audioBuffer.duration * 16000, 16000);
+          const source = offlineContext.createBufferSource();
+          source.buffer = audioBuffer;
+          source.connect(offlineContext.destination);
+          source.start();
+          const renderedBuffer = await offlineContext.startRendering();
+
+          // Convert to WAV
+          const wav = this.audioBufferToWav(renderedBuffer);
+          const wavBlob = new Blob([wav], {
+            type: 'audio/wav'
+          });
+
+          // Convert to base64
+          const wavReader = new FileReader();
+          wavReader.onloadend = () => {
+            const base64 = wavReader.result.split(',')[1];
+            resolve(base64);
+          };
+          wavReader.readAsDataURL(wavBlob);
+        } catch (error) {
+          reject(error);
+        }
+      };
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(audioBlob);
+    });
+  }
+  audioBufferToWav(buffer) {
+    const length = buffer.length * buffer.numberOfChannels * 2 + 44;
+    const arrayBuffer = new ArrayBuffer(length);
+    const view = new DataView(arrayBuffer);
+    const channels = [];
+    let offset = 0;
+    let pos = 0;
+
+    // Write WAV header
+    const setUint16 = data => {
+      view.setUint16(pos, data, true);
+      pos += 2;
+    };
+    const setUint32 = data => {
+      view.setUint32(pos, data, true);
+      pos += 4;
+    };
+
+    // "RIFF" chunk descriptor
+    setUint32(0x46464952); // "RIFF"
+    setUint32(length - 8); // file length - 8
+    setUint32(0x45564157); // "WAVE"
+
+    // "fmt " sub-chunk
+    setUint32(0x20746d66); // "fmt "
+    setUint32(16); // SubChunk1Size = 16
+    setUint16(1); // AudioFormat = 1 (PCM)
+    setUint16(buffer.numberOfChannels);
+    setUint32(buffer.sampleRate);
+    setUint32(buffer.sampleRate * 2 * buffer.numberOfChannels); // byte rate
+    setUint16(buffer.numberOfChannels * 2); // block align
+    setUint16(16); // bits per sample
+
+    // "data" sub-chunk
+    setUint32(0x61746164); // "data"
+    setUint32(length - pos - 4); // SubChunk2Size
+
+    // Write interleaved data
+    for (let i = 0; i < buffer.numberOfChannels; i++) {
+      channels.push(buffer.getChannelData(i));
+    }
+    while (pos < length) {
+      for (let i = 0; i < buffer.numberOfChannels; i++) {
+        let sample = Math.max(-1, Math.min(1, channels[i][offset]));
+        sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+        view.setInt16(pos, sample, true);
+        pos += 2;
+      }
+      offset++;
+    }
+    return arrayBuffer;
+  }
+  async speechToText(base64Audio) {
+    let sourceLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+    let targetLanguage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'hi';
+    if (!this.inferenceUrl) {
+      await this.initialize();
+    }
+    const pipelineTasks = [{
+      taskType: 'asr',
+      config: {
+        language: {
+          sourceLanguage
+        },
+        serviceId: this.asrServiceId[sourceLanguage] || this.asrServiceId['hi'],
+        audioFormat: 'wav',
+        samplingRate: 16000
+      }
+    }];
+
+    // Only translate if languages differ
+    if (sourceLanguage !== targetLanguage) {
+      pipelineTasks.push({
+        taskType: 'translation',
+        config: {
+          sourceLanguage: sourceLanguage === 'auto' ? undefined : sourceLanguage,
+          targetLanguage
+        }
+      });
+    }
+    const response = await fetch(this.inferenceUrl, {
+      method: 'POST',
+      headers: this.inferenceHeaders,
+      body: JSON.stringify({
+        pipelineTasks,
+        inputData: {
+          audio: [{
+            audioContent: base64Audio
+          }]
+        }
+      })
+    });
+    if (!response.ok) {
+      throw new Error("API error: ".concat(response.status, " ").concat(response.statusText));
+    }
+    const data = await response.json();
+
+    // If translated, return translation
+    if (pipelineTasks.length > 1) {
+      return data.pipelineResponse[1].output[0].target;
+    }
+
+    // Otherwise return raw transcription
+    return data.pipelineResponse[0].output[0].source;
+  }
+  async textToSpeech(text) {
+    let language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+    let gender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'female';
+    if (!this.inferenceUrl) {
+      await this.initialize();
+    }
+
+    // ✅ Clean the text first
+    const cleanedText = text.replace(/!/g, ".");
+    const response = await fetch(this.inferenceUrl, {
+      method: 'POST',
+      headers: this.inferenceHeaders,
+      body: JSON.stringify({
+        pipelineTasks: [{
+          taskType: "tts",
+          config: {
+            language: {
+              sourceLanguage: language
+            },
+            serviceId: this.ttsServiceId[language] || this.ttsServiceId["en"],
+            samplingRate: 8000,
+            gender: gender
+          }
+        }],
+        inputData: {
+          input: [{
+            source: cleanedText
+          }]
+        }
+      })
+    });
+    if (!response.ok) {
+      throw new Error("TTS API error: ".concat(response.status, " ").concat(response.statusText));
+    }
+    const data = await response.json();
+    return data.pipelineResponse[0].audio[0].audioContent;
+  }
+  async translateText(text, sourceLanguage, targetLanguage) {
+    if (!this.inferenceUrl) {
+      await this.initialize();
+    }
+    const response = await fetch(this.inferenceUrl, {
+      method: 'POST',
+      headers: this.inferenceHeaders,
+      body: JSON.stringify({
+        pipelineTasks: [{
+          taskType: 'translation',
+          config: {
+            language: {
+              sourceLanguage: sourceLanguage,
+              targetLanguage: targetLanguage
+            },
+            serviceId: this.translationServiceId
+          }
+        }],
+        inputData: {
+          input: [{
+            source: text
+          }]
+        }
+      })
+    });
+    if (!response.ok) {
+      throw new Error("Translation API error: ".concat(response.status, " ").concat(response.statusText));
+    }
+    const data = await response.json();
+    return data.pipelineResponse[0].output[0].target;
+  }
+  async speechToEnglish(base64Audio) {
+    let sourceLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'hi';
+    // Step 1: Transcribe audio to source language text
+    const transcribedText = await this.speechToText(base64Audio, sourceLanguage);
+
+    // Step 2: If already English, return as is
+    if (sourceLanguage === 'en') {
+      return {
+        transcription: transcribedText,
+        translation: transcribedText
+      };
+    }
+
+    // Step 3: Translate to English
+    const translatedText = await this.translateText(transcribedText, sourceLanguage, 'en');
+    return {
+      transcription: transcribedText,
+      translation: translatedText
+    };
+  }
+  async speechToHindi(base64Audio) {
+    let sourceLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+    // Step 1: Transcribe audio to source language text
+    const transcribedText = await this.speechToText(base64Audio, sourceLanguage);
+
+    // Step 2: If already Hindi, return as is
+    if (sourceLanguage === 'hi') {
+      return {
+        transcription: transcribedText,
+        translation: transcribedText
+      };
+    }
+
+    // Step 3: Translate to Hindi
+    const translatedText = await this.translateText(transcribedText, sourceLanguage, 'hi');
+    return {
+      transcription: transcribedText,
+      translation: translatedText
+    };
+  }
+  async transcribeSpeechToEnglish(base64Audio) {
+    let sourceLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "hi";
+    // Step 1: Transcribe audio to source language text
+    const transcribedText = await this.speechToText(base64Audio, sourceLanguage);
+
+    // Step 2: If already English, return as is
+    if (sourceLanguage === "en") {
+      return {
+        transcription: transcribedText,
+        translation: transcribedText
+      };
+    }
+
+    // Step 3: Translate to English
+    const translatedText = await this.translateText(transcribedText, sourceLanguage, "en");
+    return {
+      transcription: transcribedText,
+      translation: translatedText
+    };
+  }
+}
+
+// audio-chat-screen.js - Audio chat screen component
+class AudioChatScreen {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.primaryColor = options.primaryColor || "#1a5c4b";
+    this.title = options.title || "Chat Assistant";
+    this.onRecordStart = options.onRecordStart || (() => {});
+    this.onRecordStop = options.onRecordStop || (() => {});
+    this.onBack = options.onBack || (() => {});
+    this.onOpenDrawer = options.onOpenDrawer || (() => {});
+    this.onClose = options.onClose || (() => {});
+    this.navigateToTextScreen = options.navigateToTextScreen;
+    this.sendMessage = options.sendMessage || null;
+    this.selectedLanguage = options.selectedLanguage || "en";
+    this.container = null;
+    this.messages = options.messages || [];
+
+    // Bhashini Integration
+    this.bhashini = new BhashiniFrontend();
+    this.mediaRecorder = null;
+    this.audioChunks = [];
+    this.isRecording = false;
+
+    // TTS tracking
+    this.playedMessageIds = new Set();
+    this.audioQueue = [];
+    this.isPlaying = false;
+
+    // File attachments
+    this.contentBlocks = [];
+    this.SUPPORTED_FILE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+  }
+  render(container) {
+    this.container = container;
+    this._applyStyles();
+    container.innerHTML = "\n      <div class=\"audio-chat-screen\">\n        <div class=\"chat-header\">\n          <div class=\"chat-header-content\">\n            <button class=\"chat-back\" id=\"audio-chat-menu\">\n              <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-menu-icon lucide-menu\"><path d=\"M4 5h16\"/><path d=\"M4 12h16\"/><path d=\"M4 19h16\"/></svg>\n            </button>\n           \n           <div class=\"chat-header-text\">\n              <div class=\"chat-title\">".concat(this.title, "</div>\n            </div>\n          </div>\n          <button class=\"chat-close\" id=\"navigate-to-text-screen\">\n            <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-message-square-text-icon lucide-message-square-text\"><path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\"/><path d=\"M7 11h10\"/><path d=\"M7 15h6\"/><path d=\"M7 7h8\"/></svg>\n          </button>\n          &#8203; &#8203; &#8203;\n          <button class=\"chat-close\" id=\"audio-chat-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n        \n        \n        <div class=\"chat-messages\" id=\"chat-messages\">\n          <div class=\"chat-welcome\">\n            <div class=\"welcome-text\">\uD83D\uDC4B Hello! I'm your AI assistant. How can I help you today?</div>\n          </div>\n        </div> \n        \n        \n        <div class=\"file-attachments-container\" id=\"file-attachments-container\" style=\"display: none;\"></div>\n        <div class=\"bottom-inputs\">\n          <button id=\"record-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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>\n          </button>\n          &#8203; &#8203; &#8203;&#8203; &#8203; &#8203;\n          <input\n              type=\"file\"\n              id=\"file-upload-input\"\n              accept=\"image/jpeg,image/png,image/gif,image/webp\"\n              style=\"display: none;\"\n            />\n          <button id=\"attachment-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-paperclip-icon lucide-paperclip\"><path d=\"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551\"/></svg>\n          </button>\n        </div>\n        \n        \n      </div>\n    ");
+
+    // Bind header events
+    const menuBtn = container.querySelector("#audio-chat-menu");
+    const closeBtn = container.querySelector("#audio-chat-close");
+    const navigateToTextScreen = container.querySelector("#navigate-to-text-screen");
+    if (menuBtn) {
+      menuBtn.addEventListener("click", () => {
+        if (this.onOpenDrawer) {
+          this.onOpenDrawer();
+        } else if (this.onBack) {
+          this.onBack();
+        }
+      });
+    }
+    if (closeBtn) {
+      closeBtn.addEventListener("click", () => {
+        if (this.onClose) this.onClose();
+      });
+    }
+    if (navigateToTextScreen) {
+      navigateToTextScreen.addEventListener("click", () => {
+        if (this.navigateToTextScreen) this.navigateToTextScreen();
+      });
+    }
+
+    // Bind audio chat events
+    const recordBtn = container.querySelector("#record-button");
+    const attachmentBtn = container.querySelector("#attachment-button");
+    if (recordBtn) {
+      recordBtn.addEventListener("click", () => {
+        this.toggleRecording(recordBtn);
+      });
+    }
+    const fileInput = container.querySelector("#file-upload-input");
+    if (attachmentBtn && fileInput) {
+      attachmentBtn.addEventListener("click", () => {
+        fileInput.click();
+      });
+      fileInput.addEventListener("change", e => {
+        this.handleFileUpload(e);
+      });
+    }
+
+    // Sync existing messages on render
+    if (this.messages && this.messages.length > 0) {
+      setTimeout(() => {
+        this._syncMessages(this.messages);
+      }, 50);
+    }
+  }
+
+  // Convert file to content block
+  fileToContentBlock(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64Data = reader.result.split(",")[1];
+        if (this.SUPPORTED_FILE_TYPES.includes(file.type)) {
+          resolve({
+            type: "image",
+            source_type: "base64",
+            mime_type: file.type,
+            data: base64Data,
+            metadata: {
+              name: file.name,
+              size: file.size
+            }
+          });
+        } else {
+          reject(new Error("Unsupported file type: ".concat(file.type)));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error("Failed to read file: ".concat(file.name)));
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  // Handle file upload
+  async handleFileUpload(e) {
+    const files = e.target.files;
+    if (!files) return;
+    const fileArray = Array.from(files);
+    const validFiles = fileArray.filter(file => this.SUPPORTED_FILE_TYPES.includes(file.type));
+    if (validFiles.length === 0) {
+      if (fileArray.length > 0) {
+        console.warn("Invalid file type.");
+      }
+      return;
+    }
+
+    // Replace existing with the new one
+    const file = validFiles[0];
+    try {
+      const block = await this.fileToContentBlock(file);
+      this.contentBlocks = [block];
+      this.renderFilePreview();
+    } catch (error) {
+      console.error("Error processing file:", error);
+    }
+
+    // Clear input
+    e.target.value = "";
+  }
+  removeBlock(index) {
+    this.contentBlocks = []; // Since we only have max 1, removing index 0 means clearing all
+    this.renderFilePreview();
+  }
+  renderFilePreview() {
+    if (!this.container) return;
+    const container = this.container.querySelector("#file-attachments-container");
+    if (!container) return;
+    if (!this.contentBlocks || this.contentBlocks.length === 0) {
+      container.innerHTML = "";
+      container.style.display = "none";
+      return;
+    }
+    container.style.display = "flex";
+    container.innerHTML = this.contentBlocks.map((block, index) => {
+      var _block$metadata, _block$metadata2, _block$metadata3;
+      const displayName = ((_block$metadata = block.metadata) === null || _block$metadata === void 0 ? void 0 : _block$metadata.filename) || ((_block$metadata2 = block.metadata) === null || _block$metadata2 === void 0 ? void 0 : _block$metadata2.name) || "file";
+      const size = this.formatFileSize(((_block$metadata3 = block.metadata) === null || _block$metadata3 === void 0 ? void 0 : _block$metadata3.size) || 0);
+      const isImage = block.type === "image";
+      const src = isImage ? "data:".concat(block.mime_type, ";base64,").concat(block.data) : null;
+      return "\n          <div class=\"file-attachment ".concat(isImage ? "has-thumbnail" : "", "\" data-index=\"").concat(index, "\">\n            <div class=\"file-thumbnail\">\n                <img src=\"").concat(src, "\" alt=\"").concat(displayName, "\" class=\"file-thumbnail-image\" />\n            </div>\n            <div class=\"file-attachment-info\">\n              <div class=\"file-attachment-name\" title=\"").concat(displayName, "\">\n                ").concat(displayName, "\n              </div>\n              <div class=\"file-attachment-size\">").concat(size, "</div>\n            </div>\n            <button\n              class=\"file-attachment-remove\"\n              data-index=\"").concat(index, "\"\n              title=\"Remove file\"\n            >\n              \u2715\n            </button>\n          </div>\n        ");
+    }).join("");
+
+    // Bind remove buttons
+    container.querySelectorAll(".file-attachment-remove").forEach(btn => {
+      btn.addEventListener("click", e => {
+        e.stopPropagation();
+        const index = parseInt(btn.getAttribute("data-index"));
+        this.removeBlock(index);
+      });
+    });
+  }
+  async toggleRecording(btn) {
+    if (this.isRecording) {
+      this.stopRecording(btn);
+    } else {
+      await this.startRecording(btn);
+    }
+  }
+  async startRecording(btn) {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      this.mediaRecorder = new MediaRecorder(stream);
+      this.audioChunks = [];
+      this.mediaRecorder.ondataavailable = event => {
+        this.audioChunks.push(event.data);
+      };
+      this.mediaRecorder.onstop = async () => {
+        const audioBlob = new Blob(this.audioChunks, {
+          type: "audio/wav"
         });
-        closeBtn.addEventListener("click", function () {
-          expanded.classList.remove("visible");
-          toggle.style.display = "flex";
+        this.audioChunks = [];
+
+        // Stop all tracks
+        stream.getTracks().forEach(track => track.stop());
+
+        // Process audio
+        await this.processAudioInput(audioBlob);
+      };
+      this.mediaRecorder.start();
+      this.isRecording = true;
+      this.onRecordStart();
+
+      // Update UI
+      btn.classList.add("recording");
+      btn.innerHTML = "\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-square-icon\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect></svg>\n      ";
+
+      // Stop current TTS if any
+      this.stopTTS();
+    } catch (error) {
+      console.error("Error accessing microphone:", error);
+      alert("Could not access microphone. Please check permissions.");
+    }
+  }
+  stopRecording(btn) {
+    if (this.mediaRecorder && this.isRecording) {
+      this.mediaRecorder.stop();
+      this.isRecording = false;
+      this.onRecordStop();
+
+      // Update UI
+      btn.classList.remove("recording");
+      btn.innerHTML = "\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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>\n      ";
+    }
+  }
+  async processAudioInput(audioBlob) {
+    try {
+      // Show processing state?
+
+      // 1. Convert to WAV Base64 (using Bhashini helper)
+      const base64Audio = await this.bhashini.convertToWav(audioBlob);
+
+      // 2. STT
+      const text = await this.bhashini.speechToText(base64Audio, this.selectedLanguage, this.selectedLanguage);
+      if (text && text.trim()) {
+        // 3. Send Message
+        if (this.sendMessage) {
+          await this.sendMessage(text, this.contentBlocks);
+          // Clear attachments after sending
+          this.contentBlocks = [];
+          this.renderFilePreview(); // Update UI to remove preview
+        }
+      }
+    } catch (error) {
+      console.error("Error processing audio:", error);
+      this.addMessage("Sorry, I couldn't understand that.", false, {
+        isError: true
+      });
+    }
+  }
+  // 9113770648
+  stopTTS() {
+    // Cancel any active speech synthesis (if using browser API) or stop audio element
+    if (this.currentAudio) {
+      this.currentAudio.pause();
+      this.currentAudio = null;
+    }
+    this.audioQueue = [];
+    this.isPlaying = false;
+  }
+  async playNextInQueue() {
+    // Check if audio screen is active
+    const isVisible = this.container && this.container.querySelector(".audio-chat-screen");
+    if (!isVisible) return;
+    console.log("Playing next in queue", this.audioQueue);
+    if (this.isPlaying || this.audioQueue.length === 0) return;
+    this.isPlaying = true;
+    const text = this.audioQueue.shift();
+    try {
+      const audioContent = await this.bhashini.textToSpeech(text, this.selectedLanguage);
+      if (audioContent) {
+        const audioSrc = "data:audio/wav;base64,".concat(audioContent);
+        this.currentAudio = new Audio(audioSrc);
+        this.currentAudio.onended = () => {
+          this.isPlaying = false;
+          this.playNextInQueue();
+        };
+        this.currentAudio.onerror = () => {
+          this.isPlaying = false;
+          this.playNextInQueue();
+        };
+        await this.currentAudio.play();
+      } else {
+        this.isPlaying = false;
+        this.playNextInQueue();
+      }
+    } catch (error) {
+      console.error("TTS Error:", error);
+      this.isPlaying = false;
+      this.playNextInQueue();
+    }
+  }
+
+  // Format file size (mirrors TextChatScreen)
+  formatFileSize(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+
+  // Get file type display name (mirrors TextChatScreen)
+  getFileTypeDisplay(mimeType) {
+    switch (mimeType) {
+      case "image/jpeg":
+      case "image/jpg":
+        return "JPEG Image";
+      case "image/png":
+        return "PNG Image";
+      case "image/gif":
+        return "GIF Image";
+      case "image/webp":
+        return "WebP Image";
+      case "application/pdf":
+        return "PDF Document";
+      default:
+        return "Unknown File";
+    }
+  }
+  _formatTime(date) {
+    let hours = date.getHours();
+    const minutes = date.getMinutes();
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    const strTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ' ' + ampm;
+    return strTime;
+  }
+  addMessage(text, isUser) {
+    let messageData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (!this.container) return;
+    const messagesContainer = this.container.querySelector("#chat-messages");
+    if (!messagesContainer) return;
+    const welcome = messagesContainer.querySelector(".chat-welcome");
+    if (welcome) welcome.remove();
+
+    // Check if message already exists (for syncing)
+    const messageId = (messageData === null || messageData === void 0 ? void 0 : messageData.id) || Date.now();
+    const existingMessage = messagesContainer.querySelector("[data-message-id=\"".concat(messageId, "\"]"));
+    if (existingMessage && messageData) {
+      // Update existing message
+      const bubble = existingMessage.querySelector(".message-bubble");
+      if (bubble) {
+        // Parse markdown for assistant messages, escape for user messages
+        const content = messageData.content || text;
+        bubble.innerHTML = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+      }
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      return;
+    }
+    const messageEl = document.createElement("div");
+    messageEl.className = "chat-message ".concat(isUser ? "user" : "bot");
+    messageEl.setAttribute("data-message-id", messageId);
+
+    // Handle different message types
+    let content = text;
+    if (messageData) {
+      if (messageData.isStreaming) {
+        content = messageData.content || "Thinking...";
+      } else if (messageData.isError) {
+        content = messageData.content || "Error occurred";
+        messageEl.classList.add("error");
+      } else {
+        content = messageData.content || text;
+      }
+    }
+
+    // Build attachments HTML if present
+    let attachmentsHTML = "";
+    if (messageData && messageData.attachments && messageData.attachments.length > 0) {
+      attachmentsHTML = "\n        <div class=\"message-attachments\">\n          ".concat(messageData.attachments.map((attachment, index) => {
+        var _attachment$metadata, _attachment$metadata2, _attachment$metadata3;
+        const displayName = ((_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.name) || ((_attachment$metadata2 = attachment.metadata) === null || _attachment$metadata2 === void 0 ? void 0 : _attachment$metadata2.filename) || "Unknown file";
+        const isImage = attachment.type === "image";
+        const imageSrc = isImage && attachment.data ? "data:".concat(attachment.mime_type, ";base64,").concat(attachment.data) : null;
+        return "\n              <div class=\"message-attachment ".concat(isImage ? "image" : "pdf", "\" data-attachment-index=\"").concat(index, "\">\n                <span class=\"message-attachment-icon\">\n                  ").concat(isImage ? "🖼️" : "📄", "\n                </span>\n                <div class=\"message-attachment-info\">\n                  <div \n                    class=\"message-attachment-name ").concat(isImage ? "clickable" : "", "\"\n                    ").concat(isImage && imageSrc ? "data-image-src=\"".concat(imageSrc, "\" data-image-alt=\"").concat(displayName, "\"") : "", "\n                    style=\"cursor: ").concat(isImage ? "pointer" : "default", ";\"\n                  >\n                    ").concat(this._escapeHtml(displayName), "\n                  </div>\n                  <div class=\"message-attachment-size\">\n                    ").concat(this.formatFileSize(((_attachment$metadata3 = attachment.metadata) === null || _attachment$metadata3 === void 0 ? void 0 : _attachment$metadata3.size) || 0), " \u2022 ").concat(this.getFileTypeDisplay(attachment.mime_type), "\n                  </div>\n                </div>\n              </div>\n            ");
+      }).join(""), "\n        </div>\n      ");
+    }
+    const timestamp = messageData !== null && messageData !== void 0 && messageData.timestamp ? new Date(messageData.timestamp) : new Date();
+    const formattedTime = this._formatTime(timestamp);
+
+    // Parse markdown for assistant messages, escape for user messages
+    const renderedContent = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+    messageEl.innerHTML = "\n      <div class=\"message-content\">\n        ".concat(attachmentsHTML, "\n        <div class=\"message-bubble\">").concat(renderedContent, "</div>\n        <div class=\"message-time\">").concat(formattedTime, "</div>\n      </div>\n    ");
+
+    // Bind image click handlers for expansion
+    if (messageData && messageData.attachments) {
+      messageEl.querySelectorAll(".message-attachment-name.clickable").forEach(el => {
+        el.addEventListener("click", e => {
+          e.stopPropagation();
+          const imageSrc = el.getAttribute("data-image-src");
+          const imageAlt = el.getAttribute("data-image-alt");
+          if (imageSrc) {
+            this.showExpandedImage(imageSrc, imageAlt);
+          }
         });
-        input.addEventListener("input", function () {
-          sendBtn.disabled = !input.value.trim();
+      });
+    }
+    messagesContainer.appendChild(messageEl);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+
+  // Sync messages from shared array, using same DOM structure as TextChatScreen
+  _syncMessages(messages) {
+    if (!this.container) return;
+    const messagesContainer = this.container.querySelector("#chat-messages");
+    if (!messagesContainer) return;
+
+    // Remove welcome message if there are any messages
+    if (messages.length > 0) {
+      const welcome = messagesContainer.querySelector(".chat-welcome");
+      if (welcome) welcome.remove();
+    }
+
+    // Get existing message elements
+    const existingMessages = messagesContainer.querySelectorAll("[data-message-id]");
+    const existingIds = new Set(Array.from(existingMessages).map(el => el.getAttribute("data-message-id")));
+
+    // Add or update messages
+    messages.forEach(msg => {
+      const msgId = String(msg.id);
+
+      // Handle TTS for new bot messages
+      if (msg.sender !== "user" && !this.playedMessageIds.has(msgId) && !msg.isStreaming && !msg.isProcessing && msg.content) {
+        this.playedMessageIds.add(msgId);
+        this.audioQueue.push(msg.content);
+        this.playNextInQueue();
+      }
+      if (existingIds.has(msgId)) {
+        // Update existing message
+        const existingEl = messagesContainer.querySelector("[data-message-id=\"".concat(msgId, "\"]"));
+        if (existingEl) {
+          const bubble = existingEl.querySelector(".message-bubble");
+          if (bubble) {
+            // Parse markdown for assistant messages, escape for user messages
+            const content = msg.content || "";
+            const isUserMessage = msg.sender === "user";
+            bubble.innerHTML = !isUserMessage ? this._parseMarkdown(content) : this._escapeHtml(content);
+          }
+
+          // Update attachments if they exist
+          const messageContent = existingEl.querySelector(".message-content");
+          if (messageContent && msg.attachments && msg.attachments.length > 0) {
+            let attachmentsHTML = "\n              <div class=\"message-attachments\">\n                ".concat(msg.attachments.map((attachment, index) => {
+              var _attachment$metadata4, _attachment$metadata5, _attachment$metadata6;
+              const displayName = ((_attachment$metadata4 = attachment.metadata) === null || _attachment$metadata4 === void 0 ? void 0 : _attachment$metadata4.name) || ((_attachment$metadata5 = attachment.metadata) === null || _attachment$metadata5 === void 0 ? void 0 : _attachment$metadata5.filename) || "Unknown file";
+              const isImage = attachment.type === "image";
+              const imageSrc = isImage && attachment.data ? "data:".concat(attachment.mime_type, ";base64,").concat(attachment.data) : null;
+              return "\n                    <div class=\"message-attachment ".concat(isImage ? "image" : "pdf", "\" data-attachment-index=\"").concat(index, "\">\n                      <span class=\"message-attachment-icon\">\n                        ").concat(isImage ? "🖼️" : "📄", "\n                      </span>\n                      <div class=\"message-attachment-info\">\n                        <div \n                          class=\"message-attachment-name ").concat(isImage ? "clickable" : "", "\"\n                          ").concat(isImage && imageSrc ? "data-image-src=\"".concat(imageSrc, "\" data-image-alt=\"").concat(displayName, "\"") : "", "\n                          style=\"cursor: ").concat(isImage ? "pointer" : "default", ";\"\n                        >\n                          ").concat(this._escapeHtml(displayName), "\n                        </div>\n                        <div class=\"message-attachment-size\">\n                          ").concat(this.formatFileSize(((_attachment$metadata6 = attachment.metadata) === null || _attachment$metadata6 === void 0 ? void 0 : _attachment$metadata6.size) || 0), " \u2022 ").concat(this.getFileTypeDisplay(attachment.mime_type), "\n                        </div>\n                      </div>\n                    </div>\n                  ");
+            }).join(""), "\n              </div>\n            ");
+
+            // Insert or update attachments
+            const existingAttachments = messageContent.querySelector(".message-attachments");
+            if (existingAttachments) {
+              existingAttachments.outerHTML = attachmentsHTML;
+            } else {
+              messageContent.insertAdjacentHTML("afterbegin", attachmentsHTML);
+            }
+
+            // Re-bind image click handlers
+            messageContent.querySelectorAll(".message-attachment-name.clickable").forEach(el => {
+              // Remove existing listeners by cloning
+              const newEl = el.cloneNode(true);
+              el.parentNode.replaceChild(newEl, el);
+              newEl.addEventListener("click", e => {
+                e.stopPropagation();
+                const imageSrc = newEl.getAttribute("data-image-src");
+                const imageAlt = newEl.getAttribute("data-image-alt");
+                if (imageSrc) {
+                  this.showExpandedImage(imageSrc, imageAlt);
+                }
+              });
+            });
+          }
+
+          // Update classes based on message state
+          if (msg.isStreaming) {
+            existingEl.classList.add("streaming");
+          } else {
+            existingEl.classList.remove("streaming");
+          }
+          if (msg.isError) {
+            existingEl.classList.add("error");
+          }
+        }
+      } else {
+        // Add new message
+        this.addMessage(msg.content || "", msg.sender === "user", msg);
+      }
+    });
+
+    // Remove messages that are no longer in the array
+    existingMessages.forEach(el => {
+      const msgId = el.getAttribute("data-message-id");
+      const exists = messages.some(msg => String(msg.id) === msgId);
+      if (!exists) {
+        el.remove();
+      }
+    });
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  _escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Parse markdown to HTML
+  _parseMarkdown(text) {
+    if (!text || typeof text !== 'string') return '';
+    let html = text;
+
+    // Escape HTML first to prevent XSS
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    // Split into lines for processing
+    const lines = html.split('\n');
+    const processedLines = [];
+    let inList = false;
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+
+      // Check for headers first (#, ##, ###, etc.)
+      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+      if (headerMatch) {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        const level = headerMatch[1].length;
+        const headerText = headerMatch[2];
+        // Process markdown inside header
+        let processedHeader = headerText;
+        processedHeader = processedHeader.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        processedHeader = processedHeader.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        processedLines.push("<h".concat(level, ">").concat(processedHeader, "</h").concat(level, ">"));
+        continue;
+      }
+
+      // Check if this is a list item (before processing bold/italic)
+      const listMatch = line.match(/^[\s]*[-*]\s+(.+)$/);
+      if (listMatch) {
+        // Process markdown inside list item
+        let listContent = listMatch[1];
+
+        // Bold: **text** (must be processed before italic)
+        listContent = listContent.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        listContent = listContent.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        listContent = listContent.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        listContent = listContent.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        if (!inList) {
+          processedLines.push('<ul>');
+          inList = true;
+        }
+        processedLines.push("<li>".concat(listContent, "</li>"));
+      } else {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+
+        // Skip empty lines (they'll become <br> later)
+        if (line.trim() === '') {
+          processedLines.push('');
+          continue;
+        }
+
+        // Process markdown in non-list lines
+        // Bold: **text** (must be processed before italic)
+        line = line.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        line = line.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        line = line.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        line = line.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+
+        // Inline code: `code`
+        line = line.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+        // Links: [text](url)
+        line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        processedLines.push(line);
+      }
+    }
+    if (inList) {
+      processedLines.push('</ul>');
+    }
+
+    // Join lines with <br> and return
+    html = processedLines.join('<br>');
+    return html;
+  }
+
+  // Show expanded image modal (mirrors TextChatScreen)
+  showExpandedImage(src, alt) {
+    const existingModal = document.querySelector(".expanded-image-modal");
+    if (existingModal) {
+      existingModal.remove();
+    }
+    const modal = document.createElement("div");
+    modal.className = "expanded-image-modal";
+    modal.innerHTML = "\n      <div class=\"expanded-image-container\">\n        <button class=\"expanded-image-close\" title=\"Close\">\u2715</button>\n        <img src=\"".concat(src, "\" alt=\"").concat(alt || "Image", "\" class=\"expanded-image\" />\n        <div class=\"expanded-image-caption\">").concat(this._escapeHtml(alt || "Image preview"), "</div>\n      </div>\n    ");
+    const closeModal = e => {
+      if (e) e.stopPropagation();
+      modal.remove();
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+    const handleClickOutside = e => {
+      if (!e.target.closest(".expanded-image-container")) {
+        closeModal(e);
+      }
+    };
+    modal.querySelector(".expanded-image-close").addEventListener("click", closeModal);
+    modal.addEventListener("click", e => {
+      if (e.target === modal) {
+        closeModal(e);
+      }
+    });
+    document.addEventListener("mousedown", handleClickOutside);
+    document.body.appendChild(modal);
+  }
+  _applyStyles() {
+    // Check if styles already applied
+    if (document.getElementById('audio-chat-screen-styles')) return;
+    const style = document.createElement("style");
+    style.id = 'audio-chat-screen-styles';
+    style.textContent = "\n      .audio-chat-screen {\n        flex: 1;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        overflow: hidden;\n        background: linear-gradient(180deg, white 10%, #E1EFCC );\n      }\n\n      .audio-chat-screen .chat-header {\n        color: ".concat(this.primaryColor, ";\n        padding: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        flex-shrink: 0;\n        background: transparent;\n        z-index: 20;\n      }\n\n      .audio-chat-screen .chat-header-content {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        flex: 1;\n      }\n\n      .audio-chat-screen .chat-back {\n        background: ").concat(this.primaryColor, ";\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n        margin-right: 8px;\n      }\n\n      .bottom-inputs {\n        width: 100%;\n        padding: 20px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        z-index: 10;\n        flex-shrink: 0;\n      }\n\n      .bottom-inputs button {\n        border: none;\n        border-radius: 9999px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      #record-button {\n        width: 50px;\n        height: 50px;\n        background: ").concat(this.primaryColor, ";\n        color: #ffffff;\n      }\n\n      #record-button.recording {\n        background: #ef4444;\n        animation: pulse-ring 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;\n      }\n\n      @keyframes pulse-ring {\n        0% {\n          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n        }\n        70% {\n          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);\n        }\n        100% {\n          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);\n        }\n      }\n\n      #record-button:hover {\n        transform: translateY(-2px) scale(1.03);\n        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      #record-button:active {\n        transform: translateY(0) scale(0.97);\n        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);\n      }\n\n      #attachment-button {\n        width: 50px;\n        height: 50px;\n        background: #ffffff;\n        color: ").concat(this.primaryColor, ";\n        border: 1px solid rgba(148, 163, 184, 0.5);\n      }\n\n      #attachment-button:hover {\n        transform: translateY(-2px) scale(1.03);\n        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      #attachment-button:active {\n        transform: translateY(1px);\n        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);\n      }\n      .audio-chat-screen .chat-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.2);\n        backdrop-filter: blur(10px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .audio-chat-screen .chat-header-text {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .audio-chat-screen .chat-title {\n        font-weight: 600;\n        font-size: 20px;\n      }\n\n      .audio-chat-screen .chat-status {\n        font-size: 12px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .audio-chat-screen .chat-close {\n        background: ").concat(this.primaryColor, ";\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n\n      .audio-chat-screen .audio-chat-content {\n        flex: 1;\n        height:100%;\n        display: flex;\n        flex-direction: column;\n        padding: 20px;\n        gap: 20px;\n      }\n\n      .audio-chat-screen .audio-status {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 40px 20px;\n        background: white;\n        border-radius: 16px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .audio-chat-screen .audio-status-icon {\n        font-size: 48px;\n        margin-bottom: 12px;\n        transition: transform 0.3s;\n      }\n\n      .audio-chat-screen .audio-status-text {\n        font-size: 16px;\n        font-weight: 500;\n        color: #475569;\n      }\n\n      /* Message list styles mirrored from TextChatScreen */\n      .audio-chat-screen .chat-messages {\n        flex: 1;\n        padding: 20px;\n        overflow-y: auto;\n        overflow-x: hidden; /* Prevent horizontal scroll */\n        min-height: 0; /* Crucial for nested flex scrolling */\n        background: transparent;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .audio-chat-screen .chat-messages::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      .audio-chat-screen .chat-messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      .audio-chat-screen .chat-messages::-webkit-scrollbar-thumb {\n        background: #cbd5e1;\n        border-radius: 3px;\n      }\n\n      .audio-chat-screen .file-attachments-container {\n        padding: 8px 12px;\n        background: transparent;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        max-height: 120px;\n        overflow-y: auto;\n        position: relative;\n        z-index: 5;\n      }\n\n      .audio-chat-screen .file-attachment {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 6px 10px;\n        background: #f1f5f9;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        font-size: 12px;\n        max-width: 200px;\n      }\n\n      .audio-chat-screen .file-thumbnail {\n        width: 40px;\n        height: 40px;\n        border-radius: 6px;\n        overflow: hidden;\n        flex-shrink: 0;\n        background: #e2e8f0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .audio-chat-screen .file-thumbnail-image {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .audio-chat-screen .file-attachment-info {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .audio-chat-screen .file-attachment-name {\n        font-weight: 500;\n        color: #1e293b;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: 120px;\n      }\n\n      .audio-chat-screen .file-attachment-size {\n        font-size: 11px;\n        color: #64748b;\n      }\n\n      .audio-chat-screen .file-attachment-remove {\n        background: transparent;\n        border: none;\n        color: #64748b;\n        cursor: pointer;\n        padding: 4px;\n        border-radius: 4px;\n        font-size: 16px;\n        line-height: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n        flex-shrink: 0;\n      }\n\n      .audio-chat-screen .file-attachment-remove:hover {\n        background: #fee2e2;\n        color: #dc2626;\n      }\n\n      .audio-chat-screen .chat-welcome {\n        text-align: center;\n        padding: 100px 20px;\n        color: #64748b;\n      }\n\n      .audio-chat-screen .chat-welcome .welcome-icon {\n        font-size: 48px;\n        margin-bottom: 12px;\n      }\n\n      .audio-chat-screen .welcome-text {\n        font-size: 15px;\n        font-weight: 500;\n        color: #475569;\n      }\n\n      .audio-chat-screen .chat-message {\n        display: flex;\n        gap: 8px;\n        animation: messageSlide 0.3s ease-out;\n      }\n\n      @keyframes messageSlide {\n        from {\n          opacity: 0;\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .audio-chat-screen .chat-message.user {\n        flex-direction: row-reverse;\n      }\n\n      .audio-chat-screen .message-content {\n        max-width: 75%;\n      }\n\n      .audio-chat-screen .message-bubble {\n        padding: 12px 16px;\n        border-radius: 16px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .audio-chat-screen .chat-message.user .message-bubble {\n        background: #e9f5d7;\n        color: ").concat(this.primaryColor, ";\n        border-bottom-right-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      .audio-chat-screen .chat-message.bot .message-bubble {\n        background: white;\n        color: #1e293b;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      /* Markdown styles */\n      .audio-chat-screen .message-bubble strong {\n        font-weight: 600;\n  color: inherit;\n      }\n\n      .audio-chat-screen .message-bubble em {\n        font-style: italic;\n      }\n\n      .audio-chat-screen .message-bubble ul {\n  margin: 0px 0;\n  padding-left: 20px;\n  list-style-type: disc;\n  margin-bottom:0px;\n  margin-top:5px;\n      }\n\n      .audio-chat-screen .message-bubble li {\n  margin: 0;\n  line-height: 1.1;\n  padding-left: 3px;\n      }\n\n      .audio-chat-screen .message-bubble h1,\n      .audio-chat-screen .message-bubble h2,\n      .audio-chat-screen .message-bubble h3,\n      .audio-chat-screen .message-bubble h4,\n      .audio-chat-screen .message-bubble h5,\n      .audio-chat-screen .message-bubble h6 {\n  margin: 0px 0 0px 0;\n  font-weight: 600;\n  color: inherit;\n  line-height: 1.3;\n      }\n\n      .audio-chat-screen .message-bubble h1 {\n        font-size: 1.5em;\n      }\n\n      .audio-chat-screen .message-bubble h2 {\n        font-size: 1.3em;\n      }\n\n      .audio-chat-screen .message-bubble h3 {\n        font-size: 1.15em;\n      }\n\n      .audio-chat-screen .message-bubble h4 {\n        font-size: 1.05em;\n      }\n\n      .audio-chat-screen .message-bubble h5 {\n        font-size: 1em;\n      }\n\n      .audio-chat-screen .message-bubble h6 {\n        font-size: 0.95em;\n      }\n\n      .audio-chat-screen .message-bubble code {\n        background: rgba(0, 0, 0, 0.05);\n        padding: 2px 6px;\n        border-radius: 4px;\n        font-family: 'Courier New', Courier, monospace;\n        font-size: 0.9em;\n      }\n\n      .audio-chat-screen .message-bubble a {\n        color: ").concat(this.primaryColor, ";\n        text-decoration: underline;\n      }\n\n      .audio-chat-screen .message-bubble a:hover {\n        opacity: 0.8;\n      }\n      \n      .audio-chat-screen .message-bubble br {\n  line-height: 0.1; /* Adjust between 0 and 1 */\n}\n\n\n      .audio-chat-screen .message-time {\n        font-size: 10px;\n        color: #94a3b8;\n        margin-top: 4px;\n        text-align: right;\n      }\n\n      /* Message Attachments Styles (mirrored from TextChatScreen) */\n      .audio-chat-screen .message-attachments {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        margin-bottom: 8px;\n      }\n\n      .audio-chat-screen .message-attachment {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 12px;\n        background: #f1f5f9;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        font-size: 12px;\n        max-width: 100%;\n      }\n\n      .audio-chat-screen .message-attachment.image {\n        background: #f8fafc;\n      }\n\n      .audio-chat-screen .message-attachment.pdf {\n        background: #fef2f2;\n      }\n\n      .audio-chat-screen .message-attachment-icon {\n        font-size: 20px;\n        flex-shrink: 0;\n      }\n\n      .audio-chat-screen .message-attachment-info {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .audio-chat-screen .message-attachment-name {\n        font-weight: 500;\n        color: #1e293b;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .audio-chat-screen .message-attachment-name.clickable:hover {\n        color: ").concat(this.primaryColor, ";\n        text-decoration: underline;\n      }\n\n      .audio-chat-screen .message-attachment-size {\n        font-size: 11px;\n        color: #64748b;\n      }\n\n      .audio-chat-screen .audio-messages {\n        flex: 1;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        min-height: 200px;\n      }\n\n      .audio-chat-screen .audio-message {\n        display: flex;\n        gap: 8px;\n        animation: messageSlide 0.3s ease-out;\n      }\n\n      .audio-chat-screen .audio-message.user {\n        flex-direction: row-reverse;\n      }\n\n      .audio-chat-screen .audio-message-content {\n        max-width: 75%;\n      }\n\n      .audio-chat-screen .audio-message-bubble {\n        padding: 12px 16px;\n        border-radius: 16px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .audio-chat-screen .audio-message.user .audio-message-bubble {\n        background: ").concat(this.primaryColor, ";\n        color: white;\n        border-bottom-right-radius: 4px;\n      }\n\n      .audio-chat-screen .audio-message.assistant .audio-message-bubble {\n        background: white;\n        color: #1e293b;\n        border-bottom-left-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      }\n\n      @keyframes messageSlide {\n        from {\n          opacity: 0;\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      .audio-chat-screen .audio-messages::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      .audio-chat-screen .audio-messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      .audio-chat-screen .audio-messages::-webkit-scrollbar-thumb {\n        background: #cbd5e1;\n        border-radius: 3px;\n      }\n\n      .audio-chat-screen .audio-controls {\n        position: absolute;\n        left: 50%;\n        bottom: 20px;\n        transform: translateX(-50%);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none; /* let only the button receive events */\n      }\n\n      .audio-chat-screen .audio-controls .audio-record-btn {\n        pointer-events: auto;\n      }\n\n      .audio-chat-screen .audio-record-btn {\n        width: 80px;\n        height: 80px;\n        border-radius: 50%;\n        background: ").concat(this.primaryColor, ";\n        color: white;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        transition: all 0.3s;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .audio-chat-screen .audio-record-btn:hover {\n        transform: scale(1.05);\n        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .audio-chat-screen .audio-record-btn:active {\n        transform: scale(0.95);\n      }\n\n      .audio-chat-screen .audio-record-btn.recording {\n        background: #ef4444;\n        animation: pulse-record 1.5s infinite;\n      }\n\n      @keyframes pulse-record {\n        0%, 100% {\n          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);\n        }\n        50% {\n          box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6);\n        }\n      }\n\n      .audio-chat-screen .audio-record-btn span {\n        font-size: 11px;\n        font-weight: 500;\n        margin-top: 4px;\n      }\n\n      .audio-chat-screen .audio-record-btn svg {\n        width: 32px;\n        height: 32px;\n      }\n\n      @media (max-width: 768px) {\n        .audio-chat-screen .audio-record-btn {\n          width: 100px;\n          height: 100px;\n        }\n      }\n\n      /* Expanded Image Modal Styles */\n      .expanded-image-modal {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.8);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10000;\n        animation: fadeIn 0.2s ease;\n      }\n\n      @keyframes fadeIn {\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n\n      .expanded-image-container {\n        position: relative;\n        max-width: 90%;\n        max-height: 90vh;\n        background: #fff;\n        border-radius: 8px;\n        overflow: hidden;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n        animation: scaleIn 0.2s ease;\n        display: flex;\n        flex-direction: column;\n      }\n\n      @keyframes scaleIn {\n        from {\n          transform: scale(0.9);\n          opacity: 0;\n        }\n        to {\n          transform: scale(1);\n          opacity: 1;\n        }\n      }\n\n      .expanded-image-close {\n        position: absolute;\n        top: 12px;\n        right: 12px;\n        background: rgba(0, 0, 0, 0.6);\n        border: none;\n        color: white;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 18px;\n        z-index: 1;\n        transition: all 0.2s;\n      }\n\n      .expanded-image-close:hover {\n        background: rgba(0, 0, 0, 0.8);\n        transform: scale(1.1);\n      }\n\n      .expanded-image {\n        max-width: 100%;\n        max-height: calc(90vh - 60px);\n        object-fit: contain;\n        display: block;\n      }\n\n      .expanded-image-caption {\n        padding: 12px 16px;\n        background: #fff;\n        color: #1e293b;\n        font-size: 14px;\n        text-align: center;\n        border-top: 1px solid #e2e8f0;\n      }\n    ");
+    document.head.appendChild(style);
+  }
+}
+
+class ChatWidget {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.title = options.title || "Chat Assistant";
+    this.placeholder = options.placeholder || "Type your message...";
+    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 || "";
+    this.supabaseToken = options.supabaseToken || "";
+    this.userInfo = options.userInfo || {};
+    this.mcpServerUrl = options.mcpServerUrl || "http://localhost:8010/mcp";
+    // 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 _objectSpread2(_objectSpread2(_objectSpread2({
+        "Content-Type": "application/json"
+      }, authToken && {
+        Authorization: "Bearer ".concat(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 _ref => {
+      let {
+        userId,
+        userUuid
+      } = _ref;
+      try {
+        const params = new URLSearchParams();
+        if (userUuid) params.append("user_uuid", userUuid);
+        const url = "".concat(this.langgraphUrl, "/history?").concat(params.toString());
+        const response = await fetch(url, {
+          method: "GET",
+          headers: this.getHeaders()
         });
-        var send = function send() {
-          var text = input.value.trim();
-          if (!text) return;
-          _this._addMessage(text, true);
-          input.value = "";
-          sendBtn.disabled = true;
-          _this._showTypingIndicator();
-          setTimeout(function () {
-            _this._hideTypingIndicator();
-            _this._addMessage("Thanks for your message! You said: \"".concat(text, "\""), false);
-          }, 1000 + Math.random() * 1000);
+        if (!response.ok) return {
+          threads: []
+        };
+        return await response.json();
+      } catch (e) {
+        console.error("Error fetching threads", e);
+        return {
+          threads: []
         };
-        sendBtn.addEventListener("click", send);
-        input.addEventListener("keypress", function (e) {
-          if (e.key === "Enter" && !sendBtn.disabled) send();
-        });
       }
+    });
+    this.setUserInfoFromDirectChatLogin = options.setUserInfoFromDirectChatLogin || (() => {});
+    this.setUserThreads = options.setUserThreads || (() => {});
+    this.setUserThreadsMetaData = options.setUserThreadsMetaData || (() => {});
+    this.languageOptions = [{
+      label: "Assamese",
+      value: "as"
     }, {
-      key: "_addMessage",
-      value: function _addMessage(text, isUser) {
-        var messagesContainer = this.container.querySelector("#chat-messages");
-        var welcome = messagesContainer.querySelector(".chat-welcome");
-        if (welcome) welcome.remove();
-        var messageEl = document.createElement("div");
-        messageEl.className = "chat-message ".concat(isUser ? "user" : "bot");
-        messageEl.innerHTML = "<div class=\"message-bubble\">".concat(this._escapeHtml(text), "</div>");
-        messagesContainer.appendChild(messageEl);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-      }
+      label: "Bengali",
+      value: "bn"
     }, {
-      key: "_showTypingIndicator",
-      value: function _showTypingIndicator() {
-        var messagesContainer = this.container.querySelector("#chat-messages");
-        var indicator = document.createElement("div");
-        indicator.className = "chat-message bot";
-        indicator.id = "typing-indicator";
-        indicator.innerHTML = "\n      <div class=\"typing-indicator\">\n        <div class=\"typing-dot\"></div>\n        <div class=\"typing-dot\"></div>\n        <div class=\"typing-dot\"></div>\n      </div>\n    ";
-        messagesContainer.appendChild(indicator);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-      }
+      label: "Dogri",
+      value: "doi"
     }, {
-      key: "_hideTypingIndicator",
-      value: function _hideTypingIndicator() {
-        var indicator = this.container.querySelector("#typing-indicator");
-        if (indicator) indicator.remove();
-      }
+      label: "English",
+      value: "en"
+    }, {
+      label: "Gujarati",
+      value: "gu"
     }, {
-      key: "_escapeHtml",
-      value: function _escapeHtml(text) {
-        var div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
+      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() {
+    // Create container
+    this.container = document.createElement("div");
+    this.container.id = "chat-widget-container";
+    this.container.innerHTML = "\n      <div class=\"chat-widget-minimized\" id=\"chat-toggle\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"></path>\n        </svg>\n      </div>\n      <div class=\"chat-widget-expanded\" id=\"chat-expanded\">\n        <div class=\"chat-screen-container\" id=\"chat-screen-container\">\n          <!-- Screens will be rendered here -->\n        </div>\n        <div class=\"chat-drawer-overlay\" id=\"chat-drawer-overlay\">\n          <div class=\"chat-drawer\">\n            <div class=\"drawer-header\">\n              <div class=\"drawer-title\">Menu</div>\n            </div>\n            <div class=\"drawer-content\">\n              <button class=\"drawer-item\" id=\"drawer-new-chat\">\n                New Chat\n              </button>       \n              <div class=\"language-selector-container\">\n                 <div class=\"custom-select\" id=\"language-selector\">\n                   <div class=\"select-trigger\" id=\"language-trigger\">\n                     <span id=\"selected-language-text\">English</span>\n                     <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>\n                   </div>\n                   <div class=\"select-options\" id=\"language-options\"></div>\n                 </div>\n              </div>\n              <div class=\"drawer-divider\" style=\"height: 1px; background: #e2e8f0; margin: 8px 0;\"></div>\n              \n              <div id=\"drawer-threads\" class=\"threads-container\">\n                <!-- Threads will be rendered here -->\n                <div class=\"threads-loading\">Loading history...</div>\n              </div>\n            </div>\n            \n          </div>\n          <div class=\"drawer-backdrop\" id=\"drawer-backdrop\"></div>\n        </div>\n      </div>\n    ";
+    document.body.appendChild(this.container);
+    this._applyStyles();
+    this._initScreens();
+    this._renderScreen();
+    this._populateLanguageOptions();
+    this._bindEvents();
+  }
+  _applyStyles() {
+    const style = document.createElement("style");
+    style.textContent = "\n      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');\n      \n      #chat-widget-container {\n        position: fixed;\n        bottom: 24px;\n        right: 24px;\n        z-index: 10000;\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n      }\n.text-chat-screen {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .chat-header {\n        color: ".concat(this.primaryColor, ";\n        padding: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .chat-header-content {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        flex: 1;\n      }\n\n      .chat-back {\n        background: transparent;\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n        margin-right: 8px;\n      }\n\n      .chat-back:hover {\n        background: rgba(255, 255, 255, 0.15);\n      }\n\n      .chat-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.2);\n        backdrop-filter: blur(10px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .chat-header-text {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      \n      .chat-title {\n        font-weight: 600;\n        font-size: 20px;\n      }\n\n      .chat-status {\n        font-size: 12px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .chat-close {\n        background: ").concat(this.primaryColor, ";\n        border: none;\n        color: white;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s;\n      }\n\n      .chat-widget-minimized {\n        width: 60px;\n        height: 60px;\n        border-radius: 50%;\n        background: ").concat(this.primaryColor, ";\n        color: white;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      .chat-widget-minimized:hover {\n        transform: scale(1.1);\n      }\n\n      @keyframes pulse {\n        0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); }\n        50% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6); }\n      }\n\n      .chat-widget-expanded {\n        position: relative;\n        width: 480px;\n        height: 640px;\n        background: white;\n        border-radius: 16px;\n        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n        display: none;\n        flex-direction: column;\n        overflow: hidden;\n        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      @keyframes slideUp {\n        from {\n          opacity: 0;\n          transform: translateY(20px) scale(0.95);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0) scale(1);\n        }\n      }\n\n      .chat-widget-expanded.visible {\n        display: flex;\n      }\n\n      .chat-screen-container {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      /* Welcome Screen Styles */\n      .welcome-screen {\n        flex: 1;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        justify-content: start;\n        background: linear-gradient(180deg, white 10%, #E1EFCC );\n        padding: 0px;\n      }\n\n      .welcome-content {\n        width: 80%;\n        margin: auto;\n        text-align: center;\n        padding-top: 20px;\n      }\n\n      .welcome-icon {\n        font-size: 64px;\n        margin-bottom: 16px;\n        animation: bounce 2s infinite;\n      }\n\n      @keyframes bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-10px); }\n      }\n\n      .welcome-title {\n        font-size: 24px;\n        font-weight: 600;\n        color: #1e293b;\n        margin: 0 0 8px 0;\n      }\n\n      .welcome-subtitle {\n        font-size: 14px;\n        color: #64748b;\n        margin: 0 0 32px 0;\n      }\n\n      .welcome-options {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .welcome-option-btn {\n        background: white;\n        border: 2px solid #e2e8f0;\n        border-radius: 12px;\n        padding: 16px;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        cursor: pointer;\n        transition: all 0.2s;\n        text-align: left;\n        width: 100%;\n      }\n\n      .welcome-option-btn:hover {\n        border-color: ").concat(this.primaryColor, ";\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        transform: translateY(-2px);\n      }\n\n      .option-icon {\n        font-size: 32px;\n        flex-shrink: 0;\n      }\n\n      .option-content {\n        flex: 1;\n      }\n\n      .option-title {\n        font-size: 16px;\n        font-weight: 600;\n        color: #1e293b;\n        margin-bottom: 4px;\n      }\n\n      .option-description {\n        font-size: 13px;\n        color: #64748b;\n      }\n\n      .welcome-option-btn svg {\n        color: #94a3b8;\n        flex-shrink: 0;\n      }\n\n      .welcome-option-btn:hover svg {\n        color: ").concat(this.primaryColor, ";\n      }\n.gradient-sphere-welcome-screen {\n  width: 200px !important;\n  height: 200px !important;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #0a0d120f 0%, #85bc31 50%, #d0f19e 100%)\n    !important;\n  position: relative;\n  margin: 20px auto 30px auto;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n  animation: float 3s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n.sphere-highlight {\n  position: absolute;\n  top: 20%;\n  right: 20%;\n  width: 35px;\n  height: 35px;\n  background: radial-gradient(\n    circle,\n    rgba(255, 255, 255, 0.8) 0%,\n    transparent 70%\n  );\n  border-radius: 50%;\n  filter: blur(1px);\n}\n\n@keyframes float {\n  0%,\n  100% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.welcome-text {\n  max-width: 400px;\n  margin-bottom: 30px;\n  flex-shrink: 0;\n  text-align: left;\n}\n\n.greeting {\n  font-size: 24px;\n  font-weight: 600;\n  color: #1a5c4b;\n  margin: 0 0 16px 0;\n}\n\n.intro {\n  font-size: 18px;\n  font-weight: 500;\n  color: #1a5c4b;\n  margin: 0 0 12px 0;\n  line-height: 1.4;\n}\n\n\n.action-buttons {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n  margin-top: auto;\n  /* padding-top: 10px; */\n  padding-bottom: 20px;\n  justify-content: center;\n  width: 100%;\n  align-self: center;\n}\n\n.primary-button {\n  background: #1a5c4b;\n  display:flex;\n  color: white;\n  border: none;\n  padding: 16px 32px;\n  border-radius: 25px;\n  font-size: 16px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 12px rgba(26, 92, 75, 0.3);\n}\n\n.primary-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(26, 92, 75, 0.4);\n}\n\n      @media (max-width: 768px) {\n        #chat-widget-container {\n          bottom: 16px;\n          right: 16px;\n        }\n\n        .chat-widget-expanded {\n          width: 100vw;\n          height: 100vh;\n          border-radius: 0;\n          max-width: 100vw;\n          max-height: 100vh;\n          position: fixed;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n        }\n\n        .chat-widget-expanded.visible {\n          display: flex;\n        }\n\n        .welcome-content {\n          max-width: 100%;\n          padding-top: 40px;\n        }\n\n        .chat-drawer {\n          width: 85% !important; /* Wider drawer on mobile */\n        }\n      }\n\n      /* Drawer Styles */\n      .chat-drawer-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 2000;\n        display: flex;\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      .chat-drawer-overlay.visible {\n        pointer-events: auto;\n        visibility: visible;\n      }\n\n      .chat-drawer {\n        width: 65%;\n        background: white;\n        height: 100%;\n        transform: translateX(-100%);\n        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        display: flex;\n        flex-direction: column;\n        z-index: 2002;\n        box-shadow: 4px 0 24px rgba(0,0,0,0.1);\n      }\n\n      .chat-drawer-overlay.visible .chat-drawer {\n        transform: translateX(0);\n      }\n\n      .drawer-backdrop {\n        flex: 1;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        backdrop-filter: blur(2px);\n        cursor: pointer;\n      }\n\n      .chat-drawer-overlay.visible .drawer-backdrop {\n        opacity: 1;\n      }\n\n      .drawer-header {\n        padding: 24px;\n        border-bottom: 1px solid #f1f5f9;\n      }\n\n      .drawer-title {\n        font-size: 20px;\n        font-weight: 600;\n        color: ").concat(this.primaryColor, ";\n      }\n\n      .drawer-content {\n        flex: 1;\n        padding: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        overflow-y: auto;\n      }\n\n      .drawer-item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 12px 16px;\n        background: transparent;\n        border: none;\n        border-radius: 8px;\n        color: #475569;\n        font-size: 15px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: all 0.2s;\n        text-align: left;\n      }\n\n      .drawer-item:hover {\n        background: #f1f5f9;\n        color: ").concat(this.primaryColor, ";\n      }\n\n      .drawer-item svg {\n        opacity: 0.7;\n      }\n\n      .drawer-item:hover svg {\n        opacity: 1;\n        color: ").concat(this.primaryColor, ";\n      }\n\n      .drawer-footer {\n        padding: 16px 24px;\n        border-top: 1px solid #f1f5f9;\n      }\n\n      .drawer-version {\n        font-size: 12px;\n        color: #94a3b8;\n        text-align: center;\n      }\n\n      /* Language Selector Styles */\n      .language-selector-container {\n        margin-top: 8px;\n        margin-bottom: 8px;\n      }\n\n      .language-label {\n        font-size: 11px;\n        font-weight: 600;\n        color: #94a3b8;\n        margin-bottom: 6px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        padding-left: 4px;\n      }\n\n      .custom-select {\n        position: relative;\n        width: 100%;\n        user-select: none;\n      }\n\n      .select-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 10px 12px;\n        background: #f8fafc;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n        font-size: 14px;\n        color: #334155;\n      }\n\n      .select-trigger:hover {\n        border-color: ").concat(this.primaryColor, ";\n        background: white;\n      }\n\n      .select-trigger.active {\n        border-color: ").concat(this.primaryColor, ";\n        background: white;\n        box-shadow: 0 0 0 2px rgba(26, 92, 75, 0.1);\n      }\n\n      .select-options {\n        position: absolute;\n        top: calc(100% + 4px);\n        left: 0;\n        right: 0;\n        background: white;\n        border: 1px solid #e2e8f0;\n        border-radius: 8px;\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n        max-height: 200px;\n        overflow-y: auto;\n        z-index: 50;\n        display: none;\n        opacity: 0;\n        transform: translateY(-10px);\n        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      .select-options.open {\n        display: block;\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      .select-option {\n        padding: 10px 12px;\n        font-size: 14px;\n        color: #334155;\n        cursor: pointer;\n        transition: all 0.1s;\n      }\n\n      .select-option:hover {\n        background: #f1f5f9;\n        color: ").concat(this.primaryColor, ";\n      }\n\n      .select-option.selected {\n        background: rgba(26, 92, 75, 0.08);\n        color: ").concat(this.primaryColor, ";\n        font-weight: 500;\n      }\n      \n      .chevron {\n        transition: transform 0.2s ease;\n        color: #94a3b8;\n      }\n      \n      .select-trigger.active .chevron {\n        transform: rotate(180deg);\n        color: ").concat(this.primaryColor, ";\n      }\n      \n      /* Thread List Styles */\n      .threads-container {\n        flex: 1;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        padding-top: 8px;\n      }\n      \n      .threads-loading {\n        padding: 16px;\n        text-align: center;\n        color: #94a3b8;\n        font-size: 13px;\n      }\n      \n      .thread-item {\n        display: flex;\n        flex-direction: column;\n        padding: 10px 12px;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n        text-align: left;\n        border: none;\n        background: transparent;\n        width: 100%;\n        color: #475569;\n      }\n      \n      .thread-item:hover {\n        background-color: #f1f5f9; /* action.hover */\n        color: ").concat(this.primaryColor, ";\n      }\n      \n      .thread-item.selected {\n        background-color: rgba(26, 92, 75, 0.08); /* action.selected */\n      }\n      \n      .thread-content {\n        font-size: 0.9rem;\n        color: #334155;\n        line-height: 1.3;\n        margin-bottom: 4px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        font-weight: 500;\n      }\n      \n      .thread-date {\n        font-size: 0.75rem;\n        font-weight: 600;\n        color: #94a3b8;\n      }\n      \n      .no-history {\n         padding: 16px;\n         text-align: center;\n         color: #94a3b8;\n         font-size: 14px;\n      }\n    ");
+    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");
       }
-    }]);
-  }(); // Export as UMD and ESM compatible
-  {
-    module.exports = ChatWidget;
+    });
+
+    // 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 = "\n    <main class=\"welcome-screen\">\n    <div class=\"chat-header\">\n          <div class=\"chat-header-content visible\">\n            <div class=\"chat-header-text\">\n              <div class=\"chat-title\">".concat(this.title, "</div>\n            </div>\n          </div>\n          <button class=\"chat-close\" id=\"text-chat-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n      <div >\n        <div class=\"welcome-content\">\n          <div class=\"gradient-sphere-welcome-screen\">\n            <div class=\"sphere-highlight\">\n            </div>\n          </div>\n          \n          <div class=\"welcome-text\">\n            <p class=\"greeting\">Hello!</p>\n            <p class=\"intro\">\n              We are your Krishi Vigyan Sahayak\u2014KVS, a companion to help with every farming question! Tell us, what do you want to know today?\n            </p>\n          </div>\n          \n          <div class=\"action-buttons\">\n          <button\n            class=\"primary-button !rounded-full\"\n            id=\"welcome-audio-btn\"\n          >\n            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>\n          </button>\n        </div>\n          \n          \n\n        </div>\n      </div>\n    </main>\n    ");
+
+    // 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();
+      });
+    }
   }
-})(chatWidget);
-var chatWidgetExports = chatWidget.exports;
-var chatWidget_default = /*@__PURE__*/getDefaultExportFromCjs(chatWidgetExports);
+  _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 => "\n        <div class=\"select-option ".concat(opt.value === this.selectedLanguage ? 'selected' : '', "\" data-value=\"").concat(opt.value, "\">\n            ").concat(opt.label, "\n        </div>\n    ")).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 !== null && user !== void 0 && 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 => {
+      var _thread$history$;
+      const isSelected = thread.thread_id === this.threadId; // Use current threadId
+
+      const threadItem = document.createElement('div');
+      threadItem.className = "thread-item ".concat(isSelected ? 'selected' : '');
+
+      // Get primary text (first user message)
+      const primaryText = ((_thread$history$ = thread.history[0]) === null || _thread$history$ === void 0 || (_thread$history$ = _thread$history$.values) === null || _thread$history$ === void 0 || (_thread$history$ = _thread$history$.messages[0]) === null || _thread$history$ === void 0 ? void 0 : _thread$history$.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 = "\n        <div class=\"thread-content\">".concat(displayText, "</div>\n        <div class=\"thread-date\">").concat(date, "</div>\n      ");
+      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: \"".concat(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] = _objectSpread2(_objectSpread2({}, 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) {
+    let contentBlocks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    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 {
+      var _currentAssistantMess;
+      // Get the latest checkpoint to resume from the latest state
+      const latestCheckpoint = await this.getLatestCheckpoint(this.threadId);
+      console.log("📤 Sending message to backend:", _objectSpread2({
+        input: {
+          messages: [{
+            id: "msg-".concat(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("".concat(this.langgraphUrl, "/threads/").concat(this.threadId, "/runs/stream"), {
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify(_objectSpread2({
+          input: {
+            messages: [{
+              id: "msg-".concat(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: ".concat(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) {
+                  var _this$messages$find;
+                  this._updateMessageInArray(assistantMessage.id, {
+                    content: currentMessage,
+                    additional_kwargs: currentAdditionalKwargs,
+                    isStreaming: false,
+                    isProcessing: false,
+                    hasAudioResponse: ((_this$messages$find = this.messages.find(m => m.id === assistantMessage.id)) === null || _this$messages$find === void 0 ? void 0 : _this$messages$find.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 !== null && data !== void 0 && data.audio_content ? "YES" : "NO",
+                hasResponseProcessor: data !== null && data !== void 0 && data.response_processor ? "YES" : "NO",
+                hasRunId: data !== null && data !== void 0 && data.run_id ? "YES" : "NO",
+                runId: (data === null || data === void 0 ? void 0 : 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) {
+                var _data$smart_router$fa, _data$smart_router$fa2;
+                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$fa = data.smart_router.farmer_profile) === null || _data$smart_router$fa === void 0 ? void 0 : _data$smart_router$fa.individualId,
+                  farmerName: (_data$smart_router$fa2 = data.smart_router.farmer_profile) === null || _data$smart_router$fa2 === void 0 ? void 0 : _data$smart_router$fa2.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 = _objectSpread2({}, 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) {
+                  var _action$web$parameter, _action$web$parameter2, _action$web$parameter3, _action$web$parameter4, _action$web$parameter5;
+                  let scrollToId = null;
+                  let navigationParams = {};
+                  if (action.web.parameters) {
+                    if (action.web.parameters.scrollTo) {
+                      scrollToId = action.web.parameters.scrollTo;
+                    }
+                    navigationParams = _objectSpread2({}, 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$parameter = action.web.parameters) === null || _action$web$parameter === void 0 ? void 0 : _action$web$parameter.schemeId) && action.web.parameters.schemeId !== "";
+                  let hasHelpName = null;
+                  if ((_action$web$parameter2 = action.web.parameters) !== null && _action$web$parameter2 !== void 0 && _action$web$parameter2.button_title) {
+                    hasHelpName = true;
+                  } else if ((_action$web$parameter3 = action.web.parameters) !== null && _action$web$parameter3 !== void 0 && _action$web$parameter3.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: _objectSpread2(_objectSpread2({}, navigationParams), hasHelpName && {
+                      name: ((_action$web$parameter4 = action.web.parameters) === null || _action$web$parameter4 === void 0 ? void 0 : _action$web$parameter4.button_title) || ((_action$web$parameter5 = action.web.parameters) === null || _action$web$parameter5 === void 0 ? void 0 : _action$web$parameter5.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 === null || part === void 0 ? void 0 : part.text) === "string" ? part.text : typeof (part === null || part === void 0 ? void 0 : 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("\u23ED\uFE0F Skipping JSON-like content from ".concat(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("\uD83D\uDFE2 Found content from ".concat(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_".concat(requestId, "_").concat(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_".concat(requestId, "_").concat(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 !== null && currentAssistantMessage !== void 0 && currentAssistantMessage.audioContent),
+        hasAudioResponse: currentAssistantMessage === null || currentAssistantMessage === void 0 ? void 0 : currentAssistantMessage.hasAudioResponse,
+        audioContentLength: (currentAssistantMessage === null || currentAssistantMessage === void 0 || (_currentAssistantMess = currentAssistantMessage.audioContent) === null || _currentAssistantMess === void 0 ? void 0 : _currentAssistantMess.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) {
+          var _currentMsg$audioCont;
+          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 !== null && currentMsg !== void 0 && currentMsg.audioContent),
+            existingAudioResponse: currentMsg === null || currentMsg === void 0 ? void 0 : currentMsg.hasAudioResponse,
+            audioContentLength: (currentMsg === null || currentMsg === void 0 || (_currentMsg$audioCont = currentMsg.audioContent) === null || _currentMsg$audioCont === void 0 ? void 0 : _currentMsg$audioCont.length) || 0
+          });
+          this._updateMessageInArray(assistantMessage.id, {
+            latestRunId: latestRunId,
+            content: contentToSet,
+            additional_kwargs: currentAdditionalKwargs,
+            isStreaming: false,
+            isProcessing: false,
+            hasAudioResponse: (currentMsg === null || currentMsg === void 0 ? void 0 : currentMsg.hasAudioResponse) || false,
+            // Preserve existing audio response state
+            audioContent: (currentMsg === null || currentMsg === void 0 ? void 0 : 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 === null || currentMsg === void 0 ? void 0 : currentMsg.hasAudioResponse) || false,
+            audioContent: (currentMsg === null || currentMsg === void 0 ? void 0 : 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 = _objectSpread2(_objectSpread2({}, 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 === null || currentMsg === void 0 ? void 0 : 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("".concat(this.langgraphUrl, "/assistants/search"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer ".concat(authToken),
+          "x-supabase-access-token": supabaseToken,
+          Origin: window.location.origin || "*"
+        },
+        body: JSON.stringify({
+          limit: 100,
+          offset: 0
+        })
+      });
+      if (!response.ok) {
+        console.log("\u274C API call failed with status: ".concat(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 ".concat(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("".concat(this.langgraphUrl, "/threads/").concat(threadId, "/history"), {
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          limit: 10
+        })
+      });
+      if (response.ok) {
+        var _latestState$values;
+        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 !== null && latestState !== void 0 && (_latestState$values = latestState.values) !== null && _latestState$values !== void 0 && _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-".concat(msgIndex, "-human"),
+              content: content,
+              sender: "user",
+              timestamp: new Date().toISOString(),
+              isAudio: isAudio
+            });
+          } else if (msg.type === "ai") {
+            historyMessages.push({
+              id: "history-".concat(msgIndex, "-ai"),
+              content: msg.content,
+              sender: "assistant",
+              timestamp: new Date().toISOString()
+            });
+          }
+        });
+        if (historyMessages && historyMessages.length > 0) {
+          console.log("\uD83D\uDCDD Loading ".concat(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("".concat(this.langgraphUrl, "/threads"), {
+        method: "POST",
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          metadata: {
+            user_id: (user === null || user === void 0 ? void 0 : user.id) || null,
+            user_uuid: (user === null || user === void 0 ? void 0 : 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;
+      }
+      this.initialized = true;
+    } catch (error) {
+      console.error("❌ Thread creation error:", error);
+      this.isConnected = false;
+      this.initialized = true;
+    }
+  }
+}
 
-export { chatWidget_default as default };
+export { ChatWidget as default };