feat(chat): render LaTeX math formulas in assistant messages#886
feat(chat): render LaTeX math formulas in assistant messages#886
Conversation
Adds KaTeX-powered LaTeX math rendering in chat bubbles so expressions like $E=mc^2$ and $$\int_0^1 x\,dx$$ are rendered inline / block instead of being shown as raw text. - New deps: remark-math, rehype-katex, katex (plus katex CSS imported in main.tsx). - ChatMessage now wires remark-math + rehype-katex into ReactMarkdown for both the main assistant bubble and thinking blocks. - Normalises OpenAI-style backslash delimiters (\(...\) and \[...\]) to dollar-sign form before feeding remark-math, while skipping fenced and inline code spans so literal code samples are preserved. - Unit + Electron E2E coverage for inline, block, and bracket-style delimiters. - README / zh-CN / ja-JP / ru-RU updated to mention LaTeX rendering. Closes #883 Co-authored-by: Haze <hazeone@users.noreply.github.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d97d228ff4
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| return input; | ||
| } | ||
|
|
||
| const parts = input.split(/(```[\s\S]*?```|`[^`\n]*`)/g); |
There was a problem hiding this comment.
Skip all Markdown code delimiters before LaTeX normalization
The delimiter normalizer only protects ... fences and single-backtick code spans, but CommonMark also allows ~~~...~~~ fences and multi-backtick inline spans (e.g. code). In those valid code blocks/spans, \(...\) and \[...\] are still rewritten into $...$/$$...$$, which mutates code samples and can render them as math instead of literal text; this is user-visible whenever assistant output uses non-triple-backtick code formatting.
Useful? React with 👍 / 👎.
… dedupe (ValueCell-ai#821 ValueCell-ai#845 ValueCell-ai#870 ValueCell-ai#873 ValueCell-ai#875 ValueCell-ai#878 ValueCell-ai#880 ValueCell-ai#885 ValueCell-ai#886 ValueCell-ai#887 ValueCell-ai#891 ValueCell-ai#903) Overhaul execution graph card (collapse/expand, narration steps, web_fetch links), separate thinking messages, render LaTeX math, dedupe optimistic messages, hide recoverable gateway timeouts, add startup history recovery.
Summary
Closes #883.
Chat messages now render LaTeX math formulas using KaTeX instead of showing the raw source. Both dollar-sign delimiters (
$...$,$$...$$) and OpenAI-style backslash delimiters (\(...\),\[...\]) are supported, matching the delimiter conventions frontier models emit today.Chat message rendering inline and block LaTeX formulas
What changed
remark-math,rehype-katex, andkatexas dependencies; wired the KaTeX stylesheet import insrc/main.tsx.src/pages/Chat/ChatMessage.tsx:remarkMath+rehypeKatexplugins on both the assistant bubble'sReactMarkdownand the thinking-blockReactMarkdown.normalizeLatexDelimiters()that rewrites\(...\)→$...$and\[...\]→$$...$$soremark-mathrecognises them. The rewrite skips fenced and inline code spans, so code samples containing\(remain intact.{ strict: false, throwOnError: false, output: 'html' }so malformed input from the model degrades to text rather than breaking the render tree.tests/unit/chat-message.test.tsx— 5 new cases for inline, display,\(...\),\[...\], and code-span preservation.tests/e2e/chat-latex-rendering.spec.ts— boots Electron with mocked IPC history and asserts.katexand.katex-displayelements render for all four delimiter styles.README.md,README.zh-CN.md,README.ja-JP.md, andREADME.ru-RU.mdper the doc-sync rule.Related Issue(s)
Closes #883 (see also #528).
Type of Change
Validation
pnpm run typecheck— passes.pnpm run lint— passes (only a pre-existing unrelatedreact-hooks/exhaustive-depswarning insrc/pages/Chat/index.tsx).pnpm test— 79 files / 517 tests pass (5 new tests cover LaTeX rendering).pnpm exec playwright test tests/e2e/chat-latex-rendering.spec.ts— passes under Xvfb/VNC; fullchat-task-visualizer.spec.tsalso still passes (regression check).pnpm run build:vite— produces a clean bundle; KaTeX font assets are emitted alongside the app bundle.Checklist
To show artifacts inline, enable in settings.