Implementation:Infiniflow Ragflow KnowledgeChunk Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Chunk_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React container component that provides the full knowledge chunk management page with document preview, chunk list, bulk operations, and chunk editing.
Description
The Chunk (KnowledgeChunk) component is the top-level container for the chunk management view within a knowledge base document. It features a split layout: a left panel (2/5 width) with DocumentHeader and DocumentPreview showing the original document with PDF highlight overlays, and a right panel (3/5 width) with the paginated chunk list. The right panel includes ChunkResultBar for search/filter/create, CheckboxSets for bulk select/enable/disable/delete, a scrollable list of ChunkCard components, and RAGFlowPagination. State management uses multiple composed hooks for selection, deletion, switching, and text mode. Breadcrumb navigation links back to the dataset list and dataset file view.
Usage
Accessed as the parsed-result/add-knowledge page when viewing chunks for a specific document within a knowledge base.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
- Lines: 1-317
Signature
const Chunk: React.FC;
// Default export - no props; relies on URL search params for documentId and knowledgeId
Import
import Chunk from '@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (URL params) | string | Yes | documentId and knowledgeId extracted from URL search params via hooks |
Outputs
| Name | Type | Description |
|---|---|---|
| Page JSX | ReactNode | Full chunk management page with document preview and chunk list |
Usage Examples
// Typically mounted via routing configuration
import Chunk from '@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk';
// In route config:
{ path: '/chunk/parsed-result/add-knowledge', component: Chunk }