Feat: Metadata in documents for improve the prompt #3690 (#4462)

### What problem does this PR solve?

Feat: Metadata in documents for improve the prompt #3690

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/add-knowledge/components/knowledge-file/hooks.ts

@@ -4,6 +4,7 @@ import {
   useNextWebCrawl,
   useRunNextDocument,
   useSaveNextDocumentName,
+  useSetDocumentMeta,
   useSetNextDocumentParser,
   useUploadNextDocument,
 } from '@/hooks/document-hooks';
@@ -236,3 +237,34 @@ export const useHandleRunDocumentByIds = (id: string) => {
     loading: isLoading,
   };
 };
+
+export const useShowMetaModal = (documentId: string) => {
+  const { setDocumentMeta, loading } = useSetDocumentMeta();
+
+  const {
+    visible: setMetaVisible,
+    hideModal: hideSetMetaModal,
+    showModal: showSetMetaModal,
+  } = useSetModalState();
+
+  const onSetMetaModalOk = useCallback(
+    async (meta: string) => {
+      const ret = await setDocumentMeta({
+        documentId,
+        meta,
+      });
+      if (ret === 0) {
+        hideSetMetaModal();
+      }
+    },
+    [setDocumentMeta, documentId, hideSetMetaModal],
+  );
+
+  return {
+    setMetaLoading: loading,
+    onSetMetaModalOk,
+    setMetaVisible,
+    hideSetMetaModal,
+    showSetMetaModal,
+  };
+};

web/src/pages/add-knowledge/components/knowledge-file/index.tsx

@@ -20,6 +20,7 @@ import {
   useHandleWebCrawl,
   useNavigateToOtherPage,
   useRenameDocument,
+  useShowMetaModal,
 } from './hooks';
 import ParsingActionCell from './parsing-action-cell';
 import ParsingStatusCell from './parsing-status-cell';
@@ -30,6 +31,7 @@ import FileUploadModal from '@/components/file-upload-modal';
 import { IDocumentInfo } from '@/interfaces/database/document';
 import { formatDate } from '@/utils/date';
 import styles from './index.less';
+import { SetMetaModal } from './set-meta-modal';
 
 const { Text } = Typography;
 
@@ -79,6 +81,14 @@ const KnowledgeFile = () => {
     keyPrefix: 'knowledgeDetails',
   });
 
+  const {
+    showSetMetaModal,
+    hideSetMetaModal,
+    setMetaVisible,
+    setMetaLoading,
+    onSetMetaModalOk,
+  } = useShowMetaModal(currentRecord.id);
+
   const rowSelection = useGetRowSelection();
 
   const columns: ColumnsType<IDocumentInfo> = [
@@ -157,6 +167,7 @@ const KnowledgeFile = () => {
           setCurrentRecord={setRecord}
           showRenameModal={showRenameModal}
           showChangeParserModal={showChangeParserModal}
+          showSetMetaModal={showSetMetaModal}
           record={record}
         ></ParsingActionCell>
       ),
@@ -225,6 +236,15 @@ const KnowledgeFile = () => {
         loading={webCrawlUploadLoading}
         onOk={onWebCrawlUploadOk}
       ></WebCrawlModal>
+      {setMetaVisible && (
+        <SetMetaModal
+          visible={setMetaVisible}
+          hideModal={hideSetMetaModal}
+          onOk={onSetMetaModalOk}
+          loading={setMetaLoading}
+          initialMetaData={currentRecord.meta_fields}
+        ></SetMetaModal>
+      )}
     </div>
   );
 };

web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx

@@ -11,6 +11,7 @@ import {
 import { Button, Dropdown, MenuProps, Space, Tooltip } from 'antd';
 import { isParserRunning } from '../utils';
 
+import { useCallback } from 'react';
 import { DocumentType } from '../constant';
 import styles from './index.less';
 
@@ -19,6 +20,7 @@ interface IProps {
   setCurrentRecord: (record: IDocumentInfo) => void;
   showRenameModal: () => void;
   showChangeParserModal: () => void;
+  showSetMetaModal: () => void;
 }
 
 const ParsingActionCell = ({
@@ -26,6 +28,7 @@ const ParsingActionCell = ({
   setCurrentRecord,
   showRenameModal,
   showChangeParserModal,
+  showSetMetaModal,
 }: IProps) => {
   const documentId = record.id;
   const isRunning = isParserRunning(record.run);
@@ -47,9 +50,9 @@ const ParsingActionCell = ({
     });
   };
 
-  const setRecord = () => {
+  const setRecord = useCallback(() => {
     setCurrentRecord(record);
-  };
+  }, [record, setCurrentRecord]);
 
   const onShowRenameModal = () => {
     setRecord();
@@ -60,17 +63,33 @@ const ParsingActionCell = ({
     showChangeParserModal();
   };
 
+  const onShowSetMetaModal = useCallback(() => {
+    setRecord();
+    showSetMetaModal();
+  }, [setRecord, showSetMetaModal]);
+
   const chunkItems: MenuProps['items'] = [
     {
       key: '1',
       label: (
-        <div>
+        <div className="flex flex-col">
           <Button type="link" onClick={onShowChangeParserModal}>
             {t('chunkMethod')}
           </Button>
         </div>
       ),
     },
+    { type: 'divider' },
+    {
+      key: '2',
+      label: (
+        <div className="flex flex-col">
+          <Button type="link" onClick={onShowSetMetaModal}>
+            {t('setMetaData')}
+          </Button>
+        </div>
+      ),
+    },
   ];
 
   return (

web/src/pages/add-knowledge/components/knowledge-file/set-meta-modal/index.tsx

@@ -0,0 +1,81 @@
+import { IModalProps } from '@/interfaces/common';
+import { IDocumentInfo } from '@/interfaces/database/document';
+import Editor, { loader } from '@monaco-editor/react';
+
+import { Form, Modal } from 'antd';
+import DOMPurify from 'dompurify';
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+loader.config({ paths: { vs: '/vs' } });
+
+type FieldType = {
+  meta?: string;
+};
+
+export function SetMetaModal({
+  visible,
+  hideModal,
+  onOk,
+  initialMetaData,
+}: IModalProps<any> & { initialMetaData?: IDocumentInfo['meta_fields'] }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const handleOk = useCallback(async () => {
+    const values = await form.validateFields();
+    onOk?.(values.meta);
+  }, [form, onOk]);
+
+  useEffect(() => {
+    form.setFieldValue('meta', JSON.stringify(initialMetaData, null, 4));
+  }, [form, initialMetaData]);
+
+  return (
+    <Modal
+      title={t('knowledgeDetails.setMetaData')}
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+    >
+      <Form
+        name="basic"
+        initialValues={{ remember: true }}
+        autoComplete="off"
+        layout={'vertical'}
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label={t('knowledgeDetails.metaData')}
+          name="meta"
+          rules={[
+            {
+              required: true,
+              validator(rule, value) {
+                try {
+                  JSON.parse(value);
+                  return Promise.resolve();
+                } catch (error) {
+                  return Promise.reject(
+                    new Error(t('knowledgeDetails.pleaseInputJson')),
+                  );
+                }
+              },
+            },
+          ]}
+          tooltip={
+            <div
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(
+                  t('knowledgeDetails.documentMetaTips'),
+                ),
+              }}
+            ></div>
+          }
+        >
+          <Editor height={200} defaultLanguage="json" theme="vs-dark" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}