Implementation:Infiniflow Ragflow FloatingChatWidgetMarkdown Component

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

Overview

Concrete Markdown renderer for embedded chat with citation support, syntax highlighting, and math formula rendering provided by the RAGFlow frontend.

Description

The FloatingChatWidgetMarkdown component renders AI-generated Markdown with citation references (popover with document thumbnails), syntax-highlighted code blocks, and LaTeX math support via rehype-katex and remark-math.

Usage

Import this component within the floating chat widget to render assistant message content with inline citation references and code formatting.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/floating-chat-widget-markdown.tsx
• Lines: 1-330

Signature

export function FloatingChatWidgetMarkdown({
  reference,
  clickDocumentButton,
  content,
  loading,
}: {
  reference: IReference;
  clickDocumentButton?: (documentId: string, chunk: IReferenceChunk) => void;
  content: string;
  loading: boolean;
}): JSX.Element;

Import

import { FloatingChatWidgetMarkdown } from '@/components/floating-chat-widget-markdown';

I/O Contract

Inputs

Name	Type	Required	Description
reference	IReference	Yes	Citation reference data
content	string	Yes	Markdown text to render
loading	boolean	Yes	Whether content is still streaming
clickDocumentButton	function	No	Callback when citation clicked

Outputs

Name	Type	Description
Rendered JSX	JSX.Element	Formatted Markdown with citations

Usage Examples

import { FloatingChatWidgetMarkdown } from '@/components/floating-chat-widget-markdown';

<FloatingChatWidgetMarkdown
  reference={messageRef}
  content={message.content}
  loading={isStreaming}
  clickDocumentButton={(docId, chunk) => openDocument(docId)}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment