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

@@ -24,6 +24,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 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';
@@ -105,10 +106,6 @@ const ChunkMethodModal: React.FC<IProps> = ({
     selectedTag === DocumentParserType.Naive ||
     selectedTag === DocumentParserType.KnowledgeGraph;
 
-  const hideDivider = [showPages, showOne, showMaxTokenNumber].every(
-    (x) => x === false,
-  );
-
   const showEntityTypes = selectedTag === DocumentParserType.KnowledgeGraph;
 
   const showExcelToHtml =
@@ -151,8 +148,13 @@ const ChunkMethodModal: React.FC<IProps> = ({
           />
         </Form.Item>
       </Space>
-      {hideDivider || <Divider></Divider>}
+      <Divider></Divider>
-      <Form name="dynamic_form_nest_item" autoComplete="off" form={form}>
+      <Form
+        name="dynamic_form_nest_item"
+        autoComplete="off"
+        form={form}
+        className="space-y-4"
+      >
         {showPages && (
           <>
             <Space>
@@ -257,7 +259,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
             </Form.List>
           </>
         )}
-        {showOne && <LayoutRecognize></LayoutRecognize>}
+
         {showPages && (
           <Form.Item
             noStyle
@@ -283,6 +285,8 @@ const ChunkMethodModal: React.FC<IProps> = ({
             }
           </Form.Item>
         )}
+        <DatasetConfigurationContainer show={showOne || showMaxTokenNumber}>
+          {showOne && <LayoutRecognize></LayoutRecognize>}
           {showMaxTokenNumber && (
             <>
               <MaxTokenNumber
@@ -295,6 +299,10 @@ const ChunkMethodModal: React.FC<IProps> = ({
               <Delimiter></Delimiter>
             </>
           )}
+        </DatasetConfigurationContainer>
+        <DatasetConfigurationContainer
+          show={showAutoKeywords(selectedTag) || showExcelToHtml}
+        >
           {showAutoKeywords(selectedTag) && (
             <>
               <AutoKeywordsItem></AutoKeywordsItem>
@@ -302,8 +310,11 @@ const ChunkMethodModal: React.FC<IProps> = ({
             </>
           )}
           {showExcelToHtml && <ExcelToHtml></ExcelToHtml>}
+        </DatasetConfigurationContainer>
         {showRaptorParseConfiguration(selectedTag) && (
+          <DatasetConfigurationContainer>
             <ParseConfiguration></ParseConfiguration>
+          </DatasetConfigurationContainer>
         )}
         {showGraphRagItems(selectedTag) && <GraphRagItems></GraphRagItems>}
         {showEntityTypes && <EntityTypesItem></EntityTypesItem>}

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

@@ -3,13 +3,15 @@ import { PropsWithChildren } from 'react';
 
 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',
@@ -18,5 +20,7 @@ export function DatasetConfigurationContainer({
     >
       {children}
     </div>
+  ) : (
+    children
   );
 }