Feat: Adjust the operation cell of the table on the file management page and dataset page #3221. (#7526)

### What problem does this PR solve? Feat: Adjust the operation cell of the table on the file management page and dataset page #3221. ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-06-03 10:53:59 +08:00 · 2025-05-08 15:25:26 +08:00 · 2025-05-08 15:25:26 +08:00 · 1657755b5d
commit 1657755b5d
parent 9d3dd13fef
18 changed files with 163 additions and 115 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -64,7 +64,7 @@
        "jsencrypt": "^3.3.2",
        "lexical": "^0.23.1",
        "lodash": "^4.17.21",
-        "lucide-react": "^0.454.0",
+        "lucide-react": "^0.508.0",
        "mammoth": "^1.7.2",
        "next-themes": "^0.4.6",
        "openai-speech-stream-player": "^1.0.8",
@ -22959,11 +22959,12 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.454.0",
-      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.454.0.tgz",
-      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "version": "0.508.0",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.508.0.tgz",
+      "integrity": "sha512-gcP16PnexqtOFrTtv98kVsGzTfnbPekzZiQfByi2S89xfk7E/4uKE1USZqccIp58v42LqkO7MuwpCqshwSrJCg==",
+      "license": "ISC",
      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
    "node_modules/lz-string": {
--- a/web/package.json
+++ b/web/package.json
@ -75,7 +75,7 @@
    "jsencrypt": "^3.3.2",
    "lexical": "^0.23.1",
    "lodash": "^4.17.21",
-    "lucide-react": "^0.454.0",
+    "lucide-react": "^0.508.0",
    "mammoth": "^1.7.2",
    "next-themes": "^0.4.6",
    "openai-speech-stream-player": "^1.0.8",
--- a/web/public/iconfont.js
+++ b/web/public/iconfont.js
--- a/web/src/components/bulk-operate-bar.tsx
+++ b/web/src/components/bulk-operate-bar.tsx
@ -1,8 +1,10 @@
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
+import { BrushCleaning } from 'lucide-react';
 import { ReactNode, useCallback } from 'react';
 import { ConfirmDeleteDialog } from './confirm-delete-dialog';
+import { Separator } from './ui/separator';

 export type BulkOperateItemType = {
  id: string;
@ -11,16 +13,21 @@ export type BulkOperateItemType = {
  onClick(): void;
 };

-type BulkOperateBarProps = { list: BulkOperateItemType[] };
+type BulkOperateBarProps = { list: BulkOperateItemType[]; count: number };

-export function BulkOperateBar({ list }: BulkOperateBarProps) {
+export function BulkOperateBar({ list, count }: BulkOperateBarProps) {
  const isDeleteItem = useCallback((id: string) => {
    return id === 'delete';
  }, []);

  return (
    <Card className="mb-4">
-      <CardContent className="p-1">
+      <CardContent className="p-1 pl-5 flex items-center gap-6">
+        <section className="text-text-sub-title-invert flex items-center gap-2">
+          <span>Selected: {count} Files</span>
+          <BrushCleaning className="size-3" />
+        </section>
+        <Separator orientation={'vertical'} className="h-3"></Separator>
        <ul className="flex gap-2">
          {list.map((x) => (
            <li
--- a/web/src/components/icon-font.tsx
+++ b/web/src/components/icon-font.tsx
@ -22,7 +22,7 @@ export function FileIcon({
  return (
    <span className={cn('size-4', className)}>
      <IconFont
-        name={isFolder ? 'file' : FileIconMap[getExtension(name)]}
+        name={isFolder ? 'file-sub' : FileIconMap[getExtension(name)]}
      ></IconFont>
    </span>
  );
--- a/web/src/components/new-document-link.tsx
+++ b/web/src/components/new-document-link.tsx
@ -11,6 +11,7 @@ interface IProps extends React.PropsWithChildren {
  documentName: string;
  documentId?: string;
  prefix?: string;
+  className?: string;
 }

 const NewDocumentLink = ({
@ -21,6 +22,7 @@ const NewDocumentLink = ({
  documentId,
  documentName,
  prefix = 'file',
+  className,
 }: IProps) => {
  let nextLink = link;
  const extension = getExtension(documentName);
@ -38,7 +40,8 @@ const NewDocumentLink = ({
      }
      href={nextLink}
      rel="noreferrer"
-      style={{ color, wordBreak: 'break-all' }}
+      style={{ color: className ? '' : color, wordBreak: 'break-all' }}
+      className={className}
    >
      {children}
    </a>
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@ -11,7 +11,7 @@ const badgeVariants = cva(
        default:
          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
        destructive:
          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@ -4,9 +4,14 @@ import { cn } from '@/lib/utils';

 const Table = React.forwardRef<
  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto rounded-2xl bg-background-card">
+  React.HTMLAttributes<HTMLTableElement> & { rootClassName?: string }
+>(({ className, rootClassName, ...props }, ref) => (
+  <div
+    className={cn(
+      'relative w-full overflow-auto rounded-2xl bg-background-card',
+      rootClassName,
+    )}
+  >
    <table
      ref={ref}
      className={cn('w-full caption-bottom text-sm ', className)}
@ -20,7 +25,11 @@ const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b top-0 sticky', className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = 'TableHeader';

--- a/web/src/hooks/logic-hooks/use-row-selection.ts
+++ b/web/src/hooks/logic-hooks/use-row-selection.ts
@ -9,11 +9,16 @@ export function useRowSelection() {
    setRowSelection({});
  }, []);

+  const selectedCount = useMemo(() => {
+    return Object.keys(rowSelection).length;
+  }, [rowSelection]);
+
  return {
    rowSelection,
    setRowSelection,
    rowSelectionIsEmpty: isEmpty(rowSelection),
    clearRowSelection,
+    selectedCount,
  };
 }

--- a/web/src/hooks/use-document-request.ts
+++ b/web/src/hooks/use-document-request.ts
@ -93,7 +93,7 @@ export const useFetchDocumentList = () => {
      filterValue,
    ],
    initialData: { docs: [], total: 0 },
-    refetchInterval: 15000,
+    // refetchInterval: 15000,
    enabled: !!knowledgeId || !!id,
    queryFn: async () => {
      const ret = await listDocument(
--- a/web/src/pages/dataset/dataset/dataset-action-cell.tsx
+++ b/web/src/pages/dataset/dataset/dataset-action-cell.tsx
@ -11,7 +11,7 @@ import { IDocumentInfo } from '@/interfaces/database/document';
 import { formatFileSize } from '@/utils/common-util';
 import { formatDate } from '@/utils/date';
 import { downloadDocument } from '@/utils/file-util';
-import { ArrowDownToLine, Pencil, ScrollText, Trash2 } from 'lucide-react';
+import { ArrowDownToLine, FolderPen, ScrollText, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import { UseRenameDocumentShowType } from './use-rename-document';
 import { isParserRunning } from './utils';
@ -50,10 +50,18 @@ export function DatasetActionCell({
  }, [record, showRenameModal]);

  return (
-    <section className="flex gap-4 items-center">
+    <section className="flex gap-4 items-center text-text-sub-title-invert">
+      <Button
+        variant={'ghost'}
+        size={'sm'}
+        disabled={isRunning}
+        onClick={handleRename}
+      >
+        <FolderPen />
+      </Button>
      <HoverCard>
        <HoverCardTrigger>
-          <Button variant="ghost" size={'icon'} disabled={isRunning}>
+          <Button variant="ghost" disabled={isRunning} size={'sm'}>
            <ScrollText />
          </Button>
        </HoverCardTrigger>
@ -77,27 +85,20 @@ export function DatasetActionCell({
          </ul>
        </HoverCardContent>
      </HoverCard>
-      <Button
-        variant={'ghost'}
-        size={'icon'}
-        disabled={isRunning}
-        onClick={handleRename}
-      >
-        <Pencil />
-      </Button>
+
      {isVirtualDocument || (
        <Button
          variant={'ghost'}
-          size={'icon'}
          onClick={onDownloadDocument}
          disabled={isRunning}
+          size={'sm'}
        >
          <ArrowDownToLine />
        </Button>
      )}
      <ConfirmDeleteDialog onOk={handleRemove}>
-        <Button variant={'ghost'} size={'icon'} disabled={isRunning}>
-          <Trash2 className="text-text-delete-red" />
+        <Button variant={'ghost'} size={'sm'} disabled={isRunning}>
+          <Trash2 />
        </Button>
      </ConfirmDeleteDialog>
    </section>
--- a/web/src/pages/dataset/dataset/dataset-table.tsx
+++ b/web/src/pages/dataset/dataset/dataset-table.tsx
@ -119,7 +119,7 @@ export function DatasetTable({

  return (
    <div className="w-full">
-      <Table>
+      <Table rootClassName="max-h-[82vh]">
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
@ -164,11 +164,7 @@ export function DatasetTable({
          )}
        </TableBody>
      </Table>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of{' '}
-          {pagination?.total} row(s) selected.
-        </div>
+      <div className="flex items-center justify-end  py-4">
        <div className="space-x-2">
          <RAGFlowPagination
            {...pick(pagination, 'current', 'pageSize')}
--- a/web/src/pages/dataset/dataset/index.tsx
+++ b/web/src/pages/dataset/dataset/index.tsx
@ -50,7 +50,7 @@ export default function Dataset() {
    showCreateModal,
  } = useCreateEmptyDocument();

-  const { rowSelection, rowSelectionIsEmpty, setRowSelection } =
+  const { rowSelection, rowSelectionIsEmpty, setRowSelection, selectedCount } =
    useRowSelection();

  const { list } = useBulkOperateDataset({
@ -68,6 +68,15 @@ export default function Dataset() {
        value={filterValue}
        onChange={handleFilterSubmit}
        filters={filters}
+        leftPanel={
+          <div className="items-start">
+            <div className="pb-1">Dataset</div>
+            <div className="text-text-sub-title-invert text-sm">
+              Please wait for your files to finish parsing before starting an
+              AI-powered chat.
+            </div>
+          </div>
+        }
      >
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
@ -87,7 +96,9 @@ export default function Dataset() {
          </DropdownMenuContent>
        </DropdownMenu>
      </ListFilterBar>
-      {rowSelectionIsEmpty || <BulkOperateBar list={list}></BulkOperateBar>}
+      {rowSelectionIsEmpty || (
+        <BulkOperateBar list={list} count={selectedCount}></BulkOperateBar>
+      )}
      <DatasetTable
        documents={documents}
        pagination={pagination}
--- a/web/src/pages/dataset/dataset/parsing-status-cell.tsx
+++ b/web/src/pages/dataset/dataset/parsing-status-cell.tsx
@ -56,10 +56,10 @@ export function ParsingStatusCell({
  }, [record, showSetMetaModal]);

  return (
-    <section className="flex gap-2 items-center ">
-      <div>
+    <section className="flex gap-2 items-center">
+      <div className="w-28 flex items-center justify-between">
        <DropdownMenu>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
            <Button variant={'ghost'} size={'sm'}>
              {parser_id}
            </Button>
@ -73,8 +73,7 @@ export function ParsingStatusCell({
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
-
-        <Separator orientation="vertical" />
+        <Separator orientation="vertical" className="h-2.5" />
      </div>
      <ConfirmDeleteDialog
        title={t(`knowledgeDetails.redo`, { chunkNum: chunk_num })}
--- a/web/src/pages/files/action-cell.tsx
+++ b/web/src/pages/files/action-cell.tsx
@ -1,13 +1,6 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import NewDocumentLink from '@/components/new-document-link';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { useDownloadFile } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import {
@ -15,9 +8,15 @@ import {
  isSupportedPreviewDocumentType,
 } from '@/utils/document-util';
 import { CellContext } from '@tanstack/react-table';
-import { EllipsisVertical, Eye, Link2, Trash2 } from 'lucide-react';
+import {
+  ArrowDownToLine,
+  Eye,
+  FolderInput,
+  FolderPen,
+  Link2,
+  Trash2,
+} from 'lucide-react';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
  UseHandleConnectToKnowledgeReturnType,
  UseRenameCurrentFileReturnType,
@ -36,7 +35,6 @@ export function ActionCell({
  showFileRenameModal,
  showMoveFileModal,
 }: IProps) {
-  const { t } = useTranslation();
  const record = row.original;
  const documentId = record.id;
  const { downloadFile } = useDownloadFile();
@ -63,33 +61,43 @@ export function ActionCell({
  }, [record, showMoveFileModal]);

  return (
-    <section className="flex gap-4 items-center">
+    <section className="flex gap-4 items-center text-text-sub-title-invert">
      <Button
        variant="ghost"
-        size={'icon'}
+        size={'sm'}
        onClick={handleShowConnectToKnowledgeModal}
      >
        <Link2 />
      </Button>
-      <ConfirmDeleteDialog>
-        <Button variant="ghost" size={'icon'}>
-          <Trash2 className="text-text-delete-red" />
+      <Button variant="ghost" size={'sm'} onClick={handleShowMoveFileModal}>
+        <FolderInput />
+      </Button>
+
+      <Button variant="ghost" size={'sm'} onClick={handleShowFileRenameModal}>
+        <FolderPen />
+      </Button>
+
+      {isFolder || (
+        <Button variant={'ghost'} size={'sm'} onClick={onDownloadDocument}>
+          <ArrowDownToLine />
        </Button>
-      </ConfirmDeleteDialog>
+      )}
+
      {isSupportedPreviewDocumentType(extension) && (
        <NewDocumentLink
          documentId={documentId}
          documentName={record.name}
-          color="black"
+          className="text-text-sub-title-invert"
        >
-          <Button variant={'ghost'} size={'icon'}>
+          <Button variant={'ghost'} size={'sm'}>
            <Eye />
          </Button>
        </NewDocumentLink>
      )}
-      <DropdownMenu>
+
+      {/* <DropdownMenu>
        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size={'icon'}>
+          <Button variant="ghost" size={'sm'}>
            <EllipsisVertical />
          </Button>
        </DropdownMenuTrigger>
@ -108,7 +116,12 @@ export function ActionCell({
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
-      </DropdownMenu>
+      </DropdownMenu> */}
+      <ConfirmDeleteDialog>
+        <Button variant="ghost" size={'sm'}>
+          <Trash2 />
+        </Button>
+      </ConfirmDeleteDialog>
    </section>
  );
 }
--- a/web/src/pages/files/files-table.tsx
+++ b/web/src/pages/files/files-table.tsx
@ -304,12 +304,7 @@ export function FilesTable({
        </TableBody>
      </Table>

-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of {total} row(s)
-          selected.
-        </div>
-
+      <div className="flex items-center justify-end py-4">
        <div className="space-x-2">
          <RAGFlowPagination
            {...pick(pagination, 'current', 'pageSize')}
--- a/web/src/pages/files/index.tsx
+++ b/web/src/pages/files/index.tsx
@ -20,6 +20,7 @@ import { MoveDialog } from './move-dialog';
 import { useBulkOperateFile } from './use-bulk-operate-file';
 import { useHandleCreateFolder } from './use-create-folder';
 import { useHandleMoveFile } from './use-move-file';
+import { useSelectBreadcrumbItems } from './use-navigate-to-folder';
 import { useHandleUploadFile } from './use-upload-file';

 export default function Files() {
@ -55,6 +56,7 @@ export default function Files() {
    setRowSelection,
    rowSelectionIsEmpty,
    clearRowSelection,
+    selectedCount,
  } = useRowSelection();

  const {
@ -72,9 +74,11 @@ export default function Files() {
    setRowSelection,
  });

+  const breadcrumbItems = useSelectBreadcrumbItems();
+
  const leftPanel = (
    <div>
-      <FileBreadcrumb></FileBreadcrumb>
+      {breadcrumbItems.length > 0 ? <FileBreadcrumb></FileBreadcrumb> : 'File'}
    </div>
  );

@ -85,6 +89,7 @@ export default function Files() {
        searchString={searchString}
        onSearchChange={handleInputChange}
        showFilter={false}
+        icon={'file'}
      >
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
@ -104,7 +109,9 @@ export default function Files() {
          </DropdownMenuContent>
        </DropdownMenu>
      </ListFilterBar>
-      {!rowSelectionIsEmpty && <BulkOperateBar list={list}></BulkOperateBar>}
+      {!rowSelectionIsEmpty && (
+        <BulkOperateBar list={list} count={selectedCount}></BulkOperateBar>
+      )}
      <FilesTable
        files={files}
        total={total}
--- a/web/src/pages/files/knowledge-cell.tsx
+++ b/web/src/pages/files/knowledge-cell.tsx
@ -7,12 +7,13 @@ import {
  HoverCardTrigger,
 } from '@/components/ui/hover-card';
 import { IFile } from '@/interfaces/database/file-manager';
+import { Ellipsis } from 'lucide-react';
 import { useCallback } from 'react';

 export function KnowledgeCell({ value }: { value: IFile['kbs_info'] }) {
  const renderBadges = useCallback((list: IFile['kbs_info'] = []) => {
    return list.map((x) => (
-      <Badge key={x.kb_id} className="" variant={'tertiary'}>
+      <Badge key={x.kb_id} variant={'secondary'}>
        {x.kb_name}
      </Badge>
    ));
@ -25,8 +26,8 @@ export function KnowledgeCell({ value }: { value: IFile['kbs_info'] }) {
      {value.length > 2 && (
        <HoverCard>
          <HoverCardTrigger>
-            <Button variant={'icon'} size={'auto'}>
-              +{value.length - 2}
+            <Button variant={'ghost'} size={'sm'}>
+              <Ellipsis />
            </Button>
          </HoverCardTrigger>
          <HoverCardContent className="flex gap-2 flex-wrap">