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

package/components/custom/previews/facebook/facebook-group-preview.js

@@ -0,0 +1,103 @@
+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";
+import { useTranslation } from "react-i18next";
+const FacebookGroupPreview = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const url = msg.content?.url || msg.content?.src;
+  const description = msg.content?.description;
+  const title = msg.content?.title;
+  const renderWithLinks = (text) => {
+    const parts = text.split(/(https?:\/\/[^\s]+)/g);
+    const result = [];
+    parts.forEach((part, i) => {
+      if (i % 2 === 1) {
+        const trailingMatch = part.match(/[.,!?;:)\]>"']+$/);
+        const cleanUrl = trailingMatch ? part.slice(0, -trailingMatch[0].length) : part;
+        const trailing = trailingMatch ? trailingMatch[0] : "";
+        result.push(
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: cleanUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-[#1877f2] underline",
+              onClick: (e) => e.stopPropagation(),
+              children: cleanUrl
+            },
+            i
+          )
+        );
+        if (trailing) result.push(trailing);
+      } else {
+        result.push(part);
+      }
+    });
+    return result;
+  };
+  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("") : "FB";
+  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-[#1c1e21]", children: renderWithLinks(description) }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative h-[260px] w-full overflow-hidden bg-gray-200", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" }) : thumbnail && !thumbnailError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: thumbnail,
+          alt: "Group",
+          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-[#f0f2f5]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#e4e6eb]", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[#1c1e21]", children: avatarFallback }) }),
+        (title || publisherName) && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 px-3 text-center text-[12px] text-[#65676b]", children: title || publisherName })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-[#f0f2f5] 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-[#e4e6eb]", 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-[#1c1e21]", children: avatarFallback }) }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "truncate text-[15px] font-bold uppercase leading-tight text-[#1c1e21]", children: title || publisherName }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "bg-white px-3 pb-4 pt-3", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "w-full rounded-md bg-[#e4e6eb] py-1.5 text-[14px] font-semibold text-[#1c1e21]",
+          onClick: () => url && window.open(url, "_blank", "noopener,noreferrer"),
+          children: t("common:action.viewGroup", { defaultValue: "Xem nh\xF3m" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_group_preview_default = FacebookGroupPreview;
+export {
+  facebook_group_preview_default as default
+};

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { RetryImage } from "../../retry-image.js";
+import { cn } from "../../../../lib/utils.js";
+import usePreviewImageStore from "../../../../store/preview-image-store.js";
+import { useShallow } from "zustand/react/shallow";
+import { convertURLsToLinks } from "@zenify-omni/chat-js/utils/string.js";
+import SafeHTML from "../../SafeHTML.js";
+const parseUrls = (src) => {
+  if (!src) return [];
+  return src.split(/\|\||\n/).map((s) => s.trim()).filter((s) => {
+    try {
+      const p = new URL(s);
+      return p.protocol === "http:" || p.protocol === "https:";
+    } catch {
+      return false;
+    }
+  });
+};
+const FacebookImagePreview = ({ msg, className, timeText }) => {
+  const src = msg.content?.src || msg.content?.url;
+  const caption = msg.content?.text || "";
+  const urls = parseUrls(src);
+  const [setModalImages, setPreviewModal] = usePreviewImageStore(
+    useShallow((state) => [state.setModalImages, state.setPreviewModal])
+  );
+  if (!urls.length) return null;
+  const openPreview = (index) => {
+    setModalImages(urls.map((u) => ({ url: u, name: u.split("/").pop() })));
+    setPreviewModal({ isOpen: true, currentIndex: index });
+  };
+  const isSingle = urls.length === 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn(className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg bg-white shadow-md", children: [
+      isSingle ? /* @__PURE__ */ jsx(
+        RetryImage,
+        {
+          src: urls[0],
+          alt: "Image",
+          className: "block max-h-[280px] min-h-[40px] max-w-full cursor-pointer object-cover",
+          onClick: () => openPreview(0),
+          draggable: false
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid gap-0.5",
+            urls.length === 2 && "grid-cols-2",
+            urls.length === 3 && "grid-cols-3",
+            urls.length === 4 && "grid-cols-2",
+            urls.length >= 5 && "grid-cols-3"
+          ),
+          children: urls.map((u, i) => /* @__PURE__ */ jsx(
+            RetryImage,
+            {
+              src: u,
+              alt: `Image ${i + 1}`,
+              className: "aspect-square h-full w-full cursor-pointer object-cover transition-opacity hover:opacity-90",
+              onClick: () => openPreview(i),
+              draggable: false
+            },
+            i
+          ))
+        }
+      ),
+      caption && /* @__PURE__ */ jsx(
+        SafeHTML,
+        {
+          className: "px-3 py-2 text-sm text-[#3E3E3E]",
+          html: convertURLsToLinks(caption)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_image_preview_default = FacebookImagePreview;
+export {
+  facebook_image_preview_default as default
+};

package/components/custom/previews/facebook/facebook-page-preview.js

@@ -0,0 +1,85 @@
+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 FacebookPagePreview = ({ msg, className, timeText }) => {
+  const url = msg.content?.url || msg.content?.src;
+  const title = msg.content?.title;
+  const description = msg.content?.description;
+  const { data: preview, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_LINK_PREVIEW, url],
+    queryFn: () => fetchMicrolinkPreview(url),
+    enabled: !!url,
+    ...LINK_PREVIEW_QUERY_OPTIONS
+  });
+  const renderWithLinks = (text) => {
+    const parts = text.split(/(https?:\/\/[^\s]+)/g);
+    const result = [];
+    parts.forEach((part, i) => {
+      if (i % 2 === 1) {
+        const trailingMatch = part.match(/[.,!?;:)\]>"']+$/);
+        const cleanUrl = trailingMatch ? part.slice(0, -trailingMatch[0].length) : part;
+        const trailing = trailingMatch ? trailingMatch[0] : "";
+        result.push(
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: cleanUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-[#1877f2] underline",
+              onClick: (e) => e.stopPropagation(),
+              children: cleanUrl
+            },
+            i
+          )
+        );
+        if (trailing) result.push(trailing);
+      } else {
+        result.push(part);
+      }
+    });
+    return result;
+  };
+  const publisherName = title;
+  const thumbnailUrl = preview?.image?.url || null;
+  const [thumbnailError, setThumbnailError] = useState(false);
+  const avatarFallback = publisherName ? publisherName.split(" ").slice(0, 2).map((w) => w[0]?.toUpperCase()).join("") : "FB";
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[260px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl bg-white 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-[#1c1e21]", children: renderWithLinks(description) }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cursor-pointer",
+          onClick: () => url && window.open(url, "_blank", "noopener,noreferrer"),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden bg-white", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-none" }) : thumbnailUrl && !thumbnailError ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnailUrl,
+                alt: publisherName,
+                className: "h-full w-full object-cover",
+                referrerPolicy: "no-referrer",
+                onError: () => setThumbnailError(true)
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-[#1877f2]", children: /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold text-white", children: avatarFallback }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }) : /* @__PURE__ */ jsx("p", { className: "truncate text-center text-[15px] font-bold uppercase text-[#1c1e21]", children: publisherName }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_page_preview_default = FacebookPagePreview;
+export {
+  facebook_page_preview_default as default
+};

package/components/custom/previews/facebook/facebook-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 FacebookPostPreview = ({ 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("") : "FB";
+  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-[#1c1e21]", 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-[#f0f2f5] 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-[#e4e6eb]", 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-[#1c1e21]", children: avatarFallback }) }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-[#1c1e21]", children: publisherName })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "relative h-[200px] w-full overflow-hidden bg-gray-200", 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-[#f0f2f5]", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#e4e6eb]", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[#1c1e21]", children: avatarFallback }) }),
+              publisherName && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 px-3 text-center text-[12px] text-[#65676b]", 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-[#65676b]", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-[#65676b]", children: publisherName })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_post_preview_default = FacebookPostPreview;
+export {
+  facebook_post_preview_default as default
+};

package/components/custom/previews/facebook/facebook-reel-preview.js

@@ -0,0 +1,83 @@
+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 FacebookReelPreview = ({ msg, className, timeText }) => {
+  const { src: url, description } = msg.content ?? {};
+  const { data: preview, isLoading: loading } = useQuery({
+    queryKey: [QUERY_KEY.GET_LINK_PREVIEW, url],
+    queryFn: () => fetchMicrolinkPreview(url),
+    enabled: !!url,
+    ...LINK_PREVIEW_QUERY_OPTIONS
+  });
+  const thumbnail = preview?.image?.url || preview?.video?.poster || 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("") : "FB";
+  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: "line-clamp-2 text-base leading-tight text-[#1c1e21]", children: description }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cursor-pointer",
+          onClick: () => url && window.open(url, "_blank", "noopener,noreferrer"),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative h-[380px] w-full overflow-hidden bg-gray-200", children: [
+              loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" }) : thumbnail && !thumbnailError ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: thumbnail,
+                  alt: "Reel",
+                  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-[#f0f2f5]", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#e4e6eb]", children: /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[#1c1e21]", children: avatarFallback }) }),
+                publisherName && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 px-3 text-center text-[12px] text-[#65676b]", children: publisherName })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/40", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "white",
+                  className: "ml-1 h-6 w-6",
+                  children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+                }
+              ) }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "bg-[#f0f2f5] px-3 pb-3 pt-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#e4e6eb]", 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-[#1c1e21]", children: avatarFallback }) }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[#65676b]", children: publisherName })
+            ] }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_reel_preview_default = FacebookReelPreview;
+export {
+  facebook_reel_preview_default as default
+};

package/components/custom/previews/facebook/facebook-sticker-preview.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { cn } from "../../../../lib/utils.js";
+const FacebookStickerPreview = ({ msg, className, timeText }) => {
+  const url = msg.content?.src || msg.content?.url;
+  if (!url) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[128px]", className), children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt: "Sticker",
+        className: "h-[128px] w-[128px] bg-transparent object-contain",
+        referrerPolicy: "no-referrer"
+      }
+    ),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_sticker_preview_default = FacebookStickerPreview;
+export {
+  facebook_sticker_preview_default as default
+};

package/components/custom/previews/facebook/facebook-video-preview.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { cn } from "../../../../lib/utils.js";
+import { parseMessageUrl } from "@zenify-omni/chat-js/utils/string.js";
+const MAX_WIDTH = 400;
+const MAX_HEIGHT = 500;
+const formatDuration = (seconds) => {
+  if (!seconds || isNaN(seconds)) return null;
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+const FacebookVideoPreview = ({ msg, className, timeText }) => {
+  const {
+    src: rawSrc,
+    description,
+    caption,
+    thumbnail,
+    duration
+  } = msg.content ?? {};
+  const { afterText } = parseMessageUrl(rawSrc);
+  const src = afterText && rawSrc?.endsWith(afterText) ? rawSrc.slice(0, -afterText.length) : rawSrc;
+  const captionText = description || caption || null;
+  const [playing, setPlaying] = useState(false);
+  const [videoDuration, setVideoDuration] = useState(
+    duration ? formatDuration(duration) : null
+  );
+  const [size, setSize] = useState(null);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    const vid = videoRef.current;
+    if (!vid) return;
+    const onMeta = () => {
+      if (!isNaN(vid.duration)) setVideoDuration(formatDuration(vid.duration));
+      const vw = vid.videoWidth;
+      const vh = vid.videoHeight;
+      if (vw && vh) {
+        const scale = Math.min(1, MAX_WIDTH / vw, MAX_HEIGHT / vh);
+        setSize({
+          width: Math.round(vw * scale),
+          height: Math.round(vh * scale)
+        });
+      }
+    };
+    vid.addEventListener("loadedmetadata", onMeta);
+    return () => vid.removeEventListener("loadedmetadata", onMeta);
+  }, []);
+  const handlePlay = (e) => {
+    e.stopPropagation();
+    const vid = videoRef.current;
+    if (!vid) return;
+    vid.play().catch(() => setPlaying(false));
+    setPlaying(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: size ? { width: size.width } : { width: MAX_WIDTH },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl shadow-md", children: [
+          captionText && /* @__PURE__ */ jsx("div", { className: "bg-[#1c1e21] px-3 pb-2 pt-2.5", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-tight text-white", children: captionText }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative bg-black",
+              style: size ? { height: size.height } : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "video",
+                  {
+                    ref: videoRef,
+                    className: "block h-full w-full object-contain",
+                    poster: thumbnail || void 0,
+                    preload: "metadata",
+                    controls: playing,
+                    onPause: () => setPlaying(false),
+                    onEnded: () => setPlaying(false),
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx("source", { src, type: "video/mp4" })
+                  }
+                ),
+                !playing && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 flex cursor-pointer items-center justify-center",
+                    onClick: handlePlay,
+                    children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50", children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        viewBox: "0 0 24 24",
+                        fill: "white",
+                        className: "ml-1 h-6 w-6",
+                        children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+                      }
+                    ) })
+                  }
+                ),
+                !playing && videoDuration && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 text-[11px] font-medium text-white", children: videoDuration })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+      ]
+    }
+  );
+};
+var facebook_video_preview_default = FacebookVideoPreview;
+export {
+  facebook_video_preview_default as default
+};

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

@@ -0,0 +1,24 @@
+import FacebookPostPreview from "./facebook-post-preview.js";
+import FacebookReelPreview from "./facebook-reel-preview.js";
+import FacebookEventPreview from "./facebook-event-preview.js";
+import FacebookPagePreview from "./facebook-page-preview.js";
+import FacebookGroupPreview from "./facebook-group-preview.js";
+import FacebookStickerPreview from "./facebook-sticker-preview.js";
+import FacebookImagePreview from "./facebook-image-preview.js";
+import FacebookFilePreview from "./facebook-file-preview.js";
+import FacebookAppointmentBookingPreview from "./facebook-appointment-booking-preview.js";
+import FacebookVideoPreview from "./facebook-video-preview.js";
+import FacebookAudioPreview from "./facebook-audio-preview.js";
+export {
+  FacebookAppointmentBookingPreview,
+  FacebookAudioPreview,
+  FacebookEventPreview,
+  FacebookFilePreview,
+  FacebookGroupPreview,
+  FacebookImagePreview,
+  FacebookPagePreview,
+  FacebookPostPreview,
+  FacebookReelPreview,
+  FacebookStickerPreview,
+  FacebookVideoPreview
+};