@modochats/widget 0.1.2 → 0.1.3

package/src/app.ts

@@ -0,0 +1,117 @@
+import {WidgetOptions} from "./types/app.js";
+import {Chatbot} from "./services/chatbot/chatbot.js";
+import {fetchChatbot} from "./utils/fetch.js";
+import {checkIfHostIsAllowed} from "./services/checker.js";
+import {createChatContainer} from "./services/ui/html.js";
+import {CustomerData} from "./services/user/customer-data.js";
+import {loadStarters, updateChatToggleImage, updateChatTitle, applyModoOptions, loadCss} from "./services/ui/fn.js";
+import {VERSION} from "./constants/index.js";
+import {VoiceChat} from "./services/voice-chat/model.js";
+import {Chat} from "./services/chat/model.js";
+
+class Widget {
+  container?: HTMLDivElement;
+  publicKey: string;
+  chatbot?: Chatbot;
+  customerData: CustomerData;
+  chat: Chat;
+
+  options: Partial<WidgetOptions> = {};
+  openedCount: number = 0;
+  version: string;
+  isInitialized: boolean = false;
+  isOpen: boolean = false;
+  voiceChat?: VoiceChat;
+
+  constructor(publicKey: string, options?: Partial<WidgetOptions>) {
+    this.publicKey = publicKey;
+    this.customerData = new CustomerData(this, options?.userData);
+    this.chat = new Chat();
+    this.version = VERSION;
+    this.options = {
+      position: options?.position || "right",
+      theme: options?.theme,
+      primaryColor: options?.primaryColor,
+      title: options?.title || "",
+      userData: options?.userData,
+      foregroundColor: options?.foregroundColor,
+      fullScreen: typeof options?.fullScreen === "boolean" ? options?.fullScreen : false
+    };
+    if (options?.autoInit) this.init();
+  }
+  async init() {
+    if (this.isInitialized) throw new Error("Widget already initialized");
+    const chatbotRes = await fetchChatbot(this.publicKey);
+    this.chatbot = new Chatbot(chatbotRes);
+    this.options = {
+      ...this.options,
+      theme: this.options?.theme || this.chatbot?.uiConfig?.theme || "dark",
+      primaryColor: this.options?.primaryColor || this.chatbot?.uiConfig?.primaryColor || "#667eea",
+      foregroundColor: this.options?.foregroundColor || this.chatbot?.uiConfig?.foregroundColor || "#fff"
+    };
+    if (checkIfHostIsAllowed(this)) {
+      await loadCss();
+      window.getMWidget = () => this;
+      createChatContainer(this);
+      applyModoOptions();
+      loadStarters();
+      updateChatToggleImage();
+      updateChatTitle();
+
+      this.isInitialized = true;
+      this.chatbot.showTooltip();
+
+      // In fullscreen mode, automatically open the chat
+      if (this.options.fullScreen) {
+        // Ensure chat body is visible in fullscreen mode
+        const chatBody = this.container?.querySelector(".mw-chat-body");
+        if (chatBody) {
+          chatBody.classList.remove("mw-hidden");
+          chatBody.classList.add("mw-active");
+        }
+        try {
+          this.chat.initInstance();
+        } finally {
+          this.onOpen();
+        }
+      } else this.chat.initInstance();
+    } else throw new Error("host not allowed");
+  }
+  async onOpen() {
+    this.isOpen = true;
+    this.openedCount++;
+
+    // Hide tooltip when chat is opened
+    this.conversation?.hideTooltip();
+    this.chatbot?.hideTooltip();
+    this.conversation?.markAsRead();
+    this.conversation?.scrollToBottom();
+    if (this.openedCount === 1) {
+      if (this.chat.conversationD) {
+        await this.conversation?.loadMessages();
+        await this.chat?.socket?.connect();
+      }
+      if (this.chatbot?.voiceChat) this.voiceChat = new VoiceChat();
+      await this.customerData.fetchUpdate();
+    }
+  }
+  onClose() {
+    this.isOpen = false;
+  }
+
+  /**
+   * Update user data with new values
+   * @param newUserData - Object containing new user data to merge
+   */
+  async updateUserData(newUserData: Record<string, any>) {
+    await this.customerData.updateUserData(newUserData);
+  }
+  get conversation() {
+    return this.chat.conversation;
+  }
+}
+
+window.ModoChat = Widget;
+window.ModoWidget = Widget;
+
+export type {Widget};

