@aleph-alpha/chat-kit 1.3.1 → 1.4.0

package/src/components/composed/CkConversation/CkConversation.spec.ts

@@ -1,4 +1,4 @@
-import type { BaseMessage } from '../../../types';
+import type { BaseMessage, MessageContent } from '../../../types';
 import CkConversation from './CkConversation.vue';
 import { defaultMarkdownClasses } from '../../base/CkMarkdownRenderer/defaultMarkdownClasses';
 import { render, screen } from '@testing-library/vue';
@@ -6,45 +6,62 @@ import { h } from 'vue';
 
 const now = new Date();
 
+let textIdCounter = 0;
+function text(value: string): MessageContent {
+  textIdCounter += 1;
+  return {
+    type: 'text',
+    id: `txt-${textIdCounter}`,
+    text: value,
+    status: 'completed',
+  };
+}
+
 const messages: BaseMessage[] = [
   {
     id: '1',
     role: 'user',
-    content: 'Hello there',
+    content: [text('Hello there')],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '2',
     role: 'assistant',
-    content: 'Hi! How can I help?',
+    content: [text('Hi! How can I help?')],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '3',
     role: 'user',
-    content: 'Tell me a joke',
+    content: [text('Tell me a joke')],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '4',
     role: 'assistant',
-    content: 'Why did the chicken cross the road?',
+    content: [text('Why did the chicken cross the road?')],
     createdAt: now,
     status: 'completed',
   },
 ];
 
-function agentMessage(overrides: Partial<BaseMessage> = {}): BaseMessage {
+function agentMessage(
+  overrides: Partial<Omit<BaseMessage, 'content'>> & {
+    content?: MessageContent[];
+    text?: string;
+  } = {},
+): BaseMessage {
+  const { content, text: textOverride, ...rest } = overrides;
   return {
     id: '1',
     role: 'assistant',
-    content: 'Hello',
     createdAt: now,
     status: 'completed',
-    ...overrides,
+    ...rest,
+    content: content ?? [text(textOverride ?? 'Hello')],
   };
 }
 
@@ -65,6 +82,44 @@ describe('CkConversation', () => {
         screen.getByText('Why did the chicken cross the road?'),
       ).toBeInTheDocument();
     });
