@modochats/widget 0.1.4 → 1.1.0

package/src/services/user/customer-data.ts

@@ -1,78 +1,78 @@
-import {Widget} from "#src/app.js";
-import {fetchUpdateUserData} from "#src/utils/fetch.js";
-import {generateUUID} from "#src/utils/uuid.js";
-
-class CustomerData {
-  private _uniqueId?: string;
-  private _userData?: Record<string, any>;
-  private widget: Widget;
-  phoneNumber?: string;
-
-  constructor(widget: Widget, userData?: Record<string, any>) {
-    this.widget = widget;
-    this.initializeUniqueId();
-    this.updateUserData(userData);
-    this.initializePhoneNumber();
-  }
-
-  initializePhoneNumber() {
-    const savedPhoneNumber = localStorage.getItem(`modo-chat:${this.widget.publicKey}-user-phone-number`);
-    if (savedPhoneNumber) {
-      this.phoneNumber = savedPhoneNumber;
-    }
-  }
-
-  /**
-   * Initialize unique ID from localStorage or generate a new one
-   * Unique ID is independent of user key/data and is generated by ourselves
-   */
-  private initializeUniqueId(): void {
-    const savedUniqueId = localStorage.getItem(`modo-chat:${this.widget.publicKey}-user-unique-id`);
-
-    if (savedUniqueId) {
-      this._uniqueId = savedUniqueId;
-    } else {
-      // Generate a new UUID if no saved unique ID exists
-      this._uniqueId = crypto.randomUUID ? crypto.randomUUID() : generateUUID();
-      localStorage.setItem(`modo-chat:${this.widget.publicKey}-user-unique-id`, this._uniqueId);
-    }
-  }
-
-  /**
-   * Get the current unique ID
-   */
-  get uniqueId(): string {
-    return this._uniqueId!;
-  }
-
-  /**
-   * Get the current user data
-   */
-  get userData(): Record<string, any> {
-    return this._userData || {};
-  }
-
-  /**
-   * Update user data with new values
-   * @param newUserData - Object containing new user data to merge
-   */
-  async updateUserData(newUserData?: Record<string, any>): Promise<void> {
-    if (newUserData && typeof newUserData === "object") {
-      this._userData = newUserData;
-    } else if (newUserData) console.warn("Invalid user data");
-  }
-
-  hasSubmittedPhoneForm(): boolean {
-    return Boolean(this.phoneNumber);
-  }
-
-  savePhoneNumber(phoneNumber?: string) {
-    this.phoneNumber = phoneNumber || "no phone number";
-    localStorage.setItem(`modo-chat:${this.widget.publicKey}-user-phone-number`, phoneNumber || "no phone number");
-  }
-
-  async fetchUpdate() {
-    await fetchUpdateUserData(this.widget.chatbot?.uuid as string, this.uniqueId, this.userData);
-  }
-}
-export {CustomerData};
+import {Widget} from "#src/app.js";
+import {fetchUpdateUserData} from "#src/utils/fetch.js";
+import {generateUUID} from "#src/utils/uuid.js";
+
+class CustomerData {
+  private _uniqueId?: string;
+  private _userData?: Record<string, any>;
+  private widget: Widget;
+  phoneNumber?: string;
+
+  constructor(widget: Widget, userData?: Record<string, any>) {
+    this.widget = widget;
+    this.initializeUniqueId();
+    this.updateUserData(userData);
+    this.initializePhoneNumber();
+  }
+
+  initializePhoneNumber() {
+    const savedPhoneNumber = localStorage.getItem(`modo-chat:${this.widget.publicKey}-user-phone-number`);
+    if (savedPhoneNumber) {
+      this.phoneNumber = savedPhoneNumber;
+    }
+  }
+
+  /**
+   * Initialize unique ID from localStorage or generate a new one
+   * Unique ID is independent of user key/data and is generated by ourselves
+   */
+  private initializeUniqueId(): void {
+    const savedUniqueId = localStorage.getItem(`modo-chat:${this.widget.publicKey}-user-unique-id`);
+
+    if (savedUniqueId) {
+      this._uniqueId = savedUniqueId;
+    } else {
+      // Generate a new UUID if no saved unique ID exists
+      this._uniqueId = crypto.randomUUID ? crypto.randomUUID() : generateUUID();
+      localStorage.setItem(`modo-chat:${this.widget.publicKey}-user-unique-id`, this._uniqueId);
+    }
+  }
+
+  /**
+   * Get the current unique ID
+   */
+  get uniqueId(): string {
+    return this._uniqueId!;
+  }
+
+  /**
+   * Get the current user data
+   */
+  get userData(): Record<string, any> {
+    return this._userData || {};
+  }
+
+  /**
+   * Update user data with new values
+   * @param newUserData - Object containing new user data to merge
+   */
+  async updateUserData(newUserData?: Record<string, any>): Promise<void> {
+    if (newUserData && typeof newUserData === "object") {
+      this._userData = newUserData;
+    } else if (newUserData) console.warn("Invalid user data");
+  }
+
+  hasSubmittedPhoneForm(): boolean {
+    return Boolean(this.phoneNumber);
+  }
+
+  savePhoneNumber(phoneNumber?: string) {
+    this.phoneNumber = phoneNumber || "no phone number";
+    localStorage.setItem(`modo-chat:${this.widget.publicKey}-user-phone-number`, phoneNumber || "no phone number");
+  }
+
+  async fetchUpdate() {
+    await fetchUpdateUserData(this.widget.chatbot?.uuid as string, this.uniqueId, this.userData);
+  }
+}
+export {CustomerData};

