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/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>