Implementation:Infiniflow Ragflow SearchView Component

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

Overview

Concrete search results view component with AI answer and document list provided by the RAGFlow frontend.

Description

The SearchingView component renders the full search results page layout including a branded header with search input, an AI Summary section with streaming markdown content, retrieval document filters, a paginated list of chunk results with highlighted text and image popovers, related question suggestions, pagination controls, a mind map drawer toggle, and a PDF preview drawer for document viewing. It receives all search state from the `useSearching` hook via props and delegates rendering to sub-components like `MarkdownContent`, `RetrievalDocuments`, `MindMapDrawer`, and `PdfDrawer`.

Usage

Import as the default export and spread the `ISearchReturnProps` from `useSearching` along with the search app data. Renders as the main content area of the search page.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/next-search/search-view.tsx
• Lines: 1-342

Signature

export default function SearchingView(
  props: ISearchReturnProps & {
    setIsSearching?: Dispatch<SetStateAction<boolean>>;
    searchData: ISearchAppDetailProps;
  }
): JSX.Element;

Import

import SearchingView from '@/pages/next-search/search-view';

I/O Contract

Inputs

Name	Type	Required	Description
searchData	ISearchAppDetailProps	Yes	Search application config with kb_ids, summary, related_search, query_mindmap settings
answer	IAnswer	Yes	AI-generated answer object with answer text and references
sendingLoading	boolean	Yes	Whether the AI answer stream is in progress
chunks	IChunk[]	Yes	Array of retrieved document chunks to display
total	number	Yes	Total chunk count for pagination
relatedQuestions	string[]	Yes	Suggested related questions
searchStr	string	Yes	Current search query string
handleSearch	(value: string) => void	Yes	Triggers a new search
handleClickRelatedQuestion	(question: string, enableAI?: boolean) => () => void	Yes	Handler for clicking a related question
pagination	object	Yes	Current pagination state
onChange	(page: number, pageSize: number) => void	Yes	Pagination change callback
setIsSearching	Dispatch<SetStateAction<boolean>>	No	Callback to navigate back from search results

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	Renders the complete search results view with AI summary, chunk list, related questions, mind map, and PDF preview

Usage Examples

import SearchingView from '@/pages/next-search/search-view';

<SearchingView
  {...searchProps}
  setIsSearching={setIsSearching}
  searchData={searchAppDetail}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment