From e862ab0defcc1f8a076f5b396ec4adc0fc27c9f9 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 20 Feb 2025 14:54:02 +0800
Subject: [PATCH] feat: document and tech params

---
 web/app/(commonLayout)/datasets/Container.tsx |   5 +-
 .../metadata/metadata-document/index.tsx      | 116 ++++++++++++------
 .../metadata/metadata-document/info-group.tsx |  35 ++++--
 3 files changed, 102 insertions(+), 54 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 735c4c493c..5e162d383e 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -20,7 +20,6 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
 // import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
 import MetaDataDocument from '@/app/components/datasets/metadata/metadata-document'
 // Services
@@ -112,7 +111,7 @@ const Container = () => {
           onIsBuiltInEnabledChange={setIsBuiltInEnabled}
           onClose={() => { }}
         /> */}
-        <EditMetadataBatchModal
+        {/* <EditMetadataBatchModal
           documentNum={20}
           list={[
             {
@@ -130,7 +129,7 @@ const Container = () => {
           ]}
           onHide={() => { }}
           onChange={(list, newList, isApplyToAllSelectDocument) => { console.log(list, newList, isApplyToAllSelectDocument) }}
-        />
+        /> */}
       </div>
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
         <TabSliderNew
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 97bba83434..4f703b2914 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -7,6 +7,7 @@ import NoData from './no-data'
 import Button from '@/app/components/base/button'
 import { RiEditLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
 
 const MetadataDocument: FC = () => {
   const { t } = useTranslation()
@@ -27,55 +28,94 @@ const MetadataDocument: FC = () => {
     },
   ])
   const [tempList, setTempList] = useState<MetadataItemWithValue[]>(list)
+  const builtInEnabled = true
+  const builtList = [
+    {
+      id: '1',
+      name: 'OriginalfileNmae',
+      value: 'Steve Jobs The Man Who Thought Different.pdf',
+      type: DataType.string,
+    },
+    {
+      id: '2',
+      name: 'Title',
+      value: 'PDF',
+      type: DataType.string,
+    },
+  ]
   const hasData = list.length > 0
