Feat: Change the corresponding prompt word according to the value of fieldName #9869 (#10291)

### What problem does this PR solve?

Feat: Change the corresponding prompt word according to the value of
fieldName #9869
### Type of change


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

web/src/pages/data-flow/constant.tsx

@@ -256,6 +256,23 @@ export const initialParserValues = {
       fields: Object.values(ParserFields),
       output_format: EmailOutputFormat.Text,
     },
+    {
+      fileFormat: FileType.TextMarkdown,
+      output_format: TextMarkdownOutputFormat.Text,
+    },
+    {
+      fileFormat: FileType.Docx,
+      output_format: DocxOutputFormat.Json,
+    },
+    {
+      fileFormat: FileType.PowerPoint,
+      output_format: PptOutputFormat.Json,
+    },
+    {
+      fileFormat: FileType.Audio,
+      llm_id: '',
+      output_format: AudioOutputFormat.Text,
+    },
   ],
 };
 
@@ -289,7 +306,7 @@ export const initialHierarchicalMergerValues = {
   ],
 };
 
-export const initialContextValues = {
+export const initialExtractorValues = {
   ...initialLlmBaseValues,
   field_name: ContextGeneratorFieldName.Summary,
   outputs: {},
@@ -318,6 +335,7 @@ export const RestrictedUpstreamMap = {
   [Operator.Splitter]: [Operator.Begin],
   [Operator.HierarchicalMerger]: [Operator.Begin],
   [Operator.Tokenizer]: [Operator.Begin],
+  [Operator.Extractor]: [Operator.Begin],
 };
 
 export const NodeMap = {

web/src/pages/data-flow/form/extractor-form/index.tsx

@@ -6,13 +6,13 @@ import { Form } from '@/components/ui/form';
 import { PromptEditor } from '@/pages/agent/form/components/prompt-editor';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
   ContextGeneratorFieldName,
-  initialContextValues,
+  initialExtractorValues,
 } from '../../constant';
 import { useBuildNodeOutputOptions } from '../../hooks/use-build-options';
 import { useFormValues } from '../../hooks/use-form-values';
@@ -21,27 +21,48 @@ import { INextOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 
 export const FormSchema = z.object({
+  field_name: z.string(),
   sys_prompt: z.string(),
   prompts: z.string().optional(),
   ...LlmSettingSchema,
-  field_name: z.array(z.string()),
 });
 
 export type ExtractorFormSchemaType = z.infer<typeof FormSchema>;
 
 const ExtractorForm = ({ node }: INextOperatorForm) => {
-  const defaultValues = useFormValues(initialContextValues, node);
+  const defaultValues = useFormValues(initialExtractorValues, node);
   const { t } = useTranslation();
 
   const form = useForm<ExtractorFormSchemaType>({
     defaultValues,
     resolver: zodResolver(FormSchema),
+    // mode: 'onChange',
   });
 
   const promptOptions = useBuildNodeOutputOptions(node?.id);
 
   const options = buildOptions(ContextGeneratorFieldName, t, 'dataflow');
 
+  const setPromptValue = useCallback(
+    (field: keyof ExtractorFormSchemaType, key: string, value: string) => {
+      form.setValue(field, t(`dataflow.prompts.${key}.${value}`), {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form, t],
+  );
+
+  const handleFieldNameChange = useCallback(
+    (value: string) => {
+      if (value) {
+        setPromptValue('sys_prompt', 'system', value);
+        setPromptValue('prompts', 'user', value);
+      }
+    },
+    [setPromptValue],
+  );
+
   useWatchFormChange(node?.id, form);
 
   return (
@@ -51,7 +72,11 @@ const ExtractorForm = ({ node }: INextOperatorForm) => {
         <RAGFlowFormItem label={t('dataflow.fieldName')} name="field_name">
           {(field) => (
             <SelectWithSearch
-              {...field}
+              onChange={(value) => {
+                field.onChange(value);
+                handleFieldNameChange(value);
+              }}
+              value={field.value}
               placeholder={t('dataFlowPlaceholder')}
               options={options}
             ></SelectWithSearch>

web/src/pages/data-flow/form/parser-form/index.tsx

@@ -116,7 +116,7 @@ function ParserItem({ name, index, fieldLength, remove }: ParserItemProps) {
     >
       <div className="flex justify-between items-center">
         <span className="text-text-primary text-sm font-medium">
-          Parser {index}
+          Parser {index + 1}
         </span>
         {index > 0 && (
           <Button variant={'ghost'} onClick={() => remove(index)} ref={ref}>

web/src/pages/data-flow/hooks/use-add-node.ts

@@ -9,7 +9,7 @@ import {
   NodeMap,
   Operator,
   initialBeginValues,
-  initialContextValues,
+  initialExtractorValues,
   initialHierarchicalMergerValues,
   initialNoteValues,
   initialParserValues,
@@ -24,6 +24,7 @@ import {
 
 export const useInitializeOperatorParams = () => {
   const llmId = useFetchModelId();
+  const { t } = useTranslation();
 
   const initialFormValuesMap = useMemo(() => {
     return {
@@ -33,9 +34,14 @@ export const useInitializeOperatorParams = () => {
       [Operator.Tokenizer]: initialTokenizerValues,
       [Operator.Splitter]: initialSplitterValues,
       [Operator.HierarchicalMerger]: initialHierarchicalMergerValues,
-      [Operator.Extractor]: { ...initialContextValues, llm_id: llmId },
+      [Operator.Extractor]: {
+        ...initialExtractorValues,
+        llm_id: llmId,
+        sys_prompt: t('dataflow.prompts.system.summary'),
+        prompts: t('dataflow.prompts.user.summary'),
+      },
     };
-  }, [llmId]);
+  }, [llmId, t]);
 
   const initializeOperatorParams = useCallback(
     (operatorName: Operator) => {