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