@zenify-omni/chat-ui-react-js 0.1.0

package/utils/extra-columns.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format, isValid } from "date-fns";
+import { notFoundValue } from "@zenify-omni/chat-js/constants/common.js";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+import PreviewListFiles from "../components/custom/field-file-upload/preview-list-file.js";
+import PreviewListImage from "../components/custom/field-file-upload/preview-list-image.js";
+import { formatLinkToPreviewImage } from "../components/custom/field-file-upload/image-upload.js";
+import { getFirstURL } from "@zenify-omni/chat-js/utils/string.js";
+import { CUSTOM_FIELD_SORT_RE } from "@zenify-omni/chat-js/constants/sortable-fields.js";
+import { makeSortableHeader } from "../components/custom/sortable-header.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+function buildExtraFieldColumns(fields, options = {}) {
+  const {
+    enableLinkDetection = true,
+    getRowValue = (row, key) => row.original[key],
+    sortable,
+    maskSensitiveData = false
+  } = options;
+  if (!fields || fields.length === 0) return [];
+  return fields.map((field) => ({
+    accessorKey: field.key,
+    size: 150,
+    header: sortable?.useSortBinding && CUSTOM_FIELD_SORT_RE.test(field.key) ? makeSortableHeader(field.title, field.key, sortable.useSortBinding) : () => /* @__PURE__ */ jsx("div", { children: field.title }),
+    cell: ({ row }) => {
+      let value = getRowValue(row, field.key);
+      if (Array.isArray(value) && ![AttributeFieldType.Image, AttributeFieldType.File].includes(
+        field.type
+      )) {
+        if (!value.length) {
+          value = notFoundValue;
+        } else if ([
+          AttributeFieldType.MultiSelect,
+          AttributeFieldType.CheckBox
+        ].includes(field.type)) {
+          value = value.map((item) => item?.label ?? item).join(", ");
+        } else {
+          value = value.join(", ");
+        }
+      } else if (value) {
+        if (field.type === "date") {
+          value = isValid(new Date(value)) ? format(new Date(value), "dd/MM/yyyy HH:mm") : notFoundValue;
+        }
+      } else {
+        value = notFoundValue;
+      }
+      if (maskSensitiveData && [
+        AttributeFieldType.Phone,
+        AttributeFieldType.Text,
+        AttributeFieldType.Textarea
+      ].includes(field.type) && typeof value === "string") {
+        value = maskData(value);
+      }
+      if (enableLinkDetection && (field.type === "text" || field.type === "textarea")) {
+        const link = getFirstURL(value);
+        if (link) {
+          const linkIndex = value.indexOf(link);
+          const before = value.slice(0, linkIndex);
+          const after = value.slice(linkIndex + link.length);
+          return /* @__PURE__ */ jsxs("div", { children: [
+            before,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "cursor-pointer truncate text-primary hover:underline",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  window.open(link, "_blank", "noopener,noreferrer");
+                },
+                children: link
+              }
+            ),
+            after
+          ] });
+        }
+      }
+      if ([AttributeFieldType.Image].includes(field.type) && Array.isArray(value)) {
+        return /* @__PURE__ */ jsx(
+          PreviewListImage,
+          {
+            className: "flex items-center",
+            classNameImage: "w-8 h-8",
+            maxImageShowing: 2,
+            isRemoveImages: false,
+            showImageName: false,
+            images: formatLinkToPreviewImage(value),
+            classNameRemaining: "text-sm"
+          }
+        );
+      }
+      if ([AttributeFieldType.File].includes(field.type) && Array.isArray(value)) {
+        return /* @__PURE__ */ jsx(
+          PreviewListFiles,
+          {
+            classNameItem: "border-none bg-transparent !pl-0",
+            maxFileShowing: 1,
+            isRemoveFiles: false,
+            isDownloadFiles: false,
+            datas: formatLinkToPreviewImage(value)
+          }
+        );
+      }
+      return value;
+    }
+  }));
+}
+export {
+  buildExtraFieldColumns
+};

