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

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Daniel Riccio <ricciodaniel98@gmail.com>

src/.vscodeignore

@@ -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/core/webview/ClineProvider.ts

@@ -672,7 +672,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}`,
@@ -759,7 +759,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}">

webview-ui/package.json

@@ -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.518.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",
@@ -80,6 +83,8 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@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",

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -2,6 +2,8 @@ import React, { memo, useEffect } from "react"
 import { useRemark } from "react-remark"
 import styled from "styled-components"
 import { visit } from "unist-util-visit"
+import rehypeKatex from "rehype-katex"
+import remarkMath from "remark-math"
 
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -75,6 +77,31 @@ const StyledMarkdown = styled.div`
 		);
 	}
 
+	/* KaTeX styling */
+	.katex {
+		font-size: 1.1em;
+		color: var(--vscode-editor-foreground);
+		font-family: KaTeX_Main, "Times New Roman", serif;
+		line-height: 1.2;
+		white-space: normal;
+		text-indent: 0;
+	}
+
+	.katex-display {
+		display: block;
+		margin: 1em 0;
+		text-align: center;
+		padding: 0.5em;
+		overflow-x: auto;
+		overflow-y: hidden;
+		background-color: var(--vscode-textCodeBlock-background);
+		border-radius: 3px;
+	}
+
+	.katex-error {
+		color: var(--vscode-errorForeground);
+	}
+
 	font-family:
 		var(--vscode-font-family),
 		system-ui,
@@ -126,6 +153,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	const [reactContent, setMarkdown] = useRemark({
 		remarkPlugins: [
 			remarkUrlToLink,
+			remarkMath,
 			() => {
 				return (tree) => {
 					visit(tree, "code", (node: any) => {
@@ -138,7 +166,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 				}
 			},
 		],
-		rehypePlugins: [],
+		rehypePlugins: [rehypeKatex as any],
 		rehypeReactOptions: {
 			components: {
 				a: ({ href, children }: any) => {

webview-ui/src/context/__tests__/ExtensionStateContext.spec.tsx

@@ -221,8 +221,8 @@ describe("mergeExtensionState", () => {
 			experiments: {
 				powerSteering: true,
 				marketplace: false,
-				concurrentFileReads: true,
 				disableCompletionCommand: false,
+				concurrentFileReads: true,
 				multiFileApplyDiff: true,
 			} as Record<ExperimentId, boolean>,
 		}
@@ -237,8 +237,8 @@ describe("mergeExtensionState", () => {
 		expect(result.experiments).toEqual({
 			powerSteering: true,
 			marketplace: false,
-			concurrentFileReads: true,
 			disableCompletionCommand: false,
+			concurrentFileReads: true,
 			multiFileApplyDiff: true,
 		})
 	})

webview-ui/src/index.css

@@ -18,6 +18,7 @@
 @import "tailwindcss/theme.css" layer(theme);
 @import "./preflight.css" layer(base);
 @import "tailwindcss/utilities.css" layer(utilities);
+@import "katex/dist/katex.min.css";
 
 @plugin "tailwindcss-animate";
 

webview-ui/vite.config.ts

@@ -105,7 +105,17 @@ export default defineConfig(({ mode }) => {
 						// Default naming for other chunks, ensuring uniqueness from entry
 						return `assets/chunk-[hash].js`
 					},
-					assetFileNames: `assets/[name].[ext]`,
+					assetFileNames: (assetInfo) => {
+						if (
+							assetInfo.name &&
+							(assetInfo.name.endsWith(".woff2") ||
+								assetInfo.name.endsWith(".woff") ||
+								assetInfo.name.endsWith(".ttf"))
+						) {
+							return "assets/fonts/[name][extname]"
+						}
+						return "assets/[name][extname]"
+					},
 					manualChunks: (id, { getModuleInfo }) => {
 						// Consolidate all mermaid code and its direct large dependencies (like dagre)
 						// into a single chunk. The 'channel.js' error often points to dagre.