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

package/components/custom/pagination.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "@radix-ui/react-icons";
+import { Button } from "./button.js";
+import { useTranslation } from "react-i18next";
+function Pagination({
+  page,
+  pageSize,
+  totalRecords,
+  setPage,
+  setPageSize
+}) {
+  const { t } = useTranslation();
+  const pageCount = Math.ceil(totalRecords / pageSize) || 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between overflow-auto px-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.show", { defaultValue: "Hi\u1EC3n th\u1ECB" }) }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: `${pageSize}`,
+          onValueChange: (value) => {
+            setPageSize(Number(value));
+          },
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+            /* @__PURE__ */ jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50, 100].map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:table.ofTotalRecords", {
+        totalRecords: totalRecords ?? 0
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: t("common:table.pageOfCount", { page: page ?? 1, pageCount }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "hidden h-8 w-8 p-0 lg:flex",
+            onClick: () => setPage(1),
+            disabled: page === 1,
+            children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "h-8 w-8 p-0",
+            onClick: () => setPage(page - 1),
+            disabled: page === 1,
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "h-8 w-8 p-0",
+            onClick: () => setPage(page + 1),
+            disabled: page === pageCount,
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "hidden h-8 w-8 p-0 lg:flex",
+            onClick: () => setPage(pageCount),
+            disabled: page === pageCount,
+            children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  Pagination as default
+};

package/components/custom/popup-confirm.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Label } from "./label.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../ui/dialog.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip.js";
+import { useTranslation } from "react-i18next";
+function PopupConfirm({
+  trigger = /* @__PURE__ */ jsx(Button, { children: "Open Confirm Dialog" }),
+  title = "Are you sure?",
+  description = "This action cannot be undone.",
+  onConfirm,
+  confirmText = "X\xE1c nh\u1EADn",
+  cancelText = "H\u1EE7y",
+  confirmButtonVariant = "default",
+  isOpen = false,
+  showTooltip = false,
+  showCheckbox = false,
+  checkboxLabel = "",
+  checkboxDefaultChecked = false,
+  onOpenChanged,
+  onCancel,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(isOpen);
+  const [checkboxChecked, setCheckboxChecked] = useState(checkboxDefaultChecked);
+  const handleConfirm = () => {
+    onConfirm(checkboxChecked);
+    handleOpenChange(false);
+    setCheckboxChecked(checkboxDefaultChecked);
+  };
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChanged?.(open2);
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { open, modal: props.modal, onOpenChange: handleOpenChange, children: [
+    showTooltip ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        DialogTrigger,
+        {
+          asChild: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(true);
+          },
+          children: trigger
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: t("common:action.delete", { defaultValue: "X\xF3a" }) })
+    ] }) }) : /* @__PURE__ */ jsx(
+      DialogTrigger,
+      {
+        asChild: true,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(true);
+        },
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "sm:max-w-[425px]",
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "[overflow-wrap:anywhere]", children: title }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "[overflow-wrap:anywhere]", children: description })
+          ] }),
+          showCheckbox && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 py-4", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: "checkbox",
+                checked: checkboxChecked,
+                onCheckedChange: setCheckboxChecked
+              }
+            ),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox", className: "text-sm", children: checkboxLabel })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => {
+                  handleOpenChange(false);
+                  onCancel?.();
+                },
+                children: cancelText
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { variant: confirmButtonVariant, onClick: handleConfirm, children: confirmText })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PopupConfirm as default
+};

