Feat: Add data set configuration form #3221 (#7646)

### What problem does this PR solve?

Feat: Add data set configuration form #3221

### Type of change


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

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

@@ -1,12 +1,11 @@
 import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
-import { Switch as AntSwitch, Form, Select } from 'antd';
 import { upperFirst } from 'lodash';
 import { useCallback, useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { DatasetConfigurationContainer } from '../dataset-configuration-container';
-import EntityTypesItem from '../entity-types-item';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { EntityTypesFormField } from '../entity-types-form-field';
+import { FormContainer } from '../form-container';
 import {
   FormControl,
   FormField,
@@ -14,6 +13,7 @@ import {
   FormLabel,
   FormMessage,
 } from '../ui/form';
+import { RAGFlowSelect } from '../ui/select';
 import { Switch } from '../ui/switch';
 
 const excludedTagParseMethods = [
@@ -48,22 +48,6 @@ type GraphRagItemsProps = {
   marginBottom?: boolean;
 };
 
-export function UseGraphRagItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-
-  return (
-    <Form.Item
-      name={['parser_config', 'graphrag', 'use_graphrag']}
-      label={t('useGraphRag')}
-      initialValue={false}
-      valuePropName="checked"
-      tooltip={t('useGraphRagTip')}
-    >
-      <AntSwitch />
-    </Form.Item>
-  );
-}
-
 export function UseGraphRagFormField() {
   const form = useFormContext();
   const { t } = useTranslate('knowledgeConfiguration');
@@ -93,6 +77,12 @@ export function UseGraphRagFormField() {
 // The three types "table", "resume" and "one" do not display this configuration.
 const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  const useRaptor = useWatch({
+    control: form.control,
+    name: 'parser_config.graphrag.use_graphrag',
+  });
 
   const methodOptions = useMemo(() => {
     return [MethodValue.Light, MethodValue.General].map((x) => ({
@@ -103,39 +93,23 @@ const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
 
   const renderWideTooltip = useCallback(
     (title: React.ReactNode | string) => {
-      return {
-        title: typeof title === 'string' ? t(title) : title,
-        overlayInnerStyle: { width: '32vw' },
-      };
+      return typeof title === 'string' ? t(title) : title;
     },
     [t],
   );
 
   return (
-    <DatasetConfigurationContainer className={cn({ 'mb-4': marginBottom })}>
-      <UseGraphRagItem></UseGraphRagItem>
-      <Form.Item
-        shouldUpdate={(prevValues, curValues) =>
-          prevValues.parser_config.graphrag.use_graphrag !==
-          curValues.parser_config.graphrag.use_graphrag
-        }
-      >
-        {({ getFieldValue }) => {
-          const useRaptor = getFieldValue([
-            'parser_config',
-            'graphrag',
-            'use_graphrag',
-          ]);
-
-          return (
-            useRaptor && (
-              <>
-                <EntityTypesItem
-                  field={['parser_config', 'graphrag', 'entity_types']}
-                ></EntityTypesItem>
-                <Form.Item
-                  name={['parser_config', 'graphrag', 'method']}
-                  label={t('graphRagMethod')}
+    <FormContainer className={cn({ 'mb-4': marginBottom })}>
+      <UseGraphRagFormField></UseGraphRagFormField>
+      {useRaptor && (
+        <>
+          <EntityTypesFormField name="parser_config.graphrag.entity_types"></EntityTypesFormField>
+          <FormField
+            control={form.control}
+            name="parser_config.graphrag.method"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel
                   tooltip={renderWideTooltip(
                     <div
                       dangerouslySetInnerHTML={{
@@ -143,30 +117,60 @@ const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
                       }}
                     ></div>,
                   )}
-                  initialValue={MethodValue.Light}
                 >
-                  <Select options={methodOptions} />
-                </Form.Item>
-                <Form.Item
-                  name={['parser_config', 'graphrag', 'resolution']}
-                  label={t('resolution')}
-                  tooltip={renderWideTooltip('resolutionTip')}
-                >
-                  <AntSwitch />
-                </Form.Item>
-                <Form.Item
-                  name={['parser_config', 'graphrag', 'community']}
-                  label={t('community')}
-                  tooltip={renderWideTooltip('communityTip')}
-                >
-                  <AntSwitch />
-                </Form.Item>
-              </>
-            )
-          );
-        }}
-      </Form.Item>
-    </DatasetConfigurationContainer>
+                  {t('graphRagMethod')}
+                </FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    {...field}
+                    options={methodOptions}
+                  ></RAGFlowSelect>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="parser_config.graphrag.resolution"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={renderWideTooltip('resolutionTip')}>
+                  {t('resolution')}
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="parser_config.graphrag.community"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={renderWideTooltip('communityTip')}>
+                  {t('community')}
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </>
+      )}
+    </FormContainer>
   );
 };