Feat: Rename agent #3221 (#7740)

### What problem does this PR solve?

Feat: Rename agent #3221

### Type of change


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

web/src/hooks/use-agent-request.ts

@@ -1,7 +1,8 @@
 import { IFlow } from '@/interfaces/database/flow';
 import flowService from '@/services/flow-service';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
+import { message } from 'antd';
 import { useCallback } from 'react';
 import {
   useGetPaginationWithRouter,
@@ -10,6 +11,8 @@ import {
 
 export const enum AgentApiAction {
   FetchAgentList = 'fetchAgentList',
+  UpdateAgentSetting = 'updateAgentSetting',
+  DeleteAgent = 'deleteAgent',
 }
 
 export const useFetchAgentListByPage = () => {
@@ -58,3 +61,51 @@ export const useFetchAgentListByPage = () => {
     setPagination,
   };
 };
+
+export const useUpdateAgentSetting = () => {
+  const queryClient = useQueryClient();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.UpdateAgentSetting],
+    mutationFn: async (params: any) => {
+      const ret = await flowService.settingCanvas(params);
+      if (ret?.data?.code === 0) {
+        message.success('success');
+        queryClient.invalidateQueries({
+          queryKey: [AgentApiAction.FetchAgentList],
+        });
+      } else {
+        message.error(ret?.data?.data);
+      }
+      return ret?.data?.code;
+    },
+  });
+
+  return { data, loading, updateAgentSetting: mutateAsync };
+};
+
+export const useDeleteAgent = () => {
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.DeleteAgent],
+    mutationFn: async (canvasIds: string[]) => {
+      const { data } = await flowService.removeCanvas({ canvasIds });
+      if (data.code === 0) {
+        queryClient.invalidateQueries({
+          queryKey: [AgentApiAction.FetchAgentList],
+        });
+      }
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, deleteAgent: mutateAsync };
+};

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

@@ -9,9 +9,9 @@ import { useRenameAgent } from './use-rename-agent';
 
 export type DatasetCardProps = {
   data: IFlow;
-} & Pick<ReturnType<typeof useRenameAgent>, 'showDatasetRenameModal'>;
+} & Pick<ReturnType<typeof useRenameAgent>, 'showAgentRenameModal'>;
 
-export function AgentCard({ data, showDatasetRenameModal }: DatasetCardProps) {
+export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
   const { navigateToAgent } = useNavigatePage();
 
   return (
@@ -25,8 +25,8 @@ export function AgentCard({ data, showDatasetRenameModal }: DatasetCardProps) {
             </Avatar>
           </div>
           <AgentDropdown
-            showDatasetRenameModal={showDatasetRenameModal}
+            showAgentRenameModal={showAgentRenameModal}
-            dataset={data}
+            agent={data}
           >
             <MoreButton></MoreButton>
           </AgentDropdown>

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

@@ -6,7 +6,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useDeleteKnowledge } from '@/hooks/use-knowledge-request';
+import { useDeleteAgent } from '@/hooks/use-agent-request';
 import { IFlow } from '@/interfaces/database/flow';
 import { PenLine, Trash2 } from 'lucide-react';
 import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
@@ -15,33 +15,33 @@ import { useRenameAgent } from './use-rename-agent';
 
 export function AgentDropdown({
   children,
-  showDatasetRenameModal,
+  showAgentRenameModal,
-  dataset,
+  agent: agent,
 }: PropsWithChildren &
-  Pick<ReturnType<typeof useRenameAgent>, 'showDatasetRenameModal'> & {
+  Pick<ReturnType<typeof useRenameAgent>, 'showAgentRenameModal'> & {
-    dataset: IFlow;
+    agent: IFlow;
   }) {
   const { t } = useTranslation();
-  const { deleteKnowledge } = useDeleteKnowledge();
+  const { deleteAgent } = useDeleteAgent();
 
-  const handleShowDatasetRenameModal: MouseEventHandler<HTMLDivElement> =
+  const handleShowAgentRenameModal: MouseEventHandler<HTMLDivElement> =
     useCallback(
       (e) => {
         e.stopPropagation();
-        showDatasetRenameModal(dataset);
+        showAgentRenameModal(agent);
       },
-      [dataset, showDatasetRenameModal],
+      [agent, showAgentRenameModal],
     );
 
   const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
-    deleteKnowledge(dataset.id);
+    deleteAgent([agent.id]);
-  }, [dataset.id, deleteKnowledge]);
+  }, [agent.id, deleteAgent]);
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem onClick={handleShowDatasetRenameModal}>
+        <DropdownMenuItem onClick={handleShowAgentRenameModal}>
           {t('common.rename')} <PenLine />
         </DropdownMenuItem>
         <DropdownMenuSeparator />

