Feat: Add DynamicPrompt component #3221 (#8028)

### What problem does this PR solve?

Feat: Add DynamicPrompt component #3221

### Type of change


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

web/src/pages/agent/form/agent-form/dynamic-prompt.tsx

@@ -0,0 +1,97 @@
+import { PromptEditor } from '@/components/prompt-editor';
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export enum PromptRole {
+  User = 'user',
+  Assistant = 'assistant',
+}
+
+const options = [
+  { label: 'User', value: PromptRole.User },
+  { label: 'Assistant', value: PromptRole.Assistant },
+];
+
+const DynamicPrompt = () => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = 'prompts';
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex">
+            <div className="space-y-2 flex-1">
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.role`}
+                render={({ field }) => (
+                  <FormItem className="w-1/3">
+                    <FormLabel />
+                    <FormControl>
+                      <RAGFlowSelect
+                        {...field}
+                        options={options}
+                      ></RAGFlowSelect>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.content`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <section>
+                        <PromptEditor
+                          {...field}
+                          showToolbar={false}
+                        ></PromptEditor>
+                      </section>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Button
+              type="button"
+              variant={'ghost'}
+              onClick={() => remove(index)}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <FormMessage />
+      <BlockButton
+        onClick={() => append({ content: '', role: PromptRole.User })}
+      >
+        Add
+      </BlockButton>
+    </FormItem>
+  );
+};
+
+export default memo(DynamicPrompt);

web/src/pages/agent/form/agent-form/index.tsx

@@ -1,15 +1,25 @@
 import { FormContainer } from '@/components/form-container';
 import { LargeModelFormField } from '@/components/large-model-form-field';
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
+import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
 import { PromptEditor } from '@/components/prompt-editor';
-import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { useFetchModelId } from '@/hooks/logic-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { initialAgentValues } from '../../constant';
 import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
+import DynamicPrompt from './dynamic-prompt';
 
 const FormSchema = z.object({
   sys_prompt: z.string(),
@@ -22,7 +32,6 @@ const FormSchema = z.object({
     )
     .optional(),
   message_history_window_size: z.coerce.number(),
-  ...LlmSettingSchema,
   tools: z
     .array(
       z.object({
@@ -30,17 +39,24 @@ const FormSchema = z.object({
       }),
     )
     .optional(),
+  ...LlmSettingSchema,
 });
 
 const AgentForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
-  const defaultValues = useFormValues(initialAgentValues, node);
+  const llmId = useFetchModelId();
+  const defaultValues = useFormValues(
+    { ...initialAgentValues, llm_id: llmId },
+    node,
+  );
 
   const form = useForm({
     defaultValues: defaultValues,
     resolver: zodResolver(FormSchema),
   });
 
+  useWatchFormChange(node?.id, form);
+
   return (
     <Form {...form}>
       <form
@@ -56,15 +72,21 @@ const AgentForm = ({ node }: INextOperatorForm) => {
             name={`sys_prompt`}
             render={({ field }) => (
               <FormItem className="flex-1">
+                <FormLabel>Prompt</FormLabel>
                 <FormControl>
                   <PromptEditor
                     {...field}
                     placeholder={t('flow.messagePlaceholder')}
+                    showToolbar={false}
                   ></PromptEditor>
                 </FormControl>
               </FormItem>
             )}
           />
+          <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+        </FormContainer>
+        <FormContainer>
+          <DynamicPrompt></DynamicPrompt>
         </FormContainer>
       </form>
     </Form>

web/src/pages/agent/form/begin-form/index.tsx

@@ -20,12 +20,12 @@ import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { AgentDialogueMode } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
 import { ParameterDialog } from './parameter-dialog';
 import { QueryTable } from './query-table';
 import { useEditQueryRecord } from './use-edit-query';
 import { useValues } from './use-values';
-import { useWatchFormChange } from './use-watch-change';
 
 const ModeOptions = buildSelectOptions([
   AgentDialogueMode.Conversational,

web/src/pages/agent/form/begin-form/use-watch-change.ts

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { UseFormReturn, useWatch } from 'react-hook-form';
-import useGraphStore from '../../store';
-
-export function useWatchFormChange(id?: string, form?: UseFormReturn) {
-  let values = useWatch({ control: form?.control });
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  useEffect(() => {
-    // Manually triggered form updates are synchronized to the canvas
-    if (id && form?.formState.isDirty) {
-      values = form?.getValues();
-      let nextValues: any = values;
-
-      updateNodeForm(id, nextValues);
-    }
-  }, [form?.formState.isDirty, id, updateNodeForm, values]);
-}

web/src/pages/agent/hooks.tsx

@@ -146,7 +146,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.IterationStart]: initialIterationValues,
       [Operator.Code]: initialCodeValues,
       [Operator.WaitingDialogue]: initialWaitingDialogueValues,
-      [Operator.Agent]: initialAgentValues,
+      [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
     };
   }, [llmId]);
 

web/src/pages/agent/hooks/use-watch-form-change.ts

@@ -149,3 +149,18 @@ export const useHandleFormValuesChange = (
 
   return { handleValuesChange };
 };
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}