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/pages/files/action-cell.tsx

@@ -73,7 +73,7 @@ export function ActionCell({
       </Button>
       <ConfirmDeleteDialog>
         <Button variant="ghost" size={'icon'}>
-          <Trash2 />
+          <Trash2 className="text-text-delete-red" />
         </Button>
       </ConfirmDeleteDialog>
       {isSupportedPreviewDocumentType(extension) && (

web/src/pages/files/files-table.tsx

@@ -19,6 +19,7 @@ import SvgIcon from '@/components/svg-icon';
 import { TableEmpty, TableSkeleton } from '@/components/table-skeleton';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import {
   Table,
   TableBody,
@@ -39,6 +40,7 @@ import { cn } from '@/lib/utils';
 import { formatFileSize } from '@/utils/common-util';
 import { formatDate } from '@/utils/date';
 import { getExtension } from '@/utils/document-util';
+import { pick } from 'lodash';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionCell } from './action-cell';
@@ -244,20 +246,7 @@ export function FilesTable({
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
-    onPaginationChange: (updaterOrValue: any) => {
-      if (typeof updaterOrValue === 'function') {
-        const nextPagination = updaterOrValue(currentPagination);
-        setPagination({
-          page: nextPagination.pageIndex + 1,
-          pageSize: nextPagination.pageSize,
-        });
-      } else {
-        setPagination({
-          page: updaterOrValue.pageIndex,
-          pageSize: updaterOrValue.pageSize,
-        });
-      }
-    },
+
     manualPagination: true, //we're doing manual "server-side" pagination
 
     state: {
@@ -326,23 +315,15 @@ export function FilesTable({
           {table.getFilteredSelectedRowModel().rows.length} of {total} row(s)
           selected.
         </div>
+
         <div className="space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
+          <RAGFlowPagination
+            {...pick(pagination, 'current', 'pageSize')}
+            total={total}
+            onChange={(page, pageSize) => {
+              setPagination({ page, pageSize });
+            }}
+          ></RAGFlowPagination>
         </div>
       </div>
       {connectToKnowledgeVisible && (

web/src/pages/files/index.tsx

@@ -50,16 +50,20 @@ export default function Files() {
     handleInputChange,
   } = useFetchFileList();
 
+  const {
+    rowSelection,
+    setRowSelection,
+    rowSelectionIsEmpty,
+    clearRowSelection,
+  } = useRowSelection();
+
   const {
     showMoveFileModal,
     moveFileVisible,
     onMoveFileOk,
     hideMoveFileModal,
     moveFileLoading,
-  } = useHandleMoveFile();
-
-  const { rowSelection, setRowSelection, rowSelectionIsEmpty } =
-    useRowSelection();
+  } = useHandleMoveFile({ clearRowSelection });
 
   const { list } = useBulkOperateFile({
     files,

web/src/pages/files/link-to-dataset-dialog.tsx

@@ -69,7 +69,7 @@ function LinkToDatasetForm({
           name="knowledgeIds"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>{t('common.name')}</FormLabel>
               <FormControl>
                 <MultiSelect
                   options={options}

web/src/pages/files/use-bulk-operate-file.tsx

@@ -28,7 +28,7 @@ export function useBulkOperateFile({
       label: t('common.move'),
       icon: <FolderInput />,
       onClick: () => {
-        showMoveFileModal(selectedIds);
+        showMoveFileModal(selectedIds, true);
       },
     },
     {

web/src/pages/files/use-move-file.ts

@@ -1,8 +1,11 @@
 import { useSetModalState } from '@/hooks/common-hooks';
+import { UseRowSelectionType } from '@/hooks/logic-hooks/use-row-selection';
 import { useMoveFile } from '@/hooks/use-file-request';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
-export const useHandleMoveFile = () => {
+export const useHandleMoveFile = ({
+  clearRowSelection,
+}: Pick<UseRowSelectionType, 'clearRowSelection'>) => {
   const {
     visible: moveFileVisible,
     hideModal: hideMoveFileModal,
@@ -10,6 +13,7 @@ export const useHandleMoveFile = () => {
   } = useSetModalState();
   const { moveFile, loading } = useMoveFile();
   const [sourceFileIds, setSourceFileIds] = useState<string[]>([]);
+  const isBulkRef = useRef(false);
 
   const onMoveFileOk = useCallback(
     async (targetFolderId: string) => {
@@ -19,16 +23,19 @@ export const useHandleMoveFile = () => {
       });
 
       if (ret === 0) {
-        // setSelectedRowKeys([]);
+        if (isBulkRef.current) {
+          clearRowSelection();
+        }
         hideMoveFileModal();
       }
       return ret;
     },
-    [moveFile, hideMoveFileModal, sourceFileIds],
+    [moveFile, sourceFileIds, hideMoveFileModal, clearRowSelection],
   );
 
   const handleShowMoveFileModal = useCallback(
-    (ids: string[]) => {
+    (ids: string[], isBulk = false) => {
+      isBulkRef.current = isBulk;
       setSourceFileIds(ids);
       showMoveFileModal();
     },