@aleph-alpha/chat-kit 1.3.1 → 1.5.0

package/src/handlers/useMessageHandler.spec.ts

@@ -1,6 +1,29 @@
-import type { ConversationTree, TreeMessage } from '../types';
+import type {
+  ConversationTree,
+  MessageContent,
+  MessageTextContent,
+  TreeMessage,
+} from '../types';
 import { useMessageHandler } from './useMessageHandler';
 
+let textIdCounter = 0;
+function text(value: string): MessageTextContent {
+  textIdCounter += 1;
+  return {
+    type: 'text',
+    id: `txt-${textIdCounter}`,
+    text: value,
+    status: 'completed',
+  };
+}
+
+function getText(content: MessageContent[]): string {
+  return content
+    .filter((c): c is MessageTextContent => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
+
 function makeTreeMessage(
   overrides: Partial<TreeMessage> & { id: string },
 ): TreeMessage {
@@ -9,7 +32,7 @@ function makeTreeMessage(
     childrenIds: [],
     activeChildIndex: 0,
     role: 'user',
-    content: '',
+    content: [],
     status: 'completed',
     createdAt: new Date('2025-01-01'),
     ...overrides,
@@ -43,11 +66,26 @@ describe('useMessageHandler', () => {
       const msg = handler.commitUserMessage();
 
       expect(msg.role).toBe('user');
-      expect(msg.content).toBe('Hello');
+      expect(getText(msg.content)).toBe('Hello');
       expect(handler.messages.value).toHaveLength(1);
       expect(handler.messages.value[0].id).toBe(msg.id);
     });
 
+    it('produces a single text content item with status completed', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      expect(msg.content).toHaveLength(1);
+      const part = msg.content[0];
+      expect(part.type).toBe('text');
+      if (part.type === 'text') {
+        expect(part.text).toBe('Hello');
+        expect(part.status).toBe('completed');
+        expect(part.id).toBeTruthy();
+      }
+    });
+
     it('appends consecutive messages in order', () => {
       const handler = useMessageHandler();
 
@@ -90,25 +128,25 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: msg.id,
-        content: 'Updated',
+        content: [text('Updated')],
         role: 'user',
         status: 'completed',
       });
 
-      expect(handler.messages.value[0].content).toBe('Updated');
+      expect(getText(handler.messages.value[0].content)).toBe('Updated');
     });
 
     it('creates a new node when id does not exist (upsert)', () => {
       const handler = useMessageHandler();
       handler.updateMessage({
         id: 'new-1',
-        content: 'Upserted',
+        content: [text('Upserted')],
         role: 'assistant',
         status: 'completed',
       });
 
       expect(handler.messages.value).toHaveLength(1);
-      expect(handler.messages.value[0].content).toBe('Upserted');
+      expect(getText(handler.messages.value[0].content)).toBe('Upserted');
       expect(handler.messages.value[0].id).toBe('new-1');
     });
 
@@ -119,14 +157,40 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'assistant-1',
-        content: 'Reply',
+        content: [text('Reply')],
         role: 'assistant',
         status: 'completed',
       });
 
       expect(handler.messages.value).toHaveLength(2);
       expect(handler.messages.value[1].id).toBe('assistant-1');
