Implementation:Infiniflow Ragflow FilesActionCell Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, File_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React component that renders a row-level action cell in the file manager table with multiple conditional operations including link, move, rename, download, preview, and delete.
Description
The ActionCell component renders a set of action buttons for a single file row in the file manager table. Each button is conditionally displayed based on file type guards: isKnowledgeBase (source_type === 'knowledgebase') hides link-to-KB, move, rename, and delete; isFolder hides the download button; isSupportedPreviewDocumentType controls the eye/preview button visibility. Actions include: Link2 to connect to a knowledge base, FolderInput to move the file, FolderPen to rename, ArrowDownToLine to download via useDownloadFile, Eye wrapped in NewDocumentLink for preview navigation, and Trash2 with ConfirmDeleteDialog for deletion. The entire action cell uses opacity transitions that appear on row hover.
Usage
Rendered as the action column cell in the FilesTable component within the file manager page.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/files/action-cell.tsx
- Lines: 1-196
Signature
type IProps = Pick<CellContext<IFile, unknown>, 'row'> &
Pick<UseHandleConnectToKnowledgeReturnType, 'showConnectToKnowledgeModal'> &
Pick<UseRenameCurrentFileReturnType, 'showFileRenameModal'> &
UseMoveDocumentShowType;
export function ActionCell({
row,
showConnectToKnowledgeModal,
showFileRenameModal,
showMoveFileModal,
}: IProps): JSX.Element;
Import
import { ActionCell } from '@/pages/files/action-cell';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| row | Row<IFile> | Yes | TanStack Table row object containing the file record |
| showConnectToKnowledgeModal | function | Yes | Callback to show the link-to-KB dialog for the file |
| showFileRenameModal | function | Yes | Callback to show the rename dialog for the file |
| showMoveFileModal | function | Yes | Callback to show the move dialog with the file ID |
Outputs
| Name | Type | Description |
|---|---|---|
| Action buttons JSX | ReactNode | Row of conditionally rendered icon buttons with hover-reveal opacity transition |
Usage Examples
import { ActionCell } from './action-cell';
// In table column definition:
{
id: 'actions',
cell: ({ row }) => (
<ActionCell
row={row}
showConnectToKnowledgeModal={showConnectToKnowledgeModal}
showFileRenameModal={showFileRenameModal}
showMoveFileModal={showMoveFileModal}
/>
),
}