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)
2025-12-20 12:56:55 +08:00 · 2025-02-28 16:54:04 +08:00
parent 014f2ef900
commit 2c7428e2ee
29 changed files with 662 additions and 227 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
+++ b/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;
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/audio.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/book.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/common-item.tsx
+++ b/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>
+  );
+});
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/email.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/index.tsx
+++ b/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>
+  );
+};
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/knowledge-graph.tsx
+++ b/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>
+      </>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/laws.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/manual.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/naive.tsx
+++ b/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>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/one.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/paper.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/picture.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/presentation.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/qa.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/resume.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/table.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration/tag.tsx
+++ b/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>
+    </>
+  );
+}
--- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
+++ b/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 = () =>
--- a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
+++ b/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,
--- a/web/src/pages/add-knowledge/components/knowledge-setting/tag-item.tsx
+++ b/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 />
    </>
  );
 }