fix(web): render LaTeX math in chat - #7166
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
There was a problem hiding this comment.
Reviewed the math rendering changes in apps/web/src/components/ChatMarkdown.tsx for consistency with the existing chat-markdown rendering contracts. Four concrete issues, mostly about math being rendered inconsistently across call sites and about the new generated markup missing the block/copy contracts the other markdown blocks already have.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
Every other rendered-markdown block gets its geometry from the .chat-markdown … rules in index.css (pre gets max-width: 100%; overflow-x: auto, tables get the scroll-fade container, blocks share the 0.65rem vertical rhythm). KaTeX's stylesheet is imported here instead, and it gives .katex-display display: block; margin: 1em 0 with white-space: nowrap on the inner .katex and no overflow handling — so a wide equation overflows the message column and display math spacing does not match sibling blocks.
Suggest importing the vendor sheet from index.css (deterministic order relative to the .chat-markdown rules) and adding the missing block contract next to them, e.g. .chat-markdown .katex-display { margin: 0.65rem 0; overflow-x: auto; overflow-y: hidden; }.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
Fixed in a0f1693e. The KaTeX vendor stylesheet now loads from index.css, and display equations use the shared 0.65rem block rhythm with max-width and horizontal overflow containment.
There was a problem hiding this comment.
Sorry, I'm unable to act on this request because you do not have permissions within this repository.
There was a problem hiding this comment.
With output: "htmlAndMathml", KaTeX emits a .katex-mathml subtree that is visually clipped but not aria-hidden, while .katex-html is aria-hidden. The onCopy handler on this container serializes the selection through markdown-clipboard.ts, which skips aria-hidden nodes — so copying a message with math keeps only the MathML branch and yields its glyph text plus the duplicated annotation TeX, with no $/$$ delimiters, breaking the markdown round-trip this serializer exists for.
Suggest teaching the serializer about math: on an element with the katex class, read annotation[encoding="application/x-tex"] and emit $…$ (or $$…$$ inside .katex-display) instead of serializing children.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
Fixed in a0f1693e. The clipboard serializer now recognizes inline and display KaTeX, reads the application/x-tex annotation, and emits explicit LaTeX delimiters. I used \(…\) and \[...\] rather than single-dollar syntax because single-dollar math is now intentionally disabled. Added round-trip tests for both forms.
There was a problem hiding this comment.
Sorry, I'm unable to act on this request because you do not have permissions within this repository.
There was a problem hiding this comment.
One finding on the new .katex-display scroll container in apps/web/src/index.css. The earlier notes on singleDollarTextMath, the missing rehype path for non-raw-HTML rendering, display-math spacing/overflow, and clipboard round-tripping all look addressed.
Posted via Macroscope — UI Consistency
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
ApprovabilityVerdict: Not approved Macroscope's review found this PR not approvable — This PR introduces LaTeX rendering across the production chat Markdown pipeline, with substantial new parsing, rendering, sanitization, clipboard, list-recovery, styling, and dependency changes. Its broad impact on existing message rendering exceeds a small isolated fix and merits human review. You can add or adjust custom eligibility rules. Learn more. |
|
All review findings raised so far have been addressed in
Verification passes: the full web unit suite (2,569 tests), focused math/clipboard tests, typecheck, lint, formatting, and diff checks. Two older Macroscope threads may still appear unresolved because the bot reported that it lacks permission to resolve them; both findings were fixed and replied to. |
There was a problem hiding this comment.
Two consistency issues in the new KaTeX rendering path (inline math overflow, and the error branch's hardcoded color + native title). Everything else — the display-math scroll container, the 0.65rem rhythm, the clipboard round-trip, and plugin parity across the parseRawHtml branches — now matches the surrounding .chat-markdown contract.
Posted via Macroscope — UI Consistency
There was a problem hiding this comment.
Reviewed the KaTeX rendering, sanitize-schema, and clipboard changes for UI consistency. The earlier findings (theme error color, missing native title strip, display-math alignment, inline overflow ownership) are addressed. One remaining inconsistency in the new inline math scroll container.
Posted via Macroscope — UI Consistency
5185eca to
ec29d6f
Compare
|
Looks like all bots are happy |
|
Thanks for putting this together. I’m affected by the raw-LaTeX chat rendering issue and confirmed the current app still shows formulas as plain text. Could a maintainer take a look when time allows? It would make the app much more usable for technical/ML work. |
|
Just adding my two cents. I hope this also adds latex when viewing markdown files in the sidebar. For example this is a markdown file viewer where the equations are still just text (on the official latest release): 
|
c6c9485 to
118927f
Compare
There was a problem hiding this comment.
One finding: the new KaTeX scroll lanes read the unadjusted --border role instead of the contrast-adjusted --contrast-border used by the rest of .chat-markdown. Everything else from the earlier rounds (display-math left alignment, themed error color without a native title, inline overflow ownership with the shared thin-scrollbar treatment, KaTeX round-trip in the clipboard serializer) looks consistent now.
Posted via Macroscope — UI Consistency
|
@Ar-Kareem This PR also covers rendered Markdown files in the sidebar. FilePreviewPanel uses the shared ChatMarkdown renderer, so the same KaTeX pipeline applies there. |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4784861. Configure here.
|
Note 🤖 GPT-5.6 Sol responding on behalf of Theo We're closing this PR as we clean up the T3 Code backlog. Thank you for taking the time to put this together. We do not want to add LaTeX rendering to chat. The same product decision applies to #7739. If you believe we closed this in error, please reopen the PR and leave a comment explaining what we missed. |
|
@t3dotgg Why would you not want LaTeX rendering in the chat? - This is really killing the user experience for all those working in quant. finance, comp. physics & mathematics, etc. for which T3 Code is in principle amazing because we can send off and control simulations across machines easily. You said yourself that the nice integration of images and graphics is what makes GUIs so superior to TUIs. That logic applies similarly to LaTeX rendering. Codex is winning here by miles at the moment. |
|
Agreed, it seems like an odd choice, especially since all other GUIs support it afaik. |
|
So far I loved T3 but I will now stop using it because of that decision. It's hardly understandeable. |
|
I don't think there was a human decision involved, I think the bot just closed it because it thought to be irrelevant. And since Theo and the team are all frontend ppl they don't really run into the need for latex. |
|
I believe so as well. I just wonder how to get this through to @t3dotgg . - For one, this issue and PR should be reopened, I'd say. |
5 participants
Assistant messages commonly use LaTeX delimiters, but the chat Markdown pipeline currently renders their contents as plain text because CommonMark consumes the delimiter escapes before remark plugins run.
Readable mathematics is essential across scientific and technical research. It is especially important for AI research, where agent responses routinely need to print loss functions, probability distributions, gradients, matrix operations, and evaluation metrics. Showing that material as raw TeX makes answers harder to inspect, verify, and reuse.
This adds remark-math and KaTeX rendering for inline and display formulas. A source normalizer uses text-node positions reported by the Markdown parser, pairs delimiters, and preserves source length. That keeps task-list offsets valid while leaving code blocks, inline code, link destinations, autolinks, raw HTML attributes, unmatched delimiters, and escaped backslashes untouched.
This is a clean follow-up to #4633 and incorporates the unresolved review feedback there. Thanks to @Varshavia for the original implementation and investigation.
Closes #4585.
Closes #8430.
Verification:
Visual confirmation:
Before fix:
After fix:
Generated with GPT-5.6-Sol using the Codex harness in T3 Code.
Note
Render LaTeX math in
ChatMarkdownusing KaTeXChatMarkdownrenders inline and display math in ChatMarkdown.tsxnormalizeLatexMathDelimiters(rewrites\(…\)and\[…\)to remark-math-compatible$$pairs),remarkPromoteBracketDisplayMath(same-line bracket math gets display styling), andrehypeStripKatexErrorTitle(removes native tooltips from KaTeX errors)CHAT_MARKDOWN_SANITIZE_SCHEMAto allowmath-inlineandmath-displaycode class names and removes globaltitleattributesCHAT_MARKDOWN_SANITIZE_SCHEMAno longer permitstitleon any element globally; any component relying on sanitizedtitleattributes fromChatMarkdownoutput will lose themMacroscope summarized d29aef9.
Note
Medium Risk
Touches the chat markdown remark/rehype chain and sanitize
codeclass rules; behavior is heavily tested but regressions in markdown edge cases are possible.Overview
Chat messages can now render inline and display LaTeX instead of showing raw
\(...\)/\[...\]text. The pipeline adds remark-math and rehype-katex (with KaTeX CSS), and preprocesses the source vianormalizeLatexMathDelimitersso delimiter pairs become$$...$$using parser text-node positions—skipping code, links, and HTML while keeping length-preserving rewrites for task lists.Same-line
\[...\]is promoted to display math viaremarkPromoteBracketDisplayMath, and KaTeX parse errors use the theme destructive color without nativetitletooltips. Copy/paste serializes KaTeX back to LaTeX in plain text and trims duplicate MathML for rich HTML. List-indentation recovery applies the same math normalization for over-indented bullets. KaTeX runs even when raw HTML parsing is off via a separate rehype plugin set.Reviewed by Cursor Bugbot for commit d29aef9. Bugbot is set up for automated code reviews on this repo. Configure here.