Skip to content

feat(mobile-web): render math formulas with katex in chat markdown - #3321

Open
BingCHuanJ wants to merge 1 commit into
GCWing:mainfrom
BingCHuanJ:feat/mobile-web-math
Open

BingCHuanJ wants to merge 1 commit into
GCWing:mainfrom
BingCHuanJ:feat/mobile-web-math

Conversation

@BingCHuanJ

Copy link
Copy Markdown
Contributor

Summary

Adds KaTeX math rendering support (remark-math and rehype-katex) to chat markdown messages in mobile-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:

  • TeX formula rendering using katex, remark-math, and rehype-katex.
  • Delimiter normalization (\(...\) -> $...$, \[...\] -> $$...$$) with code block protection (safe replacement avoiding string substitution patterns like $$).
  • Responsive styling for .katex-display with horizontal scrolling and max-width bounds to prevent layout overflow on narrow mobile screens.

Verification

  • pnpm --dir src/mobile-web run type-check: passed cleanly with zero type errors.
  • pnpm --dir src/mobile-web run test:ui-components: passed (17/17 tests passing, including delimiter normalization, code block isolation, and math plugin styling tests).
  • node --test tests/host-dialog-queue-browser.test.mjs: passed browser verification for KaTeX formula DOM generation.
  • node --test scripts/audit-theme-colors.test.mjs: passed (32/32 tests passing).
  • pnpm run check:repo-hygiene: passed all product identity, version synchronization, and repository hygiene audits.

Reviewer Notes

  • Uses katex/dist/katex.min.css bundled with font handling compatible with mobile assets.
  • Formula display blocks (.katex-display) are constrained to viewport bounds with -webkit-overflow-scrolling: touch for smooth touch scrolling.

Checklist

  • This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
  • Relevant verification is recorded above, or skipped checks are explained.
  • User-facing strings, docs, and locales are updated where applicable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant