Feat: Convert the prompt field of the agent operator to an array #3221 (#8137)

### What problem does this PR solve?

Feat: Convert the prompt field of the agent operator to an array #3221

### Type of change


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

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

@@ -2,6 +2,7 @@ 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 { BlockButton } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -9,30 +10,29 @@ import {
   FormItem,
   FormLabel,
 } from '@/components/ui/form';
-import { useFetchModelId } from '@/hooks/logic-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMemo } from 'react';
 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 { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
-import DynamicPrompt from './dynamic-prompt';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
   sys_prompt: z.string(),
-  prompts: z
-    .array(
-      z.object({
-        role: z.string(),
-        content: z.string(),
-      }),
-    )
-    .optional(),
+  prompts: z.string().optional(),
+  // prompts: z
+  //   .array(
+  //     z.object({
+  //       role: z.string(),
+  //       content: z.string(),
+  //     }),
+  //   )
+  //   .optional(),
   message_history_window_size: z.coerce.number(),
   tools: z
     .array(
@@ -46,11 +46,8 @@ const FormSchema = z.object({
 
 const AgentForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
-  const llmId = useFetchModelId();
-  const defaultValues = useFormValues(
-    { ...initialAgentValues, llm_id: llmId },
-    node,
-  );
+
+  const defaultValues = useValues(node);
 
   const outputList = useMemo(() => {
     return [
@@ -94,8 +91,22 @@ const AgentForm = ({ node }: INextOperatorForm) => {
           <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
         </FormContainer>
         <FormContainer>
-          <DynamicPrompt></DynamicPrompt>
+          {/* <DynamicPrompt></DynamicPrompt> */}
+          <FormField
+            control={form.control}
+            name={`prompts`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <section>
+                    <PromptEditor {...field} showToolbar={false}></PromptEditor>
+                  </section>
+                </FormControl>
+              </FormItem>
+            )}
+          />
         </FormContainer>
+        <BlockButton>Add Agent</BlockButton>
         <Output list={outputList}></Output>
       </form>
     </Form>