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

package/components/custom/field-layout-popover.js

@@ -0,0 +1,304 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import {
+  DndContext,
+  closestCenter,
+  useSensor,
+  useSensors,
+  PointerSensor,
+  KeyboardSensor
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  arrayMove
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Pin,
+  CircleMinus,
+  CirclePlus,
+  GripVertical,
+  Search
+} from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover.js";
+import { Button } from "./button.js";
+import { useTranslation } from "react-i18next";
+function normalize(str) {
+  return (str || "").toString().normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+function SortableFieldRow({ id, label, onRemove, canRemove }) {
+  const { t } = useTranslation();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "flex cursor-grab items-center gap-2 rounded-md px-1 py-1 hover:bg-surface-subtle active:cursor-grabbing",
+      onClick: () => canRemove && onRemove(id),
+      ...attributes,
+      ...listeners,
+      children: [
+        canRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "shrink-0 text-destructive",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(id);
+            },
+            "aria-label": t("common:action.hideField", {
+              defaultValue: "\u1EA8n field"
+            }),
+            children: /* @__PURE__ */ jsx(CircleMinus, { size: 16, strokeWidth: 1.5 })
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm leading-5 text-foreground", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground", children: /* @__PURE__ */ jsx(GripVertical, { size: 14, strokeWidth: 1.5 }) })
+      ]
+    }
+  );
+}
+function FieldLayoutPopover({
+  containerKey,
+  items = [],
+  fieldLabelMap = {},
+  fieldGroupMap,
+  canEditFieldLayout,
+  onApply,
+  // Mặc định chặn bỏ field cuối để vùng gọi không rỗng trắng. Nơi nào coi "không
+  // hiện field nào" là cấu hình hợp lệ thì bật cờ này.
+  allowEmpty = false,
+  triggerIcon: TriggerIcon = Pin,
+  triggerAriaLabel = "T\xF9y ch\u1EC9nh field hi\u1EC3n th\u1ECB",
+  shownLabel = "Th\xF4ng tin \u0111ang hi\u1EC3n th\u1ECB",
+  addLabel = "Th\xF4ng tin c\xF3 th\u1EC3 th\xEAm",
+  portalContainer
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [shownKeys, setShownKeys] = useState(
+    () => Array.isArray(items) ? items : []
+  );
+  const [search, setSearch] = useState("");
+  const labels = useMemo(
+    () => fieldLabelMap && typeof fieldLabelMap === "object" ? fieldLabelMap : {},
+    [fieldLabelMap]
+  );
+  useEffect(() => {
+    if (open) {
+      setShownKeys(Array.isArray(items) ? items : []);
+      setSearch("");
+    }
+  }, [open]);
+  const hiddenKeys = useMemo(
+    () => Object.keys(labels).filter((k) => !shownKeys.includes(k)).sort(
+      (a, b) => String(labels[a] || "").localeCompare(String(labels[b] || ""), "vi")
+    ),
+    [labels, shownKeys]
+  );
+  const filteredHiddenKeys = useMemo(() => {
+    if (!search.trim()) return hiddenKeys;
+    const q = normalize(search);
+    return hiddenKeys.filter((k) => normalize(labels[k]).includes(q));
+  }, [hiddenKeys, search, labels]);
+  const hiddenKeysByGroup = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const key of filteredHiddenKeys) {
+      const groupLabel = fieldGroupMap?.[key] ?? "";
+      if (!grouped.has(groupLabel)) grouped.set(groupLabel, []);
+      grouped.get(groupLabel).push(key);
+    }
+    return [...grouped.entries()];
+  }, [filteredHiddenKeys, fieldGroupMap]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor)
+  );
+  const handleDragEnd = ({ active, over }) => {
+    if (!over || active.id === over.id) return;
+    if (fieldGroupMap && fieldGroupMap[active.id] !== fieldGroupMap[over.id]) {
+      return;
+    }
+    setShownKeys((prev) => {
+      const oldIndex = prev.indexOf(active.id);
+      const newIndex = prev.indexOf(over.id);
+      if (oldIndex === -1 || newIndex === -1) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  };
+  const handleRemove = (key) => {
+    if (!allowEmpty && shownKeys.length <= 1) return;
+    setShownKeys((prev) => prev.filter((k) => k !== key));
+  };
+  const handleAdd = (key) => {
+    setShownKeys((prev) => prev.includes(key) ? prev : [...prev, key]);
+  };
+  const handleApply = () => {
+    const nextHiddenByKey = {};
+    const nextShownKeys = Array.isArray(shownKeys) ? shownKeys : [];
+    Object.keys(labels).forEach((k) => {
+      nextHiddenByKey[k] = !nextShownKeys.includes(k);
+    });
+    onApply(containerKey, nextShownKeys, nextHiddenByKey);
+    setOpen(false);
+  };
+  if (!canEditFieldLayout) return null;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "flex size-[30px] shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 data-[state=open]:text-primary",
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation(),
+        "aria-label": triggerAriaLabel,
+        children: /* @__PURE__ */ jsx(TriggerIcon, { size: 17, strokeWidth: 1.4 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        sideOffset: 6,
+        collisionPadding: 16,
+        container: portalContainer,
+        className: "flex max-h-[min(560px,var(--radix-popover-content-available-height))] w-[min(20rem,calc(100vw-2rem))] flex-col gap-0 rounded-lg border border-border-subtle p-0 shadow-[0px_40px_80px_-20px_rgba(15,23,42,0.24)]",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-3.5 py-3",
+              onWheel: (e) => e.stopPropagation(),
+              onTouchMove: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "pb-1.5 text-[13px] font-semibold uppercase tracking-wide text-muted-foreground", children: shownLabel }),
+                /* @__PURE__ */ jsx(
+                  DndContext,
+                  {
+                    sensors,
+                    collisionDetection: closestCenter,
+                    onDragEnd: handleDragEnd,
+                    children: /* @__PURE__ */ jsx(
+                      SortableContext,
+                      {
+                        items: shownKeys,
+                        strategy: verticalListSortingStrategy,
+                        children: shownKeys.map((key, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                          fieldGroupMap && fieldGroupMap[key] !== fieldGroupMap[shownKeys[index - 1]] && fieldGroupMap[key] && /* @__PURE__ */ jsx("div", { className: "px-1 pb-0.5 pt-1.5 text-xs font-semibold text-muted-foreground", children: fieldGroupMap[key] }),
+                          /* @__PURE__ */ jsx(
+                            SortableFieldRow,
+                            {
+                              id: key,
+                              label: labels[key] || key,
+                              onRemove: handleRemove,
+                              canRemove: allowEmpty || shownKeys.length > 1
+                            }
+                          )
+                        ] }, key))
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-dashed border-border-subtle" }),
+                /* @__PURE__ */ jsx("div", { className: "pb-1.5 text-[13px] font-semibold uppercase tracking-wide text-muted-foreground", children: addLabel }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2 rounded-md border border-border px-2.5 py-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: 14,
+                      strokeWidth: 1.5,
+                      className: "shrink-0 text-muted-foreground"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: search,
+                      onChange: (e) => setSearch(e.target.value),
+                      placeholder: t("common:placeholder.search", {
+                        defaultValue: "T\xECm ki\u1EBFm\u2026"
+                      }),
+                      className: "w-full text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+                    }
+                  )
+                ] }),
+                hiddenKeysByGroup.map(([groupLabel, keys]) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  groupLabel && /* @__PURE__ */ jsx("div", { className: "px-1 pb-0.5 pt-1.5 text-xs font-semibold text-muted-foreground", children: groupLabel }),
+                  keys.map((key) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 hover:bg-surface-subtle",
+                      onClick: () => handleAdd(key),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "shrink-0 text-success",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleAdd(key);
+                            },
+                            "aria-label": t("common:action.addFieldAlt", {
+                              defaultValue: "Th\xEAm field"
+                            }),
+                            children: /* @__PURE__ */ jsx(CirclePlus, { size: 16, strokeWidth: 1.5 })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm leading-5 text-foreground", children: labels[key] || key })
+                      ]
+                    },
+                    key
+                  ))
+                ] }, groupLabel))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 rounded-b-lg border-t border-border-subtle bg-surface-subtle px-3.5 py-2.5", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "h-9 rounded-lg border-border-subtle px-4 text-sm font-semibold text-muted-foreground",
+                onClick: () => setOpen(false),
+                children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "h-9 rounded-lg bg-primary px-4 text-sm font-semibold hover:bg-primary/90",
+                onClick: handleApply,
+                children: t("common:action.apply", { defaultValue: "\xC1p d\u1EE5ng" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  FieldLayoutPopover as default
+};

package/components/custom/file-preview-modal.js

@@ -0,0 +1,351 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useCallback, useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "./button.js";
+import { Skeleton } from "../ui/skeleton.js";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Link2,
+  Maximize2,
+  Minimize2,
+  X,
+  FileText,
+  FileImage,
+  FileAudio,
+  FileVideo,
+  FileSpreadsheet,
+  FileCode,
+  File
+} from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { saveAs } from "file-saver";
+import { toast } from "sonner";
+import useFilePreviewStore from "../../store/file-preview-store.js";
+import { useFileViewer, VIEWER_TYPES } from "../../hooks/use-file-viewer.js";
+import { formatBytes } from "../../utils/file.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const PdfViewer = lazy(() => import("./viewers/pdf-viewer.js"));
+const DocxViewer = lazy(() => import("./viewers/docx-viewer.js"));
+const SpreadsheetViewer = lazy(() => import("./viewers/spreadsheet-viewer.js"));
+const CsvViewer = lazy(() => import("./viewers/csv-viewer.js"));
+const ImageViewer = lazy(() => import("./viewers/image-viewer.js"));
+const VideoPlayer = lazy(() => import("./viewers/video-player.js"));
+const AudioPlayer = lazy(() => import("./viewers/audio-player.js"));
+const MarkdownViewer = lazy(() => import("./viewers/markdown-viewer.js"));
+const CodeViewer = lazy(() => import("./viewers/code-viewer.js"));
+const UnsupportedViewer = lazy(() => import("./viewers/unsupported-viewer.js"));
+const VIEWER_MAP = {
+  [VIEWER_TYPES.PDF]: PdfViewer,
+  [VIEWER_TYPES.DOCX]: DocxViewer,
+  [VIEWER_TYPES.SPREADSHEET]: SpreadsheetViewer,
+  [VIEWER_TYPES.CSV]: CsvViewer,
+  [VIEWER_TYPES.IMAGE]: ImageViewer,
+  [VIEWER_TYPES.VIDEO]: VideoPlayer,
+  [VIEWER_TYPES.AUDIO]: AudioPlayer,
+  [VIEWER_TYPES.MARKDOWN]: MarkdownViewer,
+  [VIEWER_TYPES.CODE]: CodeViewer,
+  [VIEWER_TYPES.UNSUPPORTED]: UnsupportedViewer
+};
+const MIME_BADGE = {
+  [VIEWER_TYPES.PDF]: {
+    label: "PDF",
+    className: "bg-[--label-red] text-destructive border-destructive/30"
+  },
+  [VIEWER_TYPES.DOCX]: {
+    label: "DOCX",
+    className: "bg-secondary text-primary border-primary/30"
+  },
+  [VIEWER_TYPES.SPREADSHEET]: {
+    label: "XLSX",
+    className: "bg-[--label-green] text-success border-success/30"
+  },
+  [VIEWER_TYPES.CSV]: {
+    label: "CSV",
+    className: "bg-muted text-chart-2 border-chart-8/40"
+  },
+  [VIEWER_TYPES.IMAGE]: {
+    label: "IMG",
+    className: "bg-muted text-chart-9 border-chart-9/40"
+  },
+  [VIEWER_TYPES.VIDEO]: {
+    label: "MP4",
+    className: "bg-muted text-chart-5 border-chart-5/40"
+  },
+  [VIEWER_TYPES.AUDIO]: {
+    label: "WAV",
+    className: "bg-[--label-orange] text-warning border-warning/40"
+  },
+  [VIEWER_TYPES.MARKDOWN]: {
+    label: "MD",
+    className: "bg-surface-subtle text-muted-foreground border-border-subtle"
+  },
+  [VIEWER_TYPES.CODE]: {
+    label: "CODE",
+    className: "bg-secondary text-primary border-primary/40"
+  },
+  [VIEWER_TYPES.UNSUPPORTED]: {
+    label: "FILE",
+    className: "bg-surface-subtle text-muted-foreground border-border-subtle"
+  }
+};
+function getFileIcon(viewerType) {
+  const cls = "h-5 w-5";
+  switch (viewerType) {
+    case VIEWER_TYPES.PDF:
+      return /* @__PURE__ */ jsx(FileText, { className: cn(cls, "text-destructive") });
+    case VIEWER_TYPES.DOCX:
+      return /* @__PURE__ */ jsx(FileText, { className: cn(cls, "text-primary") });
+    case VIEWER_TYPES.SPREADSHEET:
+      return /* @__PURE__ */ jsx(FileSpreadsheet, { className: cn(cls, "text-success") });
+    case VIEWER_TYPES.CSV:
+      return /* @__PURE__ */ jsx(FileSpreadsheet, { className: cn(cls, "text-chart-8") });
+    case VIEWER_TYPES.IMAGE:
+      return /* @__PURE__ */ jsx(FileImage, { className: cn(cls, "text-chart-9") });
+    case VIEWER_TYPES.VIDEO:
+      return /* @__PURE__ */ jsx(FileVideo, { className: cn(cls, "text-chart-5") });
+    case VIEWER_TYPES.AUDIO:
+      return /* @__PURE__ */ jsx(FileAudio, { className: cn(cls, "text-warning") });
+    case VIEWER_TYPES.MARKDOWN:
+      return /* @__PURE__ */ jsx(FileCode, { className: cn(cls, "text-muted-foreground") });
+    case VIEWER_TYPES.CODE:
+      return /* @__PURE__ */ jsx(FileCode, { className: cn(cls, "text-chart-3") });
+    default:
+      return /* @__PURE__ */ jsx(File, { className: cn(cls, "text-muted-foreground") });
+  }
+}
+function ViewerSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4 p-6", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-3/4" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-5/6" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-2/3" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-4/5" })
+  ] });
+}
+function FilePreviewModal() {
+  const { t } = useTranslation();
+  const { isOpen, files, currentIndex, closePreview, goNext, goPrev } = useFilePreviewStore();
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  useEffect(() => {
+    if (!isOpen) setIsFullscreen(false);
+  }, [isOpen]);
+  const file = files[currentIndex];
+  const viewerType = useFileViewer(file);
+  const ViewerComponent = viewerType ? VIEWER_MAP[viewerType] : null;
+  const badge = viewerType ? MIME_BADGE[viewerType] : null;
+  const displayName = file?.name ? (() => {
+    try {
+      return decodeURIComponent(file.name);
+    } catch {
+      return file.name;
+    }
+  })() : "";
+  const handleDownload = useCallback(async () => {
+    if (!file) return;
+    try {
+      const res = await fetch(file.url, { referrerPolicy: "no-referrer" });
+      const blob = await res.blob();
+      saveAs(blob, file.name);
+    } catch {
+      window.open(file.url, "_blank");
+    }
+  }, [file]);
+  const handleCopyLink = useCallback(() => {
+    if (!file?.url) return;
+    navigator.clipboard.writeText(file.url).then(
+      () => toast.success(
+        i18n.t("common:toast.linkCopied", {
+          defaultValue: "\u0110\xE3 sao ch\xE9p link"
+        })
+      )
+    );
+  }, [file]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isOpen, goNext, goPrev]);
+  if (!isOpen || !file) return null;
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && closePreview(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: cn(
+        "flex flex-col gap-0 overflow-hidden p-0",
+        isFullscreen ? "fixed inset-0 !left-0 !top-0 h-screen w-screen max-w-none !translate-x-0 !translate-y-0 rounded-none" : "h-[90vh] max-w-4xl"
+      ),
+      "aria-label": t("common:dialog.previewTitle", {
+        displayName,
+        defaultValue: "Xem tr\u01B0\u1EDBc: {displayName}"
+      }),
+      "aria-describedby": void 0,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: displayName }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-start justify-between border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: getFileIcon(viewerType) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "max-w-[300px] truncate text-sm font-semibold text-foreground",
+                    title: displayName,
+                    children: displayName
+                  }
+                ),
+                badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badge.className, children: badge.label })
+              ] }),
+              (file.sender || file.sentAt) && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+                files.length > 1 && `${t("common:label.fileIndexCounter", {
+                  current: currentIndex + 1,
+                  total: files.length,
+                  defaultValue: "T\u1EADp {current}/{total}"
+                })} \xB7 `,
+                file.sender && t("common:label.fromSender", {
+                  sender: file.sender,
+                  defaultValue: "T\u1EEB {sender}"
+                }),
+                file.sentAt && ` \xB7 ${file.sentAt}`
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-4 flex flex-shrink-0 items-center gap-1", children: [
+            files.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-7 w-7",
+                  disabled: currentIndex === 0,
+                  onClick: goPrev,
+                  "aria-label": t("common:action.previousFile", {
+                    defaultValue: "File tr\u01B0\u1EDBc"
+                  }),
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-7 w-7",
+                  disabled: currentIndex === files.length - 1,
+                  onClick: goNext,
+                  "aria-label": "File sau",
+                  children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: handleDownload,
+                "aria-label": t("common:action.download", {
+                  defaultValue: "T\u1EA3i xu\u1ED1ng"
+                }),
+                children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: handleCopyLink,
+                "aria-label": t("common:action.copyLink", {
+                  defaultValue: "Sao ch\xE9p link"
+                }),
+                children: /* @__PURE__ */ jsx(Link2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: () => setIsFullscreen((v) => !v),
+                "aria-label": isFullscreen ? t("common:action.minimize", { defaultValue: "Thu nh\u1ECF" }) : t("common:action.fullscreen", {
+                  defaultValue: "To\xE0n m\xE0n h\xECnh"
+                }),
+                children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: closePreview,
+                "aria-label": t("common:action.close", { defaultValue: "\u0110\xF3ng" }),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: ViewerComponent && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerSkeleton, {}), children: /* @__PURE__ */ jsx(ViewerComponent, { file, onDownload: handleDownload }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-t border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            file.size ? formatBytes(file.size) : "",
+            file.name && ` \xB7 ${file.name.split(".").pop()?.toUpperCase()}`
+          ] }),
+          files.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-xs",
+                disabled: currentIndex === 0,
+                onClick: goPrev,
+                children: t("common:action.previousAlt", { defaultValue: "< Tr\u01B0\u1EDBc" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              currentIndex + 1,
+              " / ",
+              files.length
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-xs",
+                disabled: currentIndex === files.length - 1,
+                onClick: goNext,
+                children: "Sau >"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  FilePreviewModal as default
+};