Implementation:Infiniflow Ragflow RetrievalDocuments Component

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

Overview

Concrete React component that provides a multi-select document filter with keyboard support for controlling which documents are included in search retrieval results.

Description

The RetrievalDocuments component renders a Command-based popover for filtering retrieval documents in the search interface. It merges document lists from useAllTestingResult and useSelectTestingResult (using the larger list), then presents them as checkable options in a searchable Command dropdown. The component supports keyboard interaction: Enter opens the popover, Backspace removes the last selected value. Selection state is tracked locally via selectedValues and propagated upward through onValueChange which triggers both onTesting (to re-execute the search) and setSelectedDocumentIds. The trigger button displays a file count summary (selected/total). Loading state is synced with useChunkIsTesting via the optional setLoading callback. The popover footer provides clear and close command items, with a separator between the option list and footer actions.

Usage

Rendered in the search page sidebar to allow users to filter which documents contribute to retrieval results.

Code Reference

Source Location

Repository: Infiniflow_Ragflow
File: web/src/pages/next-search/retrieval-documents/index.tsx
Lines: 1-252

Signature

interface IProps {
  onTesting(documentIds: string[]): void;
  setSelectedDocumentIds(documentIds: string[]): void;
  selectedDocumentIds: string[];
  setLoading?: (loading: boolean) => void;
}

const RetrievalDocuments: React.FC<IProps>;
export default RetrievalDocuments;

Import

import RetrievalDocuments from '@/pages/next-search/retrieval-documents';

I/O Contract

Inputs

Name	Type	Required	Description
onTesting	function	Yes	Callback to trigger search re-execution with selected document IDs
setSelectedDocumentIds	function	Yes	Callback to update the parent's selected document ID state
selectedDocumentIds	string[]	Yes	Currently selected document IDs for display and initial state
setLoading	function	No	Optional callback to sync external loading state with testing status

Outputs

Name	Type	Description
Popover JSX	ReactNode	Command-based multi-select popover with search, checkable document list, and clear/close actions

Usage Examples

import RetrievalDocuments from '@/pages/next-search/retrieval-documents';

<RetrievalDocuments
  onTesting={handleTestSearch}
  selectedDocumentIds={selectedDocs}
  setSelectedDocumentIds={setSelectedDocs}
  setLoading={setSearchLoading}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment