Feat: Put the configuration of different parsing methods into separate components. #5467 (#5487)

### What problem does this PR solve?

Feat: Put the configuration of different parsing methods into separate
components. #5467

### Type of change


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

web/src/components/dataset-configuration-container.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+type DatasetConfigurationContainerProps = {
+  className?: string;
+} & PropsWithChildren;
+
+export function DatasetConfigurationContainer({
+  children,
+  className,
+}: DatasetConfigurationContainerProps) {
+  return (
+    <div
+      className={cn(
+        'border p-2 rounded-lg bg-slate-50 dark:bg-gray-600',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

web/src/components/layout-recognize.tsx

@@ -2,6 +2,7 @@ import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 import { Form, Select } from 'antd';
+import { camelCase } from 'lodash';
 import { useMemo } from 'react';
 
 const enum DocumentType {
@@ -15,12 +16,12 @@ const LayoutRecognize = () => {
 
   const options = useMemo(() => {
     const list = [DocumentType.DeepDOC, DocumentType.PlainText].map((x) => ({
-      label: x,
+      label: x === DocumentType.PlainText ? t(camelCase(x)) : 'DeepDoc',
       value: x,
     }));
 
     return [...list, ...allOptions[LlmModelType.Image2text]];
-  }, [allOptions]);
+  }, [allOptions, t]);
 
   return (
     <Form.Item

web/src/components/parse-configuration/graph-rag-items.tsx

@@ -1,8 +1,10 @@
 import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
 import { Form, Select, Switch } from 'antd';
 import { upperFirst } from 'lodash';
 import { useCallback, useMemo } from 'react';
+import { DatasetConfigurationContainer } from '../dataset-configuration-container';
 import EntityTypesItem from '../entity-types-item';
 
 const excludedTagParseMethods = [
@@ -33,8 +35,12 @@ export const showGraphRagItems = (parserId: DocumentParserType | undefined) => {
   return !excludedParseMethods.some((x) => x === parserId);
 };
 
+type GraphRagItemsProps = {
+  marginBottom?: boolean;
+};
+
 // The three types "table", "resume" and "one" do not display this configuration.
-const GraphRagItems = () => {
+const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
 
   const methodOptions = useMemo(() => {
@@ -55,7 +61,7 @@ const GraphRagItems = () => {
   );
 
   return (
-    <div className="border p-2 rounded-lg bg-slate-50 dark:bg-gray-600">
+    <DatasetConfigurationContainer className={cn({ 'mb-4': marginBottom })}>
       <Form.Item
         name={['parser_config', 'graphrag', 'use_graphrag']}
         label={t('useGraphRag')}
@@ -117,7 +123,7 @@ const GraphRagItems = () => {
           );
         }}
       </Form.Item>
-    </div>
+    </DatasetConfigurationContainer>
   );
 };
 

web/src/components/parse-configuration/index.tsx

@@ -1,16 +1,7 @@
 import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { PlusOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Divider,
-  Flex,
-  Form,
-  Input,
-  InputNumber,
-  Slider,
-  Switch,
-} from 'antd';
+import { Button, Flex, Form, Input, InputNumber, Slider, Switch } from 'antd';
 import random from 'lodash/random';
 
 export const excludedParseMethods = [
@@ -53,7 +44,6 @@ const ParseConfiguration = () => {
 
   return (
     <>
-      <Divider></Divider>
       <Form.Item
         name={['parser_config', 'raptor', 'use_raptor']}
         label={t('useRaptor')}

web/src/locales/en.ts

@@ -138,7 +138,7 @@ export default {
       fromMessage: 'Missing start page number',
       toPlaceholder: 'to',
       toMessage: 'Missing end page number (excluded)',
-      layoutRecognize: 'Layout recognition & OCR',
+      layoutRecognize: 'Document parser',
       layoutRecognizeTip:
         'Use visual models for layout analysis to better understand the structure of the document and effectively locate document titles, text blocks, images, and tables. If disabled, only the plain text in the PDF will be retrieved.',
       taskPageSize: 'Task page size',
@@ -195,6 +195,7 @@ export default {
       metaData: 'Meta data',
       deleteDocumentConfirmContent:
         'The document is associated with the knowledge graph. After deletion, the related node and relationship information will be deleted, but the graph will not be updated immediately. The update graph action is performed during the process of parsing the new document that carries the knowledge graph extraction task.',
+      plainText: 'Naive',
     },
     knowledgeConfiguration: {
       titleDescription:

web/src/locales/zh-traditional.ts

@@ -136,7 +136,7 @@ export default {
       fromMessage: '缺少起始頁碼',
       toPlaceholder: '到',
       toMessage: '缺少結束頁碼（不包含）',
-      layoutRecognize: '佈局識別和 OCR',
+      layoutRecognize: '文件解析器',
       layoutRecognizeTip:
         '使用視覺模型進行佈局分析，以更好地識別文檔結構，找到標題、文本塊、圖像和表格的位置。如果沒有此功能，則只能獲取 PDF 的純文本。',
       taskPageSize: '任務頁面大小',
@@ -192,6 +192,7 @@ export default {
       metaData: '元資料',
       deleteDocumentConfirmContent:
         '該文件與知識圖譜相關聯。刪除後，相關節點和關係資訊將被刪除，但圖不會立即更新。更新圖動作是在解析承載知識圖譜提取任務的新文件的過程中執行的。 ',
+      plainText: '簡易',
     },
     knowledgeConfiguration: {
       titleDescription: '在這裡更新您的知識庫詳細信息，尤其是解析方法。',

web/src/locales/zh.ts

@@ -136,7 +136,7 @@ export default {
       fromMessage: '缺少起始页码',
       toPlaceholder: '到',
       toMessage: '缺少结束页码（不包含）',
-      layoutRecognize: '布局识别和 OCR',
+      layoutRecognize: '文档解析器',
       layoutRecognizeTip:
         '使用视觉模型进行布局分析，以更好地识别文档结构，找到标题、文本块、图像和表格的位置。 如果没有此功能，则只能获取 PDF 的纯文本。',
       taskPageSize: '任务页面大小',
@@ -192,6 +192,7 @@ export default {
       metaData: '元数据',
       deleteDocumentConfirmContent:
         '该文档与知识图谱相关联。删除后，相关节点和关系信息将被删除，但图不会立即更新。更新图动作是在解析承载知识图谱提取任务的新文档的过程中执行的。',
+      plainText: '简易',
     },
     knowledgeConfiguration: {
       titleDescription: '在这里更新您的知识库详细信息，尤其是解析方法。',

web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx

@@ -1,186 +0,0 @@
-import {
-  AutoKeywordsItem,
-  AutoQuestionsItem,
-} from '@/components/auto-keywords-item';
-import { useShowAutoKeywords } from '@/components/chunk-method-modal/hooks';
-import Delimiter from '@/components/delimiter';
-import EntityTypesItem from '@/components/entity-types-item';
-import ExcelToHtml from '@/components/excel-to-html';
-import LayoutRecognize from '@/components/layout-recognize';
-import MaxTokenNumber from '@/components/max-token-number';
-import PageRank from '@/components/page-rank';
-import ParseConfiguration, {
-  showRaptorParseConfiguration,
-  showTagItems,
-} from '@/components/parse-configuration';
-import GraphRagItems, {
-  showGraphRagItems,
-} from '@/components/parse-configuration/graph-rag-items';
-import { DocumentParserType } from '@/constants/knowledge';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useHandleChunkMethodSelectChange } from '@/hooks/logic-hooks';
-import { normFile } from '@/utils/file-util';
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Radio, Select, Space, Upload } from 'antd';
-import { FormInstance } from 'antd/lib';
-import {
-  useFetchKnowledgeConfigurationOnMount,
-  useSubmitKnowledgeConfiguration,
-} from './hooks';
-import styles from './index.less';
-import { TagItems } from './tag-item';
-
-const { Option } = Select;
-
-const ConfigurationForm = ({ form }: { form: FormInstance }) => {
-  const { submitKnowledgeConfiguration, submitLoading, navigateToDataset } =
-    useSubmitKnowledgeConfiguration(form);
-  const { parserList, embeddingModelOptions, disabled } =
-    useFetchKnowledgeConfigurationOnMount(form);
-  const { t } = useTranslate('knowledgeConfiguration');
-  const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
-  const showAutoKeywords = useShowAutoKeywords();
-
-  return (
-    <Form form={form} name="validateOnly" layout="vertical" autoComplete="off">
-      <Form.Item name="name" label={t('name')} rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-      <Form.Item
-        name="avatar"
-        label={t('photo')}
-        valuePropName="fileList"
-        getValueFromEvent={normFile}
-      >
-        <Upload
-          listType="picture-card"
-          maxCount={1}
-          beforeUpload={() => false}
-          showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
-        >
-          <button style={{ border: 0, background: 'none' }} type="button">
-            <PlusOutlined />
-            <div style={{ marginTop: 8 }}>{t('upload')}</div>
-          </button>
-        </Upload>
-      </Form.Item>
-      <Form.Item name="description" label={t('description')}>
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t('language')}
-        name="language"
-        initialValue={'English'}
-        rules={[{ required: true, message: t('languageMessage') }]}
-      >
-        <Select placeholder={t('languagePlaceholder')}>
-          <Option value="English">{t('english')}</Option>
-          <Option value="Chinese">{t('chinese')}</Option>
-          <Option value="Vietnamese">{t('vietnamese')}</Option>
-          <Option value="Portuguese (Brazil)">{t('portugueseBr')}</Option>
-        </Select>
-      </Form.Item>
-      <Form.Item
-        name="permission"
-        label={t('permissions')}
-        tooltip={t('permissionsTip')}
-        rules={[{ required: true }]}
-      >
-        <Radio.Group>
-          <Radio value="me">{t('me')}</Radio>
-          <Radio value="team">{t('team')}</Radio>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item
-        name="embd_id"
-        label={t('embeddingModel')}
-        rules={[{ required: true }]}
-        tooltip={t('embeddingModelTip')}
-      >
-        <Select
-          placeholder={t('embeddingModelPlaceholder')}
-          options={embeddingModelOptions}
-          disabled={disabled}
-        ></Select>
-      </Form.Item>
-      <Form.Item
-        name="parser_id"
-        label={t('chunkMethod')}
-        tooltip={t('chunkMethodTip')}
-        rules={[{ required: true }]}
-      >
-        <Select
-          placeholder={t('chunkMethodPlaceholder')}
-          disabled={disabled}
-          onChange={handleChunkMethodSelectChange}
-        >
-          {parserList.map((x) => (
-            <Option value={x.value} key={x.value}>
-              {x.label}
-            </Option>
-          ))}
-        </Select>
-      </Form.Item>
-      <PageRank></PageRank>
-      <Form.Item noStyle dependencies={['parser_id']}>
-        {({ getFieldValue }) => {
-          const parserId = getFieldValue('parser_id');
-
-          return (
-            <>
-              {parserId === DocumentParserType.KnowledgeGraph && (
-                <>
-                  <EntityTypesItem></EntityTypesItem>
-                  <MaxTokenNumber max={8192 * 2}></MaxTokenNumber>
-                  <Delimiter></Delimiter>
-                </>
-              )}
-              {showAutoKeywords(parserId) && (
-                <>
-                  <AutoKeywordsItem></AutoKeywordsItem>
-                  <AutoQuestionsItem></AutoQuestionsItem>
-                </>
-              )}
-              {parserId === DocumentParserType.Naive && (
-                <>
-                  <MaxTokenNumber></MaxTokenNumber>
-                  <Delimiter></Delimiter>
-                  <LayoutRecognize></LayoutRecognize>
-                  <ExcelToHtml></ExcelToHtml>
-                </>
-              )}
-
-              {showRaptorParseConfiguration(parserId) && (
-                <ParseConfiguration></ParseConfiguration>
-              )}
-
-              {showGraphRagItems(parserId) && <GraphRagItems></GraphRagItems>}
-
-              {showTagItems(parserId) && <TagItems></TagItems>}
-            </>
-          );
-        }}
-      </Form.Item>
-
-      <Form.Item>
-        <div className={styles.buttonWrapper}>
-          <Space>
-            <Button size={'middle'} onClick={navigateToDataset}>
-              {t('cancel')}
-            </Button>
-            <Button
-              type="primary"
-              size={'middle'}
-              loading={submitLoading}
-              onClick={submitKnowledgeConfiguration}
-            >
-              {t('save')}
-            </Button>
-          </Space>
-        </div>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default ConfigurationForm;

web/src/pages/add-knowledge/components/knowledge-setting/configuration/audio.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function AudioConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/book.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function BookConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/common-item.tsx

@@ -0,0 +1,54 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useHandleChunkMethodSelectChange } from '@/hooks/logic-hooks';
+import { Form, Select } from 'antd';
+import { memo } from 'react';
+import {
+  useHasParsedDocument,
+  useSelectChunkMethodList,
+  useSelectEmbeddingModelOptions,
+} from '../hooks';
+
+export const EmbeddingModelItem = memo(function EmbeddingModelItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const embeddingModelOptions = useSelectEmbeddingModelOptions();
+  const disabled = useHasParsedDocument();
+
+  return (
+    <Form.Item
+      name="embd_id"
+      label={t('embeddingModel')}
+      rules={[{ required: true }]}
+      tooltip={t('embeddingModelTip')}
+    >
+      <Select
+        placeholder={t('embeddingModelPlaceholder')}
+        options={embeddingModelOptions}
+        disabled={disabled}
+      ></Select>
+    </Form.Item>
+  );
+});
+
+export const ChunkMethodItem = memo(function ChunkMethodItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = Form.useFormInstance();
+  const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
+  const disabled = useHasParsedDocument();
+  const parserList = useSelectChunkMethodList();
+
+  return (
+    <Form.Item
+      name="parser_id"
+      label={t('chunkMethod')}
+      tooltip={t('chunkMethodTip')}
+      rules={[{ required: true }]}
+    >
+      <Select
+        placeholder={t('chunkMethodPlaceholder')}
+        disabled={disabled}
+        onChange={handleChunkMethodSelectChange}
+        options={parserList}
+      ></Select>
+    </Form.Item>
+  );
+});

web/src/pages/add-knowledge/components/knowledge-setting/configuration/email.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function EmailConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/index.tsx

@@ -0,0 +1,148 @@
+import { DocumentParserType } from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/common-hooks';
+import { normFile } from '@/utils/file-util';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Radio, Select, Space, Upload } from 'antd';
+import { FormInstance } from 'antd/lib';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  useFetchKnowledgeConfigurationOnMount,
+  useSubmitKnowledgeConfiguration,
+} from '../hooks';
+import { AudioConfiguration } from './audio';
+import { BookConfiguration } from './book';
+import { EmailConfiguration } from './email';
+import { KnowledgeGraphConfiguration } from './knowledge-graph';
+import { LawsConfiguration } from './laws';
+import { ManualConfiguration } from './manual';
+import { NaiveConfiguration } from './naive';
+import { OneConfiguration } from './one';
+import { PaperConfiguration } from './paper';
+import { PictureConfiguration } from './picture';
+import { PresentationConfiguration } from './presentation';
+import { QAConfiguration } from './qa';
+import { ResumeConfiguration } from './resume';
+import { TableConfiguration } from './table';
+import { TagConfiguration } from './tag';
+
+import styles from '../index.less';
+
+const { Option } = Select;
+
+const ConfigurationComponentMap = {
+  [DocumentParserType.Naive]: NaiveConfiguration,
+  [DocumentParserType.Qa]: QAConfiguration,
+  [DocumentParserType.Resume]: ResumeConfiguration,
+  [DocumentParserType.Manual]: ManualConfiguration,
+  [DocumentParserType.Table]: TableConfiguration,
+  [DocumentParserType.Paper]: PaperConfiguration,
+  [DocumentParserType.Book]: BookConfiguration,
+  [DocumentParserType.Laws]: LawsConfiguration,
+  [DocumentParserType.Presentation]: PresentationConfiguration,
+  [DocumentParserType.Picture]: PictureConfiguration,
+  [DocumentParserType.One]: OneConfiguration,
+  [DocumentParserType.Audio]: AudioConfiguration,
+  [DocumentParserType.Email]: EmailConfiguration,
+  [DocumentParserType.Tag]: TagConfiguration,
+  [DocumentParserType.KnowledgeGraph]: KnowledgeGraphConfiguration,
+};
+
+function EmptyComponent() {
+  return <div></div>;
+}
+
+export const ConfigurationForm = ({ form }: { form: FormInstance }) => {
+  const { submitKnowledgeConfiguration, submitLoading, navigateToDataset } =
+    useSubmitKnowledgeConfiguration(form);
+  const { t } = useTranslate('knowledgeConfiguration');
+
+  const [finalParserId, setFinalParserId] = useState<DocumentParserType>();
+  const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);
+  const parserId: DocumentParserType = Form.useWatch('parser_id', form);
+  const ConfigurationComponent = useMemo(() => {
+    return finalParserId
+      ? ConfigurationComponentMap[finalParserId]
+      : EmptyComponent;
+  }, [finalParserId]);
+
+  useEffect(() => {
+    setFinalParserId(parserId);
+  }, [parserId]);
+
+  useEffect(() => {
+    setFinalParserId(knowledgeDetails.parser_id as DocumentParserType);
+  }, [knowledgeDetails.parser_id]);
+
+  return (
+    <Form form={form} name="validateOnly" layout="vertical" autoComplete="off">
+      <Form.Item name="name" label={t('name')} rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+      <Form.Item
+        name="avatar"
+        label={t('photo')}
+        valuePropName="fileList"
+        getValueFromEvent={normFile}
+      >
+        <Upload
+          listType="picture-card"
+          maxCount={1}
+          beforeUpload={() => false}
+          showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+        >
+          <button style={{ border: 0, background: 'none' }} type="button">
+            <PlusOutlined />
+            <div style={{ marginTop: 8 }}>{t('upload')}</div>
+          </button>
+        </Upload>
+      </Form.Item>
+      <Form.Item name="description" label={t('description')}>
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t('language')}
+        name="language"
+        initialValue={'English'}
+        rules={[{ required: true, message: t('languageMessage') }]}
+      >
+        <Select placeholder={t('languagePlaceholder')}>
+          <Option value="English">{t('english')}</Option>
+          <Option value="Chinese">{t('chinese')}</Option>
+          <Option value="Vietnamese">{t('vietnamese')}</Option>
+          <Option value="Portuguese (Brazil)">{t('portugueseBr')}</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="permission"
+        label={t('permissions')}
+        tooltip={t('permissionsTip')}
+        rules={[{ required: true }]}
+      >
+        <Radio.Group>
+          <Radio value="me">{t('me')}</Radio>
+          <Radio value="team">{t('team')}</Radio>
+        </Radio.Group>
+      </Form.Item>
+
+      <ConfigurationComponent></ConfigurationComponent>
+
+      <Form.Item>
+        <div className={styles.buttonWrapper}>
+          <Space>
+            <Button size={'middle'} onClick={navigateToDataset}>
+              {t('cancel')}
+            </Button>
+            <Button
+              type="primary"
+              size={'middle'}
+              loading={submitLoading}
+              onClick={submitKnowledgeConfiguration}
+            >
+              {t('save')}
+            </Button>
+          </Space>
+        </div>
+      </Form.Item>
+    </Form>
+  );
+};

web/src/pages/add-knowledge/components/knowledge-setting/configuration/knowledge-graph.tsx

@@ -0,0 +1,22 @@
+import Delimiter from '@/components/delimiter';
+import EntityTypesItem from '@/components/entity-types-item';
+import MaxTokenNumber from '@/components/max-token-number';
+import PageRank from '@/components/page-rank';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function KnowledgeGraphConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <EntityTypesItem></EntityTypesItem>
+        <MaxTokenNumber max={8192 * 2}></MaxTokenNumber>
+        <Delimiter></Delimiter>
+      </>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/laws.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function LawsConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/manual.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function ManualConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/naive.tsx

@@ -0,0 +1,43 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import { DatasetConfigurationContainer } from '@/components/dataset-configuration-container';
+import Delimiter from '@/components/delimiter';
+import ExcelToHtml from '@/components/excel-to-html';
+import LayoutRecognize from '@/components/layout-recognize';
+import MaxTokenNumber from '@/components/max-token-number';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { Divider } from 'antd';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function NaiveConfiguration() {
+  return (
+    <section className="space-y-4 mb-4">
+      <DatasetConfigurationContainer>
+        <LayoutRecognize></LayoutRecognize>
+        <EmbeddingModelItem></EmbeddingModelItem>
+        <ChunkMethodItem></ChunkMethodItem>
+        <MaxTokenNumber></MaxTokenNumber>
+        <Delimiter></Delimiter>
+      </DatasetConfigurationContainer>
+      <Divider></Divider>
+      <DatasetConfigurationContainer>
+        <PageRank></PageRank>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+        <ExcelToHtml></ExcelToHtml>
+        <TagItems></TagItems>
+      </DatasetConfigurationContainer>
+      <Divider></Divider>
+      <DatasetConfigurationContainer>
+        <ParseConfiguration></ParseConfiguration>
+      </DatasetConfigurationContainer>
+      <Divider></Divider>
+      <GraphRagItems></GraphRagItems>
+    </section>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/one.tsx

@@ -0,0 +1,28 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function OneConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/paper.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function PaperConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/picture.tsx

@@ -0,0 +1,24 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function PictureConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/presentation.tsx

@@ -0,0 +1,31 @@
+import {
+  AutoKeywordsItem,
+  AutoQuestionsItem,
+} from '@/components/auto-keywords-item';
+import PageRank from '@/components/page-rank';
+import ParseConfiguration from '@/components/parse-configuration';
+import GraphRagItems from '@/components/parse-configuration/graph-rag-items';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function PresentationConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <>
+        <AutoKeywordsItem></AutoKeywordsItem>
+        <AutoQuestionsItem></AutoQuestionsItem>
+      </>
+
+      <ParseConfiguration></ParseConfiguration>
+
+      <GraphRagItems marginBottom></GraphRagItems>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/qa.tsx

@@ -0,0 +1,16 @@
+import PageRank from '@/components/page-rank';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function QAConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/resume.tsx

@@ -0,0 +1,16 @@
+import PageRank from '@/components/page-rank';
+import { TagItems } from '../tag-item';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function ResumeConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+
+      <TagItems></TagItems>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/table.tsx

@@ -0,0 +1,13 @@
+import PageRank from '@/components/page-rank';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function TableConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+    </>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/configuration/tag.tsx

@@ -0,0 +1,13 @@
+import PageRank from '@/components/page-rank';
+import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
+
+export function TagConfiguration() {
+  return (
+    <>
+      <EmbeddingModelItem></EmbeddingModelItem>
+      <ChunkMethodItem></ChunkMethodItem>
+
+      <PageRank></PageRank>
+    </>
+  );
+}

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

@@ -41,10 +41,23 @@ export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
 // The value that does not need to be displayed in the analysis method Select
 const HiddenFields = ['email', 'picture', 'audio'];
 
-export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
+export function useSelectChunkMethodList() {
   const parserList = useSelectParserList();
-  const allOptions = useSelectLlmOptionsByModelType();
 
+  return parserList.filter((x) => !HiddenFields.some((y) => y === x.value));
+}
+
+export function useSelectEmbeddingModelOptions() {
+  const allOptions = useSelectLlmOptionsByModelType();
+  return allOptions[LlmModelType.Embedding];
+}
+
+export function useHasParsedDocument() {
+  const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
+  return knowledgeDetails.chunk_num > 0;
+}
+
+export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
   const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
 
   useEffect(() => {
@@ -66,13 +79,7 @@ export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
     });
   }, [form, knowledgeDetails]);
 
-  return {
-    parserList: parserList.filter(
-      (x) => !HiddenFields.some((y) => y === x.value),
-    ),
-    embeddingModelOptions: allOptions[LlmModelType.Embedding],
-    disabled: knowledgeDetails.chunk_num > 0,
-  };
+  return knowledgeDetails;
 };
 
 export const useSelectKnowledgeDetailsLoading = () =>

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

@@ -1,6 +1,6 @@
 import { Col, Divider, Row, Spin, Typography } from 'antd';
 import CategoryPanel from './category-panel';
-import ConfigurationForm from './configuration';
+import { ConfigurationForm } from './configuration';
 import {
   useHandleChunkMethodChange,
   useSelectKnowledgeDetailsLoading,

web/src/pages/add-knowledge/components/knowledge-setting/tag-item.tsx

@@ -1,15 +1,6 @@
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
-import {
-  Avatar,
-  Divider,
-  Flex,
-  Form,
-  InputNumber,
-  Select,
-  Slider,
-  Space,
-} from 'antd';
+import { Avatar, Flex, Form, InputNumber, Select, Slider, Space } from 'antd';
 import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 
@@ -83,7 +74,6 @@ export const TopNTagsItem = () => {
 export function TagItems() {
   return (
     <>
-      <Divider />
       <TagSetItem></TagSetItem>
       <Form.Item noStyle dependencies={[['parser_config', 'tag_kb_ids']]}>
         {({ getFieldValue }) => {
@@ -95,7 +85,6 @@ export function TagItems() {
           );
         }}
       </Form.Item>
-      <Divider />
     </>
   );
 }

web/src/utils/dataset-util.ts

@@ -0,0 +1,9 @@
+import { DocumentParserType } from '@/constants/knowledge';
+
+export function isKnowledgeGraphParser(parserId: DocumentParserType) {
+  return parserId === DocumentParserType.KnowledgeGraph;
+}
+
+export function isNaiveParser(parserId: DocumentParserType) {
+  return parserId === DocumentParserType.Naive;
+}