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

package/components/custom/time-picker/time-picker-utils.js

@@ -0,0 +1,152 @@
+function isValidHour(value) {
+  return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
+}
+function isValid12Hour(value) {
+  return /^(0[1-9]|1[0-2])$/.test(value);
+}
+function isValidMinuteOrSecond(value) {
+  return /^[0-5][0-9]$/.test(value);
+}
+function getValidNumber(value, { max, min = 0, loop = false }) {
+  let numericValue = parseInt(value, 10);
+  if (!isNaN(numericValue)) {
+    if (!loop) {
+      if (numericValue > max) numericValue = max;
+      if (numericValue < min) numericValue = min;
+    } else {
+      if (numericValue > max) numericValue = min;
+      if (numericValue < min) numericValue = max;
+    }
+    return numericValue.toString().padStart(2, "0");
+  }
+  return "00";
+}
+function getValidHour(value) {
+  if (isValidHour(value)) return value;
+  return getValidNumber(value, { max: 23 });
+}
+function getValid12Hour(value) {
+  if (isValid12Hour(value)) return value;
+  return getValidNumber(value, { min: 1, max: 12 });
+}
+function getValidMinuteOrSecond(value) {
+  if (isValidMinuteOrSecond(value)) return value;
+  return getValidNumber(value, { max: 59 });
+}
+function getValidArrowNumber(value, { min, max, step }) {
+  let numericValue = parseInt(value, 10);
+  if (!isNaN(numericValue)) {
+    numericValue += step;
+    return getValidNumber(String(numericValue), { min, max, loop: true });
+  }
+  return "00";
+}
+function getValidArrowHour(value, step) {
+  return getValidArrowNumber(value, { min: 0, max: 23, step });
+}
+function getValidArrow12Hour(value, step) {
+  return getValidArrowNumber(value, { min: 1, max: 12, step });
+}
+function getValidArrowMinuteOrSecond(value, step) {
+  return getValidArrowNumber(value, { min: 0, max: 59, step });
+}
+function setMinutes(date, value) {
+  const minutes = getValidMinuteOrSecond(value);
+  date.setMinutes(parseInt(minutes, 10));
+  return date;
+}
+function setSeconds(date, value) {
+  const seconds = getValidMinuteOrSecond(value);
+  date.setSeconds(parseInt(seconds, 10));
+  return date;
+}
+function setHours(date, value) {
+  const hours = getValidHour(value);
+  date.setHours(parseInt(hours, 10));
+  return date;
+}
+function set12Hours(date, value, period) {
+  const hours = parseInt(getValid12Hour(value), 10);
+  const convertedHours = convert12HourTo24Hour(hours, period);
+  date.setHours(convertedHours);
+  return date;
+}
+function setDateByType(date, value, type, period) {
+  switch (type) {
+    case "minutes":
+      return setMinutes(date, value);
+    case "seconds":
+      return setSeconds(date, value);
+    case "hours":
+      return setHours(date, value);
+    case "12hours":
+      if (!period) return date;
+      return set12Hours(date, value, period);
+    default:
+      return date;
+  }
+}
+function convert12HourTo24Hour(hour, period) {
+  if (period === "PM") {
+    return hour <= 11 ? hour + 12 : hour;
+  } else if (period === "AM") {
+    return hour === 12 ? 0 : hour;
+  }
+  return hour;
+}
+function display12HourValue(hours) {
+  if (hours === 0 || hours === 12) return "12";
+  if (hours >= 22) return `${hours - 12}`;
+  if (hours % 12 > 9) return `${hours}`;
+  return `0${hours % 12}`;
+}
+function getDateByType(date, type) {
+  switch (type) {
+    case "minutes":
+      return getValidMinuteOrSecond(String(date.getMinutes()));
+    case "seconds":
+      return getValidMinuteOrSecond(String(date.getSeconds()));
+    case "hours":
+      return getValidHour(String(date.getHours()));
+    case "12hours": {
+      const hours = display12HourValue(date.getHours());
+      return getValid12Hour(String(hours));
+    }
+    default:
+      return "00";
+  }
+}
+function getArrowByType(value, step, type) {
+  switch (type) {
+    case "minutes":
+      return getValidArrowMinuteOrSecond(value, step);
+    case "seconds":
+      return getValidArrowMinuteOrSecond(value, step);
+    case "hours":
+      return getValidArrowHour(value, step);
+    case "12hours":
+      return getValidArrow12Hour(value, step);
+    default:
+      return "00";
+  }
+}
+export {
+  convert12HourTo24Hour,
+  display12HourValue,
+  getArrowByType,
+  getDateByType,
+  getValid12Hour,
+  getValidArrow12Hour,
+  getValidArrowHour,
+  getValidArrowMinuteOrSecond,
+  getValidHour,
+  getValidMinuteOrSecond,
+  isValid12Hour,
+  isValidHour,
+  isValidMinuteOrSecond,
+  set12Hours,
+  setDateByType,
+  setHours,
+  setMinutes,
+  setSeconds
+};