package/src/services/voice-chat/model.ts

@@ -1,79 +1,79 @@
-import {VoiceClient, EventType} from "@modochats/voice-client";
-
-import {
-  initVoiceChatLayout,
-  handleVoiceConnected,
-  handleVoiceDisconnected,
-  handleVoiceConnectionError,
-  handleMicrophonePaused,
-  handleMicrophoneResumed
-} from "./utils.js";
-
-class VoiceChat {
-  instance?: VoiceClient;
-  isFirstInSession: boolean = true;
-  constructor() {
-    const widget = window.getMWidget?.();
-    this.instance = new VoiceClient({
-      apiBase: "https://live.modochats.com",
-      // apiBase: "http://localhost:8000",
-      chatbotUuid: widget?.chatbot?.uuid as string,
-      userUniqueId: widget?.customerData.uniqueId as string
-    });
-    this.instance.on(EventType.CONNECTED, (event: any) => {
-      handleVoiceConnected();
-    });
-
-    this.instance.on(EventType.DISCONNECTED, (event: any) => {
-      if (event.reason) {
-      }
-      handleVoiceDisconnected(event.reason);
-    });
-
-    this.instance.on(EventType.CONNECTION_ERROR, (event: any) => {
-      // console.error("🔴 Connection Error:", event.message);
-      handleVoiceConnectionError(event.message);
-    });
-
-    this.instance.on(EventType.MICROPHONE_PAUSED, () => {
-      handleMicrophonePaused();
-    });
-
-    this.instance.on(EventType.MICROPHONE_RESUMED, () => {
-      handleMicrophoneResumed();
-    });
-    // Initialize the voice agent UI
-    this.initHtml();
-
-    // session check
-    const hasSeen = sessionStorage.getItem("modochats:voice-agent-seen") === "true";
-    if (hasSeen) this.isFirstInSession = false;
-    else sessionStorage.setItem("modochats:voice-agent-seen", "true");
-    if (this.isFirstInSession) this.showTooltip();
-  }
-  async connect() {
-    try {
-      await this.instance?.connect();
-    } catch (error) {
-      // console.error("Failed to connect:", error);
-    }
-  }
-  async disconnect() {
-    await this.instance?.disconnect();
-  }
-  initHtml() {
-    initVoiceChatLayout();
-  }
-  toggleLayout() {
-    this.toggleLayout();
-  }
-
-  showTooltip() {
-    const tooltip = document.querySelector(".mw-voice-call-tooltip");
-    tooltip?.classList.remove("mw-hidden");
-    setTimeout(() => {
-      tooltip?.classList.add("mw-hidden");
-    }, 6000);
-  }
-}
-export {VoiceChat};
+import {VoiceClient, EventType} from "@modochats/voice-client";
+
+import {
+  initVoiceChatLayout,
+  handleVoiceConnected,
+  handleVoiceDisconnected,
+  handleVoiceConnectionError,
+  handleMicrophonePaused,
+  handleMicrophoneResumed
+} from "./utils.js";
+
+class VoiceChat {
+  instance?: VoiceClient;
+  isFirstInSession: boolean = true;
+  constructor() {
+    const widget = window.getMWidget?.();
+    this.instance = new VoiceClient({
+      apiBase: "https://live.modochats.com",
+      // apiBase: "http://localhost:8000",
+      chatbotUuid: widget?.chatbot?.uuid as string,
+      userUniqueId: widget?.customerData.uniqueId as string
+    });
+    this.instance.on(EventType.CONNECTED, (event: any) => {
+      handleVoiceConnected();
+    });
+
+    this.instance.on(EventType.DISCONNECTED, (event: any) => {
+      if (event.reason) {
+      }
+      handleVoiceDisconnected(event.reason);
+    });
+
+    this.instance.on(EventType.CONNECTION_ERROR, (event: any) => {
+      // console.error("🔴 Connection Error:", event.message);
+      handleVoiceConnectionError(event.message);
+    });
+
+    this.instance.on(EventType.MICROPHONE_PAUSED, () => {
+      handleMicrophonePaused();
+    });
+
+    this.instance.on(EventType.MICROPHONE_RESUMED, () => {
+      handleMicrophoneResumed();
+    });
+    // Initialize the voice agent UI
+    this.initHtml();
+
+    // session check
+    const hasSeen = sessionStorage.getItem("modochats:voice-agent-seen") === "true";
+    if (hasSeen) this.isFirstInSession = false;
+    else sessionStorage.setItem("modochats:voice-agent-seen", "true");
+    if (this.isFirstInSession) this.showTooltip();
+  }
+  async connect() {
+    try {
+      await this.instance?.connect();
+    } catch (error) {
+      // console.error("Failed to connect:", error);
+    }
+  }
+  async disconnect() {
+    await this.instance?.disconnect();
+  }
+  initHtml() {
+    initVoiceChatLayout();
+  }
+  toggleLayout() {
+    this.toggleLayout();
+  }
+
+  showTooltip() {
+    const tooltip = document.querySelector(".mw-voice-call-tooltip");
+    tooltip?.classList.remove("mw-hidden");
+    setTimeout(() => {
+      tooltip?.classList.add("mw-hidden");
+    }, 6000);
+  }
+}
+export {VoiceChat};

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

