Feat: Fixed the issue where the dataset configuration page kept refreshing #3221 (#7666)

### What problem does this PR solve?

Feat: Fixed the issue where the dataset configuration page kept
refreshing #3221
### Type of change


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

web/src/pages/dataset/setting/configuration/audio.tsx

@@ -5,14 +5,15 @@ import {
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function AudioConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 
@@ -26,6 +27,6 @@ export function AudioConfiguration() {
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/book.tsx

@@ -6,28 +6,38 @@ import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-fie
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function BookConfiguration() {
   return (
-    <>
-      <LayoutRecognizeFormField></LayoutRecognizeFormField>
-      <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
+        <LayoutRecognizeFormField></LayoutRecognizeFormField>
+        <EmbeddingModelItem></EmbeddingModelItem>
 
-      <PageRankFormField></PageRankFormField>
+        <PageRankFormField></PageRankFormField>
+      </ConfigurationFormContainer>
 
-      <>
+      <ConfigurationFormContainer>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
-      </>
+      </ConfigurationFormContainer>
 
-      <RaptorFormFields></RaptorFormFields>
+      <ConfigurationFormContainer>
+        <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
 
-      <GraphRagItems marginBottom></GraphRagItems>
+      <GraphRagItems marginBottom className="p-10"></GraphRagItems>
 
-      <TagItems></TagItems>
-    </>
+      <ConfigurationFormContainer>
+        <TagItems></TagItems>
+      </ConfigurationFormContainer>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/email.tsx

@@ -5,14 +5,15 @@ import {
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function EmailConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 
@@ -26,6 +27,6 @@ export function EmailConfiguration() {
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/knowledge-graph.tsx

@@ -7,8 +7,8 @@ import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 export function KnowledgeGraphConfiguration() {
   return (
     <>
-      <EmbeddingModelItem></EmbeddingModelItem>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 

web/src/pages/dataset/setting/configuration/laws.tsx

@@ -6,28 +6,38 @@ import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-fie
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function LawsConfiguration() {
   return (
-    <>
-      <LayoutRecognizeFormField></LayoutRecognizeFormField>
-      <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
+        <LayoutRecognizeFormField></LayoutRecognizeFormField>
+        <EmbeddingModelItem></EmbeddingModelItem>
 
-      <PageRankFormField></PageRankFormField>
+        <PageRankFormField></PageRankFormField>
+      </ConfigurationFormContainer>
 
-      <>
+      <ConfigurationFormContainer>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
-      </>
+      </ConfigurationFormContainer>
 
-      <RaptorFormFields></RaptorFormFields>
+      <ConfigurationFormContainer>
+        <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
-      <TagItems></TagItems>
-    </>
+      <ConfigurationFormContainer>
+        <TagItems></TagItems>
+      </ConfigurationFormContainer>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/manual.tsx

@@ -6,28 +6,35 @@ import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-fie
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function ManualConfiguration() {
   return (
-    <>
-      <LayoutRecognizeFormField></LayoutRecognizeFormField>
-      <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
+        <LayoutRecognizeFormField></LayoutRecognizeFormField>
+        <EmbeddingModelItem></EmbeddingModelItem>
 
-      <PageRankFormField></PageRankFormField>
+        <PageRankFormField></PageRankFormField>
+      </ConfigurationFormContainer>
 
-      <>
+      <ConfigurationFormContainer>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
-      </>
-
-      <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
+      <ConfigurationFormContainer>
+        <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/naive.tsx

@@ -4,36 +4,39 @@ import {
 } from '@/components/auto-keywords-form-field';
 import { DelimiterFormField } from '@/components/delimiter-form-field';
 import { ExcelToHtmlFormField } from '@/components/excel-to-html-form-field';
-import { FormContainer } from '@/components/form-container';
 import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
 import { MaxTokenNumberFormField } from '@/components/max-token-number-from-field';
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function NaiveConfiguration() {
   return (
-    <section className="space-y-5 mb-4 overflow-auto">
-      <FormContainer>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
         <LayoutRecognizeFormField></LayoutRecognizeFormField>
         <EmbeddingModelItem></EmbeddingModelItem>
-        <ChunkMethodItem></ChunkMethodItem>
         <MaxTokenNumberFormField></MaxTokenNumberFormField>
         <DelimiterFormField></DelimiterFormField>
-      </FormContainer>
-      <FormContainer>
+      </ConfigurationFormContainer>
+      <ConfigurationFormContainer>
         <PageRankFormField></PageRankFormField>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
         <ExcelToHtmlFormField></ExcelToHtmlFormField>
         <TagItems></TagItems>
-      </FormContainer>
-      <FormContainer>
+      </ConfigurationFormContainer>
+      <ConfigurationFormContainer>
         <RaptorFormFields></RaptorFormFields>
-      </FormContainer>
+      </ConfigurationFormContainer>
       <GraphRagItems></GraphRagItems>
-    </section>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/one.tsx

@@ -5,15 +5,16 @@ import {
 import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function OneConfiguration() {
   return (
-    <>
+    <ConfigurationFormContainer>
+      <ChunkMethodItem></ChunkMethodItem>
       <LayoutRecognizeFormField></LayoutRecognizeFormField>
       <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
 
       <PageRankFormField></PageRankFormField>
 
@@ -25,6 +26,6 @@ export function OneConfiguration() {
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/paper.tsx

@@ -6,28 +6,38 @@ import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-fie
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function PaperConfiguration() {
   return (
-    <>
-      <LayoutRecognizeFormField></LayoutRecognizeFormField>
-      <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
+        <LayoutRecognizeFormField></LayoutRecognizeFormField>
+        <EmbeddingModelItem></EmbeddingModelItem>
 
-      <PageRankFormField></PageRankFormField>
+        <PageRankFormField></PageRankFormField>
+      </ConfigurationFormContainer>
 
-      <>
+      <ConfigurationFormContainer>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
-      </>
+      </ConfigurationFormContainer>
 
-      <RaptorFormFields></RaptorFormFields>
+      <ConfigurationFormContainer>
+        <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
-      <TagItems></TagItems>
-    </>
+      <ConfigurationFormContainer>
+        <TagItems></TagItems>
+      </ConfigurationFormContainer>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/picture.tsx

@@ -3,14 +3,15 @@ import {
   AutoQuestionsFormField,
 } from '@/components/auto-keywords-form-field';
 import PageRankFormField from '@/components/page-rank-form-field';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function PictureConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 
@@ -19,6 +20,6 @@ export function PictureConfiguration() {
         <AutoQuestionsFormField></AutoQuestionsFormField>
       </>
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/presentation.tsx

@@ -6,28 +6,37 @@ import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-fie
 import PageRankFormField from '@/components/page-rank-form-field';
 import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
 import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import {
+  ConfigurationFormContainer,
+  MainContainer,
+} from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function PresentationConfiguration() {
   return (
-    <>
-      <LayoutRecognizeFormField></LayoutRecognizeFormField>
-      <EmbeddingModelItem></EmbeddingModelItem>
-      <ChunkMethodItem></ChunkMethodItem>
+    <MainContainer>
+      <ConfigurationFormContainer>
+        <ChunkMethodItem></ChunkMethodItem>
+        <LayoutRecognizeFormField></LayoutRecognizeFormField>
+        <EmbeddingModelItem></EmbeddingModelItem>
 
-      <PageRankFormField></PageRankFormField>
+        <PageRankFormField></PageRankFormField>
+      </ConfigurationFormContainer>
 
-      <>
+      <ConfigurationFormContainer>
         <AutoKeywordsFormField></AutoKeywordsFormField>
         <AutoQuestionsFormField></AutoQuestionsFormField>
-      </>
+      </ConfigurationFormContainer>
 
-      <RaptorFormFields></RaptorFormFields>
+      <ConfigurationFormContainer>
+        <RaptorFormFields></RaptorFormFields>
+      </ConfigurationFormContainer>
 
       <GraphRagItems marginBottom></GraphRagItems>
-
-      <TagItems></TagItems>
-    </>
+      <ConfigurationFormContainer>
+        <TagItems></TagItems>
+      </ConfigurationFormContainer>
+    </MainContainer>
   );
 }

web/src/pages/dataset/setting/configuration/qa.tsx

@@ -1,16 +1,17 @@
 import PageRankFormField from '@/components/page-rank-form-field';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function QAConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/resume.tsx

@@ -1,16 +1,17 @@
 import PageRankFormField from '@/components/page-rank-form-field';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { TagItems } from '../tag-item';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function ResumeConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/table.tsx

@@ -1,13 +1,14 @@
 import PageRankFormField from '@/components/page-rank-form-field';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function TableConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
-    </>
+    </ConfigurationFormContainer>
   );
 }

web/src/pages/dataset/setting/configuration/tag.tsx

@@ -1,13 +1,14 @@
 import PageRankFormField from '@/components/page-rank-form-field';
+import { ConfigurationFormContainer } from '../configuration-form-container';
 import { ChunkMethodItem, EmbeddingModelItem } from './common-item';
 
 export function TagConfiguration() {
   return (
-    <>
-      <EmbeddingModelItem></EmbeddingModelItem>
+    <ConfigurationFormContainer>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
-    </>
+    </ConfigurationFormContainer>
   );
 }