-      expect(handler.messages.value[1].content).toBe('Reply');
+      expect(getText(handler.messages.value[1].content)).toBe('Reply');
+    });
+
+    it('preserves multi-part content (text + tool + reasoning)', () => {
+      const handler = useMessageHandler();
+      const content: MessageContent[] = [
+        { type: 'reasoning', id: 'r1', status: 'completed' },
+        { type: 'tool', id: 't1', name: 'search' },
+        {
+          type: 'text',
+          id: 'txt-multi',
+          text: 'Final answer',
+          status: 'completed',
+        },
+      ];
+      handler.updateMessage({
+        id: 'a-multi',
+        content,
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      const stored = handler.messages.value[0];
+      expect(stored.content).toHaveLength(3);
+      expect(stored.content[0].type).toBe('reasoning');
+      expect(stored.content[1].type).toBe('tool');
+      expect(stored.content[2].type).toBe('text');
     });
 
     it('updates a mid-tree node in place without truncating the path', () => {
@@ -134,23 +198,23 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'First' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('First')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Reply 1',
+              content: [text('Reply 1')],
             }),
             u2: makeTreeMessage({
               id: 'u2',
               parentId: 'a1',
-              content: 'Second',
+              content: [text('Second')],
             }),
             a2: makeTreeMessage({
               id: 'a2',
               parentId: 'u2',
               role: 'assistant',
-              content: 'Reply 2',
+              content: [text('Reply 2')],
             }),
           },
           'u1',
@@ -159,13 +223,13 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'a1',
-        content: 'Regenerated',
+        content: [text('Regenerated')],
         role: 'assistant',
         status: 'sending',
       });
 
       expect(handler.messages.value).toHaveLength(4);
-      expect(handler.messages.value[1].content).toBe('Regenerated');
+      expect(getText(handler.messages.value[1].content)).toBe('Regenerated');
     });
 
     it('does not truncate when updating the last message', () => {
@@ -173,12 +237,12 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hi',
+              content: [text('Hi')],
             }),
           },
           'u1',
@@ -187,13 +251,13 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'a1',
-        content: 'Streaming...',
+        content: [text('Streaming...')],
         role: 'assistant',
         status: 'sending',
       });
 
       expect(handler.messages.value).toHaveLength(2);
-      expect(handler.messages.value[1].content).toBe('Streaming...');
+      expect(getText(handler.messages.value[1].content)).toBe('Streaming...');
     });
   });
 
@@ -206,7 +270,7 @@ describe('useMessageHandler', () => {
       const found = handler.getMessageById(msg.id);
       expect(found).toBeDefined();
       expect(found?.id).toBe(msg.id);
-      expect(found?.content).toBe('Hello');
+      expect(getText(found?.content ?? [])).toBe('Hello');
       expect(found?.role).toBe('user');
     });
 
@@ -240,7 +304,7 @@ describe('useMessageHandler', () => {
 
       const renamed = handler.getMessageById('renamed');
       expect(renamed?.role).toBe(role);
-      expect(renamed?.content).toBe(content);
+      expect(renamed?.content).toEqual(content);
       expect(renamed?.status).toBe(status);
       expect(renamed?.createdAt).toEqual(createdAt);
     });
@@ -250,14 +314,18 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            a: makeTreeMessage({ id: 'a', content: 'A' }),
+            a: makeTreeMessage({ id: 'a', content: [text('A')] }),
             b: makeTreeMessage({
               id: 'b',
               parentId: 'a',
               role: 'assistant',
-              content: 'B',
+              content: [text('B')],
+            }),
+            c: makeTreeMessage({
+              id: 'c',
+              parentId: 'b',
+              content: [text('C')],
             }),
-            c: makeTreeMessage({ id: 'c', parentId: 'b', content: 'C' }),
           },
           'a',
         ),
@@ -291,7 +359,7 @@ describe('useMessageHandler', () => {
       handler.commitUserMessage();
       handler.updateMessage({
         id: 'a1',
-        content: 'Reply',
+        content: [text('Reply')],
         role: 'assistant',
         status: 'completed',
       });
@@ -323,7 +391,7 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'a1',
-        content: 'Reply 1',
+        content: [text('Reply 1')],
         role: 'assistant',
         status: 'completed',
       });
@@ -333,7 +401,7 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'a2',
-        content: 'Reply 2',
+        content: [text('Reply 2')],
         role: 'assistant',
         status: 'completed',
       });
