@aleph-alpha/chat-kit 3.3.0 → 5.0.0

package/src/components/base/CkRegenerateMessageButton/types.ts

@@ -0,0 +1,27 @@
+/**
+ * Regenerate action button for chat messages. Lets the user request a new
+ * response for an assistant message. Renders an icon-only button with an
+ * accessible label and tooltip.
+ *
+ * @category Actions
+ * @useCases regenerate assistant reply, retry message, request new response, chat message action
+ * @keywords regenerate, retry, repeat, action, message, button, icon
+ * @related CkMessageButton, CkCopyMessageButton, CkAgentMessage, CkConversation
+ */
+export interface CkRegenerateMessageButtonProps {
+  /**
+   * Whether the button is disabled and ignores clicks.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Accessible label and tooltip content for the button.
+   * @default 'Regenerate response'
+   */
+  ariaLabel?: string;
+}
+
+export interface CkRegenerateMessageButtonEmits {
+  /** Emitted when the button is pressed and not disabled. */
+  (e: 'regenerate'): void;
+}

package/src/components/base/index.ts

@@ -1,5 +1,12 @@
 export { CkSendIcon, CkStopIcon } from './icons';
 export { CkAgentMessage } from './CkAgentMessage';
+export { CkAgentMessageHeader } from './CkAgentMessageHeader';
+export type { CkAgentMessageHeaderProps } from './CkAgentMessageHeader';
+export { CkHeaderActivityButton } from './CkHeaderActivityButton';
+export type {
+  CkHeaderActivityButtonProps,
+  CkHeaderActivityButtonEmits,
+} from './CkHeaderActivityButton';
 export { CkCitation } from './CkCitation';
 export type {
   CkCitationProps,
@@ -13,7 +20,7 @@ export type {
 } from './CkCitationCard';
 export { CkConversationLayout } from './CkConversationLayout';
 export type { CkConversationLayoutProps } from './CkConversationLayout';
-export { CkCopyMessageActionButton } from './CkCopyMessageActionButton';
+export { CkCopyMessageButton } from './CkCopyMessageButton';
 export { CkDropZoneOverlay } from './CkDropZoneOverlay';
 export type {
   CkDropZoneOverlayProps,
@@ -50,7 +57,7 @@ export type {
   CkMarkdownRendererEmits,
   CkMarkdownElementClasses,
 } from './CkMarkdownRenderer';
-export { CkMessageActionButton } from './CkMessageActionButton';
+export { CkMessageButton } from './CkMessageButton';
 export { CkModelSelector } from './CkModelSelector';
 export type {
   CkModelOption,
@@ -63,5 +70,6 @@ export type { CkPromptMenuButtonProps } from './CkPromptMenuButton';
 export { CkPromptStopButton } from './CkPromptStopButton';
 export { CkPromptInput } from './CkPromptInput';
 export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';
+export { CkRegenerateMessageButton } from './CkRegenerateMessageButton';
 export { CkUserMessage } from './CkUserMessage';
 export type { CkUserMessageProps } from './CkUserMessage';

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

@@ -137,7 +137,7 @@ describe('CkConversation', () => {
       });
 
       expect(
-        screen.queryByTestId('ck-agent-message-icon'),
+        screen.queryByTestId('ck-agent-message-header-icon'),
       ).not.toBeInTheDocument();
     });
 
@@ -146,7 +146,9 @@ describe('CkConversation', () => {
         props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
       });
 
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
 
     it('shows the icon area when agentAvatarImage URL is provided', () => {
@@ -157,7 +159,9 @@ describe('CkConversation', () => {
         },
       });
 
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
 
     it('shows the icon area when agent-message-icon slot is provided', () => {
@@ -169,7 +173,9 @@ describe('CkConversation', () => {
       });
 
       expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
   });
 
@@ -360,15 +366,44 @@ describe('CkConversation', () => {
       expect(screen.getByAltText('custom-bot')).toBeInTheDocument();
     });
 
-    it('allows adding a header via agent-message-header slot', () => {
+    it('allows replacing the entire header via agent-message-header slot', () => {
+      render(CkConversation, {
+        // An avatar fallback would normally render the default header icon...
+        props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
+        slots: {
+          'agent-message-header':
+            '<div data-testid="custom-header">Custom Header</div>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-header')).toBeInTheDocument();
+      // ...but the whole default header (and its icon) is replaced.
+      expect(
+        screen.queryByTestId('ck-agent-message-header-icon'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('allows setting the header text via agent-message-header-content slot', () => {
       render(CkConversation, {
         props: { messages: [agentMessage()] },
-        slots: { 'agent-message-header': 'Custom Header' },
+        slots: { 'agent-message-header-content': 'Custom Header' },
       });
 
       expect(screen.getByText('Custom Header')).toBeInTheDocument();
     });
 
+    it('allows adding a header activity control via agent-message-header-activity slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: {
+          'agent-message-header-activity':
+            '<button data-testid="activity">1 tool</button>',
+        },
+      });
+
+      expect(screen.getByTestId('activity')).toBeInTheDocument();
+    });
+
     it('allows adding footer actions via agent-message-footer slot', () => {
       render(CkConversation, {
         props: { messages: [agentMessage()] },
@@ -429,6 +464,46 @@ describe('CkConversation', () => {
     });
   });
 
+  describe('bottom separator', () => {
+    function agentRowBorders(container: Element): boolean[] {
+      const rows = container.querySelectorAll<HTMLElement>(
+        '[data-message-row="assistant"]',
+      );
+      return Array.from(rows).map((row) => {
+        const message = row.querySelector<HTMLElement>('[class*="pb-6"]');
+        return Boolean(message?.className.includes('border-b'));
+      });
+    }
+
+    it('keeps the separator on every assistant message except the last', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [
+            { ...agentMessage(), id: 'a1' },
+            {
+              id: 'u1',
+              role: 'user',
+              content: [text('Hi')],
+              createdAt: now,
+              status: 'completed',
+            },
+            { ...agentMessage(), id: 'a2' },
+          ],
+        },
+      });
+
+      expect(agentRowBorders(container)).toEqual([true, false]);
+    });
+
+    it('hides the separator on the only assistant message', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [{ ...agentMessage(), id: 'solo' }] },
+      });
+
+      expect(agentRowBorders(container)).toEqual([false]);
+    });
+  });
+
   describe('empty conversation', () => {
     it('renders nothing when messages array is empty', () => {
       const { container } = render(CkConversation, { props: { messages: [] } });

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

@@ -1,4 +1,4 @@
-import { CkCopyMessageActionButton } from '../../base/CkCopyMessageActionButton';
+import { CkCopyMessageButton } from '../../base/CkCopyMessageButton';
 import { CkFeedbackButton } from '../../base/CkFeedbackButton';
 import type { CkFeedbackValue } from '../../base/CkFeedbackButton';
 import type {
@@ -292,7 +292,7 @@ const withFooterActionsTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import {
   CkConversation,
-  CkCopyMessageActionButton,
+  CkCopyMessageButton,
   CkFeedbackButton,
 } from '@aleph-alpha/chat-kit';
 import type { BaseMessage, CkFeedbackValue } from '@aleph-alpha/chat-kit';
@@ -315,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="getMessageText(message)" />
+      <CkCopyMessageButton :text="getMessageText(message)" />
       <CkFeedbackButton
         :value="feedback[message.id]?.value ?? null"
         :locked="feedback[message.id]?.locked ?? false"
@@ -590,7 +590,7 @@ export const WithCustomIcon: Story = {
 
 /**
  * Overrides `#agent-message-footer` to add real action buttons next to each
- * assistant reply: `CkCopyMessageActionButton` for clipboard copy and
+ * assistant reply: `CkCopyMessageButton` for clipboard copy and
  * `CkFeedbackButton` for binary thumbs up / thumbs down feedback. The
  * feedback state is owned by the host and locked once submitted.
  */
@@ -598,7 +598,7 @@ export const WithFooterActions: Story = {
   render: () => ({
     components: {
       CkConversation,
-      CkCopyMessageActionButton,
+      CkCopyMessageButton,
       CkFeedbackButton,
     },
     setup() {
@@ -618,7 +618,7 @@ export const WithFooterActions: Story = {
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
         <template #agent-message-footer="{ message }">
-          <CkCopyMessageActionButton :text="getMessageText(message)" />
+          <CkCopyMessageButton :text="getMessageText(message)" />
           <CkFeedbackButton
             :value="feedback[message.id]?.value ?? null"
             :locked="feedback[message.id]?.locked ?? false"

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

@@ -2,8 +2,9 @@
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { BaseMessage, MessageTextContent } from '../../../types';
 import CkAgentMessage from '../../base/CkAgentMessage/CkAgentMessage.vue';
+import CkAgentMessageHeader from '../../base/CkAgentMessageHeader/CkAgentMessageHeader.vue';
 import CkConversationLayout from '../../base/CkConversationLayout/CkConversationLayout.vue';
-import CkCopyMessageActionButton from '../../base/CkCopyMessageActionButton/CkCopyMessageActionButton.vue';
+import CkCopyMessageButton from '../../base/CkCopyMessageButton/CkCopyMessageButton.vue';
 import CkMarkdownRenderer from '../../base/CkMarkdownRenderer/CkMarkdownRenderer.vue';
 import CkUserMessage from '../../base/CkUserMessage/CkUserMessage.vue';
 import type { CkConversationProps } from './types';
@@ -34,8 +35,16 @@ const slots = defineSlots<{
   'agent-message-icon': (props: { message: BaseMessage }) => void;
   /** Replace the agent loading icon shown while a message is being generated */
   'agent-message-loading-icon': (props: { message: BaseMessage }) => void;
-  /** Replace the agent message header */
+  /** Replace the entire agent message header (the whole `CkAgentMessageHeader`) */
   'agent-message-header': (props: { message: BaseMessage }) => void;
+  /** Replace the agent message header text (rendered inside the header row) */
+  'agent-message-header-content': (props: { message: BaseMessage }) => void;
+  /**
+   * Provide an activity control for the agent message header (rendered on the
+   * right of the header, typically a `CkHeaderActivityButton`). When provided,
+   * the header gains vertical padding and a bottom border.
+   */
+  'agent-message-header-activity': (props: { message: BaseMessage }) => void;
   /**
    * Replace the agent message body. Receives the full `BaseMessage` so the
    * consumer can inspect every content part (text, tool calls, reasoning)
@@ -64,6 +73,18 @@ const hasIcon = computed(
 const isLoading = (message: BaseMessage) =>
   message.status === 'started' || message.status === 'sending';
 
+/**
+ * Id of the last assistant message. Its bottom separator is hidden so the
+ * border divides user/assistant pairs without a trailing line after the final
+ * pair.
+ */
+const lastAgentMessageId = computed(() => {
+  for (let i = props.messages.length - 1; i >= 0; i--) {
+    if (props.messages[i].role !== 'user') return props.messages[i].id;
+  }
+  return undefined;
+});
+
 /** Concatenated text from every text content part in a message. */
 function getMessageText(message: BaseMessage): string {
   return message.content
@@ -89,42 +110,64 @@ function getMessageText(message: BaseMessage): string {
 
     <template #agent-message="{ message }">
       <slot name="agent-message" :message="message">
-        <CkAgentMessage>
-          <template v-if="hasIcon" #icon>
-            <template v-if="isLoading(message)">
-              <slot name="agent-message-loading-icon" :message="message">
-                <UiAvatar v-if="agentLoadingImage" class="size-6">
-                  <UiAvatarImage
-                    :src="agentLoadingImage"
-                    :alt="labels.agentLoadingAvatarAlt"
-                  />
-                </UiAvatar>
-                <UiSpinner
-                  v-else
-                  class="size-6"
-                  :aria-label="labels.agentLoadingAvatarAlt"
-                />
-              </slot>
-            </template>
+        <CkAgentMessage :bottom-separator="message.id !== lastAgentMessageId">
+          <template
+            v-if="
+              hasIcon ||
+              $slots['agent-message-header'] ||
+              $slots['agent-message-header-content'] ||
+              $slots['agent-message-header-activity']
+            "
+            #header
+          >
+            <slot name="agent-message-header" :message="message">
+              <CkAgentMessageHeader>
+                <template v-if="hasIcon" #icon>
+                  <template v-if="isLoading(message)">
+                    <slot name="agent-message-loading-icon" :message="message">
+                      <UiAvatar v-if="agentLoadingImage" class="size-8">
+                        <UiAvatarImage
+                          :src="agentLoadingImage"
+                          :alt="labels.agentLoadingAvatarAlt"
+                        />
+                      </UiAvatar>
+                      <UiSpinner
+                        v-else
+                        class="size-8"
+                        :aria-label="labels.agentLoadingAvatarAlt"
+                      />
+                    </slot>
+                  </template>
 
-            <template v-else>
-              <slot name="agent-message-icon" :message="message">
-                <UiAvatar class="size-6">
-                  <UiAvatarImage
-                    v-if="agentAvatarImage"
-                    :src="agentAvatarImage"
-                    :alt="labels.agentAvatarAlt"
-                  />
-                  <UiAvatarFallback v-if="agentAvatarFallback">{{
-                    agentAvatarFallback
-                  }}</UiAvatarFallback>
-                </UiAvatar>
-              </slot>
-            </template>
-          </template>
+                  <template v-else>
+                    <slot name="agent-message-icon" :message="message">
+                      <UiAvatar class="size-8">
+                        <UiAvatarImage
+                          v-if="agentAvatarImage"
+                          :src="agentAvatarImage"
+                          :alt="labels.agentAvatarAlt"
+                        />
+                        <UiAvatarFallback v-if="agentAvatarFallback">{{
+                          agentAvatarFallback
+                        }}</UiAvatarFallback>
+                      </UiAvatar>
+                    </slot>
+                  </template>
+                </template>
+
+                <slot name="agent-message-header-content" :message="message" />
 
-          <template v-if="$slots['agent-message-header']" #header>
-            <slot name="agent-message-header" :message="message" />
+                <template
+                  v-if="$slots['agent-message-header-activity']"
+                  #activity
+                >
+                  <slot
+                    name="agent-message-header-activity"
+                    :message="message"
+                  />
+                </template>
+              </CkAgentMessageHeader>
+            </slot>
           </template>
 
           <slot name="agent-message-content" :message="message">
@@ -143,7 +186,7 @@ function getMessageText(message: BaseMessage): string {
 
           <template #footer>
             <slot name="agent-message-footer" :message="message">
-              <CkCopyMessageActionButton
+              <CkCopyMessageButton
                 v-if="getMessageText(message) && !isLoading(message)"
                 :text="getMessageText(message)"
                 :aria-label-copy="labels.copyMessageAction"

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

@@ -10,7 +10,7 @@ import type { CkMarkdownElementClasses } from '../../base/CkMarkdownRenderer';
  * @category Messages
  * @useCases complete chat conversation ui, streaming chat with markdown, assistant chat view, llm conversation component, drop-in chat surface
  * @keywords conversation, chat, messages, assistant, agent, user, markdown, streaming, avatar
- * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageActionButton, CkInput
+ * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageButton, CkPromptInput
  */
 export interface CkConversationProps {
   /** List of messages to display, in chronological order. */

package/src/components/composed/index.ts

@@ -2,4 +2,3 @@ export { CkConversation } from './CkConversation';
 export type { CkConversationProps } from './CkConversation';
 export { CkHistory } from './CkHistory';
 export type { CkHistoryEmits, CkHistoryProps } from './CkHistory';
-export { CkInput } from './CkInput';

package/src/components/index.ts

@@ -1,10 +1,12 @@
 // Base (presentational) components
 export {
   CkAgentMessage,
+  CkAgentMessageHeader,
+  CkHeaderActivityButton,
   CkCitation,
   CkCitationCard,
   CkConversationLayout,
-  CkCopyMessageActionButton,
+  CkCopyMessageButton,
   CkDropZoneOverlay,
   CkFeedbackButton,
   CkFeedbackDialog,
@@ -12,18 +14,22 @@ export {
   CkHistoryItem,
   CkHistoryWrapper,
   CkMarkdownRenderer,
-  CkMessageActionButton,
+  CkMessageButton,
   CkModelSelector,
   CkPromptSendButton,
   CkPromptMenuButton,
   CkPromptStopButton,
   CkPromptInput,
   CkPromptInputDisclaimer,
+  CkRegenerateMessageButton,
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
 } from './base';
 export type {
+  CkAgentMessageHeaderProps,
+  CkHeaderActivityButtonProps,
+  CkHeaderActivityButtonEmits,
   CkCitationProps,
   CkCitationEmits,
   CkCitationSource,
@@ -58,7 +64,7 @@ export type {
 } from './base';
 
 // Composed (pattern) components
-export { CkConversation, CkHistory, CkInput } from './composed';
+export { CkConversation, CkHistory } from './composed';
 export type {
   CkConversationProps,
   CkHistoryEmits,

package/src/handlers/useChatKitLabels.spec.ts

@@ -102,6 +102,7 @@ describe('useChatKitLabels', () => {
       inputPlaceholder: 'Custom placeholder',
       copyMessageAction: 'Custom copy',
       copyMessageActionCopied: 'Custom copied',
+      regenerateMessageAction: 'Custom regenerate',
       feedbackThumbsUp: 'Custom up',
       feedbackThumbsDown: 'Custom down',
       feedbackGroup: 'Custom group',

package/src/handlers/useChatKitLabels.ts

@@ -29,6 +29,8 @@ export type ChatKitLabels = {
   copyMessageAction: string;
   /** Accessible label / tooltip for the copy-message action button after a successful copy */
   copyMessageActionCopied: string;
+  /** Accessible label / tooltip for the regenerate-message action button */
+  regenerateMessageAction: string;
   /**
    * Accessible label / tooltip for the thumbs-up button in `CkFeedbackButton`.
    * Optional for backward compatibility; falls back to
@@ -114,6 +116,7 @@ export const defaultChatKitLabels: ChatKitLabels = {
   inputPlaceholder: 'Type a message...',
   copyMessageAction: 'Copy response',
   copyMessageActionCopied: 'Copied!',
+  regenerateMessageAction: 'Regenerate response',
   feedbackThumbsUp: 'Good response',
   feedbackThumbsDown: 'Bad response',
   feedbackGroup: 'Rate this response',

package/src/handlers/useMessageHandler.spec.ts

@@ -146,6 +146,36 @@ describe('useMessageHandler', () => {
       expect('metadata' in msg).toBe(false);
       expect('metadata' in handler.messages.value[0]).toBe(false);
     });
+
+    it('branches off an explicit parentId, updating the parent and activating the new branch', () => {
+      const handler = useMessageHandler();
+
+      handler.setCurrentUserMessage('First');
+      const first = handler.commitUserMessage();
+      handler.setCurrentUserMessage('Second');
+      const second = handler.commitUserMessage();
+
+      // Branch a sibling of `second` off their shared parent `first`.
+      handler.setCurrentUserMessage('Sibling');
+      const sibling = handler.commitUserMessage({ parentId: first.id });
+
+      const parent = handler.getTree().nodes[first.id];
+      expect(parent.childrenIds).toEqual([second.id, sibling.id]);
+      // The freshly created branch becomes the active path.
+      expect(parent.activeChildIndex).toBe(1);
+      expect(handler.messages.value.map((m) => m.id)).toEqual([
+        first.id,
+        sibling.id,
+      ]);
+    });
+
+    it('throws when branching off an unknown parentId', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      expect(() =>
+        handler.commitUserMessage({ parentId: 'does-not-exist' }),
+      ).toThrow('Unknown parent message id: does-not-exist');
+    });
   });
 
   describe('updateMessage', () => {
@@ -342,6 +372,55 @@ describe('useMessageHandler', () => {
       expect(handler.messages.value).toHaveLength(2);
       expect(getText(handler.messages.value[1].content)).toBe('Streaming...');
     });
+
+    it('branches a new node off an explicit parentId on create', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: [text('Hello')] }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: [text('Hi')],
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      // Regenerate: add a sibling assistant answer under the same user turn.
+      handler.updateMessage({
+        id: 'a2',
+        content: [text('Hi again')],
+        role: 'assistant',
+        status: 'completed',
+        parentId: 'u1',
+      });
+
+      const parent = handler.getTree().nodes.u1;
+      expect(parent.childrenIds).toEqual(['a1', 'a2']);
+      expect(parent.activeChildIndex).toBe(1);
+      expect(handler.messages.value.map((m) => m.id)).toEqual(['u1', 'a2']);
+    });
+
+    it('ignores parentId when the node already exists', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      handler.updateMessage({
+        id: msg.id,
+        content: [text('Updated')],
+        role: 'user',
+        status: 'completed',
+        parentId: 'does-not-exist',
+      });
+
+      expect(getText(handler.getMessageById(msg.id)!.content)).toBe('Updated');
+      expect(handler.getTree().nodes[msg.id].parentId).toBeNull();
+    });
   });
 
   describe('getMessageById', () => {