Feat: Bind data to the agent module of the home page #3221 (#7385)

### What problem does this PR solve?

Feat: Bind data to the agent module of the home page #3221

### Type of change


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

web/src/hooks/logic-hooks/use-row-selection.ts

@@ -1,14 +1,19 @@
 import { RowSelectionState } from '@tanstack/react-table';
 import { isEmpty } from 'lodash';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 export function useRowSelection() {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
+  const clearRowSelection = useCallback(() => {
+    setRowSelection({});
+  }, []);
+
   return {
     rowSelection,
     setRowSelection,
     rowSelectionIsEmpty: isEmpty(rowSelection),
+    clearRowSelection,
   };
 }
 

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

@@ -0,0 +1,22 @@
+import { IFlow } from '@/interfaces/database/flow';
+import flowService from '@/services/flow-service';
+import { useQuery } from '@tanstack/react-query';
+
+export const enum AgentApiAction {
+  FetchAgentList = 'fetchAgentList',
+}
+
+export const useFetchAgentList = () => {
+  const { data, isFetching: loading } = useQuery<IFlow[]>({
+    queryKey: [AgentApiAction.FetchAgentList],
+    initialData: [],
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await flowService.listCanvas();
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading };
+};