@aleph-alpha/chat-kit 1.3.1 → 1.5.0

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

@@ -1,13 +1,35 @@
 import { CkCopyMessageActionButton } from '../../base/CkCopyMessageActionButton';
 import { CkFeedbackButton } from '../../base/CkFeedbackButton';
 import type { CkFeedbackValue } from '../../base/CkFeedbackButton';
-import type { BaseMessage } from '../../../types';
+import type {
+  BaseMessage,
+  MessageContent,
+  MessageTextContent,
+} from '../../../types';
 import CkConversation from './CkConversation.vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 
 const now = new Date();
 
+let textIdCounter = 0;
+function text(value: string): MessageTextContent {
+  textIdCounter += 1;
+  return {
+    type: 'text',
+    id: `txt-${textIdCounter}`,
+    text: value,
+    status: 'completed',
+  };
+}
+
+function getMessageText(message: BaseMessage): string {
+  return message.content
+    .filter((c): c is MessageTextContent => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
+
 const markdownContent = [
   'Based on a review of internal documents, here are the **key lessons learned** and best practices from the *Digital Transformation Phase 1* project, broken down by category.',
   '',
@@ -37,31 +59,64 @@ const sampleMessages: BaseMessage[] = [
   {
     id: '1',
     role: 'user',
-    content: 'Hello! Can you help me with something?',
+    content: [text('Hello! Can you help me with something?')],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '2',
     role: 'assistant',
-    content: 'Of course! I am here to help. What would you like to know?',
+    content: [
+      text('Of course! I am here to help. What would you like to know?'),
+    ],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '3',
     role: 'user',
-    content:
-      "Find the lessons learned and best practices from the 'Digital Transformation Phase 1' project, specifically focusing on process optimization and digital tool integration.",
+    content: [
+      text(
+        "Find the lessons learned and best practices from the 'Digital Transformation Phase 1' project, specifically focusing on process optimization and digital tool integration.",
+      ),
+    ],
     createdAt: now,
     status: 'completed',
   },
   {
     id: '4',
     role: 'assistant',
-    content: markdownContent,
+    content: [text(markdownContent)],
+    createdAt: now,
+    status: 'completed',
+  },
+];
+
+const chainOfThoughtMessages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [
+      text(
+        'Look up the recent revenue numbers for Q3 and tell me how they compare to last year.',
+      ),
+    ],
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
     createdAt: now,
     status: 'completed',
+    content: [
+      { type: 'reasoning', id: 'r-1', status: 'completed' },
+      { type: 'tool', id: 't-1', name: 'finance_lookup' },
+      { type: 'tool', id: 't-2', name: 'compare_periods' },
+      text(
+        '## Revenue summary\n\n- **Q3 2025:** **$48.2M** (+12% YoY)\n- **Q3 2024:** $43.0M\n\nThe biggest contributor was the EMEA segment, which grew **18%** year over year. North America was roughly flat.',
+      ),
+    ],
   },
 ];
 
@@ -109,8 +164,20 @@ import { CkConversation } from '@aleph-alpha/chat-kit';
 import type { BaseMessage } from '@aleph-alpha/chat-kit';
 
 const messages: BaseMessage[] = [
-  { id: '1', role: 'user', content: 'Hello!', createdAt: new Date(), status: 'completed' },
-  { id: '2', role: 'assistant', content: 'Hi there!', createdAt: new Date(), status: 'completed' },
+  {
+    id: '1',
+    role: 'user',
+    content: [{ type: 'text', id: 't1', text: 'Hello!', status: 'completed' }],
+    createdAt: new Date(),
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: [{ type: 'text', id: 't2', text: 'Hi there!', status: 'completed' }],
+    createdAt: new Date(),
+    status: 'completed',
+  },
 ];
 </script>
 
@@ -118,6 +185,56 @@ const messages: BaseMessage[] = [
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />
 </template>`;
 
+const chainOfThoughtTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [{ type: 'text', id: 't1', text: 'Compare Q3 revenue.', status: 'completed' }],
+    createdAt: new Date(),
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    createdAt: new Date(),
+    status: 'completed',
+    content: [
+      { type: 'reasoning', id: 'r1', status: 'completed' },
+      { type: 'tool', id: 'tl1', name: 'finance_lookup' },
+      { type: 'tool', id: 'tl2', name: 'compare_periods' },
+      { type: 'text', id: 't2', text: 'Q3 grew **12% YoY**.', status: 'completed' },
+    ],
+  },
+];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+    <!--
+      Use #agent-message-content to take over rendering of the entire body.
+      The slot exposes the full message so you can iterate every content
+      part (text, tool, reasoning) and render them however you like.
+    -->
+    <template #agent-message-content="{ message }">
+      <div class="flex flex-col gap-2">
+        <template v-for="part in message.content" :key="part.id">
+          <span v-if="part.type === 'reasoning'" class="text-xs italic opacity-60">
+            Reasoning: {{ part.status }}
+          </span>
+          <span v-else-if="part.type === 'tool'" class="text-xs font-mono opacity-70">
+            ⚙️ {{ part.name }}
+          </span>
+          <p v-else-if="part.type === 'text'">{{ part.text }}</p>
+        </template>
+      </div>
+    </template>
+  </CkConversation>
+</template>`;
+
 const withIconTemplateSource = `<script setup lang="ts">
 import { CkConversation } from '@aleph-alpha/chat-kit';
 import type { BaseMessage } from '@aleph-alpha/chat-kit';
@@ -182,7 +299,13 @@ import type { BaseMessage, CkFeedbackValue } from '@aleph-alpha/chat-kit';
 
 const messages: BaseMessage[] = [/* ... */];
 
-// In a real app, key feedback by message id and persist to your backend.
+function getMessageText(message: BaseMessage): string {
+  return message.content
+    .filter((c) => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
+
 const feedback = ref<Record<string, { value: CkFeedbackValue; locked: boolean }>>({});
 function onFeedback(messageId: string, value: CkFeedbackValue) {
   feedback.value[messageId] = { value, locked: value !== null };
@@ -192,7 +315,7 @@ function onFeedback(messageId: string, value: CkFeedbackValue) {
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
     <template #agent-message-footer="{ message }">
-      <CkCopyMessageActionButton :text="message.content" />
+      <CkCopyMessageActionButton :text="getMessageText(message)" />
       <CkFeedbackButton
         :value="feedback[message.id]?.value ?? null"
         :locked="feedback[message.id]?.locked ?? false"
@@ -207,12 +330,19 @@ import { CkConversation } from '@aleph-alpha/chat-kit';
 import type { BaseMessage } from '@aleph-alpha/chat-kit';
 
 const messages: BaseMessage[] = [/* ... */];
+
+function getMessageText(message: BaseMessage): string {
+  return message.content
+    .filter((c) => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
 </script>
 
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
     <template #user-message-content="{ message }">
-      <strong>{{ message.content }}</strong>
+      <strong>{{ getMessageText(message) }}</strong>
     </template>
   </CkConversation>
 </template>`;
@@ -222,12 +352,19 @@ import { CkConversation } from '@aleph-alpha/chat-kit';
 import type { BaseMessage } from '@aleph-alpha/chat-kit';
 
 const messages: BaseMessage[] = [/* ... */];
+
+function getMessageText(message: BaseMessage): string {
+  return message.content
+    .filter((c) => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
 </script>
 
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
     <template #agent-message-content="{ message }">
-      <div class="whitespace-pre-wrap font-mono text-sm">{{ message.content }}</div>
+      <div class="whitespace-pre-wrap font-mono text-sm">{{ getMessageText(message) }}</div>
     </template>
   </CkConversation>
 </template>`;
@@ -242,19 +379,37 @@ const messages = ref<BaseMessage[]>([]);
 function sendAndStream(): void {
   messages.value = [
     ...messages.value,
-    { id: '1', role: 'user', content: 'Tell me something.', createdAt: new Date(), status: 'completed' },
+    {
+      id: '1',
+      role: 'user',
+      content: [{ type: 'text', id: 'u-t', text: 'Tell me something.', status: 'completed' }],
+      createdAt: new Date(),
+      status: 'completed',
+    },
   ];
+  const replyId = 'a-t';
   messages.value = [
     ...messages.value,
-    { id: '2', role: 'assistant', content: '', createdAt: new Date(), status: 'sending' },
+    {
+      id: '2',
+      role: 'assistant',
+      content: [{ type: 'text', id: replyId, text: '', status: 'in_progress' }],
+      createdAt: new Date(),
+      status: 'sending',
+    },
   ];
   const reply = 'Key lessons learned from the project...';
   let i = 0;
   const interval = setInterval(() => {
     i = Math.min(i + 3, reply.length);
     const last = messages.value.length - 1;
-    messages.value[last] = { ...messages.value[last], content: reply.slice(0, i) };
-    if (i >= reply.length) clearInterval(interval);
+    const completed = i >= reply.length;
+    messages.value[last] = {
+      ...messages.value[last],
+      content: [{ type: 'text', id: replyId, text: reply.slice(0, i), status: completed ? 'completed' : 'in_progress' }],
+      status: completed ? 'completed' : 'sending',
+    };
+    if (completed) clearInterval(interval);
   }, 30);
 }
 </script>
@@ -312,9 +467,10 @@ import { CkConversation } from '@aleph-alpha/chat-kit';
 </template>`;
 
 /**
- * Drop-in conversation UI. Pass `messages` with `role`, `content`, and `status`
- * fields and CkConversation renders user bubbles, assistant markdown, avatars,
- * and a copy button on each reply.
+ * Drop-in conversation UI. Pass `messages` with `role`, `content` (a list of
+ * text / tool / reasoning parts), and `status` fields and CkConversation
+ * renders user bubbles, assistant markdown, avatars, and a copy button on
+ * each reply.
  */
 export const Default: Story = {
   render: () => ({
@@ -328,6 +484,39 @@ export const Default: Story = {
   parameters: { docs: { source: { code: defaultTemplateSource } } },
 };
 
+/**
+ * Demonstrates a chain-of-thought assistant turn with reasoning and tool
+ * calls in `message.content`. By default only text parts are rendered, so
+ * use `#agent-message-content` to opt-in to a custom rendering of the
+ * non-text parts. The host owns the visual treatment for those segments.
+ */
+export const ChainOfThought: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: chainOfThoughtMessages };
+    },
+    template: `
+      <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+        <template #agent-message-content="{ message }">
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <template v-for="part in message.content" :key="part.id">
+              <span v-if="part.type === 'reasoning'" style="font-size: 12px; font-style: italic; opacity: 0.6;">
+                Reasoning: {{ part.status }}
+              </span>
+              <span v-else-if="part.type === 'tool'" style="font-size: 12px; font-family: monospace; opacity: 0.7;">
+                ⚙️ {{ part.name }}
+              </span>
+              <p v-else-if="part.type === 'text'" style="margin: 0;">{{ part.text }}</p>
+            </template>
+          </div>
+        </template>
+      </CkConversation>
+    `,
+  }),
+  parameters: { docs: { source: { code: chainOfThoughtTemplateSource } } },
+};
+
 /**
  * Uses a remote avatar image (with fallback text). Use when you want a
  * branded agent identity in each reply.
@@ -419,12 +608,17 @@ export const WithFooterActions: Story = {
       function onFeedback(messageId: string, value: CkFeedbackValue) {
         feedback.value[messageId] = { value, locked: value !== null };
       }
-      return { messages: sampleMessages, feedback, onFeedback };
+      return {
+        messages: sampleMessages,
+        feedback,
+        onFeedback,
+        getMessageText,
+      };
     },
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
         <template #agent-message-footer="{ message }">
-          <CkCopyMessageActionButton :text="message.content" />
+          <CkCopyMessageActionButton :text="getMessageText(message)" />
           <CkFeedbackButton
             :value="feedback[message.id]?.value ?? null"
             :locked="feedback[message.id]?.locked ?? false"
@@ -445,12 +639,12 @@ export const WithCustomUserContent: Story = {
   render: () => ({
     components: { CkConversation },
     setup() {
-      return { messages: sampleMessages };
+      return { messages: sampleMessages, getMessageText };
     },
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
         <template #user-message-content="{ message }">
-          <strong>{{ message.content }}</strong>
+          <strong>{{ getMessageText(message) }}</strong>
         </template>
       </CkConversation>
     `,
@@ -469,12 +663,12 @@ export const WithCustomAgentContent: Story = {
   render: () => ({
     components: { CkConversation },
     setup() {
-      return { messages: sampleMessages };
+      return { messages: sampleMessages, getMessageText };
     },
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
         <template #agent-message-content="{ message }">
-          <div style="white-space: pre-wrap; font-family: monospace; font-size: 13px;">{{ message.content }}</div>
+          <div style="white-space: pre-wrap; font-family: monospace; font-size: 13px;">{{ getMessageText(message) }}</div>
         </template>
       </CkConversation>
     `,
@@ -497,14 +691,14 @@ export const StreamingSimulation: Story = {
         {
           id: '1',
           role: 'user',
-          content: 'Hello!',
+          content: [text('Hello!')],
           createdAt: now,
           status: 'completed',
         },
         {
           id: '2',
           role: 'assistant',
-          content: 'Hi there!',
+          content: [text('Hi there!')],
           createdAt: now,
           status: 'completed',
         },
@@ -513,6 +707,7 @@ export const StreamingSimulation: Story = {
       let streamInterval: ReturnType<typeof setInterval> | null = null;
       let charIndex = 0;
       let nextId = 3;
+      let streamingTextId = '';
 
       function streamNextChunk(): void {
         if (charIndex >= markdownContent.length) {
@@ -523,20 +718,38 @@ export const StreamingSimulation: Story = {
         const chunkSize = Math.floor(Math.random() * 5) + 3;
         charIndex = Math.min(charIndex + chunkSize, markdownContent.length);
         const lastIdx = messages.value.length - 1;
+        const completed = charIndex >= markdownContent.length;
+        const content: MessageContent[] = [
+          {
+            type: 'text',
+            id: streamingTextId,
+            text: markdownContent.slice(0, charIndex),
+            status: completed ? 'completed' : 'in_progress',
+          },
+        ];
         messages.value[lastIdx] = {
           ...messages.value[lastIdx],
-          content: markdownContent.slice(0, charIndex),
+          content,
+          status: completed ? 'completed' : 'sending',
         };
       }
 
       function startStreaming(): void {
         const id = String(nextId++);
+        streamingTextId = `txt-stream-${id}`;
         messages.value = [
           ...messages.value,
           {
             id,
             role: 'assistant',
-            content: '',
+            content: [
+              {
+                type: 'text',
+                id: streamingTextId,
+                text: '',
+                status: 'in_progress',
+              },
+            ],
             createdAt: new Date(),
             status: 'sending',
           },
@@ -552,8 +765,11 @@ export const StreamingSimulation: Story = {
           {
             id,
             role: 'user',
-            content:
-              'Tell me about Digital Transformation Phase 1 lessons learned.',
+            content: [
+              text(
+                'Tell me about Digital Transformation Phase 1 lessons learned.',
+              ),
+            ],
             createdAt: new Date(),
             status: 'completed',
           },
@@ -616,7 +832,7 @@ export const WithCustomCodeBlock: Story = {
         {
           id: '1',
           role: 'user',
-          content: 'Show me a code example',
+          content: [text('Show me a code example')],
           createdAt: now,
           status: 'completed',
         },
@@ -624,20 +840,24 @@ export const WithCustomCodeBlock: Story = {
           id: '2',
           role: 'assistant',
           content: [
-            'Here is an example:',
-            '',
-            '```typescript',
-            'const greeting = "Hello, world!";',
-            'console.log(greeting);',
-            '```',
-            '',
-            'And another one:',
-            '',
-            '```python',
-            'def greet(name: str) -> str:',
-            '    return f"Hello, {name}!"',
-            '```',
-          ].join('\n'),
+            text(
+              [
+                'Here is an example:',
+                '',
+                '```typescript',
+                'const greeting = "Hello, world!";',
+                'console.log(greeting);',
+                '```',
+                '',
+                'And another one:',
+                '',
+                '```python',
+                'def greet(name: str) -> str:',
+                '    return f"Hello, {name}!"',
+                '```',
+              ].join('\n'),
+            ),
+          ],
           createdAt: now,
           status: 'completed',
         },

package/src/components/composed/CkConversation/CkConversation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
-import type { BaseMessage } from '../../../types';
+import type { BaseMessage, MessageTextContent } from '../../../types';
 import CkAgentMessage from '../../base/CkAgentMessage/CkAgentMessage.vue';
 import CkConversationLayout from '../../base/CkConversationLayout/CkConversationLayout.vue';
 import CkCopyMessageActionButton from '../../base/CkCopyMessageActionButton/CkCopyMessageActionButton.vue';
@@ -36,7 +36,11 @@ const slots = defineSlots<{
   'agent-message-loading-icon': (props: { message: BaseMessage }) => void;
   /** Replace the agent message header */
   'agent-message-header': (props: { message: BaseMessage }) => void;
-  /** Replace the agent message body */
+  /**
+   * Replace the agent message body. Receives the full `BaseMessage` so the
+   * consumer can inspect every content part (text, tool calls, reasoning)
+   * and render them however they want.
+   */
   'agent-message-content': (props: { message: BaseMessage }) => void;
   /** Provide footer actions for the agent message */
   'agent-message-footer': (props: { message: BaseMessage }) => void;
@@ -59,6 +63,14 @@ const hasIcon = computed(
 
 const isLoading = (message: BaseMessage) =>
   message.status === 'started' || message.status === 'sending';
+
+/** Concatenated text from every text content part in a message. */
+function getMessageText(message: BaseMessage): string {
+  return message.content
+    .filter((c): c is MessageTextContent => c.type === 'text')
+    .map((c) => c.text)
+    .join('');
+}
 </script>
 
 <template>
@@ -66,9 +78,9 @@ const isLoading = (message: BaseMessage) =>
     <template #user-message="{ message }">
       <div :class="{ 'ml-8': hasIcon }">
         <slot name="user-message" :message="message">
-          <CkUserMessage :message="message.content">
+          <CkUserMessage>
             <slot name="user-message-content" :message="message">
-              {{ message.content }}
+              {{ getMessageText(message) }}
             </slot>
           </CkUserMessage>
         </slot>
@@ -117,7 +129,7 @@ const isLoading = (message: BaseMessage) =>
 
           <slot name="agent-message-content" :message="message">
             <CkMarkdownRenderer
-              :content="message.content"
+              :content="getMessageText(message)"
               :classes="agentMarkdownClasses"
             >
               <template
@@ -132,8 +144,8 @@ const isLoading = (message: BaseMessage) =>
           <template #footer>
             <slot name="agent-message-footer" :message="message">
               <CkCopyMessageActionButton
-                v-if="message.content && !isLoading(message)"
-                :text="message.content"
+                v-if="getMessageText(message) && !isLoading(message)"
+                :text="getMessageText(message)"
                 :aria-label-copy="labels.copyMessageAction"
                 :aria-label-copied="labels.copyMessageActionCopied"
               />