@modochats/widget 0.1.4 → 1.1.0

package/src/services/chat/model.ts

@@ -1,139 +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};
+import {ChatClient, ConversationMessage, EventType} from "@modochats/chat-client";
+import {onSocketConnectionUpdate} from "../socket/utils.js";
+import {Conversation} from "./conversation.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};

package/src/services/chatbot/chatbot.ts

@@ -1,66 +1,66 @@
-class Chatbot {
-  name: string;
-  image: string;
-  shortDescription: string;
-  starters: string[] = [];
-  voiceChat: boolean;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
-  uuid: string;
-  allowedHosts: string[] = [];
-  id: number;
-  greetingMessage?: string;
-  uiConfig: {
-    primaryColor: string;
-    foregroundColor: string;
-    theme: "dark" | "light";
-  };
-  constructor(data: Record<string, any>) {
-    this.name = data.name;
-    this.image = data.image;
-    this.shortDescription = data.short_description;
-    this.starters = data.starters;
-    this.voiceChat = data.voice_agent;
-    this.createdAt = data.setting.created_at;
-    this.updatedAt = data.setting.updated_at;
-    this.deletedAt = data.setting.deleted_at;
-    this.uuid = data.setting.unique_id;
-    this.allowedHosts = data.setting.allow_hosts?.split(",") ?? [];
-    this.id = data.setting.chatbot;
-    this.allowedHosts.push("modochats.com");
-    this.uiConfig = {
-      primaryColor: data.primary_color,
-      foregroundColor: data.foreground_color,
-      theme: data.theme
-    };
-    this.greetingMessage = data.greeting_message;
-  }
-  showTooltip() {
-    const widget = window.getMWidget?.();
-    const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
-    const tooltipText = widget?.container?.querySelector(".mw-toggle-tooltip-text");
-    const hasSeen = localStorage.getItem(`modochats:${widget?.publicKey}-has-seen-greeting-message`) === "true";
-
-    if (tooltip && tooltipText && this.greetingMessage && !hasSeen) {
-      // Show the tooltip
-      tooltip.classList.remove("mw-hidden");
-
-      // Update tooltip text with greeting message
-      tooltipText.textContent = this.greetingMessage;
-
-      // Auto-hide after 5 seconds
-      // setTimeout(() => {
-      //   tooltip.classList.add("mw-hidden");
-      // }, 5000);
-    }
-  }
-  hideTooltip() {
-    const widget = window.getMWidget?.();
-    const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
-    if (tooltip) {
-      tooltip.classList.add("mw-hidden");
-    }
-  }
-}
-export {Chatbot};
+class Chatbot {
+  name: string;
+  image: string;
+  shortDescription: string;
+  starters: string[] = [];
+  voiceChat: boolean;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  uuid: string;
+  allowedHosts: string[] = [];
+  id: number;
+  greetingMessage?: string;
+  uiConfig: {
+    primaryColor: string;
+    foregroundColor: string;
+    theme: "dark" | "light";
+  };
+  constructor(data: Record<string, any>) {
+    this.name = data.name;
+    this.image = data.image;
+    this.shortDescription = data.short_description;
+    this.starters = data.starters;
+    this.voiceChat = data.voice_agent;
+    this.createdAt = data.setting.created_at;
+    this.updatedAt = data.setting.updated_at;
+    this.deletedAt = data.setting.deleted_at;
+    this.uuid = data.setting.unique_id;
+    this.allowedHosts = data.setting.allow_hosts?.split(",") ?? [];
+    this.id = data.setting.chatbot;
+    this.allowedHosts.push("modochats.com");
+    this.uiConfig = {
+      primaryColor: data.primary_color,
+      foregroundColor: data.foreground_color,
+      theme: data.theme
+    };
+    this.greetingMessage = data.greeting_message;
+  }
+  showTooltip() {
+    const widget = window.getMWidget?.();
+    const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
+    const tooltipText = widget?.container?.querySelector(".mw-toggle-tooltip-text");
+    const hasSeen = localStorage.getItem(`modochats:${widget?.publicKey}-has-seen-greeting-message`) === "true";
+
+    if (tooltip && tooltipText && this.greetingMessage && !hasSeen) {
+      // Show the tooltip
+      tooltip.classList.remove("mw-hidden");
+
+      // Update tooltip text with greeting message
+      tooltipText.textContent = this.greetingMessage;
+
+      // Auto-hide after 5 seconds
+      // setTimeout(() => {
+      //   tooltip.classList.add("mw-hidden");
+      // }, 5000);
+    }
+  }
+  hideTooltip() {
+    const widget = window.getMWidget?.();
+    const tooltip = widget?.container?.querySelector(".mw-toggle-tooltip");
+    if (tooltip) {
+      tooltip.classList.add("mw-hidden");
+    }
+  }
+}
+export {Chatbot};