package/components/custom/previews/facebook/facebook-appointment-booking-preview.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { cn } from "../../../../lib/utils.js";
+import { getTenantTz } from "@zenify-omni/chat-js/utils/date.js";
+import { CalendarClock } from "lucide-react";
+import { format } from "date-fns";
+import { TZDate } from "@date-fns/tz";
+import { useTranslation } from "react-i18next";
+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 BOOKING_STATUS_COLOR = {
+  requested: "text-[#1877f2]",
+  confirmed: "text-green-600",
+  declined: "text-red-500",
+  cancelled: "text-red-500",
+  scheduled: "text-green-600"
+};
+const getTimestamp = (value) => {
+  if (!value) return null;
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return parseInt(value, 10);
+  if (value.$numberLong) return parseInt(value.$numberLong, 10);
+  return null;
+};
+const FacebookAppointmentBookingPreview = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const bookingData = msg.extra_data?.booking_data || {};
+  const { booking_id, status, start_time, end_time, timezone } = bookingData;
+  const tz = timezone || getTenantTz();
+  const startTs = getTimestamp(start_time);
+  const endTs = getTimestamp(end_time);
+  const formatTs = (ts) => {
+    if (!ts) return "";
+    try {
+      return format(new TZDate(ts * 1e3, tz), "dd/MM/yyyy HH:mm");
+    } catch {
+      return "";
+    }
+  };
+  const statusLabel = BOOKING_STATUS_LABEL[status] || status || i18n.t("common:action.schedule", {
+    defaultValue: "\u0110\u1EB7t l\u1ECBch"
+  });
+  const statusColor = BOOKING_STATUS_COLOR[status] || "text-[#1877f2]";
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[290px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl shadow-md", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-[#1877f2] px-4 py-3", children: [
+        /* @__PURE__ */ jsx(CalendarClock, { className: "h-5 w-5 shrink-0 text-white" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[15px] font-semibold text-white", children: t("common:action.bookAppointment", {
+          defaultValue: "\u0110\u1EB7t l\u1ECBch h\u1EB9n"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 bg-white px-4 py-3", children: [
+        booking_id && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[#65676b]", children: t("common:label.bookingCode", { defaultValue: "M\xE3 \u0111\u1EB7t l\u1ECBch" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#1c1e21]", children: booking_id })
+        ] }),
+        status && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[#65676b]", children: t("common:label.status", { defaultValue: "Tr\u1EA1ng th\xE1i" }) }),
+          /* @__PURE__ */ jsx("span", { className: cn("text-[13px] font-semibold", statusColor), children: statusLabel })
+        ] }),
+        startTs && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[#65676b]", children: t("common:action.start", { defaultValue: "B\u1EAFt \u0111\u1EA7u" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#1c1e21]", children: formatTs(startTs) })
+        ] }),
+        endTs && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[#65676b]", children: t("common:action.end", { defaultValue: "K\u1EBFt th\xFAc" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#1c1e21]", children: formatTs(endTs) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_appointment_booking_preview_default = FacebookAppointmentBookingPreview;
+export {
+  facebook_appointment_booking_preview_default as default
+};

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

@@ -0,0 +1,130 @@
+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 BAR_COUNT = 30;
+const formatTime = (seconds) => {
+  if (!seconds || isNaN(seconds)) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+const FALLBACK_BARS = Array.from(
+  { length: BAR_COUNT },
+  (_, i) => Math.max(0.1, Math.abs(Math.sin(i * 0.7 + 1.2)))
+);
+const FacebookAudioPreview = ({ msg, className, timeText }) => {
+  const { src: rawSrc, duration } = msg.content ?? {};
+  const { afterText } = parseMessageUrl(rawSrc);
+  const src = afterText && rawSrc?.endsWith(afterText) ? rawSrc.slice(0, -afterText.length) : rawSrc;
+  const [playing, setPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [totalDuration, setTotalDuration] = useState(duration || 0);
+  const audioRef = useRef(null);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onMeta = () => {
+      if (!isNaN(audio.duration)) setTotalDuration(audio.duration);
+    };
+    const onTime = () => setCurrentTime(audio.currentTime);
+    const onEnded = () => {
+      setPlaying(false);
+      setCurrentTime(0);
+      audio.currentTime = 0;
+    };
+    audio.addEventListener("loadedmetadata", onMeta);
+    audio.addEventListener("timeupdate", onTime);
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.removeEventListener("loadedmetadata", onMeta);
+      audio.removeEventListener("timeupdate", onTime);
+      audio.removeEventListener("ended", onEnded);
+    };
+  }, []);
+  const togglePlay = (e) => {
+    e.stopPropagation();
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+      setPlaying(false);
+    } else {
+      audio.play().catch(() => setPlaying(false));
+      setPlaying(true);
+    }
+  };
+  const handleSeek = (e) => {
+    e.stopPropagation();
+    const audio = audioRef.current;
+    if (!audio || !totalDuration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    audio.currentTime = ratio * totalDuration;
+    setCurrentTime(audio.currentTime);
+  };
+  const progress = totalDuration ? currentTime / totalDuration : 0;
+  const filledBars = Math.round(progress * BAR_COUNT);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[280px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-2xl bg-[#e9f0ff] px-3 py-2.5 shadow-sm", children: [
+      /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: togglePlay,
+          className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-[#0866ff] text-white transition-opacity hover:opacity-90",
+          children: playing ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "h-4 w-4",
+              children: /* @__PURE__ */ jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "ml-0.5 h-4 w-4",
+              children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex cursor-pointer items-end gap-[2px]",
+            style: { height: 28 },
+            onClick: handleSeek,
+            children: FALLBACK_BARS.map((h, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 rounded-full transition-colors duration-75",
+                style: {
+                  height: `${h * 100}%`,
+                  minWidth: 2,
+                  backgroundColor: i < filledBars ? "#0866ff" : "#a8b9e0"
+                }
+              },
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] font-medium text-[#65676b]", children: formatTime(
+          playing || currentTime > 0 ? currentTime : totalDuration
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_audio_preview_default = FacebookAudioPreview;
+export {
+  facebook_audio_preview_default as default
+};

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../../ui/tooltip.js";
+import { CalendarDays } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const FacebookEventPreview = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const 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;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[260px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl 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-[160px] w-full overflow-hidden bg-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2 bg-[#f0f2f5]", children: [
+        /* @__PURE__ */ jsx(CalendarDays, { className: "h-10 w-10 text-[#1877f2]" }),
+        title && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 px-3 text-center text-[12px] text-[#65676b]", children: title })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-white px-3 pb-0 pt-2.5", children: title && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-[15px] font-bold uppercase leading-tight text-[#1c1e21]", children: title }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { variant: "dark", side: "top", children: title })
+      ] }) }) }),
+      /* @__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.viewEvent", { defaultValue: "Xem s\u1EF1 ki\u1EC7n" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_event_preview_default = FacebookEventPreview;
+export {
+  facebook_event_preview_default as default
+};

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

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Download } from "lucide-react";
+import { saveAs } from "file-saver";
+import { cn } from "../../../../lib/utils.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import {
+  getIconForContentType,
+  getColor,
+  getFileTypeDisplay,
+  getMimeType,
+  mimeTypes,
+  checkMimeType
+} from "../file-preview.js";
+const FacebookFilePreview = ({ msg, className, timeText }) => {
+  const url = msg.content?.src || msg.content?.url;
+  const [fileData, setFileData] = useState({
+    fileName: "Unnamed file",
+    extension: "",
+    mimeType: ""
+  });
+  useEffect(() => {
+    if (!url) return;
+    const process = async () => {
+      let fileName = null;
+      if (!fileName) {
+        try {
+          fileName = new URL(url).pathname.split("/").pop() || "";
+        } catch {
+          fileName = url.split("?")[0].split("/").pop() || "";
+        }
+      }
+      const cleanName = decodeURIComponent(fileName.split("?")[0]);
+      const extension = cleanName.split(".").pop().toLowerCase();
+      let mimeType = mimeTypes[extension] ? getMimeType(extension) : await checkMimeType(url);
+      setFileData({ fileName: cleanName, extension, mimeType });
+    };
+    process();
+  }, [url]);
+  const handleDownload = async (e) => {
+    e.stopPropagation();
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        referrerPolicy: "no-referrer"
+      });
+      const blob = await response.blob();
+      saveAs(blob, fileData.fileName || `file.${fileData.extension}`);
+    } catch {
+      window.open(url, "_blank");
+    }
+  };
+  if (!url) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[280px]", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "cursor-pointer overflow-hidden rounded-xl shadow-md",
+          getColor(fileData.mimeType, fileData.fileName)
+        ),
+        onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-white px-3 py-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full",
+                getColor(fileData.mimeType, fileData.fileName)
+              ),
+              children: getIconForContentType(fileData.mimeType)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "break-words text-base font-medium text-[#1c1e21]", children: fileData.fileName }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-[#65676b]", children: getFileTypeDisplay(fileData.mimeType, fileData.fileName) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleDownload,
+              className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[#0866ff] text-white transition-colors hover:bg-[#0654d4]",
+              children: /* @__PURE__ */ jsx(Download, { size: 14 })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+  ] });
+};
+var facebook_file_preview_default = FacebookFilePreview;
+export {
+  facebook_file_preview_default as default
+};