[Feature]: Native LaTeX Math Rendering in Chat for \[ \] math blocks

[tucan-tv]

Feature Description

Please add native LaTeX rendering in AionUi chat so mathematical expressions display as formatted equations instead of raw source for block math.

Requested syntax support:

Block math (display style): \[...\]

Problem Statement

Math-heavy conversations are hard to read and verify when LaTeX is shown as plain text. This affects STEM, research, ML/data science, and educational usage. Some models use block math delimiters: \[ ... \] which are not currently rendered correctly in AionUI.

Functional Requirements

Render LaTeX in user and assistant messages
Support:
\[...\] (block display)
Treat \[...\] as display math
Do not render math inside:
fenced code blocks
inline code spans
Support multiline block expressions ($$...$$, \[...\])

Suggested Implementation

Libraries:

remark-math
rehype-katex
katex

Pros:
Fast rendering
Good SSR/client support
Widely used markdown pipeline pattern

Install:

npm i remark-math rehype-katex katex
Example integration:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkMath from "remark-math";
import remarkRehype from "remark-rehype";
import rehypeKatex from "rehype-katex";
import rehypeStringify from "rehype-stringify";

export async function renderMarkdownWithMath(md: string) {
  const file = await unified()
    .use(remarkParse)
    .use(remarkMath, {
      singleDollarTextMath: true // supports $...$
    })
    .use(remarkRehype)
    .use(rehypeKatex, {
      throwOnError: false, // fallback behavior for malformed LaTeX
      strict: "warn"
    })
    .use(rehypeStringify)
    .process(md);

  return String(file);
}

And include KaTeX CSS once:

import "katex/dist/katex.min.css";