package/src/constants/index.ts

@@ -0,0 +1,21 @@
+const getEnvironment = () => {
+  // Check for browser global variable
+  if (typeof window !== "undefined" && (window as any).ENVIRONMENT) {
+    return (window as any).ENVIRONMENT;
+  }
+
+  // Check for NODE_ENV in build process
+  if (typeof process !== "undefined" && process.env?.NODE_ENV) {
+    return process.env.NODE_ENV.toUpperCase();
+  }
+
+  return "PROD"; // Default to production
+};
+const isDev = getEnvironment() === "DEV";
+const isProd = getEnvironment() === "PROD";
+const BASE_API_URL = isDev ? "https://dev-api.modochats.com" : "https://api.modochats.com";
+const BASE_WEBSOCKET_URL = isDev ? "wss://dev-api.modochats.com/ws" : "wss://api.modochats.com/ws";
+const VERSION = "0.51";
+const BASE_STORAGE_URL = "https://modochats.s3.ir-thr-at1.arvanstorage.ir";
+const NEW_MESSAGE_AUDIO_URL = `${BASE_STORAGE_URL}/new-message.mp3`;
+export {BASE_API_URL, BASE_WEBSOCKET_URL, VERSION, isDev, isProd, getEnvironment, NEW_MESSAGE_AUDIO_URL, BASE_STORAGE_URL};

package/src/constants/regex.ts

@@ -0,0 +1,2 @@
+const PhoneNumberRegex = /^(\+98|0)?9\d{9}$/;
+export {PhoneNumberRegex};

package/src/index.ts

@@ -0,0 +1,16 @@
+// Main exports
+export {Widget as ModoChat} from "./app.js";
+export type {WidgetOptions, FetchPaginationRes} from "./types/app.js";
+
+// Models
+export {Chatbot} from "./services/chatbot/chatbot.js";
+export {Conversation} from "./services/chat/conversation.js";
+export {CustomerData} from "./services/user/customer-data.js";
+
+// Services
+export {VoiceChat} from "./services/voice-chat/model.js";
+export {Chat} from "./services/chat/model.js";
+
+// Types
+export type {ConversationStatus, MessageType} from "./types/conversation.js";
+export type {SocketMessage} from "./types/socket.js";

package/src/services/chat/conversation.ts