+
+    it('joins multiple text content parts in agent messages', () => {
+      const message: BaseMessage = {
+        id: 'a-multi',
+        role: 'assistant',
+        content: [text('Part one. '), text('Part two.')],
+        createdAt: now,
+        status: 'completed',
+      };
+
+      const { container } = render(CkConversation, {
+        props: { messages: [message] },
+      });
+
+      const renderer = container.querySelector('.markdown-renderer');
+      expect(renderer).not.toBeNull();
+      expect(renderer?.textContent).toBe('Part one. Part two.');
+    });
+
+    it('ignores non-text content parts in default rendering', () => {
+      const message: BaseMessage = {
+        id: 'a-skip',
+        role: 'assistant',
+        content: [
+          { type: 'reasoning', id: 'r-1', status: 'completed' },
+          { type: 'tool', id: 't-1', name: 'search' },
+          text('Final answer.'),
+        ],
+        createdAt: now,
+        status: 'completed',
+      };
+
+      render(CkConversation, { props: { messages: [message] } });
+
+      expect(screen.getByText('Final answer.')).toBeInTheDocument();
+      // Tool name and reasoning lifecycle are not rendered by default
+      expect(screen.queryByText('search')).not.toBeInTheDocument();
+    });
   });
 
   describe('agent icon', () => {
@@ -81,12 +136,10 @@ describe('CkConversation', () => {
         props: { messages: [agentMessage()] },
       });
 
-      // The icon container inside CkAgentMessage should not be rendered
       const agentMessageEl = container.querySelector(
         '.flex.w-full.items-start.gap-2',
       );
       expect(agentMessageEl).toBeInTheDocument();
-      // The flex-shrink-0 icon wrapper should not exist
       expect(
         agentMessageEl?.querySelector(
           '.flex.flex-shrink-0.items-center.justify-center',
@@ -216,6 +269,51 @@ describe('CkConversation', () => {
     });
   });
 
+  describe('copy action', () => {
+    it('exposes the joined text via the copy action button', () => {
+      const message: BaseMessage = {
+        id: 'mix2',
+        role: 'assistant',
+        content: [
+          { type: 'reasoning', id: 'r', status: 'completed' },
+          text('Hello '),
+          { type: 'tool', id: 'tl', name: 'search' },
+          text('world.'),
+        ],
+        createdAt: now,
+        status: 'completed',
+      };
+      const { container } = render(CkConversation, {
+        props: { messages: [message] },
+      });
+
+      const copyButton = container.querySelector(
+        'button[aria-label="Copy response"]',
+      );
+      expect(copyButton).not.toBeNull();
+    });
+
+    it('hides the copy button when there is no text content', () => {
+      const message: BaseMessage = {
+        id: 'mix3',
+        role: 'assistant',
+        content: [
+          { type: 'reasoning', id: 'r', status: 'completed' },
+          { type: 'tool', id: 'tl', name: 'search' },
+        ],
+        createdAt: now,
+        status: 'completed',
+      };
+      const { container } = render(CkConversation, {
+        props: { messages: [message] },
+      });
+
+      expect(
+        container.querySelector('button[aria-label="Copy response"]'),
+      ).toBeNull();
+    });
+  });
+
   describe('slot overrides', () => {
     it('allows replacing user message content via user-message-content slot', () => {
       render(CkConversation, {
@@ -224,7 +322,7 @@ describe('CkConversation', () => {
             {
               id: '1',
               role: 'user',
-              content: 'Original',
+              content: [text('Original')],
               createdAt: now,
               status: 'completed',
             } as BaseMessage,
@@ -244,7 +342,7 @@ describe('CkConversation', () => {
             {
               id: '1',
               role: 'user',
-              content: 'Original',
+              content: [text('Original')],
               createdAt: now,
               status: 'completed',
             } as BaseMessage,
@@ -260,7 +358,7 @@ describe('CkConversation', () => {
 
     it('allows replacing agent content via agent-message-content slot', () => {
       render(CkConversation, {
-        props: { messages: [agentMessage({ content: 'Original' })] },
+        props: { messages: [agentMessage({ text: 'Original' })] },
         slots: { 'agent-message-content': 'Rich agent content' },
       });
 
@@ -270,7 +368,7 @@ describe('CkConversation', () => {
 
     it('allows replacing the entire agent message via agent-message slot', () => {
       render(CkConversation, {
-        props: { messages: [agentMessage({ content: 'Original' })] },
+        props: { messages: [agentMessage({ text: 'Original' })] },
         slots: {
           'agent-message':
             '<div data-testid="custom-agent">Fully replaced</div>',
@@ -306,22 +404,71 @@ describe('CkConversation', () => {
 
       expect(screen.getByText('Copy')).toBeInTheDocument();
     });
+
+    it('exposes the full content array to agent-message-content for custom rendering', () => {
+      const message: BaseMessage = {
+        id: 'cot',
+        role: 'assistant',
+        content: [
+          { type: 'reasoning', id: 'r', status: 'completed' },
+          { type: 'tool', id: 'tl', name: 'web_search' },
+          text('Done.'),
+        ],
+        createdAt: now,
+        status: 'completed',
+      };
+      function describePart(part: MessageContent): string {
+        if (part.type === 'tool') return part.name;
+        if (part.type === 'text') return part.text;
+        return part.status;
+      }
+
+      const { container } = render(CkConversation, {
+        props: { messages: [message] },
+        slots: {
+          'agent-message-content': ({ message: m }: { message: BaseMessage }) =>
+            h(
+              'ul',
+              { 'data-testid': 'parts' },
+              m.content.map((part) =>
+                h(
+                  'li',
+                  { 'data-type': part.type, key: part.id },
+                  describePart(part),
+                ),
+              ),
+            ),
+        },
+      });
+
+      const list = container.querySelector('[data-testid="parts"]');
+      expect(list).not.toBeNull();
+      expect(list?.querySelectorAll('li')).toHaveLength(3);
+      expect(list?.querySelector('[data-type="reasoning"]')?.textContent).toBe(
+        'completed',
+      );
+      expect(list?.querySelector('[data-type="tool"]')?.textContent).toBe(
+        'web_search',
+      );
+      expect(list?.querySelector('[data-type="text"]')?.textContent).toBe(
+        'Done.',
+      );
+    });
   });
 
   describe('empty conversation', () => {
     it('renders nothing when messages array is empty', () => {
       const { container } = render(CkConversation, { props: { messages: [] } });
 
-      // Only the scroll container should exist, with no message content
       expect(container.querySelectorAll('[data-message-row]')).toHaveLength(0);
     });
   });
 
   describe('markdown rendering', () => {
-    it('renders agent message content as markdown by default', () => {
+    it('renders agent text content as markdown by default', () => {
       const { container } = render(CkConversation, {
         props: {
-          messages: [agentMessage({ content: 'This has **bold** text' })],
+          messages: [agentMessage({ text: 'This has **bold** text' })],
         },
       });
 
@@ -332,7 +479,7 @@ describe('CkConversation', () => {
       const { container } = render(CkConversation, {
         props: {
           messages: [
-            agentMessage({ content: '## Title\n\n- item one\n- item two' }),
+            agentMessage({ text: '## Title\n\n- item one\n- item two' }),
           ],
         },
       });
@@ -344,7 +491,7 @@ describe('CkConversation', () => {
     it('applies default markdown classes to elements', () => {
       const { container } = render(CkConversation, {
         props: {
-          messages: [agentMessage({ content: 'A paragraph' })],
+          messages: [agentMessage({ text: 'A paragraph' })],
         },
       });
 
@@ -356,7 +503,7 @@ describe('CkConversation', () => {
     it('merges agentMarkdownClasses prop with defaults', () => {
       const { container } = render(CkConversation, {
         props: {
-          messages: [agentMessage({ content: 'A paragraph' })],
+          messages: [agentMessage({ text: 'A paragraph' })],
           agentMarkdownClasses: { p: 'custom-paragraph' },
         },
       });
@@ -371,8 +518,7 @@ describe('CkConversation', () => {
         props: {
           messages: [
             agentMessage({
-              content:
-                '## Heading\n\nParagraph with [link](https://example.com)',
+              text: '## Heading\n\nParagraph with [link](https://example.com)',
             }),
           ],
           agentMarkdownClasses: { p: 'custom-paragraph' },
@@ -388,7 +534,7 @@ describe('CkConversation', () => {
 
     it('does not render CkMarkdownRenderer when agent-message-content slot is provided', () => {
       const { container } = render(CkConversation, {
-        props: { messages: [agentMessage({ content: '**bold**' })] },
+        props: { messages: [agentMessage({ text: '**bold**' })] },
         slots: {
           'agent-message-content':
             '<div data-testid="custom-content">Custom</div>',
@@ -403,7 +549,7 @@ describe('CkConversation', () => {
       const markdown = '```python\nprint("hello")\n```';
 
       const { container } = render(CkConversation, {
-        props: { messages: [agentMessage({ content: markdown })] },
+        props: { messages: [agentMessage({ text: markdown })] },
         slots: {
           'agent-message-code-block': (props: {
             code: string;
@@ -428,7 +574,7 @@ describe('CkConversation', () => {
       const markdown = '```javascript\nconsole.log("hi");\n```';
 
       const { container } = render(CkConversation, {
-        props: { messages: [agentMessage({ content: markdown })] },
+        props: { messages: [agentMessage({ text: markdown })] },
       });
 
       const codeEl = container.querySelector('pre > code');