@modochats/widget 0.1.0 → 0.1.2

package/scripts/create-umd-bundle.js

@@ -1,213 +0,0 @@
-import {promises as fs} from "fs";
-import path from "path";
-import {fileURLToPath} from "url";
-import {minify} from "terser";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-async function createUMDBundle() {
-  const distDir = path.resolve(__dirname, "../dist");
-  const outputDir = path.resolve(__dirname, "../cdn-dist");
-
-  console.log("Creating UMD bundle...");
-  console.log("Dist directory:", distDir);
-  console.log("Output directory:", outputDir);
-
-  // Ensure output directory exists
-  await fs.mkdir(outputDir, {recursive: true});
-
-  // Read the main app file from rollup output
-  const appPath = path.join(distDir, "../temp/app.js");
-  let appCode = "";
-
-  try {
-    appCode = await fs.readFile(appPath, "utf8");
-  } catch (error) {
-    console.error("Error reading app.js from temp directory:", error);
-    // Fallback to dist/src/app.js if temp doesn't exist
-    const fallbackPath = path.join(distDir, "src/app.js");
-    try {
-      appCode = await fs.readFile(fallbackPath, "utf8");
-    } catch (fallbackError) {
-      console.error("Error reading app.js from dist directory:", fallbackError);
-      return;
-    }
-  }
-
-  // Clean up the app code
-  let cleanedAppCode = appCode;
-
-  // Remove 'use strict' from the beginning if it exists
-  cleanedAppCode = cleanedAppCode.replace(/^['"]use strict['"];\s*/, "");
-
-  // Check if Widget is properly defined and exported
-  const hasWidget = cleanedAppCode.includes("class Widget") || cleanedAppCode.includes("function Widget");
-  const hasWindowExport = cleanedAppCode.includes("window.Widget");
-
-  if (!hasWidget) {
-    console.error("Widget class not found in the bundle!");
-    return;
-  }
-
-  // Create UMD wrapper
-  const umdCode = `(function (global, factory) {
-  if (typeof exports === 'object' && typeof module !== 'undefined') {
-    module.exports = factory();
-  } else if (typeof define === 'function' && define.amd) {
-    define(factory);
-  } else {
-    global.ModoWebComponent = factory();
-  }
-})(typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : this, function () {
-  'use strict';
-  
-  ${cleanedAppCode}
-  
-  // Return the ModoChat class for UMD usage
-  return typeof ModoChat !== 'undefined' ? ModoChat : (typeof window !== 'undefined' && window.ModoChat ? window.ModoChat : null);
-});`;
-
-  // Write UMD bundle
-  const umdPath = path.join(outputDir, "modo-widget.js");
-  const legacyUmdPath = path.join(outputDir, "modo-web-component.js");
-  await fs.writeFile(umdPath, umdCode);
-  await fs.writeFile(legacyUmdPath, umdCode);
-  console.log("Created UMD bundle:", umdPath);
-
-  // Create minified version using Terser
-  console.log("Minifying UMD bundle...");
-  try {
-    const result = await minify(umdCode, {
-      sourceMap: false,
-      mangle: true,
-      compress: true,
-      keep_classnames: false,
-      keep_fnames: false
-    });
-
-    if (result.error) {
-      throw result.error;
-    }
-
-    if (result.code) {
-      const minPath = path.join(outputDir, "modo-widget.min.js");
-      const legacyMinPath = path.join(outputDir, "modo-web-component.min.js");
-      await fs.writeFile(minPath, result.code);
-      await fs.writeFile(legacyMinPath, result.code);
-      console.log("Created minified bundle:", minPath);
-    } else {
-      console.warn("No minified code generated. Using original code.");
-      const minPath = path.join(outputDir, "modo-widget.min.js");
-      const legacyMinPath = path.join(outputDir, "modo-web-component.min.js");
-      await fs.writeFile(minPath, umdCode);
-      await fs.writeFile(legacyMinPath, umdCode);
-    }
-  } catch (error) {
-    console.error("Error during minification:", error);
-    console.log("Falling back to original code for minified version...");
-    const minPath = path.join(outputDir, "modo-widget.min.js");
-    const legacyMinPath = path.join(outputDir, "modo-web-component.min.js");
-    await fs.writeFile(minPath, umdCode);
-    await fs.writeFile(legacyMinPath, umdCode);
-  }
-
-  // Copy dist folder
-  await copyDirectory(distDir, path.join(outputDir, "dist"));
-
-  // Create package.json for CDN
-  const packageJson = {
-    name: "modochat-widget",
-    version: "1.0.0",
-    description: "Modo Web Component - A lightweight web component library",
-    main: "modo-widget.js",
-    files: ["modo-widget.js", "modo-widget.min.js", "dist/"],
-    keywords: ["web-component", "modo", "javascript", "umd"],
-    author: "",
-    license: "ISC",
-    repository: {
-      type: "git",
-      url: "https://github.com/your-username/modochat-widget.git"
-    },
-    homepage: "https://github.com/your-username/modochat-widget#readme",
-    bugs: {
-      url: "https://github.com/your-username/modochat-widget/issues"
-    }
-  };
-
-  await fs.writeFile(path.join(outputDir, "package.json"), JSON.stringify(packageJson, null, 2));
-
-  // Create README for CDN
-  const readmeContent = `# Modo Web Component
-
-A lightweight web component library.
-
-## CDN Usage
-
-### jsDelivr
-\`\`\`html
-<script src="https://cdn.jsdelivr.net/gh/your-username/modochat-widget@main/cdn-dist/modo-widget.min.js"></script>
-\`\`\`
-
-### GitHub Raw
-\`\`\`html
-<script src="https://raw.githubusercontent.com/your-username/modochat-widget/main/cdn-dist/modo-widget.min.js"></script>
-\`\`\`
-
-## Usage
-
-\`\`\`javascript
-// Initialize the chat widget
-const chat = new ModoChat('your-public-key', {
-  position: 'right', // 'left' or 'right'
-  theme: 'dark', // 'dark' or 'light'
-  primaryColor: '#667eea',
-  title: 'پشتیبانی چت'
-});
-\`\`\`
-
-## Features
-
-- 🌙 Dark/Light theme support
-- 🌐 RTL (Persian/Farsi) language support
-- 📱 Mobile responsive design
-- 💬 Real-time chat functionality
-- 🔗 WebSocket connection status
-- 📝 Markdown message support
-
-## Files
-
-- \`modo-widget.js\` - Development version
-- \`modo-widget.min.js\` - Production version (minified)
-- \`dist/\` - Full distribution files
-`;
-
-  await fs.writeFile(path.join(outputDir, "README.md"), readmeContent);
-
-  console.log("UMD bundle created successfully!");
-  console.log("Files created:");
-  console.log("- modo-widget.js");
-  console.log("- modo-widget.min.js");
-  console.log("- dist/ (copied from build)");
-  console.log("- package.json");
-  console.log("- README.md");
-}
-
-async function copyDirectory(src, dest) {
-  await fs.mkdir(dest, {recursive: true});
-
-  const entries = await fs.readdir(src, {withFileTypes: true});
-
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-
-    if (entry.isDirectory()) {
-      await copyDirectory(srcPath, destPath);
-    } else {
-      await fs.copyFile(srcPath, destPath);
-    }
-  }
-}
-
-createUMDBundle().catch(console.error);

package/scripts/terser-minify.js

@@ -1,112 +0,0 @@
-// scripts/minify.js
-import {promises as fs} from "fs";
-import path from "path";
-import {fileURLToPath} from "url";
-import {minify} from "terser";
-
-// --- Configuration ---
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-// Resolve the dist directory relative to the project root (assuming scripts/ is one level down)
-const distDir = path.resolve(__dirname, "../dist");
-// Set to true to minify files in subdirectories as well
-const recursive = true;
-// Set to true to keep the original file extension (e.g., file.js -> file.js)
-// Set to false to add .min.js (e.g., file.js -> file.min.js) - Requires output modification
-const overwriteOriginals = true; // WARNING: This will replace your original files in dist!
-// --- End Configuration ---
-
-async function findJsFiles(dir) {
-  let jsFiles = [];
-  try {
-    const entries = await fs.readdir(dir, {withFileTypes: true});
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
-      if (entry.isDirectory() && recursive) {
-        jsFiles = jsFiles.concat(await findJsFiles(fullPath));
-      } else if (entry.isFile() && entry.name.endsWith(".js") && !entry.name.endsWith(".min.js")) {
-        // Avoid minifying already minified files if using .min.js extension
-        jsFiles.push(fullPath);
-      }
-    }
-  } catch (err) {
-    // If distDir doesn't exist, treat it as no JS files found
-    if (err.code === "ENOENT") {
-      console.warn(`Warning: Directory not found: ${dir}`);
-      return [];
-    }
-    console.error(`Error reading directory ${dir}:`, err);
-    throw err; // Rethrow other errors
-  }
-  return jsFiles;
-}
-
-async function minifyFile(filePath) {
-  try {
-    const code = await fs.readFile(filePath, "utf8");
-    console.log(`Minifying: ${path.relative(distDir, filePath)}`);
-
-    const result = await minify(code, {
-      sourceMap: false, // Set to true or options object if you need source maps
-      mangle: true, // Enable variable name mangling
-      compress: true, // Enable compression options
-      // Add other Terser options here if needed:
-      // https://github.com/terser/terser#minify-options ,
-      keep_classnames: false,
-      keep_fnames: false
-    });
-
-    if (result.error) {
-      throw result.error; // Throw Terser specific errors
-    }
-
-    if (result.code) {
-      const outputPath = overwriteOriginals ? filePath : filePath.replace(/\.js$/, ".min.js"); // Example for adding .min.js
-
-      if (!overwriteOriginals && outputPath === filePath) {
-        console.warn(`  -> Skipping write for ${filePath} as output path is the same and overwriteOriginals is false.`);
-        return; // Prevent accidental overwrite if logic fails
-      }
-
-      await fs.writeFile(outputPath, result.code, "utf8");
-      console.log(`  -> Success: ${path.relative(distDir, outputPath)}`);
-    } else {
-      console.warn(`  -> No code generated for ${filePath}. Skipping write.`);
-    }
-  } catch (error) {
-    console.error(`\nError minifying ${path.relative(distDir, filePath)}:`);
-    console.error(error);
-    // Decide if you want to stop the whole process on error or continue
-    // throw error; // Uncomment to stop on first error
-  }
-}
-
-async function runMinification() {
-  console.log(`Starting minification in: ${distDir}`);
-  console.log(`Recursive: ${recursive}, Overwrite Originals: ${overwriteOriginals}`);
-  console.log("---");
-
-  try {
-    const jsFiles = await findJsFiles(distDir);
-
-    if (jsFiles.length === 0) {
-      console.log("No .js files found to minify.");
-      return;
-    }
-
-    console.log(`Found ${jsFiles.length} .js file(s).`);
-
-    // Run minification tasks potentially in parallel (adjust if memory becomes an issue)
-    await Promise.all(jsFiles.map(filePath => minifyFile(filePath)));
-
-    console.log("---");
-    console.log("Minification process finished.");
-  } catch (error) {
-    console.error("\n---");
-    console.error("An error occurred during the minification process:", error);
-    process.exit(1); // Exit with an error code
-  }
-}
-
-// --- Execute the script ---
-runMinification();

package/src/app.ts

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

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

package/src/index.ts

@@ -1,16 +0,0 @@
-// 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

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