@aleph-alpha/chat-kit 3.1.1 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "3.1.1",
+  "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/composables/fileUpload/useFileUploadWrapper.spec.ts

@@ -59,7 +59,16 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
       const method = init?.method ?? 'GET';
 
       if (method === 'GET' && url.includes('search-stores')) {
-        return createMockFetchResponse([{ id: 'store-1' }]);
+        return createMockFetchResponse({
+          items: [
+            {
+              id: 'store-1',
+              name: 'test-store',
+              models: [{ embedding_model: 'test-model' }],
+            },
+          ],
+          total: 1,
+        });
       }
       if (method === 'POST' && url.includes('/files')) {
         return createMockFetchResponse([{ id: 'remote-1' }]);

package/src/composables/fileUpload/useFileUploadWrapper.ts

@@ -198,27 +198,43 @@ export function createDocumentUploadProvider(
     return newStoreId;
   }
 
-  async function resolveSearchStore(): Promise<string> {
-    if (resolvedStoreId) return resolvedStoreId;
-    if (resolvePromise) return resolvePromise;
+  interface SearchStoreListResponse {
+    items: Array<{
+      id: string;
+      name: string;
+      models: Array<{ embedding_model: string }>;
+    }>;
+    total: number;
+  }
 
-    resolvePromise = (async () => {
-      try {
-        const stores = await httpClient.get<{ id: string }[]>('search-stores');
+  async function fetchOrCreateStore(): Promise<string> {
+    try {
+      const response =
+        await httpClient.get<SearchStoreListResponse>('search-stores');
 
-        if (stores.length > 0 && stores[0]) {
-          resolvedStoreId = stores[0].id;
-          return resolvedStoreId;
-        }
+      const expectedModel = searchStoreConfig.models[0]?.embedding_model;
+      const match = response.items.find((store) =>
+        store.models.some((m) => m.embedding_model === expectedModel),
+      );
 
-        resolvedStoreId = await createSearchStoreWithWorkflow();
+      if (match) {
+        resolvedStoreId = match.id;
         return resolvedStoreId;
-      } catch (err) {
-        resolvePromise = null;
-        throw err;
       }
-    })();
 
+      resolvedStoreId = await createSearchStoreWithWorkflow();
+      return resolvedStoreId;
+    } catch (err) {
+      resolvePromise = null;
+      throw err;
+    }
+  }
+
+  async function resolveSearchStore(): Promise<string> {
+    if (resolvedStoreId) return resolvedStoreId;
+    if (resolvePromise) return resolvePromise;
+
+    resolvePromise = fetchOrCreateStore();
     return resolvePromise;
   }
 

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;
     }
   });