Feat: Add type card to create agent dialog #9869 (#10025)

### What problem does this PR solve?

Feat: Add type card to create agent dialog #9869
### Type of change


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

web/src/pages/agents/index.tsx

@@ -1,14 +1,22 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
+import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
 import { t } from 'i18next';
 import { pick } from 'lodash';
-import { Plus } from 'lucide-react';
+import { Clipboard, ClipboardPlus, FileInput, Plus } from 'lucide-react';
 import { useCallback } from 'react';
 import { AgentCard } from './agent-card';
+import { CreateAgentDialog } from './create-agent-dialog';
 import { useRenameAgent } from './use-rename-agent';
 
 export default function Agents() {
@@ -25,6 +33,12 @@ export default function Agents() {
     showAgentRenameModal,
   } = useRenameAgent();
 
+  const {
+    visible: creatingVisible,
+    hideModal: hideCreatingModal,
+    showModal: showCreatingModal,
+  } = useSetModalState();
+
   const handlePageChange = useCallback(
     (page: number, pageSize?: number) => {
       setPagination({ page, pageSize });
@@ -41,10 +55,34 @@ export default function Agents() {
           onSearchChange={handleInputChange}
           icon="agent"
         >
-          <Button onClick={navigateToAgentTemplates}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('flow.createGraph')}
-          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button>
+                <Plus className="mr-2 h-4 w-4" />
+                {t('flow.createGraph')}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                justifyBetween={false}
+                onClick={showCreatingModal}
+              >
+                <Clipboard />
+                Create from Blank
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                justifyBetween={false}
+                onClick={navigateToAgentTemplates}
+              >
+                <ClipboardPlus />
+                Create from Template
+              </DropdownMenuItem>
+              <DropdownMenuItem justifyBetween={false}>
+                <FileInput />
+                Import json file
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
@@ -75,6 +113,15 @@ export default function Agents() {
           loading={agentRenameLoading}
         ></RenameDialog>
       )}
+      {creatingVisible && (
+        <CreateAgentDialog
+          loading={false}
+          visible={creatingVisible}
+          hideModal={hideCreatingModal}
+          shouldChooseAgent
+          onOk={() => {}}
+        ></CreateAgentDialog>
+      )}
     </section>
   );
 }