@@ -1,137 +1,137 @@
-function toggleVoiceChatLayout() {
-  const widget = window.getMWidget?.();
-  const voiceOverlay = widget?.container?.querySelector(".mw-voice-agent-overlay");
-
-  if (voiceOverlay) {
-    voiceOverlay.classList.toggle("mw-active");
-    voiceOverlay.classList.toggle("mw-hidden");
-  }
-}
-
-function initVoiceChatLayout() {
-  const widget = window.getMWidget?.();
-  const voiceOverlay = widget?.container?.querySelector(".mw-voice-agent-overlay");
-  const voiceCloseBtn = voiceOverlay?.querySelector(".mw-voice-close-btn");
-  const voiceDisconnectBtn = voiceOverlay?.querySelector(".mw-voice-disconnect-btn");
-  const voiceCallBtn = widget?.container?.querySelector(".mw-voice-call-btn");
-
-  // Show voice call button
-  if (voiceCallBtn) {
-    voiceCallBtn.classList.remove("mw-hidden");
-    voiceCallBtn.classList.add("mw-visible");
-  }
-
-  // Set logo from chatbot data
-  const logoImg = voiceOverlay?.querySelector(".mw-voice-agent-logo") as HTMLImageElement;
-  if (logoImg && widget?.chatbot?.image) {
-    logoImg.src = widget.chatbot.image;
-    logoImg.alt = widget.chatbot.name || "چت بات";
-  }
-
-  // Set title
-  const titleEl = voiceOverlay?.querySelector(".mw-voice-agent-title") as HTMLElement;
-  if (titleEl) {
-    titleEl.textContent = widget?.chatbot?.name || "تماس صوتی";
-  }
-
-  // Call button click handler
-  voiceCallBtn?.addEventListener("click", () => {
-    if (voiceOverlay) {
-      voiceOverlay.classList.remove("mw-hidden");
-      voiceOverlay.classList.add("mw-active");
-      // Connect to voice instance
-      widget?.voiceChat?.connect();
-    }
-  });
-
-  // Close button click handler
-  voiceCloseBtn?.addEventListener("click", () => {
-    if (voiceOverlay) {
-      voiceOverlay.classList.remove("mw-active");
-      voiceOverlay.classList.add("mw-hidden");
-      // Disconnect from voice instance
-      widget?.voiceChat?.disconnect();
-    }
-  });
-
-  // Disconnect button click handler
-  voiceDisconnectBtn?.addEventListener("click", () => {
-    if (voiceOverlay) {
-      voiceOverlay.classList.remove("mw-active");
-      voiceOverlay.classList.add("mw-hidden");
-      // Disconnect from voice instance
-      widget?.voiceChat?.disconnect();
-    }
-  });
-}
-
-function updateVoiceChatStatus(status: string, color?: string) {
-  const widget = window.getMWidget?.();
-  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
-
-  if (statusEl) {
-    statusEl.textContent = status;
-    if (color) {
-      statusEl.style.color = color;
-    }
-  }
-}
-
-function handleVoiceConnected() {
-  const widget = window.getMWidget?.();
-  const logoEl = widget?.container?.querySelector(".mw-voice-agent-logo") as HTMLElement;
-  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
-
-  // Add animation classes when connected
-  if (logoEl) {
-    logoEl.style.animation = "mw-voice-pulse 2s ease-in-out infinite";
-  }
-  if (statusEl) {
-    statusEl.style.animation = "mw-pulse 1.5s ease-in-out infinite";
-  }
-
-  updateVoiceChatStatus("متصل ✓", "#68d391"); // Green
-}
-
-function handleVoiceDisconnected(reason?: string) {
-  const widget = window.getMWidget?.();
-  const logoEl = widget?.container?.querySelector(".mw-voice-agent-logo") as HTMLElement;
-  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
-
-  // Remove animations when disconnected
-  if (logoEl) {
-    logoEl.style.animation = "none";
-  }
-  if (statusEl) {
-    statusEl.style.animation = "none";
-  }
-
-  const statusText = reason ? `قطع شد: ${reason}` : "قطع شد";
-  updateVoiceChatStatus(statusText, "#fc8181"); // Red
-}
-
-function handleVoiceConnectionError(message: string) {
-  updateVoiceChatStatus(`خطا: ${message}`, "#fbb040"); // Warning/Orange
-
-  // Also show error in console with better visibility
-  console.error("🔴 Voice Connection Error:", message);
-}
-
-function handleMicrophonePaused() {
-  updateVoiceChatStatus("⏸ میکروفن متوقف شد", "#fbb040"); // Orange
-}
-
-function handleMicrophoneResumed() {
-  updateVoiceChatStatus("🎤 میکروفن فعال", "#68d391"); // Green
-}
-
-export {
-  toggleVoiceChatLayout,
-  initVoiceChatLayout,
-  updateVoiceChatStatus,
-  handleVoiceConnected,
-  handleVoiceDisconnected,
-  handleVoiceConnectionError,
-  handleMicrophonePaused,
-  handleMicrophoneResumed
-};
+function toggleVoiceChatLayout() {
+  const widget = window.getMWidget?.();
+  const voiceOverlay = widget?.container?.querySelector(".mw-voice-agent-overlay");
+
+  if (voiceOverlay) {
+    voiceOverlay.classList.toggle("mw-active");
+    voiceOverlay.classList.toggle("mw-hidden");
+  }
+}
+
+function initVoiceChatLayout() {
+  const widget = window.getMWidget?.();
+  const voiceOverlay = widget?.container?.querySelector(".mw-voice-agent-overlay");
+  const voiceCloseBtn = voiceOverlay?.querySelector(".mw-voice-close-btn");
+  const voiceDisconnectBtn = voiceOverlay?.querySelector(".mw-voice-disconnect-btn");
+  const voiceCallBtn = widget?.container?.querySelector(".mw-voice-call-btn");
+
+  // Show voice call button
+  if (voiceCallBtn) {
+    voiceCallBtn.classList.remove("mw-hidden");
+    voiceCallBtn.classList.add("mw-visible");
+  }
+
+  // Set logo from chatbot data
+  const logoImg = voiceOverlay?.querySelector(".mw-voice-agent-logo") as HTMLImageElement;
+  if (logoImg && widget?.chatbot?.image) {
+    logoImg.src = widget.chatbot.image;
+    logoImg.alt = widget.chatbot.name || "چت بات";
+  }
+
+  // Set title
+  const titleEl = voiceOverlay?.querySelector(".mw-voice-agent-title") as HTMLElement;
+  if (titleEl) {
+    titleEl.textContent = widget?.chatbot?.name || "تماس صوتی";
+  }
+
+  // Call button click handler
+  voiceCallBtn?.addEventListener("click", () => {
+    if (voiceOverlay) {
+      voiceOverlay.classList.remove("mw-hidden");
+      voiceOverlay.classList.add("mw-active");
+      // Connect to voice instance
+      widget?.voiceChat?.connect();
+    }
+  });
+
+  // Close button click handler
+  voiceCloseBtn?.addEventListener("click", () => {
+    if (voiceOverlay) {
+      voiceOverlay.classList.remove("mw-active");
+      voiceOverlay.classList.add("mw-hidden");
+      // Disconnect from voice instance
+      widget?.voiceChat?.disconnect();
+    }
+  });
+
+  // Disconnect button click handler
+  voiceDisconnectBtn?.addEventListener("click", () => {
+    if (voiceOverlay) {
+      voiceOverlay.classList.remove("mw-active");
+      voiceOverlay.classList.add("mw-hidden");
+      // Disconnect from voice instance
+      widget?.voiceChat?.disconnect();
+    }
+  });
+}
+
+function updateVoiceChatStatus(status: string, color?: string) {
+  const widget = window.getMWidget?.();
+  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
+
+  if (statusEl) {
+    statusEl.textContent = status;
+    if (color) {
+      statusEl.style.color = color;
+    }
+  }
+}
+
+function handleVoiceConnected() {
+  const widget = window.getMWidget?.();
+  const logoEl = widget?.container?.querySelector(".mw-voice-agent-logo") as HTMLElement;
+  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
+
+  // Add animation classes when connected
+  if (logoEl) {
+    logoEl.style.animation = "mw-voice-pulse 2s ease-in-out infinite";
+  }
+  if (statusEl) {
+    statusEl.style.animation = "mw-pulse 1.5s ease-in-out infinite";
+  }
+
+  updateVoiceChatStatus("متصل ✓", "#68d391"); // Green
+}
+
+function handleVoiceDisconnected(reason?: string) {
+  const widget = window.getMWidget?.();
+  const logoEl = widget?.container?.querySelector(".mw-voice-agent-logo") as HTMLElement;
+  const statusEl = widget?.container?.querySelector(".mw-voice-agent-status") as HTMLElement;
+
+  // Remove animations when disconnected
+  if (logoEl) {
+    logoEl.style.animation = "none";
+  }
+  if (statusEl) {
+    statusEl.style.animation = "none";
+  }
+
+  const statusText = reason ? `قطع شد: ${reason}` : "قطع شد";
+  updateVoiceChatStatus(statusText, "#fc8181"); // Red
+}
+
+function handleVoiceConnectionError(message: string) {
+  updateVoiceChatStatus(`خطا: ${message}`, "#fbb040"); // Warning/Orange
+
+  // Also show error in console with better visibility
+  console.error("🔴 Voice Connection Error:", message);
+}
+
+function handleMicrophonePaused() {
+  updateVoiceChatStatus("⏸ میکروفن متوقف شد", "#fbb040"); // Orange
+}
+
+function handleMicrophoneResumed() {
+  updateVoiceChatStatus("🎤 میکروفن فعال", "#68d391"); // Green
+}
+
+export {
+  toggleVoiceChatLayout,
+  initVoiceChatLayout,
+  updateVoiceChatStatus,
+  handleVoiceConnected,
+  handleVoiceDisconnected,
+  handleVoiceConnectionError,
+  handleMicrophonePaused,
+  handleMicrophoneResumed
+};

