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

package/components/custom/viewers/pdf-viewer.js

@@ -0,0 +1,333 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ZoomIn,
+  ZoomOut,
+  RotateCw,
+  PanelLeftOpen,
+  PanelLeftClose
+} from "lucide-react";
+import { Button } from "../button.js";
+import { Input } from "../../ui/input.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
+const ZOOM_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
+const PDF_OPTIONS = { withCredentials: false };
+function PdfViewer({ file }) {
+  const { t } = useTranslation();
+  const [numPages, setNumPages] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageInput, setPageInput] = useState("1");
+  const [zoomIndex, setZoomIndex] = useState(2);
+  const [rotation, setRotation] = useState(0);
+  const [showSidebar, setShowSidebar] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [pdfUrl, setPdfUrl] = useState(null);
+  const zoom = ZOOM_STEPS[zoomIndex];
+  const mainRef = useRef(null);
+  const dragRef = useRef({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    scrollLeft: 0,
+    scrollTop: 0
+  });
+  const handleMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    const el = mainRef.current;
+    if (!el) return;
+    dragRef.current = {
+      dragging: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      scrollLeft: el.scrollLeft,
+      scrollTop: el.scrollTop
+    };
+    el.style.cursor = "grabbing";
+    el.style.userSelect = "none";
+  }, []);
+  const handleMouseMove = useCallback((e) => {
+    const d = dragRef.current;
+    if (!d.dragging) return;
+    const el = mainRef.current;
+    if (!el) return;
+    el.scrollLeft = d.scrollLeft - (e.clientX - d.startX);
+    el.scrollTop = d.scrollTop - (e.clientY - d.startY);
+  }, []);
+  const stopDrag = useCallback(() => {
+    dragRef.current.dragging = false;
+    const el = mainRef.current;
+    if (!el) return;
+    el.style.cursor = "grab";
+    el.style.userSelect = "";
+  }, []);
+  useEffect(() => {
+    const abort = new AbortController();
+    setLoading(true);
+    setError(false);
+    setNumPages(null);
+    setCurrentPage(1);
+    setPageInput("1");
+    setPdfUrl(null);
+    let blobUrl = null;
+    fetch(file.url, { signal: abort.signal, referrerPolicy: "no-referrer" }).then((r) => {
+      if (!r.ok) throw new Error("fetch failed");
+      return r.blob();
+    }).then((blob) => {
+      if (abort.signal.aborted) return;
+      blobUrl = URL.createObjectURL(blob);
+      setPdfUrl(blobUrl);
+    }).catch((err) => {
+      if (err.name !== "AbortError") {
+        setError(true);
+        setLoading(false);
+      }
+    });
+    return () => {
+      abort.abort();
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
+    };
+  }, [file.url]);
+  const onDocumentLoadSuccess = useCallback(({ numPages: numPages2 }) => {
+    setNumPages(numPages2);
+    setLoading(false);
+  }, []);
+  const goToPage = useCallback(
+    (n) => {
+      const p = Math.max(1, Math.min(n, numPages ?? 1));
+      setCurrentPage(p);
+      setPageInput(String(p));
+      document.getElementById(`pdf-page-${p}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    },
+    [numPages]
+  );
+  const handlePageInputBlur = () => {
+    const n = parseInt(pageInput, 10);
+    if (!isNaN(n)) goToPage(n);
+    else setPageInput(String(currentPage));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-wrap items-center gap-2 border-b border-border bg-muted/30 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          onClick: () => setShowSidebar((v) => !v),
+          "aria-label": "Sidebar",
+          children: showSidebar ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          disabled: currentPage <= 1,
+          onClick: () => goToPage(currentPage - 1),
+          "aria-label": t("common:action.previousPage", {
+            defaultValue: "Trang tr\u01B0\u1EDBc"
+          }),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: pageInput,
+            onChange: (e) => setPageInput(e.target.value),
+            onBlur: handlePageInputBlur,
+            onKeyDown: (e) => e.key === "Enter" && handlePageInputBlur(),
+            className: "h-6 w-10 text-center text-xs",
+            "aria-label": t("common:label.pageNumber", {
+              defaultValue: "S\u1ED1 trang"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          "/ ",
+          numPages ?? "..."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          disabled: currentPage >= (numPages ?? 1),
+          onClick: () => goToPage(currentPage + 1),
+          "aria-label": "Trang sau",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          disabled: zoomIndex === 0,
+          onClick: () => setZoomIndex((v) => v - 1),
+          "aria-label": t("common:action.minimize", { defaultValue: "Thu nh\u1ECF" }),
+          children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-[46px] text-center text-xs", children: [
+        Math.round(zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          disabled: zoomIndex === ZOOM_STEPS.length - 1,
+          onClick: () => setZoomIndex((v) => v + 1),
+          "aria-label": t("common:action.zoomIn", { defaultValue: "Ph\xF3ng to" }),
+          children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          onClick: () => setRotation((r) => (r + 90) % 360),
+          "aria-label": "Xoay",
+          children: /* @__PURE__ */ jsx(RotateCw, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+      showSidebar && /* @__PURE__ */ jsxs("div", { className: "flex w-32 flex-shrink-0 flex-col border-r border-border bg-muted/20", children: [
+        /* @__PURE__ */ jsx("p", { className: "flex-shrink-0 px-2 py-1.5 text-xs font-medium uppercase text-muted-foreground", children: i18n.t("common:label.page", { defaultValue: "Trang" }) }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: numPages && pdfUrl && /* @__PURE__ */ jsx(
+          Document,
+          {
+            file: pdfUrl,
+            options: PDF_OPTIONS,
+            loading: null,
+            error: null,
+            children: Array.from({ length: numPages }, (_, i) => i + 1).map(
+              (p) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => goToPage(p),
+                  className: cn(
+                    "group flex flex-col items-center gap-1 rounded p-1 transition-colors",
+                    currentPage === p ? "bg-primary/10 ring-1 ring-primary" : "hover:bg-muted"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Page,
+                      {
+                        pageNumber: p,
+                        width: 90,
+                        renderAnnotationLayer: false,
+                        renderTextLayer: false,
+                        className: "overflow-hidden rounded shadow-sm"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-xs",
+                          currentPage === p ? "font-semibold text-primary" : "text-muted-foreground"
+                        ),
+                        children: p
+                      }
+                    )
+                  ]
+                },
+                p
+              )
+            )
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: mainRef,
+          className: "flex-1 overflow-auto",
+          style: { cursor: "grab" },
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: stopDrag,
+          onMouseLeave: stopDrag,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 px-4 py-6", children: [
+            loading && /* @__PURE__ */ jsx(Skeleton, { className: "h-[800px] w-[600px]" }),
+            error && /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: t("common:toast.loadPdfFailed", {
+              defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i PDF"
+            }) }) }),
+            pdfUrl && /* @__PURE__ */ jsx(
+              Document,
+              {
+                file: pdfUrl,
+                options: PDF_OPTIONS,
+                onLoadSuccess: onDocumentLoadSuccess,
+                onLoadError: () => {
+                  setError(true);
+                  setLoading(false);
+                },
+                loading: null,
+                error: null,
+                children: numPages && Array.from({ length: numPages }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: `pdf-page-${p}`,
+                    className: "mb-4 shadow-md",
+                    children: /* @__PURE__ */ jsx(
+                      Page,
+                      {
+                        pageNumber: p,
+                        scale: zoom,
+                        rotate: rotation,
+                        renderAnnotationLayer: true,
+                        renderTextLayer: true,
+                        className: "rounded border border-border"
+                      }
+                    )
+                  },
+                  p
+                ))
+              }
+            )
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border px-4 py-1.5 text-xs text-muted-foreground", children: [
+      currentPage,
+      " / ",
+      numPages ?? "...",
+      " ",
+      i18n.t("common:label.trang", { defaultValue: "trang" }),
+      file.size ? ` \xB7 ${(file.size / 1024).toFixed(0)} KB` : "",
+      ` \xB7 PDF`
+    ] })
+  ] });
+}
+export {
+  PdfViewer as default
+};

package/components/custom/viewers/spreadsheet-viewer.js

@@ -0,0 +1,232 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import * as XLSX from "xlsx-js-style";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ArrowUpDown, Download, AlertTriangle } from "lucide-react";
+import { Button } from "../button.js";
+import { Input } from "../../ui/input.js";
+import { Badge } from "../../ui/badge.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../../lib/utils.js";
+import { saveAs } from "file-saver";
+import { useTranslation } from "react-i18next";
+const SIZE_WARNING = 10 * 1024 * 1024;
+const ROW_LIMIT = 100;
+function SpreadsheetViewer({ file }) {
+  const { t } = useTranslation();
+  const [workbook, setWorkbook] = useState(null);
+  const [activeSheet, setActiveSheet] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [fileSize, setFileSize] = useState(file.size || 0);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [sorting, setSorting] = useState([]);
+  useEffect(() => {
+    setLoading(true);
+    setError(false);
+    setFileSize(file.size || 0);
+    fetch(file.url, { referrerPolicy: "no-referrer" }).then((r) => {
+      if (!file.size) {
+        const len = r.headers.get("Content-Length");
+        if (len) setFileSize(Number(len));
+      }
+      return r.arrayBuffer();
+    }).then((buf) => {
+      const wb = XLSX.read(buf, { type: "array", sheetRows: ROW_LIMIT + 1 });
+      setWorkbook(wb);
+      setActiveSheet(0);
+      setLoading(false);
+    }).catch(() => {
+      setError(true);
+      setLoading(false);
+    });
+  }, [file.url]);
+  const sheetName = workbook?.SheetNames[activeSheet];
+  const sheetData = useMemo(() => {
+    if (!workbook || !sheetName) return { headers: [], rows: [] };
+    const ws = workbook.Sheets[sheetName];
+    const data = XLSX.utils.sheet_to_json(ws, { header: 1, defval: "" });
+    const headers = (data[0] ?? []).map(String);
+    const rows = data.slice(1).map((r) => headers.map((_, i) => r[i] ?? ""));
+    const totalRows = rows.length;
+    return { headers, rows, totalRows };
+  }, [workbook, sheetName]);
+  const sheetRowCounts = useMemo(() => {
+    if (!workbook) return {};
+    return Object.fromEntries(
+      workbook.SheetNames.map((name) => {
+        const ws = workbook.Sheets[name];
+        if (!ws["!ref"]) return [name, 0];
+        const range = XLSX.utils.decode_range(ws["!ref"]);
+        return [name, range.e.r];
+      })
+    );
+  }, [workbook]);
+  const columns = useMemo(
+    () => sheetData.headers.map((h, i) => ({
+      id: `col_${i}`,
+      accessorFn: (row) => row[i],
+      header: ({ column }) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "-ml-2 h-7 text-xs font-semibold",
+          onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          children: [
+            h,
+            /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-1 h-3 w-3 opacity-50" })
+          ]
+        }
+      )
+    })),
+    [sheetData.headers]
+  );
+  const table = useReactTable({
+    data: sheetData.rows,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel()
+  });
+  const exportCsv = () => {
+    if (!workbook || !sheetName) return;
+    const ws = workbook.Sheets[sheetName];
+    const csv = XLSX.utils.sheet_to_csv(ws);
+    saveAs(new Blob([csv], { type: "text/csv" }), `${sheetName}.csv`);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-wrap items-center gap-2 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: t("common:placeholder.searchInSpreadsheet", {
+            defaultValue: "T\xECm trong trang t\xEDnh..."
+          }),
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "h-7 w-44 text-xs"
+        }
+      ),
+      !loading && workbook && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "border-primary text-primary", children: [
+          table.getFilteredRowModel().rows.length,
+          " ",
+          t("common:label.rows", { defaultValue: "d\xF2ng" })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("common:unit.columns", {
+          length: sheetData.headers.length,
+          defaultValue: "{length} c\u1ED9t"
+        }) })
+      ] }),
+      !loading && workbook && sheetData.totalRows >= ROW_LIMIT && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-600", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }),
+        t("common:message.showFirstRowsLimit", {
+          ROW_LIMIT,
+          defaultValue: "Ch\u1EC9 hi\u1EC3n th\u1ECB {ROW_LIMIT} d\xF2ng \u0111\u1EA7u"
+        })
+      ] }),
+      fileSize > SIZE_WARNING && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-600", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }),
+        t("common:message.largeFileSlowFilterSort", {
+          defaultValue: "File l\u1EDBn \u2014 filter/sort c\xF3 th\u1EC3 ch\u1EADm"
+        })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "ml-auto h-7 gap-1 text-xs",
+          onClick: exportCsv,
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "h-3 w-3" }),
+            t("common:action.exportCsv", { defaultValue: "Xu\u1EA5t CSV" })
+          ]
+        }
+      )
+    ] }),
+    workbook && /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 items-center gap-1 overflow-x-auto border-b border-border px-4 py-1", children: workbook.SheetNames.map((name, i) => {
+      const count = sheetRowCounts[name] ?? 0;
+      const label = count >= ROW_LIMIT ? `${ROW_LIMIT}+` : count;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            setActiveSheet(i);
+            setGlobalFilter("");
+            setSorting([]);
+          },
+          className: cn(
+            "flex items-center gap-1.5 rounded-t px-3 py-1 text-xs transition-colors",
+            activeSheet === i ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+          ),
+          children: [
+            name,
+            /* @__PURE__ */ jsxs(Badge, { variant: activeSheet === i ? "secondary" : "outline", children: [
+              label,
+              "r"
+            ] })
+          ]
+        },
+        name
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-4", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }, i)) }),
+      error && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: t("common:toast.loadExcelFailed", {
+        defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i file Excel"
+      }) }) }),
+      !loading && !error && workbook && /* @__PURE__ */ jsx("div", { className: "w-max min-w-full", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full border-collapse text-xs", children: [
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted/80 backdrop-blur-sm", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { className: "w-8 border-b border-r border-border px-2 py-2 text-center text-muted-foreground", children: "#" }),
+          table.getHeaderGroups()[0]?.headers.map((header) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: "min-w-[100px] whitespace-nowrap border-b border-r border-border px-2 py-1 text-left font-medium",
+              children: flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row, idx) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-muted/40", children: [
+          /* @__PURE__ */ jsx("td", { className: "border-b border-r border-border px-2 py-1.5 text-center text-muted-foreground", children: idx + 1 }),
+          row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "max-w-[200px] truncate border-b border-r border-border px-2 py-1.5",
+              children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              )
+            },
+            cell.id
+          ))
+        ] }, row.id)) })
+      ] }) })
+    ] }),
+    !loading && workbook && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border px-4 py-1.5 text-xs text-muted-foreground", children: [
+      workbook.SheetNames.length,
+      " ",
+      t("common:label.sheets", { defaultValue: "trang t\xEDnh \xB7" }),
+      " ",
+      fileSize ? `${(fileSize / (1024 * 1024)).toFixed(1)} MB` : "",
+      "\xB7 Excel"
+    ] })
+  ] });
+}
+export {
+  SpreadsheetViewer as default
+};

package/components/custom/viewers/unsupported-viewer.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Download, ExternalLink, Monitor } from "lucide-react";
+import { Button } from "../button.js";
+import { Badge } from "../../ui/badge.js";
+import { formatBytes } from "../../../utils/file.js";
+import { Trans, useTranslation } from "react-i18next";
+function UnsupportedViewer({ file, onDownload }) {
+  const { t } = useTranslation();
+  const ext = file.name?.split(".").pop()?.toUpperCase() ?? "";
+  const isPptx = ["PPT", "PPTX"].includes(ext);
+  const fileSize = file.size ? formatBytes(file.size) : "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-24 w-24 items-center justify-center rounded-2xl bg-orange-50", children: /* @__PURE__ */ jsx(Monitor, { className: "h-12 w-12 text-orange-400" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: t("common:message.previewNotSupported", {
+        defaultValue: "Ch\u01B0a h\u1ED7 tr\u1EE3 xem tr\u01B0\u1EDBc \u0111\u1ECBnh d\u1EA1ng n\xE0y"
+      }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-sm text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(
+        Trans,
+        {
+          i18nKey: "common:message.fileFormatUnsupportedPreview",
+          defaults: "T\u1EC7p <0>{{name}}</0> \u1EDF \u0111\u1ECBnh d\u1EA1ng <1>{{ext}}</1> ch\u01B0a th\u1EC3 hi\u1EC3n th\u1ECB tr\u1EF1c ti\u1EBFp trong Zenify. B\u1EA1n c\xF3 th\u1EC3 t\u1EA3i v\u1EC1 m\xE1y ho\u1EB7c m\u1EDF b\u1EB1ng \u1EE9ng d\u1EE5ng b\xEAn ngo\xE0i.",
+          values: { name: file.name, ext },
+          components: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground" }, "0"),
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mx-1" }, "1")
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxs(Button, { onClick: onDownload, className: "gap-2", children: [
+        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+        t("common:action.download", { defaultValue: "T\u1EA3i xu\u1ED1ng" }),
+        " ",
+        fileSize ? "(" + fileSize + ")" : ""
+      ] }),
+      isPptx && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          className: "gap-2",
+          onClick: () => {
+            if (!file.url?.startsWith("https://")) return;
+            const safeUrl = `https://docs.google.com/presentation/viewer?url=${encodeURIComponent(file.url)}`;
+            window.open(safeUrl, "_blank");
+          },
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+            t("common:action.openWithGoogleSlides", {
+              defaultValue: "M\u1EDF b\u1EB1ng Google Slides"
+            })
+          ]
+        }
+      ),
+      !isPptx && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          className: "gap-2",
+          onClick: () => {
+            if (!file.url?.startsWith("https://")) return;
+            const safeUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(file.url)}`;
+            window.open(safeUrl, "_blank");
+          },
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+            t("common:action.openWithGoogleDocs", {
+              defaultValue: "M\u1EDF b\u1EB1ng Google Docs"
+            })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-md rounded-lg border border-border bg-muted/50 px-4 py-2 text-center text-xs text-muted-foreground", children: isPptx ? t("common:message.pptxNotSupportedDesc", {
+      defaultValue: "\u0110\u1ECBnh d\u1EA1ng .pptx c\u1EA7n \u0111\u01B0\u1EE3c render b\u1EB1ng PowerPoint engine \u2014 ch\xFAng t\xF4i \u0111ang x\xE2y d\u1EF1ng t\xEDch h\u1EE3p n\xE0y."
+    }) : t("common:message.formatNotSupportedPreview", {
+      ext: ext.toLowerCase(),
+      defaultValue: "\u0110\u1ECBnh d\u1EA1ng .{ext} ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3 xem tr\u01B0\u1EDBc tr\u1EF1c ti\u1EBFp."
+    }) })
+  ] });
+}
+export {
+  UnsupportedViewer as default
+};