Refactor: Datasets UI #3221 (#8349)

### What problem does this PR solve?

Refactor Datasets UI #3221.
### Type of change

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

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

@@ -58,17 +58,27 @@ export function UseGraphRagFormField() {
       control={form.control}
       name="parser_config.graphrag.use_graphrag"
       render={({ field }) => (
-        <FormItem defaultChecked={false}>
-          <FormLabel tooltip={t('useGraphRagTip')}>
-            {t('useGraphRag')}
-          </FormLabel>
-          <FormControl>
-            <Switch
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            ></Switch>
-          </FormControl>
-          <FormMessage />
+        <FormItem defaultChecked={false} className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              tooltip={t('useGraphRagTip')}
+              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+            >
+              {t('useGraphRag')}
+            </FormLabel>
+            <div className="w-3/4">
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                ></Switch>
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
         </FormItem>
       )}
     />
@@ -112,25 +122,33 @@ const GraphRagItems = ({
             control={form.control}
             name="parser_config.graphrag.method"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel
-                  tooltip={renderWideTooltip(
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: t('graphRagMethodTip'),
-                      }}
-                    ></div>,
-                  )}
-                >
-                  {t('graphRagMethod')}
-                </FormLabel>
-                <FormControl>
-                  <RAGFlowSelect
-                    {...field}
-                    options={methodOptions}
-                  ></RAGFlowSelect>
-                </FormControl>
-                <FormMessage />
+              <FormItem className=" items-center space-y-0 ">
+                <div className="flex items-center">
+                  <FormLabel
+                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                    tooltip={renderWideTooltip(
+                      <div
+                        dangerouslySetInnerHTML={{
+                          __html: t('graphRagMethodTip'),
+                        }}
+                      ></div>,
+                    )}
+                  >
+                    {t('graphRagMethod')}
+                  </FormLabel>
+                  <div className="w-3/4">
+                    <FormControl>
+                      <RAGFlowSelect
+                        {...field}
+                        options={methodOptions}
+                      ></RAGFlowSelect>
+                    </FormControl>
+                  </div>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
               </FormItem>
             )}
           />
@@ -139,17 +157,27 @@ const GraphRagItems = ({
             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 className=" items-center space-y-0 ">
+                <div className="flex items-center">
+                  <FormLabel
+                    tooltip={renderWideTooltip('resolutionTip')}
+                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                  >
+                    {t('resolution')}
+                  </FormLabel>
+                  <div className="w-3/4">
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      ></Switch>
+                    </FormControl>
+                  </div>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
               </FormItem>
             )}
           />
@@ -158,17 +186,27 @@ const GraphRagItems = ({
             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 className=" items-center space-y-0 ">
+                <div className="flex items-center">
+                  <FormLabel
+                    tooltip={renderWideTooltip('communityTip')}
+                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                  >
+                    {t('community')}
+                  </FormLabel>
+                  <div className="w-3/4">
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      ></Switch>
+                    </FormControl>
+                  </div>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
               </FormItem>
             )}
           />

web/src/components/parse-configuration/raptor-form-fields-old.tsx

