index.tsx

Overview

This file defines a React functional component MarkdownContent responsible for rendering rich Markdown content enhanced with custom reference handling, LaTeX math rendering, syntax highlighting, and embedded images. It integrates various utilities and hooks to sanitize content, preprocess LaTeX expressions, and display interactive references linked to documents and images. The component is designed for a chat or knowledge base UI where messages or content may contain citations or references to external documents.

Detailed Explanation

Component: MarkdownContent

A React component that renders Markdown content with advanced features such as:

• Sanitization and preprocessing of content including LaTeX and custom text replacements.

• Reference handling with popovers showing document and image previews.

• Syntax highlighting for code blocks.

• Math rendering using KaTeX.

• Interaction with external documents via buttons or image clicks.

Props

Returns

• React JSX Element rendering the processed Markdown content with interactive references and syntax highlighting.

Internal Functions and Methods

getChunkIndex(match: string): number

• Parses a string match to extract the chunk index number.

• Used for identifying which reference chunk corresponds to a matched substring.

rehypeWrapReference()

• Returns a rehype plugin function.

• Transforms Markdown AST nodes to wrap plain text nodes in a custom tag , except inside code blocks or existing custom components.

• Enables custom rendering of these text nodes to apply reference replacement logic.

getReferenceInfo(chunkIndex: number)

• Retrieves detailed information about a reference chunk by its index:

  • Document URL, thumbnail, file extension.

  • Image ID associated with the chunk.

  • The chunk item itself and the document metadata.

• Uses fileThumbnails fetched via hook and the passed reference prop.

getPopoverContent(chunkIndex: number)

• Renders the content of a Popover UI component for a given reference chunk index.

• Displays an image preview (if any), sanitized chunk content, and a clickable document link or icon.

• Makes use of Ant Design components (Popover, Button, Flex) and custom styles.

handleDocumentButtonClick(documentId, chunk, isPdf, documentUrl): () => void

• Returns a callback function that handles clicks on document buttons or images.

• If the file is PDF, it triggers the passed clickDocumentButton callback.

• Otherwise, opens the document URL in a new browser tab.

renderReference(text: string)

• Uses reactStringReplace to find all reference patterns matching currentReg regex in the text.

• Replaces matches with either:

  • An embedded image (if document type indicates image).

  • An info icon wrapped in a Popover showing detailed reference content.

• Enables inline interactive references within the Markdown content.

JSX Render

• The component uses the Markdown component from react-markdown library.

• It applies plugins:

  • rehypeWrapReference for custom text wrapping.

  • rehypeKatex and remarkMath for LaTeX math rendering.

  • rehypeRaw for raw HTML support.

  • remarkGfm for GitHub flavored Markdown support.

• Custom renderers:

  • For tags, replaces children with rendered references.

  • For blocks, uses SyntaxHighlighter for language-specific code highlighting or renders inline code with wrapping.

Implementation Details and Algorithms

• Content Preprocessing Pipeline: The content is sanitized, then passed through a functional pipeline using Lodash pipe to apply replaceThinkToSection and preprocessLaTeX transformations before rendering. This modular approach allows easy addition/removal of preprocessing steps.

• Reference Parsing and Rendering: Uses regex (currentReg) to identify embedded references in the text. References are replaced with React components dynamically that either show an image or an info icon with a popover. This dual rendering strategy is based on the document type (image or other).

• Lazy Thumbnail Loading: The component uses the useFetchDocumentThumbnailsByIds hook to fetch thumbnails of referenced documents asynchronously when reference.doc_aggs changes.

• AST Transformation: The custom rehypeWrapReference plugin traverses the Markdown AST to wrap text nodes in a custom tag, enabling fine-grained control over text rendering and reference injection.

• Security: Uses DOMPurify.sanitize to clean any HTML content from references before dangerously setting inner HTML, preventing XSS attacks.

Interactions with Other System Parts

• Depends on external hooks and utilities:

  • useFetchDocumentThumbnailsByIds for asynchronously fetching document thumbnails.

  • preprocessLaTeX, replaceThinkToSection, showImage utilities for content transformations.

  • getExtension utility to get file extensions from document names.

  • currentReg regex and replaceTextByOldReg for reference pattern matching and replacement.

• Uses Ant Design UI components (Button, Popover, Flex) for interactive UI elements.

• Uses react-markdown ecosystem plugins for Markdown parsing and rendering.

• Imports CSS for KaTeX math rendering and custom LESS styles.

The component is likely embedded in a chat or document viewer UI where messages or content may contain inline references to documents or images. It provides a rich interactive experience by linking text references to actual document resources and previews.

Usage Example

import MarkdownContent from './index';

const myReference = {
  doc_aggs: [
    { doc_id: 'doc1', doc_name: 'example.pdf', url: 'http://example.com/example.pdf' },
  ],
  chunks: [
    { id: 'chunk1', document_id: 'doc1', content: 'Example content', image_id: 'img1', doc_type: 'pdf' },
  ],
};

<MarkdownContent
  content={"Here is a reference [ref:0] in the text."}
  loading={false}
  reference={myReference}
  clickDocumentButton={(docId, chunk) => console.log(`Open ${docId} chunk`, chunk)}
/>

Visual Diagram

componentDiagram
    direction TB
    MarkdownContent -- uses --> Markdown
    MarkdownContent -- uses --> reactStringReplace
    MarkdownContent -- uses --> DOMPurify
    MarkdownContent -- uses --> useFetchDocumentThumbnailsByIds
    MarkdownContent -- uses --> useTranslation
    MarkdownContent -- uses --> rehypeWrapReference
    MarkdownContent -- uses --> getReferenceInfo
    MarkdownContent -- uses --> getPopoverContent
    MarkdownContent -- uses --> handleDocumentButtonClick

    MarkdownContent <.. Button : renders
    MarkdownContent <.. Popover : renders
    MarkdownContent <.. Image : renders thumbnails and chunk images
    MarkdownContent <.. SvgIcon : renders file icons
    MarkdownContent <.. SyntaxHighlighter : renders code blocks

    MarkdownContent --> preprocessLaTeX
    MarkdownContent --> replaceThinkToSection

Summary

The index.tsx file exports the MarkdownContent React component which renders Markdown enriched with interactive references to documents and images. It preprocesses content including LaTeX and custom text replacements, uses AST transformations to inject reference markup, and renders popovers with document previews and links. This component is a key part of a chat or document viewer interface that integrates document metadata and thumbnails into rich textual content.