Feat: Add AgentNode component #3221 (#8019)

### What problem does this PR solve?

Feat: Add AgentNode component #3221

### Type of change


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

web/src/pages/agent/index.tsx

@@ -1,5 +1,5 @@
 import { PageHeader } from '@/components/page-header';
-import { Button } from '@/components/ui/button';
+import { Button, ButtonLoading } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,6 +19,7 @@ import FlowCanvas from './canvas';
 import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
 import { useFetchDataOnMount } from './hooks/use-fetch-data';
 import { useOpenDocument } from './hooks/use-open-document';
+import { useSaveGraph } from './hooks/use-save-graph';
 import { UploadAgentDialog } from './upload-agent-dialog';
 
 function AgentDropdownMenuItem({
@@ -48,6 +49,7 @@ export default function Agent() {
     onFileUploadOk,
     hideFileUploadModal,
   } = useHandleExportOrImportJsonFile();
+  const { saveGraph, loading } = useSaveGraph();
 
   const { flowDetail } = useFetchDataOnMount();
 
@@ -55,6 +57,16 @@ export default function Agent() {
     <section>
       <PageHeader back={navigateToAgentList} title={flowDetail.title}>
         <div className="flex items-center gap-2">
+          <ButtonLoading
+            variant={'outline'}
+            onClick={() => saveGraph()}
+            loading={loading}
+          >
+            Save
+          </ButtonLoading>
+          <Button variant={'outline'}>Run app</Button>
+          <Button variant={'outline'}>Publish</Button>
+
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant={'icon'} size={'icon'}>
@@ -83,17 +95,6 @@ export default function Agent() {
               </AgentDropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-
-          <Button variant={'outline'} size={'sm'}>
-            Save
-          </Button>
-          <Button variant={'outline'} size={'sm'}>
-            Run app
-          </Button>
-
-          <Button variant={'tertiary'} size={'sm'}>
-            Publish
-          </Button>
         </div>
       </PageHeader>
       <ReactFlowProvider>