Feat: Wrap MaxTokenNumber with DatasetConfigurationContainer. #5467 (#5491)

### What problem does this PR solve?

Feat: Wrap MaxTokenNumber with DatasetConfigurationContainer. #5467

### Type of change


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

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

 import { IParserConfig } from '@/interfaces/database/document';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { AutoKeywordsItem, AutoQuestionsItem } from '../auto-keywords-item';
+import { DatasetConfigurationContainer } from '../dataset-configuration-container';
 import Delimiter from '../delimiter';
 import EntityTypesItem from '../entity-types-item';
 import ExcelToHtml from '../excel-to-html';
     selectedTag === DocumentParserType.Naive ||
     selectedTag === DocumentParserType.KnowledgeGraph;
 
-  const hideDivider = [showPages, showOne, showMaxTokenNumber].every(
-    (x) => x === false,
-  );
-
   const showEntityTypes = selectedTag === DocumentParserType.KnowledgeGraph;
 
   const showExcelToHtml =
           />
         </Form.Item>
       </Space>
-      {hideDivider || <Divider></Divider>}
-      <Form name="dynamic_form_nest_item" autoComplete="off" form={form}>
+      <Divider></Divider>
+      <Form
+        name="dynamic_form_nest_item"
+        autoComplete="off"
+        form={form}
+        className="space-y-4"
+      >
         {showPages && (
           <>
             <Space>
             </Form.List>
           </>
         )}
-        {showOne && <LayoutRecognize></LayoutRecognize>}
+
         {showPages && (
           <Form.Item
             noStyle
             }
           </Form.Item>
         )}
-        {showMaxTokenNumber && (
-          <>
-            <MaxTokenNumber
-              max={
-                selectedTag === DocumentParserType.KnowledgeGraph
-                  ? 8192 * 2
-                  : 2048
-              }
-            ></MaxTokenNumber>
-            <Delimiter></Delimiter>
-          </>
-        )}
-        {showAutoKeywords(selectedTag) && (
-          <>
-            <AutoKeywordsItem></AutoKeywordsItem>
-            <AutoQuestionsItem></AutoQuestionsItem>
-          </>
-        )}
-        {showExcelToHtml && <ExcelToHtml></ExcelToHtml>}
+        <DatasetConfigurationContainer show={showOne || showMaxTokenNumber}>
+          {showOne && <LayoutRecognize></LayoutRecognize>}
+          {showMaxTokenNumber && (
+            <>
+              <MaxTokenNumber
+                max={
+                  selectedTag === DocumentParserType.KnowledgeGraph
+                    ? 8192 * 2
+                    : 2048
+                }
+              ></MaxTokenNumber>
+              <Delimiter></Delimiter>
+            </>
+          )}
+        </DatasetConfigurationContainer>
+        <DatasetConfigurationContainer
+          show={showAutoKeywords(selectedTag) || showExcelToHtml}
+        >
+          {showAutoKeywords(selectedTag) && (
+            <>
+              <AutoKeywordsItem></AutoKeywordsItem>
+              <AutoQuestionsItem></AutoQuestionsItem>
+            </>
+          )}
+          {showExcelToHtml && <ExcelToHtml></ExcelToHtml>}
+        </DatasetConfigurationContainer>
         {showRaptorParseConfiguration(selectedTag) && (
-          <ParseConfiguration></ParseConfiguration>
+          <DatasetConfigurationContainer>
+            <ParseConfiguration></ParseConfiguration>
+          </DatasetConfigurationContainer>
         )}
         {showGraphRagItems(selectedTag) && <GraphRagItems></GraphRagItems>}
         {showEntityTypes && <EntityTypesItem></EntityTypesItem>}

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

 
 type DatasetConfigurationContainerProps = {
   className?: string;
+  show?: boolean;
 } & PropsWithChildren;
 
 export function DatasetConfigurationContainer({
   children,
   className,
+  show = true,
 }: DatasetConfigurationContainerProps) {
-  return (
+  return show ? (
     <div
       className={cn(
         'border p-2 rounded-lg bg-slate-50 dark:bg-gray-600',
     >
       {children}
     </div>
+  ) : (
+    children
   );
 }