package/src/tools/fetch.ts

@@ -1,7 +1,7 @@
-import {BASE_API_URL} from "#src/constants/index.js";
-import {ofetch} from "ofetch";
-
-const $fetch = ofetch.create({
-  baseURL: BASE_API_URL
-});
-export {$fetch};
+import {BASE_API_URL} from "#src/constants/index.js";
+import {ofetch} from "ofetch";
+
+const $fetch = ofetch.create({
+  baseURL: BASE_API_URL
+});
+export {$fetch};

package/src/types/app.ts

@@ -1,17 +1,17 @@
-interface WidgetOptions {
-  position: "left" | "right";
-  theme: "dark" | "light";
-  primaryColor: string;
-  title: string;
-  foregroundColor: string;
-  userData?: Record<string, any>;
-  autoInit?: boolean;
-  fullScreen: boolean;
-}
-interface FetchPaginationRes<T = any> {
-  results: T[];
-  next: string | null;
-  prev: string | null;
-  count: number;
-}
-export {WidgetOptions, FetchPaginationRes};
+interface WidgetOptions {
+  position: "left" | "right";
+  theme: "dark" | "light";
+  primaryColor: string;
+  title: string;
+  foregroundColor: string;
+  userData?: Record<string, any>;
+  autoInit?: boolean;
+  fullScreen: boolean;
+}
+interface FetchPaginationRes<T = any> {
+  results: T[];
+  next: string | null;
+  prev: string | null;
+  count: number;
+}
+export {WidgetOptions, FetchPaginationRes};

package/src/types/conversation.ts

@@ -1,14 +1,14 @@
-enum ConversationStatus {
-  AI_CHAT,
-  SUPPORTER_CHAT,
-  RESOLVED,
-  UNKNOWN
-}
-enum MessageType {
-  USER,
-  AI,
-  SUPPORTER,
-  SYSTEM,
-  UNKNOWN
-}
-export type {ConversationStatus, MessageType};
+enum ConversationStatus {
+  AI_CHAT,
+  SUPPORTER_CHAT,
+  RESOLVED,
+  UNKNOWN
+}
+enum MessageType {
+  USER,
+  AI,
+  SUPPORTER,
+  SYSTEM,
+  UNKNOWN
+}
+export type {ConversationStatus, MessageType};