Repository navigation
feat(mobile-web): render math formulas with katex in chat markdown - #3321
Merged
Merged
Conversation
Keep the KaTeX runtime out of the chat chunk by resolving the math renderer on demand, and only activate math when the message can contain formulas so currency-only dollar pairs keep rendering as text. Move the delimiter normalization into a pure module so both helpers are unit-testable, and drop the redundant @types/katex package because katex ships its own types.
Disable remark-math single-dollar parsing and widen only recognized inline formulas to the double-dollar form remark-math still parses. This keeps currency, shell variables, brace expansions, and Windows paths literal even when the same message contains formulas, while \( ... \) no longer pairs with a preceding currency dollar. Display delimiters stay block only on a top-level line and remain inline inside lists, tables, and blockquotes, and blockquoted or list-indented code fences are protected. Extend the unit and browser tests to cover the mixed text cases.
Move the KaTeX display containment rules to the chat page so thinking previews and background-receipt prompts get the same scrolling, theme the parse-error text, and log a failed math chunk load while keeping the base renderer.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds KaTeX math rendering support (
remark-mathandrehype-katex) to chat markdown messages inmobile-web. It supports inline ($...$,\(...\)) and block ($$...$$,\[...\]) LaTeX formulas with mobile-responsive horizontal scrolling.Type and Areas
Type: Feature
Areas: mobile web
Motivation / Impact
Currently, LaTeX math formulas sent in remote control chats are displayed as raw text (e.g.,
$\alpha$or$$\sum_{i=1}^n x_i$$), making technical discussions and math responses hard to read on mobile devices.This PR adds:
katex,remark-math, andrehype-katex.\(...\)-> inline math,\[...\]-> display math) with code-fence and inline-code protection..katex-displaywith horizontal scrolling and max-width bounds to prevent layout overflow on narrow mobile screens.Review updates
MarkdownMathContent.tsx, whichChatMarkdownimports on demand. The chat chunk stays near its pre-PR size; the ~280 kB KaTeX chunk is only fetched for messages that may contain math.remark-mathruns withsingleDollarTextMath: false, and only recognized formulas are widened to the$$...$$form it still parses. This keeps$5 and $10,$HOME,${VAR}, and Windows paths as text even when the same message also contains formulas, and it prevents a\(...\)conversion from pairing with an earlier currency dollar.$$...$$/\[...\]become a block only when they own a top-level line; inside lists, tables, and blockquotes they stay inline so the surrounding container is not torn apart.chatMarkdownMath.ts, with coverage for escaped delimiters, blockquoted/indented code fences, multi-backtick code, code-fence$$/$&payloads, currency, shell variables, and Windows paths.@types/katexdevDependency;katexships its own type definitions.Verification
pnpm --dir src/mobile-web run type-check: passed with zero type errors.pnpm --dir src/mobile-web run test:ui-components: passed (18/18, including lazy-load contracts, currency/shell gating, container-aware display math, and code isolation).pnpm --dir src/mobile-web run test:host-queue: passed (17/17, including real-browser KaTeX DOM, mixed currency/formula text, and code-fence preservation).pnpm --dir src/mobile-web run test:session-stream-browser: passed.pnpm --dir src/mobile-web run build: emits a separateMarkdownMathContentJS/CSS chunk.pnpm run check:repo-hygiene: passed.Reviewer Notes
katex/dist/katex.min.cssbundled with font handling compatible with mobile assets; the CSS is emitted with the lazy math chunk..katex-display) are constrained to viewport bounds with-webkit-overflow-scrolling: touchfor smooth touch scrolling.$abc$) is treated as text, not math, to avoid swallowing shell variables. Formulas should use TeX markers ($x^2$,$\alpha$) or two-character identifiers ($x$,$n$).$$contentwith content on the opening line and the closing fence on a later line is left untouched; standard$$fences and single-line$$...$$are supported.Checklist