@@ -0,0 +1,146 @@
+import { DocumentParserType } from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/common-hooks';
+import random from 'lodash/random';
+import { Plus } from 'lucide-react';
+import { useCallback } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { SliderInputFormField } from '../slider-input-form-field';
+import { Button } from '../ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Input } from '../ui/input';
+import { Switch } from '../ui/switch';
+import { Textarea } from '../ui/textarea';
+
+export const excludedParseMethods = [
+  DocumentParserType.Table,
+  DocumentParserType.Resume,
+  DocumentParserType.One,
+  DocumentParserType.Picture,
+  DocumentParserType.KnowledgeGraph,
+  DocumentParserType.Qa,
+  DocumentParserType.Tag,
+];
+
+export const showRaptorParseConfiguration = (
+  parserId: DocumentParserType | undefined,
+) => {
+  return !excludedParseMethods.some((x) => x === parserId);
+};
+
+export const excludedTagParseMethods = [
+  DocumentParserType.Table,
+  DocumentParserType.KnowledgeGraph,
+  DocumentParserType.Tag,
+];
+
+export const showTagItems = (parserId: DocumentParserType) => {
+  return !excludedTagParseMethods.includes(parserId);
+};
+
+const UseRaptorField = 'parser_config.raptor.use_raptor';
+const RandomSeedField = 'parser_config.raptor.random_seed';
+
+// The three types "table", "resume" and "one" do not display this configuration.
+
+const RaptorFormFields = () => {
+  const form = useFormContext();
+  const { t } = useTranslate('knowledgeConfiguration');
+  const useRaptor = useWatch({ name: UseRaptorField });
+
+  const handleGenerate = useCallback(() => {
+    form.setValue(RandomSeedField, random(10000));
+  }, [form]);
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name={UseRaptorField}
+        render={({ field }) => (
+          <FormItem defaultChecked={false}>
+            <FormLabel tooltip={t('useRaptorTip')}>{t('useRaptor')}</FormLabel>
+            <FormControl>
+              <Switch
+                checked={field.value}
+                onCheckedChange={field.onChange}
+              ></Switch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {useRaptor && (
+        <div className="space-y-3">
+          <FormField
+            control={form.control}
+            name={'parser_config.raptor.prompt'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={t('promptTip')}>{t('prompt')}</FormLabel>
+                <FormControl>
+                  <Textarea {...field} rows={8} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <SliderInputFormField
+            name={'parser_config.raptor.max_token'}
+            label={t('maxToken')}
+            tooltip={t('maxTokenTip')}
+            defaultValue={256}
+            max={2048}
+            min={0}
+          ></SliderInputFormField>
+          <SliderInputFormField
+            name={'parser_config.raptor.threshold'}
+            label={t('threshold')}
+            tooltip={t('thresholdTip')}
+            defaultValue={0.1}
+            step={0.01}
+            max={1}
+            min={0}
+          ></SliderInputFormField>
+          <SliderInputFormField
+            name={'parser_config.raptor.max_cluster'}
+            label={t('maxCluster')}
+            tooltip={t('maxClusterTip')}
+            defaultValue={64}
+            max={1024}
+            min={1}
+          ></SliderInputFormField>
+          <FormField
+            control={form.control}
+            name={'parser_config.raptor.random_seed'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('randomSeed')}</FormLabel>
+                <FormControl defaultValue={0}>
+                  <div className="flex gap-4">
+                    <Input {...field} />
+                    <Button
+                      size={'sm'}
+                      onClick={handleGenerate}
+                      type={'button'}
+                    >
+                      <Plus />
+                    </Button>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default RaptorFormFields;

web/src/components/parse-configuration/raptor-form-fields.tsx

@@ -62,18 +62,39 @@ const RaptorFormFields = () => {
       <FormField
         control={form.control}
         name={UseRaptorField}
-        render={({ field }) => (
-          <FormItem defaultChecked={false}>
-            <FormLabel tooltip={t('useRaptorTip')}>{t('useRaptor')}</FormLabel>
-            <FormControl>
-              <Switch
-                checked={field.value}
-                onCheckedChange={field.onChange}
-              ></Switch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
+        render={({ field }) => {
+          if (typeof field.value === 'undefined') {
+            // default value set
+            form.setValue('parser_config.raptor.use_raptor', false);
+          }
+          return (
+            <FormItem
+              defaultChecked={false}
+              className="items-center space-y-0 "
+            >
+              <div className="flex items-center">
+                <FormLabel
+                  tooltip={t('useRaptorTip')}
+                  className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                >
+                  {t('useRaptor')}
+                </FormLabel>
+                <div className="w-3/4">
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    ></Switch>
+                  </FormControl>
+                </div>
+              </div>
+              <div className="flex pt-1">
+                <div className="w-1/4"></div>
+                <FormMessage />
+              </div>
+            </FormItem>
+          );
+        }}
       />
       {useRaptor && (
         <div className="space-y-3">
@@ -81,12 +102,24 @@ const RaptorFormFields = () => {
             control={form.control}
             name={'parser_config.raptor.prompt'}
             render={({ field }) => (
-              <FormItem>
-                <FormLabel tooltip={t('promptTip')}>{t('prompt')}</FormLabel>
-                <FormControl>
-                  <Textarea {...field} rows={8} />
-                </FormControl>
-                <FormMessage />
+              <FormItem className=" items-center space-y-0 ">
+                <div className="flex items-start">
+                  <FormLabel
+                    tooltip={t('promptTip')}
+                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                  >
+                    {t('prompt')}
+                  </FormLabel>
+                  <div className="w-3/4">
+                    <FormControl>
+                      <Textarea {...field} rows={8} />
+                    </FormControl>
+                  </div>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
               </FormItem>
             )}
           />
@@ -119,21 +152,30 @@ const RaptorFormFields = () => {
             control={form.control}
             name={'parser_config.raptor.random_seed'}
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('randomSeed')}</FormLabel>
-                <FormControl defaultValue={0}>
-                  <div className="flex gap-4">
-                    <Input {...field} />
-                    <Button
-                      size={'sm'}
-                      onClick={handleGenerate}
-                      type={'button'}
-                    >
-                      <Plus />
-                    </Button>
+              <FormItem className=" items-center space-y-0 ">
+                <div className="flex items-center">
+                  <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                    {t('randomSeed')}
+                  </FormLabel>
+                  <div className="w-3/4">
+                    <FormControl defaultValue={0}>
+                      <div className="flex gap-4">
+                        <Input {...field} />
+                        <Button
+                          size={'sm'}
+                          onClick={handleGenerate}
+                          type={'button'}
+                        >
+                          <Plus />
+                        </Button>
+                      </div>
+                    </FormControl>
                   </div>
-                </FormControl>
-                <FormMessage />
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
               </FormItem>
             )}
           />