web/src/pages/agents/index.tsx

@@ -16,12 +16,12 @@ export default function Agent() {
   const { navigateToAgentTemplates } = useNavigatePage();
 
   const {
-    datasetRenameLoading,
+    agentRenameLoading,
-    initialDatasetName,
+    initialAgentName,
-    onDatasetRenameOk,
+    onAgentRenameOk,
-    datasetRenameVisible,
+    agentRenameVisible,
-    hideDatasetRenameModal,
+    hideAgentRenameModal,
-    showDatasetRenameModal,
+    showAgentRenameModal,
   } = useRenameAgent();
 
   const handlePageChange = useCallback(
@@ -51,7 +51,7 @@ export default function Agent() {
             <AgentCard
               key={x.id}
               data={x}
-              showDatasetRenameModal={showDatasetRenameModal}
+              showAgentRenameModal={showAgentRenameModal}
             ></AgentCard>
           );
         })}
@@ -63,12 +63,12 @@ export default function Agent() {
           onChange={handlePageChange}
         ></RAGFlowPagination>
       </div>
-      {datasetRenameVisible && (
+      {agentRenameVisible && (
         <RenameDialog
-          hideModal={hideDatasetRenameModal}
+          hideModal={hideAgentRenameModal}
-          onOk={onDatasetRenameOk}
+          onOk={onAgentRenameOk}
-          initialName={initialDatasetName}
+          initialName={initialAgentName}
-          loading={datasetRenameLoading}
+          loading={agentRenameLoading}
         ></RenameDialog>
       )}
     </section>

web/src/pages/agents/use-rename-agent.ts

@@ -1,53 +1,46 @@
 import { useSetModalState } from '@/hooks/common-hooks';
-import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
+import { useUpdateAgentSetting } from '@/hooks/use-agent-request';
 import { IFlow } from '@/interfaces/database/flow';
-import { omit } from 'lodash';
+import { pick } from 'lodash';
 import { useCallback, useState } from 'react';
 
 export const useRenameAgent = () => {
-  const [dataset, setDataset] = useState<IFlow>({} as IFlow);
+  const [agent, setAgent] = useState<IFlow>({} as IFlow);
   const {
-    visible: datasetRenameVisible,
+    visible: agentRenameVisible,
-    hideModal: hideDatasetRenameModal,
+    hideModal: hideAgentRenameModal,
-    showModal: showDatasetRenameModal,
+    showModal: showAgentRenameModal,
   } = useSetModalState();
-  const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge(true);
+  const { updateAgentSetting, loading } = useUpdateAgentSetting();
 
-  const onDatasetRenameOk = useCallback(
+  const onAgentRenameOk = useCallback(
     async (name: string) => {
-      const ret = await saveKnowledgeConfiguration({
+      const ret = await updateAgentSetting({
-        ...omit(dataset, [
+        ...pick(agent, ['id', 'avatar', 'description', 'permission']),
-          'id',
+        title: name,
-          'update_time',
-          'nickname',
-          'tenant_avatar',
-          'tenant_id',
-        ]),
-        kb_id: dataset.id,
-        name,
       });
 
-      if (ret.code === 0) {
+      if (ret === 0) {
-        hideDatasetRenameModal();
+        hideAgentRenameModal();
       }
     },
-    [saveKnowledgeConfiguration, dataset, hideDatasetRenameModal],
+    [updateAgentSetting, agent, hideAgentRenameModal],
   );
 
-  const handleShowDatasetRenameModal = useCallback(
+  const handleShowAgentRenameModal = useCallback(
     async (record: IFlow) => {
-      setDataset(record);
+      setAgent(record);
-      showDatasetRenameModal();
+      showAgentRenameModal();
     },
-    [showDatasetRenameModal],
+    [showAgentRenameModal],
   );
 
   return {
-    datasetRenameLoading: loading,
+    agentRenameLoading: loading,
-    initialDatasetName: dataset?.title,
+    initialAgentName: agent?.title,
-    onDatasetRenameOk,
+    onAgentRenameOk,
-    datasetRenameVisible,
+    agentRenameVisible,
-    hideDatasetRenameModal,
+    hideAgentRenameModal,
-    showDatasetRenameModal: handleShowDatasetRenameModal,
+    showAgentRenameModal: handleShowAgentRenameModal,
   };
 };