Implementation:Infiniflow Ragflow MarkdownContent Component

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

Overview

Concrete React component that renders markdown content with a custom citation reference algorithm, LaTeX support, code syntax highlighting, and sanitized HTML.

Description

The MarkdownContent component renders AI-generated response text as rich markdown with inline citation references. It uses react-markdown with plugins: remarkGfm (tables/strikethrough), remarkMath and rehypeKatex (LaTeX rendering), rehypeRaw (inline HTML), and a custom rehypeWrapReference plugin that wraps text nodes in custom-typography elements for citation processing. Content is sanitized via DOMPurify (allowing think/section tags), then preprocessed through a pipeline of replaceTextByOldReg, replaceThinkToSection, and preprocessLaTeX. The citation algorithm uses reactStringReplace with currentReg to match reference markers, replacing them with Popover components that show chunk content with optional image preview, document thumbnail, and clickable document name. Reference data is resolved via getReferenceInfo which cross-references chunks with doc_aggs and fetches document thumbnails via useFetchDocumentThumbnailsByIds. Code blocks use react-syntax-highlighter with language detection.

Usage

Rendered in the search results page to display AI-generated answers with inline citation popovers linking back to source document chunks.

Code Reference

Source Location

Repository: Infiniflow_Ragflow
File: web/src/pages/next-search/markdown-content/index.tsx
Lines: 1-276

Signature

interface Props {
  content: string;
  loading: boolean;
  reference: IReference;
  clickDocumentButton?: (documentId: string, chunk: IReferenceChunk) => void;
}

const MarkdownContent: React.FC<Props>;
export default memo(MarkdownContent);

Import

import MarkdownContent from '@/pages/next-search/markdown-content';

I/O Contract

Inputs

Name	Type	Required	Description
content	string	Yes	Raw markdown/HTML content with citation markers
loading	boolean	Yes	Whether the content is still being generated
reference	IReference	Yes	Reference data with chunks array and doc_aggs for citation resolution
clickDocumentButton	function	No	Callback when a document name in a citation popover is clicked

Outputs

Name	Type	Description
Markdown JSX	ReactNode	Rendered markdown with inline citation popovers, LaTeX, code highlighting, and think sections

Usage Examples

import MarkdownContent from '@/pages/next-search/markdown-content';

<MarkdownContent
  content={aiResponse}
  loading={isGenerating}
  reference={referenceData}
  clickDocumentButton={(docId, chunk) => navigateToDocument(docId)}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment