Implementation:Infiniflow Ragflow ChunkCard Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Chunk_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React component that renders an interactive chunk card with HTML sanitization, image preview tooltips, and enable/disable toggling.
Description
The ChunkCard component displays a single document chunk within the knowledge base chunk list. It renders sanitized HTML content via DOMPurify, provides an image thumbnail with tooltip-based preview on hover, a checkbox for bulk selection, a switch for enabling/disabling the chunk, and supports click (select) and double-click (edit) interactions. The card visually indicates selection state with theme-aware styling and supports both full-text and ellipsis display modes controlled by the parent.
Usage
Rendered by the KnowledgeChunk container and DataflowChunker container for each chunk item in a paginated chunk list.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
- Lines: 1-148
Signature
interface IProps {
item: IChunk;
checked: boolean;
switchChunk: (available?: number, chunkIds?: string[]) => void;
editChunk: (chunkId: string) => void;
handleCheckboxClick: (chunkId: string, checked: boolean) => void;
selected: boolean;
clickChunkCard: (chunkId: string) => void;
textMode: ChunkTextMode;
t?: string | number;
}
const ChunkCard: React.FC<IProps>;
Import
import ChunkCard from '@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| item | IChunk | Yes | Chunk data object containing content, image_id, available_int, chunk_id, doc_type_kwd |
| checked | boolean | Yes | Whether the checkbox is currently checked |
| switchChunk | function | Yes | Callback to toggle chunk enabled/disabled state |
| editChunk | function | Yes | Callback triggered on double-click to open edit modal |
| handleCheckboxClick | function | Yes | Callback for checkbox selection toggling |
| selected | boolean | Yes | Whether this card is the currently selected chunk |
| clickChunkCard | function | Yes | Callback triggered on single click to select the chunk |
| textMode | ChunkTextMode | Yes | Controls full or ellipsis text display |
| t | string or number | No | Cache-busting key for image URLs |
Outputs
| Name | Type | Description |
|---|---|---|
| Card JSX | ReactNode | Rendered chunk card with checkbox, image tooltip, sanitized content, and switch |
Usage Examples
import ChunkCard from './components/chunk-card';
<ChunkCard
item={chunkItem}
key={chunkItem.chunk_id}
editChunk={showChunkUpdatingModal}
checked={selectedChunkIds.some((x) => x === chunkItem.chunk_id)}
handleCheckboxClick={handleSingleCheckboxClick}
switchChunk={handleSwitchChunk}
clickChunkCard={handleChunkCardClick}
selected={chunkItem.chunk_id === selectedChunkId}
textMode={textMode}
t={dataUpdatedAt}
/>