package/src/services/checker.ts

@@ -1,10 +1,10 @@
-import {Widget} from "#src/app.js";
-import {parse} from "tldts";
-
-const checkIfHostIsAllowed = (widget: Widget) => {
-  const currentHost = parse(window.location.origin).hostname;
-  const allowedHosts = widget.chatbot?.allowedHosts || [];
-  if (currentHost) return allowedHosts.includes(currentHost);
-};
-
-export {checkIfHostIsAllowed};
+import {Widget} from "#src/app.js";
+import {parse} from "tldts";
+
+const checkIfHostIsAllowed = (widget: Widget) => {
+  const currentHost = parse(window.location.origin).hostname;
+  const allowedHosts = widget.chatbot?.allowedHosts || [];
+  if (currentHost) return allowedHosts.includes(currentHost);
+};
+
+export {checkIfHostIsAllowed};

package/src/services/listeners/fn.ts

@@ -1,77 +1,77 @@
-import {PhoneNumberRegex} from "#src/constants/regex.js";
-
-const sendMessage = async (message: string) => {
-  if (message.trim().length) {
-    if (checkIfUserHasPhoneNumber()) {
-      const widget = window.getMWidget?.();
-
-      if (widget) {
-        const savedFile = widget.chat.fileMaster.file;
-        const savedReply = widget.chat.replyMaster.replyingTo?.id;
-        if (widget?.conversation?.d?.uuid) {
-          const chatInput = widget.container?.querySelector(".mw-chat-input") as HTMLInputElement;
-          if (chatInput) chatInput.value = "";
-        }
-        widget.chat.fileMaster.clearFile();
-        widget.chat.replyMaster.clearReply();
-        await widget?.chat.sendMessage(message, {file: savedFile, replyTo: savedReply});
-      } else {
-        console.error("Widget instance not found");
-      }
-    } else {
-      throw new Error("User has not submitted the phone number form");
-    }
-  }
-};
-
-const checkIfUserHasPhoneNumber = () => {
-  const widget = window.getMWidget?.();
-  if (widget?.customerData?.hasSubmittedPhoneForm()) {
-    // User has already submitted the phone number form (whether empty or with phone number)
-    return true;
-  } else {
-    // Show phone number form
-    switchToPhoneNumberFormView();
-    return false;
-  }
-};
-
-const switchToPhoneNumberFormView = () => {
-  const formOverlay = window.getMWidget?.().container?.querySelector(".mw-form-overlay");
-  if (formOverlay) {
-    formOverlay.classList.remove("mw-hidden");
-    formOverlay.classList.add("mw-active");
-  }
-};
-const submitPhoneNumberForm = (phoneNumber: string) => {
-  // Allow empty phone number or valid phone number
-  const parsedPhoneNumber = phoneNumber.replace(/[۰-۹٠-٩]/g, ch => {
-    const fa = "۰۱۲۳۴۵۶۷۸۹".indexOf(ch);
-    if (fa > -1) return String(fa);
-    const ar = "٠١٢٣٤٥٦٧٨٩".indexOf(ch);
-    if (ar > -1) return String(ar);
-    return ch;
-  });
-
-  if (parsedPhoneNumber.trim() === "" || PhoneNumberRegex.test(parsedPhoneNumber)) {
-    const widget = window.getMWidget?.();
-    if (widget) {
-      // Update the phone number
-      widget.customerData.savePhoneNumber(phoneNumber.trim() || undefined);
-
-      const formOverlay = widget.container?.querySelector(".mw-form-overlay");
-      if (formOverlay) {
-        formOverlay.classList.remove("mw-active");
-        formOverlay.classList.add("mw-hidden");
-      }
-
-      (widget.container?.querySelector(".mw-send-message-btn") as HTMLButtonElement)?.click();
-    } else {
-      console.error("Widget instance not found");
-    }
-  } else {
-    alert("لطفا شماره تلفن معتبر وارد کنید یا فیلد را خالی بگذارید.");
-  }
-};
-
-export {sendMessage, submitPhoneNumberForm};
+import {PhoneNumberRegex} from "#src/constants/regex.js";
+
+const sendMessage = async (message: string) => {
+  if (message.trim().length) {
+    if (checkIfUserHasPhoneNumber()) {
+      const widget = window.getMWidget?.();
+
+      if (widget) {
+        const savedFile = widget.chat.fileMaster.file;
+        const savedReply = widget.chat.replyMaster.replyingTo?.id;
+        if (widget?.conversation?.d?.uuid) {
+          const chatInput = widget.container?.querySelector(".mw-chat-input") as HTMLInputElement;
+          if (chatInput) chatInput.value = "";
+        }
+        widget.chat.fileMaster.clearFile();
+        widget.chat.replyMaster.clearReply();
+        await widget?.chat.sendMessage(message, {file: savedFile, replyTo: savedReply});
+      } else {
+        console.error("Widget instance not found");
+      }
+    } else {
+      throw new Error("User has not submitted the phone number form");
+    }
+  }
+};
+
+const checkIfUserHasPhoneNumber = () => {
+  const widget = window.getMWidget?.();
+  if (widget?.customerData?.hasSubmittedPhoneForm()) {
+    // User has already submitted the phone number form (whether empty or with phone number)
+    return true;
+  } else {
+    // Show phone number form
+    switchToPhoneNumberFormView();
+    return false;
+  }
+};
+
+const switchToPhoneNumberFormView = () => {
+  const formOverlay = window.getMWidget?.().container?.querySelector(".mw-form-overlay");
+  if (formOverlay) {
+    formOverlay.classList.remove("mw-hidden");
+    formOverlay.classList.add("mw-active");
+  }
+};
+const submitPhoneNumberForm = (phoneNumber: string) => {
+  // Allow empty phone number or valid phone number
+  const parsedPhoneNumber = phoneNumber.replace(/[۰-۹٠-٩]/g, ch => {
+    const fa = "۰۱۲۳۴۵۶۷۸۹".indexOf(ch);
+    if (fa > -1) return String(fa);
+    const ar = "٠١٢٣٤٥٦٧٨٩".indexOf(ch);
+    if (ar > -1) return String(ar);
+    return ch;
+  });
+
+  if (parsedPhoneNumber.trim() === "" || PhoneNumberRegex.test(parsedPhoneNumber)) {
+    const widget = window.getMWidget?.();
+    if (widget) {
+      // Update the phone number
+      widget.customerData.savePhoneNumber(phoneNumber.trim() || undefined);
+
+      const formOverlay = widget.container?.querySelector(".mw-form-overlay");
+      if (formOverlay) {
+        formOverlay.classList.remove("mw-active");
+        formOverlay.classList.add("mw-hidden");
+      }
+
+      (widget.container?.querySelector(".mw-send-message-btn") as HTMLButtonElement)?.click();
+    } else {
+      console.error("Widget instance not found");
+    }
+  } else {
+    alert("لطفا شماره تلفن معتبر وارد کنید یا فیلد را خالی بگذارید.");
+  }
+};
+
+export {sendMessage, submitPhoneNumberForm};

package/src/services/socket/utils.ts

@@ -1,9 +1,9 @@
-const onSocketConnectionUpdate = (connected: boolean) => {
-  const widget = window.getMWidget?.();
-  const connectionIndicator = widget?.container?.querySelector(".mw-connection-status");
-
-  if (connectionIndicator) {
-    connectionIndicator.className = `mw-connection-status ${connected ? "mw-connected" : "mw-disconnected"}`;
-  }
-};
-export {onSocketConnectionUpdate};
+const onSocketConnectionUpdate = (connected: boolean) => {
+  const widget = window.getMWidget?.();
+  const connectionIndicator = widget?.container?.querySelector(".mw-connection-status");
+
+  if (connectionIndicator) {
+    connectionIndicator.className = `mw-connection-status ${connected ? "mw-connected" : "mw-disconnected"}`;
+  }
+};
+export {onSocketConnectionUpdate};