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

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

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { renderAsync } from "docx-preview";
+import JSZip from "jszip";
+import { Eye, Code2, AlertTriangle } from "lucide-react";
+import { Button } from "../button.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+function DocxViewer({ file }) {
+  const { t } = useTranslation();
+  const containerRef = useRef(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [rawXml, setRawXml] = useState(null);
+  const [mode, setMode] = useState("rendered");
+  const [hasMacro, setHasMacro] = useState(false);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const abort = new AbortController();
+    setLoading(true);
+    setError(false);
+    fetch(file.url, { signal: abort.signal, referrerPolicy: "no-referrer" }).then((r) => r.arrayBuffer()).then(async (buf) => {
+      if (abort.signal.aborted) return;
+      if (containerRef.current) {
+        await renderAsync(buf, containerRef.current, void 0, {
+          className: "docx-preview-container",
+          inWrapper: false
+        });
+      }
+      const hasMacroSig = buf.byteLength > 0 && new Uint8Array(buf).some(
+        (b, i, a) => a[i] === 86 && a[i + 1] === 66 && a[i + 2] === 65
+      );
+      setHasMacro(hasMacroSig);
+      setLoading(false);
+    }).catch((err) => {
+      if (err.name !== "AbortError") {
+        setError(true);
+        setLoading(false);
+      }
+    });
+    return () => abort.abort();
+  }, [file.url]);
+  const handleViewRaw = async () => {
+    if (rawXml) {
+      setMode(mode === "raw" ? "rendered" : "raw");
+      return;
+    }
+    try {
+      const r = await fetch(file.url, { referrerPolicy: "no-referrer" });
+      if (!r.ok) throw new Error("fetch failed");
+      const buf = await r.arrayBuffer();
+      const zip = await JSZip.loadAsync(buf);
+      const xmlFile = zip.file("word/document.xml");
+      if (!xmlFile) throw new Error("word/document.xml not found");
+      const text = await xmlFile.async("text");
+      setRawXml(text);
+      setMode("raw");
+    } catch {
+      setMode("rendered");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-border bg-background p-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "rendered" ? "default" : "ghost",
+            size: "sm",
+            className: "h-6 gap-1.5 px-2 text-xs",
+            onClick: () => setMode("rendered"),
+            children: [
+              /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }),
+              t("common:status.rendered", { defaultValue: "\u0110\xE3 render" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "raw" ? "default" : "ghost",
+            size: "sm",
+            className: "h-6 gap-1.5 px-2 text-xs",
+            onClick: handleViewRaw,
+            children: [
+              /* @__PURE__ */ jsx(Code2, { className: "h-3 w-3" }),
+              "Raw XML"
+            ]
+          }
+        )
+      ] }),
+      hasMacro && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-amber-600", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" }),
+        t("common:message.macroDisabledInPreview", {
+          defaultValue: "Macro \u0111\xE3 b\u1ECB v\xF4 hi\u1EC7u ho\xE1 khi xem tr\u01B0\u1EDBc"
+        })
+      ] })
+    ] }),
+    hasMacro && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-start gap-3 border-b border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: t("common:message.fileContainsMacroOrExternalLinks", {
+          defaultValue: "T\u1EC7p ch\u1EE9a macro VBA v\xE0/ho\u1EB7c li\xEAn k\u1EBFt b\xEAn ngo\xE0i"
+        }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-amber-700", children: t("common:message.macroDisabledInPreviewDetailed", {
+          defaultValue: "Macro \u0111\xE3 b\u1ECB v\xF4 hi\u1EC7u ho\xE1 khi xem tr\u01B0\u1EDBc. N\u1ED9i dung hi\u1EC3n th\u1ECB gi\u1EEF\n              nguy\xEAn typography g\u1ED1c."
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-8", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "h-5",
+          style: { width: `${40 + Math.random() * 60}%` }
+        },
+        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.loadDocxFailed", {
+        defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i file DOCX"
+      }) }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "min-w-max p-8",
+            mode === "raw" ? "hidden" : "",
+            loading ? "hidden" : ""
+          )
+        }
+      ),
+      mode === "raw" && rawXml && /* @__PURE__ */ jsx("pre", { className: "overflow-auto whitespace-pre p-4 font-mono text-xs", children: rawXml })
+    ] }),
+    !loading && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border px-4 py-1.5 text-xs text-muted-foreground", children: [
+      file.name,
+      " \xB7 ",
+      file.size ? `${(file.size / 1024).toFixed(0)} KB` : ""
+    ] })
+  ] });
+}
+export {
+  DocxViewer as default
+};

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { Minus, Plus, Maximize } from "lucide-react";
+import { Button } from "../button.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { formatBytes } from "../../../utils/file.js";
+import { useTranslation } from "react-i18next";
+function ImageViewer({ file }) {
+  const { t } = useTranslation();
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [dimensions, setDimensions] = useState(null);
+  const transformRef = useRef(null);
+  const handleLoad = useCallback((e) => {
+    setLoaded(true);
+    setDimensions({ w: e.target.naturalWidth, h: e.target.naturalHeight });
+  }, []);
+  const ext = file.name?.split(".").pop()?.toUpperCase() ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col bg-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-4 top-4 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1 backdrop-blur-sm", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7 text-white hover:bg-white/20 hover:text-white",
+          onClick: () => transformRef.current?.zoomOut(0.3),
+          "aria-label": t("common:action.minimize", { defaultValue: "Thu nh\u1ECF" }),
+          children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7 text-white hover:bg-white/20 hover:text-white",
+          onClick: () => transformRef.current?.resetTransform(),
+          "aria-label": t("common:action.fitToFrame", {
+            defaultValue: "V\u1EEBa khung"
+          }),
+          children: /* @__PURE__ */ jsx(Maximize, { className: "h-3 w-3" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7 text-white hover:bg-white/20 hover:text-white",
+          onClick: () => transformRef.current?.zoomIn(0.3),
+          "aria-label": t("common:action.zoomIn", { defaultValue: "Ph\xF3ng to" }),
+          children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 items-center justify-center overflow-hidden", children: [
+      !loaded && !error && /* @__PURE__ */ jsx(Skeleton, { className: "h-64 w-96 bg-gray-700" }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: t("common:toast.loadImageFailed", {
+        defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i \u1EA3nh"
+      }) }),
+      /* @__PURE__ */ jsx(TransformWrapper, { ref: transformRef, minScale: 0.1, maxScale: 10, children: /* @__PURE__ */ jsx(
+        TransformComponent,
+        {
+          wrapperStyle: { width: "100%", height: "100%" },
+          contentStyle: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%"
+          },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: file.url,
+              alt: file.name,
+              referrerPolicy: "no-referrer",
+              className: loaded ? "max-h-full max-w-full object-contain" : "hidden",
+              onLoad: handleLoad,
+              onError: () => setError(true)
+            }
+          )
+        }
+      ) })
+    ] }),
+    loaded && dimensions && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-3 bg-black/80 px-4 py-2 text-xs text-gray-400", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        dimensions.w,
+        " \xD7 ",
+        dimensions.h,
+        " px"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: file.size ? formatBytes(file.size) : "" }),
+      /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: ext })
+    ] })
+  ] });
+}
+export {
+  ImageViewer as default
+};

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

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Eye, Code2 } from "lucide-react";
+import { Button } from "../button.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { useTranslation } from "react-i18next";
+function MarkdownViewer({ file }) {
+  const { t } = useTranslation();
+  const [raw, setRaw] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [mode, setMode] = useState("preview");
+  useEffect(() => {
+    setLoading(true);
+    setError(false);
+    fetch(file.url, { referrerPolicy: "no-referrer" }).then((r) => {
+      if (!r.ok) throw new Error();
+      return r.text();
+    }).then((text) => {
+      setRaw(text);
+      setLoading(false);
+    }).catch(() => {
+      setError(true);
+      setLoading(false);
+    });
+  }, [file.url]);
+  const lineCount = raw?.split("\n").length ?? 0;
+  const readMinutes = Math.ceil((raw?.split(" ").length ?? 0) / 200);
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md border border-border bg-background p-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "preview" ? "default" : "ghost",
+            size: "sm",
+            className: "h-6 gap-1.5 px-2 text-xs",
+            onClick: () => setMode("preview"),
+            children: [
+              /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }),
+              "Preview"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "source" ? "default" : "ghost",
+            size: "sm",
+            className: "h-6 gap-1.5 px-2 text-xs",
+            onClick: () => setMode("source"),
+            children: [
+              /* @__PURE__ */ jsx(Code2, { className: "h-3 w-3" }),
+              "Source"
+            ]
+          }
+        )
+      ] }),
+      !loading && raw && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("common:misc.markdownFileSummary", {
+        lineCount,
+        readMinutes,
+        defaultValue: "{lineCount} d\xF2ng \xB7 GFM \xB7 \u0110\u1ECDc ~{readMinutes} ph\xFAt"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-8", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "h-4",
+          style: { width: `${40 + Math.random() * 60}%` }
+        },
+        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.loadFileFailed", {
+        defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i file"
+      }) }) }),
+      raw && mode === "preview" && /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none p-8", children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          components: {
+            code({ inline, className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || "");
+              return !inline && match ? /* @__PURE__ */ jsx(
+                SyntaxHighlighter,
+                {
+                  style: oneDark,
+                  language: match[1],
+                  PreTag: "div",
+                  ...props,
+                  children: String(children).replace(/\n$/, "")
+                }
+              ) : /* @__PURE__ */ jsx("code", { className, ...props, children });
+            }
+          },
+          children: raw
+        }
+      ) }),
+      raw && mode === "source" && /* @__PURE__ */ jsx(
+        SyntaxHighlighter,
+        {
+          language: "markdown",
+          style: oneDark,
+          showLineNumbers: true,
+          customStyle: {
+            margin: 0,
+            borderRadius: 0,
+            minHeight: "100%",
+            fontSize: "13px",
+            overflowX: "auto"
+          },
+          children: raw
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  MarkdownViewer as default
+};