Fix KaTeX chemistry formula rendering (\ce command) not working

[danielaskdd]

Fix KaTeX chemistry formula rendering (\ce command) not working

Summary

This PR fixes KaTeX chemistry formula rendering in the Web UI chat messages. The \ce{} command (from mhchem extension) was displaying as red error text instead of properly rendered chemistry formulas.

Problem

When users input chemistry formulas using KaTeX's \ce{} syntax (e.g., $$\ce{NH3 + HCl -> NH4Cl}$$), the \ce command was rendered in red as an unrecognized command, even though the mhchem extension was being imported.

Root Cause: rehype-katex has katex as a direct dependency, not a peer dependency. This caused Vite to create two separate KaTeX instances - one for the project and one bundled inside rehype-katex. The mhchem extension was registered to the project's KaTeX instance, but rehype-katex used its own internal instance where mhchem was not registered.

Solution

1. Import KaTeX extensions at app startup (main.tsx) instead of dynamically in component useEffect
2. Add Vite dedupe configuration (vite.config.ts) to force all modules to use the same KaTeX instance
3. Add TypeScript declarations for KaTeX contrib modules

Changes

• lightrag_webui/src/main.tsx - Static imports for katex/contrib/mhchem and katex/contrib/copy-tex
• lightrag_webui/vite.config.ts - Add resolve.dedupe: ['katex'] to ensure single KaTeX instance
• lightrag_webui/src/types/katex.d.ts - Add module declarations for KaTeX contrib modules
• lightrag_webui/src/components/retrieval/ChatMessage.tsx - Cleanup redundant dynamic imports

New Features

• Chemistry formulas: \ce{} command now works (e.g., $$\ce{2H2 + O2 -> 2H2O}$$)
• Physical units: \pu{} command now works (e.g., $$\pu{123 kJ/mol}$$)
• Copy formulas: Users can select and copy rendered formulas, clipboard will contain LaTeX source code

Testing

After restart dev server (bun run dev) and hard refresh:

• Chemistry formulas using \ce{} should render correctly
• Copying rendered formulas should preserve LaTeX source

[danielaskdd]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. More of your lovely PRs please.

ℹ️ About Codex in GitHub

Your team has set up Codex to 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 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".