fix(web): render LaTeX in chat messages

apps/web/package.json

@@ -38,15 +38,18 @@
     "jose": "catalog:",
     "jsonc-parser": "3.3.1",
     "jszip": "3.10.1",
+    "katex": "^0.16.47",
     "lexical": "^0.41.0",
     "lucide-react": "^0.564.0",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "tailwind-merge": "^3.4.0",
     "zustand": "^5.0.11"
   },

apps/web/src/components/ChatMarkdown.test.tsx

@@ -205,6 +205,77 @@ describe("ChatMarkdown streaming", () => {
   });
 });
 
+describe("ChatMarkdown math", () => {
+  it.each([true, false])(
+    "renders inline and display LaTeX with accessible MathML when parseRawHtml=%s",
+    (parseRawHtml) => {
+      const html = renderToStaticMarkup(
+        <ChatMarkdown
+          cwd="/tmp/project"
+          parseRawHtml={parseRawHtml}
+          text={String.raw`Euler wrote $e^{i\pi} + 1 = 0$.
+
+$$
+\int_0^1 x^2\,dx = \frac{1}{3}
+$$`}
+        />,
+      );
+
+      expect(html).toContain("katex");
+      expect(html).toContain("katex-display");
+      expect(html).toContain("<math");
+      expect(html).toContain("e^{i\\pi} + 1 = 0");
+    },
+  );
+
+  it.each([true, false])(
+    "renders parenthesis and bracket LaTeX delimiters when parseRawHtml=%s",
+    (parseRawHtml) => {
+      const html = renderToStaticMarkup(
+        <ChatMarkdown
+          cwd="/tmp/project"
+          parseRawHtml={parseRawHtml}
+          text={String.raw`GenCast represents \(F\) using samples \(x_1,\ldots,x_M\).
+
+\[
+\boxed{\widehat{\operatorname{CRPS}} = \frac{1}{M}\sum_{i=1}^{M}|x_i-y|}
+\]`}
+        />,
+      );
+
+      expect(html).toContain("katex");
+      expect(html).toContain("katex-display");
+      expect(html).toContain("GenCast represents ");
+      expect(html).toContain("x_1,\\ldots,x_M");
+      expect(html).toContain("\\boxed{\\widehat{\\operatorname{CRPS}}");
+    },
+  );
+
+  it("does not interpret LaTeX delimiters inside code", () => {
+    const markdown = [
+      "Render \\(x^2\\), but keep `\\(inlineExample\\)` unchanged.",
+      "",
+      "```text",
+      String.raw`\[displayExample\]`,
+      "```",
+    ].join("\n");
+    const html = renderToStaticMarkup(<ChatMarkdown cwd="/tmp/project" text={markdown} />);
+
+    expect(html).toContain("katex");
+    expect(html).toContain("\\(inlineExample\\)");
+    expect(html).toContain("\\[displayExample\\]");
+  });
+
+  it("keeps a lone dollar amount as text", () => {
+    const html = renderToStaticMarkup(
+      <ChatMarkdown cwd="/tmp/project" text="The build costs $20." />,
+    );
+
+    expect(html).toContain("$20");
+    expect(html).not.toContain("katex");
+  });
+});
+
 describe("canUseMarkdownFileShellActions", () => {
   const environmentId = EnvironmentId.make("environment-1");
 

apps/web/src/components/ChatMarkdown.tsx

@@ -67,12 +67,14 @@ import React, {
 import type { Components, Options as ReactMarkdownOptions } from "react-markdown";
 import ReactMarkdown from "react-markdown";
 import { defaultUrlTransform } from "react-markdown";
+import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkBreaks from "remark-breaks";
 import { parseAssistantCitationHref } from "@t3tools/shared/assistantCitations";
 import { AssistantCitationChip } from "./chat/AssistantCitationChip";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 import { remarkGithubAlerts } from "../markdown-github-alerts";
 import {
   artifactTemplateFromHastProperties,
@@ -126,6 +128,7 @@ import {
   serializeTableElementToMarkdown,
 } from "../markdown-clipboard";
 import { remarkNormalizeListItemIndentation } from "../markdown-list-indentation";
+import { normalizeLatexDelimiters } from "../markdown-latex";
 import {
   extractMarkdownLinkHrefs,
   isWindowsDrivePathHref,
@@ -396,6 +399,7 @@ const CHAT_MARKDOWN_SANITIZE_SCHEMA = {
 
 const CHAT_MARKDOWN_REMARK_PLUGINS = [
   remarkGfm,
+  remarkMath,
   remarkGithubAlerts,
   remarkNormalizeListItemIndentation,
   remarkCodexDirectives,
@@ -405,6 +409,7 @@ const CHAT_MARKDOWN_REMARK_PLUGINS = [
 
 const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
   remarkGfm,
+  remarkMath,
   remarkGithubAlerts,
   remarkNormalizeListItemIndentation,
   remarkCodexDirectives,
@@ -413,10 +418,15 @@ const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
   remarkNormalizeLinksAndTagInlineCode,
 ] satisfies NonNullable<ReactMarkdownOptions["remarkPlugins"]>;
 
-const CHAT_MARKDOWN_REHYPE_PLUGINS = [
+const CHAT_MARKDOWN_REHYPE_PLUGINS = [rehypeKatex] satisfies NonNullable<
+  ReactMarkdownOptions["rehypePlugins"]
+>;
+
+const CHAT_MARKDOWN_RAW_HTML_REHYPE_PLUGINS = [
   rehypeRaw,
   rehypePreserveImageSourceMeta,
   [rehypeSanitize, CHAT_MARKDOWN_SANITIZE_SCHEMA],
+  rehypeKatex,
 ] satisfies NonNullable<ReactMarkdownOptions["rehypePlugins"]>;
 
 /** GitHub's own five alert kinds, in its colors: the glyph names the urgency, the title says it. */
@@ -2908,6 +2918,7 @@ function ChatMarkdown({
     ],
     [extraRemarkPlugins, lineBreaks],
   );
+  const normalizedText = useMemo(() => normalizeLatexDelimiters(text), [text]);
 
   // react-markdown converts unparsed HTML nodes to text when skipHtml is false.
   // Keep that behavior explicit because literal mode depends on escaping the
@@ -2923,12 +2934,14 @@ function ChatMarkdown({
       <ChatMarkdownRendererContext value={componentState}>
         <ReactMarkdown
           remarkPlugins={remarkPlugins}
-          rehypePlugins={parseRawHtml ? CHAT_MARKDOWN_REHYPE_PLUGINS : undefined}
+          rehypePlugins={
+            parseRawHtml ? CHAT_MARKDOWN_RAW_HTML_REHYPE_PLUGINS : CHAT_MARKDOWN_REHYPE_PLUGINS
+          }
           skipHtml={false}
           components={CHAT_MARKDOWN_COMPONENTS}
           urlTransform={markdownUrlTransform}
         >
-          {text}
+          {normalizedText}
         </ReactMarkdown>
       </ChatMarkdownRendererContext>
       {localMediaPreview ? (

apps/web/src/index.css

@@ -1668,6 +1668,13 @@ code {
   color: var(--contrast-muted-foreground);
 }
 
+.chat-markdown .katex-display {
+  margin: 0.65rem 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: 0.15rem;
+}
+
 .chat-markdown section[data-footnotes] {
   margin-top: 1.25rem;
   border-top: 1px solid var(--contrast-border);

apps/web/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { createHashHistory, createBrowserHistory } from "@tanstack/react-router";
 
+import "katex/dist/katex.min.css";
 import "./index.css";
 
 import { isElectron } from "./env";

apps/web/src/markdown-latex.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vite-plus/test";
+import { normalizeLatexDelimiters } from "./markdown-latex";
+
+describe("normalizeLatexDelimiters", () => {
+  it("normalizes parenthesis and bracket delimiters without shifting source offsets", () => {
+    const markdown = "Inline \\(x\\)\n\\[\ny\n\\]\n- [ ] task";
+    const normalized = normalizeLatexDelimiters(markdown);
+
+    expect(normalized).toBe("Inline $$x$$\n$$\ny\n$$\n- [ ] task");
+    expect(normalized).toHaveLength(markdown.length);
+  });
+
+  it("leaves escaped delimiters and code unchanged", () => {
+    const markdown = [
+      String.raw`Literal \\(x\\) and \[math\].`,
+      "Inline code: `\\(code\\)`.",
+      "",
+      "~~~text",
+      String.raw`\[fenced\]`,
+      "~~~",
+      String.raw`    \(indented\)`,
+    ].join("\n");
+
+    expect(normalizeLatexDelimiters(markdown)).toBe(
+      markdown.replace(String.raw`\[math\]`, () => "$$math$$"),
+    );
+  });
+});

apps/web/src/markdown-latex.ts

@@ -0,0 +1,78 @@
+const LATEX_DELIMITERS = ["\\(", "\\)", "\\[", "\\]"] as const;
+
+function isEscaped(value: string, index: number): boolean {
+  let slashCount = 0;
+  for (let cursor = index - 1; cursor >= 0 && value[cursor] === "\\"; cursor -= 1) {
+    slashCount += 1;
+  }
+  return slashCount % 2 === 1;
+}
+
+function startingFence(line: string): { marker: "`" | "~"; length: number } | null {
+  const match = /^ {0,3}(`{3,}|~{3,})/.exec(line);
+  const run = match?.[1];
+  if (!run) return null;
+  return { marker: run[0] as "`" | "~", length: run.length };
+}
+
+function closesFence(line: string, fence: { marker: "`" | "~"; length: number }): boolean {
+  const match = /^ {0,3}(`+|~+)[ \t]*$/.exec(line);
+  const run = match?.[1];
+  return Boolean(run && run[0] === fence.marker && run.length >= fence.length);
+}
+
+/** Converts TeX delimiters before Markdown consumes their leading backslashes. */
+export function normalizeLatexDelimiters(markdown: string): string {
+  if (!LATEX_DELIMITERS.some((delimiter) => markdown.includes(delimiter))) return markdown;
+
+  let fence: { marker: "`" | "~"; length: number } | null = null;
+  let inlineCodeTicks = 0;
+
+  return markdown
+    .split(/(\r?\n)/)
+    .map((line) => {
+      if (line === "\n" || line === "\r\n") return line;
+
+      if (fence) {
+        if (closesFence(line, fence)) fence = null;
+        return line;
+      }
+
+      if (inlineCodeTicks === 0) {
+        const openingFence = startingFence(line);
+        if (openingFence) {
+          fence = openingFence;
+          return line;
+        }
+        if (/^(?: {4}|\t)/.test(line)) return line;
+      }
+
+      let normalized = "";
+      for (let index = 0; index < line.length; index += 1) {
+        const character = line[index];
+
+        if (character === "`" && !isEscaped(line, index)) {
+          let runLength = 1;
+          while (line[index + runLength] === "`") runLength += 1;
+          if (inlineCodeTicks === 0) inlineCodeTicks = runLength;
+          else if (inlineCodeTicks === runLength) inlineCodeTicks = 0;
+          normalized += "`".repeat(runLength);
+          index += runLength - 1;
+          continue;
+        }
+
+        if (inlineCodeTicks === 0 && character === "\\" && !isEscaped(line, index)) {
+          const delimiter = line[index + 1];
+          if (delimiter === "(" || delimiter === ")" || delimiter === "[" || delimiter === "]") {
+            normalized += "$$";
+            index += 1;
+            continue;
+          }
+        }
+
+        normalized += character;
+      }
+      return normalized;
+    })
+    .join("");
+}

docs/user/composer.md

@@ -103,6 +103,22 @@ File links refer to the environment's machine, including when you connect remote
 Previews use the original file, even outside the workspace. Moving or deleting it
 can break the preview, so save a copy if you need to keep it.
 
+## Math in messages
+
+Web and desktop render LaTeX in messages. Inline math accepts `$...$` or `\(...\)`. Display math
+accepts `$$...$$` or `\[...\]`:
+
+```markdown
+Euler's identity is $e^{i\pi} + 1 = 0$.
+
+$$
+\int_0^1 x^2\,dx = \frac{1}{3}
+$$
+```
+
+Escape a dollar sign as `\$` when two prices or other dollar amounts in the same paragraph could
+look like inline math. Mobile currently displays the source text instead.
+
 ## Files outside the workspace
 
 Follow an agent's file link to read a report or other file outside the workspace.