Fix: Fixed the issue of retrieval operator text overlapping #3221 (#8652)

### What problem does this PR solve?

Fix: Fixed the issue of retrieval operator text overlapping #3221

### Type of change

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

web/src/components/auto-keywords-form-field.tsx

@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { useTranslate } from '@/hooks/common-hooks';
 import { SliderInputFormField } from './slider-input-form-field';
 
@@ -11,6 +12,7 @@ export function AutoKeywordsFormField() {
       max={30}
       min={0}
       tooltip={t('autoKeywordsTip')}
+      layout={FormLayout.Horizontal}
     ></SliderInputFormField>
   );
 }
@@ -25,6 +27,7 @@ export function AutoQuestionsFormField() {
       max={10}
       min={0}
       tooltip={t('autoQuestionsTip')}
+      layout={FormLayout.Horizontal}
     ></SliderInputFormField>
   );
 }

web/src/components/max-token-number-from-field.tsx

@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { useTranslate } from '@/hooks/common-hooks';
 import { SliderInputFormField } from './slider-input-form-field';
 
@@ -14,6 +15,7 @@ export function MaxTokenNumberFormField({ max = 2048 }: IProps) {
       name={'parser_config.chunk_token_num'}
       label={t('chunkTokenNumber')}
       max={max}
+      layout={FormLayout.Horizontal}
     ></SliderInputFormField>
   );
 }

web/src/components/page-rank-form-field.tsx

@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { useTranslate } from '@/hooks/common-hooks';
 import { SliderInputFormField } from './slider-input-form-field';
 
@@ -12,6 +13,7 @@ export function PageRankFormField() {
       defaultValue={0}
       max={100}
       min={0}
+      layout={FormLayout.Horizontal}
     ></SliderInputFormField>
   );
 }

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

@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import random from 'lodash/random';
@@ -130,6 +131,7 @@ const RaptorFormFields = () => {
             defaultValue={256}
             max={2048}
             min={0}
+            layout={FormLayout.Horizontal}
           ></SliderInputFormField>
           <SliderInputFormField
             name={'parser_config.raptor.threshold'}
@@ -139,6 +141,7 @@ const RaptorFormFields = () => {
             step={0.01}
             max={1}
             min={0}
+            layout={FormLayout.Horizontal}
           ></SliderInputFormField>
           <SliderInputFormField
             name={'parser_config.raptor.max_cluster'}
@@ -147,6 +150,7 @@ const RaptorFormFields = () => {
             defaultValue={64}
             max={1024}
             min={1}
+            layout={FormLayout.Horizontal}
           ></SliderInputFormField>
           <FormField
             control={form.control}

web/src/components/slider-input-form-field.tsx

@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { cn } from '@/lib/utils';
 import { ReactNode } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -11,6 +12,10 @@ import {
 } from './ui/form';
 import { Input } from './ui/input';
 
+export type FormLayoutType = {
+  layout?: FormLayout;
+};
+
 type SliderInputFormFieldProps = {
   max?: number;
   min?: number;
@@ -20,7 +25,7 @@ type SliderInputFormFieldProps = {
   tooltip?: ReactNode;
   defaultValue?: number;
   className?: string;
-};
+} & FormLayoutType;
 
 export function SliderInputFormField({
   max,
@@ -31,57 +36,63 @@ export function SliderInputFormField({
   tooltip,
   defaultValue,
   className,
+  layout = FormLayout.Vertical,
 }: SliderInputFormFieldProps) {
   const form = useFormContext();
 
+  const isHorizontal = layout === FormLayout.Horizontal;
+
   return (
     <FormField
       control={form.control}
       name={name}
       defaultValue={defaultValue || 0}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="flex items-center">
-            <FormLabel
-              tooltip={tooltip}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
-            >
-              {label}
-            </FormLabel>
-            <div
-              className={cn(
-                'flex items-center gap-14 justify-between',
-                'w-3/4',
-                className,
-              )}
-            >
-              <FormControl>
-                <SingleFormSlider
-                  {...field}
-                  max={max}
-                  min={min}
-                  step={step}
-                  // defaultValue={
-                  //   typeof defaultValue === 'number' ? [defaultValue] : undefined
-                  // }
-                ></SingleFormSlider>
-              </FormControl>
-              <FormControl>
-                <Input
-                  type={'number'}
-                  className="h-7 w-20"
-                  max={max}
-                  min={min}
-                  step={step}
-                  {...field}
-                  onChange={(ev) => {
-                    const value = ev.target.value;
-                    field.onChange(value === '' ? 0 : Number(value)); // convert to number
-                  }}
-                  // defaultValue={defaultValue}
-                ></Input>
-              </FormControl>
-            </div>
+        <FormItem
+          className={cn({ 'flex items-center space-y-0': isHorizontal })}
+        >
+          <FormLabel
+            tooltip={tooltip}
+            className={cn({
+              'text-sm text-muted-foreground whitespace-nowrap w-1/4':
+                isHorizontal,
+            })}
+          >
+            {label}
+          </FormLabel>
+          <div
+            className={cn(
+              'flex items-center gap-14 justify-between',
+              { 'w-3/4': isHorizontal },
+              className,
+            )}
+          >
+            <FormControl>
+              <SingleFormSlider
+                {...field}
+                max={max}
+                min={min}
+                step={step}
+                // defaultValue={
+                //   typeof defaultValue === 'number' ? [defaultValue] : undefined
+                // }
+              ></SingleFormSlider>
+            </FormControl>
+            <FormControl>
+              <Input
+                type={'number'}
+                className="h-7 w-20"
+                max={max}
+                min={min}
+                step={step}
+                {...field}
+                onChange={(ev) => {
+                  const value = ev.target.value;
+                  field.onChange(value === '' ? 0 : Number(value)); // convert to number
+                }}
+                // defaultValue={defaultValue}
+              ></Input>
+            </FormControl>
           </div>
           <FormMessage />
         </FormItem>