@modochats/widget 0.1.0 → 0.1.1

package/src/services/chatbot/chatbot.ts

@@ -1,66 +0,0 @@
-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 +0,0 @@
-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/adders.ts

@@ -1,178 +0,0 @@
-import {getMessageElement} from "#src/services/chat/message-utils.js";
-import {sendMessage, submitPhoneNumberForm} from "./fn.js";
-
-const registerListeners = (widgetContainer: HTMLDivElement) => {
-  let chatBody = widgetContainer.querySelector(".mw-chat-body");
-  const toggleChatBtn = widgetContainer.querySelector(".mw-toggle-chat-btn") as HTMLButtonElement;
-  let isBodyOpen = false;
-
-  // Set footer link URL with origin parameter and version title
-  const footerLink = widgetContainer.querySelector(".mw-footer-link") as HTMLAnchorElement;
-  if (footerLink) {
-    const widget = window.getMWidget?.();
-    footerLink.href = `https://modochats.com?utm_source=${encodeURIComponent(window.location.origin)}`;
-    footerLink.title = `مودوچت v${widget?.version || "0.1"}`;
-  }
-
-  // toggle chat body visibility (only if not in fullscreen mode)
-  if (toggleChatBtn) {
-    toggleChatBtn.addEventListener(
-      "click",
-      () => {
-        const widget = window.getMWidget?.();
-        isBodyOpen = !isBodyOpen;
-        if (isBodyOpen) widget?.onOpen();
-        else widget?.onClose();
-        chatBody?.classList.toggle("mw-hidden");
-        toggleChatBtn.classList.toggle("mw-chat-open", isBodyOpen);
-      },
-      {capture: false}
-    );
-  }
-
-  registerSendMessageListener(widgetContainer);
-  registerPhoneNumberFormListeners(widgetContainer);
-  registerNewConversationListener(widgetContainer);
-  registerFileUploadListener(widgetContainer);
-  registerReplyPreviewListener(widgetContainer);
-  registerTooltipCloseListener(widgetContainer);
-};
-
-const registerSendMessageListener = (widgetContainer: HTMLDivElement) => {
-  const chatInput = widgetContainer.querySelector(".mw-chat-input") as HTMLInputElement;
-  const sendMessageBtn = widgetContainer.querySelector(".mw-send-message-btn") as HTMLButtonElement;
-
-  let isDisabled = false;
-  function toggleLoading() {
-    isDisabled = !isDisabled;
-    chatInput.disabled = isDisabled;
-    sendMessageBtn.disabled = isDisabled;
-    sendMessageBtn.setAttribute("data-is-loading", String(isDisabled));
-  }
-
-  chatInput.addEventListener("keydown", e => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      const message = chatInput.value;
-      toggleLoading();
-      sendMessage(message)
-        .then(() => {
-          chatInput.value = "";
-        })
-        .finally(toggleLoading);
-    }
-  });
-  sendMessageBtn.addEventListener("click", e => {
-    e.preventDefault();
-    const message = chatInput.value;
-    toggleLoading();
-    sendMessage(message)
-      .then(() => {
-        chatInput.value = "";
-      })
-      .finally(toggleLoading);
-  });
-};
-
-const registerPhoneNumberFormListeners = (widgetContainer: HTMLDivElement) => {
-  const formOverlay = widgetContainer.querySelector(".mw-form-overlay") as HTMLDivElement;
-  const phoneInput = widgetContainer.querySelector(".mw-phone-input") as HTMLInputElement;
-  const formSubmitBtn = widgetContainer.querySelector(".mw-form-submit-btn") as HTMLButtonElement;
-  const formCancelBtn = widgetContainer.querySelector(".mw-form-cancel-btn") as HTMLButtonElement;
-  formSubmitBtn.addEventListener("click", () => {
-    const phoneNumber = phoneInput.value;
-    submitPhoneNumberForm(phoneNumber);
-  });
-  formCancelBtn.addEventListener("click", () => {
-    formOverlay.classList.add("mw-hidden");
-  });
-};
-
-const registerNewConversationListener = (widgetContainer: HTMLDivElement) => {
-  const newBtn = widgetContainer.querySelector(".mw-new-conversation-btn") as HTMLButtonElement;
-
-  newBtn.addEventListener("click", () => {
-    const widget = window.getMWidget?.();
-    if (widget) {
-      widget.chat!.clear();
-    }
-  });
-};
-
-const registerFileUploadListener = (widgetContainer: HTMLDivElement) => {
-  const fileUploadBtn = widgetContainer.querySelector(".mw-file-upload-btn") as HTMLButtonElement;
-  const fileInput = widgetContainer.querySelector(".mw-file-input") as HTMLInputElement;
-  const widget = window?.getMWidget?.();
-
-  // Trigger file input when button is clicked
-  fileUploadBtn.addEventListener("click", () => {
-    if (widget?.chat.fileMaster.file) {
-      // If a file is selected, remove it
-      widget?.chat.fileMaster.clearFile();
-    } else {
-      // Otherwise, open file picker
-      fileInput.click();
-    }
-  });
-
-  // Handle file selection
-  fileInput.addEventListener("change", () => {
-    if (fileInput.files && fileInput.files.length > 0) {
-      widget?.chat.fileMaster.setFile(fileInput.files[0]);
-    }
-  });
-};
-
-const registerReplyPreviewListener = (widgetContainer: HTMLDivElement) => {
-  const replyPreview = widgetContainer.querySelector(".mw-reply-preview") as HTMLDivElement;
-  const replyPreviewClose = widgetContainer.querySelector(".mw-reply-preview-close") as HTMLButtonElement;
-  const replyPreviewInfo = widgetContainer.querySelector(".mw-reply-preview-info") as HTMLDivElement;
-
-  if (!replyPreview || !replyPreviewClose || !replyPreviewInfo) return;
-
-  // Close button - clear reply
-  replyPreviewClose.addEventListener("click", e => {
-    e.stopPropagation();
-    const widget = window.getMWidget?.();
-    if (widget?.chat) {
-      widget.chat.replyMaster.clearReply();
-    }
-  });
-
-  // Click on preview info - scroll to message
-  replyPreviewInfo.addEventListener("click", () => {
-    const widget = window.getMWidget?.();
-    const replyingToEl = getMessageElement(widget?.chat.replyMaster.replyingTo! || {});
-
-    if (replyingToEl) {
-      // Scroll to the message
-      const messagesContainer = widgetContainer.querySelector(".mw-chat-messages-con") as HTMLDivElement;
-      if (messagesContainer) {
-        replyingToEl.scrollIntoView({behavior: "smooth", block: "center"});
-
-        // Add a highlight effect
-        replyingToEl.classList.add("mw-message-highlight");
-        setTimeout(() => {
-          replyingToEl?.classList.remove("mw-message-highlight");
-        }, 2000);
-      }
-    }
-  });
-};
-
-const registerTooltipCloseListener = (widgetContainer: HTMLDivElement) => {
-  const widget = window.getMWidget?.();
-  const tooltipCloseBtn = widgetContainer.querySelector(".mw-toggle-tooltip-close") as HTMLButtonElement;
-  const tooltip = widgetContainer.querySelector(".mw-toggle-tooltip") as HTMLDivElement;
-  if (tooltipCloseBtn) {
-    tooltipCloseBtn.addEventListener("click", e => {
-      localStorage.setItem(`modochats:${widget?.publicKey}-has-seen-greeting-message`, "true");
-      e.stopPropagation();
-      if (tooltip) {
-        tooltip.classList.add("mw-hidden");
-      }
-    });
-  }
-};
-
-export {registerListeners, registerNewConversationListener};