package/utils/file.js

@@ -0,0 +1,316 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { getPresignedUrl } from "@zenify-omni/chat-js/api/file.js";
+import axios from "axios";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+import { isEmpty } from "lodash-es";
+import {
+  isZalo,
+  isZaloPersonal,
+  isFacebook,
+  isInstagram
+} from "../components/chat-route/util.js";
+import {
+  ACCEPTED_FILE_TYPES_PERSONAL_ZALO_WITH_VIDEO,
+  ACCEPTED_VIDEO_TYPES_PERSONAL_ZALO,
+  ACCEPTED_FILE_TYPES_ZALO,
+  ACCEPTED_FILE_TYPES_DEFAULT,
+  ACCEPTED_FILE_TYPES_IMAGES,
+  ACCEPTED_FILE_TYPES_IMAGES_ZALO_OA,
+  DEFAULT_FILE_SIZE,
+  MAXIMUM_FILE_SIZE_PERSONAL_ZALO,
+  MAXIMUM_IMAGE_SIZE_PERSONAL_ZALO,
+  MAXIMUM_IMAGE_INPUT_SIZE_ZALO_OA,
+  MAXIMUM_IMAGE_INPUT_SIZE_PERSONAL_ZALO,
+  IMAGE_INPUT_SIZE_MULTIPLIER,
+  MAXIMUM_FILE_SIZE_ZALO,
+  MAXIMUM_IMAGE_SIZE_FACEBOOK,
+  DEFAULT_IMAGE_SIZE,
+  ACCEPTED_FILE_TYPES_CUSTOM,
+  DEFAULT_FILE_SIZE_CHATTING
+} from "@zenify-omni/chat-js/constants/file-upload.js";
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+function checkFileSizeLarger(size, compareSize = 5 * 1024 * 1024) {
+  return size > compareSize;
+}
+function normalizeFileName(fileName) {
+  if (!fileName) return fileName;
+  let decoded = fileName;
+  try {
+    let prev;
+    do {
+      prev = decoded;
+      decoded = decodeURIComponent(decoded);
+    } while (decoded !== prev && /%[0-9A-Fa-f]{2}/.test(prev));
+  } catch {
+    decoded = fileName;
+  }
+  const lastDot = decoded.lastIndexOf(".");
+  const name = lastDot > 0 ? decoded.slice(0, lastDot) : decoded;
+  const ext = lastDot > 0 ? decoded.slice(lastDot) : "";
+  const cleanName = name.replace(/[#?%&+/\\:*"<>|=@;,]/g, "").replace(/\s+/g, "_").replace(/_+/g, "_").replace(/^[_.]+|[_.]+$/g, "") || "file";
+  return cleanName + ext;
+}
+async function uploadFileToCloudflare(file, params) {
+  try {
+    const safeFileName = normalizeFileName(file.name);
+    const { data } = await getPresignedUrl(safeFileName, params);
+    const { presignedUrl, link } = data;
+    if (!presignedUrl) {
+      throw new Error(
+        i18n.t("common:toast.uploadFailed", {
+          defaultValue: "Kh\xF4ng th\u1EC3 upload file"
+        })
+      );
+    }
+    await axios.put(presignedUrl, file, {
+      headers: {
+        "Content-Type": file.type || "application/octet-stream"
+      }
+    });
+    return link;
+  } catch (error) {
+    throw new Error(
+      error && error.message || i18n.t("common:toast.errorOccurred", { defaultValue: "\u0110\xE3 x\u1EA3y ra l\u1ED7i" })
+    );
+  }
+}
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
+function isImage(contentType, mimeType) {
+  const ext = (mimeType || "").toLowerCase();
+  const subType = (contentType || "").split("/")[1];
+  if (subType === "x-www-form-urlencoded") {
+    return IMAGE_EXTENSIONS.includes(ext);
+  }
+  if (contentType && contentType.startsWith("image/")) return true;
+  return IMAGE_EXTENSIONS.includes(ext);
+}
+const VIDEO_EXTENSIONS = ACCEPTED_VIDEO_TYPES_PERSONAL_ZALO.map(
+  (ext) => ext.replace(".", "")
+);
+function isVideo(contentType, mimeType) {
+  const ext = (mimeType || "").toLowerCase();
+  if (VIDEO_EXTENSIONS.includes(ext)) return true;
+  return Boolean(contentType) && contentType.startsWith("video/");
+}
+const VIDEO_MIME_TYPES = {
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  wmv: "video/x-ms-wmv",
+  webm: "video/webm",
+  ogg: "video/ogg"
+};
+function getVideoMimeType(source) {
+  const ext = getFileExtension((source || "").split(/[?#]/)[0]);
+  return VIDEO_MIME_TYPES[ext] || "video/mp4";
+}
+async function buildFilePayloadExtraField({
+  extraFields,
+  extraFieldForm
+}) {
+  try {
+    if (isEmpty(extraFieldForm) || isEmpty(extraFields)) return {};
+    const promises = Object.keys(extraFieldForm).map(async (key) => {
+      const field = extraFields.find((f) => f.key === key);
+      if (!field) return null;
+      let value = extraFieldForm[key];
+      if ([AttributeFieldType.Image, AttributeFieldType.File].includes(field.type)) {
+        if (Array.isArray(value)) {
+          const uploadPromises = value.map(async (file) => {
+            if (file?.file?.size) {
+              const fileUrl = await uploadFileToCloudflare(file.file, {
+                type: "import",
+                content_type: file.file.type
+              });
+              return { preview: fileUrl };
+            } else {
+              return {
+                preview: typeof file === "string" ? file : file?.preview
+              };
+            }
+          });
+          const uploadedUrls = await Promise.all(uploadPromises);
+          value = uploadedUrls.map((e) => e.preview);
+        }
+      }
+      return { key, value };
+    });
+    const resolved = await Promise.all(promises);
+    const result = {};
+    resolved.forEach((item) => {
+      if (item) result[item.key] = item.value;
+    });
+    return result;
+  } catch (error) {
+    throw new Error(
+      error && error.message || i18n.t("common:toast.errorOccurred", { defaultValue: "\u0110\xE3 x\u1EA3y ra l\u1ED7i" })
+    );
+  }
+}
+function validateFileSize(file, chatRoom) {
+  const fileExtension = getFileExtension(file?.name);
+  const isImageFile2 = isImage(file?.type, fileExtension);
+  let compareSize = DEFAULT_FILE_SIZE;
+  if (isImageFile2) {
+    compareSize = getAcceptImageSize(chatRoom);
+  } else {
+    compareSize = DEFAULT_FILE_SIZE_CHATTING;
+    if (isZaloPersonal(chatRoom)) {
+      compareSize = MAXIMUM_FILE_SIZE_PERSONAL_ZALO;
+    }
+    if (isZalo(chatRoom)) {
+      compareSize = DEFAULT_FILE_SIZE;
+    }
+  }
+  return [
+    !checkFileSizeLarger(file.size, compareSize),
+    i18n.t("common:message.channelFileSizeLimit", {
+      channel: chatRoom?.source || "chat",
+      size: compareSize / 1024 / 1024,
+      defaultValue: "V\u1EDBi k\xEAnh {channel} ch\u1EC9 \u0111\xE1p \u1EE9ng file d\u01B0\u1EDBi {size} MB"
+    })
+  ];
+}
+const getFileExtension = (fileName) => fileName?.split(".").pop()?.toLowerCase() || "";
+function getAcceptFileType(chatRoom) {
+  if (!chatRoom) return "";
+  if (isZaloPersonal(chatRoom)) {
+    return ACCEPTED_FILE_TYPES_PERSONAL_ZALO_WITH_VIDEO.join(",");
+  }
+  if (isZalo(chatRoom)) {
+    return ACCEPTED_FILE_TYPES_ZALO.join(",");
+  }
+  return ACCEPTED_FILE_TYPES_CUSTOM.join(",");
+}
+function getAcceptFileSize(chatRoom) {
+  if (!chatRoom) return "";
+  if (isZaloPersonal(chatRoom)) {
+    return MAXIMUM_FILE_SIZE_PERSONAL_ZALO;
+  }
+  if (isZalo(chatRoom)) {
+    return DEFAULT_FILE_SIZE;
+  }
+  return DEFAULT_FILE_SIZE_CHATTING;
+}
+function getAcceptedImageTypes(chatRoom) {
+  return isZalo(chatRoom) ? ACCEPTED_FILE_TYPES_IMAGES_ZALO_OA : ACCEPTED_FILE_TYPES_IMAGES;
+}
+function getAcceptImageType(chatRoom) {
+  if (!chatRoom) return "";
+  return getAcceptedImageTypes(chatRoom).join(",");
+}
+const isGifFile = (file) => {
+  const ext = getFileExtension(file?.name);
+  return file?.type === "image/gif" || ext === "gif";
+};
+function needsImageCompression(file, chatRoom) {
+  const ext = getFileExtension(file?.name);
+  if (!isImage(file?.type, ext)) return false;
+  if (isGifFile(file)) return false;
+  if (isZalo(chatRoom)) return true;
+  return file?.size > getAcceptImageSize(chatRoom);
+}
+function shouldValidateImageInputSize(file) {
+  const ext = getFileExtension(file?.name);
+  if (!isImage(file?.type, ext)) return false;
+  if (isGifFile(file)) return false;
+  return true;
+}
+function getImageInputMaxSize(chatRoom) {
+  if (isZaloPersonal(chatRoom)) return MAXIMUM_IMAGE_INPUT_SIZE_PERSONAL_ZALO;
+  if (isZalo(chatRoom)) return MAXIMUM_IMAGE_INPUT_SIZE_ZALO_OA;
+  return getAcceptImageSize(chatRoom) * IMAGE_INPUT_SIZE_MULTIPLIER;
+}
+function validateImageInputSize(file, chatRoom) {
+  const maxSize = getImageInputMaxSize(chatRoom);
+  if (file?.size > maxSize) {
+    return [
+      false,
+      i18n.t("common:message.imageTooLarge", {
+        size: formatBytes(maxSize),
+        defaultValue: "\u1EA2nh c\xF3 dung l\u01B0\u1EE3ng v\u01B0\u1EE3t qu\xE1 gi\u1EDBi h\u1EA1n cho ph\xE9p (T\u1ED1i \u0111a {size})"
+      })
+    ];
+  }
+  return [true, ""];
+}
+function getAcceptImageSize(chatRoom) {
+  if (!chatRoom) return DEFAULT_IMAGE_SIZE;
+  if (isZaloPersonal(chatRoom)) {
+    return MAXIMUM_IMAGE_SIZE_PERSONAL_ZALO;
+  }
+  if (isZalo(chatRoom)) {
+    return MAXIMUM_FILE_SIZE_ZALO;
+  }
+  if (isFacebook(chatRoom) || isInstagram(chatRoom)) {
+    return MAXIMUM_IMAGE_SIZE_FACEBOOK;
+  }
+  return DEFAULT_IMAGE_SIZE;
+}
+function validateFileExtension(file, chatRoom) {
+  const fileExtension = getFileExtension(file?.name);
+  const isImageFile2 = isImage(file?.type, fileExtension);
+  if (isImageFile2) {
+    const acceptedImageTypes = getAcceptedImageTypes(chatRoom);
+    return [
+      acceptedImageTypes.includes(`.${fileExtension}`),
+      i18n.t("common:message.invalidImageFormat", {
+        types: acceptedImageTypes.join(", "),
+        defaultValue: "\u0110\u1ECBnh d\u1EA1ng h\xECnh \u1EA3nh kh\xF4ng h\u1EE3p l\u1EC7. H\u1ED7 tr\u1EE3: {types}"
+      })
+    ];
+  } else {
+    const acceptFileType = getAcceptFileType(chatRoom);
+    if (acceptFileType === ACCEPTED_FILE_TYPES_DEFAULT) {
+      return [true, ""];
+    }
+    const extensions = acceptFileType.split(",");
+    return [
+      extensions.includes(`.${fileExtension}`),
+      i18n.t("common:message.invalidFileFormat", {
+        types: extensions.join(", "),
+        defaultValue: "\u0110\u1ECBnh d\u1EA1ng file kh\xF4ng h\u1EE3p l\u1EC7. H\u1ED7 tr\u1EE3: {types}"
+      })
+    ];
+  }
+}
+const isImageFile = (link) => {
+  const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
+  const fileExtension = getFileExtension(link);
+  return imageExtensions.includes(fileExtension);
+};
+const isVideoFile = (link) => {
+  const videoExtensions = ["mp4", "mov", "avi", "webm", "mkv"];
+  const fileExtension = getFileExtension(link);
+  return videoExtensions.includes(fileExtension);
+};
+export {
+  buildFilePayloadExtraField,
+  checkFileSizeLarger,
+  formatBytes,
+  getAcceptFileSize,
+  getAcceptFileType,
+  getAcceptImageSize,
+  getAcceptImageType,
+  getFileExtension,
+  getImageInputMaxSize,
+  getVideoMimeType,
+  isImage,
+  isImageFile,
+  isVideo,
+  isVideoFile,
+  needsImageCompression,
+  normalizeFileName,
+  shouldValidateImageInputSize,
+  uploadFileToCloudflare,
+  validateFileExtension,
+  validateFileSize,
+  validateImageInputSize
+};

package/utils/html-to-plain-text.js

@@ -0,0 +1,12 @@
+function htmlToPlainText(value = "") {
+  const stripped = String(value).replace(/<br\s*\/?>/gi, "\n").replace(/<\/p\s*>/gi, "\n").replace(/<[^>]*>/g, "").replace(/\n{3,}/g, "\n\n").trim();
+  try {
+    const doc = new DOMParser().parseFromString(stripped, "text/html");
+    return doc.body.textContent ?? stripped;
+  } catch {
+    return stripped;
+  }
+}
+export {
+  htmlToPlainText
+};

package/utils/notification.js

@@ -0,0 +1,71 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { showToast } from "../components/custom/showToast.js";
+import useAppStatusStore from "../store/app-status-store.js";
+import { toast as toastSonner } from "sonner";
+const stripHtmlTags = (html) => {
+  if (!html || typeof html !== "string") return html;
+  return html.replace(/<\/?[^>]+(>|$)/g, " ").replace(/\s+/g, " ").trim();
+};
+const truncateText = (text, maxLength = 150) => {
+  if (!text || typeof text !== "string") return text;
+  return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
+};
+const isSupported = () => typeof window !== "undefined" && "Notification" in window;
+const getPermissionStatus = () => {
+  if (!isSupported()) {
+    return "not supported";
+  }
+  return Notification.permission;
+};
+const createNotification = (title, options = {}) => {
+  if (!isSupported()) {
+    console.log("Notifications are not available in this environment");
+    return null;
+  }
+  if (getPermissionStatus() !== "granted") {
+    console.log("The user hasn't granted permission to send push notifications");
+    return null;
+  }
+  const notification = new Notification(title, options);
+  if (options.onclick) {
+    notification.addEventListener("click", options.onclick);
+  }
+  return notification;
+};
+const activeToasts = /* @__PURE__ */ new Map();
+const pushNotification = (title = i18n.t("common:nav.notification", { defaultValue: "Th\xF4ng b\xE1o" }), config = {}, type = "info") => {
+  if (config?.description) {
+    config.description = truncateText(stripHtmlTags(config.description));
+  }
+  const isAppVisible = useAppStatusStore.getState().isVisible;
+  if (!isAppVisible) {
+    const body = config?.content || config?.description || "";
+    const cleanBody = truncateText(stripHtmlTags(body));
+    createNotification(title, {
+      body: cleanBody,
+      onclick: () => {
+        window.focus();
+        if (config.action && config.action?.onClick) {
+          config.action?.onClick();
+        } else if (config.onClick) {
+          config.onClick();
+        }
+      }
+    });
+  }
+  if (config?.notificationKey) {
+    const previousToast = activeToasts.get(config.notificationKey);
+    if (previousToast) {
+      toastSonner.dismiss(previousToast);
+    }
+  }
+  const toast = showToast(title, type, config);
+  if (config?.notificationKey && toast) {
+    activeToasts.set(config.notificationKey, toast);
+  }
+  return toast;
+};
+export {
+  createNotification,
+  pushNotification
+};

package/utils/replaceZaloSprite.js

@@ -0,0 +1,64 @@
+import emojiSprite__asset from "../assets/images/emoji.webp";
+import emojiMap from "../components/chat-route/chat-box/emojiMap.js";
+import { assetUrl } from "../assets/asset-url.js";
+const emojiSprite = assetUrl(emojiSprite__asset);
+const sortedCodes = Object.keys(emojiMap).sort((a, b) => b.length - a.length);
+const EMOJI_PATTERN = "(?:" + sortedCodes.map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") + ")";
+const LOWER_TO_CODE = new Map(sortedCodes.map((c) => [c.toLowerCase(), c]));
+function replaceSegment(text) {
+  const regex = new RegExp(EMOJI_PATTERN, "gi");
+  const candidates = [];
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    const code = LOWER_TO_CODE.get(match[0].toLowerCase());
+    if (!code) continue;
+    candidates.push({
+      start: match.index,
+      end: match.index + match[0].length,
+      code
+    });
+  }
+  if (candidates.length === 0) return text;
+  const candidateStartSet = new Set(candidates.map((m) => m.start));
+  const candidateEndSet = new Set(candidates.map((m) => m.end));
+  let result = "";
+  let lastEnd = 0;
+  for (const { start, end, code } of candidates) {
+    const beforeOk = start === 0 || /\s/.test(text[start - 1]) || candidateEndSet.has(start);
+    const afterOk = end === text.length || /\s/.test(text[end]) || candidateStartSet.has(end);
+    if (!beforeOk || !afterOk) continue;
+    result += text.slice(lastEnd, start);
+    result += `<span class="zalo-emoji" data-emoji-code="${code}"></span>`;
+    lastEnd = end;
+  }
+  result += text.slice(lastEnd);
+  return result;
+}
+function replaceZaloSprite(html) {
+  if (!html) return html;
+  return html.split(/(<[^>]*>)/).map((part, i) => i % 2 !== 0 ? part : replaceSegment(part)).join("");
+}
+function applyZaloEmojiStyles(container, size = 20) {
+  if (!container) return;
+  container.querySelectorAll(".zalo-emoji[data-emoji-code]").forEach((el) => {
+    const code = el.getAttribute("data-emoji-code");
+    const pos = emojiMap[code];
+    if (!pos) return;
+    el.style.cssText = [
+      "display:inline-block",
+      `width:${size}px`,
+      `height:${size}px`,
+      `background-image:url(${emojiSprite})`,
+      "background-size:5100%",
+      "background-repeat:no-repeat",
+      `background-position:${pos.x} ${pos.y}`,
+      "margin:0 1px -3px",
+      "vertical-align:middle",
+      "flex-shrink:0"
+    ].join(";");
+  });
+}
+export {
+  applyZaloEmojiStyles,
+  replaceZaloSprite
+};

package/utils/show-be-error.js

@@ -0,0 +1,17 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { toast } from "sonner";
+function showBeError(err, fallback = i18n.t("common:toast.errorOccurred", {
+  defaultValue: "\u0110\xE3 x\u1EA3y ra l\u1ED7i"
+})) {
+  const message = err?.message || fallback;
+  const errors = err?.data?.errors;
+  if (Array.isArray(errors) && errors.length) {
+    const details = errors.map((e) => e?.msg || e?.message || e).filter(Boolean).slice(0, 5).join("\n");
+    toast.error(message, { description: details });
+    return;
+  }
+  toast.error(message);
+}
+export {
+  showBeError as default
+};

package/utils/typing_socket.js

@@ -0,0 +1,101 @@
+import { createTypingSocket } from "@zenify-omni/chat-js/socket/index.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { ChatMessageKey } from "@zenify-omni/chat-js/constants/chat-message.js";
+import useChatStore from "../store/chat-store.js";
+import { PRE_LOGOUT_EVENT } from "@zenify-omni/chat-js/constants/events.js";
+import { env } from "../config/env.js";
+import { onModuleDispose } from "../config/hmr.js";
+import { registerChatTransport } from "@zenify-omni/chat-js/transport-registry.js";
+let typingSocket = null;
+const getBaseUrl = () => {
+  try {
+    return new URL(env.CHAT_URL).origin;
+  } catch {
+    return env.CHAT_URL;
+  }
+};
+const onUpdateChatting = ({
+  room_id,
+  agent_id,
+  agent_name,
+  agent_avatar,
+  is_typing
+}) => {
+  const currentUser = getUser();
+  if (!currentUser) return;
+  if (agent_id === currentUser.agent_id) return;
+  const chatStore = useChatStore.getState();
+  if (is_typing) {
+    chatStore.setTypingUser(room_id, agent_id, agent_name, agent_avatar);
+  } else {
+    chatStore.clearTypingUser(room_id, agent_id);
+  }
+};
+const typingTimers = /* @__PURE__ */ new Map();
+const onUpdateChattingWithTimer = (payload) => {
+  const { room_id, agent_id, is_typing } = payload;
+  const currentUser = getUser();
+  if (!currentUser) return;
+  if (agent_id === currentUser.agent_id) return;
+  const timerKey = `${room_id}:${agent_id}`;
+  clearTimeout(typingTimers.get(timerKey));
+  if (is_typing) {
+    onUpdateChatting(payload);
+    typingTimers.set(
+      timerKey,
+      setTimeout(() => {
+        useChatStore.getState().clearTypingUser(room_id, agent_id);
+        typingTimers.delete(timerKey);
+      }, 5e3)
+    );
+  } else {
+    onUpdateChatting(payload);
+    typingTimers.delete(timerKey);
+  }
+};
+const connectTypingSocket = () => {
+  if (typingSocket) return;
+  const user = getUser();
+  if (!user) return;
+  typingSocket = createTypingSocket(getBaseUrl(), user);
+  typingSocket.on(ChatMessageKey.UPDATE_TYPING, onUpdateChattingWithTimer);
+};
+const disconnectTypingSocket = () => {
+  if (!typingSocket) return;
+  typingSocket.off(ChatMessageKey.UPDATE_TYPING, onUpdateChattingWithTimer);
+  typingSocket.disconnect();
+  typingSocket = null;
+  typingTimers.forEach((timer) => clearTimeout(timer));
+  typingTimers.clear();
+};
+const emitTyping = (roomId, isTyping) => {
+  if (!typingSocket || !roomId) return;
+  const user = getUser();
+  if (!user) return;
+  typingSocket.emit(ChatMessageKey.UPDATE_TYPING, {
+    room_id: roomId,
+    agent_id: user.agent_id,
+    agent_name: user.name,
+    agent_avatar: user.avatar,
+    is_typing: isTyping
+  });
+};
+let __preLogoutBound = false;
+if (!__preLogoutBound) {
+  document.addEventListener(PRE_LOGOUT_EVENT, disconnectTypingSocket);
+  __preLogoutBound = true;
+}
+onModuleDispose(
+  () => document.removeEventListener(PRE_LOGOUT_EVENT, disconnectTypingSocket)
+);
+registerChatTransport({
+  name: "typing",
+  connect: connectTypingSocket,
+  disconnect: disconnectTypingSocket,
+  methods: { connectTypingSocket, disconnectTypingSocket, emitTyping }
+});
+export {
+  connectTypingSocket,
+  disconnectTypingSocket,
+  emitTyping
+};