import { marked, type Token, type Tokens } from 'marked' import React, { Suspense, use, useMemo, useRef } from 'react' import { useSettings } from '../hooks/useSettings.js' import { Ansi, Box, useTheme } from '@anthropic/ink' import { type CliHighlight, getCliHighlightPromise, } from '../utils/cliHighlight.js' import { hashContent } from '../utils/hash.js' import { configureMarked, formatToken } from '../utils/markdown.js' import { stripPromptXMLTags } from '../utils/messages.js' import { MarkdownTable } from './MarkdownTable.js' type Props = { children: string /** When true, render all text content as dim */ dimColor?: boolean } // Module-level token cache — marked.lexer is the hot cost on virtual-scroll // remounts (~3ms per message). useMemo doesn't survive unmount→remount, so // scrolling back to a previously-visible message re-parses. Messages are // immutable in history; same content → same tokens. Keyed by hash to avoid // retaining full content strings (turn50→turn99 RSS regression, #24180). const TOKEN_CACHE_MAX = 500 const tokenCache = new Map() // Characters that indicate markdown syntax. If none are present, skip the // ~3ms marked.lexer call entirely — render as a single paragraph. Covers // the majority of short assistant responses and user prompts that are // plain sentences. Checked via indexOf (not regex) for speed. // Single regex: matches any MD marker or ordered-list start (N. at line start). // One pass instead of 10× includes scans. const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. / function hasMarkdownSyntax(s: string): boolean { // Sample first 500 chars — if markdown exists it's usually early (headers, // code fence, list). Long tool outputs are mostly plain text tails. return MD_SYNTAX_RE.test(s.length > 500 ? s.slice(0, 500) : s) } function cachedLexer(content: string): Token[] { // Fast path: plain text with no markdown syntax → single paragraph token. // Skips marked.lexer's full GFM parse (~3ms on long content). Not cached — // reconstruction is a single object allocation, and caching would retain // 4× content in raw/text fields plus the hash key for zero benefit. if (!hasMarkdownSyntax(content)) { return [ { type: 'paragraph', raw: content, text: content, tokens: [{ type: 'text', raw: content, text: content }], } as Token, ] } const key = hashContent(content) const hit = tokenCache.get(key) if (hit) { // Promote to MRU — without this the eviction is FIFO (scrolling back to // an early message evicts the very item you're looking at). tokenCache.delete(key) tokenCache.set(key, hit) return hit } const tokens = marked.lexer(content) if (tokenCache.size >= TOKEN_CACHE_MAX) { // LRU-ish: drop oldest. Map preserves insertion order. const first = tokenCache.keys().next().value if (first !== undefined) tokenCache.delete(first) } tokenCache.set(key, tokens) return tokens } /** * Renders markdown content using a hybrid approach: * - Tables are rendered as React components with proper flexbox layout * - Other content is rendered as ANSI strings via formatToken */ export function Markdown(props: Props): React.ReactNode { const settings = useSettings() if (settings.syntaxHighlightingDisabled) { return } // Suspense fallback renders with highlight=null — plain markdown shows // for ~50ms on first ever render while cli-highlight loads. return ( }> ) } function MarkdownWithHighlight(props: Props): React.ReactNode { const highlight = use(getCliHighlightPromise()) return } function MarkdownBody({ children, dimColor, highlight, }: Props & { highlight: CliHighlight | null }): React.ReactNode { const [theme] = useTheme() configureMarked() const elements = useMemo(() => { const tokens = cachedLexer(stripPromptXMLTags(children)) const elements: React.ReactNode[] = [] let nonTableContent = '' function flushNonTableContent(): void { if (nonTableContent) { elements.push( {nonTableContent.trim()} , ) nonTableContent = '' } } for (const token of tokens) { if (token.type === 'table') { flushNonTableContent() elements.push( , ) } else { nonTableContent += formatToken(token, theme, 0, null, null, highlight) } } flushNonTableContent() return elements }, [children, dimColor, highlight, theme]) return ( {elements} ) } type StreamingProps = { children: string } /** * Renders markdown during streaming by splitting at the last top-level block * boundary: everything before is stable (memoized, never re-parsed), only the * final block is re-parsed per delta. marked.lexer() correctly handles * unclosed code fences as a single token, so block boundaries are always safe. * * The stable boundary only advances (monotonic), so ref mutation during render * is idempotent and safe under StrictMode double-rendering. Component unmounts * between turns (streamingText → null), resetting the ref. */ export function StreamingMarkdown({ children, }: StreamingProps): React.ReactNode { // React Compiler: this component reads and writes stablePrefixRef.current // during render by design. The boundary only advances (monotonic), so // the ref mutation is idempotent under StrictMode double-render — but the // compiler can't prove that, and memoizing around the ref reads would // break the algorithm (stale boundary). Opt out. 'use no memo' configureMarked() // Strip before boundary tracking so it matches 's stripping // (line 29). When a closing tag arrives, stripped(N+1) is not a prefix // of stripped(N), but the startsWith reset below handles that with a // one-time re-lex on the smaller stripped string. const stripped = stripPromptXMLTags(children) const stablePrefixRef = useRef('') // Reset if text was replaced (defensive; normally unmount handles this) if (!stripped.startsWith(stablePrefixRef.current)) { stablePrefixRef.current = '' } // Lex only from current boundary — O(unstable length), not O(full text) const boundary = stablePrefixRef.current.length const tokens = marked.lexer(stripped.substring(boundary)) // Last non-space token is the growing block; everything before is final let lastContentIdx = tokens.length - 1 while (lastContentIdx >= 0 && tokens[lastContentIdx]!.type === 'space') { lastContentIdx-- } let advance = 0 for (let i = 0; i < lastContentIdx; i++) { advance += tokens[i]!.raw.length } if (advance > 0) { stablePrefixRef.current = stripped.substring(0, boundary + advance) } const stablePrefix = stablePrefixRef.current const unstableSuffix = stripped.substring(stablePrefix.length) // stablePrefix is memoized inside via useMemo([children, ...]) // so it never re-parses as the unstable suffix grows return ( {stablePrefix && {stablePrefix}} {unstableSuffix && {unstableSuffix}} ) }