@modochats/widget 0.1.4 → 1.1.0

package/src/app.ts

@@ -1,117 +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};
+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

@@ -1,21 +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};
+import {VERSION} from "./version.js";
+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 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

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

package/src/constants/version.ts

@@ -0,0 +1,2 @@
+const VERSION = "1.1.0";
+export {VERSION};

package/src/index.ts

@@ -1,16 +1,16 @@
-// Main exports
-export {Widget} 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";
+// Main exports
+export {Widget} 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

@@ -1,135 +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};
+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};