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/action-cell.tsx

@@ -1,4 +1,5 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import NewDocumentLink from '@/components/new-document-link';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -9,8 +10,12 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useDownloadFile } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
+import {
+  getExtension,
+  isSupportedPreviewDocumentType,
+} from '@/utils/document-util';
 import { CellContext } from '@tanstack/react-table';
-import { EllipsisVertical, Link2, Trash2 } from 'lucide-react';
+import { EllipsisVertical, Eye, Link2, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -18,6 +23,7 @@ import {
   UseRenameCurrentFileReturnType,
 } from './hooks';
 import { UseMoveDocumentShowType } from './use-move-file';
+import { isFolderType } from './util';
 
 type IProps = Pick<CellContext<IFile, unknown>, 'row'> &
   Pick<UseHandleConnectToKnowledgeReturnType, 'showConnectToKnowledgeModal'> &
@@ -34,6 +40,8 @@ export function ActionCell({
   const record = row.original;
   const documentId = record.id;
   const { downloadFile } = useDownloadFile();
+  const isFolder = isFolderType(record.type);
+  const extension = getExtension(record.name);
 
   const handleShowConnectToKnowledgeModal = useCallback(() => {
     showConnectToKnowledgeModal(record);
@@ -57,20 +65,31 @@ export function ActionCell({
   return (
     <section className="flex gap-4 items-center">
       <Button
-        variant="secondary"
+        variant="ghost"
         size={'icon'}
         onClick={handleShowConnectToKnowledgeModal}
       >
         <Link2 />
       </Button>
       <ConfirmDeleteDialog>
-        <Button variant="secondary" size={'icon'}>
+        <Button variant="ghost" size={'icon'}>
           <Trash2 />
         </Button>
       </ConfirmDeleteDialog>
+      {isSupportedPreviewDocumentType(extension) && (
+        <NewDocumentLink
+          documentId={documentId}
+          documentName={record.name}
+          color="black"
+        >
+          <Button variant={'ghost'} size={'icon'}>
+            <Eye />
+          </Button>
+        </NewDocumentLink>
+      )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="secondary" size={'icon'}>
+          <Button variant="ghost" size={'icon'}>
             <EllipsisVertical />
           </Button>
         </DropdownMenuTrigger>
@@ -83,9 +102,11 @@ export function ActionCell({
             {t('common.rename')}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={onDownloadDocument}>
-            {t('common.download')}
-          </DropdownMenuItem>
+          {isFolder || (
+            <DropdownMenuItem onClick={onDownloadDocument}>
+              {t('common.download')}
+            </DropdownMenuItem>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
     </section>