@infinilabs/doc-detail 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -53,9 +53,6 @@ declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
         };
     };
     i18n?: {
-        buttons?: {
-            openSource?: string;
-        };
         labels?: {
             type?: string;
             size?: string;
@@ -66,8 +63,7 @@ declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
             aiInterpretation?: string;
         };
     };
-    extraButtons?: ReactNode[];
-    openSourceButtonProps?: ActionButtonProps;
+    actionButtons?: ReactNode[];
 }
 
 declare type MetadataContentType = "image" | "video" | "markdown" | "pdf" | "docx" | "pptx" | "xlsx";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinilabs/doc-detail",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/doc-detail.cjs",
   "module": "dist/doc-detail.js",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { Bot } from "lucide-react";
+import { Bot, SquareArrowOutUpRight } from "lucide-react";
 import { ActionButton, DocDetail } from "./components";
 
 const App = () => {
@@ -43,6 +43,17 @@ Approximately ten individuals, mostly men with one woman visible, are depicted w
 ## Relationships and Synthesis
 The document intertwines physical setting, human activity, and symbolic communication to portray a snapshot of corporate culture. The environment supports the event's purpose, the participants' uniformity reflects organizational cohesion, and the banner bridges corporate messaging with cultural tradition. Together, these elements construct a narrative of a modern, globally-aware company marking a moment of collective planning and aspirational growth.
 
+
+\`\`\`ts
+const analysisSummary = {
+  eventContext: "INFINI.com All Hands Meeting in 2023, Year of the Rabbit",
+  environment: "Modern conference room with professional yet relaxed atmosphere",
+  culturalElements: "Bilingual banner with metaphor for rapid advancement",
+  visualDetails: "Cohesive color palette, organized composition, branded attire",
+  humanElement: "Team identity through uniform clothing and active engagement",
+};
+\`\`\`
+
 \`\`\`mermaid
 mindmap
   root("Document Analysis: 106862408.jpg")
@@ -79,9 +90,11 @@ mindmap
           created: "2026-01-09T02:30:10.188Z",
           updated: "2026-01-09T02:30:10.188Z",
         }}
-        extraButtons={[
-          <ActionButton key="bot" icon={<Bot />}>
-            Continue Chat
+        actionButtons={[
+          <ActionButton icon={<Bot />}>Continue Chat</ActionButton>,
+
+          <ActionButton icon={<SquareArrowOutUpRight />}>
+            Open Source
           </ActionButton>,
         ]}
       />

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

@@ -4,8 +4,9 @@ import {
   type XMarkdownProps,
 } from "@ant-design/x-markdown";
 import { useEffect, useState, type FC } from "react";
-import { Mermaid } from "@ant-design/x";
+import { Mermaid, CodeHighlighter } from "@ant-design/x";
 import { Typography } from "antd";
+import clsx from "clsx";
 
 const { Text } = Typography;
 
@@ -19,6 +20,10 @@ const Code: FC<ComponentProps> = (props) => {
     return <Mermaid>{children}</Mermaid>;
   }
 
+  if (lang) {
+    return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;
+  }
+
   return <Text code>{children}</Text>;
 };
 
@@ -27,7 +32,7 @@ interface MarkdownProps extends XMarkdownProps {
 }
 
 const Markdown: FC<MarkdownProps> = (props) => {
-  const { url, ...rest } = props;
+  const { url, className, ...rest } = props;
 
   const [content, setContent] = useState(rest.content);
 
@@ -45,7 +50,14 @@ const Markdown: FC<MarkdownProps> = (props) => {
     fetchContent(url);
   }, [url]);
 
-  return <XMarkdown {...rest} content={content} components={{ code: Code }} />;
+  return (
+    <XMarkdown
+      {...rest}
+      className={clsx("[&_h1,h2,h3,h4,h5,h6,ul,ol,p]:[all:revert]", className)}
+      content={content}
+      components={{ code: Code }}
+    />
+  );
 };
 
 export default Markdown;

package/src/components/DocDetail/index.tsx

@@ -1,18 +1,17 @@
 import { Typography } from "antd";
-import {
-  ChevronRight,
-  Dot,
-  Ellipsis,
-  Minus,
-  SquareArrowOutUpRight,
-} from "lucide-react";
+import { ChevronRight, Dot, Ellipsis, Minus } from "lucide-react";
 import { motion } from "motion/react";
 
-import { useState, type FC, type HTMLAttributes, type ReactNode } from "react";
+import {
+  Fragment,
+  useState,
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import Preview from "./components/Preview";
 import AIInterpretation from "./components/AIInterpretation";
 import { cn } from "@/utils/cn";
-import ActionButton, { type ActionButtonProps } from "../ActionButton";
 
 const { Text } = Typography;
 
@@ -69,9 +68,6 @@ export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
     };
   };
   i18n?: {
-    buttons?: {
-      openSource?: string;
-    };
     labels?: {
       type?: string;
       size?: string;
@@ -82,19 +78,11 @@ export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
       aiInterpretation?: string;
     };
   };
-  extraButtons?: ReactNode[];
-  openSourceButtonProps?: ActionButtonProps;
+  actionButtons?: ReactNode[];
 }
 
 const DocDetail: FC<DocDetailProps> = (props) => {
-  const {
-    data,
-    i18n,
-    extraButtons,
-    className,
-    openSourceButtonProps,
-    ...rest
-  } = props;
+  const { data, i18n, actionButtons, className, ...rest } = props;
 
   const [visibleMore, setVisibleMore] = useState(false);
 
@@ -154,17 +142,9 @@ const DocDetail: FC<DocDetailProps> = (props) => {
         </Text>
 
         <div className="inline-flex gap-2">
-          {extraButtons}
-
-          <ActionButton
-            icon={<SquareArrowOutUpRight />}
-            onClick={() => {
-              window.open(data.url);
-            }}
-            {...openSourceButtonProps}
-          >
-            {i18n?.buttons?.openSource ?? "Open Source"}
-          </ActionButton>
+          {actionButtons?.map((button, index) => (
+            <Fragment key={index}>{button}</Fragment>
+          ))}
         </div>
       </div>