Feat: Upload agent file #3221 (#5311)

### What problem does this PR solve?

Feat: Upload agent file #3221

### Type of change


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

web/src/pages/agent/index.tsx

@@ -1,12 +1,35 @@
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { Trash2 } from 'lucide-react';
+import { CodeXml, EllipsisVertical, Forward, Import, Key } from 'lucide-react';
+import { ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AgentSidebar } from './agent-sidebar';
 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 { UploadAgentDialog } from './upload-agent-dialog';
+
+function AgentDropdownMenuItem({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem className="flex justify-between items-center" {...props}>
+      {children}
+    </DropdownMenuItem>
+  );
+}
 
 export default function Agent() {
   const { navigateToAgentList } = useNavigatePage();
@@ -15,6 +38,15 @@ export default function Agent() {
     hideModal: hideChatDrawer,
     showModal: showChatDrawer,
   } = useSetModalState();
+  const { t } = useTranslation();
+  const openDocument = useOpenDocument();
+  const {
+    handleExportJson,
+    handleImportJson,
+    fileUploadVisible,
+    onFileUploadOk,
+    hideFileUploadModal,
+  } = useHandleExportOrImportJsonFile();
 
   useFetchDataOnMount();
 
@@ -22,15 +54,38 @@ export default function Agent() {
     <section>
       <PageHeader back={navigateToAgentList} title="Agent 01">
         <div className="flex items-center gap-2">
-          <Button variant={'icon'} size={'icon'}>
-            <Trash2 />
-          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant={'icon'} size={'icon'}>
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <AgentDropdownMenuItem onClick={openDocument}>
+                API
+                <Key />
+              </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem onClick={handleImportJson}>
+                Import
+                <Import />
+              </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem onClick={handleExportJson}>
+                Export
+                <Forward />
+              </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem>
+                {t('common.embedIntoSite')}
+                <CodeXml />
+              </AgentDropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Button variant={'outline'} size={'sm'}>
             Save
           </Button>
-          <Button variant={'outline'} size={'sm'}>
-            API
-          </Button>
           <Button variant={'outline'} size={'sm'}>
             Run app
           </Button>
@@ -54,6 +109,12 @@ export default function Agent() {
           </div>
         </SidebarProvider>
       </div>
+      {fileUploadVisible && (
+        <UploadAgentDialog
+          hideModal={hideFileUploadModal}
+          onOk={onFileUploadOk}
+        ></UploadAgentDialog>
+      )}
     </section>
   );
 }