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/dataset/dataset/dataset-table.tsx

@@ -15,7 +15,8 @@ import * as React from 'react';
 
 import { ChunkMethodDialog } from '@/components/chunk-method-dialog';
 import { RenameDialog } from '@/components/rename-dialog';
-import { Button } from '@/components/ui/button';
+import { TableSkeleton } from '@/components/table-skeleton';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import {
   Table,
   TableBody,
@@ -27,6 +28,7 @@ import {
 import { UseRowSelectionType } from '@/hooks/logic-hooks/use-row-selection';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
 import { getExtension } from '@/utils/document-util';
+import { pick } from 'lodash';
 import { useMemo } from 'react';
 import { SetMetaDialog } from './set-meta-dialog';
 import { useChangeDocumentParser } from './use-change-document-parser';
@@ -36,7 +38,7 @@ import { useSaveMeta } from './use-save-meta';
 
 export type DatasetTableProps = Pick<
   ReturnType<typeof useFetchDocumentList>,
-  'documents' | 'setPagination' | 'pagination'
+  'documents' | 'setPagination' | 'pagination' | 'loading'
 > &
   Pick<UseRowSelectionType, 'rowSelection' | 'setRowSelection'>;
 
@@ -46,6 +48,7 @@ export function DatasetTable({
   setPagination,
   rowSelection,
   setRowSelection,
+  loading,
 }: DatasetTableProps) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -105,20 +108,6 @@ export function DatasetTable({
     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: {
       sorting,
@@ -152,8 +141,10 @@ export function DatasetTable({
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
+          <TableBody className="relative">
+            {loading ? (
+              <TableSkeleton columnsLength={columns.length}></TableSkeleton>
+            ) : table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
@@ -191,22 +182,13 @@ export function DatasetTable({
           {pagination?.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={pagination.total}
+            onChange={(page, pageSize) => {
+              setPagination({ page, pageSize });
+            }}
+          ></RAGFlowPagination>
         </div>
       </div>
       {changeParserVisible && (

web/src/pages/dataset/dataset/index.tsx

@@ -38,6 +38,7 @@ export default function Dataset() {
     setPagination,
     filterValue,
     handleFilterSubmit,
+    loading,
   } = useFetchDocumentList();
   const { filters } = useSelectDatasetFilters();
 
@@ -93,6 +94,7 @@ export default function Dataset() {
         setPagination={setPagination}
         rowSelection={rowSelection}
         setRowSelection={setRowSelection}
+        loading={loading}
       ></DatasetTable>
       {documentUploadVisible && (
         <FileUploadDialog

web/src/pages/dataset/dataset/use-dataset-table-columns.tsx

@@ -35,16 +35,6 @@ export function useDatasetTableColumns({
     keyPrefix: 'knowledgeDetails',
   });
 
-  // const onShowRenameModal = (record: IDocumentInfo) => {
-  //   setCurrentRecord(record);
-  //   showRenameModal();
-  // };
-
-  // const onShowSetMetaModal = useCallback(() => {
-  //   setRecord();
-  //   showSetMetaModal();
-  // }, [setRecord, showSetMetaModal]);
-
   const { navigateToChunkParsedResult } = useNavigatePage();
   const { setDocumentStatus } = useSetDocumentStatus();
 

web/src/pages/dataset/sidebar/index.tsx

@@ -31,7 +31,7 @@ export function SideBar() {
           <AvatarFallback className="rounded-lg">CN</AvatarFallback>
         </Avatar>
 
-        <h3 className="text-lg font-semibold mb-2">{data.name}</h3>
+        <h3 className="text-lg font-semibold mb-2 line-clamp-1">{data.name}</h3>
         <div className="text-sm opacity-80">
           {data.doc_num} files | {data.chunk_num} chunks
         </div>