@@ -341,7 +409,7 @@ describe('useMessageHandler', () => {
       const roles = handler.messages.value.map((m) => m.role);
       expect(roles).toEqual(['user', 'assistant', 'user', 'assistant']);
 
-      const contents = handler.messages.value.map((m) => m.content);
+      const contents = handler.messages.value.map((m) => getText(m.content));
       expect(contents).toEqual(['One', 'Reply 1', 'Two', 'Reply 2']);
     });
 
@@ -355,7 +423,7 @@ describe('useMessageHandler', () => {
 
       handler.updateMessage({
         id: 'a1',
-        content: 'Hi',
+        content: [text('Hi')],
         role: 'assistant',
         status: 'completed',
       });
@@ -369,12 +437,12 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hi',
+              content: [text('Hi')],
             }),
           },
           'u1',
@@ -395,13 +463,13 @@ describe('useMessageHandler', () => {
               id: 'a',
               parentId: 'r',
               role: 'assistant',
-              content: 'A',
+              content: [text('A')],
             }),
             b: makeTreeMessage({
               id: 'b',
               parentId: 'r',
               role: 'assistant',
-              content: 'B',
+              content: [text('B')],
             }),
           },
           'r',
@@ -419,23 +487,23 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hi',
+              content: [text('Hi')],
             }),
             a2: makeTreeMessage({
               id: 'a2',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hey',
+              content: [text('Hey')],
             }),
             u2: makeTreeMessage({
               id: 'u2',
               parentId: 'a2',
-              content: 'Follow-up',
+              content: [text('Follow-up')],
             }),
           },
           'u1',
@@ -459,18 +527,18 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hi',
+              content: [text('Hi')],
             }),
             a2: makeTreeMessage({
               id: 'a2',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hey',
+              content: [text('Hey')],
             }),
           },
           'u1',
