feat: add LaTeX math equation rendering in chat window (#4258)

[hannesrudolph]

Description

Fixes #4258

This PR adds LaTeX math equation rendering support to the Roo Code chat window, allowing users to display mathematical equations beautifully formatted using KaTeX.

Changes Made

• Added KaTeX dependencies (katex, rehype-katex, remark-math) to render LaTeX equations
• Integrated remark-math and rehype-katex plugins in MarkdownBlock.tsx
• Added KaTeX CSS styling for proper equation display
• Updated Content Security Policy to allow KaTeX font loading with data: URLs
• Configured Vite to handle KaTeX font assets properly
• Updated .vscodeignore to include KaTeX fonts in the extension bundle

Testing

Tested with various LaTeX equations:

• Inline math: $E = mc^2$ renders correctly inline
• Display math: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$ renders as centered block equations
• Complex equations render properly with all mathematical symbols

Verification of Acceptance Criteria

• LaTeX equations render beautifully in the chat window
• Both inline and display math modes are supported
• No system prompt modifications (relies on models' existing LaTeX knowledge)
• Works with various mathematical expressions and symbols

Screenshots

As shown in the issue, LaTeX equations now render properly in chat messages:

• Inline equations appear seamlessly within text
• Display equations are centered and properly formatted
• Mathematical symbols and complex expressions render correctly

Checklist

• Code follows project style guidelines
• Self-review completed
• TypeScript types are properly handled
• No breaking changes
• Extension builds successfully
• Tested with various LaTeX expressions

---

Important

Adds LaTeX math rendering in chat using KaTeX, updates dependencies, and configures asset handling and security policies.

• Behavior:
  • Adds LaTeX rendering in chat using KaTeX in MarkdownBlock.tsx.
  • Supports inline and display math modes.
• Dependencies:
  • Adds katex, rehype-katex, remark-math to package.json.
• Configuration:
  • Updates Content Security Policy in ClineProvider.ts to allow data: URLs for fonts.
  • Configures Vite in vite.config.ts to handle KaTeX font assets.
  • Updates .vscodeignore to include KaTeX fonts in the extension bundle.
• Styling:
  • Imports KaTeX CSS in index.css for styling equations.

^{This description was created by for 161eb33. You can customize this summary. It will automatically update as commits are pushed.}

[hannesrudolph]

Thanks for implementing LaTeX math rendering support! This is a valuable feature that many users have been requesting.

Overall Assessment

The implementation is clean and follows existing patterns in the codebase. The integration with the markdown rendering pipeline using remark-math and rehype-katex is well done, and the styling appropriately uses VSCode theme variables.

Summary of Suggestions

I've left several inline comments covering:

• Bundle size considerations due to KaTeX's ~280KB footprint
• Error handling for invalid LaTeX syntax
• Security options to limit potentially dangerous LaTeX commands
• Performance impact of font loading
• Accessibility and configurability improvements
• Test coverage to ensure stability

None of these are blocking issues, but addressing them would make this feature more robust and maintainable.

Testing Verification

Based on your PR description, you've tested:

• ✅ Inline math ($E = mc^2$)
• ✅ Display math blocks
• ✅ Complex equations with various symbols
• ✅ CSP configuration for font loading

Great work on this implementation! The feature works as described and will be a welcome addition for users who need mathematical notation in their conversations.

[daniel-lxs]

LGTM

Made a style change and fixed the conflicts.

Before

After