Implementation:Infiniflow Ragflow ChunkCard Component

Knowledge Sources	Infiniflow_Ragflow
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}
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment