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/components/form-container.tsx

 import { cn } from '@/lib/utils';
 import { PropsWithChildren } from 'react';
 
-type FormContainerProps = {
+export type FormContainerProps = {
   className?: string;
   show?: boolean;
 } & PropsWithChildren;

web/src/components/parse-configuration/graph-rag-form-fields.tsx

 
 type GraphRagItemsProps = {
   marginBottom?: boolean;
+  className?: string;
 };
 
 export function UseGraphRagFormField() {
 }
 
 // The three types "table", "resume" and "one" do not display this configuration.
-const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
+const GraphRagItems = ({
+  marginBottom = false,
+  className = 'p-10',
+}: GraphRagItemsProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
   const form = useFormContext();
 
   );
 
   return (
-    <FormContainer className={cn({ 'mb-4': marginBottom })}>
+    <FormContainer className={cn({ 'mb-4': marginBottom }, className)}>
       <UseGraphRagFormField></UseGraphRagFormField>
       {useRaptor && (
         <>

web/src/hooks/llm-hooks.tsx

 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Flex, message } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useFetchLlmList = (
 export const useSelectLlmOptionsByModelType = () => {
   const llmInfo: IThirdOAIModelCollection = useFetchLlmList();
 
-  const groupImage2TextOptions = () => {
+  const groupImage2TextOptions = useCallback(() => {
     const modelType = LlmModelType.Image2text;
     const modelTag = modelType.toUpperCase();
 
         };
       })
       .filter((x) => x.options.length > 0);
-  };
+  }, [llmInfo]);
 
-  const groupOptionsByModelType = (modelType: LlmModelType) => {
-    return Object.entries(llmInfo)
-      .filter(([, value]) =>
-        modelType ? value.some((x) => x.model_type.includes(modelType)) : true,
-      )
-      .map(([key, value]) => {
-        return {
-          label: key,
-          options: value
-            .filter(
-              (x) =>
-                (modelType ? x.model_type.includes(modelType) : true) &&
-                x.available,
-            )
-            .map(buildLlmOptionsWithIcon),
-        };
-      })
-      .filter((x) => x.options.length > 0);
-  };
+  const groupOptionsByModelType = useCallback(
+    (modelType: LlmModelType) => {
+      return Object.entries(llmInfo)
+        .filter(([, value]) =>
+          modelType
+            ? value.some((x) => x.model_type.includes(modelType))
+            : true,
+        )
+        .map(([key, value]) => {
+          return {
+            label: key,
+            options: value
+              .filter(
+                (x) =>
+                  (modelType ? x.model_type.includes(modelType) : true) &&
+                  x.available,
+              )
+              .map(buildLlmOptionsWithIcon),
+          };
+        })
+        .filter((x) => x.options.length > 0);
+    },
+    [llmInfo],
+  );
 
   return {
     [LlmModelType.Chat]: groupOptionsByModelType(LlmModelType.Chat),

web/src/pages/dataset/setting/chunk-method-form.tsx

 import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 
 import { DocumentParserType } from '@/constants/knowledge';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { AudioConfiguration } from './configuration/audio';
 import { BookConfiguration } from './configuration/book';
 import { EmailConfiguration } from './configuration/email';
 import { ResumeConfiguration } from './configuration/resume';
 import { TableConfiguration } from './configuration/table';
 import { TagConfiguration } from './configuration/tag';
-import { useFetchKnowledgeConfigurationOnMount } from './hooks';
 
 const ConfigurationComponentMap = {
   [DocumentParserType.Naive]: NaiveConfiguration,
 
 export function ChunkMethodForm() {
   const form = useFormContext();
-  const { t } = useTranslation();
-  const [finalParserId, setFinalParserId] = useState<DocumentParserType>(
-    DocumentParserType.Naive,
-  );
-
-  const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);
 
-  const parserId: DocumentParserType = useWatch({
+  const finalParserId: DocumentParserType = useWatch({
     control: form.control,
     name: 'parser_id',
   });
       : EmptyComponent;
   }, [finalParserId]);
 
-  //   useEffect(() => {
-  //     setFinalParserId(parserId);
-  //   }, [parserId]);
-
-  //   useEffect(() => {
-  //     setFinalParserId(knowledgeDetails.parser_id as DocumentParserType);
-  //   }, [knowledgeDetails.parser_id]);
-
   return (
-    <section>
+    <section className="overflow-auto max-h-[76vh]">
       <ConfigurationComponent></ConfigurationComponent>
     </section>
   );

web/src/pages/dataset/setting/configuration-form-container.tsx

+import { FormContainer, FormContainerProps } from '@/components/form-container';
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+export function ConfigurationFormContainer({
+  children,
+  className,
+}: FormContainerProps) {
+  return (
+    <FormContainer className={cn('p-10', className)}>{children}</FormContainer>
+  );
+}
+
+export function MainContainer({ children }: PropsWithChildren) {
+  return <section className="space-y-5">{children}</section>;
+}

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

 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>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

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

 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

 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>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

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

 export function KnowledgeGraphConfiguration() {
   return (
     <>
-      <EmbeddingModelItem></EmbeddingModelItem>
       <ChunkMethodItem></ChunkMethodItem>
+      <EmbeddingModelItem></EmbeddingModelItem>
 
       <PageRankFormField></PageRankFormField>
 

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

 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

 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

 } 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

 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>
 
       <GraphRagItems marginBottom></GraphRagItems>
 
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

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

 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

   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>
 
         <AutoQuestionsFormField></AutoQuestionsFormField>
       </>
       <TagItems></TagItems>
-    </>
+    </ConfigurationFormContainer>
   );
 }

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

 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

 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

 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

 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

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

web/src/pages/dataset/setting/form-schema.ts

+import { z } from 'zod';
+
+export const formSchema = z.object({
+  name: z.string().min(1, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  description: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  avatar: z.instanceof(File),
+  permission: z.string(),
+  parser_id: z.string(),
+  embd_id: z.string(),
+  parser_config: z.object({
+    layout_recognize: z.string(),
+    chunk_token_num: z.number(),
+    delimiter: z.string(),
+    auto_keywords: z.number(),
+    auto_questions: z.number(),
+    html4excel: z.boolean(),
+    tag_kb_ids: z.array(z.string()),
+    topn_tags: z.number(),
+    raptor: z.object({
+      use_raptor: z.boolean(),
+      prompt: z.string(),
+      max_token: z.number(),
+      threshold: z.number(),
+      max_cluster: z.number(),
+      random_seed: z.number(),
+    }),
+    graphrag: z.object({
+      use_graphrag: z.boolean(),
+      entity_types: z.array(z.string()),
+      method: z.string(),
+      resolution: z.boolean(),
+      community: z.boolean(),
+    }),
+  }),
+  pagerank: z.number(),
+  // icon: z.array(z.instanceof(File)),
+});

web/src/pages/dataset/setting/general-form.tsx

   const { t } = useTranslation();
 
   return (
-    <FormContainer className="space-y-2">
+    <FormContainer className="space-y-2 p-10">
       <FormField
         control={form.control}
         name="name"

web/src/pages/dataset/setting/hooks.ts

 import { useIsFetching } from '@tanstack/react-query';
 import { Form, UploadFile } from 'antd';
 import { FormInstance } from 'antd/lib';
-import pick from 'lodash/pick';
+import { pick } from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { formSchema } from './form-schema';
 
 export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
   const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge();
   return knowledgeDetails.chunk_num > 0;
 }
 
-export const useFetchKnowledgeConfigurationOnMount = (form: UseFormReturn) => {
+export const useFetchKnowledgeConfigurationOnMount = (
+  form: UseFormReturn<z.infer<typeof formSchema>, any, undefined>,
+) => {
   const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
 
   useEffect(() => {
     const fileList: UploadFile[] = getUploadFileListFromBase64(
       knowledgeDetails.avatar,
     );
+
+    console.log('🚀 ~ useEffect ~ fileList:', fileList);
     form.reset({
       ...pick(knowledgeDetails, [
         'description',

web/src/pages/dataset/setting/index.tsx

+import { ButtonLoading } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { DocumentParserType } from '@/constants/knowledge';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import CategoryPanel from './category-panel';
 import { ChunkMethodForm } from './chunk-method-form';
+import { formSchema } from './form-schema';
 import { GeneralForm } from './general-form';
+import { useFetchKnowledgeConfigurationOnMount } from './hooks';
 
 const enum DocumentType {
   DeepDOC = 'DeepDOC',
 }
 
 export default function DatasetSettings() {
-  const formSchema = z.object({
-    name: z.string().min(1, {
-      message: 'Username must be at least 2 characters.',
-    }),
-    description: z.string().min(2, {
-      message: 'Username must be at least 2 characters.',
-    }),
-    avatar: z.instanceof(File),
-    permission: z.string(),
-    parser_id: z.string(),
-    parser_config: z.object({
-      layout_recognize: z.string(),
-      chunk_token_num: z.number(),
-      delimiter: z.string(),
-      auto_keywords: z.number(),
-      auto_questions: z.number(),
-      html4excel: z.boolean(),
-      tag_kb_ids: z.array(z.string()),
-      topn_tags: z.number(),
-      raptor: z.object({
-        use_raptor: z.boolean(),
-        prompt: z.string(),
-        max_token: z.number(),
-        threshold: z.number(),
-        max_cluster: z.number(),
-        random_seed: z.number(),
-      }),
-      graphrag: z.object({
-        use_graphrag: z.boolean(),
-        entity_types: z.array(z.string()),
-        method: z.string(),
-        resolution: z.boolean(),
-        community: z.boolean(),
-      }),
-    }),
-    pagerank: z.number(),
-    // icon: z.array(z.instanceof(File)),
-  });
-
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
     },
   });
 
+  useFetchKnowledgeConfigurationOnMount(form);
+
+  const parserId = useWatch({
+    control: form.control,
+    name: 'parser_id',
+  });
+
   async function onSubmit(data: z.infer<typeof formSchema>) {
     console.log('🚀 ~ DatasetSettings ~ data:', data);
   }
                 <ChunkMethodForm></ChunkMethodForm>
               </TabsContent>
             </Tabs>
+            <div className="text-right">
+              <ButtonLoading type="submit">Submit</ButtonLoading>
+            </div>
           </form>
         </Form>
-        <CategoryPanel chunkMethod={DocumentParserType.Naive}></CategoryPanel>
+
+        <CategoryPanel chunkMethod={parserId}></CategoryPanel>
       </div>
     </section>
   );