Feat: Render the agent list page by page #3221 (#7736)

### What problem does this PR solve?

Feat: Render the agent list page by page #3221

### Type of change


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

web/src/pages/agents/index.tsx

@@ -1,33 +1,76 @@
 import ListFilterBar from '@/components/list-filter-bar';
+import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
-import { useFetchFlowList } from '@/hooks/flow-hooks';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
+import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
+import { useCallback } from 'react';
 import { AgentCard } from './agent-card';
+import { useRenameAgent } from './use-rename-agent';
 
 export default function Agent() {
-  const { data } = useFetchFlowList();
+  const { data, pagination, setPagination, searchString, handleInputChange } =
+    useFetchAgentListByPage();
   const { navigateToAgentTemplates } = useNavigatePage();
 
+  const {
+    datasetRenameLoading,
+    initialDatasetName,
+    onDatasetRenameOk,
+    datasetRenameVisible,
+    hideDatasetRenameModal,
+    showDatasetRenameModal,
+  } = useRenameAgent();
+
+  const handlePageChange = useCallback(
+    (page: number, pageSize?: number) => {
+      setPagination({ page, pageSize });
+    },
+    [setPagination],
+  );
+
   return (
     <section>
       <div className="px-8 pt-8">
-        <ListFilterBar title="Agents">
-          <Button
-            variant={'tertiary'}
-            size={'sm'}
-            onClick={navigateToAgentTemplates}
-          >
+        <ListFilterBar
+          title="Agents"
+          searchString={searchString}
+          onSearchChange={handleInputChange}
+        >
+          <Button onClick={navigateToAgentTemplates}>
             <Plus className="mr-2 h-4 w-4" />
-            Create app
+            Create Agent
           </Button>
         </ListFilterBar>
       </div>
-      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[84vh] overflow-auto px-8">
+      <div className="flex flex-wrap gap-4 max-h-[78vh] overflow-auto px-8">
         {data.map((x) => {
-          return <AgentCard key={x.id} data={x}></AgentCard>;
+          return (
+            <AgentCard
+              key={x.id}
+              data={x}
+              showDatasetRenameModal={showDatasetRenameModal}
+            ></AgentCard>
+          );
         })}
       </div>
+      <div className="mt-8 px-8">
+        <RAGFlowPagination
+          {...pick(pagination, 'current', 'pageSize')}
+          total={pagination.total}
+          onChange={handlePageChange}
+        ></RAGFlowPagination>
+      </div>
+      {datasetRenameVisible && (
+        <RenameDialog
+          hideModal={hideDatasetRenameModal}
+          onOk={onDatasetRenameOk}
+          initialName={initialDatasetName}
+          loading={datasetRenameLoading}
+        ></RenameDialog>
+      )}
     </section>
   );
 }