@@ -0,0 +1,135 @@
+import {NEW_MESSAGE_AUDIO_URL} from "#src/constants/index.js";
+import {setConversationType, switchToConversationLayout, switchToStarterLayout} from "#src/services/ui/fn.js";
+import {playAudio, preloadAudio} from "#src/utils/audio.js";
+import {initMessageElement, showMessageTooltip} from "./message-utils.js";
+import {ConversationMessage} from "@modochats/chat-client";
+
+class Conversation {
+  constructor() {}
+  // d = data
+  get d() {
+    return window.getMWidget?.().chat?.conversationD;
+  }
+  addMessage(message: ConversationMessage, options?: {incoming: boolean}) {
+    const widget = window.getMWidget?.();
+    initMessageElement(message);
+    if (options?.incoming) {
+      if (widget?.isOpen) this.markAsRead();
+      else {
+        this.addBadge();
+        showMessageTooltip(message);
+        playAudio(NEW_MESSAGE_AUDIO_URL).catch(console.warn);
+      }
+    }
+    this.scrollToBottom();
+  }
+  clearContainerEl() {
+    const chatMessagesContainer = document.querySelector(".mw-chat-messages-con");
+    if (chatMessagesContainer) {
+      chatMessagesContainer.innerHTML = "";
+    }
+  }
+  addSystemMessage(message: string) {
+    const chatMessagesContainer = document.querySelector(".mw-chat-messages-con");
+    if (chatMessagesContainer) {
+      const systemMessageElement = document.createElement("div");
+      systemMessageElement.className = "mw-system-message";
+      systemMessageElement.innerHTML = `
+        <div class="mw-system-message-content">
+          ${message}
+        </div>
+      `;
+      chatMessagesContainer.appendChild(systemMessageElement);
+      this.scrollToBottom();
+    }
+  }
+
+  scrollToBottom() {
+    const chatMessagesContainer = document.querySelector(".mw-chat-messages-con");
+    if (chatMessagesContainer) {
+      chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+    }
+  }
+
+  clear() {
+    this.d?.clear();
+    this.d!.messages = [];
+    const widget = window.getMWidget?.();
+    localStorage.removeItem(`modo-chat:${widget?.publicKey}-conversation-uuid`);
+    this.clearContainerEl();
+    switchToStarterLayout();
+  }
+
+  onInit() {
+    switchToConversationLayout();
+    preloadAudio("./audio/new-message.mp3").catch(console.warn);
+    if (this?.d?.status) setConversationType(this.d?.status!);
+  }
+
+  setStatus() {
+    setConversationType(this.d?.status!);
+  }
+
+  async loadMessages() {
+    const widget = window.getMWidget?.();
+    const messages = await this.d?.loadMessages();
+    const chatMessagesContainer = widget?.container?.querySelector(".mw-chat-messages-con");
+    if (chatMessagesContainer) chatMessagesContainer.innerHTML = "";
+    for (const message of messages || []) this.addMessage(message);
+  }
+
+  addBadge() {
+    const widget = window.getMWidget?.();
+    if (!widget?.isOpen && this.unreadCount > 0 && widget) {
+      const badge = widget.container?.querySelector(".mw-badge");
+      const badgeText = widget.container?.querySelector(".mw-badge-text");
+
+      if (badge && badgeText) {
+        // Show the badge
+        badge.classList.remove("mw-hidden");
+
+        // Update badge text
+        const displayCount = this.unreadCount > 99 ? "99+" : this.unreadCount.toString();
+        badgeText.textContent = displayCount;
+
+        // Add plus class for 99+ counts
+        if (this.unreadCount > 99) {
+          badge.classList.add("mw-badge-plus");
+        } else {
+          badge.classList.remove("mw-badge-plus");
+        }
+      }
+    }
+  }
+
+  get unreadCount() {
+    return this.d?.unreadCount || 0;
+  }
+
+  hideBadge() {
+    const widget = window.getMWidget?.();
+    const badge = widget?.container?.querySelector(".mw-badge");
+    if (badge) {
+      badge.classList.add("mw-hidden");
+    }
+  }
+
+  hideTooltip() {
+    const widget = window.getMWidget?.();
+    const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
+    if (tooltip) {
+      tooltip.classList.add("mw-hidden");
+    }
+  }
+
+  async markAsRead() {
+    const widget = window.getMWidget?.();
+    await this.d?.markAsRead();
+    this.hideBadge();
+  }
+
+  get containerElement(): HTMLDivElement | null {
+    return document.querySelector(".mw-chat-messages-con");
+  }
+}
+export {Conversation};

package/src/services/chat/message-utils.ts

