@infinilabs/doc-detail 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/doc-detail.cjs +2 -2
  2. package/dist/doc-detail.js +39 -31
  3. package/dist/index.d.ts +37 -55
  4. package/package.json +1 -1
  5. package/src/App.tsx +6 -69
  6. package/src/components/DocDetail/components/Preview/index.tsx +1 -1
  7. package/src/components/DocDetail/index.tsx +62 -72
package/dist/doc-detail.js CHANGED
@@ -1,4 +1,4 @@
1
- (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)}})();
1
+ (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)}})();
2
2
  var xL = (n) => {
3
3
  throw TypeError(n);
4
4
  };
@@ -83096,9 +83096,9 @@ const G2t = (n) => {
83096
83096
  }, H2t = (n) => {
83097
83097
  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;
83098
83098
  return (() => {
83099
- const a = t?.metadata?.content_type, o = t?.metadata?.preview_url;
83100
- if (!(!a || !o))
83101
- 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(
83099
+ const { url: a } = t, o = t?.metadata?.content_type;
83100
+ if (!(!o || !a))
83101
+ 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(
83102
83102
  z3,
83103
83103
  {
83104
83104
  size: "small",
@@ -83111,7 +83111,7 @@ const G2t = (n) => {
83111
83111
  {
83112
83112
  key: "preview",
83113
83113
  label: e?.labels?.preview ?? "Preview",
83114
- children: r(a, o)
83114
+ children: r(o, a)
83115
83115
  }
83116
83116
  ]
83117
83117
  }
@@ -85926,33 +85926,40 @@ const G2t = (n) => {
85926
85926
  }
85927
85927
  );
85928
85928
  }, { Text: V3 } = lJ, GPt = (n) => {
85929
- const { data: t, i18n: e, extraButtons: r, className: i, ...a } = n, [o, s] = Ic(!1), l = [
85930
- {
85931
- label: e?.labels?.updatedAt ?? "Updated At",
85932
- value: t?.last_updated_by?.timestamp
85933
- },
85929
+ const {
85930
+ data: t,
85931
+ i18n: e,
85932
+ extraButtons: r,
85933
+ className: i,
85934
+ openSourceButtonProps: a,
85935
+ ...o
85936
+ } = n, [s, l] = Ic(!1), u = [
85934
85937
  {
85935
85938
  label: e?.labels?.type ?? "Type",
85936
85939
  value: t?.type
85937
85940
  },
85938
- {
85939
- label: e?.labels?.createdBy ?? "Created By",
85940
- value: t?.owner?.username
85941
- },
85942
85941
  {
85943
85942
  label: e?.labels?.size ?? "Size",
85944
85943
  value: t?.size
85945
85944
  },
85946
85945
  {
85947
- label: e?.labels?.updatedBy ?? "Updated By",
85948
- value: t?.last_updated_by?.user.username
85946
+ label: e?.labels?.createdBy ?? "Created At",
85947
+ value: t?.created
85948
+ },
85949
+ {
85950
+ label: e?.labels?.createdBy ?? "Created By",
85951
+ value: t?.owner?.title
85952
+ },
85953
+ {
85954
+ label: e?.labels?.updatedAt ?? "Updated At",
85955
+ value: t?.updated
85949
85956
  }
85950
85957
  ];
85951
85958
  return /* @__PURE__ */ co(
85952
85959
  "div",
85953
85960
  {
85954
85961
  className: LPt("flex flex-col h-full overflow-hidden", i),
85955
- ...a,
85962
+ ...o,
85956
85963
  children: [
85957
85964
  /* @__PURE__ */ co("div", { children: [
85958
85965
  /* @__PURE__ */ ae("img", { src: t?.icon, className: "size-6 mr-3 float-left" }),
@@ -85965,19 +85972,19 @@ const G2t = (n) => {
85965
85972
  type: "secondary",
85966
85973
  className: "inline-flex items-center gap-0.5 text-3",
85967
85974
  children: [
85968
- /* @__PURE__ */ ae("span", { children: t?.source?.name }),
85975
+ /* @__PURE__ */ ae("div", { children: t?.source?.name ?? "-" }),
85969
85976
  /* @__PURE__ */ ae(uJ, { className: "size-3" }),
85970
- /* @__PURE__ */ ae("span", { children: t?.category }),
85977
+ /* @__PURE__ */ ae("div", { children: t?.category ?? "-" }),
85971
85978
  /* @__PURE__ */ ae(cJ, { className: "size-3 rotate-90" }),
85972
- /* @__PURE__ */ ae("span", { children: t?.owner?.username }),
85979
+ /* @__PURE__ */ ae("div", { children: t?.owner?.title ?? "-" }),
85973
85980
  /* @__PURE__ */ ae(hJ, { className: "size-3" }),
85974
- /* @__PURE__ */ ae("span", { children: t?.last_updated_by?.timestamp }),
85981
+ /* @__PURE__ */ ae("div", { children: t?.updated ?? "-" }),
85975
85982
  /* @__PURE__ */ ae(
85976
85983
  fJ,
85977
85984
  {
85978
- className: "pl-2 size-3 hover:text-primary transition cursor-pointer",
85985
+ className: "pl-2 min-w-3 size-3 hover:text-primary transition cursor-pointer",
85979
85986
  onClick: () => {
85980
- s((u) => !u);
85987
+ l((c) => !c);
85981
85988
  }
85982
85989
  }
85983
85990
  )
@@ -85993,6 +86000,7 @@ const G2t = (n) => {
85993
86000
  onClick: () => {
85994
86001
  window.open(t.url);
85995
86002
  },
86003
+ ...a,
85996
86004
  children: e?.buttons?.openSource ?? "Open Source"
85997
86005
  }
85998
86006
  )
@@ -86004,22 +86012,22 @@ const G2t = (n) => {
86004
86012
  className: "bg-black/3 dark:bg-white/4 rounded-lg overflow-hidden",
86005
86013
  initial: !1,
86006
86014
  animate: {
86007
- height: o ? "auto" : 0,
86008
- opacity: o ? 1 : 0,
86009
- marginBottom: o ? "1rem" : 0
86015
+ height: s ? "auto" : 0,
86016
+ opacity: s ? 1 : 0,
86017
+ marginBottom: s ? "1rem" : 0
86010
86018
  },
86011
- children: /* @__PURE__ */ ae("div", { className: "flex flex-wrap gap-row-2 p-4", children: l.map((u) => {
86012
- const { label: c, value: h } = u;
86019
+ children: /* @__PURE__ */ ae("div", { className: "flex flex-wrap gap-row-2 p-4", children: u.map((c) => {
86020
+ const { label: h, value: f } = c;
86013
86021
  return /* @__PURE__ */ co(
86014
86022
  "div",
86015
86023
  {
86016
86024
  className: "w-1/2 inline-flex items-center <sm:w-full",
86017
86025
  children: [
86018
- /* @__PURE__ */ ae(V3, { type: "secondary", className: "w-24", children: c }),
86019
- /* @__PURE__ */ ae("span", { className: "text-3.5", children: h ?? "-" })
86026
+ /* @__PURE__ */ ae(V3, { type: "secondary", className: "w-24", children: h }),
86027
+ /* @__PURE__ */ ae("span", { className: "text-3.5", children: f ?? "-" })
86020
86028
  ]
86021
86029
  },
86022
- c
86030
+ h
86023
86031
  );
86024
86032
  }) })
86025
86033
  }
package/dist/index.d.ts CHANGED
@@ -11,64 +11,45 @@ export declare const DocDetail: FC<DocDetailProps>;
11
11
 
12
12
  declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
13
13
  data: {
14
- source: {
15
- type: string;
16
- name: string;
17
- id: string;
14
+ id?: string;
15
+ created?: ReactNode;
16
+ updated?: ReactNode;
17
+ _system?: {
18
+ owner_id?: string;
19
+ parent_path?: string;
20
+ tenant_id?: string;
18
21
  };
19
- category: string;
20
- categories: string[];
21
- cover: string;
22
- title: string;
23
- summary: string;
24
- type: string;
25
- lang: string;
26
- content: string;
27
- icon: string;
28
- thumbnail: string;
29
- tags: string[];
30
- url: string;
31
- size: number;
32
- owner: {
33
- avatar: string;
34
- username: string;
35
- userid: string;
22
+ metadata?: {
23
+ ai_insights?: string;
24
+ colors?: string[];
25
+ content_type?: MetadataContentType;
26
+ height?: number;
27
+ mime_type?: string;
28
+ users?: null | unknown;
29
+ width?: number;
36
30
  };
37
- metadata: {
38
- version: string;
39
- department: string;
40
- last_reviewed: string;
41
- file_extension: string;
42
- icon_link: string;
43
- has_thumbnail: boolean;
44
- kind: string;
45
- parents: string[];
46
- properties: Record<string, string>;
47
- spaces: string[];
48
- starred: boolean;
49
- driveId: string;
50
- thumbnail_link: string;
51
- video_media_metadata?: {
52
- durationMillis: string;
53
- width: number;
54
- height: number;
55
- };
56
- image_media_metadata?: {
57
- width: number;
58
- height: number;
59
- };
60
- content_type: MetadataContentType;
61
- mime_type: string;
62
- preview_url: string;
63
- ai_insights: string;
31
+ source?: {
32
+ type?: string;
33
+ name?: string;
34
+ id?: string;
64
35
  };
65
- last_updated_by: {
66
- user: {
67
- avatar: string;
68
- username: string;
69
- userid: string;
70
- };
71
- timestamp: string;
36
+ type?: string;
37
+ category?: string;
38
+ title?: string;
39
+ summary?: string;
40
+ icon?: string;
41
+ thumbnail?: string;
42
+ cover?: string;
43
+ tags?: string[];
44
+ url?: string;
45
+ size?: ReactNode;
46
+ owner: {
47
+ type?: string;
48
+ id?: string;
49
+ icon?: string;
50
+ title?: string;
51
+ subtitle?: string;
52
+ cover?: string;
72
53
  };
73
54
  };
74
55
  i18n?: {
@@ -86,6 +67,7 @@ declare interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
86
67
  };
87
68
  };
88
69
  extraButtons?: ReactNode[];
70
+ openSourceButtonProps?: ActionButtonProps;
89
71
  }
90
72
 
91
73
  declare type MetadataContentType = "image" | "video" | "markdown" | "pdf" | "docx" | "pptx" | "xlsx";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@infinilabs/doc-detail",
3
3
  "private": false,
4
- "version": "0.0.1",
4
+ "version": "0.0.3",
5
5
  "type": "module",
6
6
  "main": "dist/doc-detail.cjs",
7
7
  "module": "dist/doc-detail.js",
package/src/App.tsx CHANGED
@@ -6,87 +6,24 @@ const App = () => {
6
6
  <div className="h-screen">
7
7
  <DocDetail
8
8
  data={{
9
+ type: "file",
9
10
  source: {
10
- type: "connector",
11
11
  name: "My Hugo Site",
12
- id: "e806831dacc3",
13
12
  },
14
13
  category: "report",
15
- categories: ["business", "quarterly_reports"],
16
- cover: "https://picsum.photos/seed/report-cover/640/360",
17
14
  title: "Q3 Business Report",
18
- summary: "An overview of the company financial performance for Q3.",
19
- type: "PDF",
20
- lang: "en",
21
- content:
22
- "This quarters revenue increased by 15%, driven by strong sales in the APAC region...",
23
15
  icon: "https://picsum.photos/seed/file-icon/40/40",
24
- thumbnail: "https://picsum.photos/seed/report-thumb/320/180",
25
- tags: ["finance", "quarterly", "business", "report"],
26
- url: "https://drive.google.com/file/d/abc123/view",
27
16
  size: 1048576,
28
- owner: {
29
- avatar: "https://picsum.photos/seed/user-avatar/64/64",
30
- username: "jdoe",
31
- userid: "user123",
32
- },
17
+ url: "http://192.168.3.181:9101/coco-server/test.pdf",
33
18
  metadata: {
34
- version: "1.2",
35
- department: "Finance",
36
- last_reviewed: "2024-10-20",
37
- file_extension: "pdf",
38
- icon_link: "https://picsum.photos/seed/filetype-icon/40/40",
39
- has_thumbnail: true,
40
- kind: "drive#file",
41
- parents: ["folder123"],
42
- properties: { shared: "true" },
43
- spaces: ["drive"],
44
- starred: false,
45
- driveId: "drive123",
46
- thumbnail_link: "https://picsum.photos/seed/file-thumb/320/180",
47
- video_media_metadata: {
48
- durationMillis: "60000",
49
- width: 1920,
50
- height: 1080,
51
- },
52
- image_media_metadata: { width: 1024, height: 768 },
53
- mime_type: "",
54
-
55
- // content_type: "markdown",
56
- // preview_url: "http://192.168.3.181:9101/coco-server/README.md",
57
-
58
19
  content_type: "pdf",
59
- preview_url: "http://192.168.3.181:9101/coco-server/test.pdf",
60
-
61
- // content_type: "docx",
62
- // preview_url:
63
- // "http://192.168.3.181:9101/coco-server/OPHTHA_Listofacceptablefiletypes.docx",
64
-
65
- // content_type: "pptx",
66
- // preview_url:
67
- // "http://192.168.3.181:9101/coco-server/Processes-file-tables.pptx",
68
-
69
- // content_type: "xlsx",
70
- // preview_url:
71
- // "http://192.168.3.181:9101/coco-server/SaezZucman2020JEPData.xlsx",
72
-
73
- // content_type: "image",
74
- // preview_url: "http://192.168.3.181:9101/coco-server/a.jpg",
75
-
76
- // content_type: "video",
77
- // preview_url:
78
- // "http://192.168.3.181:9101/coco-server/Screen Recording 2026-01-05 at 12.06.10 PM.mov",
79
-
80
20
  ai_insights: `# AI Interpretation\n### Welcome to XMarkdown！\n- Project 1 \n- Project 2\n- Project 3`,
81
21
  },
82
- last_updated_by: {
83
- user: {
84
- avatar: "https://picsum.photos/seed/editor-avatar/64/64",
85
- username: "editor123",
86
- userid: "editor123@example.com",
87
- },
88
- timestamp: "2024-11-01T15:30:00Z",
22
+ owner: {
23
+ title: "Alice Johnson",
89
24
  },
25
+ created: "2026-01-09T02:30:10.188Z",
26
+ updated: "2026-01-09T02:30:10.188Z",
90
27
  }}
91
28
  extraButtons={[
92
29
  <ActionButton key="bot" icon={<Bot />}>
package/src/components/DocDetail/components/Preview/index.tsx CHANGED
@@ -33,8 +33,8 @@ const Preview: FC<DocDetailProps> = (props) => {
33
33
  };
34
34
 
35
35
  const renderContent = () => {
36
+ const { url } = data;
36
37
  const type = data?.metadata?.content_type;
37
- const url = data?.metadata?.preview_url;
38
38
 
39
39
  if (!type || !url) return;
40
40
 
package/src/components/DocDetail/index.tsx CHANGED
@@ -12,7 +12,7 @@ import { useState, type FC, type HTMLAttributes, type ReactNode } from "react";
12
12
  import Preview from "./components/Preview";
13
13
  import AIInterpretation from "./components/AIInterpretation";
14
14
  import { cn } from "@/utils/cn";
15
- import ActionButton from "../ActionButton";
15
+ import ActionButton, { type ActionButtonProps } from "../ActionButton";
16
16
 
17
17
  const { Text } = Typography;
18
18
 
@@ -27,64 +27,45 @@ export type MetadataContentType =
27
27
 
28
28
  export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
29
29
  data: {
30
- source: {
31
- type: string;
32
- name: string;
33
- id: string;
30
+ id?: string;
31
+ created?: ReactNode;
32
+ updated?: ReactNode;
33
+ _system?: {
34
+ owner_id?: string;
35
+ parent_path?: string;
36
+ tenant_id?: string;
34
37
  };
35
- category: string;
36
- categories: string[];
37
- cover: string;
38
- title: string;
39
- summary: string;
40
- type: string;
41
- lang: string;
42
- content: string;
43
- icon: string;
44
- thumbnail: string;
45
- tags: string[];
46
- url: string;
47
- size: number;
48
- owner: {
49
- avatar: string;
50
- username: string;
51
- userid: string;
38
+ metadata?: {
39
+ ai_insights?: string;
40
+ colors?: string[];
41
+ content_type?: MetadataContentType;
42
+ height?: number;
43
+ mime_type?: string;
44
+ users?: null | unknown;
45
+ width?: number;
52
46
  };
53
- metadata: {
54
- version: string;
55
- department: string;
56
- last_reviewed: string;
57
- file_extension: string;
58
- icon_link: string;
59
- has_thumbnail: boolean;
60
- kind: string;
61
- parents: string[];
62
- properties: Record<string, string>;
63
- spaces: string[];
64
- starred: boolean;
65
- driveId: string;
66
- thumbnail_link: string;
67
- video_media_metadata?: {
68
- durationMillis: string;
69
- width: number;
70
- height: number;
71
- };
72
- image_media_metadata?: {
73
- width: number;
74
- height: number;
75
- };
76
- content_type: MetadataContentType;
77
- mime_type: string;
78
- preview_url: string;
79
- ai_insights: string;
47
+ source?: {
48
+ type?: string;
49
+ name?: string;
50
+ id?: string;
80
51
  };
81
- last_updated_by: {
82
- user: {
83
- avatar: string;
84
- username: string;
85
- userid: string;
86
- };
87
- timestamp: string;
52
+ type?: string;
53
+ category?: string;
54
+ title?: string;
55
+ summary?: string;
56
+ icon?: string;
57
+ thumbnail?: string;
58
+ cover?: string;
59
+ tags?: string[];
60
+ url?: string;
61
+ size?: ReactNode;
62
+ owner: {
63
+ type?: string;
64
+ id?: string;
65
+ icon?: string;
66
+ title?: string;
67
+ subtitle?: string;
68
+ cover?: string;
88
69
  };
89
70
  };
90
71
  i18n?: {
@@ -102,33 +83,41 @@ export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
102
83
  };
103
84
  };
104
85
  extraButtons?: ReactNode[];
86
+ openSourceButtonProps?: ActionButtonProps;
105
87
  }
106
88
 
107
89
  const DocDetail: FC<DocDetailProps> = (props) => {
108
- const { data, i18n, extraButtons, className, ...rest } = props;
90
+ const {
91
+ data,
92
+ i18n,
93
+ extraButtons,
94
+ className,
95
+ openSourceButtonProps,
96
+ ...rest
97
+ } = props;
109
98
 
110
99
  const [visibleMore, setVisibleMore] = useState(false);
111
100
 
112
101
  const moreInfo = [
113
- {
114
- label: i18n?.labels?.updatedAt ?? "Updated At",
115
- value: data?.last_updated_by?.timestamp,
116
- },
117
102
  {
118
103
  label: i18n?.labels?.type ?? "Type",
119
104
  value: data?.type,
120
105
  },
121
- {
122
- label: i18n?.labels?.createdBy ?? "Created By",
123
- value: data?.owner?.username,
124
- },
125
106
  {
126
107
  label: i18n?.labels?.size ?? "Size",
127
108
  value: data?.size,
128
109
  },
129
110
  {
130
- label: i18n?.labels?.updatedBy ?? "Updated By",
131
- value: data?.last_updated_by?.user.username,
111
+ label: i18n?.labels?.createdBy ?? "Created At",
112
+ value: data?.created,
113
+ },
114
+ {
115
+ label: i18n?.labels?.createdBy ?? "Created By",
116
+ value: data?.owner?.title,
117
+ },
118
+ {
119
+ label: i18n?.labels?.updatedAt ?? "Updated At",
120
+ value: data?.updated,
132
121
  },
133
122
  ];
134
123
 
@@ -148,16 +137,16 @@ const DocDetail: FC<DocDetailProps> = (props) => {
148
137
  type="secondary"
149
138
  className="inline-flex items-center gap-0.5 text-3"
150
139
  >
151
- <span>{data?.source?.name}</span>
140
+ <div>{data?.source?.name ?? "-"}</div>
152
141
  <ChevronRight className="size-3" />
153
- <span>{data?.category}</span>
142
+ <div>{data?.category ?? "-"}</div>
154
143
  <Minus className="size-3 rotate-90" />
155
- <span>{data?.owner?.username}</span>
144
+ <div>{data?.owner?.title ?? "-"}</div>
156
145
  <Dot className="size-3" />
157
- <span>{data?.last_updated_by?.timestamp}</span>
146
+ <div>{data?.updated ?? "-"}</div>
158
147
 
159
148
  <Ellipsis
160
- className="pl-2 size-3 hover:text-primary transition cursor-pointer"
149
+ className="pl-2 min-w-3 size-3 hover:text-primary transition cursor-pointer"
161
150
  onClick={() => {
162
151
  setVisibleMore((prev) => !prev);
163
152
  }}
@@ -172,6 +161,7 @@ const DocDetail: FC<DocDetailProps> = (props) => {
172
161
  onClick={() => {
173
162
  window.open(data.url);
174
163
  }}
164
+ {...openSourceButtonProps}
175
165
  >
176
166
  {i18n?.buttons?.openSource ?? "Open Source"}
177
167
  </ActionButton>