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