mini-chat-bot-widget 0.2.0 → 0.8.0

package/src/audio-chat-screen.js

@@ -0,0 +1,1408 @@
+// audio-chat-screen.js - Audio chat screen component
+import { BhashiniFrontend } from "./bhashiniApi.js";
+
+class AudioChatScreen {
+  constructor(options = {}) {
+    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 = `
+      <div class="audio-chat-screen">
+        <div class="chat-header">
+          <div class="chat-header-content">
+            <button class="chat-back" id="audio-chat-menu">
+              <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>
+            </button>
+           
+           <div class="chat-header-text">
+              <div class="chat-title">${this.title}</div>
+            </div>
+          </div>
+          <button class="chat-close" id="navigate-to-text-screen">
+            <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>
+          </button>
+          &#8203; &#8203; &#8203;
+          <button class="chat-close" id="audio-chat-close">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        
+        
+        <div class="chat-messages" id="chat-messages">
+          <div class="chat-welcome">
+            <div class="welcome-text">👋 Hello! I'm your AI assistant. How can I help you today?</div>
+          </div>
+        </div> 
+        
+        
+        <div class="file-attachments-container" id="file-attachments-container" style="display: none;"></div>
+        <div class="bottom-inputs">
+          <button id="record-button">
+            <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>
+          </button>
+          &#8203; &#8203; &#8203;&#8203; &#8203; &#8203;
+          <input
+              type="file"
+              id="file-upload-input"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              style="display: none;"
+            />
+          <button id="attachment-button">
+            <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>
+          </button>
+        </div>
+        
+        
+      </div>
+    `;
+
+    // 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: ${file.type}`));
+        }
+      };
+
+      reader.onerror = () => {
+        reject(new Error(`Failed to read file: ${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) => {
+        const displayName = block.metadata?.filename || block.metadata?.name || "file";
+        const size = this.formatFileSize(block.metadata?.size || 0);
+        const isImage = block.type === "image";
+        const src = isImage
+          ? `data:${block.mime_type};base64,${block.data}`
+          : null;
+
+        return `
+          <div class="file-attachment ${isImage ? "has-thumbnail" : ""}" data-index="${index}">
+            <div class="file-thumbnail">
+                <img src="${src}" alt="${displayName}" class="file-thumbnail-image" />
+            </div>
+            <div class="file-attachment-info">
+              <div class="file-attachment-name" title="${displayName}">
+                ${displayName}
+              </div>
+              <div class="file-attachment-size">${size}</div>
+            </div>
+            <button
+              class="file-attachment-remove"
+              data-index="${index}"
+              title="Remove file"
+            >
+              ✕
+            </button>
+          </div>
+        `;
+      })
+      .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" });
+        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 = `
+        <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>
+      `;
+
+      // 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 = `
+        <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>
+      `;
+    }
+  }
+
+  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,${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, messageData = 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?.id || Date.now();
+    const existingMessage = messagesContainer.querySelector(`[data-message-id="${messageId}"]`);
+    if (existingMessage && messageData) {
+      // Update existing message
+      const bubble = existingMessage.querySelector(".message-bubble");
+      if (bubble) {
+        bubble.innerHTML = this._escapeHtml(messageData.content || text);
+      }
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      return;
+    }
+
+    const messageEl = document.createElement("div");
+    messageEl.className = `chat-message ${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 = `
+        <div class="message-attachments">
+          ${messageData.attachments.map((attachment, index) => {
+        const displayName = attachment.metadata?.name || attachment.metadata?.filename || "Unknown file";
+        const isImage = attachment.type === "image";
+        const imageSrc = isImage && attachment.data
+          ? `data:${attachment.mime_type};base64,${attachment.data}`
+          : null;
+
+        return `
+              <div class="message-attachment ${isImage ? "image" : "pdf"}" data-attachment-index="${index}">
+                <span class="message-attachment-icon">
+                  ${isImage ? "🖼️" : "📄"}
+                </span>
+                <div class="message-attachment-info">
+                  <div 
+                    class="message-attachment-name ${isImage ? "clickable" : ""}"
+                    ${isImage && imageSrc ? `data-image-src="${imageSrc}" data-image-alt="${displayName}"` : ""}
+                    style="cursor: ${isImage ? "pointer" : "default"};"
+                  >
+                    ${this._escapeHtml(displayName)}
+                  </div>
+                  <div class="message-attachment-size">
+                    ${this.formatFileSize(attachment.metadata?.size || 0)} • ${this.getFileTypeDisplay(attachment.mime_type)}
+                  </div>
+                </div>
+              </div>
+            `;
+      }).join("")}
+        </div>
+      `;
+    }
+
+    const timestamp = messageData?.timestamp ? new Date(messageData.timestamp) : new Date();
+    const formattedTime = this._formatTime(timestamp);
+
+    messageEl.innerHTML = `
+      <div class="message-content">
+        ${attachmentsHTML}
+        <div class="message-bubble">${this._escapeHtml(content)}</div>
+        <div class="message-time">${formattedTime}</div>
+      </div>
+    `;
+
+    // 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, 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="${msgId}"]`);
+        if (existingEl) {
+          const bubble = existingEl.querySelector(".message-bubble");
+          if (bubble) {
+            bubble.innerHTML = this._escapeHtml(msg.content || "");
+          }
+
+          // Update attachments if they exist
+          const messageContent = existingEl.querySelector(".message-content");
+          if (messageContent && msg.attachments && msg.attachments.length > 0) {
+            let attachmentsHTML = `
+              <div class="message-attachments">
+                ${msg.attachments.map((attachment, index) => {
+              const displayName = attachment.metadata?.name || attachment.metadata?.filename || "Unknown file";
+              const isImage = attachment.type === "image";
+              const imageSrc = isImage && attachment.data
+                ? `data:${attachment.mime_type};base64,${attachment.data}`
+                : null;
+
+              return `
+                    <div class="message-attachment ${isImage ? "image" : "pdf"}" data-attachment-index="${index}">
+                      <span class="message-attachment-icon">
+                        ${isImage ? "🖼️" : "📄"}
+                      </span>
+                      <div class="message-attachment-info">
+                        <div 
+                          class="message-attachment-name ${isImage ? "clickable" : ""}"
+                          ${isImage && imageSrc ? `data-image-src="${imageSrc}" data-image-alt="${displayName}"` : ""}
+                          style="cursor: ${isImage ? "pointer" : "default"};"
+                        >
+                          ${this._escapeHtml(displayName)}
+                        </div>
+                        <div class="message-attachment-size">
+                          ${this.formatFileSize(attachment.metadata?.size || 0)} • ${this.getFileTypeDisplay(attachment.mime_type)}
+                        </div>
+                      </div>
+                    </div>
+                  `;
+            }).join("")}
+              </div>
+            `;
+
+            // 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;
+  }
+
+  // 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 = `
+      <div class="expanded-image-container">
+        <button class="expanded-image-close" title="Close">✕</button>
+        <img src="${src}" alt="${alt || "Image"}" class="expanded-image" />
+        <div class="expanded-image-caption">${this._escapeHtml(alt || "Image preview")}</div>
+      </div>
+    `;
+
+    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 = `
+      .audio-chat-screen {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        background: linear-gradient(180deg, white 10%, #E1EFCC );
+      }
+
+      .audio-chat-screen .chat-header {
+        color: ${this.primaryColor};
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+        background: transparent;
+        z-index: 20;
+      }
+
+      .audio-chat-screen .chat-header-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+      }
+
+      .audio-chat-screen .chat-back {
+        background: ${this.primaryColor};
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        margin-right: 8px;
+      }
+
+      .bottom-inputs {
+        width: 100%;
+        padding: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+        z-index: 10;
+        flex-shrink: 0;
+      }
+
+      .bottom-inputs button {
+        border: none;
+        border-radius: 9999px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      #record-button {
+        width: 50px;
+        height: 50px;
+        background: ${this.primaryColor};
+        color: #ffffff;
+      }
+
+      #record-button.recording {
+        background: #ef4444;
+        animation: pulse-ring 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
+      }
+
+      @keyframes pulse-ring {
+        0% {
+          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+        }
+        70% {
+          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+        }
+        100% {
+          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+        }
+      }
+
+      #record-button:hover {
+        transform: translateY(-2px) scale(1.03);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      }
+
+      #record-button:active {
+        transform: translateY(0) scale(0.97);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      #attachment-button {
+        width: 50px;
+        height: 50px;
+        background: #ffffff;
+        color: ${this.primaryColor};
+        border: 1px solid rgba(148, 163, 184, 0.5);
+      }
+
+      #attachment-button:hover {
+        transform: translateY(-2px) scale(1.03);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      }
+
+      #attachment-button:active {
+        transform: translateY(1px);
+        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
+      }
+      .audio-chat-screen .chat-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .audio-chat-screen .chat-header-text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .audio-chat-screen .chat-title {
+        font-weight: 600;
+        font-size: 20px;
+      }
+
+      .audio-chat-screen .chat-status {
+        font-size: 12px;
+        opacity: 0.9;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .audio-chat-screen .chat-close {
+        background: ${this.primaryColor};
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+
+
+      .audio-chat-screen .audio-chat-content {
+        flex: 1;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        gap: 20px;
+      }
+
+      .audio-chat-screen .audio-status {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 20px;
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      .audio-chat-screen .audio-status-icon {
+        font-size: 48px;
+        margin-bottom: 12px;
+        transition: transform 0.3s;
+      }
+
+      .audio-chat-screen .audio-status-text {
+        font-size: 16px;
+        font-weight: 500;
+        color: #475569;
+      }
+
+      /* Message list styles mirrored from TextChatScreen */
+      .audio-chat-screen .chat-messages {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+        overflow-x: hidden; /* Prevent horizontal scroll */
+        min-height: 0; /* Crucial for nested flex scrolling */
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .audio-chat-screen .chat-messages::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .audio-chat-screen .chat-messages::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .audio-chat-screen .chat-messages::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
+      }
+
+      .audio-chat-screen .file-attachments-container {
+        padding: 8px 12px;
+        background: transparent;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        max-height: 120px;
+        overflow-y: auto;
+        position: relative;
+        z-index: 5;
+      }
+
+      .audio-chat-screen .file-attachment {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 10px;
+        background: #f1f5f9;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        font-size: 12px;
+        max-width: 200px;
+      }
+
+      .audio-chat-screen .file-thumbnail {
+        width: 40px;
+        height: 40px;
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+        background: #e2e8f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .audio-chat-screen .file-thumbnail-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .audio-chat-screen .file-attachment-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .audio-chat-screen .file-attachment-name {
+        font-weight: 500;
+        color: #1e293b;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px;
+      }
+
+      .audio-chat-screen .file-attachment-size {
+        font-size: 11px;
+        color: #64748b;
+      }
+
+      .audio-chat-screen .file-attachment-remove {
+        background: transparent;
+        border: none;
+        color: #64748b;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        font-size: 16px;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        flex-shrink: 0;
+      }
+
+      .audio-chat-screen .file-attachment-remove:hover {
+        background: #fee2e2;
+        color: #dc2626;
+      }
+
+      .audio-chat-screen .chat-welcome {
+        text-align: center;
+        padding: 100px 20px;
+        color: #64748b;
+      }
+
+      .audio-chat-screen .chat-welcome .welcome-icon {
+        font-size: 48px;
+        margin-bottom: 12px;
+      }
+
+      .audio-chat-screen .welcome-text {
+        font-size: 15px;
+        font-weight: 500;
+        color: #475569;
+      }
+
+      .audio-chat-screen .chat-message {
+        display: flex;
+        gap: 8px;
+        animation: messageSlide 0.3s ease-out;
+      }
+
+      @keyframes messageSlide {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .audio-chat-screen .chat-message.user {
+        flex-direction: row-reverse;
+      }
+
+      .audio-chat-screen .message-content {
+        max-width: 75%;
+      }
+
+      .audio-chat-screen .message-bubble {
+        padding: 12px 16px;
+        border-radius: 16px;
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+      }
+
+      .audio-chat-screen .chat-message.user .message-bubble {
+        background: #e9f5d7;
+        color: ${this.primaryColor};
+        border-bottom-right-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      .audio-chat-screen .chat-message.bot .message-bubble {
+        background: white;
+        color: #1e293b;
+        border-bottom-left-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      .audio-chat-screen .message-time {
+        font-size: 10px;
+        color: #94a3b8;
+        margin-top: 4px;
+        text-align: right;
+      }
+
+      /* Message Attachments Styles (mirrored from TextChatScreen) */
+      .audio-chat-screen .message-attachments {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .audio-chat-screen .message-attachment {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: #f1f5f9;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        font-size: 12px;
+        max-width: 100%;
+      }
+
+      .audio-chat-screen .message-attachment.image {
+        background: #f8fafc;
+      }
+
+      .audio-chat-screen .message-attachment.pdf {
+        background: #fef2f2;
+      }
+
+      .audio-chat-screen .message-attachment-icon {
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      .audio-chat-screen .message-attachment-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .audio-chat-screen .message-attachment-name {
+        font-weight: 500;
+        color: #1e293b;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .audio-chat-screen .message-attachment-name.clickable:hover {
+        color: ${this.primaryColor};
+        text-decoration: underline;
+      }
+
+      .audio-chat-screen .message-attachment-size {
+        font-size: 11px;
+        color: #64748b;
+      }
+
+      .audio-chat-screen .audio-messages {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        min-height: 200px;
+      }
+
+      .audio-chat-screen .audio-message {
+        display: flex;
+        gap: 8px;
+        animation: messageSlide 0.3s ease-out;
+      }
+
+      .audio-chat-screen .audio-message.user {
+        flex-direction: row-reverse;
+      }
+
+      .audio-chat-screen .audio-message-content {
+        max-width: 75%;
+      }
+
+      .audio-chat-screen .audio-message-bubble {
+        padding: 12px 16px;
+        border-radius: 16px;
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+      }
+
+      .audio-chat-screen .audio-message.user .audio-message-bubble {
+        background: ${this.primaryColor};
+        color: white;
+        border-bottom-right-radius: 4px;
+      }
+
+      .audio-chat-screen .audio-message.assistant .audio-message-bubble {
+        background: white;
+        color: #1e293b;
+        border-bottom-left-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      @keyframes messageSlide {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .audio-chat-screen .audio-messages::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .audio-chat-screen .audio-messages::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .audio-chat-screen .audio-messages::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
+      }
+
+      .audio-chat-screen .audio-controls {
+        position: absolute;
+        left: 50%;
+        bottom: 20px;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none; /* let only the button receive events */
+      }
+
+      .audio-chat-screen .audio-controls .audio-record-btn {
+        pointer-events: auto;
+      }
+
+      .audio-chat-screen .audio-record-btn {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: ${this.primaryColor};
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        transition: all 0.3s;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .audio-chat-screen .audio-record-btn:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      }
+
+      .audio-chat-screen .audio-record-btn:active {
+        transform: scale(0.95);
+      }
+
+      .audio-chat-screen .audio-record-btn.recording {
+        background: #ef4444;
+        animation: pulse-record 1.5s infinite;
+      }
+
+      @keyframes pulse-record {
+        0%, 100% {
+          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+        }
+        50% {
+          box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6);
+        }
+      }
+
+      .audio-chat-screen .audio-record-btn span {
+        font-size: 11px;
+        font-weight: 500;
+        margin-top: 4px;
+      }
+
+      .audio-chat-screen .audio-record-btn svg {
+        width: 32px;
+        height: 32px;
+      }
+
+      @media (max-width: 768px) {
+        .audio-chat-screen .audio-record-btn {
+          width: 100px;
+          height: 100px;
+        }
+      }
+
+      /* Expanded Image Modal Styles */
+      .expanded-image-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        animation: fadeIn 0.2s ease;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      .expanded-image-container {
+        position: relative;
+        max-width: 90%;
+        max-height: 90vh;
+        background: #fff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        animation: scaleIn 0.2s ease;
+        display: flex;
+        flex-direction: column;
+      }
+
+      @keyframes scaleIn {
+        from {
+          transform: scale(0.9);
+          opacity: 0;
+        }
+        to {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .expanded-image-close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        background: rgba(0, 0, 0, 0.6);
+        border: none;
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        z-index: 1;
+        transition: all 0.2s;
+      }
+
+      .expanded-image-close:hover {
+        background: rgba(0, 0, 0, 0.8);
+        transform: scale(1.1);
+      }
+
+      .expanded-image {
+        max-width: 100%;
+        max-height: calc(90vh - 60px);
+        object-fit: contain;
+        display: block;
+      }
+
+      .expanded-image-caption {
+        padding: 12px 16px;
+        background: #fff;
+        color: #1e293b;
+        font-size: 14px;
+        text-align: center;
+        border-top: 1px solid #e2e8f0;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+// Export as ESM (Rollup will handle UMD conversion)
+export default AudioChatScreen;
+
+
+