@infinilabs/doc-detail 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -65,6 +65,7 @@ declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
             aiInterpretation?: string;
         };
     };
+    requestHeaders?: Record<string, string>;
     actionButtons?: ReactNode[];
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinilabs/doc-detail",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/doc-detail.cjs",
   "module": "dist/doc-detail.js",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@ant-design/x": "^2.1.3",
     "@ant-design/x-markdown": "^2.1.3",
-    "@infinilabs/markdown": "^0.0.2",
+    "@infinilabs/markdown": "^0.0.4",
     "ahooks": "^3.9.6",
     "antd": "^6.0.0",
     "clsx": "^2.1.1",
@@ -45,7 +45,7 @@
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
     "unocss": "^66.5.10",
-    "vite": "^7.2.4",
+    "vite": "7.2.4",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.4"
   },

package/src/components/DocDetail/components/Preview/components/Docx/index.tsx

@@ -7,14 +7,16 @@ interface DocxProps extends DocDetailProps {
 }
 
 const Docx: FC<DocxProps> = (props) => {
-  const { url } = props;
+  const { url, requestHeaders } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   const renderDocx = async () => {
     if (!containerRef.current) return;
 
-    const response = await fetch(url);
+    const response = await fetch(url, {
+      headers: requestHeaders,
+    });
 
     const arrayBuffer = await response.arrayBuffer();
 

package/src/components/DocDetail/components/Preview/components/Image/index.tsx

@@ -1,14 +1,29 @@
-import { useMemo, useRef, useState, type FC } from "react";
+import { useEffect, useMemo, useRef, useState, type FC } from "react";
 import { Image as AntdImage, Skeleton } from "antd";
 import { useSize } from "ahooks";
 
 import type { DocDetailProps } from "@/components/DocDetail";
 
 const Image: FC<DocDetailProps> = (props) => {
-  const { data } = props;
+  const { data, requestHeaders } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const containerSize = useSize(containerRef);
   const [failed, setFailed] = useState(false);
+  const [imgSrc, setImgSrc] = useState<string | undefined>(data?.url);
+
+  useEffect(() => {
+    if (!requestHeaders || !data?.url) {
+      setImgSrc(failed ? data?.thumbnail : data?.url);
+      return;
+    }
+
+    const targetUrl = failed ? data?.thumbnail : data?.url;
+    if (!targetUrl) return;
+
+    fetch(targetUrl, { headers: requestHeaders })
+      .then((res) => res.blob())
+      .then((blob) => setImgSrc(URL.createObjectURL(blob)));
+  }, [data?.url, data?.thumbnail, failed, requestHeaders]);
 
   const calcHeight = useMemo(() => {
     const { width, height } = data.metadata ?? {};
@@ -35,7 +50,7 @@ const Image: FC<DocDetailProps> = (props) => {
             }}
           />
         }
-        src={failed ? data?.thumbnail : data?.url}
+        src={imgSrc}
         onError={() => {
           setFailed(true);
         }}

package/src/components/DocDetail/components/Preview/components/Pdf/index.tsx

@@ -1,5 +1,5 @@
 import { Document, Page, pdfjs } from "react-pdf";
-import { useState, type FC } from "react";
+import { useState, useEffect, type FC } from "react";
 import type { DocDetailProps } from "@/components/DocDetail";
 import { Pagination } from "antd";
 
@@ -10,10 +10,21 @@ interface PdfProps extends DocDetailProps {
 }
 
 const Pdf: FC<PdfProps> = (props) => {
-  const { url } = props;
+  const { url, requestHeaders } = props;
 
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
+  const [fileData, setFileData] = useState<{ data: ArrayBuffer } | string>(url);
+
+  useEffect(() => {
+    if (requestHeaders) {
+      fetch(url, { headers: requestHeaders })
+        .then((res) => res.arrayBuffer())
+        .then((data) => setFileData({ data }));
+    } else {
+      setFileData(url);
+    }
+  }, [url, requestHeaders]);
 
   return (
     <div className="flex flex-col gap-2">
@@ -30,7 +41,7 @@ const Pdf: FC<PdfProps> = (props) => {
 
       <div className="border border-solid border-border rounded-lg overflow-hidden">
         <Document
-          file={url}
+          file={fileData}
           onLoadSuccess={(pdf) => {
             setNumPages(pdf.numPages);
           }}

package/src/components/DocDetail/components/Preview/components/Pptx/index.tsx

@@ -8,7 +8,7 @@ interface PptxProps extends DocDetailProps {
 }
 
 const Pptx: FC<PptxProps> = (props) => {
-  const { url } = props;
+  const { url, requestHeaders } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -20,7 +20,9 @@ const Pptx: FC<PptxProps> = (props) => {
       height: 540,
     });
 
-    const response = await fetch(url);
+    const response = await fetch(url, {
+      headers: requestHeaders,
+    });
 
     const arrayBuffer = await response.arrayBuffer();
 

package/src/components/DocDetail/components/Preview/components/Video/index.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState, type FC } from "react";
+
+interface VideoProps {
+  url: string;
+  requestHeaders?: Record<string, string>;
+}
+
+const Video: FC<VideoProps> = (props) => {
+  const { url, requestHeaders } = props;
+
+  const [src, setSrc] = useState<string>(url);
+
+  useEffect(() => {
+    if (!requestHeaders) {
+      setSrc(url);
+      return;
+    }
+
+    fetch(url, { headers: requestHeaders })
+      .then((res) => res.blob())
+      .then((blob) => setSrc(URL.createObjectURL(blob)));
+  }, [url, requestHeaders]);
+
+  return <video src={src} className="w-full" controls />;
+};
+
+export default Video;

package/src/components/DocDetail/components/Preview/index.tsx

@@ -10,13 +10,14 @@ import Pdf from "./components/Pdf";
 import Docx from "./components/Docx";
 import Pptx from "./components/Pptx";
 import Image from "./components/Image";
+import Video from "./components/Video";
 
 const Preview: FC<DocDetailProps> = (props) => {
   const { data, i18n } = props;
 
   const renderFile = (type: MetadataContentType, url: string) => {
     if (type === "markdown") {
-      return <Markdown url={url} />;
+      return <Markdown url={url} requestHeaders={props.requestHeaders} />;
     }
 
     if (type === "pdf") {
@@ -45,7 +46,7 @@ const Preview: FC<DocDetailProps> = (props) => {
     }
 
     if (type === "video") {
-      return <video src={url} className="w-full" controls />;
+      return <Video url={url} requestHeaders={props.requestHeaders} />;
     }
 
     return (

package/src/components/DocDetail/index.tsx

@@ -74,6 +74,7 @@ export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
       aiInterpretation?: string;
     };
   };
+  requestHeaders?: Record<string, string>;
   actionButtons?: ReactNode[];
 }