fix(webui): render TeX math delimiters

2026-06-09 14:50:49 +08:00
parent 0a396aa6e2
commit 5bd4a83e85
3 changed files with 364 additions and 0 deletions
@@ -296,6 +296,71 @@ describe("MarkdownTextRenderer", () => {
    expect(container.querySelector(".katex")).toBeNull();
  });

+  it("renders guarded single-dollar inline math", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>
+        {
+          "Variables $x$ and powers $2^n$ render inline, while a price range $10-20$ stays literal."
+        }
+      </MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelectorAll(".katex")).toHaveLength(2);
+    expect(container).not.toHaveTextContent("$x$");
+    expect(container).not.toHaveTextContent("$2^n$");
+    expect(container).toHaveTextContent("$10-20$");
+  });
+
+  it("renders model-style single-dollar formula lists", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>
+        {[
+          "- Fourier transform: $\\hat{f}(\\xi) = \\int_{-\\infty}^{+\\infty} f(x)e^{-2\\pi i x \\xi}\\, dx$",
+          "- Taylor expansion: $e^x = \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}$",
+          "- KL divergence: $D_\\text{KL}(P || Q) = \\sum_x P(x) \\log \\frac{P(x)}{Q(x)}$",
+          "- Quantum state: $\\psi = \\alpha|0\\rangle + \\beta|1\\rangle$",
+        ].join("\n")}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelectorAll(".katex")).toHaveLength(4);
+    expect(container).not.toHaveTextContent("$\\hat{f}");
+    expect(container).not.toHaveTextContent("$D_\\text");
+  });
+
+  it("renders TeX inline math delimiters", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>{"Einstein wrote \\(E = mc^2\\) for mass-energy equivalence."}</MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelector(".katex")).toBeInTheDocument();
+    expect(container.querySelector(".katex-display")).toBeNull();
+    expect(container).not.toHaveTextContent("\\(");
+    expect(container).not.toHaveTextContent("\\)");
+  });
+
+  it("renders TeX display math delimiters", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>{"\\[x^2 + y^2 = z^2\\]"}</MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelector(".katex-display")).toBeInTheDocument();
+    expect(container).not.toHaveTextContent("\\[");
+    expect(container).not.toHaveTextContent("\\]");
+  });
+
+  it("keeps TeX delimiters inside code literal", () => {
+    const { container } = render(
+      <MarkdownTextRenderer highlightCode={false}>
+        {"Inline `\\(x\\)` stays literal.\n\n```text\n\\[x^2\\]\n```"}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelector(".katex")).toBeNull();
+    expect(screen.getByText("\\(x\\)").tagName).toBe("CODE");
+    expect(screen.getByText("\\[x^2\\]")).toBeInTheDocument();
+  });
+
  it("still renders explicit math blocks", () => {
    const { container } = render(
      <MarkdownTextRenderer>{"$$x^2 + y^2 = z^2$$"}</MarkdownTextRenderer>,