Fix: Refactoring and enhancing the functionality of the delete confirmation dialog component #10703 (#11542)

### What problem does this PR solve?

Fix: Refactoring and enhancing the functionality of the delete
confirmation dialog component

- Refactoring and enhancing the functionality of the delete confirmation
dialog component
- Modifying the style of the user center

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/files/action-cell.tsx

@@ -1,13 +1,19 @@
-import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import {
+  ConfirmDeleteDialog,
+  ConfirmDeleteDialogNode,
+} from '@/components/confirm-delete-dialog';
+import { FileIcon } from '@/components/icon-font';
 import NewDocumentLink from '@/components/new-document-link';
 import { Button } from '@/components/ui/button';
 import { useDownloadFile } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
+import { cn } from '@/lib/utils';
 import {
   getExtension,
   isSupportedPreviewDocumentType,
 } from '@/utils/document-util';
 import { CellContext } from '@tanstack/react-table';
+import { t } from 'i18next';
 import {
   ArrowDownToLine,
   Eye,
@@ -38,6 +44,9 @@ export function ActionCell({
 }: IProps) {
   const record = row.original;
   const documentId = record.id;
+  const name: string = row.getValue('name');
+  const type = record.type;
+
   const { downloadFile } = useDownloadFile();
   const isFolder = isFolderType(record.type);
   const extension = getExtension(record.name);
@@ -151,7 +160,28 @@ export function ActionCell({
         </DropdownMenuContent>
       </DropdownMenu> */}
       {isKnowledgeBase || (
-        <ConfirmDeleteDialog onOk={onRemoveFile}>
+        <ConfirmDeleteDialog
+          onOk={onRemoveFile}
+          title={t('deleteModal.delFile')}
+          content={{
+            node: (
+              <ConfirmDeleteDialogNode>
+                <div className="flex items-center gap-2 text-text-secondary">
+                  <span className="size-4">
+                    <FileIcon name={name} type={type}></FileIcon>
+                  </span>
+                  <span
+                    className={cn('truncate text-xs', {
+                      ['cursor-pointer']: isFolder,
+                    })}
+                  >
+                    {name}
+                  </span>
+                </div>
+              </ConfirmDeleteDialogNode>
+            ),
+          }}
+        >
           <Button
             variant="transparent"
             className="border-none hover:bg-bg-card text-text-primary"