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/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>