Fix: Added table of contents extraction functionality and optimized form item layout #9869 (#10492)

### What problem does this PR solve?

Fix: Added table of contents extraction functionality and optimized form
item layout #9869

- Added `EnableTocToggle` component to toggle table of contents
extraction on and off
- Added multiple parser configuration components (such as naive, book,
laws, etc.), displaying different parser components based on built-in
slicing methods

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -0,0 +1,64 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import { DocumentParserType } from '@/constants/knowledge';
+import { useMemo } from 'react';
+import { AudioConfiguration } from './configuration/audio';
+import { BookConfiguration } from './configuration/book';
+import { EmailConfiguration } from './configuration/email';
+import { KnowledgeGraphConfiguration } from './configuration/knowledge-graph';
+import { LawsConfiguration } from './configuration/laws';
+import { ManualConfiguration } from './configuration/manual';
+import { NaiveConfiguration } from './configuration/naive';
+import { OneConfiguration } from './configuration/one';
+import { PaperConfiguration } from './configuration/paper';
+import { PictureConfiguration } from './configuration/picture';
+import { PresentationConfiguration } from './configuration/presentation';
+import { QAConfiguration } from './configuration/qa';
+import { ResumeConfiguration } from './configuration/resume';
+import { TableConfiguration } from './configuration/table';
+import { TagConfiguration } from './configuration/tag';
+
+const ConfigurationComponentMap = {
+  [DocumentParserType.Naive]: NaiveConfiguration,
+  [DocumentParserType.Qa]: QAConfiguration,
+  [DocumentParserType.Resume]: ResumeConfiguration,
+  [DocumentParserType.Manual]: ManualConfiguration,
+  [DocumentParserType.Table]: TableConfiguration,
+  [DocumentParserType.Paper]: PaperConfiguration,
+  [DocumentParserType.Book]: BookConfiguration,
+  [DocumentParserType.Laws]: LawsConfiguration,
+  [DocumentParserType.Presentation]: PresentationConfiguration,
+  [DocumentParserType.Picture]: PictureConfiguration,
+  [DocumentParserType.One]: OneConfiguration,
+  [DocumentParserType.Audio]: AudioConfiguration,
+  [DocumentParserType.Email]: EmailConfiguration,
+  [DocumentParserType.Tag]: TagConfiguration,
+  [DocumentParserType.KnowledgeGraph]: KnowledgeGraphConfiguration,
+};
+
+function EmptyComponent() {
+  return <div></div>;
+}
+
+export function ChunkMethodForm() {
+  const form = useFormContext();
+
+  const finalParserId: DocumentParserType = useWatch({
+    control: form.control,
+    name: 'parser_id',
+  });
+
+  const ConfigurationComponent = useMemo(() => {
+    return finalParserId
+      ? ConfigurationComponentMap[finalParserId]
+      : EmptyComponent;
+  }, [finalParserId]);
+
+  return (
+    <section className="h-full flex flex-col">
+      <div className="overflow-auto flex-1 min-h-0">
+        <ConfigurationComponent></ConfigurationComponent>
+      </div>
+    </section>
+  );
+}