@aleph-alpha/chat-kit 3.3.0 → 4.0.0

package/dist/{useMessageHandler-CMdy-lm0.js → useMessageHandler-N50Yj-NU.js}

@@ -71,10 +71,8 @@ function updateNodeId(tree, oldId, newId) {
   }
   if (tree.rootId === oldId) tree.rootId = newId;
 }
-function cutBranchAfter(tree, id) {
-  const node = tree.nodes[id];
-  if (!node) return;
-  const stack = [...node.childrenIds];
+function deleteSubtrees(tree, ids) {
+  const stack = [...ids];
   while (stack.length > 0) {
     const currentId = stack.pop();
     const current = tree.nodes[currentId];
@@ -82,9 +80,33 @@ function cutBranchAfter(tree, id) {
     stack.push(...current.childrenIds);
     delete tree.nodes[currentId];
   }
+}
+function cutBranchAfter(tree, id) {
+  const node = tree.nodes[id];
+  if (!node) return;
+  deleteSubtrees(tree, node.childrenIds);
   node.childrenIds = [];
   node.activeChildIndex = 0;
 }
+function cutBranchAt(tree, id) {
+  const node = tree.nodes[id];
+  if (!node) return;
+  deleteSubtrees(tree, [id]);
+  if (node.parentId === null) {
+    if (tree.rootId === id) tree.rootId = null;
+    return;
+  }
+  const parent = tree.nodes[node.parentId];
+  if (!parent) return;
+  const idx = parent.childrenIds.indexOf(id);
+  if (idx !== -1) {
+    parent.childrenIds.splice(idx, 1);
+    if (idx < parent.activeChildIndex) parent.activeChildIndex -= 1;
+  }
+  if (parent.activeChildIndex >= parent.childrenIds.length) {
+    parent.activeChildIndex = Math.max(0, parent.childrenIds.length - 1);
+  }
+}
 function navigate(tree, targetId) {
   const node = tree.nodes[targetId];
   if (!node || node.parentId === null) return;
@@ -102,6 +124,13 @@ const useMessageHandler = () => {
     const list = messages.value;
     return list.length > 0 ? list[list.length - 1].id : null;
   });
+  function resolveParentId(parentId) {
+    if (parentId === void 0) return currentLeafId.value;
+    if (!tree.nodes[parentId]) {
+      throw new Error(`Unknown parent message id: ${parentId}`);
+    }
+    return parentId;
+  }
   function setCurrentUserMessage(text) {
     currentUserMessage.value = text;
   }
@@ -112,12 +141,13 @@ const useMessageHandler = () => {
     const id = generateId();
     const text = currentUserMessage.value.trim();
     if (!text) throw new Error("No message");
+    const parentId = resolveParentId(opts?.parentId);
     const content = [
       { type: "text", id: generateId(), text, status: "completed" }
     ];
     const node = {
       id,
-      parentId: currentLeafId.value,
+      parentId,
       childrenIds: [],
       activeChildIndex: 0,
       role: "user",
@@ -150,7 +180,7 @@ const useMessageHandler = () => {
     } else {
       const node = {
         id: message.id,
-        parentId: currentLeafId.value,
+        parentId: resolveParentId(message.parentId),
         childrenIds: [],
         activeChildIndex: 0,
         role: message.role,
@@ -191,6 +221,12 @@ const useMessageHandler = () => {
   function cutBranchAfter$1(messageId) {
     cutBranchAfter(tree, messageId);
   }
+  function cutBranchAt$1(messageId) {
+    cutBranchAt(tree, messageId);
+  }
+  function getTree() {
+    return readonly(tree);
+  }
   return {
     messages,
     currentUserMessage: readonly(currentUserMessage),
@@ -204,7 +240,9 @@ const useMessageHandler = () => {
     clearMessages,
     setTree,
     navigate: navigate$1,
-    cutBranchAfter: cutBranchAfter$1
+    cutBranchAfter: cutBranchAfter$1,
+    cutBranchAt: cutBranchAt$1,
+    getTree
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -102,9 +102,9 @@
     "vitest": "3.2.6",
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
-    "@aleph-alpha/tsconfig-frontend": "0.7.0",
+    "@aleph-alpha/eslint-config-frontend": "0.7.0",
     "@aleph-alpha/prettier-config-frontend": "2.1.0",
-    "@aleph-alpha/eslint-config-frontend": "0.7.0"
+    "@aleph-alpha/tsconfig-frontend": "0.7.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/adapters/responses-api.spec.ts

@@ -142,6 +142,34 @@ describe('responsesToTree', () => {
     expect(a1.activeChildIndex).toBe(1);
   });
 
+  it('favours the latest root branch when the first turn is branched into several root responses', () => {
+    const tree = responsesToTree([
+      makeResponse({
+        id: 'r1',
+        request_input: [userInput('First attempt')],
+        output: [assistantOutput('msg-a1', 'A1')],
+      }),
+      makeResponse({
+        id: 'r2',
+        request_input: [userInput('Second attempt')],
+        output: [assistantOutput('msg-a2', 'A2')],
+      }),
+    ]);
+
+    // Both turns are root-anchored (no previous_response_id); the latest wins
+    // as the active root so getLinearPath surfaces it.
+    expect(tree.nodes['user-r1-0']!.parentId).toBeNull();
+    expect(tree.nodes['user-r2-0']!.parentId).toBeNull();
+    expect(tree.rootId).toBe('user-r2-0');
+
+    const handler = useMessageHandler();
+    handler.setTree(tree);
+    expect(handler.messages.value.map((m) => m.id)).toEqual([
+      'user-r2-0',
+      'msg-a2',
+    ]);
+  });
+
   it('skips responses with no visible content but keeps descendants attached to the parent tail', () => {
     const tree = responsesToTree([
       makeResponse({
@@ -402,15 +430,31 @@ describe('responsesToTree', () => {
         // string on the wire (transports flatten nested metadata).
         metadata: {
           attachments: JSON.stringify([
-            { fileName: 'report.pdf', fileId: 'f1', searchStoreId: 's1' },
+            {
+              fileName: 'report.pdf',
+              fileId: 'f1',
+              searchStoreId: 's1',
+              documentId: 'd1',
+            },
           ]),
         },
       }),
     ]);
 
+    // The full attachment shape (incl. `documentId`) is preserved so the
+    // turn can be faithfully re-submitted (e.g. regenerate) after a reload.
     expect(tree.nodes['user-r1-0']!.metadata).toEqual({
       responseId: 'r1',
-      attachments: [{ name: 'report.pdf', fileId: 'f1', searchStoreId: 's1' }],
+      model: 'pharia-1',
+      attachments: [
+        {
+          name: 'report.pdf',
+          fileId: 'f1',
+          fileName: 'report.pdf',
+          searchStoreId: 's1',
+          documentId: 'd1',
+        },
+      ],
     });
     // The assistant turn does not inherit attachments but still carries
     // its responseId stamp.
@@ -431,9 +475,12 @@ describe('responsesToTree', () => {
         }),
       ]);
 
-      // The malformed attachments are dropped, but `responseId` is still
-      // stamped on every node the adapter emits.
-      expect(tree.nodes['user-r1-0']!.metadata).toEqual({ responseId: 'r1' });
+      // The malformed attachments are dropped; the first user node still
+      // carries `responseId` (and `model` when present).
+      expect(tree.nodes['user-r1-0']!.metadata).toEqual({
+        responseId: 'r1',
+        model: 'pharia-1',
+      });
       expect(tree.nodes['user-r1-0']!.metadata.attachments).toBeUndefined();
       expect(warn).toHaveBeenCalled();
     } finally {

package/src/adapters/responses-api.ts

@@ -212,6 +212,7 @@ export interface ResponseAttachment {
   fileId: string;
   fileName: string;
   searchStoreId: string;
+  documentId?: string;
 }
 
 /**
@@ -219,15 +220,17 @@ export interface ResponseAttachment {
  * `metadata.attachments` on the user `TreeMessage` (chat-kit's `BaseMessage`
  * /`TreeMessage` carry `metadata` as an opaque `Record<string, unknown>`).
  *
- * The shape is intentionally minimal — a human-readable `name` plus the
- * optional ids needed to resolve a public URL for the file. Consumers
- * using a different attachment shape can either skip this adapter or
- * project this onto their own type at the read site.
+ * Carries a human-readable `name` plus every id needed to resolve a public
+ * URL for the file or to re-submit it on a later turn (e.g. regenerate).
+ * Consumers using a different attachment shape can either skip this adapter
+ * or project this onto their own type at the read site.
  */
 export interface ResponseMessageAttachment {
   name: string;
   fileId?: string;
+  fileName?: string;
   searchStoreId?: string;
+  documentId?: string;
 }
 
 /**
@@ -280,6 +283,7 @@ export interface ResponseList {
  */
 export type ResponseTreeMessageMetadata = MessageMetadata & {
   responseId: string;
+  model?: string;
   attachments?: ResponseMessageAttachment[];
 };
 
@@ -478,13 +482,18 @@ function responseToMessageNodes(resp: StoredResponse): ResponseMessageNode[] {
       const userContent = text || responseAttachments?.length;
       if (role !== 'user' || !userContent) continue;
 
-      const metadata: ResponseTreeMessageMetadata = { responseId: resp.id };
+      const metadata: ResponseTreeMessageMetadata = {
+        responseId: resp.id,
+        ...(resp.model ? { model: resp.model } : {}),
+      };
       if (responseAttachments && userNodesPushed === 0) {
         metadata.attachments = responseAttachments.map(
           (a): ResponseMessageAttachment => ({
             name: a.fileName,
             fileId: a.fileId,
+            fileName: a.fileName,
             searchStoreId: a.searchStoreId,
+            ...(a.documentId ? { documentId: a.documentId } : {}),
           }),
         );
       }
@@ -607,6 +616,12 @@ function linkResponse(state: TreeBuildState, resp: StoredResponse): void {
     parentResponseId !== null
       ? (tailMessageByResponse.get(parentResponseId) ?? null)
       : null;
+  // Whether this response opens a new root-level branch (it chains onto
+  // nothing). The first turn can be branched/regenerated, producing several
+  // root responses; since the tree has a single `rootId` with no parent node
+  // to track sibling navigation, we keep the latest such branch as the active
+  // root — mirroring the "latest sibling wins" rule used for deeper branches.
+  const isRootChain = chainParent === null;
 
   const messageNodes = responseToMessageNodes(resp);
 
@@ -624,7 +639,9 @@ function linkResponse(state: TreeBuildState, resp: StoredResponse): void {
     chainParent = node.id;
   }
 
-  if (state.rootMessageId === null && firstId !== null) {
+  // Favour the latest root branch: responses arrive in ascending `created_at`
+  // order, so a later root chain overwrites an earlier one.
+  if (firstId !== null && (state.rootMessageId === null || isRootChain)) {
     state.rootMessageId = firstId;
   }
 
@@ -639,7 +656,9 @@ function linkResponse(state: TreeBuildState, resp: StoredResponse): void {
  * pass: each response's `previous_response_id` always points to a response
  * we have already processed, so we can wire its messages onto the parent's
  * last message immediately. Sibling responses (same `previous_response_id`)
- * surface as branches; the latest one wins as the active branch.
+ * surface as branches; the latest one wins as the active branch. The same
+ * preference applies at the top level: when the first turn is branched into
+ * several root responses, the latest becomes the active `rootId`.
  *
  * Every emitted node carries `metadata.responseId` pointing back to the
  * originating `StoredResponse.id` (see {@link ResponseTreeMessage}). The

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

@@ -6,6 +6,6 @@
  * @category Messages
  * @useCases render assistant reply, AI message layout, conversation turn, streaming message container
  * @keywords agent, assistant, message, bubble, reply, ai, conversation
- * @related CkUserMessage, CkConversation, CkMarkdownRenderer, CkCopyMessageActionButton
+ * @related CkUserMessage, CkConversation, CkMarkdownRenderer, CkCopyMessageButton
  */
 export type CkAgentMessageProps = Record<string, never>;

package/src/components/base/{CkCopyMessageActionButton/CkCopyMessageActionButton.spec.ts → CkCopyMessageButton/CkCopyMessageButton.spec.ts}

@@ -1,10 +1,10 @@
-import CkCopyMessageActionButton from './CkCopyMessageActionButton.vue';
+import CkCopyMessageButton from './CkCopyMessageButton.vue';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/vue';
 import { flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-describe('CkCopyMessageActionButton', () => {
+describe('CkCopyMessageButton', () => {
   const writeText = vi.fn((_: string) => Promise.resolve());
 
   beforeEach(() => {
@@ -14,7 +14,7 @@ describe('CkCopyMessageActionButton', () => {
 
   it('emits copy with success when clipboard succeeds', async () => {
     const user = userEvent.setup();
-    const { emitted } = render(CkCopyMessageActionButton, {
+    const { emitted } = render(CkCopyMessageButton, {
       props: { text: 'x', writeToClipboard: writeText },
     });
 
@@ -27,7 +27,7 @@ describe('CkCopyMessageActionButton', () => {
 
   it('copies text and updates the accessible name', async () => {
     const user = userEvent.setup();
-    render(CkCopyMessageActionButton, {
+    render(CkCopyMessageButton, {
       props: { text: 'Hello, world', writeToClipboard: writeText },
     });
 
@@ -50,7 +50,7 @@ describe('CkCopyMessageActionButton', () => {
 
     it('emits copy with success false', async () => {
       const user = userEvent.setup();
-      const { emitted } = render(CkCopyMessageActionButton, {
+      const { emitted } = render(CkCopyMessageButton, {
         props: { text: 'x', writeToClipboard: writeText },
       });
 
@@ -67,7 +67,7 @@ describe('CkCopyMessageActionButton', () => {
   it('reverts label after durationMs', async () => {
     vi.useFakeTimers();
     const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(CkCopyMessageActionButton, {
+    render(CkCopyMessageButton, {
       props: { text: 'x', durationMs: 1500, writeToClipboard: writeText },
     });
 

package/src/components/base/{CkCopyMessageActionButton/CkCopyMessageActionButton.stories.ts → CkCopyMessageButton/CkCopyMessageButton.stories.ts}

@@ -1,9 +1,9 @@
-import CkCopyMessageActionButton from './CkCopyMessageActionButton.vue';
+import CkCopyMessageButton from './CkCopyMessageButton.vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
-const meta: Meta<typeof CkCopyMessageActionButton> = {
-  title: 'Base/CkCopyMessageActionButton',
-  component: CkCopyMessageActionButton,
+const meta: Meta<typeof CkCopyMessageButton> = {
+  title: 'Base/CkCopyMessageButton',
+  component: CkCopyMessageButton,
   tags: ['autodocs'],
   argTypes: {
     text: {
@@ -31,19 +31,19 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultTemplateSource = `<script setup lang="ts">
-import { CkCopyMessageActionButton } from '@aleph-alpha/chat-kit';
+import { CkCopyMessageButton } from '@aleph-alpha/chat-kit';
 </script>
 
 <template>
-  <CkCopyMessageActionButton text="Sample assistant reply text to copy." />
+  <CkCopyMessageButton text="Sample assistant reply text to copy." />
 </template>`;
 
 const disabledTemplateSource = `<script setup lang="ts">
-import { CkCopyMessageActionButton } from '@aleph-alpha/chat-kit';
+import { CkCopyMessageButton } from '@aleph-alpha/chat-kit';
 </script>
 
 <template>
-  <CkCopyMessageActionButton text="Cannot copy when disabled." disabled />
+  <CkCopyMessageButton text="Cannot copy when disabled." disabled />
 </template>`;
 
 /**

package/src/components/base/{CkCopyMessageActionButton/CkCopyMessageActionButton.vue → CkCopyMessageButton/CkCopyMessageButton.vue}

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { CkMessageActionButton } from '../CkMessageActionButton';
-import type { CkCopyMessageActionButtonProps } from './types';
+import { CkMessageButton } from '../CkMessageButton';
+import type { CkCopyMessageButtonProps } from './types';
 import { UiIcon, UiTooltip } from '@aleph-alpha/ui-library';
 import { onUnmounted, ref } from 'vue';
 
 defineOptions({
-  name: 'CkCopyMessageActionButton',
+  name: 'CkCopyMessageButton',
 });
 
-const props = withDefaults(defineProps<CkCopyMessageActionButtonProps>(), {
+const props = withDefaults(defineProps<CkCopyMessageButtonProps>(), {
   disabled: false,
   durationMs: 3000,
   ariaLabelCopy: 'Copy message',
@@ -68,7 +68,7 @@ async function handleClick() {
     align="center"
     :delay-duration="0"
   >
-    <CkMessageActionButton
+    <CkMessageButton
       v-bind="{ ariaLabel: copied ? ariaLabelCopied : ariaLabelCopy }"
       :disabled="disabled"
       @click="handleClick"
@@ -83,7 +83,7 @@ async function handleClick() {
         />
         <UiIcon v-else key="check" name="check" :size="16" aria-hidden="true" />
       </Transition>
-    </CkMessageActionButton>
+    </CkMessageButton>
     <span class="sr-only" aria-live="polite">
       {{ copied ? ariaLabelCopied : ariaLabelCopy }}
     </span>

package/src/components/base/CkCopyMessageButton/index.ts

@@ -0,0 +1,2 @@
+export { default as CkCopyMessageButton } from './CkCopyMessageButton.vue';
+export type * from './types';

package/src/components/base/{CkCopyMessageActionButton → CkCopyMessageButton}/types.ts

@@ -5,9 +5,9 @@
  * @category Actions
  * @useCases copy assistant reply, copy message to clipboard, chat message action, feedback action on message footer
  * @keywords copy, clipboard, action, message, button, icon, feedback
- * @related CkMessageActionButton, CkAgentMessage, CkConversation
+ * @related CkMessageButton, CkAgentMessage, CkConversation
  */
-export interface CkCopyMessageActionButtonProps {
+export interface CkCopyMessageButtonProps {
   /** Plain text to copy to the clipboard. */
   text: string;
   /**
@@ -37,7 +37,7 @@ export interface CkCopyMessageActionButtonProps {
   writeToClipboard?: (text: string) => Promise<void>;
 }
 
-export interface CkCopyMessageActionButtonEmits {
+export interface CkCopyMessageButtonEmits {
   /** Emitted after the clipboard operation finishes (success or failure). */
   (e: 'copy', payload: { success: boolean }): void;
 }

package/src/components/base/CkFeedbackButton/CkFeedbackButton.vue

@@ -3,7 +3,7 @@ import {
   defaultChatKitLabels,
   useChatKitLabels,
 } from '../../../handlers/useChatKitLabels';
-import { CkMessageActionButton } from '../CkMessageActionButton';
+import { CkMessageButton } from '../CkMessageButton';
 import type { CkFeedbackButtonProps, CkFeedbackValue } from './types';
 import { UiIcon, UiTooltip } from '@aleph-alpha/ui-library';
 import { computed } from 'vue';
@@ -81,7 +81,7 @@ function handleClick(target: 'up' | 'down'): void {
       align="center"
       :delay-duration="0"
     >
-      <CkMessageActionButton
+      <CkMessageButton
         v-bind="{ ariaLabel: thumbsUpLabel }"
         :aria-pressed="isUpSelected"
         :aria-disabled="locked || undefined"
@@ -98,7 +98,7 @@ function handleClick(target: 'up' | 'down'): void {
           aria-hidden="true"
           :class="isUpSelected ? 'fill-current' : undefined"
         />
-      </CkMessageActionButton>
+      </CkMessageButton>
     </UiTooltip>
     <UiTooltip
       :content="thumbsDownLabel"
@@ -106,7 +106,7 @@ function handleClick(target: 'up' | 'down'): void {
       align="center"
       :delay-duration="0"
     >
-      <CkMessageActionButton
+      <CkMessageButton
         v-bind="{ ariaLabel: thumbsDownLabel }"
         :aria-pressed="isDownSelected"
         :aria-disabled="locked || undefined"
@@ -123,7 +123,7 @@ function handleClick(target: 'up' | 'down'): void {
           aria-hidden="true"
           :class="isDownSelected ? 'fill-current' : undefined"
         />
-      </CkMessageActionButton>
+      </CkMessageButton>
     </UiTooltip>
   </div>
 </template>

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

@@ -10,7 +10,7 @@
  * @category Feedback
  * @useCases like or dislike an assistant reply, collect binary message rating, lock feedback after submission, rate AI response
  * @keywords feedback, thumbs up, thumbs down, like, dislike, rating, vote, action, message, button
- * @related CkMessageActionButton, CkCopyMessageActionButton, CkAgentMessage, CkConversation
+ * @related CkMessageButton, CkCopyMessageButton, CkAgentMessage, CkConversation
  */
 export type CkFeedbackValue = 'up' | 'down' | null;
 

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

@@ -18,7 +18,7 @@
  *   capture a free-text comment, drive a two-step rating flow
  * @keywords feedback, dialog, modal, reason codes, free text, qualitative,
  *   rating, comment
- * @related CkFeedbackButton, CkMessageActionButton, CkAgentMessage,
+ * @related CkFeedbackButton, CkMessageButton, CkAgentMessage,
  *   CkConversation, UiDialog, UiToggleGroup
  */
 export type CkFeedbackSentiment = 'positive' | 'negative';

package/src/components/base/{CkMessageActionButton/CkMessageActionButton.spec.ts → CkMessageButton/CkMessageButton.spec.ts}

@@ -1,10 +1,10 @@
-import CkMessageActionButton from './CkMessageActionButton.vue';
+import CkMessageButton from './CkMessageButton.vue';
 import { render, screen } from '@testing-library/vue';
 import { describe, expect, it } from 'vitest';
 
-describe('CkMessageActionButton', () => {
+describe('CkMessageButton', () => {
   it('renders slot content inside the button', () => {
-    render(CkMessageActionButton, {
+    render(CkMessageButton, {
       props: { ariaLabel: 'Action' },
       slots: { default: '<svg data-testid="icon"></svg>' },
     });
@@ -13,7 +13,7 @@ describe('CkMessageActionButton', () => {
   });
 
   it('sets the accessible label on the button', () => {
-    render(CkMessageActionButton, {
+    render(CkMessageButton, {
       props: { ariaLabel: 'Copy message' },
     });
 
@@ -23,7 +23,7 @@ describe('CkMessageActionButton', () => {
   });
 
   it('passes disabled state to the button', () => {
-    render(CkMessageActionButton, {
+    render(CkMessageButton, {
       props: { ariaLabel: 'Action', disabled: true },
     });
 
@@ -31,7 +31,7 @@ describe('CkMessageActionButton', () => {
   });
 
   it('defaults to enabled', () => {
-    render(CkMessageActionButton, {
+    render(CkMessageButton, {
       props: { ariaLabel: 'Action' },
     });
 

package/src/components/base/{CkMessageActionButton/CkMessageActionButton.stories.ts → CkMessageButton/CkMessageButton.stories.ts}

@@ -1,10 +1,10 @@
-import CkMessageActionButton from './CkMessageActionButton.vue';
+import CkMessageButton from './CkMessageButton.vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { UiIcon } from '@aleph-alpha/ui-library';
 
-const meta: Meta<typeof CkMessageActionButton> = {
-  title: 'Base/CkMessageActionButton',
-  component: CkMessageActionButton,
+const meta: Meta<typeof CkMessageButton> = {
+  title: 'Base/CkMessageButton',
+  component: CkMessageButton,
   tags: ['autodocs'],
   argTypes: {
     ariaLabel: {
@@ -29,14 +29,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultTemplateSource = `<script setup lang="ts">
-import { CkMessageActionButton } from '@aleph-alpha/chat-kit';
+import { CkMessageButton } from '@aleph-alpha/chat-kit';
 import { UiIcon } from '@aleph-alpha/ui-library';
 </script>
 
 <template>
-  <CkMessageActionButton ariaLabel="Copy message">
+  <CkMessageButton ariaLabel="Copy message">
     <UiIcon name="copy" :size="16" aria-hidden="true" />
-  </CkMessageActionButton>
+  </CkMessageButton>
 </template>`;
 
 /**
@@ -45,11 +45,11 @@ import { UiIcon } from '@aleph-alpha/ui-library';
  */
 export const Default: Story = {
   render: () => ({
-    components: { CkMessageActionButton, UiIcon },
+    components: { CkMessageButton, UiIcon },
     template: `
-      <CkMessageActionButton ariaLabel="Copy message">
+      <CkMessageButton ariaLabel="Copy message">
         <UiIcon name="copy" :size="16" aria-hidden="true" />
-      </CkMessageActionButton>
+      </CkMessageButton>
     `,
   }),
   parameters: { docs: { source: { code: defaultTemplateSource } } },

package/src/components/base/{CkMessageActionButton/CkMessageActionButton.vue → CkMessageButton/CkMessageButton.vue}

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { CkMessageActionButtonProps } from './types';
+import type { CkMessageButtonProps } from './types';
 import { UiButton } from '@aleph-alpha/ui-library';
 
 defineOptions({
-  name: 'CkMessageActionButton',
+  name: 'CkMessageButton',
 });
 
-withDefaults(defineProps<CkMessageActionButtonProps>(), {
+withDefaults(defineProps<CkMessageButtonProps>(), {
   disabled: false,
 });
 </script>

package/src/components/base/CkMessageButton/index.ts

@@ -0,0 +1,2 @@
+export { default as CkMessageButton } from './CkMessageButton.vue';
+export type * from './types';

package/src/components/base/{CkMessageActionButton → CkMessageButton}/types.ts

@@ -5,9 +5,9 @@
  * @category Actions
  * @useCases message footer action, like/dislike reaction, share button on reply, secondary message action
  * @keywords icon button, action, message, ghost, accessible, aria-label
- * @related CkCopyMessageActionButton, CkAgentMessage, CkConversation
+ * @related CkCopyMessageButton, CkAgentMessage, CkConversation
  */
-export interface CkMessageActionButtonProps {
+export interface CkMessageButtonProps {
   /**
    * Accessible label for the button. **Required** because the button only
    * renders an icon.