@infinilabs/doc-detail 0.0.0 → 0.0.2

package/dist/index.d.ts

@@ -1,63 +1,55 @@
+import { ButtonProps } from 'antd';
 import { FC } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ActionButton: FC<ActionButtonProps>;
+
+declare type ActionButtonProps = ButtonProps;
 
 export declare const DocDetail: FC<DocDetailProps>;
 
-declare interface DocDetailProps {
+declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
     data: {
-        source: {
-            type: string;
-            name: string;
-            id: string;
+        id?: string;
+        created?: ReactNode;
+        updated?: ReactNode;
+        _system?: {
+            owner_id?: string;
+            parent_path?: string;
+            tenant_id?: string;
         };
-        category: string;
-        categories: string[];
-        cover: string;
-        title: string;
-        summary: string;
-        type: string;
-        lang: string;
-        content: string;
-        icon: string;
-        thumbnail: string;
-        tags: string[];
-        url: string;
-        size: number;
-        owner: {
-            avatar: string;
-            username: string;
-            userid: string;
+        metadata?: {
+            ai_insights?: string;
+            colors?: string[];
+            content_type?: MetadataContentType;
+            height?: number;
+            mime_type?: string;
+            users?: null | unknown;
+            width?: number;
         };
-        metadata: {
-            version: string;
-            department: string;
-            last_reviewed: string;
-            file_extension: string;
-            icon_link: string;
-            has_thumbnail: boolean;
-            kind: string;
-            parents: string[];
-            properties: Record<string, string>;
-            spaces: string[];
-            starred: boolean;
-            driveId: string;
-            thumbnail_link: string;
-            video_media_metadata?: {
-                durationMillis: string;
-                width: number;
-                height: number;
-            };
-            image_media_metadata?: {
-                width: number;
-                height: number;
-            };
+        source?: {
+            type?: string;
+            name?: string;
+            id?: string;
         };
-        last_updated_by: {
-            user: {
-                avatar: string;
-                username: string;
-                userid: string;
-            };
-            timestamp: string;
+        type?: string;
+        category?: string;
+        title?: string;
+        summary?: string;
+        icon?: string;
+        thumbnail?: string;
+        cover?: string;
+        tags?: string[];
+        url?: string;
+        size?: ReactNode;
+        owner: {
+            type?: string;
+            id?: string;
+            icon?: string;
+            title?: string;
+            subtitle?: string;
+            cover?: string;
         };
     };
     i18n?: {
@@ -74,6 +66,9 @@ declare interface DocDetailProps {
             size?: string;
         };
     };
+    extraButtons?: ReactNode[];
 }
 
+declare type MetadataContentType = "image" | "video" | "markdown" | "pdf" | "docx" | "pptx" | "xlsx";
+
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinilabs/doc-detail",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "main": "dist/doc-detail.cjs",
   "module": "dist/doc-detail.js",
@@ -22,9 +22,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/x-markdown": "^2.1.3",
     "antd": "^6.0.0",
     "clsx": "^2.1.1",
+    "docx-preview": "^0.3.7",
     "lucide-react": "^0.562.0",
+    "motion": "^12.23.26",
+    "pptx-preview": "^1.0.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-pdf": "^10.2.0",
@@ -46,5 +50,9 @@
     "antd": ">=5",
     "react": ">=17",
     "react-dom": ">=17"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/infinilabs/ci"
   }
 }

package/src/App.tsx

@@ -1,64 +1,35 @@
-import { DocDetail } from "./components";
+import { Bot } from "lucide-react";
+import { ActionButton, DocDetail } from "./components";
 
 const App = () => {
   return (
     <div className="h-screen">
       <DocDetail
         data={{
+          type: "file",
           source: {
-            type: "connector",
             name: "My Hugo Site",
-            id: "e806831dacc3",
           },
           category: "report",
-          categories: ["business", "quarterly_reports"],
-          cover: "https://picsum.photos/seed/report-cover/640/360",
           title: "Q3 Business Report",
-          summary: "An overview of the company financial performance for Q3.",
-          type: "PDF",
-          lang: "en",
-          content:
-            "This quarters revenue increased by 15%, driven by strong sales in the APAC region...",
           icon: "https://picsum.photos/seed/file-icon/40/40",
-          thumbnail: "https://picsum.photos/seed/report-thumb/320/180",
-          tags: ["finance", "quarterly", "business", "report"],
-          url: "https://drive.google.com/file/d/abc123/view",
           size: 1048576,
-          owner: {
-            avatar: "https://picsum.photos/seed/user-avatar/64/64",
-            username: "jdoe",
-            userid: "user123",
-          },
+          url: "http://192.168.3.181:9101/coco-server/test.pdf",
           metadata: {
-            version: "1.2",
-            department: "Finance",
-            last_reviewed: "2024-10-20",
-            file_extension: "pdf",
-            icon_link: "https://picsum.photos/seed/filetype-icon/40/40",
-            has_thumbnail: true,
-            kind: "drive#file",
-            parents: ["folder123"],
-            properties: { shared: "true" },
-            spaces: ["drive"],
-            starred: false,
-            driveId: "drive123",
-            thumbnail_link: "https://picsum.photos/seed/file-thumb/320/180",
-            video_media_metadata: {
-              durationMillis: "60000",
-              width: 1920,
-              height: 1080,
-            },
-            image_media_metadata: { width: 1024, height: 768 },
+            content_type: "pdf",
+            ai_insights: `# AI Interpretation\n### Welcome to XMarkdown！\n- Project 1 \n- Project 2\n- Project 3`,
           },
-          last_updated_by: {
-            user: {
-              avatar: "https://picsum.photos/seed/editor-avatar/64/64",
-              username: "editor123",
-              userid: "editor123@example.com",
-            },
-            timestamp: "2024-11-01T15:30:00Z",
+          owner: {
+            title: "Alice Johnson",
           },
+          created: "2026-01-09T02:30:10.188Z",
+          updated: "2026-01-09T02:30:10.188Z",
         }}
+        extraButtons={[
+          <ActionButton key="bot" icon={<Bot />}>
+            Continue Chat
+          </ActionButton>,
+        ]}
       />
     </div>
   );

package/src/components/ActionButton/index.tsx

@@ -0,0 +1,51 @@
+import { Button, type ButtonProps } from "antd";
+import { useState, type FC, type MouseEvent } from "react";
+import { motion } from "motion/react";
+
+export type ActionButtonProps = ButtonProps;
+
+const ActionButton: FC<ActionButtonProps> = (props) => {
+  const { icon, children, onMouseOver, onMouseOut, ...rest } = props;
+
+  const [hovered, setHovered] = useState(false);
+
+  const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {
+    setHovered(true);
+
+    onMouseOver?.(event);
+  };
+
+  const handleMouseOut = (event: MouseEvent<HTMLButtonElement>) => {
+    setHovered(false);
+
+    onMouseOut?.(event);
+  };
+
+  return (
+    <Button
+      {...rest}
+      color="primary"
+      variant="filled"
+      shape="round"
+      className="gap-0"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <span className="inline-flex items-center children:size-4">{icon}</span>
+
+      <motion.span
+        className="overflow-hidden"
+        initial={false}
+        animate={{
+          width: hovered ? "auto" : 0,
+          opacity: Number(hovered),
+          paddingLeft: Number(hovered) * 8,
+        }}
+      >
+        {children}
+      </motion.span>
+    </Button>
+  );
+};
+
+export default ActionButton;

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

@@ -1,99 +1,24 @@
 import type { FC } from "react";
-import type { DocDetailProps } from "../..";
 import { Collapse } from "antd";
 
+import type { DocDetailProps } from "@/components/DocDetail";
+import Markdown from "../Preview/components/Markdown";
+
 const AIInterpretation: FC<DocDetailProps> = (props) => {
-  const { i18n } = props;
+  const { data, i18n } = props;
 
   return (
     <Collapse
       size="small"
       classNames={{
         root: "bg-transparent",
+        body: "p-4!",
       }}
       items={[
         {
           key: "ai-interpretation",
           label: i18n?.labels?.aiInterpretation ?? "AI Interpretation",
-          children: (
-            <p>
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad
-              doloribus unde porro, est molestiae voluptates provident quam ex
-              cumque quasi asperiores dicta vero. Ullam corrupti exercitationem
-              rerum temporibus tempora fugit. Nihil impedit odit vel
-              reprehenderit itaque voluptatum laborum dolore quae earum
-              explicabo quibusdam laudantium officia, esse, recusandae ratione?
-              Vero temporibus rem, quisquam facilis vel officia possimus nihil
-              porro ad minus! Similique explicabo fugit consectetur modi nulla
-              quasi unde vitae non eos, vel dolorem dolor voluptates veniam.
-              Consectetur minima voluptatem quisquam ipsa facere! Maxime nam
-              quae blanditiis architecto ipsa tempore qui. Pariatur earum
-              debitis quis magnam temporibus impedit tempore reiciendis,
-              exercitationem veritatis corrupti tempora et suscipit totam unde
-              nulla quae perspiciatis molestiae harum dolores iusto corporis!
-              Architecto explicabo facilis consequuntur neque. Fuga quisquam
-              placeat fugit rerum nam laborum ad, debitis nemo magnam eius
-              officia tenetur, ducimus incidunt velit assumenda nisi,
-              praesentium perferendis quibusdam commodi! Ab tenetur minima ad
-              quae aspernatur maiores! Nostrum rem voluptatibus ullam
-              reiciendis, harum quod quas nesciunt id voluptatum natus quisquam?
-              Quam rerum deleniti error labore impedit, molestiae sapiente
-              maxime velit dolore. Cumque unde repellat eligendi nemo
-              consectetur! Error porro non in! Inventore, numquam, quod quam
-              tempore officiis placeat optio non ullam tenetur voluptates
-              laborum ipsam dolores a eos vitae nemo saepe architecto culpa,
-              soluta velit! Id, magni. Laborum consequuntur magni architecto
-              velit, accusantium delectus alias, amet libero, voluptatibus iure
-              fugit magnam corporis id quas ut suscipit necessitatibus ad nihil.
-              Molestias nesciunt, dolore facere autem ratione voluptatum vero.
-              Saepe, nihil asperiores necessitatibus delectus fugiat dolorem
-              cum, temporibus fuga dolores ipsum officiis odio repellendus
-              repudiandae similique incidunt quisquam. Beatae, illo! Iste
-              mollitia dolor fuga repellendus, perferendis accusamus modi
-              beatae! Ducimus repellat voluptate asperiores, accusantium omnis
-              voluptatem beatae laudantium provident? Et sequi vel molestiae
-              temporibus repellat nulla dolorem adipisci quod dignissimos
-              aliquid! Assumenda, minima laboriosam. Voluptates amet nobis odit
-              veritatis!Lorem ipsum dolor, sit amet consectetur adipisicing
-              elit. Ad doloribus unde porro, est molestiae voluptates provident
-              quam ex cumque quasi asperiores dicta vero. Ullam corrupti
-              exercitationem rerum temporibus tempora fugit. Nihil impedit odit
-              vel reprehenderit itaque voluptatum laborum dolore quae earum
-              explicabo quibusdam laudantium officia, esse, recusandae ratione?
-              Vero temporibus rem, quisquam facilis vel officia possimus nihil
-              porro ad minus! Similique explicabo fugit consectetur modi nulla
-              quasi unde vitae non eos, vel dolorem dolor voluptates veniam.
-              Consectetur minima voluptatem quisquam ipsa facere! Maxime nam
-              quae blanditiis architecto ipsa tempore qui. Pariatur earum
-              debitis quis magnam temporibus impedit tempore reiciendis,
-              exercitationem veritatis corrupti tempora et suscipit totam unde
-              nulla quae perspiciatis molestiae harum dolores iusto corporis!
-              Architecto explicabo facilis consequuntur neque. Fuga quisquam
-              placeat fugit rerum nam laborum ad, debitis nemo magnam eius
-              officia tenetur, ducimus incidunt velit assumenda nisi,
-              praesentium perferendis quibusdam commodi! Ab tenetur minima ad
-              quae aspernatur maiores! Nostrum rem voluptatibus ullam
-              reiciendis, harum quod quas nesciunt id voluptatum natus quisquam?
-              Quam rerum deleniti error labore impedit, molestiae sapiente
-              maxime velit dolore. Cumque unde repellat eligendi nemo
-              consectetur! Error porro non in! Inventore, numquam, quod quam
-              tempore officiis placeat optio non ullam tenetur voluptates
-              laborum ipsam dolores a eos vitae nemo saepe architecto culpa,
-              soluta velit! Id, magni. Laborum consequuntur magni architecto
-              velit, accusantium delectus alias, amet libero, voluptatibus iure
-              fugit magnam corporis id quas ut suscipit necessitatibus ad nihil.
-              Molestias nesciunt, dolore facere autem ratione voluptatum vero.
-              Saepe, nihil asperiores necessitatibus delectus fugiat dolorem
-              cum, temporibus fuga dolores ipsum officiis odio repellendus
-              repudiandae similique incidunt quisquam. Beatae, illo! Iste
-              mollitia dolor fuga repellendus, perferendis accusamus modi
-              beatae! Ducimus repellat voluptate asperiores, accusantium omnis
-              voluptatem beatae laudantium provident? Et sequi vel molestiae
-              temporibus repellat nulla dolorem adipisci quod dignissimos
-              aliquid! Assumenda, minima laboriosam. Voluptates amet nobis odit
-              veritatis!
-            </p>
-          ),
+          children: <Markdown content={data?.metadata?.ai_insights} />,
         },
       ]}
     />

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

@@ -0,0 +1,37 @@
+import type { DocDetailProps } from "@/components/DocDetail";
+import { useEffect, useRef, type FC } from "react";
+import { renderAsync } from "docx-preview";
+
+interface DocxProps extends DocDetailProps {
+  url: string;
+}
+
+const Docx: FC<DocxProps> = (props) => {
+  const { url } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const renderDocx = async () => {
+    if (!containerRef.current) return;
+
+    const response = await fetch(url);
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    containerRef.current.innerHTML = "";
+
+    renderAsync(arrayBuffer, containerRef.current!, void 0, {
+      inWrapper: false,
+      ignoreWidth: true,
+      ignoreHeight: true,
+    });
+  };
+
+  useEffect(() => {
+    renderDocx();
+  }, [url]);
+
+  return <div ref={containerRef} className="[&>.docx]:p-0!" />;
+};
+
+export default Docx;

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

@@ -0,0 +1,30 @@
+import { XMarkdown, type XMarkdownProps } from "@ant-design/x-markdown";
+import { useEffect, useState, type FC } from "react";
+
+interface MarkdownProps extends XMarkdownProps {
+  url?: string;
+}
+
+const Markdown: FC<MarkdownProps> = (props) => {
+  const { url, ...rest } = props;
+
+  const [content, setContent] = useState(rest.content);
+
+  const fetchContent = async (url: string) => {
+    const response = await fetch(url);
+
+    const text = await response.text();
+
+    setContent(text);
+  };
+
+  useEffect(() => {
+    if (!url) return;
+
+    fetchContent(url);
+  }, [url]);
+
+  return <XMarkdown {...rest} content={content} />;
+};
+
+export default Markdown;

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

@@ -1,46 +1,35 @@
 import { Document, Page, pdfjs } from "react-pdf";
-import pdfFile from "./test.pdf";
-import { useState } from "react";
-import { cn } from "@/utils/cn";
+import { useState, type FC } from "react";
+import type { DocDetailProps } from "@/components/DocDetail";
+import { Pagination } from "antd";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 
-const Pdf = () => {
+interface PdfProps extends DocDetailProps {
+  url: string;
+}
+
+const Pdf: FC<PdfProps> = (props) => {
+  const { url } = props;
+
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="text-text-secondary">搜索匹配结果</div>
-
-      {numPages > 0 && (
-        <div className="flex gap-1">
-          {Array.from({ length: numPages }, (_, index) => {
-            const page = index + 1;
-
-            return (
-              <div
-                key={page}
-                className={cn(
-                  "inline-flex items-center h-6 px-3 rounded-lg cursor-pointer bg-bg-layout text-text-secondary",
-                  {
-                    "text-primary bg-primary-bg": pageNumber === page,
-                  }
-                )}
-                onClick={() => {
-                  setPageNumber(page);
-                }}
-              >
-                第{page}页
-              </div>
-            );
-          })}
-        </div>
-      )}
+      <div className="flex justify-end">
+        <Pagination
+          size="small"
+          pageSize={1}
+          total={numPages}
+          current={pageNumber}
+          onChange={(page) => setPageNumber(page)}
+        />
+      </div>
 
       <div className="border border-solid border-border rounded-lg overflow-hidden">
         <Document
-          file={pdfFile}
+          file={url}
           onLoadSuccess={(pdf) => {
             setNumPages(pdf.numPages);
           }}

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

@@ -0,0 +1,37 @@
+import { useEffect, useRef, type FC } from "react";
+import { init } from "pptx-preview";
+
+import type { DocDetailProps } from "@/components/DocDetail";
+
+interface PptxProps extends DocDetailProps {
+  url: string;
+}
+
+const Pptx: FC<PptxProps> = (props) => {
+  const { url } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const renderPdf = async () => {
+    if (!containerRef.current) return;
+
+    const pptx = init(containerRef.current, {
+      width: 960,
+      height: 540,
+    });
+
+    const response = await fetch(url);
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    pptx.preview(arrayBuffer);
+  };
+
+  useEffect(() => {
+    renderPdf();
+  }, [url]);
+
+  return <div ref={containerRef} />;
+};
+
+export default Pptx;

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

@@ -1,16 +1,49 @@
-import type { FC } from "react";
-import type { DocDetailProps } from "../..";
+import { type FC } from "react";
+import type {
+  DocDetailProps,
+  MetadataContentType,
+} from "@/components/DocDetail";
 import { Collapse } from "antd";
 import Pdf from "./components/Pdf";
+import Markdown from "./components/Markdown";
+import Docx from "./components/Docx";
+import Pptx from "./components/Pptx";
 
 const Preview: FC<DocDetailProps> = (props) => {
   const { data, i18n } = props;
 
+  const renderFile = (type: MetadataContentType, url: string) => {
+    if (type === "markdown") {
+      return <Markdown url={url} />;
+    }
+
+    if (type === "pdf") {
+      return <Pdf url={url} {...props} />;
+    }
+
+    if (type === "docx") {
+      return <Docx url={url} {...props} />;
+    }
+
+    if (type === "pptx") {
+      return <Pptx url={url} {...props} />;
+    }
+
+    return null;
+  };
+
   const renderContent = () => {
-    const { type } = data;
+    const { url } = data;
+    const type = data?.metadata?.content_type;
+
+    if (!type || !url) return;
 
     if (type === "image") {
-      return <img src={data.url} className="w-full" />;
+      return <img src={url} className="w-full" />;
+    }
+
+    if (type === "video") {
+      return <video src={url} className="w-full" controls />;
     }
 
     return (
@@ -19,12 +52,13 @@ const Preview: FC<DocDetailProps> = (props) => {
         defaultActiveKey={["preview"]}
         classNames={{
           root: "bg-transparent",
+          body: "p-4!",
         }}
         items={[
           {
             key: "preview",
             label: i18n?.labels?.preview ?? "Preview",
-            children: <Pdf />,
+            children: renderFile(type, url),
           },
         ]}
       />