Implementation:Infiniflow Ragflow ChunkHooks
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Chunk_Management, React_Hooks |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete collection of React hooks for chunk management including card selection, PDF highlight generation, text display mode toggling, chunk deletion, and chunk creation/update.
Description
The hooks.ts module for the knowledge-chunk page exports five hooks: useHandleChunkCardClick manages selected chunk ID state; useGetSelectedChunk retrieves the full chunk object from the chunk list by ID; useGetChunkHighlights converts the selected chunk's position data into react-pdf-highlighter highlights with dynamic page size tracking; useChangeChunkTextMode toggles between Full and Ellipse text display; useDeleteChunkByIds wraps chunk deletion with a confirmation dialog; and useUpdateChunk manages the chunk creation/editing modal lifecycle including form submission via createChunk API.
Usage
Imported by the KnowledgeChunk container component and the DataflowChunker container to compose chunk management behavior.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/hooks.ts
- Lines: 1-129
Signature
export const useHandleChunkCardClick: () => {
handleChunkCardClick: (chunkId: string) => void;
selectedChunkId: string;
};
export const useGetSelectedChunk: (selectedChunkId: string) => IChunk;
export const useGetChunkHighlights: (selectedChunkId: string) => {
highlights: IHighlight[];
setWidthAndHeight: (width: number, height: number) => void;
};
export const useChangeChunkTextMode: () => {
textMode: ChunkTextMode;
changeChunkTextMode: (mode: ChunkTextMode) => void;
};
export const useDeleteChunkByIds: () => {
removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
};
export const useUpdateChunk: () => {
chunkUpdatingLoading: boolean;
onChunkUpdatingOk: (params: IChunk) => Promise<void>;
chunkUpdatingVisible: boolean;
hideChunkUpdatingModal: () => void;
showChunkUpdatingModal: (id?: string) => Promise<void>;
chunkId: string | undefined;
documentId: string;
};
Import
import {
useHandleChunkCardClick,
useGetChunkHighlights,
useChangeChunkTextMode,
useDeleteChunkByIds,
useUpdateChunk,
} from './hooks';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| selectedChunkId | string | Yes (for useGetSelectedChunk, useGetChunkHighlights) | The ID of the currently selected chunk |
Outputs
| Name | Type | Description |
|---|---|---|
| useHandleChunkCardClick() | object | selectedChunkId state and click handler |
| useGetChunkHighlights() | object | PDF highlight positions and size setter |
| useDeleteChunkByIds() | object | removeChunk function with confirmation dialog |
| useUpdateChunk() | object | Modal state, loading, and CRUD callbacks for chunk editing |
Usage Examples
import { useHandleChunkCardClick, useGetChunkHighlights, useUpdateChunk } from './hooks';
function ChunkPage() {
const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
const { highlights, setWidthAndHeight } = useGetChunkHighlights(selectedChunkId);
const { showChunkUpdatingModal, chunkUpdatingVisible, onChunkUpdatingOk } = useUpdateChunk();
return (
<>
<DocumentPreview highlights={highlights} setWidthAndHeight={setWidthAndHeight} />
{chunkUpdatingVisible && <CreatingModal onOk={onChunkUpdatingOk} />}
</>
);
}