@aleph-alpha/chat-kit 3.1.2 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -67,14 +67,16 @@
   "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"
   },
   "devDependencies": {
-    "@aleph-alpha/config-css": "^1.2.0",
     "@storybook/addon-a11y": "10.2.17",
     "@storybook/addon-docs": "10.2.17",
     "@storybook/addon-themes": "10.2.17",
@@ -95,9 +97,12 @@
     "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/prettier-config-frontend": "2.1.0",
+    "@aleph-alpha/tsconfig-frontend": "0.7.0",
+    "@aleph-alpha/eslint-config-frontend": "0.7.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/adapters/responses-api.spec.ts

@@ -441,6 +441,162 @@ describe('responsesToTree', () => {
     }
   });
 
+  it('merges a tool-loop continuation (response with no user input) into the same assistant turn', () => {
+    // One user turn that runs a multi-step tool loop is persisted as several
+    // chained responses: the first carries the user input, each follow-up
+    // carries a tool result (no user input). They are one assistant turn and
+    // must render as one message with a single thinking trail (SPHER-5147).
+    const tree = responsesToTree([
+      makeResponse({
+        id: 'r1',
+        request_input: [userInput('Compare Tokyo and Delhi populations')],
+        output: [
+          reasoningOutput('rs-1', 'search for Tokyo'),
+          toolOutput({ id: 'fc-1', type: 'function_call', name: 'search' }),
+        ],
+      }),
+      makeResponse({
+        id: 'r2',
+        previous_response_id: 'r1',
+        // Tool-result continuation — no user input on the wire.
+        request_input: [],
+        completed_at: 1_777_456_999,
+        output: [
+          reasoningOutput('rs-2', 'now search for Delhi'),
+          toolOutput({ id: 'fc-2', type: 'function_call', name: 'search' }),
+          assistantOutput('msg-final', 'Tokyo is larger'),
+        ],
+      }),
+    ]);
+
+    // Exactly one user node and one (merged) assistant node — not two
+    // assistant bubbles. r1 has no message output, so its assistant node id
+    // falls back to `assistant-r1`.
+    expect(Object.keys(tree.nodes)).toHaveLength(2);
+    expect(tree.nodes['msg-final']).toBeUndefined();
+
+    const assistant = tree.nodes['assistant-r1']!;
+    expect(assistant.role).toBe('assistant');
+    expect(tree.nodes['user-r1-0']!.childrenIds).toEqual(['assistant-r1']);
+    // Reasoning + tool from both round-trips, in wire order, then final text.
+    expect(assistant.content.map((c) => c.type)).toEqual([
+      'reasoning',
+      'tool',
+      'reasoning',
+      'tool',
+      'text',
+    ]);
+    // responseId stays the originating round-trip (the one that opened the
+    // turn), preserving the documented "originating StoredResponse.id" stamp.
+    expect(assistant.metadata.responseId).toBe('r1');
+    // createdAt advances to the latest folded round-trip so it is never
+    // stamped earlier than content it now holds.
+    expect(assistant.createdAt).toEqual(new Date(1_777_456_999 * 1000));
+  });
+
+  it('merges a tool-loop continuation in a later turn, leaving earlier turns intact', () => {
+    // The fix must work for any turn, not just the first: a simple turn,
+    // followed by a second turn that runs a tool loop. The second turn's
+    // continuation folds into its own assistant node; turn one is untouched.
+    const tree = responsesToTree([
+      makeResponse({
+        id: 'r1',
+        request_input: [userInput('Hi')],
+        output: [assistantOutput('msg-a1', 'Hello!')],
+      }),
+      makeResponse({
+        id: 'r2',
+        previous_response_id: 'r1',
+        request_input: [userInput('Now compare Tokyo and Delhi')],
+        output: [
+          reasoningOutput('rs-2', 'search Tokyo'),
+          toolOutput({ id: 'fc-2', type: 'function_call', name: 'search' }),
+        ],
+      }),
+      makeResponse({
+        id: 'r3',
+        previous_response_id: 'r2',
+        request_input: [], // tool-result continuation of turn two
+        output: [
+          reasoningOutput('rs-3', 'search Delhi'),
+          toolOutput({ id: 'fc-3', type: 'function_call', name: 'search' }),
+          assistantOutput('msg-a3', 'Tokyo is larger'),
+        ],
+      }),
+    ]);
+
+    // Turn one: untouched, single reply.
+    const a1 = tree.nodes['msg-a1']!;
+    expect(getText(a1.content)).toBe('Hello!');
+    expect(a1.parentId).toBe('user-r1-0');
+
+    // Turn two: its continuation (r3) merged into turn two's assistant node
+    // (id falls back to `assistant-r2` since r2 has no message output).
+    expect(tree.nodes['msg-a3']).toBeUndefined();
+    const a2 = tree.nodes['assistant-r2']!;
+    expect(a2.parentId).toBe('user-r2-0');
+    expect(tree.nodes['user-r2-0']!.parentId).toBe('msg-a1');
+    expect(a2.content.map((c) => c.type)).toEqual([
+      'reasoning',
+      'tool',
+      'reasoning',
+      'tool',
+      'text',
+    ]);
+    // Four message nodes total: two user, two assistant (one per turn).
+    expect(Object.keys(tree.nodes)).toHaveLength(4);
+  });
+
+  it('still starts a new assistant turn when a follow-up response carries a user input', () => {
+    // Guard against over-merging: a genuine next turn (user input present)
+    // must remain its own message, not fold into the previous answer.
+    const tree = responsesToTree([
+      makeResponse({
+        id: 'r1',
+        request_input: [userInput('First')],
+        output: [assistantOutput('msg-a1', 'A1')],
+      }),
+      makeResponse({
+        id: 'r2',
+        previous_response_id: 'r1',
+        request_input: [userInput('Second')],
+        output: [assistantOutput('msg-a2', 'A2')],
+      }),
+    ]);
+
+    expect(tree.nodes['user-r2-0']!.parentId).toBe('msg-a1');
+    expect(tree.nodes['msg-a2']!.parentId).toBe('user-r2-0');
+    expect(tree.nodes['msg-a2']!.metadata.responseId).toBe('r2');
+  });
+
+  it('does not merge a response that carries a user input even when its content is empty', () => {
+    // A user-role input with empty content produces no user node, so a
+    // node-shape-only check would wrongly treat this as a continuation. The
+    // merge keys off `request_input` directly, so the assistant reply stays
+    // its own node rather than folding into the previous turn.
+    const tree = responsesToTree([
+      makeResponse({
+        id: 'r1',
+        request_input: [userInput('First')],
+        output: [assistantOutput('msg-a1', 'A1')],
+      }),
+      makeResponse({
+        id: 'r2',
+        previous_response_id: 'r1',
+        request_input: [{ role: 'user', content: '' }],
+        output: [assistantOutput('msg-a2', 'A2')],
+      }),
+    ]);
+
+    const a1 = tree.nodes['msg-a1']!;
+    const a2 = tree.nodes['msg-a2']!;
+    expect(a2).toBeDefined();
+    expect(getText(a2.content)).toBe('A2');
+    // a2 is its own node, not merged into a1's content.
+    expect(getText(a1.content)).toBe('A1');
+    expect(a2.parentId).toBe('msg-a1');
+  });
+
   it('chains the next response under a reasoning-only assistant turn', () => {
     const tree = responsesToTree([
       makeResponse({

package/src/adapters/responses-api.ts

@@ -513,6 +513,124 @@ function responseToMessageNodes(resp: StoredResponse): ResponseMessageNode[] {
   return nodes;
 }
 
+// Insert a node and wire it under `parentId`; latest child wins as the active
+// branch (surfaces the most recent sibling branch by default).
+function appendNode(
+  treeNodes: Record<string, ResponseTreeMessage>,
+  node: ResponseMessageNode,
+  parentId: string | null,
+): void {
+  treeNodes[node.id] = {
+    id: node.id,
+    parentId,
+    childrenIds: [],
+    activeChildIndex: 0,
+    role: node.role,
+    content: node.content,
+    status: 'completed',
+    createdAt: node.createdAt,
+    metadata: node.metadata,
+  };
+  if (parentId === null) return;
+  const parent = treeNodes[parentId];
+  if (!parent) return;
+  parent.childrenIds.push(node.id);
+  parent.activeChildIndex = parent.childrenIds.length - 1;
+}
+
+// A user-role input on the wire delimits a turn. Read from `request_input`
+// directly: `responseToMessageNodes` drops empty user inputs, so a node-shape
+// check could misread an empty new turn as a continuation.
+function responseHasUserInput(resp: StoredResponse): boolean {
+  return (resp.request_input ?? []).some(
+    (input) => (input as { role?: string }).role === 'user',
+  );
+}
+
+// True when `resp` continues the assistant turn anchored at `parentNode`: a
+// tool-loop round-trip (assistant-only output, no new user input) rather than a
+// new turn. The Responses API stores each round-trip as its own response, but
+// they are one turn. New turns and regeneration branches carry a user input.
+function isAssistantContinuation(
+  parentNode: ResponseTreeMessage,
+  messageNodes: ResponseMessageNode[],
+  resp: StoredResponse,
+): boolean {
+  return (
+    parentNode.role === 'assistant' &&
+    messageNodes.length > 0 &&
+    messageNodes.every((node) => node.role === 'assistant') &&
+    !responseHasUserInput(resp)
+  );
+}
+
+// Fold a continuation round-trip's output onto the turn it extends, so the turn
+// stays one message with one "thinking" trail — matching the live path;
+// otherwise the trail splits on reload (SPHER-5147). `responseId` is left as the
+// originating response, per ResponseTreeMessageMetadata's contract.
+function foldContinuation(
+  parentNode: ResponseTreeMessage,
+  messageNodes: ResponseMessageNode[],
+): void {
+  for (const node of messageNodes) {
+    parentNode.content.push(...node.content);
+    // Advance the turn's timestamp as later round-trips fold in, so it is
+    // never stamped earlier than content it now holds (consistent with the
+    // per-response `completed_at` stamp used elsewhere). Only moves forward.
+    if (node.createdAt.getTime() > parentNode.createdAt.getTime()) {
+      parentNode.createdAt = node.createdAt;
+    }
+  }
+}
+
+// Mutable accumulators threaded through the single build pass.
+interface TreeBuildState {
+  treeNodes: Record<string, ResponseTreeMessage>;
+  // For each response, the id of its last visible message — the attachment
+  // point for any future child response that chains onto it. Empty responses
+  // fall back to their parent's attachment point so the chain stays connected.
+  tailMessageByResponse: Map<string, string | null>;
+  rootMessageId: string | null;
+}
+
+// Wire one response into the tree, extending `state` in place. Tool-loop
+// continuations fold onto the turn they extend; everything else appends under
+// the chain parent resolved from `previous_response_id`.
+function linkResponse(state: TreeBuildState, resp: StoredResponse): void {
+  const { treeNodes, tailMessageByResponse } = state;
+  const parentResponseId =
+    resp.previous_response_id &&
+    tailMessageByResponse.has(resp.previous_response_id)
+      ? resp.previous_response_id
+      : null;
+  let chainParent =
+    parentResponseId !== null
+      ? (tailMessageByResponse.get(parentResponseId) ?? null)
+      : null;
+
+  const messageNodes = responseToMessageNodes(resp);
+
+  const parentNode = chainParent !== null ? treeNodes[chainParent] : null;
+  if (parentNode && isAssistantContinuation(parentNode, messageNodes, resp)) {
+    foldContinuation(parentNode, messageNodes);
+    tailMessageByResponse.set(resp.id, parentNode.id);
+    return;
+  }
+
+  let firstId: string | null = null;
+  for (const node of messageNodes) {
+    appendNode(treeNodes, node, chainParent);
+    if (firstId === null) firstId = node.id;
+    chainParent = node.id;
+  }
+
+  if (state.rootMessageId === null && firstId !== null) {
+    state.rootMessageId = firstId;
+  }
+
+  tailMessageByResponse.set(resp.id, chainParent);
+}
+
 /**
  * Convert an OpenAI Responses API list (already ordered by `created_at`
  * ascending) into a chat-kit `ConversationTree`.
@@ -535,66 +653,15 @@ export function responsesToTree(
     return { nodes: {}, rootId: null };
   }
 
-  const treeNodes: Record<string, ResponseTreeMessage> = {};
-  // For each response, the id of its last visible message — that's the
-  // attachment point for any future child response that chains onto it.
-  // Empty responses fall back to their parent's attachment point so the
-  // chain stays connected.
-  const tailMessageByResponse = new Map<string, string | null>();
-  let rootMessageId: string | null = null;
-
-  function appendNode(node: ResponseMessageNode, parentId: string | null) {
-    treeNodes[node.id] = {
-      id: node.id,
-      parentId,
-      childrenIds: [],
-      activeChildIndex: 0,
-      role: node.role,
-      content: node.content,
-      status: 'completed',
-      createdAt: node.createdAt,
-      metadata: node.metadata,
-    };
-    if (parentId !== null) {
-      const parent = treeNodes[parentId];
-      if (parent) {
-        parent.childrenIds.push(node.id);
-        // Latest insertion wins as the active branch — within a single
-        // response there's only one push, so this is a no-op there; for
-        // sibling branches it surfaces the most recent one by default.
-        parent.activeChildIndex = parent.childrenIds.length - 1;
-      }
-    }
-  }
+  const state: TreeBuildState = {
+    treeNodes: {},
+    tailMessageByResponse: new Map<string, string | null>(),
+    rootMessageId: null,
+  };
 
   for (const resp of responses) {
-    const parentResponseId =
-      resp.previous_response_id &&
-      tailMessageByResponse.has(resp.previous_response_id)
-        ? resp.previous_response_id
-        : null;
-    let chainParent =
-      parentResponseId !== null
-        ? (tailMessageByResponse.get(parentResponseId) ?? null)
-        : null;
-
-    const messageNodes = responseToMessageNodes(resp);
-    let firstId: string | null = null;
-    for (const node of messageNodes) {
-      appendNode(node, chainParent);
-      if (firstId === null) firstId = node.id;
-      chainParent = node.id;
-    }
-
-    if (rootMessageId === null && firstId !== null) {
-      rootMessageId = firstId;
-    }
-
-    // Track the attachment point for descendants. If the response had no
-    // visible messages, pass through the parent's tail so children of this
-    // response still land in the right place.
-    tailMessageByResponse.set(resp.id, chainParent);
+    linkResponse(state, resp);
   }
 
-  return { nodes: treeNodes, rootId: rootMessageId };
+  return { nodes: state.treeNodes, rootId: state.rootMessageId };
 }

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/types.ts

@@ -34,6 +34,8 @@ export interface EndpointResolver {
   files: (storeId: string) => string;
   file: (storeId: string, fileId: string) => string;
   filePublicUrl: (storeId: string, fileId: string) => string;
+  workflows: (storeId: string) => string;
+  createWorkflow: (storeId: string) => string;
   workflowRun: (storeId: string, workflowId: string) => string;
   workflowRunEventStream: (
     storeId: string,
@@ -47,6 +49,9 @@ export const defaultEndpoints: EndpointResolver = {
   file: (storeId, fileId) => `search-stores/${storeId}/files/${fileId}`,
   filePublicUrl: (storeId, fileId) =>
     `search-stores/${storeId}/files/${fileId}/public-urls?ttl=1h`,
+  workflows: (storeId) =>
+    `search-stores/${storeId}/workflows?limit=20&offset=0&created_after=&created_before=`,
+  createWorkflow: (storeId) => `search-stores/${storeId}/workflows`,
   workflowRun: (storeId, workflowId) =>
     `search-stores/${storeId}/workflows/${workflowId}/runs`,
   workflowRunEventStream: (storeId, workflowId, runId) =>
@@ -410,6 +415,7 @@ export interface UseFileUploadReturn {
   updateFileMetadata: (id: string, meta: Record<string, unknown>) => void;
   clearState: () => void;
   setStoreId: (id: string) => void;
+  setWorkflowId: (id: string) => void;
   getPublicUrl: (fileId: string) => Promise<string>;
 
   scopeBy: (metadataKey: string, value: string) => ScopedFileView;

package/src/composables/fileUpload/useFileUpload.ts

@@ -469,8 +469,9 @@ function deriveStateKey(
 export function useFileUpload(
   options: UseFileUploadOptions,
 ): UseFileUploadReturn {
-  const { client, workflowId } = options;
+  const { client } = options;
   let storeId = options.storeId ?? '';
+  let workflowId = options.workflowId;
   const endpoints: EndpointResolver = options.endpoints ?? defaultEndpoints;
   const retryPolicy: RetryPolicy = options.retryPolicy ?? DEFAULT_RETRY_POLICY;
   const constraints: FileConstraints = {
@@ -1257,6 +1258,10 @@ export function useFileUpload(
     storeId = id;
   }
 
+  function setWorkflowId(id: string) {
+    workflowId = id;
+  }
+
   async function getPublicUrl(fileId: string): Promise<string> {
     const res = await client.post<{ url: string; expires_at: string }>(
       endpoints.filePublicUrl(storeId, fileId),
@@ -1277,6 +1282,7 @@ export function useFileUpload(
     updateFileMetadata,
     clearState,
     setStoreId,
+    setWorkflowId,
     getPublicUrl,
 
     scopeBy,