package/src/services/listeners/fn.ts

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

package/src/services/ui/fn.ts

@@ -1,254 +0,0 @@
-import {BASE_STORAGE_URL, isDev} from "#src/constants/index.js";
-import {ConversationStatus} from "#src/types/conversation.js";
-
-function switchToConversationLayout() {
-  const widget = window.getMWidget?.();
-  widget?.container?.querySelector(".mw-new-conversation-btn")?.classList.remove("mw-hidden");
-  widget?.container?.querySelector(".mw-starters-con")?.classList.add("mw-hidden");
-}
-function switchToStarterLayout() {
-  const widget = window.getMWidget?.();
-  widget?.container?.querySelector(".mw-new-conversation-btn")?.classList.add("mw-hidden");
-  widget?.container?.querySelector(".mw-starters-con")?.classList.remove("mw-hidden");
-  widget?.container?.querySelector(".mw-conversation-status-icon")?.classList.add("mw-hidden");
-}
-
-function setConversationType(type: keyof typeof ConversationStatus) {
-  const widget = window.getMWidget?.();
-  widget?.container?.querySelector(".mw-conversation-status-icon")?.classList.remove("mw-hidden");
-  const statusIcon = widget?.container?.querySelector(".mw-conversation-status-icon");
-
-  if (statusIcon) {
-    // Remove existing mode classes
-    statusIcon.classList.remove("mw-ai-mode", "mw-human-mode");
-
-    // Add appropriate mode class
-    if (type === "AI_CHAT") {
-      statusIcon.classList.add("mw-ai-mode");
-    } else {
-      statusIcon.classList.add("mw-human-mode");
-    }
-  }
-}
-
-function loadStarters() {
-  const widget = window.getMWidget?.();
-  const startersContainer = widget?.container?.querySelector(".mw-starters-con");
-  const starterItemsContainer = widget?.container?.querySelector(".mw-starter-items");
-
-  startersContainer?.classList.remove("mw-hidden");
-
-  for (const starter of widget?.chatbot?.starters || []) {
-    const starterElement = document.createElement("div");
-    starterElement.className = "mw-starter-item";
-    starterElement.textContent = starter;
-    starterElement.addEventListener("click", async () => {
-      const inputEl = widget?.container?.querySelector(".mw-chat-input") as HTMLInputElement;
-      const sendMsgBtnEl = widget?.container?.querySelector(".mw-send-message-btn") as HTMLButtonElement;
-      switchToConversationLayout();
-      if (inputEl) {
-        inputEl.value = starter;
-        sendMsgBtnEl.click();
-      }
-    });
-    starterItemsContainer?.appendChild(starterElement);
-  }
-}
-
-function updateChatToggleImage() {
-  const widget = window.getMWidget?.();
-  const toggleImageEl = widget?.container?.querySelector(".mw-chat-toggle-image") as HTMLImageElement;
-  const starterLogoEl = widget?.container?.querySelector(".mw-starter-logo") as HTMLImageElement;
-
-  const defaultSvg =
-    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.9 23 5 23H11V21H5V3H13V9H21ZM23 18V16H15V18L19 22L15 26V28H23V26H19L23 22L19 18H23Z'/%3E%3C/svg%3E";
-
-  // Update toggle button image
-  if (toggleImageEl) {
-    if (widget?.chatbot?.image) {
-      toggleImageEl.src = widget.chatbot.image;
-      toggleImageEl.alt = widget.chatbot.name || "شروع گفتگو";
-
-      // Add error handling for failed image loads
-      toggleImageEl.onerror = () => {
-        toggleImageEl.src = defaultSvg;
-        toggleImageEl.alt = "پشتیبانی چت";
-      };
-    } else {
-      // Use default avatar if no image is provided
-      toggleImageEl.src = defaultSvg;
-      toggleImageEl.alt = "پشتیبانی چت";
-    }
-  }
-
-  // Update starter logo
-  if (starterLogoEl) {
-    if (widget?.chatbot?.image) {
-      starterLogoEl.src = widget.chatbot.image;
-      starterLogoEl.alt = widget.chatbot.name || "لوگو چت بات";
-      starterLogoEl.style.display = "block";
-
-      // Add error handling for failed image loads
-      starterLogoEl.onerror = () => {
-        starterLogoEl.style.display = "none";
-      };
-    } else {
-      // Hide logo if no image is provided
-      starterLogoEl.style.display = "none";
-    }
-  }
-}
-
-function updateChatTitle() {
-  const widget = window.getMWidget?.();
-  const chatTitleEl = widget?.container?.querySelector(".mw-chat-title") as HTMLElement;
-  const starterTitleEl = widget?.container?.querySelector(".mw-starter-title") as HTMLElement;
-
-  if (chatTitleEl || starterTitleEl) {
-    // Use options title if no chatbot name is available
-    const displayTitle = widget?.options?.title || widget?.chatbot?.name || "Modo";
-
-    if (chatTitleEl) {
-      chatTitleEl.textContent = displayTitle;
-    }
-
-    if (starterTitleEl) {
-      starterTitleEl.textContent = displayTitle;
-    }
-  }
-}
-
-function applyModoOptions() {
-  const widget = window.getMWidget?.();
-  if (!widget?.container || !widget?.options) return;
-
-  const container = widget.container;
-  const options = widget.options;
-
-  // Apply position option
-  applyPositionOption(container, options.position!);
-
-  // Apply theme option
-  applyThemeOption(container, options.theme!);
-
-  // Apply primary color option
-  applyPrimaryColorOption(container, options.primaryColor!);
-
-  // Apply foreground color option
-  applyForegroundColorOption(container, options.foregroundColor!);
-}
-
-function applyPositionOption(container: HTMLDivElement, position: "left" | "right") {
-  const widget = window.getMWidget?.()?.container as HTMLElement;
-  if (widget) {
-    if (position === "left") {
-      widget.style.right = "auto";
-      widget.style.left = "32px";
-      widget.style.direction = "ltr";
-
-      // Update chat body position for left alignment
-      const chatBody = widget.querySelector(".mw-chat-body") as HTMLElement;
-      if (chatBody) {
-        chatBody.style.right = "auto";
-        chatBody.style.left = "0";
-      }
-    } else {
-      // widget.style.left = "auto";
-      // widget.style.right = "32px";
-      // widget.style.direction = "rtl";
-
-      // Update chat body position for right alignment
-      const chatBody = widget.querySelector(".mw-chat-body") as HTMLElement;
-      if (chatBody) {
-        chatBody.style.left = "auto";
-        chatBody.style.right = "0";
-      }
-    }
-  }
-}
-
-function applyThemeOption(container: HTMLDivElement, theme: "dark" | "light") {
-  // Set the theme attribute on the container or document
-  const widget = document.querySelector(".modo-widget");
-  if (theme === "light") {
-    widget?.setAttribute("data-theme", "light");
-  } else {
-    widget?.removeAttribute("data-theme");
-  }
-
-  // Store theme preference
-  localStorage.setItem("modo-component:theme", theme);
-}
-
-function applyPrimaryColorOption(container: HTMLDivElement, primaryColor: string) {
-  // Create CSS custom properties for the primary color
-  const root = document.querySelector(".modo-widget") as HTMLDivElement;
-  if (root) {
-    // Set the primary color
-    root?.style.setProperty("--primary-color", primaryColor);
-
-    // Generate hover color (slightly darker)
-    const hoverColor = adjustColorBrightness(primaryColor, -20);
-    root?.style.setProperty("--primary-hover", hoverColor);
-
-    // Generate gradient using the primary color
-    const gradientColor = adjustColorBrightness(primaryColor, 15);
-    root?.style.setProperty("--primary-gradient", `linear-gradient(135deg, ${primaryColor} 0%, ${gradientColor} 100%)`);
-  } else console.error("modo chat widget not found");
-}
-
-function applyForegroundColorOption(container: HTMLDivElement, foregroundColor: string) {
-  // Create CSS custom properties for the foreground color
-  const root = document.querySelector(".modo-widget") as HTMLDivElement;
-  if (root) {
-    // Set the foreground color
-    root?.style.setProperty("--foreground-color", foregroundColor);
-
-    // Set white color to use foreground color for white text elements
-    root?.style.setProperty("--white", foregroundColor);
-  } else console.error("modo chat widget not found");
-}
-
-function adjustColorBrightness(hex: string, percent: number): string {
-  // Remove # if present
-  hex = hex.replace(/^#/, "");
-
-  // Parse r, g, b values
-  const num = parseInt(hex, 16);
-  const amt = Math.round(2.55 * percent);
-  const R = (num >> 16) + amt;
-  const G = ((num >> 8) & 0x00ff) + amt;
-  const B = (num & 0x0000ff) + amt;
-
-  // Ensure values stay within 0-255 range
-  const newR = Math.max(0, Math.min(255, R));
-  const newG = Math.max(0, Math.min(255, G));
-  const newB = Math.max(0, Math.min(255, B));
-
-  return `#${((newR << 16) | (newG << 8) | newB).toString(16).padStart(6, "0")}`;
-}
-async function loadCss() {
-  return await new Promise(resolve => {
-    const link = document.createElement("link");
-    const source = isDev ? "/css/index.css" : `${BASE_STORAGE_URL}/index.css`;
-    link.rel = "stylesheet";
-    link.href = source;
-    document.head.appendChild(link);
-    link.addEventListener("load", () => {
-      resolve("css loaded");
-    });
-  });
-}
-export {
-  switchToConversationLayout,
-  switchToStarterLayout,
-  setConversationType,
-  loadStarters,
-  loadCss,
-  updateChatToggleImage,
-  updateChatTitle,
-  applyModoOptions,
-  applyPositionOption,
-  applyThemeOption,
-  applyPrimaryColorOption
-};