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')}