+
+  const documentInfoList = builtList
+  const technicalParams = builtList
   return (
-    <div>
+    <div className='space-y-4'>
       {hasData ? (
-        <InfoGroup
-          title='Metadata'
-          titleTooltip='Metadata serves as a critical filter that enhances the accuracy and relevance of information retrieval. You can modify and add metadata for this document here.'
-          list={isEdit ? tempList : list}
-          headerRight={isEdit ? (
-            <div className='flex space-x-1'>
+        <div>
+          <InfoGroup
+            title='Metadata'
+            uppercaseTitle={false}
+            titleTooltip='Metadata serves as a critical filter that enhances the accuracy and relevance of information retrieval. You can modify and add metadata for this document here.'
+            list={isEdit ? tempList : list}
+            headerRight={isEdit ? (
+              <div className='flex space-x-1'>
+                <Button variant='ghost' size='small' onClick={() => {
+                  setTempList(list)
+                  setIsEdit(false)
+                }}>
+                  <div>{t('common.operation.cancel')}</div>
+                </Button>
+                <Button variant='primary' size='small' onClick={() => {
+                  setIsEdit(false)
+                  setList(tempList)
+                }}>
+                  <div>{t('common.operation.save')}</div>
+                </Button>
+              </div>
+            ) : (
               <Button variant='ghost' size='small' onClick={() => {
                 setTempList(list)
-                setIsEdit(false)
+                setIsEdit(true)
               }}>
-                <div>{t('common.operation.cancel')}</div>
+                <RiEditLine className='mr-1 size-3.5 text-text-tertiary cursor-pointer' />
+                <div>{t('common.operation.edit')}</div>
               </Button>
-              <Button variant='primary' size='small' onClick={() => {
-                setIsEdit(false)
-                setList(tempList)
-              }}>
-                <div>{t('common.operation.save')}</div>
-              </Button>
-            </div>
-          ) : (
-            <Button variant='ghost' size='small' onClick={() => {
-              setTempList(list)
-              setIsEdit(true)
-            }}>
-              <RiEditLine className='mr-1 size-3.5 text-text-tertiary cursor-pointer' />
-              <div>{t('common.operation.edit')}</div>
-            </Button>
+            )}
+            isEdit={isEdit}
+            contentClassName='mt-5'
+            onChange={(item) => {
+              const newList = tempList.map(i => (i.name === item.name ? item : i))
+              setList(newList)
+            }}
+            onDelete={(item) => {
+              const newList = tempList.filter(i => i.name !== item.name)
+              setList(newList)
+            }}
+            onAdd={() => {
+            }}
+          />
+          {builtInEnabled && (
+            <>
+              <Divider className='my-3' bgStyle='gradient' />
+              <InfoGroup
+                noHeader
+                titleTooltip='Built-in metadata is system-generated metadata that is automatically added to the document. You can enable or disable built-in metadata here.'
+                list={builtList}
+              />
+            </>
           )}
-          isEdit={isEdit}
-          contentClassName='mt-5'
-          onChange={(item) => {
-            const newList = tempList.map(i => (i.name === item.name ? item : i))
-            setList(newList)
-          }}
-          onDelete={(item) => {
-            const newList = tempList.filter(i => i.name !== item.name)
-            setList(newList)
-          }}
-          onAdd={() => {
-          }}
-        />
-
+        </div>
       ) : (
         <NoData onStart={() => { }} />
       )}
+
+      <InfoGroup
+        title='Document Information'
+        list={builtList}
+      />
+      <InfoGroup
+        title='Technical Parameters'
+        list={builtList}
+      />
     </div>
   )
 }
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index ad3973b6df..c44ae7b0aa 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import type { MetadataItemWithValue } from '../types'
 import Field from './field'
 import InputCombined from '../edit-metadata-batch/input-combined'
-import { RiDeleteBinLine } from '@remixicon/react'
+import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
@@ -12,7 +12,9 @@ import SelectMetadataModal from '../select-metadata-modal'
 import AddMetadataButton from '../add-metadata-button'
 
 type Props = {
-  title: string
+  noHeader?: boolean
+  title?: string
+  uppercaseTitle?: boolean
   titleTooltip?: string
   headerRight?: React.ReactNode
   contentClassName?: string
@@ -24,7 +26,9 @@ type Props = {
 }
 
 const InfoGroup: FC<Props> = ({
+  noHeader,
   title,
+  uppercaseTitle = true,
   titleTooltip,
   headerRight,
   contentClassName,
@@ -36,18 +40,23 @@ const InfoGroup: FC<Props> = ({
 }) => {
   return (
     <div className='bg-white'>
-      <div className='flex items-center justify-between'>
-        <div className='flex items-center space-x-1'>
-          <div className='system-xs-medium text-text-secondary'>{title}</div>
-          {titleTooltip && (
-            <Tooltip popupContent={titleTooltip} />
-          )}
-        </div>
-        {headerRight}
-        {/* <div className='flex px-1.5 rounded-md hover:bg-components-button-tertiary-bg-hover items-center h-6 space-x-1 cursor-pointer' onClick={() => setIsEdit(true)}>
+      {!noHeader && (
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center space-x-1'>
+            <div className={cn('text-text-secondary', uppercaseTitle ? 'system-xs-semibold-uppercase' : 'system-md-semibold')}>{title}</div>
+            {titleTooltip && (
+              <Tooltip popupContent={<div className='max-w-[240px]'>{titleTooltip}</div>}>
+                <RiQuestionLine className='size-3.5 text-text-tertiary' />
+              </Tooltip>
+            )}
+          </div>
+          {headerRight}
+          {/* <div className='flex px-1.5 rounded-md hover:bg-components-button-tertiary-bg-hover items-center h-6 space-x-1 cursor-pointer' onClick={() => setIsEdit(true)}>
         </div> */}
-      </div>
-      <div className={cn('mt-3 space-y-1', contentClassName)}>
+        </div>
+      )}
+
+      <div className={cn('mt-3 space-y-1', !noHeader && 'mt-0', contentClassName)}>
         {isEdit && (
           <div>
             <SelectMetadataModal