@aleph-alpha/chat-kit 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -67,8 +67,11 @@
   "dependencies": {
     "@aleph-alpha/ui-library": "^2.8.3",
     "dompurify": "^3.3.2",
+    "katex": "^0.17.0",
+    "rehype-katex": "^7.0.1",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5"
@@ -95,9 +98,10 @@
     "unocss-preset-animations": "^1.3.0",
     "unocss-preset-shadcn": "^1.0.1",
     "vite": "^7.3.2",
-    "vitest": "4.0.15",
+    "vitest": "3.2.6",
     "vue": "^3.5.27",
-    "vue-tsc": "^3.2.4"
+    "vue-tsc": "^3.2.4",
+    "@aleph-alpha/tsconfig-frontend": "0.7.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.stories.ts

@@ -344,6 +344,56 @@ export const GfmFeatures: Story = {
   parameters: { docs: { source: { code: gfmFeaturesTemplateSource } } },
 };
 
+const mathTemplateSource = `<script setup lang="ts">
+import { CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+const content = \`# Math Rendering
+
+Inline math: $E = mc^2$
+
+Display math:
+
+$$
+\\\\int_{-\\\\infty}^{\\\\infty} e^{-x^2} dx = \\\\sqrt{\\\\pi}
+$$
+
+The quadratic formula is $x = \\\\frac{-b \\\\pm \\\\sqrt{b^2 - 4ac}}{2a}$.
+\`;
+</script>
+
+<template>
+  <CkMarkdownRenderer :content="content" />
+</template>`;
+
+/**
+ * Renders inline and display math expressions using KaTeX.
+ * Inline math uses single dollar signs ($...$) and display math uses
+ * double dollar signs ($$...$$).
+ */
+export const MathExpressions: Story = {
+  args: {
+    content: [
+      '# Math Rendering',
+      '',
+      'Inline math: $E = mc^2$',
+      '',
+      'Display math:',
+      '',
+      '$$',
+      '\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}',
+      '$$',
+      '',
+      'The quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.',
+      '',
+      'A matrix:',
+      '',
+      '$$',
+      '\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}',
+      '$$',
+    ].join('\n'),
+  },
+  parameters: { docs: { source: { code: mathTemplateSource } } },
+};
+
 function visitTextNodes(node: any, transform: (value: string) => string): void {
   if (node.type === 'text') {
     node.value = transform(node.value);

package/src/handlers/useMarkdownParser.spec.ts

@@ -109,4 +109,35 @@ describe('useMarkdownParser', () => {
 
     expect(html.value).toBe('<p>Hello world</p>');
   });
+
+  it('renders inline math with single dollar signs', () => {
+    const source = ref('The formula $E = mc^2$ is famous.');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('class="katex"');
+    expect(html.value).toContain('E = mc^2');
+  });
+
+  it('renders display math with double dollar signs', () => {
+    const source = ref('$$\n\\int_0^1 x^2 dx\n$$');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('class="katex-display"');
+  });
+
+  it('preserves MathML elements through sanitization', () => {
+    const source = ref('$x^2$');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('<math');
+    expect(html.value).toContain('<semantics>');
+  });
+
+  it('does not treat a lone dollar sign as math', () => {
+    const source = ref('The price is $5.');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).not.toContain('class="katex"');
+    expect(html.value).toContain('$5');
+  });
 });

package/src/handlers/useMarkdownParser.ts

@@ -2,18 +2,82 @@ import { computed, type MaybeRefOrGetter, toValue } from 'vue';
 import { unified, type PluggableList } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 import remarkRehype from 'remark-rehype';
+import rehypeKatex from 'rehype-katex';
 import rehypeStringify from 'rehype-stringify';
-import DOMPurify from 'dompurify';
+import DOMPurify, { type Config } from 'dompurify';
+import 'katex/dist/katex.min.css';
 
 type SyncProcessor = { processSync: (value: string) => { toString(): string } };
 
+const KATEX_MATHML_TAGS = [
+  'math',
+  'semantics',
+  'annotation',
+  'mrow',
+  'mi',
+  'mo',
+  'mn',
+  'ms',
+  'mtext',
+  'mspace',
+  'msup',
+  'msub',
+  'msubsup',
+  'mfrac',
+  'mover',
+  'munder',
+  'munderover',
+  'msqrt',
+  'mroot',
+  'mtable',
+  'mtr',
+  'mtd',
+  'menclose',
+  'mpadded',
+  'mphantom',
+] as const;
+
+const KATEX_MATHML_ATTRS = [
+  'xmlns',
+  'encoding',
+  'mathvariant',
+  'displaystyle',
+  'scriptlevel',
+  'fence',
+  'separator',
+  'stretchy',
+  'symmetric',
+  'lspace',
+  'rspace',
+  'movablelimits',
+  'accent',
+  'accentunder',
+  'linethickness',
+  'columnalign',
+  'rowalign',
+  'columnspan',
+  'rowspan',
+  'width',
+  'height',
+  'depth',
+  'minsize',
+  'maxsize',
+  'aria-hidden',
+] as const;
+
+const SANITIZE_CONFIG: Config = {
+  ADD_TAGS: [...KATEX_MATHML_TAGS],
+  ADD_ATTR: [...KATEX_MATHML_ATTRS],
+};
+
 function buildProcessor(plugins: PluggableList): SyncProcessor {
-  let proc = unified().use(remarkParse).use(remarkGfm);
+  let proc = unified().use(remarkParse).use(remarkGfm).use(remarkMath);
   for (const plugin of plugins) {
     proc = proc.use(plugin as any);
   }
-  return proc.use(remarkRehype).use(rehypeStringify);
+  return proc.use(remarkRehype).use(rehypeKatex).use(rehypeStringify);
 }
 
 export function useMarkdownParser(
@@ -30,16 +94,16 @@ export function useMarkdownParser(
     return cachedProcessor;
   }
 
-  const html = computed(() => {
+  const html = computed<string>(() => {
     const markdown = toValue(source);
     if (!markdown) return '';
     try {
       const raw = String(
         getProcessor(toValue(plugins) ?? []).processSync(markdown),
       );
-      return DOMPurify.sanitize(raw);
+      return DOMPurify.sanitize(raw, SANITIZE_CONFIG) as string;
     } catch {
-      return DOMPurify.sanitize(markdown);
+      return DOMPurify.sanitize(markdown, SANITIZE_CONFIG) as string;
     }
   });