Feat: Preview the file #3221 (#7355)

### What problem does this PR solve?

Feat: Preview the file #3221

### Type of change


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

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

@@ -17,7 +17,6 @@ import * as React from 'react';
 import { RenameDialog } from '@/components/rename-dialog';
 import SvgIcon from '@/components/svg-icon';
 import { TableEmpty, TableSkeleton } from '@/components/table-skeleton';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -44,9 +43,11 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionCell } from './action-cell';
 import { useHandleConnectToKnowledge, useRenameCurrentFile } from './hooks';
+import { KnowledgeCell } from './knowledge-cell';
 import { LinkToDatasetDialog } from './link-to-dataset-dialog';
 import { UseMoveDocumentShowType } from './use-move-file';
 import { useNavigateToOtherFolder } from './use-navigate-to-folder';
+import { isFolderType } from './util';
 
 type FilesTableProps = Pick<
   ReturnType<typeof useFetchFileList>,
@@ -133,7 +134,7 @@ export function FilesTable({
         const name: string = row.getValue('name');
         const type = row.original.type;
         const id = row.original.id;
-        const isFolder = type === 'folder';
+        const isFolder = isFolderType(type);
 
         const handleNameClick = () => {
           if (isFolder) {
@@ -204,24 +205,8 @@ export function FilesTable({
       accessorKey: 'kbs_info',
       header: t('knowledgeBase'),
       cell: ({ row }) => {
-        const value = row.getValue('kbs_info');
-        return Array.isArray(value) ? (
-          <section className="flex gap-2 items-center">
-            {value?.slice(0, 2).map((x) => (
-              <Badge key={x.kb_id} className="" variant={'tertiary'}>
-                {x.kb_name}
-              </Badge>
-            ))}
-
-            {value.length > 2 && (
-              <Button variant={'icon'} size={'auto'}>
-                +{value.length - 2}
-              </Button>
-            )}
-          </section>
-        ) : (
-          ''
-        );
+        const value: IFile['kbs_info'] = row.getValue('kbs_info');
+        return <KnowledgeCell value={value}></KnowledgeCell>;
       },
     },
     {