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/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>
   );
 }