Feat: Bind options to the parser operator form. #9869 (#10069)

### What problem does this PR solve?

Feat: Bind options to the parser operator form. #9869

### Type of change


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

web/src/components/cross-language-form-field.tsx

@@ -30,11 +30,13 @@ const options = Languages.map((x) => ({
 type CrossLanguageItemProps = {
   name?: string;
   vertical?: boolean;
+  label?: string;
 };
 
 export const CrossLanguageFormField = ({
   name = 'prompt_config.cross_languages',
   vertical = true,
+  label,
 }: CrossLanguageItemProps) => {
   const { t } = useTranslation();
   const form = useFormContext();
@@ -53,7 +55,7 @@ export const CrossLanguageFormField = ({
           })}
         >
           <FormLabel tooltip={t('chat.crossLanguageTip')}>
-            {t('chat.crossLanguage')}
+            {label || t('chat.crossLanguage')}
           </FormLabel>
           <FormControl>
             <MultiSelect

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

@@ -1,6 +1,7 @@
 import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
+import { cn } from '@/lib/utils';
 import { camelCase } from 'lodash';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -18,7 +19,13 @@ export const enum DocumentType {
   PlainText = 'Plain Text',
 }
 
-export function LayoutRecognizeFormField() {
+export function LayoutRecognizeFormField({
+  name = 'parser_config.layout_recognize',
+  horizontal = true,
+}: {
+  name?: string;
+  horizontal?: boolean;
+}) {
   const form = useFormContext();
 
   const { t } = useTranslate('knowledgeDetails');
@@ -53,33 +60,32 @@ export function LayoutRecognizeFormField() {
   return (
     <FormField
       control={form.control}
-      name="parser_config.layout_recognize"
+      name={name}
       render={({ field }) => {
-        if (typeof field.value === 'undefined') {
-          // default value set
-          form.setValue(
-            'parser_config.layout_recognize',
-            form.formState.defaultValues?.parser_config?.layout_recognize ??
-              'DeepDOC',
-          );
-        }
         return (
-          <FormItem className=" items-center space-y-0 ">
-            <div className="flex items-center">
+          <FormItem className={'items-center space-y-0 '}>
+            <div
+              className={cn('flex', {
+                'flex-col ': !horizontal,
+                'items-center': horizontal,
+              })}
+            >
               <FormLabel
                 tooltip={t('layoutRecognizeTip')}
-                className="text-sm text-muted-foreground whitespace-wrap w-1/4"
+                className={cn('text-sm text-muted-foreground whitespace-wrap', {
+                  ['w-1/4']: horizontal,
+                })}
               >
                 {t('layoutRecognize')}
               </FormLabel>
-              <div className="w-3/4">
+              <div className={horizontal ? 'w-3/4' : 'w-full'}>
                 <FormControl>
                   <RAGFlowSelect {...field} options={options}></RAGFlowSelect>
                 </FormControl>
               </div>
             </div>
             <div className="flex pt-1">
-              <div className="w-1/4"></div>
+              <div className={horizontal ? 'w-1/4' : 'w-full'}></div>
               <FormMessage />
             </div>
           </FormItem>