Feat: Create empty agent #3221 (#8054)

### What problem does this PR solve?

Feat: Create empty agent #3221

### Type of change


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

web/src/pages/agents/agent-templates.tsx

@@ -1,8 +1,9 @@
 import { PageHeader } from '@/components/page-header';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { useCallback } from 'react';
+import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
+import { IFlowTemplate } from '@/interfaces/database/flow';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { TemplateCard } from './template-card';
@@ -10,16 +11,49 @@ import { TemplateCard } from './template-card';
 export default function AgentTemplates() {
   const { navigateToAgentList } = useNavigatePage();
   const { t } = useTranslation();
-  const { data: list } = useFetchFlowTemplates();
+  const list = useFetchAgentTemplates();
+  const { loading, setAgent } = useSetAgent();
+
   const {
     visible: creatingVisible,
     hideModal: hideCreatingModal,
     showModal: showCreatingModal,
   } = useSetModalState();
 
-  const handleOk = useCallback(async () => {
-    // return onOk(name, checkedId);
-  }, []);
+  const [template, setTemplate] = useState<IFlowTemplate>();
+
+  const showModal = useCallback(
+    (record: IFlowTemplate) => {
+      setTemplate(record);
+      showCreatingModal();
+    },
+    [showCreatingModal],
+  );
+
+  const { navigateToAgent } = useNavigatePage();
+
+  const handleOk = useCallback(
+    async (payload: any) => {
+      let dsl = template?.dsl;
+      const ret = await setAgent({
+        title: payload.name,
+        dsl,
+        avatar: template?.avatar,
+      });
+
+      if (ret?.code === 0) {
+        hideCreatingModal();
+        navigateToAgent(ret.data.id)();
+      }
+    },
+    [
+      hideCreatingModal,
+      navigateToAgent,
+      setAgent,
+      template?.avatar,
+      template?.dsl,
+    ],
+  );
 
   return (
     <section>
@@ -33,14 +67,14 @@ export default function AgentTemplates() {
             <TemplateCard
               key={x.id}
               data={x}
-              showModal={showCreatingModal}
+              showModal={showModal}
             ></TemplateCard>
           );
         })}
       </div>
       {creatingVisible && (
         <CreateAgentDialog
-          loading={false}
+          loading={loading}
           visible={creatingVisible}
           hideModal={hideCreatingModal}
           onOk={handleOk}