mini-chat-bot-widget 0.6.0 → 0.8.0

package/src/text-chat-screen.js

@@ -0,0 +1,1286 @@
+// text-chat-screen.js - Text chat screen component
+
+class TextChatScreen {
+  constructor(options = {}) {
+    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 = `
+      <div class="text-chat-screen">
+        <div class="chat-header">
+          <div class="chat-header-content">
+            <button class="chat-back" id="text-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-audio-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-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;
+          <button class="chat-close" id="text-chat-close">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div 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="chat-input-wrapper">
+          <div class="file-upload-controls">
+            <input
+              type="file"
+              id="file-upload-input"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              style="display: none;"
+            />
+            <button id="file-upload-button" class="file-upload-button" title="Attach files">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+              </svg>
+            </button>
+          </div>
+          <input type="text" id="chat-input" placeholder="${this.placeholder}" autocomplete="off" />
+          <button id="chat-send" disabled>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+
+    // 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: ${file.type}`));
+        }
+      };
+
+      reader.onerror = () => {
+        reject(new Error(`Failed to read file: ${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) =>
+          block.type === "image" &&
+          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: ${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) => {
+        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}">
+            ${isImage
+            ? `
+              <div class="file-thumbnail">
+                <img src="${src}" alt="${displayName}" class="file-thumbnail-image" />
+              </div>
+            `
+            : '<div class="file-attachment-icon">📄</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);
+      });
+    });
+
+    // 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, messageData = 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?.id || Date.now();
+    console.log("Message ID", messageId)
+    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
+  _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="${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;
+  }
+
+  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 = `
+      <div class="typing-indicator">
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+      </div>
+    `;
+    messagesContainer.appendChild(indicator);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+
+  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: "${text}"`, false);
+    }
+  }
+
+  _escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // 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 = `
+      <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>
+    `;
+
+    // Close handlers
+    const closeModal = (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('text-chat-screen-styles')) return;
+
+    const style = document.createElement("style");
+    style.id = 'text-chat-screen-styles';
+    style.textContent = `
+      .text-chat-screen {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        
+      }
+
+      .text-chat-screen .chat-header {
+        background: transparent;
+        color: ${this.primaryColor};
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .text-chat-screen .chat-header-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+      }
+
+      .text-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;
+      }
+
+    
+
+      .text-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;
+      }
+
+      .text-chat-screen .chat-header-text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .text-chat-screen .chat-title {
+        font-weight: 600;
+        font-size: 20px;
+      }
+
+      .text-chat-screen .chat-status {
+        font-size: 12px;
+        opacity: 0.9;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .text-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;
+      }
+
+ 
+
+      .text-chat-screen .chat-messages {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+        background: linear-gradient(180deg, white 10%, #E1EFCC );
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .text-chat-screen .chat-messages::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .text-chat-screen .chat-messages::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .text-chat-screen .chat-messages::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
+      }
+
+      .text-chat-screen .chat-welcome {
+        text-align: center;
+        padding: 100px 20px;
+        color: #64748b;
+        
+      }
+
+      .text-chat-screen .chat-welcome .welcome-icon {
+        font-size: 48px;
+        margin-bottom: 12px;
+      }
+
+      .text-chat-screen .welcome-text {
+        font-size: 15px;
+        font-weight: 500;
+        color: #475569;
+      }
+
+      .text-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);
+        }
+      }
+
+      .text-chat-screen .chat-message.user {
+        flex-direction: row-reverse;
+      }
+
+      .text-chat-screen .message-content {
+        max-width: 75%;
+      }
+
+      .text-chat-screen .message-bubble {
+        padding: 12px 16px;
+        border-radius: 16px;
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+      }
+
+      .text-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);
+      }
+
+      .text-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);
+      }
+
+      .text-chat-screen .message-time {
+        font-size: 10px;
+        color: #94a3b8;
+        margin-top: 4px;
+        text-align: right;
+      }
+
+      .text-chat-screen .typing-indicator {
+        display: flex;
+        gap: 4px;
+        padding: 12px 16px;
+        background: white;
+        border-radius: 16px;
+        border-bottom-left-radius: 4px;
+        max-width: 60px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      .text-chat-screen .typing-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #94a3b8;
+        animation: typing 1.4s infinite;
+      }
+
+      .text-chat-screen .typing-dot:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      .text-chat-screen .typing-dot:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      @keyframes typing {
+        0%, 60%, 100% {
+          transform: translateY(0);
+          opacity: 0.7;
+        }
+        30% {
+          transform: translateY(-10px);
+          opacity: 1;
+        }
+      }
+
+      .text-chat-screen .file-attachments-container {
+        padding: 8px 12px;
+        background: white;
+        border-top: 1px solid #e2e8f0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        max-height: 120px;
+        overflow-y: auto;
+      }
+
+      .text-chat-screen .file-attachments-container::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+      }
+
+      .text-chat-screen .file-attachments-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .text-chat-screen .file-attachments-container::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 2px;
+      }
+
+      .text-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;
+        position: relative;
+      }
+
+      .text-chat-screen .file-attachment.has-thumbnail {
+        padding: 4px;
+      }
+
+      .text-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;
+      }
+
+      .text-chat-screen .file-thumbnail-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+
+      .text-chat-screen .file-attachment-icon {
+        font-size: 24px;
+        flex-shrink: 0;
+      }
+
+      .text-chat-screen .file-attachment-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .text-chat-screen .file-attachment-name {
+        font-weight: 500;
+        color: #1e293b;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px;
+      }
+
+      .text-chat-screen .file-attachment-size {
+        font-size: 11px;
+        color: #64748b;
+      }
+
+      .text-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;
+      }
+
+      .text-chat-screen .file-attachment-remove:hover {
+        background: #fee2e2;
+        color: #dc2626;
+      }
+
+      .text-chat-screen .chat-input-wrapper {
+        display: flex;
+        padding: 10px;
+        gap: 8px;
+        background: white;
+        border-top: 1px solid #e2e8f0;
+        align-items: center;
+      }
+
+      .text-chat-screen .file-upload-controls {
+        display: flex;
+        align-items: center;
+      }
+
+      .text-chat-screen .file-upload-button {
+        background: transparent;
+        border: none;
+        color: ${this.primaryColor};
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+
+      .text-chat-screen .file-upload-button:hover {
+        background: rgba(26, 92, 75, 0.1);
+      }
+
+      .text-chat-screen .file-upload-button:active {
+        transform: scale(0.95);
+      }
+
+      .text-chat-screen #chat-input {
+        flex: 1;
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
+        padding: 12px 16px;
+        font-size: 14px;
+        outline: none;
+        transition: all 0.2s;
+        font-family: inherit;
+      }
+
+      .text-chat-screen #chat-input:focus {
+        border-color: ${this.primaryColor};
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      }
+
+      .text-chat-screen #chat-send {
+        background: ${this.primaryColor};
+        color: white;
+        border: none;
+        border-radius: 12px;
+        padding: 12px 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+
+      .text-chat-screen #chat-send:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .text-chat-screen #chat-send:not(:disabled):hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+      }
+
+      .text-chat-screen #chat-send:not(:disabled):active {
+        transform: scale(0.95);
+      }
+
+      /* Message Attachments Styles */
+      .text-chat-screen .message-attachments {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .text-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%;
+      }
+
+      .text-chat-screen .message-attachment.image {
+        background: #f8fafc;
+      }
+
+      .text-chat-screen .message-attachment.pdf {
+        background: #fef2f2;
+      }
+
+      .text-chat-screen .message-attachment-icon {
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      .text-chat-screen .message-attachment-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .text-chat-screen .message-attachment-name {
+        font-weight: 500;
+        color: #1e293b;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .text-chat-screen .message-attachment-name.clickable:hover {
+        color: ${this.primaryColor};
+        text-decoration: underline;
+      }
+
+      .text-chat-screen .message-attachment-size {
+        font-size: 11px;
+        color: #64748b;
+      }
+
+      /* 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 TextChatScreen;
+