@infinilabs/doc-detail 0.0.1 → 0.0.2

package/dist/doc-detail.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:root{--color-primary: #1677ff;--color-border: #d9d9d9;--color-primary-bg: #e6f4ff;--color-text-secondary: rgba(0,0,0,.65);--color-bg-layout: #f5f5f5}.dark{--color-primary: #1668dc;--color-border: #424242;--color-primary-bg: #15325b;--color-text-secondary: rgba(255,255,255,.65);--color-bg-layout: #000000}.float-left{float:left}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mr-3{margin-right:.75rem}.children\\:size-4>*{width:1rem;height:1rem}.size-3{width:.75rem;height:.75rem}.size-6{width:1.5rem;height:1.5rem}.children\\:h-unset\\!>*{height:unset!important}.children\\:w-full\\!>*{width:100%!important}.h-full{height:100%}.w-1\\/2{width:50%}.w-24{width:6rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\\.5{gap:.125rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-row-2{row-gap:.5rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-border{border-color:var(--color-border)}.rounded-lg{border-radius:.5rem}.border-solid{border-style:solid}.bg-black\\/3{background-color:#00000008}.bg-transparent{background-color:transparent}.dark .dark\\:bg-white\\/4{background-color:#ffffff0a}.\\[\\&\\>\\.docx\\]\\:p-0\\!>.docx{padding:0!important}.p-4{padding:1rem}.p-4\\!{padding:1rem!important}.pl-2{padding-left:.5rem}.text-3{font-size:.75rem}.text-3\\.5{font-size:.875rem}.text-4\\.5\\/6{font-size:1.125rem;line-height:1.5rem}.text-primary,.hover\\:text-primary:hover{color:var(--color-primary)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media(max-width:639.9px){.\\<sm\\:w-full{width:100%}}@keyframes x-markdown-fade-in{0%{opacity:0}to{opacity:1}}.x-markdown{--text-color: inherit;--font-size: inherit;--margin-block: 0 0 1em 0;--td-th-padding: .85em 1em;--pre-th-td-padding: 2px 0;--border-font-weight: 600;--padding-ul-ol: 0 0 0 1em;--margin-ul-ol: 0 0 1em 1.8em;--margin-li: .25em 0;--margin-pre: 1em 0;--padding-code-inline: .2em .4em;--margin-code-inline: 0 .2em;--code-inline-text: .85em;--small-border-radius: 2px;--image-margin: .5em 0;--hr-margin: 1.5em 0;--table-margin: 1em 0;font-size:var(--font-size);line-height:1.5714285714285714;width:100%;color:var(--text-color)}.x-markdown p,.x-markdown div,.x-markdown span,.x-markdown li{word-break:break-word;overflow-wrap:break-word}.x-markdown pre,.x-markdown code{word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap}.x-markdown th,.x-markdown td{padding:var(--td-th-padding)}.x-markdown th{font-weight:var(--border-font-weight)}.x-markdown pre table{box-shadow:none}.x-markdown pre td,.x-markdown pre th{padding:var(--pre-th-td-padding);border:none;text-align:left}.x-markdown p{margin:var(--margin-block)}.x-markdown p:first-child{margin-top:0}.x-markdown p:last-child{margin-bottom:0}.x-markdown ul,.x-markdown ol{margin:var(--margin-ul-ol);padding:var(--padding-ul-ol)}.x-markdown ul:first-child,.x-markdown ol:first-child{margin-top:0}.x-markdown ul:last-child,.x-markdown ol:last-child{margin-bottom:0}.x-markdown ol>li{list-style:decimal}.x-markdown ul>li{list-style:disc}.x-markdown li{margin:var(--margin-li)}.x-markdown li:first-child{margin-top:0}.x-markdown li:last-child{margin-bottom:0}.x-markdown pre{margin:var(--margin-pre);overflow-x:auto}.x-markdown pre:first-child{margin-top:0}.x-markdown pre:last-child{margin-bottom:0}.x-markdown code{padding:var(--padding-code-inline);margin:var(--margin-code-inline);font-size:var(--code-inline-text);border-radius:var(--small-border-radius)}.x-markdown pre code{padding:0;margin:0;font-size:inherit;border-radius:0;line-height:2}.x-markdown img{max-width:100%;height:auto;margin:var(--image-margin)}.x-markdown hr{margin:var(--hr-margin)}.x-markdown table:not(pre){margin:var(--table-margin);border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto}.x-markdown table:not(pre):first-child{margin-top:0}.x-markdown table:not(pre):last-child{margin-bottom:0}.x-markdown .inline-katex .katex-display{display:inline-block;margin:0;text-align:initial;vertical-align:middle}.x-markdown .inline-katex .katex-display>.katex{display:inline-block;text-align:initial;white-space:normal}.x-markdown .inline-katex .katex-display>.katex>.katex-html{display:inline-block;position:static}.x-markdown .inline-katex .katex-display>.katex>.katex-html>.tag{position:static}")),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:root{--color-primary: #1677ff;--color-border: #d9d9d9;--color-primary-bg: #e6f4ff;--color-text-secondary: rgba(0,0,0,.65);--color-bg-layout: #f5f5f5}.dark{--color-primary: #1668dc;--color-border: #424242;--color-primary-bg: #15325b;--color-text-secondary: rgba(255,255,255,.65);--color-bg-layout: #000000}.float-left{float:left}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mr-3{margin-right:.75rem}.children\\:size-4>*{width:1rem;height:1rem}.size-3{width:.75rem;height:.75rem}.size-6{width:1.5rem;height:1.5rem}.children\\:h-unset\\!>*{height:unset!important}.children\\:w-full\\!>*{width:100%!important}.h-full{height:100%}.min-w-3{min-width:.75rem}.w-1\\/2{width:50%}.w-24{width:6rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\\.5{gap:.125rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-row-2{row-gap:.5rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-border{border-color:var(--color-border)}.rounded-lg{border-radius:.5rem}.border-solid{border-style:solid}.bg-black\\/3{background-color:#00000008}.bg-transparent{background-color:transparent}.dark .dark\\:bg-white\\/4{background-color:#ffffff0a}.\\[\\&\\>\\.docx\\]\\:p-0\\!>.docx{padding:0!important}.p-4{padding:1rem}.p-4\\!{padding:1rem!important}.pl-2{padding-left:.5rem}.text-3{font-size:.75rem}.text-3\\.5{font-size:.875rem}.text-4\\.5\\/6{font-size:1.125rem;line-height:1.5rem}.text-primary,.hover\\:text-primary:hover{color:var(--color-primary)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media(max-width:639.9px){.\\<sm\\:w-full{width:100%}}@keyframes x-markdown-fade-in{0%{opacity:0}to{opacity:1}}.x-markdown{--text-color: inherit;--font-size: inherit;--margin-block: 0 0 1em 0;--td-th-padding: .85em 1em;--pre-th-td-padding: 2px 0;--border-font-weight: 600;--padding-ul-ol: 0 0 0 1em;--margin-ul-ol: 0 0 1em 1.8em;--margin-li: .25em 0;--margin-pre: 1em 0;--padding-code-inline: .2em .4em;--margin-code-inline: 0 .2em;--code-inline-text: .85em;--small-border-radius: 2px;--image-margin: .5em 0;--hr-margin: 1.5em 0;--table-margin: 1em 0;font-size:var(--font-size);line-height:1.5714285714285714;width:100%;color:var(--text-color)}.x-markdown p,.x-markdown div,.x-markdown span,.x-markdown li{word-break:break-word;overflow-wrap:break-word}.x-markdown pre,.x-markdown code{word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap}.x-markdown th,.x-markdown td{padding:var(--td-th-padding)}.x-markdown th{font-weight:var(--border-font-weight)}.x-markdown pre table{box-shadow:none}.x-markdown pre td,.x-markdown pre th{padding:var(--pre-th-td-padding);border:none;text-align:left}.x-markdown p{margin:var(--margin-block)}.x-markdown p:first-child{margin-top:0}.x-markdown p:last-child{margin-bottom:0}.x-markdown ul,.x-markdown ol{margin:var(--margin-ul-ol);padding:var(--padding-ul-ol)}.x-markdown ul:first-child,.x-markdown ol:first-child{margin-top:0}.x-markdown ul:last-child,.x-markdown ol:last-child{margin-bottom:0}.x-markdown ol>li{list-style:decimal}.x-markdown ul>li{list-style:disc}.x-markdown li{margin:var(--margin-li)}.x-markdown li:first-child{margin-top:0}.x-markdown li:last-child{margin-bottom:0}.x-markdown pre{margin:var(--margin-pre);overflow-x:auto}.x-markdown pre:first-child{margin-top:0}.x-markdown pre:last-child{margin-bottom:0}.x-markdown code{padding:var(--padding-code-inline);margin:var(--margin-code-inline);font-size:var(--code-inline-text);border-radius:var(--small-border-radius)}.x-markdown pre code{padding:0;margin:0;font-size:inherit;border-radius:0;line-height:2}.x-markdown img{max-width:100%;height:auto;margin:var(--image-margin)}.x-markdown hr{margin:var(--hr-margin)}.x-markdown table:not(pre){margin:var(--table-margin);border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto}.x-markdown table:not(pre):first-child{margin-top:0}.x-markdown table:not(pre):last-child{margin-bottom:0}.x-markdown .inline-katex .katex-display{display:inline-block;margin:0;text-align:initial;vertical-align:middle}.x-markdown .inline-katex .katex-display>.katex{display:inline-block;text-align:initial;white-space:normal}.x-markdown .inline-katex .katex-display>.katex>.katex-html{display:inline-block;position:static}.x-markdown .inline-katex .katex-display>.katex>.katex-html>.tag{position:static}")),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
 var xL = (n) => {
   throw TypeError(n);
 };
@@ -83096,9 +83096,9 @@ const G2t = (n) => {
 }, H2t = (n) => {
   const { data: t, i18n: e } = n, r = (a, o) => a === "markdown" ? /* @__PURE__ */ ae(W4, { url: o }) : a === "pdf" ? /* @__PURE__ */ ae(kot, { url: o, ...n }) : a === "docx" ? /* @__PURE__ */ ae(Eut, { url: o, ...n }) : a === "pptx" ? /* @__PURE__ */ ae(G2t, { url: o, ...n }) : null;
   return (() => {
-    const a = t?.metadata?.content_type, o = t?.metadata?.preview_url;
-    if (!(!a || !o))
-      return a === "image" ? /* @__PURE__ */ ae("img", { src: o, className: "w-full" }) : a === "video" ? /* @__PURE__ */ ae("video", { src: o, className: "w-full", controls: !0 }) : /* @__PURE__ */ ae(
+    const { url: a } = t, o = t?.metadata?.content_type;
+    if (!(!o || !a))
+      return o === "image" ? /* @__PURE__ */ ae("img", { src: a, className: "w-full" }) : o === "video" ? /* @__PURE__ */ ae("video", { src: a, className: "w-full", controls: !0 }) : /* @__PURE__ */ ae(
         z3,
         {
           size: "small",
@@ -83111,7 +83111,7 @@ const G2t = (n) => {
             {
               key: "preview",
               label: e?.labels?.preview ?? "Preview",
-              children: r(a, o)
+              children: r(o, a)
             }
           ]
         }
@@ -85927,25 +85927,25 @@ const G2t = (n) => {
   );
 }, { Text: V3 } = lJ, GPt = (n) => {
   const { data: t, i18n: e, extraButtons: r, className: i, ...a } = n, [o, s] = Ic(!1), l = [
-    {
-      label: e?.labels?.updatedAt ?? "Updated At",
-      value: t?.last_updated_by?.timestamp
-    },
     {
       label: e?.labels?.type ?? "Type",
       value: t?.type
     },
-    {
-      label: e?.labels?.createdBy ?? "Created By",
-      value: t?.owner?.username
-    },
     {
       label: e?.labels?.size ?? "Size",
       value: t?.size
     },
     {
-      label: e?.labels?.updatedBy ?? "Updated By",
-      value: t?.last_updated_by?.user.username
+      label: e?.labels?.createdBy ?? "Created At",
+      value: t?.created
+    },
+    {
+      label: e?.labels?.createdBy ?? "Created By",
+      value: t?.owner?.title
+    },
+    {
+      label: e?.labels?.updatedAt ?? "Updated At",
+      value: t?.updated
     }
   ];
   return /* @__PURE__ */ co(
@@ -85965,17 +85965,17 @@ const G2t = (n) => {
               type: "secondary",
               className: "inline-flex items-center gap-0.5 text-3",
               children: [
-                /* @__PURE__ */ ae("span", { children: t?.source?.name }),
+                /* @__PURE__ */ ae("div", { children: t?.source?.name ?? "-" }),
                 /* @__PURE__ */ ae(uJ, { className: "size-3" }),
-                /* @__PURE__ */ ae("span", { children: t?.category }),
+                /* @__PURE__ */ ae("div", { children: t?.category ?? "-" }),
                 /* @__PURE__ */ ae(cJ, { className: "size-3 rotate-90" }),
-                /* @__PURE__ */ ae("span", { children: t?.owner?.username }),
+                /* @__PURE__ */ ae("div", { children: t?.owner?.title ?? "-" }),
                 /* @__PURE__ */ ae(hJ, { className: "size-3" }),
-                /* @__PURE__ */ ae("span", { children: t?.last_updated_by?.timestamp }),
+                /* @__PURE__ */ ae("div", { children: t?.updated ?? "-" }),
                 /* @__PURE__ */ ae(
                   fJ,
                   {
-                    className: "pl-2 size-3 hover:text-primary transition cursor-pointer",
+                    className: "pl-2 min-w-3 size-3 hover:text-primary transition cursor-pointer",
                     onClick: () => {
                       s((u) => !u);
                     }

package/dist/index.d.ts

@@ -11,64 +11,45 @@ export declare const DocDetail: FC<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;
-            };
-            content_type: MetadataContentType;
-            mime_type: string;
-            preview_url: string;
-            ai_insights: string;
+        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?: {

package/package.json

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

package/src/App.tsx

@@ -6,87 +6,24 @@ const App = () => {
     <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 },
-            mime_type: "",
-
-            // content_type: "markdown",
-            // preview_url: "http://192.168.3.181:9101/coco-server/README.md",
-
             content_type: "pdf",
-            preview_url: "http://192.168.3.181:9101/coco-server/test.pdf",
-
-            // content_type: "docx",
-            // preview_url:
-            //   "http://192.168.3.181:9101/coco-server/OPHTHA_Listofacceptablefiletypes.docx",
-
-            // content_type: "pptx",
-            // preview_url:
-            //   "http://192.168.3.181:9101/coco-server/Processes-file-tables.pptx",
-
-            // content_type: "xlsx",
-            // preview_url:
-            //   "http://192.168.3.181:9101/coco-server/SaezZucman2020JEPData.xlsx",
-
-            // content_type: "image",
-            // preview_url: "http://192.168.3.181:9101/coco-server/a.jpg",
-
-            // content_type: "video",
-            // preview_url:
-            //   "http://192.168.3.181:9101/coco-server/Screen Recording 2026-01-05 at 12.06.10 PM.mov",
-
             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 />}>

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

@@ -33,8 +33,8 @@ const Preview: FC<DocDetailProps> = (props) => {
   };
 
   const renderContent = () => {
+    const { url } = data;
     const type = data?.metadata?.content_type;
-    const url = data?.metadata?.preview_url;
 
     if (!type || !url) return;
 

package/src/components/DocDetail/index.tsx

@@ -27,64 +27,45 @@ export type MetadataContentType =
 
 export 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;
-      };
-      content_type: MetadataContentType;
-      mime_type: string;
-      preview_url: string;
-      ai_insights: string;
+    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?: {
@@ -110,25 +91,25 @@ const DocDetail: FC<DocDetailProps> = (props) => {
   const [visibleMore, setVisibleMore] = useState(false);
 
   const moreInfo = [
-    {
-      label: i18n?.labels?.updatedAt ?? "Updated At",
-      value: data?.last_updated_by?.timestamp,
-    },
     {
       label: i18n?.labels?.type ?? "Type",
       value: data?.type,
     },
-    {
-      label: i18n?.labels?.createdBy ?? "Created By",
-      value: data?.owner?.username,
-    },
     {
       label: i18n?.labels?.size ?? "Size",
       value: data?.size,
     },
     {
-      label: i18n?.labels?.updatedBy ?? "Updated By",
-      value: data?.last_updated_by?.user.username,
+      label: i18n?.labels?.createdBy ?? "Created At",
+      value: data?.created,
+    },
+    {
+      label: i18n?.labels?.createdBy ?? "Created By",
+      value: data?.owner?.title,
+    },
+    {
+      label: i18n?.labels?.updatedAt ?? "Updated At",
+      value: data?.updated,
     },
   ];
 
@@ -148,16 +129,16 @@ const DocDetail: FC<DocDetailProps> = (props) => {
           type="secondary"
           className="inline-flex items-center gap-0.5 text-3"
         >
-          <span>{data?.source?.name}</span>
+          <div>{data?.source?.name ?? "-"}</div>
           <ChevronRight className="size-3" />
-          <span>{data?.category}</span>
+          <div>{data?.category ?? "-"}</div>
           <Minus className="size-3 rotate-90" />
-          <span>{data?.owner?.username}</span>
+          <div>{data?.owner?.title ?? "-"}</div>
           <Dot className="size-3" />
-          <span>{data?.last_updated_by?.timestamp}</span>
+          <div>{data?.updated ?? "-"}</div>
 
           <Ellipsis
-            className="pl-2 size-3 hover:text-primary transition cursor-pointer"
+            className="pl-2 min-w-3 size-3 hover:text-primary transition cursor-pointer"
             onClick={() => {
               setVisibleMore((prev) => !prev);
             }}