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

package/components/chat-route/chat-box/chat-reply-preview.js

@@ -0,0 +1,317 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useChatStore from "../../../store/chat-store.js";
+import { Reply, X, User, MapPin } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import {
+  checkMimeType,
+  FilePreview,
+  getColor,
+  getIconForContentType,
+  getMimeType,
+  mimeTypes
+} from "../../custom/previews/file-preview.js";
+import { useEffect, useState, useMemo } from "react";
+import { parseMessageUrl, removeMentionColor } from "@zenify-omni/chat-js/utils/string.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { isImage } from "../../../utils/file.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { useShallow } from "zustand/shallow";
+import SafeHTML from "../../custom/SafeHTML.js";
+import { parseMessageUrls } from "@zenify-omni/chat-js/utils/string.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../custom/avatar.js";
+import { LinkPreview } from "../../custom/previews/link-preview.js";
+import { useTranslation } from "react-i18next";
+function ChatReplyPreview({ replyContent, isView, isAgent, ...props }) {
+  const { t } = useTranslation();
+  const [setReplySelected, replySelected, setFindReplySelected] = useChatStore(
+    useShallow((state) => [
+      state.setReplySelected,
+      state.replySelected,
+      state.setFindReplySelected
+    ])
+  );
+  const replyData = replyContent ?? replySelected;
+  const handleClickReply = (e) => {
+    e.stopPropagation();
+    if (!isView) return;
+    let replyId = replyData?._id;
+    if (!replyId) return;
+    if (replyId.includes("_")) {
+      replyId = replyId.split("_")[0];
+    }
+    setFindReplySelected(replyId);
+  };
+  const replyDataNormalized = useMemo(() => {
+    if (replyData && replyData.content?.type === "image" && replyData._id?.includes("_")) {
+      const contentImage = parseMessageUrls(replyData.content.src);
+      const index = replyData._id.split("_")[1];
+      return {
+        ...replyData,
+        content: {
+          ...replyData.content,
+          src: contentImage?.previewUrls?.[index == null || index == "undefined" ? 0 : Number(index)]
+        }
+      };
+    }
+    return replyData;
+  }, [replyContent, replySelected]);
+  if (!replyData?._id) {
+    return;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: handleClickReply,
+      className: cn(
+        "relative mx-2 my-1 flex h-14 items-center overflow-hidden pr-3 shadow-sm",
+        props.className,
+        isView ? "cursor-pointer bg-secondary duration-150" : "bg-secondary",
+        !isAgent && "bg-secondary"
+      ),
+      children: [
+        !isView && /* @__PURE__ */ jsx(
+          X,
+          {
+            onClick: () => {
+              setReplySelected(null);
+            },
+            strokeWidth: 1.25,
+            className: "absolute right-2 top-2 cursor-pointer text-card-foreground hover:text-primary",
+            size: 16
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mr-2 min-h-14 w-[3px] bg-primary" }),
+        replyDataNormalized && /* @__PURE__ */ jsx("div", { className: "pointer-events-none mr-2", children: /* @__PURE__ */ jsx(RenderContentPreview, { replyDataNormalized }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center text-xs", children: [
+            !isView && /* @__PURE__ */ jsxs("span", { className: "mr-2 flex items-center italic text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Reply, { size: 16, className: cn("scale-x-[-1] font-bold") }),
+              t("common:action.reply", { defaultValue: "Tr\u1EA3 l\u1EDDi" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("truncate font-semibold", props.classNameContent),
+                children: maskData(replyDataNormalized.chatter_name)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mr-4 truncate", children: /* @__PURE__ */ jsx(RenderContentReply, { msg: replyDataNormalized }) })
+        ] })
+      ]
+    }
+  );
+}
+const RenderContentPreview = ({ replyDataNormalized }) => {
+  if (!replyDataNormalized) return null;
+  switch (replyDataNormalized?.content?.type) {
+    case "video":
+    case "audio":
+    case "file":
+      return /* @__PURE__ */ jsx(
+        PreviewUrl,
+        {
+          url: replyDataNormalized.content.src,
+          fileName: replyDataNormalized.content.file_name || replyDataNormalized.content.filename
+        }
+      );
+    case "image":
+    case "images":
+    case "sticker":
+      return /* @__PURE__ */ jsx(PreviewImage, { msg: replyDataNormalized });
+    case "contact_card":
+      return /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 flex-shrink-0 overflow-hidden object-cover", children: [
+        /* @__PURE__ */ jsx(
+          AvatarImage,
+          {
+            src: replyDataNormalized?.content_obj?.avatar,
+            alt: replyDataNormalized?.content_obj?.title
+          }
+        ),
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted", children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) })
+      ] });
+    case "location":
+      return /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(MapPin, { className: "h-5 w-5 text-muted-foreground" }) });
+    default:
+      return null;
+  }
+};
+const RenderContentReply = ({ msg }) => {
+  const { t } = useTranslation();
+  switch (msg?.content?.type) {
+    case "link":
+      return /* @__PURE__ */ jsx(LinkPreview, { url: msg.content.src, isReply: true });
+    case "contact_card":
+      return /* @__PURE__ */ jsx("div", { className: "mt-1 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: t("chat:message.contactCardBracket", {
+        title: msg?.content_obj?.title,
+        defaultValue: "[Danh thi\u1EBFp] {title}"
+      }) });
+    case "text": {
+      let normalizedContent = msg.content.text?.replace(/<br\s*\/?>/gi, " ").replace(/\n/g, " ").replace(/\s+/g, " ").trim();
+      if (msg?.mention_infos) {
+        normalizedContent = removeMentionColor(msg.content?.text);
+      }
+      return /* @__PURE__ */ jsx("div", { className: "m-0 mt-1.5 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: /* @__PURE__ */ jsx(
+        SafeHTML,
+        {
+          isReply: true,
+          html: normalizedContent,
+          className: "truncate p-0 text-xs"
+        }
+      ) });
+    }
+    case "sticker":
+    case "image":
+    case "images":
+      return /* @__PURE__ */ jsx(PreviewImage, { msg, isReply: true });
+    case "file":
+    case "audio":
+    case "video":
+      return /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
+        FilePreview,
+        {
+          isReply: true,
+          msg,
+          url: msg.content.src,
+          title: formatDayWithTime(msg.date || msg.created_at),
+          showImage: true
+        }
+      ) });
+    case "reel":
+    case "share_post":
+    case "share_group":
+    case "share_page":
+    case "share_event": {
+      const description = msg.content?.description;
+      const title = msg.content?.title;
+      if (description != null) {
+        const normalizedContent = description.replace(/<br\s*\/?>/gi, " ").replace(/\n/g, " ").replace(/\s+/g, " ").trim();
+        return /* @__PURE__ */ jsx("div", { className: "m-0 mt-1.5 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: /* @__PURE__ */ jsx(
+          SafeHTML,
+          {
+            isReply: true,
+            html: normalizedContent,
+            className: "truncate p-0 text-xs"
+          }
+        ) });
+      }
+      const SHARE_LABELS = {
+        reel: "[Reel]",
+        share_post: "[B\xE0i \u0111\u0103ng]",
+        share_group: "[Nh\xF3m]",
+        share_page: "[Trang]",
+        share_event: "[S\u1EF1 ki\u1EC7n]"
+      };
+      return /* @__PURE__ */ jsxs("div", { className: "m-0 mt-1.5 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: SHARE_LABELS[msg.content?.type] }),
+        title && /* @__PURE__ */ jsx("span", { className: "ml-1 truncate", children: title })
+      ] });
+    }
+    case "poll_creation": {
+      return /* @__PURE__ */ jsx("div", { className: "m-0 mt-1.5 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("chat:message.pollBracket", {
+        defaultValue: "[Th\u0103m d\xF2 \xFD ki\u1EBFn]"
+      }) }) });
+    }
+    case "appointment_booking": {
+      const bookingData = msg.extra_data?.booking_data || {};
+      const BOOKING_STATUS_LABEL = {
+        requested: "Y\xEAu c\u1EA7u \u0111\u1EB7t l\u1ECBch",
+        confirmed: "\u0110\xE3 x\xE1c nh\u1EADn",
+        declined: "\u0110\xE3 t\u1EEB ch\u1ED1i",
+        cancelled: "\u0110\xE3 hu\u1EF7",
+        scheduled: "\u0110\xE3 l\xEAn l\u1ECBch"
+      };
+      const statusLabel = BOOKING_STATUS_LABEL[bookingData.status] || bookingData.status || null;
+      return /* @__PURE__ */ jsxs("div", { className: "m-0 mt-1.5 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("chat:message.appointmentBracket", {
+          defaultValue: "[\u0110\u1EB7t l\u1ECBch h\u1EB9n]"
+        }) }),
+        statusLabel && /* @__PURE__ */ jsx("span", { className: "ml-1 truncate", children: statusLabel })
+      ] });
+    }
+    case "location":
+      return /* @__PURE__ */ jsx("div", { className: "mt-1 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: t("chat:message.locationBracket", { defaultValue: "[V\u1ECB tr\xED]" }) });
+    case "product":
+      return /* @__PURE__ */ jsx("div", { className: "mt-1 truncate border-none bg-transparent !p-0 text-xs text-foreground-secondary shadow-none", children: t("chat:message.productBracket", { defaultValue: "[S\u1EA3n ph\u1EA9m]" }) });
+    default:
+      break;
+  }
+};
+const PreviewImage = ({ msg, isReply }) => {
+  const { t } = useTranslation();
+  const parts = msg.content.src?.split("||") ?? [];
+  const firstUrl = parts[0] ?? msg.content.src;
+  const extraCount = parts.length > 1 ? parts.length - 1 : 0;
+  if (isReply) {
+    return /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs text-foreground-secondary", children: msg?.content?.type === "sticker" ? "[Sticker]" : parts.length > 1 ? t("chat:message.imagesCountBracket", {
+      length: parts.length,
+      defaultValue: "[{length} h\xECnh \u1EA3nh]"
+    }) : t("chat:message.imageBracket", { defaultValue: "[H\xECnh \u1EA3nh]" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-14 w-14 flex-shrink-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: firstUrl,
+        alt: "",
+        className: "h-full w-full object-cover",
+        referrerPolicy: "no-referrer"
+      }
+    ),
+    extraCount > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-semibold text-white", children: [
+      "+",
+      extraCount
+    ] })
+  ] });
+};
+const PreviewUrl = ({ url, fileName: fileNameProp }) => {
+  const [fileData, setFileData] = useState({
+    fileName: "Unnamed file",
+    extension: "txt",
+    fileSize: 0,
+    mimeType: "",
+    isImage: false
+  });
+  useEffect(() => {
+    if (!url) return;
+    const processFileData = async () => {
+      const { afterText } = parseMessageUrl(url);
+      let fileName = fileNameProp || url.split("/").pop() || "";
+      if (afterText && fileName.endsWith(afterText)) {
+        fileName = fileName.slice(0, -afterText.length);
+      }
+      const extension = fileName.split(".").pop().toLowerCase();
+      let mimeType = null;
+      if (mimeTypes[extension]) {
+        mimeType = getMimeType(extension);
+      } else {
+        mimeType = await checkMimeType(url, afterText);
+      }
+      const fileSize = 0;
+      const isImageFile = isImage(mimeType, extension);
+      setFileData({
+        afterText,
+        fileName,
+        extension,
+        fileSize,
+        mimeType,
+        isImage: isImageFile
+      });
+    };
+    processFileData();
+  }, [url, fileNameProp, setFileData]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-8 w-8 items-center justify-center rounded-full",
+        getColor(fileData.mimeType, fileData.fileName),
+        "text-card-foreground"
+      ),
+      children: getIconForContentType(fileData.mimeType)
+    }
+  );
+};
+export {
+  ChatReplyPreview
+};