feat: After selecting the parsing method as knowledge graph, the delimiter and chunk token number are displayed. #1594 (#1929)

### What problem does this PR solve?

feat: After selecting the parsing method as knowledge graph, the
delimiter and chunk token number are displayed. #1594

### Type of change


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

web/src/components/chunk-method-modal/hooks.ts

@@ -1,4 +1,6 @@
+import { useHandleChunkMethodSelectChange } from '@/hooks/logic-hooks';
 import { useSelectParserList } from '@/hooks/user-setting-hooks';
+import { FormInstance } from 'antd';
 import { useEffect, useMemo, useState } from 'react';
 
 const ParserListMap = new Map([
@@ -84,9 +86,11 @@ export const useFetchParserListOnMount = (
   documentId: string,
   parserId: string,
   documentExtension: string,
+  form: FormInstance,
 ) => {
   const [selectedTag, setSelectedTag] = useState('');
   const parserList = useSelectParserList();
+  const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
 
   const nextParserList = useMemo(() => {
     const key = [...ParserListMap.keys()].find((x) =>
@@ -108,7 +112,7 @@ export const useFetchParserListOnMount = (
   }, [parserId, documentId]);
 
   const handleChange = (tag: string) => {
-    // const nextSelectedTag = checked ? tag : selectedTag;
+    handleChunkMethodSelectChange(tag);
     setSelectedTag(tag);
   };
 

web/src/components/chunk-method-modal/index.tsx

@@ -62,12 +62,13 @@ const ChunkMethodModal: React.FC<IProps> = ({
   parserConfig,
   loading,
 }) => {
+  const [form] = Form.useForm();
   const { parserList, handleChange, selectedTag } = useFetchParserListOnMount(
     documentId,
     parserId,
     documentExtension,
+    form,
   );
-  const [form] = Form.useForm();
   const { t } = useTranslate('knowledgeDetails');
 
   const handleOk = async () => {
@@ -89,12 +90,13 @@ const ChunkMethodModal: React.FC<IProps> = ({
     return (
       isPdf &&
       hidePagesChunkMethods
-        .filter((x) => x !== 'one' && x !== 'knowledge_graph')
+        .filter((x) => x !== 'one')
         .every((x) => x !== selectedTag)
     );
   }, [selectedTag, isPdf]);
 
-  const showMaxTokenNumber = selectedTag === 'naive';
+  const showMaxTokenNumber =
+    selectedTag === 'naive' || selectedTag === 'knowledge_graph';
 
   const hideDivider = [showPages, showOne, showMaxTokenNumber].every(
     (x) => x === false,
@@ -271,7 +273,9 @@ const ChunkMethodModal: React.FC<IProps> = ({
         )}
         {showMaxTokenNumber && (
           <>
-            <MaxTokenNumber></MaxTokenNumber>
+            <MaxTokenNumber
+              max={selectedTag === 'knowledge_graph' ? 8192 * 2 : 2048}
+            ></MaxTokenNumber>
             <Delimiter></Delimiter>
           </>
         )}

web/src/components/edit-tag/index.less

@@ -1,3 +1,8 @@
 .tweenGroup {
   display: inline-block;
+  :global(.ant-tag) {
+    margin-bottom: 8px;
+    font-size: 14px;
+    padding: 2px 8px;
+  }
 }

web/src/components/max-token-number.tsx

@@ -1,7 +1,12 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Flex, Form, InputNumber, Slider } from 'antd';
 
-const MaxTokenNumber = () => {
+interface IProps {
+  initialValue?: number;
+  max?: number;
+}
+
+const MaxTokenNumber = ({ initialValue = 128, max = 2048 }: IProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
 
   return (
@@ -11,18 +16,19 @@ const MaxTokenNumber = () => {
           <Form.Item
             name={['parser_config', 'chunk_token_num']}
             noStyle
-            initialValue={128}
+            initialValue={initialValue}
             rules={[{ required: true, message: t('chunkTokenNumberMessage') }]}
           >
-            <Slider max={2048} style={{ width: '100%' }} />
+            <Slider max={max} style={{ width: '100%' }} />
           </Form.Item>
         </Flex>
         <Form.Item
           name={['parser_config', 'chunk_token_num']}
           noStyle
+          initialValue={initialValue}
           rules={[{ required: true, message: t('chunkTokenNumberMessage') }]}
         >
-          <InputNumber max={2048} min={0} />
+          <InputNumber max={max} min={0} />
         </Form.Item>
       </Flex>
     </Form.Item>