Implementation:Infiniflow Ragflow ChunkResultBar Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Chunk_Management
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete React component that renders a toolbar with text display mode segmented control, search input, filter popover, and create chunk button.

Description

The ChunkResultBar component provides chunk list controls: a Segmented toggle for switching between full-text and ellipsis display modes, a SearchInput for keyword filtering, a Popover-based radio group filter for chunk availability status (all/enabled/disabled), and a plus button to create new chunks. The filter change handler deselects all currently selected chunks before applying the new filter.

Usage

Rendered at the top of the chunk list panel in both the KnowledgeChunk container and the DataflowChunker/Parser containers.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
• Lines: 1-102

Signature

interface ChunkResultBarProps {
  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
  available: number | undefined;
  selectAllChunk: (value: boolean) => void;
  handleSetAvailable: (value: number | undefined) => void;
  createChunk: () => void;
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  searchString: string;
}

export default function ChunkResultBar(props: ChunkResultBarProps): JSX.Element;

Import

import ChunkResultBar from '@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar';

I/O Contract

Inputs

Name	Type	Required	Description
changeChunkTextMode	function	Yes	Callback to switch between Full and Ellipse text modes
available	number or undefined	Yes	Current availability filter (undefined=all, 1=enabled, 0=disabled)
selectAllChunk	function	Yes	Callback to select/deselect all chunks
handleSetAvailable	function	Yes	Callback to set the availability filter value
createChunk	function	Yes	Callback to open the chunk creation modal
handleInputChange	function	Yes	Callback for search input changes
searchString	string	Yes	Current search keyword value

Outputs

Name	Type	Description
Toolbar JSX	ReactNode	Segmented control, search input, filter popover, and create button

Usage Examples

import ChunkResultBar from './components/chunk-result-bar';

<ChunkResultBar
  handleInputChange={handleInputChange}
  searchString={searchString}
  changeChunkTextMode={changeChunkTextMode}
  createChunk={showChunkUpdatingModal}
  available={available}
  selectAllChunk={selectAllChunk}
  handleSetAvailable={handleSetAvailable}
/>

Related Pages

• Principle:Infiniflow_Ragflow_Chunk_Filtering
• Environment:Infiniflow_Ragflow_Frontend_Node_Environment