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

- Add KaTeX dependencies for LaTeX rendering
- Integrate remark-math and rehype-katex plugins in MarkdownBlock
- Add KaTeX CSS styling for proper equation display
- Update CSP to allow KaTeX font loading with data: URLs
- Configure Vite to handle KaTeX font assets
- Update .vscodeignore to include KaTeX fonts in extension bundle

Users can now write LaTeX equations using standard syntax:
- Inline math:  = mc^2$
- Display math: 95668\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}95668

Fixes #4258

Author: hannesrudolph

pnpm-lock.yaml

@@ -19,6 +19,9 @@
 !webview-ui/build/assets/*.js
 !webview-ui/build/assets/*.ttf
 !webview-ui/build/assets/*.css
+!webview-ui/build/assets/fonts/*.woff
+!webview-ui/build/assets/fonts/*.woff2
+!webview-ui/build/assets/fonts/*.ttf
 
 # Include default themes JSON files used in getTheme
 !integrations/theme/default-themes/**

src/.vscodeignore

@@ -670,7 +670,7 @@ export class ClineProvider
 
 		const csp = [
 			"default-src 'none'",
-			`font-src ${webview.cspSource}`,
+			`font-src ${webview.cspSource} data:`,
 			`style-src ${webview.cspSource} 'unsafe-inline' https://* http://${localServerUrl} http://0.0.0.0:${localPort}`,
 			`img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com data:`,
 			`media-src ${webview.cspSource}`,
@@ -757,7 +757,7 @@ export class ClineProvider
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">

src/core/webview/ClineProvider.ts

@@ -44,6 +44,7 @@
 		"fzf": "^0.5.2",
 		"i18next": "^25.0.0",
 		"i18next-http-backend": "^3.0.2",
+		"katex": "^0.16.11",
 		"knuth-shuffle-seeded": "^1.0.6",
 		"lru-cache": "^11.1.0",
 		"lucide-react": "^0.513.0",
@@ -59,7 +60,9 @@
 		"react-use": "^17.5.1",
 		"react-virtuoso": "^4.7.13",
 		"rehype-highlight": "^7.0.0",
+		"rehype-katex": "^7.0.1",
 		"remark-gfm": "^4.0.1",
+		"remark-math": "^6.0.0",
 		"remove-markdown": "^0.6.0",
 		"shell-quote": "^1.8.2",
 		"shiki": "^3.2.1",
@@ -82,6 +85,7 @@
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.0.0",
+		"@types/katex": "^0.16.7",
 		"@types/node": "20.x",
 		"@types/react": "^18.3.23",
 		"@types/react-dom": "^18.3.5",