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

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

@@ -0,0 +1,747 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { RetryImage } from "../retry-image.js";
+import { MessageTime } from "../../chat-route/chat-box/message-time.js";
+import {
+  FileText,
+  FileImage,
+  FileAudio,
+  FileVideo,
+  FileSpreadsheet,
+  FileX,
+  File,
+  FileArchive,
+  FileCode,
+  Download
+} from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger
+} from "../../ui/context-menu.js";
+import { cn } from "../../../lib/utils.js";
+import { isImage } from "../../../utils/file.js";
+import { saveAs } from "file-saver";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { ChatReplyPreview } from "../../chat-route/chat-box/chat-reply-preview.js";
+import { isAgentStyle } from "../../chat-route/util.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import useFilePreviewStore from "../../../store/file-preview-store.js";
+import { useTranslation } from "react-i18next";
+const getIconForContentType = (mimeType, className) => {
+  if (!mimeType) return /* @__PURE__ */ jsx(File, { className: cn("h-6 w-6", className) });
+  const [type, subType] = mimeType.split("/");
+  switch (type) {
+    case "image":
+      return /* @__PURE__ */ jsx(FileImage, { className: cn("h-6 w-6", className) });
+    case "audio":
+      return /* @__PURE__ */ jsx(FileAudio, { className: cn("h-6 w-6", className) });
+    case "video":
+      return /* @__PURE__ */ jsx(FileVideo, { className: cn("h-6 w-6", className) });
+    case "text":
+      return /* @__PURE__ */ jsx(FileText, { className: cn("h-6 w-6", className) });
+    case "application":
+      switch (subType) {
+        case "pdf":
+          return /* @__PURE__ */ jsx(File, { className: cn("h-6 w-6", className) });
+        case "msword":
+        case "vnd.openxmlformats-officedocument.wordprocessingml.document":
+          return /* @__PURE__ */ jsx(FileText, { className: cn("h-6 w-6", className) });
+        case "vnd.ms-excel":
+        case "vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+          return /* @__PURE__ */ jsx(FileSpreadsheet, { className: cn("h-6 w-6", className) });
+        case "vnd.ms-powerpoint":
+        case "vnd.openxmlformats-officedocument.presentationml.presentation":
+          return /* @__PURE__ */ jsx(File, { className: cn("h-6 w-6", className) });
+        case "json":
+        case "xml":
+        case "javascript":
+          return /* @__PURE__ */ jsx(FileCode, { className: cn("h-6 w-6", className) });
+        case "zip":
+        case "x-rar-compressed":
+        case "x-7z-compressed":
+          return /* @__PURE__ */ jsx(FileArchive, { className: cn("h-6 w-6", className) });
+        default:
+          return /* @__PURE__ */ jsx(File, { className: cn("h-6 w-6", className) });
+      }
+    default:
+      return /* @__PURE__ */ jsx(FileX, { className: cn("h-6 w-6", className) });
+  }
+};
+const getColorFromName = (fileName) => {
+  if (!fileName) return "bg-muted";
+  const extension = fileName.split(".").pop().toLowerCase();
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "bmp":
+    case "webp":
+      return "bg-secondary";
+    case "mp4":
+    case "avi":
+    case "mov":
+    case "wmv":
+    case "flv":
+    case "mkv":
+      return "bg-muted";
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+      return "bg-muted";
+    case "txt":
+    case "rtf":
+    case "md":
+      return "bg-muted";
+    case "pdf":
+      return "bg-[--label-green]";
+    case "doc":
+    case "docx":
+      return "bg-secondary";
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return "bg-[--label-green]";
+    case "ppt":
+    case "pptx":
+      return "bg-[--label-orange]";
+    case "zip":
+    case "rar":
+    case "7z":
+      return "bg-[--label-orange]";
+    case "json":
+    case "xml":
+    case "js":
+    case "html":
+    case "htm":
+    case "css":
+    case "php":
+    case "py":
+    case "java":
+      return "bg-secondary";
+    default:
+      return "bg-muted";
+  }
+};
+const getBtnColorFromName = (fileName) => {
+  if (!fileName) return "bg-muted hover:bg-muted-foreground";
+  const extension = fileName.split(".").pop().toLowerCase();
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "bmp":
+    case "webp":
+      return "bg-chart-7/40 hover:bg-chart-7/70";
+    case "mp4":
+    case "avi":
+    case "mov":
+    case "wmv":
+    case "flv":
+    case "mkv":
+      return "bg-chart-9/40 hover:bg-chart-9/70";
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+      return "bg-chart-5/40 hover:bg-chart-5/70";
+    case "txt":
+    case "rtf":
+    case "md":
+      return "bg-muted hover:bg-muted-foreground";
+    case "pdf":
+      return "bg-chart-2/40 hover:bg-chart-2/70";
+    case "doc":
+    case "docx":
+      return "bg-chart-7/40 hover:bg-chart-7/70";
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return "bg-chart-2/40 hover:bg-chart-2/70";
+    case "ppt":
+    case "pptx":
+      return "bg-chart-1/40 hover:bg-chart-1/70";
+    case "zip":
+    case "rar":
+    case "7z":
+      return "bg-chart-4/40 hover:bg-chart-4/70";
+    case "json":
+    case "xml":
+    case "js":
+    case "html":
+    case "htm":
+    case "css":
+    case "php":
+    case "py":
+    case "java":
+      return "bg-chart-3/40 hover:bg-chart-3/70";
+    default:
+      return "bg-muted hover:bg-muted-foreground";
+  }
+};
+const getColor = (mimeType, fileName) => {
+  if (!mimeType) return getColorFromName(fileName);
+  const [type, subType] = mimeType.split("/");
+  switch (type) {
+    case "image":
+      return "bg-secondary";
+    case "video":
+      return "bg-muted";
+    case "audio":
+      return "bg-muted";
+    case "text":
+      return "bg-muted";
+    case "application":
+      switch (subType) {
+        case "pdf":
+          return "bg-[--label-green]";
+        case "msword":
+        case "vnd.openxmlformats-officedocument.wordprocessingml.document":
+          return "bg-secondary";
+        case "vnd.ms-excel":
+        case "vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+          return "bg-[--label-green]";
+        case "vnd.ms-powerpoint":
+        case "vnd.openxmlformats-officedocument.presentationml.presentation":
+          return "bg-[--label-orange]";
+        case "zip":
+        case "x-rar-compressed":
+        case "x-7z-compressed":
+          return "bg-[--label-orange]";
+        case "json":
+        case "xml":
+        case "javascript":
+          return "bg-secondary";
+        case "x-www-form-urlencoded":
+          return getColorFromName(fileName);
+        default:
+          return "bg-muted";
+      }
+    default:
+      return getColorFromName(fileName);
+  }
+};
+const getBtnColor = (mimeType, fileName) => {
+  if (!mimeType) return getBtnColorFromName(fileName);
+  const [type, subType] = mimeType.split("/");
+  switch (type) {
+    case "image":
+      return "bg-chart-7/40  hover:bg-primary";
+    case "video":
+      return "bg-chart-9/40  hover:bg-chart-9";
+    case "audio":
+      return "bg-chart-5/40  hover:bg-chart-5";
+    case "text":
+      return "bg-muted  hover:bg-muted-foreground";
+    case "application":
+      switch (subType) {
+        case "pdf":
+          return "bg-chart-2/40  hover:bg-success";
+        case "msword":
+        case "vnd.openxmlformats-officedocument.wordprocessingml.document":
+          return "bg-chart-7/40  hover:bg-primary";
+        case "vnd.ms-excel":
+        case "vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+          return "bg-chart-2/40  hover:bg-success";
+        case "vnd.ms-powerpoint":
+        case "vnd.openxmlformats-officedocument.presentationml.presentation":
+          return "bg-chart-1/40  hover:bg-chart-1";
+        case "zip":
+        case "x-rar-compressed":
+        case "x-7z-compressed":
+          return "bg-chart-4/40 hover:bg-chart-4/70";
+        case "json":
+        case "xml":
+        case "javascript":
+          return "bg-chart-3/40 hover:bg-chart-3/70";
+        default:
+          return "bg-muted hover:bg-muted-foreground";
+      }
+    case "x-www-form-urlencoded":
+      return getBtnColorFromName(fileName);
+    default:
+      return getBtnColorFromName(fileName);
+  }
+};
+const getFileTypeDisplay = (mimeType, fileName) => {
+  if (!mimeType) {
+    return getFileTypeFromName(fileName);
+  }
+  const [type, subType] = mimeType.split("/");
+  switch (type) {
+    case "image":
+      return "H\xCCNH \u1EA2NH";
+    case "video":
+      return "VIDEO";
+    case "audio":
+      return "\xC2M THANH";
+    case "text":
+      return "V\u0102N B\u1EA2N";
+    case "application":
+      switch (subType) {
+        case "pdf":
+          return "PDF";
+        case "msword":
+        case "vnd.openxmlformats-officedocument.wordprocessingml.document":
+          return "WORD";
+        case "vnd.ms-excel":
+        case "vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+          return "EXCEL";
+        case "vnd.ms-powerpoint":
+        case "vnd.openxmlformats-officedocument.presentationml.presentation":
+          return "POWERPOINT";
+        case "zip":
+        case "x-zip-compressed":
+          return "ZIP";
+        case "x-rar-compressed":
+          return "RAR";
+        case "x-7z-compressed":
+          return "7-ZIP";
+        case "json":
+          return "JSON";
+        case "xml":
+          return "XML";
+        case "javascript":
+          return "JS";
+        case "x-www-form-urlencoded":
+          return getFileTypeFromName(fileName) || "FORM DATA";
+        default:
+          return subType ? subType.toUpperCase() : getFileTypeFromName(fileName) || "FILE";
+      }
+    default:
+      return subType ? subType.toUpperCase() : getFileTypeFromName(fileName) || "FILE";
+  }
+};
+const getFileTypeFromName = (fileName) => {
+  if (!fileName) return "FILE";
+  const extension = fileName.split(".").pop().toLowerCase();
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "bmp":
+    case "webp":
+      return "H\xCCNH \u1EA2NH";
+    case "mp4":
+    case "avi":
+    case "mov":
+    case "wmv":
+    case "flv":
+    case "mkv":
+      return "VIDEO";
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+      return "\xC2M THANH";
+    case "txt":
+    case "rtf":
+    case "md":
+      return "V\u0102N B\u1EA2N";
+    case "pdf":
+      return "PDF";
+    case "doc":
+    case "docx":
+      return "WORD";
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return "EXCEL";
+    case "ppt":
+    case "pptx":
+      return "POWERPOINT";
+    case "zip":
+      return "ZIP";
+    case "rar":
+      return "RAR";
+    case "7z":
+      return "7-ZIP";
+    case "json":
+      return "JSON";
+    case "xml":
+      return "XML";
+    case "js":
+      return "JS";
+    case "html":
+    case "htm":
+      return "HTML";
+    case "css":
+      return "CSS";
+    case "php":
+      return "PHP";
+    case "py":
+      return "PYTHON";
+    case "java":
+      return "JAVA";
+    default:
+      return extension ? extension.toUpperCase() : "FILE";
+  }
+};
+const mimeTypes = {
+  // Images
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  bmp: "image/bmp",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+  // Text
+  txt: "text/plain",
+  css: "text/css",
+  csv: "text/csv",
+  xml: "application/xml",
+  json: "application/json",
+  // Audio
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  m4a: "audio/mp4",
+  // Video
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  webm: "video/webm",
+  ogv: "video/ogg",
+  // Applications
+  pdf: "application/pdf",
+  zip: "application/zip",
+  rar: "application/vnd.rar",
+  tar: "application/x-tar",
+  gz: "application/gzip",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  eot: "application/vnd.ms-fontobject",
+  ttf: "font/ttf",
+  woff: "font/woff",
+  woff2: "font/woff2"
+};
+function getMimeType(ext) {
+  if (!ext || typeof ext !== "string") {
+    return "application/octet-stream";
+  }
+  const key = ext.startsWith(".") ? ext.slice(1).toLowerCase() : ext.toLowerCase();
+  return mimeTypes[key] || "application/octet-stream";
+}
+function getNormalFileName(fileName, maxLength = 100) {
+  if (!fileName) return "";
+  fileName = fileName.split("?")[0];
+  try {
+    fileName = decodeURIComponent(fileName);
+  } catch (e) {
+    console.warn("Could not decode filename", e);
+  }
+  const nameWithoutExt = fileName;
+  const formattedName = nameWithoutExt.trim();
+  if (formattedName.length > maxLength) {
+    const halfLength = Math.floor(maxLength / 2) - 1;
+    return formattedName.substring(0, halfLength) + "..." + formattedName.substring(formattedName.length - halfLength);
+  }
+  return formattedName;
+}
+const checkMimeType = async (url, afterText) => {
+  if (afterText && url.endsWith(afterText)) {
+    url = url.slice(0, -afterText.length);
+  }
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      referrerPolicy: "no-referrer"
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const blob = await response.blob();
+    return blob.type || "application/octet-stream";
+  } catch {
+    return "";
+  }
+};
+function FilePreview({
+  url,
+  className,
+  showImage = false,
+  removeCallback,
+  isReply,
+  msg,
+  ticket,
+  timeText,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const ticketId = ticket?._id;
+  const [fileData, setFileData] = useState({
+    fileName: "Unnamed file",
+    extension: "txt",
+    fileSize: 0,
+    mimeType: "",
+    isImage: false
+  });
+  useEffect(() => {
+    if (!url) return;
+    const processFileData = async () => {
+      let fileName = msg?.content?.file_name || msg?.content?.filename;
+      if (!fileName) {
+        try {
+          fileName = new URL(url).pathname.split("/").pop() || "";
+        } catch {
+          fileName = url.split("?")[0].split("/").pop() || "";
+        }
+      }
+      const cleanName = fileName.split("?")[0];
+      fileName = cleanName;
+      const extension = cleanName.split(".").pop().toLowerCase();
+      let mimeType = null;
+      if (mimeTypes[extension]) {
+        mimeType = getMimeType(extension);
+      } else {
+        mimeType = await checkMimeType(url);
+      }
+      const fileSize = 0;
+      const isImageFile = isImage(mimeType, extension);
+      setFileData({
+        fileName,
+        extension,
+        fileSize,
+        mimeType,
+        isImage: isImageFile
+      });
+    };
+    processFileData();
+  }, [url, setFileData]);
+  const downloadFile = async () => {
+    let cleanedUrl = url;
+    if (url.includes("\n")) {
+      cleanedUrl = url.split("\n")[0].trim();
+    }
+    try {
+      const response = await fetch(cleanedUrl, {
+        method: "GET",
+        referrerPolicy: "no-referrer"
+      });
+      const blob = await response.blob();
+      saveAs(
+        blob,
+        fileData.fileName.trim() || `downloaded_file.${fileData.extension}`
+      );
+    } catch (error) {
+      console.error("Error during file download:", error);
+      window.open(cleanedUrl, "_blank");
+    }
+  };
+  const getShortFileName = (name, maxLength = 50) => {
+    if (!name || name.length <= maxLength) return name;
+    const charsToShow = maxLength - 3;
+    const frontChars = Math.ceil(charsToShow / 2);
+    const backChars = Math.floor(charsToShow / 2);
+    return name.substring(0, frontChars) + "..." + name.substring(name.length - backChars);
+  };
+  const normalFileName = useMemo(
+    () => getNormalFileName(fileData.fileName),
+    [fileData.fileName]
+  );
+  const openPreview = useFilePreviewStore((s) => s.openPreview);
+  const handleOpenPreview = () => {
+    openPreview(
+      [
+        {
+          name: fileData.fileName,
+          url,
+          mimeType: fileData.mimeType,
+          size: fileData.fileSize
+        }
+      ],
+      0
+    );
+  };
+  const shortyFileName = useMemo(() => {
+    return getShortFileName(normalFileName, 50);
+  }, [normalFileName]);
+  if (isReply) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "line-clamp-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs text-foreground-secondary",
+          className
+        ),
+        children: [
+          `[File] ${shortyFileName}`,
+          " "
+        ]
+      }
+    );
+  }
+  return showImage && fileData.isImage ? /* @__PURE__ */ jsxs(ContextMenu, { children: [
+    /* @__PURE__ */ jsx(ContextMenuTrigger, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "chat-box max-w-[300px] cursor-pointer overflow-hidden rounded-lg bg-card shadow-md",
+          className
+        ),
+        ...props,
+        onClick: handleOpenPreview,
+        children: [
+          msg?.extra_data?.reply_msg_info && /* @__PURE__ */ jsx(
+            ChatReplyPreview,
+            {
+              isAgent: isAgentStyle({ msg, ticket, user }),
+              ticketId,
+              isView: true,
+              classNameContent: "text-card-foreground",
+              className: "!m-0",
+              replyContent: {
+                ...msg.extra_data?.reply_msg_info,
+                _id: msg.extra_data?.reply_msg_info?.chat_message_id || msg.extra_data?.reply_msg_info?._id
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RetryImage,
+            {
+              src: url,
+              alt: "Image",
+              className: cn(
+                "inset-0 h-full w-full scale-100 object-cover blur-0 grayscale-0 duration-700 ease-in-out"
+              ),
+              referrerPolicy: "no-referrer",
+              onFinalError: () => {
+                setFileData((prev) => ({
+                  ...prev,
+                  isImage: false
+                }));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MessageTime,
+            {
+              timeText,
+              status: msg?.status,
+              className: "px-2 pb-1"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ContextMenuContent, { children: /* @__PURE__ */ jsx(ContextMenuItem, { onClick: downloadFile, children: t("common:action.download", { defaultValue: "T\u1EA3i xu\u1ED1ng" }) }) })
+  ] }) : /* @__PURE__ */ jsxs(ContextMenu, { children: [
+    /* @__PURE__ */ jsx(ContextMenuTrigger, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "chat-box relative cursor-pointer overflow-hidden rounded-lg border bg-card shadow-md transition-all duration-300",
+          className,
+          getColor(fileData.mimeType)
+        ),
+        ...props,
+        role: "button",
+        "aria-label": `File preview for ${fileData.fileName}`,
+        onClick: handleOpenPreview,
+        children: [
+          msg?.extra_data?.reply_msg_info && /* @__PURE__ */ jsx(
+            ChatReplyPreview,
+            {
+              isAgent: isAgentStyle({ msg, ticket, user }),
+              ticketId,
+              isView: true,
+              classNameContent: "text-card-foreground",
+              className: "!m-0",
+              replyContent: {
+                ...msg.extra_data?.reply_msg_info,
+                _id: msg.extra_data?.reply_msg_info?.chat_message_id || msg.extra_data?.reply_msg_info?._id
+              }
+            }
+          ),
+          removeCallback && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                removeCallback();
+              },
+              className: "absolute right-1 top-1 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+              children: /* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 bg-surface-subtle p-4", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-12 w-12 items-center justify-center rounded-full",
+                    getColor(fileData.mimeType, normalFileName)
+                  ),
+                  children: getIconForContentType(fileData.mimeType)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "truncate text-sm font-medium text-foreground",
+                    title: normalFileName,
+                    children: shortyFileName
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getFileTypeDisplay(fileData.mimeType, normalFileName) }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    downloadFile();
+                  },
+                  className: cn(
+                    "flex items-center space-x-1 rounded-full px-3 py-1 text-xs text-white transition-colors",
+                    getBtnColor(fileData.mimeType, normalFileName)
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Download, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: "Download" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              MessageTime,
+              {
+                timeText,
+                status: msg?.status,
+                className: "mt-0 px-4 pb-2"
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ContextMenuContent, { children: /* @__PURE__ */ jsx(ContextMenuItem, { onClick: downloadFile, children: t("common:action.download", { defaultValue: "T\u1EA3i xu\u1ED1ng" }) }) })
+  ] });
+}
+export {
+  FilePreview,
+  checkMimeType,
+  getColor,
+  getFileTypeDisplay,
+  getIconForContentType,
+  getMimeType,
+  mimeTypes
+};