@aleph-alpha/chat-kit 1.3.1 → 1.4.0

package/src/composables/useConversations.spec.ts

@@ -1,3 +1,4 @@
+import type { ResponseList, StoredResponse } from '../adapters/responses-api';
 import type {
   HttpClient,
   RawConversation,
@@ -554,4 +555,121 @@ describe('useConversations', () => {
       expect(conv.getById('missing')).toBeUndefined();
     });
   });
+
+  describe('fetchResponses', () => {
+    function makeStoredResponse(
+      overrides: Partial<StoredResponse> & { id: string },
+    ): StoredResponse {
+      return {
+        object: 'response',
+        created_at: 1_777_456_700,
+        completed_at: 1_777_456_701,
+        status: 'completed',
+        model: 'pharia-1',
+        output: [],
+        request_input: [],
+        ...overrides,
+      };
+    }
+
+    function makeResponseList(data: StoredResponse[]): ResponseList {
+      return { object: 'list', data };
+    }
+
+    it('GETs /:id/responses with order=asc by default and returns the unwrapped list', async () => {
+      const http = makeFakeHttp();
+      http.get.mockResolvedValue(
+        makeResponseList([
+          makeStoredResponse({ id: 'resp_1' }),
+          makeStoredResponse({ id: 'resp_2' }),
+        ]),
+      );
+
+      const conv = useConversations({
+        httpClient: asHttp(http),
+        path: '/conversations',
+      });
+
+      const result = await conv.fetchResponses('conv_22');
+
+      expect(http.get).toHaveBeenCalledWith(
+        '/conversations/conv_22/responses',
+        {
+          params: { order: 'asc' },
+        },
+      );
+      expect(result.map((r) => r.id)).toEqual(['resp_1', 'resp_2']);
+    });
+
+    it('passes through the caller-supplied order', async () => {
+      const http = makeFakeHttp();
+      http.get.mockResolvedValue(makeResponseList([]));
+
+      const conv = useConversations({
+        httpClient: asHttp(http),
+        path: '/conversations',
+      });
+
+      await conv.fetchResponses('conv_22', { order: 'desc' });
+
+      expect(http.get).toHaveBeenCalledWith(
+        '/conversations/conv_22/responses',
+        {
+          params: { order: 'desc' },
+        },
+      );
+    });
+
+    it('does not modify the conversations list', async () => {
+      const http = makeFakeHttp();
+      http.get
+        .mockResolvedValueOnce(makeRawList([makeRawConversation({ id: 'a' })]))
+        .mockResolvedValueOnce(
+          makeResponseList([makeStoredResponse({ id: 'resp_1' })]),
+        );
+
+      const conv = useConversations({
+        httpClient: asHttp(http),
+        path: '/conversations',
+      });
+      await conv.fetch();
+      await conv.fetchResponses('a');
+
+      expect(conv.conversations.value.map((c) => c.id)).toEqual(['a']);
+    });
+
+    it('toggles isLoading around the call', async () => {
+      const http = makeFakeHttp();
+      let resolve!: (value: ResponseList) => void;
+      http.get.mockReturnValue(new Promise((r) => (resolve = r)));
+
+      const conv = useConversations({
+        httpClient: asHttp(http),
+        path: '/conversations',
+      });
+      const promise = conv.fetchResponses('a');
+
+      await nextTick();
+      expect(conv.isLoading.value).toBe(true);
+
+      resolve(makeResponseList([]));
+      await promise;
+
+      expect(conv.isLoading.value).toBe(false);
+    });
+
+    it('records and re-throws errors', async () => {
+      const http = makeFakeHttp();
+      http.get.mockRejectedValue(new Error('boom'));
+
+      const conv = useConversations({
+        httpClient: asHttp(http),
+        path: '/conversations',
+      });
+
+      await expect(conv.fetchResponses('a')).rejects.toThrow('boom');
+      expect(conv.error.value?.message).toBe('boom');
+      expect(conv.isLoading.value).toBe(false);
+    });
+  });
 });

package/src/composables/useConversations.ts

@@ -1,3 +1,4 @@
+import type { ResponseList, StoredResponse } from '../adapters/responses-api';
 import { generateId, secondsToDate, toError } from '../helpers';
 import type {
   ConversationSummary,
@@ -85,6 +86,18 @@ export interface UseConversationsReturn {
   remove(id: string, options?: MutationOptions): Promise<void>;
   /** Local lookup. Does not fetch — only checks the in-memory list. */
   getById(id: string): ConversationSummary | undefined;
+  /**
+   * List the OpenAI Responses-API records attached to a conversation. Pure
+   * fetch: it does not touch the conversations list. The endpoint is not
+   * paginated, so the returned array is the full timeline ordered by
+   * `created_at` (ascending by default). Pair with `responsesToTree` from
+   * `@aleph-alpha/chat-kit/adapters/responses-api` to hydrate a chat
+   * handler: `setTree(responsesToTree(await fetchResponses(id)))`.
+   */
+  fetchResponses(
+    id: string,
+    options?: { order?: 'asc' | 'desc' },
+  ): Promise<StoredResponse[]>;
 }
 
 const DEFAULT_PAGE_SIZE = 20;
@@ -277,6 +290,24 @@ export function useConversations(
     return conversations.value.find((c) => c.id === id);
   }
 
+  async function fetchResponses(
+    id: string,
+    opts?: { order?: 'asc' | 'desc' },
+  ): Promise<StoredResponse[]> {
+    beginRequest();
+    try {
+      const raw = await http.get<ResponseList>(`${path}/${id}/responses`, {
+        params: { order: opts?.order ?? 'asc' },
+      });
+      return raw.data;
+    } catch (e) {
+      error.value = toError(e);
+      throw error.value;
+    } finally {
+      endRequest();
+    }
+  }
+
   return {
     conversations: readonly(conversations) as Readonly<
       Ref<readonly ConversationSummary[]>
@@ -291,6 +322,7 @@ export function useConversations(
     rename,
     remove,
     getById,
+    fetchResponses,
   };
 }
 

package/src/handlers/useChatKitLabels.spec.ts

@@ -261,7 +261,14 @@ describe('CkConversation uses injected labels', () => {
             {
               id: '1',
               role: 'assistant',
-              content: 'Hi',
+              content: [
+                {
+                  type: 'text',
+                  id: 'txt-1',
+                  text: 'Hi',
+                  status: 'completed',
+                },
+              ],
               createdAt: new Date(),
               status: 'completed',
             },
@@ -290,7 +297,14 @@ describe('CkConversation uses injected labels', () => {
                 {
                   id: '1',
                   role: 'assistant',
-                  content: 'Hi',
+                  content: [
+                    {
+                      type: 'text',
+                      id: 'txt-1',
+                      text: 'Hi',
+                      status: 'completed',
+                    },
+                  ],
                   createdAt: new Date(),
                   status: 'completed',
                 },

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;