Feat: Add FilesTable #3221 (#4491)

### What problem does this PR solve?

Feat: Add FilesTable #3221

### Type of change


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

web/src/app.tsx

@@ -15,6 +15,7 @@ import weekYear from 'dayjs/plugin/weekYear';
 import weekday from 'dayjs/plugin/weekday';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { ThemeProvider, useTheme } from './components/theme-provider';
+import { TooltipProvider } from './components/ui/tooltip';
 import storage from './utils/authorization-util';
 
 dayjs.extend(customParseFormat);
@@ -78,11 +79,13 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
   }, []);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider defaultTheme="light" storageKey="ragflow-ui-theme">
-        <Root>{children}</Root>
-      </ThemeProvider>
-    </QueryClientProvider>
+    <TooltipProvider>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider defaultTheme="light" storageKey="ragflow-ui-theme">
+          <Root>{children}</Root>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </TooltipProvider>
   );
 };
 export function rootContainer(container: ReactNode) {

web/src/components/list-filter-bar.tsx

@@ -1,6 +1,7 @@
-import { Filter, Search } from 'lucide-react';
+import { Filter } from 'lucide-react';
 import { PropsWithChildren } from 'react';
 import { Button } from './ui/button';
+import { SearchInput } from './ui/input';
 
 interface IProps {
   title: string;
@@ -17,7 +18,7 @@ export default function ListFilterBar({
       <span className="text-3xl font-bold ">{title}</span>
       <div className="flex gap-4 items-center">
         <Filter className="size-5" />
-        <Search className="size-5" />
+        <SearchInput></SearchInput>
         <Button variant={'tertiary'} size={'sm'} onClick={showDialog}>
           {children}
         </Button>

web/src/components/skeleton-card.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3 items-center">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2 w-[250px]">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}

web/src/components/table-skeleton.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { SkeletonCard } from './skeleton-card';
+import { TableCell, TableRow } from './ui/table';
+
+type IProps = { columnsLength: number };
+
+function Row({ children, columnsLength }: PropsWithChildren & IProps) {
+  return (
+    <TableRow>
+      <TableCell colSpan={columnsLength} className="h-24 text-center ">
+        {children}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function TableSkeleton({ columnsLength }: { columnsLength: number }) {
+  return (
+    <Row columnsLength={columnsLength}>
+      <SkeletonCard></SkeletonCard>
+    </Row>
+  );
+}
+
+export function TableEmpty({ columnsLength }: { columnsLength: number }) {
+  return <Row columnsLength={columnsLength}>No results.</Row>;
+}

web/src/components/ui/input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { Search } from 'lucide-react';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -22,4 +23,38 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = 'Input';
 
-export { Input };
+export interface ExpandedInputProps extends Omit<InputProps, 'prefix'> {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
+  return (
+    <div className="relative">
+      <span
+        className={cn({
+          ['absolute left-3 top-[50%] translate-y-[-50%]']: prefix,
+        })}
+      >
+        {prefix}
+      </span>
+      <Input
+        className={cn({ 'pr-10': suffix, 'pl-10': prefix })}
+        {...props}
+      ></Input>
+      <span
+        className={cn({
+          ['absolute right-3 top-[50%] translate-y-[-50%]']: suffix,
+        })}
+      >
+        {suffix}
+      </span>
+    </div>
+  );
+};
+
+const SearchInput = (props: InputProps) => {
+  return <ExpandedInput suffix={<Search />} {...props}></ExpandedInput>;
+};
+
+export { ExpandedInput, Input, SearchInput };

web/src/layouts/next-header.tsx

@@ -10,6 +10,7 @@ import { Routes } from '@/routes';
 import {
   ChevronDown,
   Cpu,
+  File,
   Github,
   House,
   Library,
@@ -33,7 +34,7 @@ export function Header() {
       { path: Routes.Chat, name: t('chat'), icon: MessageSquareText },
       { path: Routes.Search, name: t('search'), icon: Search },
       { path: Routes.Agent, name: t('flow'), icon: Cpu },
-      // { path: '/file', name: t('fileManager'), icon: FileIcon },
+      { path: Routes.Files, name: t('fileManager'), icon: File },
     ],
     [t],
   );

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

@@ -13,7 +13,7 @@ export default function Dataset() {
     documentUploadLoading,
   } = useHandleUploadDocument();
   return (
-    <section className="p-8 text-foreground">
+    <section className="p-8">
       <ListFilterBar title="Files" showDialog={showDocumentUploadModal}>
         <Upload />
         Upload file

web/src/pages/datasets/dataset-creating-dialog.tsx

@@ -50,7 +50,7 @@ export function InputForm() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="w-2/3 space-y-6"
+        className="space-y-6"
         id={FormId}
       >
         <FormField

web/src/pages/file-manager/action-cell/index.tsx

@@ -1,5 +1,4 @@
 import NewDocumentLink from '@/components/new-document-link';
-import SvgIcon from '@/components/svg-icon';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useDownloadFile } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
@@ -8,13 +7,13 @@ import {
   isSupportedPreviewDocumentType,
 } from '@/utils/document-util';
 import {
-  DeleteOutlined,
   DownloadOutlined,
   EditOutlined,
   EyeOutlined,
   LinkOutlined,
 } from '@ant-design/icons';
 import { Button, Space, Tooltip } from 'antd';
+import { FolderInput, Trash2 } from 'lucide-react';
 import { useHandleDeleteFile } from '../hooks';
 
 interface IProps {
@@ -92,15 +91,21 @@ const ActionCell = ({
             type="text"
             disabled={beingUsed}
             onClick={onShowMoveFileModal}
+            className="flex items-end"
           >
-            <SvgIcon name={`move`} width={16}></SvgIcon>
+            <FolderInput className="size-4" />
           </Button>
         </Tooltip>
       )}
       {isKnowledgeBase || (
         <Tooltip title={t('delete', { keyPrefix: 'common' })}>
-          <Button type="text" disabled={beingUsed} onClick={handleRemoveFile}>
-            <DeleteOutlined size={20} />
+          <Button
+            type="text"
+            disabled={beingUsed}
+            onClick={handleRemoveFile}
+            className="flex items-end"
+          >
+            <Trash2 className="size-4" />
           </Button>
         </Tooltip>
       )}

web/src/pages/file-manager/file-toolbar.tsx

@@ -1,5 +1,3 @@
-import { ReactComponent as DeleteIcon } from '@/assets/svg/delete.svg';
-import SvgIcon from '@/components/svg-icon';
 import { useTranslate } from '@/hooks/common-hooks';
 import {
   IListResult,
@@ -29,6 +27,7 @@ import {
   useSelectBreadcrumbItems,
 } from './hooks';
 
+import { FolderInput, Trash2 } from 'lucide-react';
 import styles from './index.less';
 
 interface IProps
@@ -127,8 +126,8 @@ const FileToolbar = ({
         onClick: handleRemoveFile,
         label: (
           <Flex gap={10}>
-            <span className={styles.deleteIconWrapper}>
-              <DeleteIcon width={18} />
+            <span className="flex items-center justify-center">
+              <Trash2 className="size-4" />
             </span>
             <b>{t('delete', { keyPrefix: 'common' })}</b>
           </Flex>
@@ -139,8 +138,8 @@ const FileToolbar = ({
         onClick: handleShowMoveFileModal,
         label: (
           <Flex gap={10}>
-            <span className={styles.deleteIconWrapper}>
-              <SvgIcon name={`move`} width={18}></SvgIcon>
+            <span className="flex items-center justify-center">
+              <FolderInput className="size-4"></FolderInput>
             </span>
             <b>{t('move', { keyPrefix: 'common' })}</b>
           </Flex>