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

package/components/custom/previews/image-preview.js

@@ -0,0 +1,288 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState } from "react";
+import { cn } from "../../../lib/utils.js";
+import { RetryImage } from "../retry-image.js";
+import { JxlImage } from "../jxl-image.js";
+import { isJxlUrl, decodeJxlToBlobUrl } from "../jxl-decode.js";
+const ImageComponent = ({ src, ...props }) => isJxlUrl(src) ? /* @__PURE__ */ jsx(
+  JxlImage,
+  {
+    src,
+    ...props,
+    fallback: /* @__PURE__ */ jsx(RetryImage, { src, ...props })
+  }
+) : /* @__PURE__ */ jsx(RetryImage, { src, ...props });
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger
+} from "../../ui/context-menu.js";
+import { parseMessageUrls } from "@zenify-omni/chat-js/utils/string.js";
+import { convertURLsToLinks } from "@zenify-omni/chat-js/utils/string.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import SafeHTML from "../SafeHTML.js";
+import usePreviewImageStore from "../../../store/preview-image-store.js";
+import { useShallow } from "zustand/react/shallow";
+import useChatStore from "../../../store/chat-store.js";
+import { ChatReplyPreview } from "../../chat-route/chat-box/chat-reply-preview.js";
+import { isAgentStyle } from "../../chat-route/util.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { MessageTime } from "../../chat-route/chat-box/message-time.js";
+import { useTranslation } from "react-i18next";
+const ImagePreview = memo(
+  ({
+    url,
+    className,
+    classNameImage,
+    msg,
+    isZalo,
+    isTiktok,
+    isChatAllowed,
+    isReply,
+    ticket,
+    timeText,
+    isMasked = false,
+    ...props
+  }) => {
+    const { t } = useTranslation();
+    const user = getUser();
+    const ticketId = ticket?._id;
+    const [aspectRatio, setAspectRatio] = useState(null);
+    const handleImageLoad = (e) => {
+      const w = e?.currentTarget?.naturalWidth;
+      const h = e?.currentTarget?.naturalHeight;
+      if (w && h) setAspectRatio(`${w} / ${h}`);
+    };
+    const [setModalImages, setPreviewModal] = usePreviewImageStore(
+      useShallow((state) => [state.setModalImages, state.setPreviewModal])
+    );
+    const [setReplySelected] = useChatStore(
+      useShallow((state) => [state.setReplySelected, state.replySelected])
+    );
+    let contentImage = parseMessageUrls(url);
+    const urlSegmentCount = url ? url.split(/\|\||\n/).filter((s) => {
+      const t2 = s.trim();
+      try {
+        const p = new URL(t2);
+        return p.protocol === "http:" || p.protocol === "https:";
+      } catch {
+        return false;
+      }
+    }).length : 0;
+    if (!contentImage?.previewUrls?.length || urlSegmentCount > contentImage.previewUrls.length) {
+      if (!url) return null;
+      const segments = url.split(/\|\||\n/);
+      const validUrls = [];
+      let firstUrlIdx = -1;
+      let lastUrlIdx = -1;
+      segments.forEach((s, i) => {
+        const trimmed = s.trim();
+        try {
+          const p = new URL(trimmed);
+          if (p.protocol === "http:" || p.protocol === "https:") {
+            validUrls.push(trimmed);
+            if (firstUrlIdx === -1) firstUrlIdx = i;
+            lastUrlIdx = i;
+          }
+        } catch {
+        }
+      });
+      if (!validUrls.length) return null;
+      const beforeText = segments.slice(0, firstUrlIdx).map((s) => s.trim()).filter(Boolean).join("\n").trim();
+      const afterText = segments.slice(lastUrlIdx + 1).map((s) => s.trim()).filter(Boolean).join("\n").trim();
+      contentImage = { previewUrls: validUrls, beforeText, afterText };
+    }
+    const rawCaptionText = msg?.content?.text || contentImage.afterText || "";
+    const captionText = isMasked ? maskData(rawCaptionText) : rawCaptionText;
+    const displayBeforeText = isMasked ? maskData(contentImage?.beforeText ?? "") : contentImage?.beforeText;
+    const handleOpenPreviewImage = (index) => {
+      const images = contentImage?.previewUrls?.map((image) => ({
+        url: isJxlUrl(image) ? null : image,
+        name: image.split("/").pop(),
+        loading: isJxlUrl(image)
+      }));
+      setModalImages(images);
+      setPreviewModal({ isOpen: true, currentIndex: index || 0 });
+      contentImage?.previewUrls?.forEach((image, i) => {
+        if (!isJxlUrl(image)) return;
+        decodeJxlToBlobUrl(image).then((blobUrl) => {
+          const current = [...usePreviewImageStore.getState().modalImages];
+          current[i] = {
+            ...current[i],
+            url: blobUrl,
+            loading: false
+          };
+          usePreviewImageStore.getState().setModalImages(current);
+        }).catch(() => {
+          const current = [...usePreviewImageStore.getState().modalImages];
+          current[i] = {
+            ...current[i],
+            url: image,
+            loading: false
+          };
+          usePreviewImageStore.getState().setModalImages(current);
+        });
+      });
+    };
+    const handleReply = (url2) => {
+      if (!isZalo && !isTiktok || !isChatAllowed) {
+        return;
+      }
+      const index = contentImage?.previewUrls?.indexOf(url2);
+      setReplySelected({ ...msg, _id: msg._id + `_${index}` });
+    };
+    if (isReply) {
+      return /* @__PURE__ */ jsx("span", { className: cn("mt-1 text-xs text-foreground-secondary"), children: msg?.content?.type == "sticker" ? `[Sticker]` : t("chat:label.imageReplyPreview", {
+        content: isMasked ? maskData(contentImage?.afterText ?? "") : contentImage?.afterText,
+        defaultValue: "[H\xECnh \u1EA3nh] {content}"
+      }) });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      contentImage?.previewUrls?.length === 1 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "chat-box min-h-[160px] cursor-pointer overflow-hidden rounded-lg",
+            !isTiktok && "bg-chat-own-bubble",
+            className
+          ),
+          ...props,
+          children: [
+            msg?.extra_data?.reply_msg_info && /* @__PURE__ */ jsx(
+              ChatReplyPreview,
+              {
+                isAgent: isAgentStyle({ msg, ticket, user }),
+                ticketId,
+                isView: true,
+                classNameContent: "text-card-foreground",
+                className: "!m-0",
+                replyContent: {
+                  ...msg.extra_data?.reply_msg_info,
+                  _id: msg.extra_data?.reply_msg_info?.chat_message_id || msg.extra_data?.reply_msg_info?._id
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mx-2", children: displayBeforeText }),
+            /* @__PURE__ */ jsx(
+              ImageComponent,
+              {
+                src: contentImage?.previewUrls[0],
+                alt: "Sent image",
+                className: cn(
+                  "max-h-[280px] min-h-[40px] max-w-full scale-100 object-cover blur-0 grayscale-0 duration-700 ease-in-out",
+                  msg?.content?.type === "sticker" && isTiktok && "max-h-[150px] max-w-[150px]",
+                  classNameImage
+                ),
+                style: aspectRatio ? { aspectRatio } : void 0,
+                onLoad: handleImageLoad,
+                onClick: () => handleOpenPreviewImage(0),
+                draggable: false
+              }
+            ),
+            captionText && /* @__PURE__ */ jsx(
+              SafeHTML,
+              {
+                className: "mb-3 px-3",
+                html: convertURLsToLinks(captionText)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MessageTime,
+              {
+                timeText,
+                status: msg?.status,
+                className: "px-2 pb-1"
+              }
+            )
+          ]
+        }
+      ),
+      contentImage?.previewUrls?.length !== 1 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "chat-box max-w-[750px] cursor-pointer overflow-hidden rounded-lg object-contain",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mx-2", children: displayBeforeText }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-2",
+                  // 2 ảnh: 2 cột
+                  contentImage?.previewUrls?.length === 2 && "grid-cols-2",
+                  // 3 ảnh hoặc nhiều hơn: 3 cột (max)
+                  contentImage?.previewUrls?.length === 3 && "grid-cols-3",
+                  contentImage?.previewUrls?.length === 4 && "grid-cols-2",
+                  contentImage?.previewUrls?.length >= 5 && "grid-cols-3"
+                ),
+                children: contentImage?.previewUrls.map((url2, index) => /* @__PURE__ */ jsxs(ContextMenu, { children: [
+                  /* @__PURE__ */ jsx(
+                    ContextMenuTrigger,
+                    {
+                      onContextMenu: (e) => {
+                        if (!isChatAllowed) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        ImageComponent,
+                        {
+                          src: url2,
+                          alt: `Sent image ${index + 1}`,
+                          className: cn(
+                            "h-full w-full scale-100 object-cover blur-0 grayscale-0 duration-700 ease-in-out",
+                            "cursor-pointer rounded-md transition-opacity hover:opacity-90",
+                            contentImage?.previewUrls?.length === 1 && "max-h-96",
+                            contentImage?.previewUrls?.length >= 2 && contentImage?.previewUrls?.length <= 3 && "aspect-square",
+                            contentImage?.previewUrls?.length > 3 && "aspect-square"
+                          ),
+                          onClick: () => handleOpenPreviewImage(index),
+                          draggable: false
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ContextMenuContent, { className: "w-40", children: /* @__PURE__ */ jsx(
+                    ContextMenuItem,
+                    {
+                      onClick: () => {
+                        handleReply(url2);
+                      },
+                      children: t("common:action.reply", { defaultValue: "Tr\u1EA3 l\u1EDDi" })
+                    }
+                  ) })
+                ] }, index))
+              }
+            ),
+            captionText && /* @__PURE__ */ jsx(
+              SafeHTML,
+              {
+                className: "mx-3 mb-3",
+                html: convertURLsToLinks(captionText)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MessageTime,
+              {
+                timeText,
+                status: msg?.status,
+                className: "px-2 pb-1"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  },
+  (prevProps, nextProps) => prevProps.url === nextProps.url && prevProps.isZalo === nextProps.isZalo && prevProps.isTiktok === nextProps.isTiktok && prevProps.isChatAllowed === nextProps.isChatAllowed && prevProps.className === nextProps.className && prevProps.msg?.status === nextProps.msg?.status && prevProps.timeText === nextProps.timeText && prevProps.isMasked === nextProps.isMasked
+);
+ImagePreview.displayName = "ImagePreview";
+export {
+  ImagePreview
+};

package/components/custom/previews/instagram/index.js

@@ -0,0 +1,4 @@
+import InstagramSharePostPreview from "./instagram-share-post-preview.js";
+export {
+  InstagramSharePostPreview
+};

package/components/custom/previews/instagram/instagram-share-post-preview.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import {
+  fetchMicrolinkPreview,
+  LINK_PREVIEW_QUERY_OPTIONS
+} from "@zenify-omni/chat-js/utils/microlink.js";
+import { cn } from "../../../../lib/utils.js";
+const InstagramSharePostPreview = ({ msg, className, timeText }) => {
+  const url = msg.content?.url || msg.content?.src;
+  const description = msg.content?.description;
+  const title = msg.content?.title;
+  const { data: preview, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_LINK_PREVIEW, url],
+    queryFn: () => fetchMicrolinkPreview(url),
+    enabled: !!url,
+    ...LINK_PREVIEW_QUERY_OPTIONS
+  });
+  const thumbnail = preview?.image?.url || null;
+  const publisherName = preview?.publisher || preview?.title || "";
+  const logoUrl = preview?.logo?.url || null;
+  const [thumbnailError, setThumbnailError] = useState(false);
+  const [logoError, setLogoError] = useState(false);
+  const avatarFallback = publisherName ? publisherName.split(" ").slice(0, 2).map((w) => w[0]?.toUpperCase()).join("") : "IG";
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[260px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl shadow-md", children: [
+      description && /* @__PURE__ */ jsx("div", { className: "bg-white px-3 pb-2.5 pt-2.5", children: /* @__PURE__ */ jsx("p", { className: "break-words text-base leading-tight text-[#262626]", children: description }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cursor-pointer",
+          onClick: () => url && window.open(url, "_blank", "noopener,noreferrer"),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-[#fafafa] px-3 py-2.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 p-[2px]", children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-white", children: logoUrl && !logoError ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logoUrl,
+                  alt: publisherName,
+                  className: "h-full w-full object-cover",
+                  referrerPolicy: "no-referrer",
+                  onError: () => setLogoError(true)
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-[#262626]", children: avatarFallback }) }) }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-[#262626]", children: publisherName })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "relative h-[260px] w-full overflow-hidden bg-[#efefef]", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" }) : thumbnail && !thumbnailError ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnail,
+                alt: "Post",
+                className: "h-full w-full object-cover",
+                referrerPolicy: "no-referrer",
+                onError: () => setThumbnailError(true)
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2 bg-[#fafafa]", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 p-[2px]", children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[#262626]", children: avatarFallback }) }) }),
+              publisherName && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 px-3 text-center text-[12px] text-[#8e8e8e]", children: publisherName })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-white px-3 pb-3 pt-2.5", children: [
+              title && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm text-[#8e8e8e]", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-[#8e8e8e]", children: publisherName })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var instagram_share_post_preview_default = InstagramSharePostPreview;
+export {
+  instagram_share_post_preview_default as default
+};

package/components/custom/previews/link-preview.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardFooter } from "../../ui/card.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { parseMessageUrl, unwrapRedirectUrl } from "@zenify-omni/chat-js/utils/string.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import {
+  fetchMicrolinkPreview,
+  LINK_PREVIEW_QUERY_OPTIONS
+} from "@zenify-omni/chat-js/utils/microlink.js";
+function LinkPreview({
+  url,
+  isReply,
+  children,
+  className,
+  compact,
+  isMasked = false
+}) {
+  const contentImage = useMemo(() => {
+    const unwrapped = unwrapRedirectUrl(url);
+    if (unwrapped && unwrapped !== url) {
+      return { previewUrl: unwrapped, beforeText: "", afterText: "" };
+    }
+    const parsed = parseMessageUrl(url);
+    const previewUrl = unwrapRedirectUrl(parsed.previewUrl);
+    let afterText = parsed.afterText ?? "";
+    if (previewUrl && afterText.trim()) {
+      const escaped = previewUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      afterText = afterText.replace(new RegExp(`(\\s*${escaped})+`, "g"), "").trim();
+    }
+    return { ...parsed, previewUrl, afterText };
+  }, [url]);
+  const { data: preview, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_LINK_PREVIEW, contentImage.previewUrl],
+    queryFn: () => fetchMicrolinkPreview(contentImage.previewUrl),
+    enabled: !!contentImage.previewUrl,
+    ...LINK_PREVIEW_QUERY_OPTIONS
+  });
+  const loading = !!contentImage.previewUrl && isLoading;
+  const hostName = useMemo(() => {
+    try {
+      const urlWithProtocol = contentImage.previewUrl?.startsWith("http") ? contentImage.previewUrl : `https://${contentImage.previewUrl}`;
+      return new URL(urlWithProtocol).hostname;
+    } catch {
+      return contentImage.previewUrl || "";
+    }
+  }, [contentImage.previewUrl]);
+  const hrefUrl = useMemo(() => {
+    if (!contentImage.previewUrl) return "";
+    return contentImage.previewUrl.startsWith("http") ? contentImage.previewUrl : `https://${contentImage.previewUrl}`;
+  }, [contentImage.previewUrl]);
+  const renderText = () => /* @__PURE__ */ jsxs("span", { className: "whitespace-pre-wrap", children: [
+    contentImage.beforeText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        dangerouslySetInnerHTML: {
+          __html: isMasked ? maskData(contentImage.beforeText) : contentImage.beforeText
+        }
+      }
+    ),
+    contentImage.previewUrl && (isReply ? /* @__PURE__ */ jsx("span", { children: contentImage.previewUrl }) : /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: hrefUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-primary underline",
+        children: contentImage.previewUrl
+      }
+    )),
+    contentImage.afterText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        dangerouslySetInnerHTML: {
+          __html: isMasked ? maskData(contentImage.afterText) : contentImage.afterText
+        }
+      }
+    )
+  ] });
+  if (loading) {
+    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" })
+    ] }) });
+  }
+  if (isReply) {
+    return /* @__PURE__ */ jsx("div", { className: "mt-1.5 truncate text-xs text-foreground-secondary", children: hostName && /* @__PURE__ */ jsxs("p", { className: "truncate", children: [
+      "[Link] ",
+      renderText()
+    ] }) });
+  }
+  if (!preview) {
+    if (compact) return null;
+    return /* @__PURE__ */ jsxs("span", { children: [
+      renderText(),
+      children
+    ] });
+  }
+  if (compact) {
+    if (!preview.image && !preview.title) return null;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: hrefUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: cn("block overflow-hidden rounded-md", className),
+        children: [
+          preview.image && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview.image.url,
+              alt: preview.title,
+              className: "h-40 w-full object-cover",
+              referrerPolicy: "no-referrer"
+            }
+          ),
+          (preview.title || hostName) && /* @__PURE__ */ jsxs("div", { className: "pt-2", children: [
+            preview.title && /* @__PURE__ */ jsx("p", { className: "text-md line-clamp-2 font-semibold text-foreground", children: preview.title }),
+            hostName && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: hostName })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full overflow-hidden bg-card", className), children: [
+    preview.image && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: preview.image.url,
+        alt: preview.title,
+        className: "h-28 w-full object-cover",
+        referrerPolicy: "no-referrer"
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 line-clamp-1 text-lg font-semibold", children: preview.title }),
+      /* @__PURE__ */ jsx("p", { className: "line-clamp-2 truncate text-sm text-muted-foreground", children: preview.description }),
+      renderText()
+    ] }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "flex items-center justify-between p-4 pt-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: hostName }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: hrefUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "flex items-center gap-1 text-sm text-primary hover:underline",
+          children: [
+            "Visit ",
+            /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+          ]
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+export {
+  LinkPreview
+};