@@ -502,23 +570,23 @@ describe('useMessageHandler', () => {
       handler.setTree(
         makeTree(
           {
-            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
             a1: makeTreeMessage({
               id: 'a1',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hi',
+              content: [text('Hi')],
             }),
             a2: makeTreeMessage({
               id: 'a2',
               parentId: 'u1',
               role: 'assistant',
-              content: 'Hey',
+              content: [text('Hey')],
             }),
             u2: makeTreeMessage({
               id: 'u2',
               parentId: 'a2',
-              content: 'Follow-up',
+              content: [text('Follow-up')],
             }),
           },
           'u1',

package/src/handlers/useMessageHandler.ts

@@ -10,6 +10,7 @@ import {
 import type {
   BaseMessage,
   ConversationTree,
+  MessageContent,
   MessageRole,
   MessageStatus,
   TreeMessage,
@@ -40,13 +41,17 @@ export const useMessageHandler = () => {
     const text = currentUserMessage.value.trim();
     if (!text) throw new Error('No message');
 
+    const content: MessageContent[] = [
+      { type: 'text', id: generateId(), text, status: 'completed' },
+    ];
+
     const node: TreeMessage = {
       id,
       parentId: currentLeafId.value,
       childrenIds: [],
       activeChildIndex: 0,
       role: 'user',
-      content: text,
+      content,
       status: 'completed',
       createdAt: new Date(),
     };
@@ -65,7 +70,7 @@ export const useMessageHandler = () => {
 
   function updateMessage(message: {
     id: string;
-    content: string;
+    content: MessageContent[];
     role: MessageRole;
     status: MessageStatus;
   }) {
@@ -112,6 +117,15 @@ export const useMessageHandler = () => {
     Object.assign(tree, createEmptyTree());
   }
 
+  /**
+   * Replace the entire tree. Pair with a format adapter (e.g.
+   * `responsesToTree` from `@aleph-alpha/chat-kit/adapters/responses-api`)
+   * when hydrating from a server transcript:
+   *
+   * ```ts
+   * setTree(responsesToTree(await fetchResponses(id)));
+   * ```
+   */
   function setTree(incoming: ConversationTree) {
     tree.nodes = incoming.nodes;
     tree.rootId = incoming.rootId;

package/src/helpers/conversationTree.spec.ts

@@ -1,4 +1,9 @@
-import type { ConversationTree, TreeMessage } from '../types';
+import type {
+  ConversationTree,
+  MessageContent,
+  MessageTextContent,
+  TreeMessage,
+} from '../types';
 import {
   addNode,
   createEmptyTree,
@@ -8,6 +13,17 @@ import {
   updateNodeId,
 } from './conversationTree';
 
+let textIdCounter = 0;
+function text(value: string): MessageTextContent {
+  textIdCounter += 1;
+  return {
+    type: 'text',
+    id: `txt-${textIdCounter}`,
+    text: value,
+    status: 'completed',
+  };
+}
+
 function makeTreeMessage(
   overrides: Partial<TreeMessage> & { id: string },
 ): TreeMessage {
@@ -16,7 +32,7 @@ function makeTreeMessage(
     childrenIds: [],
     activeChildIndex: 0,
     role: 'user',
-    content: '',
+    content: [],
     status: 'completed',
     createdAt: new Date('2025-01-01'),
     ...overrides,
@@ -42,6 +58,13 @@ function makeTree(
   return { nodes, rootId };
 }
 
+function getText(content: MessageContent[]): string {
+  return content
+    .filter((c): c is MessageTextContent => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
+
 /**
  * Builds a simple branching tree for tests:
  *
@@ -58,42 +81,42 @@ function makeTree(
 function makeBranchingTree(): ConversationTree {
   return makeTree(
     {
-      u1: makeTreeMessage({ id: 'u1', role: 'user', content: 'Hello' }),
+      u1: makeTreeMessage({ id: 'u1', role: 'user', content: [text('Hello')] }),
       a1: makeTreeMessage({
         id: 'a1',
         parentId: 'u1',
         role: 'assistant',
-        content: 'Hi',
+        content: [text('Hi')],
       }),
       u2: makeTreeMessage({
         id: 'u2',
         parentId: 'a1',
         role: 'user',
-        content: 'Question',
+        content: [text('Question')],
       }),
       a2: makeTreeMessage({
         id: 'a2',
         parentId: 'u2',
         role: 'assistant',
-        content: 'Answer 1',
+        content: [text('Answer 1')],
       }),
       a3: makeTreeMessage({
         id: 'a3',
         parentId: 'u2',
         role: 'assistant',
-        content: 'Answer 2',
+        content: [text('Answer 2')],
       }),
       a1b: makeTreeMessage({
         id: 'a1b',
         parentId: 'u1',
         role: 'assistant',
-        content: 'Alt hi',
+        content: [text('Alt hi')],
       }),
       u3: makeTreeMessage({
         id: 'u3',
         parentId: 'a1b',
         role: 'user',
-        content: 'Follow-up',
+        content: [text('Follow-up')],
       }),
     },
     'u1',
@@ -166,7 +189,7 @@ describe('getLinearPath', () => {
 
     const u1Msg = path[0];
     expect(u1Msg.role).toBe('user');
-    expect(u1Msg.content).toBe('Hello');
+    expect(getText(u1Msg.content)).toBe('Hello');
     expect(u1Msg.status).toBe('completed');
     expect(u1Msg.createdAt).toEqual(new Date('2025-01-01'));
   });
@@ -175,7 +198,7 @@ describe('getLinearPath', () => {
 describe('addNode', () => {
   it('adds the first node as root', () => {
     const tree = createEmptyTree();
-    const node = makeTreeMessage({ id: 'u1', content: 'Hello' });
+    const node = makeTreeMessage({ id: 'u1', content: [text('Hello')] });
 
     addNode(tree, node);
 
@@ -248,8 +271,8 @@ describe('addNode', () => {
 describe('updateNode', () => {
   it('updates content of an existing node', () => {
     const tree = makeBranchingTree();
-    updateNode(tree, 'a1', { content: 'Updated hi' });
-    expect(tree.nodes.a1.content).toBe('Updated hi');
+    updateNode(tree, 'a1', { content: [text('Updated hi')] });
+    expect(getText(tree.nodes.a1.content)).toBe('Updated hi');
   });
 
   it('updates status of an existing node', () => {
@@ -261,7 +284,7 @@ describe('updateNode', () => {
   it('is a no-op for nonexistent id', () => {
     const tree = makeBranchingTree();
     const nodeCount = Object.keys(tree.nodes).length;
-    updateNode(tree, 'nonexistent', { content: 'x' });
+    updateNode(tree, 'nonexistent', { content: [text('x')] });
     expect(Object.keys(tree.nodes).length).toBe(nodeCount);
   });
 });
@@ -366,19 +389,23 @@ describe('integration: full branching scenario', () => {
   it('simulates send → regenerate → navigate workflow', () => {
     const tree = createEmptyTree();
 
-    addNode(tree, makeTreeMessage({ id: 'u1', content: 'Hello' }));
+    addNode(tree, makeTreeMessage({ id: 'u1', content: [text('Hello')] }));
     addNode(
       tree,
       makeTreeMessage({
         id: 'a1',
         parentId: 'u1',
         role: 'assistant',
-        content: 'Hi there',
+        content: [text('Hi there')],
       }),
     );
     addNode(
       tree,
-      makeTreeMessage({ id: 'u2', parentId: 'a1', content: 'Tell me more' }),
+      makeTreeMessage({
+        id: 'u2',
+        parentId: 'a1',
+        content: [text('Tell me more')],
+      }),
     );
     addNode(
       tree,
@@ -386,7 +413,7 @@ describe('integration: full branching scenario', () => {
         id: 'a2',
         parentId: 'u2',
         role: 'assistant',
-        content: 'Sure thing',
+        content: [text('Sure thing')],
       }),
     );
 
@@ -399,7 +426,7 @@ describe('integration: full branching scenario', () => {
         id: 'a3',
         parentId: 'u2',
         role: 'assistant',
-        content: 'Certainly!',
+        content: [text('Certainly!')],
       }),
     );
 

package/src/index.ts

@@ -1,7 +1,5 @@
 // Services
 export {
-  ChatService,
-  type IChatService,
   type ChatConfig,
   type ChatMessage,
   type ChatResponse,
@@ -12,6 +10,12 @@ export {
   type StreamEvent,
 } from './services';
 
+// Adapters' wire-level types (e.g. Responses-API) are intentionally NOT
+// re-exported at the top level — import them from
+// `@aleph-alpha/chat-kit/adapters/responses-api` (or the aggregate
+// `@aleph-alpha/chat-kit/adapters`) to keep the format you depend on
+// explicit.
+
 // Handlers
 export {
   useMessageHandler,
@@ -83,7 +87,12 @@ export type {
   BaseMessage,
   Conversation,
   ConversationTree,
+  MessageContent,
+  MessageContentStatus,
+  MessageReasoningContent,
   MessageRole,
   MessageStatus,
+  MessageTextContent,
+  MessageToolContent,
   TreeMessage,
 } from './types';

package/src/services/index.ts

@@ -1,5 +1,3 @@
-export { ChatService, type IChatService } from './ChatService';
-export { MockChatService } from './MockChatService';
 export type {
   ChatConfig,
   ChatMessage,

package/src/services/types.ts

@@ -1,4 +1,4 @@
-import type { BaseMessage, MessageRole } from '../types';
+import type { BaseMessage, MessageContent, MessageRole } from '../types';
 
 /**
  * Minimal HTTP transport contract that chat-kit composables depend on.
@@ -61,7 +61,7 @@ export interface RawConversationList {
 export interface ChatMessage {
   id: string;
   role: MessageRole;
-  content: string;
+  content: MessageContent[];
 }
 
 /**