Implementation:Infiniflow Ragflow ChunkCreatingModal Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Chunk_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React modal component for creating and editing document chunks with content, keywords, questions, tag features, image upload, and enable/disable toggle.
Description
The ChunkCreatingModal component renders a modal dialog for both chunk creation and editing. In edit mode (chunkId provided), it fetches existing chunk data via useFetchChunk and populates the form. The form includes: a Textarea for chunk content (content_with_weight), a read-only type field in edit mode, an image upload section (visible for image-type chunks in edit mode) using FileUploader with base64 conversion via FileReader, EditTag components for keywords (important_kwd) and questions (question_kwd) with a hover card tooltip, conditional tag name editing when parser is "tag" type, and TagFeatureItem for tag feature management when parser is not "tag" type. The tag features are transformed between array and object representations on load/submit. An enable/disable switch appears in edit mode.
Usage
Opened from the KnowledgeChunk container and DataflowChunker container when the user clicks the create button or double-clicks a chunk card to edit.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
- Lines: 1-300
Signature
interface kFProps {
doc_id: string;
chunkId: string | undefined;
parserId: string;
}
const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps>;
// IModalProps provides: hideModal, onOk, loading, visible
Import
import CreatingModal from '@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| doc_id | string | Yes | Document ID the chunk belongs to |
| chunkId | string or undefined | Yes | Chunk ID for editing; undefined for creation |
| parserId | string | Yes | Parser type; determines tag vs tag-feature UI |
| hideModal | function | Yes | Callback to close the modal |
| onOk | function | Yes | Submit callback receiving processed form values |
| loading | boolean | Yes | Submit button loading state |
Outputs
| Name | Type | Description |
|---|---|---|
| Modal JSX | ReactNode | Modal with form fields for chunk content, keywords, questions, tags, and image |
| onOk payload | FieldValues | Object with content_with_weight, tag_feas (object form), image_base64, available_int |
Usage Examples
import CreatingModal from './components/chunk-creating-modal';
{chunkUpdatingVisible && (
<CreatingModal
doc_id={documentId}
chunkId={chunkId}
hideModal={hideChunkUpdatingModal}
visible={chunkUpdatingVisible}
loading={chunkUpdatingLoading}
onOk={onChunkUpdatingOk}
parserId={documentInfo.parser_id}
/>
)}