package/components/custom/viewers/audio-player.js

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import WaveSurfer from "wavesurfer.js";
+import {
+  Play,
+  Pause,
+  SkipBack,
+  SkipForward,
+  Repeat,
+  Volume2
+} from "lucide-react";
+import { Button } from "../button.js";
+import { Slider } from "../../ui/slider.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { useTranslation } from "react-i18next";
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function formatTime(s) {
+  if (isNaN(s) || !isFinite(s)) return "0:00";
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+function AudioPlayer({ file }) {
+  const { t } = useTranslation();
+  const waveRef = useRef(null);
+  const wsRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [volume, setVolume] = useState(0.8);
+  const [speed, setSpeed] = useState(1);
+  const [loop, setLoop] = useState(false);
+  const loopRef = useRef(loop);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    loopRef.current = loop;
+  }, [loop]);
+  useEffect(() => {
+    if (!waveRef.current) return;
+    const ws = WaveSurfer.create({
+      container: waveRef.current,
+      waveColor: "hsl(var(--muted-foreground))",
+      progressColor: "hsl(var(--primary))",
+      cursorColor: "hsl(var(--primary))",
+      barWidth: 3,
+      barRadius: 3,
+      barGap: 2,
+      height: 80,
+      normalize: true,
+      fetchParams: { referrerPolicy: "no-referrer" }
+    });
+    ws.on("error", (err) => {
+      if (err?.name !== "AbortError") console.error("WaveSurfer error:", err);
+    });
+    ws.load(file.url).catch((err) => {
+      if (err?.name !== "AbortError")
+        console.error("WaveSurfer load error:", err);
+    });
+    ws.on("ready", () => {
+      setDuration(ws.getDuration());
+      setLoading(false);
+    });
+    ws.on("play", () => setPlaying(true));
+    ws.on("pause", () => setPlaying(false));
+    ws.on("audioprocess", () => setCurrentTime(ws.getCurrentTime()));
+    ws.on("seeking", () => setCurrentTime(ws.getCurrentTime()));
+    ws.on("finish", () => {
+      if (loopRef.current) {
+        ws.play();
+      } else {
+        setPlaying(false);
+      }
+    });
+    wsRef.current = ws;
+    return () => ws.destroy();
+  }, [file.url]);
+  useEffect(() => {
+    if (wsRef.current) wsRef.current.setVolume(volume);
+  }, [volume]);
+  useEffect(() => {
+    if (wsRef.current) wsRef.current.setPlaybackRate(speed);
+  }, [speed]);
+  const togglePlay = useCallback(() => {
+    wsRef.current?.playPause();
+  }, []);
+  const skip = useCallback((secs) => {
+    if (!wsRef.current) return;
+    wsRef.current.setCurrentTime(
+      Math.max(0, wsRef.current.getCurrentTime() + secs)
+    );
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-xl border border-border bg-muted/30 p-4", children: [
+        loading && /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }),
+        /* @__PURE__ */ jsx("div", { ref: waveRef, className: loading ? "hidden" : "" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm tabular-nums text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-9 w-9",
+            onClick: () => skip(-10),
+            "aria-label": t("common:action.rewind10s", {
+              defaultValue: "L\xF9i 10 gi\xE2y"
+            }),
+            children: /* @__PURE__ */ jsx(SkipBack, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            className: "h-12 w-12 rounded-full",
+            onClick: togglePlay,
+            "aria-label": playing ? t("common:action.pause", { defaultValue: "T\u1EA1m d\u1EEBng" }) : t("common:action.play", { defaultValue: "Ph\xE1t" }),
+            children: playing ? /* @__PURE__ */ jsx(Pause, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Play, { className: "h-6 w-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-9 w-9",
+            onClick: () => skip(10),
+            "aria-label": t("common:action.forward10s", {
+              defaultValue: "Tua 10 gi\xE2y"
+            }),
+            children: /* @__PURE__ */ jsx(SkipForward, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: loop ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => setLoop((v) => !v),
+            "aria-label": t("common:action.repeat", { defaultValue: "L\u1EB7p l\u1EA1i" }),
+            children: /* @__PURE__ */ jsx(Repeat, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: [volume],
+            min: 0,
+            max: 1,
+            step: 0.01,
+            onValueChange: ([v]) => setVolume(v),
+            className: "flex-1",
+            "aria-label": t("common:label.volume", { defaultValue: "\xC2m l\u01B0\u1EE3ng" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: speed,
+            onChange: (e) => setSpeed(Number(e.target.value)),
+            className: "h-7 rounded border border-border bg-background px-2 text-xs",
+            "aria-label": t("common:label.playbackSpeed", {
+              defaultValue: "T\u1ED1c \u0111\u1ED9 ph\xE1t"
+            }),
+            children: SPEEDS.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
+              s,
+              "\xD7"
+            ] }, s))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+      formatTime(duration),
+      " \xB7 ",
+      file.name?.split(".").pop()?.toUpperCase(),
+      file.size ? ` \xB7 ${(file.size / (1024 * 1024)).toFixed(1)} MB` : ""
+    ] })
+  ] });
+}
+export {
+  AudioPlayer as default
+};

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

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Copy, Check, WrapText } from "lucide-react";
+import { Button } from "../button.js";
+import { Badge } from "../../ui/badge.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { useTranslation } from "react-i18next";
+const LANG_MAP = {
+  js: "javascript",
+  jsx: "jsx",
+  ts: "typescript",
+  tsx: "tsx",
+  py: "python",
+  java: "java",
+  go: "go",
+  rs: "rust",
+  html: "html",
+  css: "css",
+  json: "json",
+  xml: "xml",
+  sh: "bash",
+  yaml: "yaml",
+  yml: "yaml",
+  md: "markdown",
+  txt: "text"
+};
+const SIZE_LIMIT = 1024 * 1024;
+function CodeViewer({ file }) {
+  const { t } = useTranslation();
+  const [code, setCode] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [wrap, setWrap] = useState(false);
+  const ext = file.name?.split(".").pop()?.toLowerCase() ?? "txt";
+  const lang = LANG_MAP[ext] ?? "text";
+  useEffect(() => {
+    setLoading(true);
+    setError(false);
+    setCode(null);
+    fetch(file.url, { referrerPolicy: "no-referrer" }).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.blob();
+    }).then((blob) => {
+      if (blob.size > SIZE_LIMIT) {
+        return blob.slice(0, SIZE_LIMIT).text().then((t2) => t2 + "\n\n... [File qu\xE1 l\u1EDBn, ch\u1EC9 hi\u1EC3n th\u1ECB 1MB \u0111\u1EA7u]");
+      }
+      return blob.text();
+    }).then((text) => {
+      setCode(text);
+      setLoading(false);
+    }).catch(() => {
+      setError(true);
+      setLoading(false);
+    });
+  }, [file.url]);
+  const handleCopy = () => {
+    if (!code) return;
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  const lineCount = code?.split("\n").length ?? 0;
+  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-2", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "default", className: "uppercase", children: lang }),
+        !loading && code && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("common:misc.codeFileSummary", {
+          name: file.name,
+          lineCount,
+          defaultValue: "{name} \xB7 {lineCount} d\xF2ng"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: wrap ? "default" : "ghost",
+            size: "icon",
+            className: "h-7 w-7",
+            onClick: () => setWrap((v) => !v),
+            "aria-label": "Wrap/No-wrap",
+            title: t("common:action.wrapLongLines", {
+              defaultValue: "Wrap d\xF2ng d\xE0i"
+            }),
+            children: /* @__PURE__ */ jsx(WrapText, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7",
+            onClick: handleCopy,
+            "aria-label": t("common:action.copy", { defaultValue: "Sao ch\xE9p" }),
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto text-sm", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-6", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "h-4",
+          style: { width: `${50 + Math.random() * 50}%` }
+        },
+        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"
+      }) }) }),
+      code && /* @__PURE__ */ jsx(
+        SyntaxHighlighter,
+        {
+          language: lang,
+          style: oneDark,
+          showLineNumbers: true,
+          wrapLines: true,
+          wrapLongLines: wrap,
+          customStyle: {
+            margin: 0,
+            borderRadius: 0,
+            minHeight: "100%",
+            fontSize: "13px",
+            overflowX: "auto"
+          },
+          children: code
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CodeViewer as default
+};

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

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import Papa from "papaparse";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ArrowUpDown, 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 { useTranslation } from "react-i18next";
+const ROW_LIMIT = 100;
+function CsvViewer({ file }) {
+  const { t } = useTranslation();
+  const [rows, setRows] = useState([]);
+  const [headers, setHeaders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [totalRows, setTotalRows] = useState(0);
+  const [fileSize, setFileSize] = useState(file.size || 0);
+  const [delimiter, setDelimiter] = useState(",");
+  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 (!r.ok) throw new Error(`HTTP ${r.status}`);
+      if (!file.size) {
+        const len = r.headers.get("Content-Length");
+        if (len) setFileSize(Number(len));
+      }
+      return r.text();
+    }).then((text) => {
+      const totalLines = text.trim().split("\n").length - 1;
+      const result = Papa.parse(text, {
+        header: true,
+        skipEmptyLines: true,
+        preview: ROW_LIMIT
+        // stop parsing after ROW_LIMIT data rows
+      });
+      setDelimiter(result.meta.delimiter || ",");
+      setHeaders(result.meta.fields || []);
+      setTotalRows(totalLines);
+      setRows(result.data);
+      setLoading(false);
+    }).catch(() => {
+      setError(true);
+      setLoading(false);
+    });
+  }, [file.url]);
+  const columns = useMemo(
+    () => headers.map((h, i) => ({
+      id: String(i),
+      accessorKey: h,
+      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: [
+            /* @__PURE__ */ jsx("span", { className: "mr-1 text-muted-foreground", children: String.fromCharCode(65 + i) }),
+            h,
+            /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-1 h-3 w-3 opacity-50" })
+          ]
+        }
+      )
+    })),
+    [headers]
+  );
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel()
+  });
+  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 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: "Delimiter" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: delimiter === "," ? "Comma ," : delimiter === "	" ? "Tab" : delimiter })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: t("common:placeholder.searchInCsv", {
+            defaultValue: "T\xECm trong CSV..."
+          }),
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "h-7 w-48 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "border-primary text-primary", children: [
+        table.getFilteredRowModel().rows.length,
+        " rows"
+      ] }),
+      /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+        headers.length,
+        " cols"
+      ] }),
+      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.showFirstRowsLimitAlt", {
+          rowLimit: ROW_LIMIT,
+          defaultValue: "Ch\u1EC9 hi\u1EC3n th\u1ECB {rowLimit} d\xF2ng \u0111\u1EA7u"
+        }),
+        " ",
+        "\xB7 ",
+        fileSize ? `${(fileSize / 1024).toFixed(0)} KB` : ""
+      ] })
+    ] }),
+    /* @__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.loadCsvFailed", {
+        defaultValue: "Kh\xF4ng th\u1EC3 t\u1EA3i CSV"
+      }) }) }),
+      !loading && !error && /* @__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 + 2 }),
+          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 && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border px-4 py-1.5 text-xs text-muted-foreground", children: [
+      "\u03A3 ",
+      totalRows,
+      " rows \xB7 ",
+      headers.length,
+      " cols \xB7 UTF-8 \xB7",
+      " ",
+      fileSize ? `${(fileSize / 1024).toFixed(0)} KB` : ""
+    ] })
+  ] });
+}
+export {
+  CsvViewer as default
+};