@@ -0,0 +1,221 @@
+import {ConversationMessage} from "@modochats/chat-client";
+import {marked} from "marked";
+
+type MessageRelatedUtil<T extends Array<any> = [], R = void> = (message: ConversationMessage, ...args: T) => R;
+
+const initMessageElement: MessageRelatedUtil = message => {
+  const element = document.createElement("div");
+  const widget = window.getMWidget?.();
+  element.id = `message-${message.id}`;
+  // Format time from createdAt
+  const messageTime = new Date(message.createdAt);
+  const timeString = messageTime.toLocaleTimeString("fa-IR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+
+  // Build the HTML with replied-to message preview if exists
+  let repliedToHtml = "";
+  if (message.repliedTo) {
+    const repliedContent = message.repliedTo.content.length > 40 ? message.repliedTo.content.substring(0, 40) + "..." : message.repliedTo.content;
+    repliedToHtml = `
+        <div class="mw-replied-to-preview" data-reply-message-id="${message.repliedTo.id}">
+          <div class="mw-replied-to-header">
+            <span class="mw-replied-to-sender">${message.repliedTo.type === "USER" ? "شما" : "پشتیبان"}</span>
+          </div>
+          <div class="mw-replied-to-content">${repliedContent}</div>
+        </div>
+      `;
+  }
+
+  // Build file preview HTML if file exists
+  let filePreviewHtml = "";
+  if (message.fileSrc) {
+    const displayFileName = message.fileSrc.length > 20 ? message.fileSrc.substring(0, 17) + "..." : message.fileSrc;
+    filePreviewHtml = `
+        <a href="${message.fileSrc}" target="_blank" rel="noopener noreferrer" class="mw-file-preview" title="دانلود فایل">
+          <div class="mw-file-preview-icon">
+            ${'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-8-6m4 18H6V4h7v5h5v11z"/></svg>'}
+          </div>
+          <div class="mw-file-preview-info">
+            <div class="mw-file-preview-name">${displayFileName}</div>
+            <div class="mw-file-preview-type">${"file"}</div>
+          </div>
+        </a>
+      `;
+  }
+
+  element.innerHTML = `
+    <div class="mw-chat-message ${message.type === "USER" ? "mw-chat-message-user" : "mw-chat-message-supporter"}">
+    ${repliedToHtml}
+    ${filePreviewHtml}
+        <div class="mw-message-content">${marked.parse(message.content) as string}</div>
+      </div>
+      <div class="mw-message-footer">
+      ${
+        message.type !== "USER"
+          ? `
+        <div class="mw-message-feedback">
+        <button class="mw-feedback-btn mw-feedback-dislike" data-message-id="${message.id}" title="مفید نبود">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path fill="currentColor" d="m15 14l-.986.164A1 1 0 0 1 15 13zM4 14v1a1 1 0 0 1-1-1zm16.522-2.392l.98-.196zM6 3h11.36v2H6zm12.56 12H15v-2h3.56zm-2.573-1.164l.805 4.835L14.82 19l-.806-4.836zM14.82 21h-.214v-2h.214zm-3.543-1.781l-2.515-3.774l1.664-1.11l2.516 3.774zM7.93 15H4v-2h3.93zM3 14V6h2v8zm17.302-8.588l1.2 6l-1.96.392l-1.2-6zM8.762 15.445A1 1 0 0 0 7.93 15v-2a3 3 0 0 1 2.496 1.336zm8.03 3.226A2 2 0 0 1 14.82 21v-2zM18.56 13a1 1 0 0 0 .981-1.196l1.961-.392A3 3 0 0 1 18.561 15zm-1.2-10a3 3 0 0 1 2.942 2.412l-1.96.392A1 1 0 0 0 17.36 5zm-2.754 18a4 4 0 0 1-3.328-1.781l1.664-1.11a2 2 0 0 0 1.664.891zM6 5a1 1 0 0 0-1 1H3a3 3 0 0 1 3-3z"/><path stroke="currentColor" stroke-width="2" d="M8 14V4"/></g></svg>
+        </button>
+        <button class="mw-feedback-btn mw-feedback-like" data-message-id="${message.id}" title="مفید بود">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path fill="currentColor" d="m15 10l-.74-.123a.75.75 0 0 0 .74.873zM4 10v-.75a.75.75 0 0 0-.75.75zm16.522 2.392l.735.147zM6 20.75h11.36v-1.5H6zm12.56-11.5H15v1.5h3.56zm-2.82.873l.806-4.835l-1.48-.247l-.806 4.836zm-.92-6.873h-.214v1.5h.213zm-3.335 1.67L8.97 8.693l1.248.832l2.515-3.773zM7.93 9.25H4v1.5h3.93zM3.25 10v8h1.5v-8zm16.807 8.54l1.2-6l-1.47-.295l-1.2 6zM8.97 8.692a1.25 1.25 0 0 1-1.04.557v1.5c.92 0 1.778-.46 2.288-1.225zm7.576-3.405A1.75 1.75 0 0 0 14.82 3.25v1.5a.25.25 0 0 1 .246.291zm2.014 5.462c.79 0 1.38.722 1.226 1.495l1.471.294A2.75 2.75 0 0 0 18.56 9.25zm-1.2 10a2.75 2.75 0 0 0 2.697-2.21l-1.47-.295a1.25 1.25 0 0 1-1.227 1.005zm-2.754-17.5a3.75 3.75 0 0 0-3.12 1.67l1.247.832a2.25 2.25 0 0 1 1.873-1.002zM6 19.25c-.69 0-1.25-.56-1.25-1.25h-1.5A2.75 2.75 0 0 0 6 20.75z"/><path stroke="currentColor" stroke-width="1.5" d="M8 10v10"/></g></svg>
+        </button>
+        </div>
+        `
+          : ""
+      }
+    <div class="mw-message-time">${timeString}</div>
+    </div>
+    `;
+
+  element.className = `mw-message-wrapper ${message.type === "USER" ? "mw-message-wrapper-user" : "mw-message-wrapper-supporter"}`;
+  widget?.chat?.conversation.containerElement?.appendChild(element);
+
+  addMessageElementListeners(message);
+
+  // Add feedback event listeners for non-user messages
+  if (message.type !== "USER") {
+    addMessageFeedbackListeners(message);
+  }
+
+  // Add clicked listener for replied-to preview
+  if (message.repliedTo) {
+    addMessageRepliedToListener(message);
+  }
+};
+
+const addMessageElementListeners: MessageRelatedUtil = message => {
+  const widget = window.getMWidget?.();
+  const element = getMessageElement(message);
+
+  element?.addEventListener("dblclick", () => {
+    widget?.chat.replyMaster.setReply(message);
+  });
+};
+
+const addMessageFeedbackListeners: MessageRelatedUtil = message => {
+  const element = getMessageElement(message);
+  const likeBtn = element?.querySelector(".mw-feedback-like") as HTMLButtonElement;
+  const dislikeBtn = element?.querySelector(".mw-feedback-dislike") as HTMLButtonElement;
+
+  if (likeBtn) {
+    likeBtn.addEventListener("click", () => {
+      sendMessageFeedBack(message, true);
+    });
+  }
+
+  if (dislikeBtn) {
+    dislikeBtn.addEventListener("click", () => {
+      sendMessageFeedBack(message, false);
+    });
+  }
+};
+
+const sendMessageFeedBack: MessageRelatedUtil<[liked: boolean]> = async (message, liked) => {
+  const element = getMessageElement(message);
+  if (message.hasFeedback) return; // Prevent multiple feedback submissions
+  disableMessageFeedbackButtons(message);
+  try {
+    await message.sendFeedBack(liked);
+    const likeBtn = element?.querySelector(".mw-feedback-like") as HTMLButtonElement;
+    const dislikeBtn = element?.querySelector(".mw-feedback-dislike") as HTMLButtonElement;
+
+    if (liked && likeBtn) {
+      likeBtn.classList.add("mw-feedback-active");
+    } else if (!liked && dislikeBtn) {
+      dislikeBtn.classList.add("mw-feedback-active");
+    }
+  } catch {
+    enableMessageFeedbackButtons(message);
+  }
+};
+
+const disableMessageFeedbackButtons: MessageRelatedUtil = message => {
+  const element = getMessageElement(message);
+  const likeBtn = element?.querySelector(".mw-feedback-like") as HTMLButtonElement;
+  const dislikeBtn = element?.querySelector(".mw-feedback-dislike") as HTMLButtonElement;
+
+  if (likeBtn) {
+    likeBtn.disabled = true;
+    likeBtn.classList.add("mw-feedback-disabled");
+  }
+
+  if (dislikeBtn) {
+    dislikeBtn.disabled = true;
+    dislikeBtn.classList.add("mw-feedback-disabled");
+  }
+};
+
+const addMessageRepliedToListener: MessageRelatedUtil = message => {
+  const element = getMessageElement(message);
+
+  const repliedToEl = getMessageElement(message.repliedTo! || {});
+  const repliedToPreview = element?.querySelector(".mw-replied-to-preview") as HTMLDivElement;
+  if (repliedToPreview && repliedToEl) {
+    repliedToPreview.addEventListener("click", () => {
+      // Scroll to the replied message
+      repliedToEl?.scrollIntoView({behavior: "smooth", block: "center"});
+
+      // Add highlight effect
+      repliedToEl?.classList.add("mw-message-highlight");
+      setTimeout(() => {
+        repliedToEl?.classList.remove("mw-message-highlight");
+      }, 2000);
+    });
+  }
+};
+
+const getMessageElement: MessageRelatedUtil<[], HTMLDivElement | undefined | null> = message => {
+  const widget = window.getMWidget?.();
+  return widget?.chat.conversation.containerElement?.querySelector(`#message-${message.id}`);
+};
+
+const showMessageTooltip: MessageRelatedUtil = message => {
+  const widget = window.getMWidget?.();
+  const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
+  const tooltipText = widget?.container?.querySelector(".mw-toggle-tooltip-text");
+  if (tooltip && tooltipText) {
+    // Show the tooltip
+    tooltip.classList.remove("mw-hidden");
+
+    // Update tooltip text with message preview
+    const preview = message.content.length > 50 ? message.content.substring(0, 50) + "..." : message.content;
+    tooltipText.textContent = preview;
+
+    // Auto-hide after 3 seconds
+    setTimeout(() => {
+      tooltip.classList.add("mw-hidden");
+    }, 3000);
+  }
+};
+
+const enableMessageFeedbackButtons: MessageRelatedUtil = message => {
+  const element = getMessageElement(message);
+  const likeBtn = element?.querySelector(".mw-feedback-like") as HTMLButtonElement;
+  const dislikeBtn = element?.querySelector(".mw-feedback-dislike") as HTMLButtonElement;
+
+  if (likeBtn) {
+    likeBtn.disabled = false;
+    likeBtn.classList.remove("mw-feedback-disabled");
+  }
+
+  if (dislikeBtn) {
+    dislikeBtn.disabled = false;
+    dislikeBtn.classList.remove("mw-feedback-disabled");
+  }
+};
+
+export {
+  initMessageElement,
+  addMessageElementListeners,
+  addMessageFeedbackListeners,
+  sendMessageFeedBack,
+  disableMessageFeedbackButtons,
+  addMessageRepliedToListener,
+  getMessageElement,
+  showMessageTooltip,
+  enableMessageFeedbackButtons
+};

package/src/services/chat/model.ts

@@ -0,0 +1,139 @@
+import {Conversation} from "#src/models/conversation.js";
+import {ChatClient, ConversationMessage, EventType} from "@modochats/chat-client";
+import {onSocketConnectionUpdate} from "../socket/utils.js";
+
+class Chat {
+  private instance?: ChatClient;
+  fileMaster: CFileMaster;
+  replyMaster: CReplyMaster;
+  conversation: Conversation;
+  constructor() {
+    this.fileMaster = new CFileMaster();
+    this.replyMaster = new CReplyMaster();
+    this.conversation = new Conversation();
+  }
+  initInstance() {
+    const widget = window.getMWidget?.();
+    const savedUUid = localStorage.getItem(`modo-chat:${widget?.chatbot?.uuid}-conversation-uuid`);
+    this.instance = new ChatClient({
+      chatbotUuid: widget?.chatbot?.uuid as string,
+      userData: {uuid: widget?.customerData.uniqueId as string, phoneNumber: widget?.customerData.phoneNumber},
+      conversationUUid: savedUUid || undefined
+    });
+    this.instance.on(EventType.CONVERSATION_SYSTEM_MESSAGE, ev => {
+      this.conversation.addSystemMessage(ev.message);
+    });
+    this.instance.on(EventType.CONVERSATION_MESSAGE, ev => {
+      this.conversation.addMessage(ev.message, {incoming: ev.incoming});
+    });
+    this.instance.on(EventType.SOCKET_CONNECTED, ev => {
+      onSocketConnectionUpdate(true);
+    });
+    this.instance.on(EventType.SOCKET_DISCONNECTED, ev => {
+      onSocketConnectionUpdate(false);
+    });
+    this.instance.on(EventType.CONVERSATION_LOAD, ev => {
+      this.conversation.clearContainerEl();
+      this.conversation.setStatus();
+      this.conversation.onInit();
+
+      localStorage.setItem(`modo-chat:${widget?.chatbot?.uuid}-conversation-uuid`, this.instance?.conversation?.uuid as string);
+    });
+    this.instance.on(EventType.CONVERSATION_MESSAGES_CLEAR, () => {
+      this.conversation.clearContainerEl();
+    });
+  }
+  get socket() {
+    return this.instance?.socket;
+  }
+  // conversation data , since the instance only stores and handles data ^^
+  get conversationD() {
+    return this.instance?.conversation;
+  }
+  clear() {
+    this.conversation.clear();
+    this.instance?.clearConversation();
+  }
+
+  sendMessage(...args: Parameters<ChatClient["sendMessage"]>) {
+    return this.instance?.sendMessage(...args);
+  }
+}
+class CFileMaster {
+  file?: File;
+
+  clearFile() {
+    this.file = undefined;
+    this.toggleUiState();
+  }
+  setFile(file: File) {
+    this.file = file;
+    this.toggleUiState();
+  }
+  toggleUiState() {
+    const container = window.getMWidget?.().container;
+    const fileUploadBtn = container?.querySelector(".mw-file-upload-btn") as HTMLButtonElement;
+    const fileInput = container?.querySelector(".mw-file-input") as HTMLInputElement;
+    const uploadIcon = container?.querySelector(".mw-file-upload-icon") as SVGElement;
+    const removeIcon = container?.querySelector(".mw-file-remove-icon") as SVGElement;
+
+    if (this.file) {
+      uploadIcon.classList.add("mw-hidden");
+      removeIcon.classList.remove("mw-hidden");
+      fileUploadBtn.classList.add("mw-file-uploaded");
+    } else {
+      fileInput.value = "";
+      uploadIcon.classList.remove("mw-hidden");
+      removeIcon.classList.add("mw-hidden");
+      fileUploadBtn.classList.remove("mw-file-uploaded");
+    }
+  }
+}
+
+class CReplyMaster {
+  replyingTo?: ConversationMessage;
+
+  setReply(message: ConversationMessage) {
+    this.replyingTo = message;
+    this.updateReplyUI();
+  }
+
+  clearReply() {
+    this.replyingTo = undefined;
+
+    this.updateReplyUI();
+  }
+
+  private updateReplyUI() {
+    const container = window.getMWidget?.().container;
+    const replyPreview = container?.querySelector(".mw-reply-preview") as HTMLDivElement;
+    const replyText = container?.querySelector(".mw-reply-preview-text") as HTMLElement;
+    const chatMessagesContainer = container?.querySelector(".mw-chat-messages-con") as HTMLDivElement;
+
+    if (this.replyingTo) {
+      // Show reply preview
+      if (replyPreview && replyText) {
+        // Truncate content to 50 chars
+        const content = this.replyingTo.content.length > 50 ? this.replyingTo.content.substring(0, 50) + "..." : this.replyingTo.content;
+        replyText.textContent = content;
+        replyPreview.classList.remove("mw-hidden");
+
+        // Add reply active class to messages container
+        if (chatMessagesContainer) {
+          chatMessagesContainer.classList.add("mw-reply-active");
+        }
+      }
+    } else {
+      // Hide reply preview
+      if (replyPreview) {
+        replyPreview.classList.add("mw-hidden");
+
+        // Remove reply active class from messages container
+        if (chatMessagesContainer) {
+          chatMessagesContainer.classList.remove("mw-reply-active");
+        }
+      }
+    }
+  }
+}
+export {Chat};