Fix: Optimize dataset page layout and internationalization and default values for multi selection #3221 (#9695)

### What problem does this PR solve?

Fix: Optimize dataset page layout and internationalization and Fix
setting default values for multi selection drop-down boxes #3221

-Adjust the style and layout of each component on the dataset page
-Add and update multilingual translation content

### Type of change

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

web/src/components/layout-recognize-form-field.tsx

@@ -68,7 +68,7 @@ export function LayoutRecognizeFormField() {
             <div className="flex items-center">
               <FormLabel
                 tooltip={t('layoutRecognizeTip')}
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                className="text-sm text-muted-foreground whitespace-wrap w-1/4"
               >
                 {t('layoutRecognize')}
               </FormLabel>

web/src/components/originui/select-with-search.tsx

@@ -28,6 +28,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { RAGFlowSelectOptionType } from '../ui/select';
 import { Separator } from '../ui/separator';
 
@@ -114,7 +115,9 @@ export const SelectWithSearch = forwardRef<
                 <span className="leading-none truncate">{selectLabel}</span>
               </span>
             ) : (
-              <span className="text-muted-foreground">Select value</span>
+              <span className="text-muted-foreground">
+                {t('common.selectPlaceholder')}
+              </span>
             )}
             <div className="flex items-center justify-between">
               {value && allowClear && (

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

@@ -3,7 +3,7 @@ import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import random from 'lodash/random';
 import { Plus } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { SliderInputFormField } from '../slider-input-form-field';
 import { Button } from '../ui/button';
@@ -57,15 +57,19 @@ const RaptorFormFields = () => {
   const form = useFormContext();
   const { t } = useTranslate('knowledgeConfiguration');
   const useRaptor = useWatch({ name: UseRaptorField });
-  useEffect(() => {
-    if (useRaptor) {
-      form.setValue(MaxTokenField, 256);
-      form.setValue(ThresholdField, 0.1);
-      form.setValue(MaxCluster, 64);
-      form.setValue(RandomSeedField, 0);
-      form.setValue(Prompt, t('promptText'));
-    }
-  }, [form, useRaptor, t]);
+
+  const changeRaptor = useCallback(
+    (isUseRaptor: boolean) => {
+      if (isUseRaptor) {
+        form.setValue(MaxTokenField, 256);
+        form.setValue(ThresholdField, 0.1);
+        form.setValue(MaxCluster, 64);
+        form.setValue(RandomSeedField, 0);
+        form.setValue(Prompt, t('promptText'));
+      }
+    },
+    [form],
+  );
 
   const handleGenerate = useCallback(() => {
     form.setValue(RandomSeedField, random(10000));
@@ -97,7 +101,10 @@ const RaptorFormFields = () => {
                   <FormControl>
                     <Switch
                       checked={field.value}
-                      onCheckedChange={field.onChange}
+                      onCheckedChange={(e) => {
+                        changeRaptor(e);
+                        field.onChange(e);
+                      }}
                     ></Switch>
                   </FormControl>
                 </div>
@@ -127,7 +134,13 @@ const RaptorFormFields = () => {
                     </FormLabel>
                     <div className="w-3/4">
                       <FormControl>
-                        <Textarea {...field} rows={8} />
+                        <Textarea
+                          {...field}
+                          rows={8}
+                          onChange={(e) => {
+                            field.onChange(e?.target?.value);
+                          }}
+                        />
                       </FormControl>
                     </div>
                   </div>

web/src/components/ui/multi-select.tsx

@@ -209,10 +209,16 @@ export const MultiSelect = React.forwardRef<
     const [isAnimating, setIsAnimating] = React.useState(false);
 
     React.useEffect(() => {
-      if (selectedValues === undefined) {
+      if (!selectedValues && props.value) {
+        setSelectedValues(props.value as string[]);
+      }
+    }, [props.value, selectedValues]);
+
+    React.useEffect(() => {
+      if (!selectedValues && !props.value && defaultValue) {
         setSelectedValues(defaultValue);
       }
-    }, [defaultValue, selectedValues]);
+    }, [defaultValue, props.value, selectedValues]);
 
     const flatOptions = React.useMemo(() => {
       return options.flatMap((option) =>
@@ -293,15 +299,18 @@ export const MultiSelect = React.forwardRef<
                         variant="secondary"
                         className={cn(
                           isAnimating ? 'animate-bounce' : '',
+                          'px-1',
                           multiSelectVariants({ variant }),
                         )}
                         style={{ animationDuration: `${animation}s` }}
                       >
-                        <div className="flex items-center gap-1">
+                        <div className="flex justify-between items-center gap-1">
                           {IconComponent && (
                             <IconComponent className="h-4 w-4" />
                           )}
-                          <div>{option?.label}</div>
+                          <div className="max-w-28 text-ellipsis overflow-hidden">
+                            {option?.label}
+                          </div>
                           <XCircle
                             className="h-4 w-4 cursor-pointer"
                             onClick={(event) => {