Feat: Refactor the MessageForm with shadcn #3221 (#7820)

### What problem does this PR solve?

Feat: Refactor the MessageForm with shadcn #3221

### Type of change


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

web/src/pages/agent/form/begin-form/begin-dynamic-options.tsx

@@ -49,11 +49,7 @@ export function BeginDynamicOptions() {
           </div>
         );
       })}
-      <BlockButton
-        onClick={() => append({ value: '' })}
-        variant={'outline'}
-        type="button"
-      >
+      <BlockButton onClick={() => append({ value: '' })} type="button">
         {t('flow.addVariable')}
       </BlockButton>
     </div>

web/src/pages/agent/form/code-form/dynamic-input-variable.tsx

@@ -1,6 +1,7 @@
+import { BlockButton } from '@/components/ui/button';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select } from 'antd';
+import { MinusCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Select } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
 import { FormCollapse } from '../components/dynamic-input-variable';
@@ -49,14 +50,9 @@ export const DynamicInputVariable = ({
               </div>
             ))}
             <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                icon={<PlusOutlined />}
-              >
+              <BlockButton onClick={() => add()}>
                 {t('flow.addVariable')}
-              </Button>
+              </BlockButton>
             </Form.Item>
           </>
         )}

web/src/pages/agent/form/code-form/next-variable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { FormContainer } from '@/components/form-container';
-import { Button } from '@/components/ui/button';
+import { BlockButton, Button } from '@/components/ui/button';
 import {
   FormControl,
   FormField,
@@ -12,7 +12,7 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { Plus, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { ReactNode } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -92,14 +92,11 @@ export function DynamicVariableForm({ node, name = 'arguments' }: IProps) {
           </div>
         );
       })}
-      <Button
+      <BlockButton
         onClick={() => append({ name: '', component_id: undefined })}
-        className="mt-4 border-dashed w-full"
-        variant={'outline'}
       >
-        <Plus />
         {t('flow.addVariable')}
-      </Button>
+      </BlockButton>
     </div>
   );
 }

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

@@ -1,4 +1,6 @@
-import { Button } from '@/components/ui/button';
+import { FormContainer } from '@/components/form-container';
+import { PromptEditor } from '@/components/prompt-editor';
+import { BlockButton, Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -7,73 +9,70 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Textarea } from '@/components/ui/textarea';
-import { PlusCircle, Trash2 } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useFieldArray } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { INextOperatorForm } from '../../interface';
 
 const MessageForm = ({ form }: INextOperatorForm) => {
   const { t } = useTranslation();
+
   const { fields, append, remove } = useFieldArray({
-    name: 'messages',
+    name: 'content',
     control: form.control,
   });
 
   return (
     <Form {...form}>
       <form
-        className="space-y-6"
+        className="space-y-5 px-5"
+        autoComplete="off"
         onSubmit={(e) => {
           e.preventDefault();
         }}
       >
-        <FormItem>
-          <FormLabel>{t('flow.msg')}</FormLabel>
-          <div className="space-y-4">
-            {fields.map((field, index) => (
-              <div key={field.id} className="flex items-start gap-2">
-                <FormField
-                  control={form.control}
-                  name={`messages.${index}`}
-                  render={({ field }) => (
-                    <FormItem className="flex-1">
-                      <FormControl>
-                        <Textarea
-                          {...field}
-                          placeholder={t('flow.messagePlaceholder')}
-                          rows={5}
-                        />
-                      </FormControl>
-                    </FormItem>
+        <FormContainer>
+          <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 items-start gap-2">
+                  <FormField
+                    control={form.control}
+                    name={`content.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem className="flex-1">
+                        <FormControl>
+                          <PromptEditor
+                            {...field}
+                            placeholder={t('flow.messagePlaceholder')}
+                          ></PromptEditor>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  {fields.length > 1 && (
+                    <Button
+                      type="button"
+                      variant={'ghost'}
+                      onClick={() => remove(index)}
+                    >
+                      <X />
+                    </Button>
                   )}
-                />
-                {fields.length > 1 && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    type="button"
-                    onClick={() => remove(index)}
-                    className="cursor-pointer text-colors-text-functional-danger"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                )}
-              </div>
-            ))}
+                </div>
+              ))}
 
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => append(' ')} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
-              className="w-full mt-4"
-            >
-              <PlusCircle className="mr-2 h-4 w-4" />
-              {t('flow.addMessage')}
-            </Button>
-          </div>
-          <FormMessage />
-        </FormItem>
+              <BlockButton
+                type="button"
+                onClick={() => append({ value: '' })} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
+              >
+                {t('flow.addMessage')}
+              </BlockButton>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormContainer>
       </form>
     </Form>
   );