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/hooks/use-agent-request.ts

@@ -1,9 +1,17 @@
-import { IFlow } from '@/interfaces/database/flow';
+import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
+import i18n from '@/locales/config';
+import { BeginId } from '@/pages/agent/constant';
+import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
 import flowService from '@/services/flow-service';
+import { buildMessageListWithUuid } from '@/utils/chat';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { message } from 'antd';
+import { get, set } from 'lodash';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'umi';
+import { v4 as uuid } from 'uuid';
 import {
   useGetPaginationWithRouter,
   useHandleSearchChange,
@@ -13,8 +21,77 @@ export const enum AgentApiAction {
   FetchAgentList = 'fetchAgentList',
   UpdateAgentSetting = 'updateAgentSetting',
   DeleteAgent = 'deleteAgent',
+  FetchAgentDetail = 'fetchAgentDetail',
+  ResetAgent = 'resetAgent',
+  SetAgent = 'setAgent',
+  FetchAgentTemplates = 'fetchAgentTemplates',
 }
 
+export const EmptyDsl = {
+  graph: {
+    nodes: [
+      {
+        id: BeginId,
+        type: 'beginNode',
+        position: {
+          x: 50,
+          y: 200,
+        },
+        data: {
+          label: 'Begin',
+          name: 'begin',
+        },
+        sourcePosition: 'left',
+        targetPosition: 'right',
+      },
+    ],
+    edges: [],
+  },
+  components: {
+    begin: {
+      obj: {
+        component_name: 'Begin',
+        params: {},
+      },
+      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
+      upstream: [], // edge source is upstream, edge target is current node id
+    },
+  },
+  retrieval: [], // reference
+  history: [],
+  path: [],
+  globals: {
+    'sys.query': '',
+    'sys.user_id': '',
+    'sys.conversation_turns': 0,
+    'sys.files': [],
+  },
+};
+
+export const useFetchAgentTemplates = () => {
+  const { t } = useTranslation();
+
+  const { data } = useQuery<IFlowTemplate[]>({
+    queryKey: [AgentApiAction.FetchAgentTemplates],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await flowService.listTemplates();
+      if (Array.isArray(data?.data)) {
+        data.data.unshift({
+          id: uuid(),
+          title: t('flow.blank'),
+          description: t('flow.createFromNothing'),
+          dsl: EmptyDsl,
+        });
+      }
+
+      return data.data;
+    },
+  });
+
+  return data;
+};
+
 export const useFetchAgentListByPage = () => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
@@ -109,3 +186,84 @@ export const useDeleteAgent = () => {
 
   return { data, loading, deleteAgent: mutateAsync };
 };
+
+export const useFetchAgent = (): {
+  data: IFlow;
+  loading: boolean;
+  refetch: () => void;
+} => {
+  const { id } = useParams();
+  const { sharedId } = useGetSharedChatSearchParams();
+
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery({
+    queryKey: [AgentApiAction.FetchAgentDetail],
+    initialData: {} as IFlow,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await flowService.getCanvas({}, sharedId || id);
+
+      const messageList = buildMessageListWithUuid(
+        get(data, 'data.dsl.messages', []),
+      );
+      set(data, 'data.dsl.messages', messageList);
+
+      return data?.data ?? {};
+    },
+  });
+
+  return { data, loading, refetch };
+};
+
+export const useResetAgent = () => {
+  const { id } = useParams();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.ResetAgent],
+    mutationFn: async () => {
+      const { data } = await flowService.resetCanvas({ id });
+      return data;
+    },
+  });
+
+  return { data, loading, resetAgent: mutateAsync };
+};
+
+export const useSetAgent = () => {
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.SetAgent],
+    mutationFn: async (params: {
+      id?: string;
+      title?: string;
+      dsl?: DSL;
+      avatar?: string;
+    }) => {
+      const { data = {} } = await flowService.setCanvas(params);
+      if (data.code === 0) {
+        message.success(
+          i18n.t(`message.${params?.id ? 'modified' : 'created'}`),
+        );
+        queryClient.invalidateQueries({
+          queryKey: [AgentApiAction.FetchAgentList],
+        });
+      }
+      return data;
+    },
+  });
+
+  return { data, loading, setAgent: mutateAsync };
+};