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}

web/src/pages/agents/create-agent-dialog.tsx

@@ -1,3 +1,4 @@
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -5,7 +6,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { LoadingButton } from '@/components/ui/loading-button';
 import { IModalProps } from '@/interfaces/common';
 import { TagRenameId } from '@/pages/add-knowledge/constant';
 import { useTranslation } from 'react-i18next';
@@ -26,9 +26,9 @@ export function CreateAgentDialog({
         </DialogHeader>
         <CreateAgentForm hideModal={hideModal} onOk={onOk}></CreateAgentForm>
         <DialogFooter>
-          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
+          <ButtonLoading type="submit" form={TagRenameId} loading={loading}>
             {t('common.save')}
-          </LoadingButton>
+          </ButtonLoading>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/pages/agents/template-card.tsx

@@ -1,19 +1,22 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { useSetModalState } from '@/hooks/common-hooks';
 import { IFlowTemplate } from '@/interfaces/database/flow';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface IProps {
   data: IFlowTemplate;
+  showModal(record: IFlowTemplate): void;
 }
 
-export function TemplateCard({
-  data,
-  showModal,
-}: IProps & Pick<ReturnType<typeof useSetModalState>, 'showModal'>) {
+export function TemplateCard({ data, showModal }: IProps) {
   const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    showModal(data);
+  }, [data, showModal]);
+
   return (
     <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative">
       <CardContent className="p-4 ">
@@ -35,7 +38,7 @@ export function TemplateCard({
         <Button
           variant="tertiary"
           className="absolute bottom-4 right-4 left-4 hidden justify-end group-hover:block text-center"
-          onClick={showModal}
+          onClick={handleClick}
         >
           {t('flow.useTemplate')}
         </Button>