@aleph-alpha/chat-kit 3.2.0 → 4.0.0

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.spec.ts

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { h } from 'vue';
 import CkMarkdownRenderer from './CkMarkdownRenderer.vue';
 import { defaultMarkdownClasses } from './defaultMarkdownClasses';
@@ -345,4 +346,127 @@ describe('CkMarkdownRenderer', () => {
       expect(container.querySelector('p')?.textContent).toBe('PREFIX:HELLO');
     });
   });
+
+  describe('citations', () => {
+    const citations = [
+      {
+        index: 1,
+        fileName: 'q3-report.pdf',
+        snippet: 'the cited chunk text',
+        locationLabel: 'Page 3',
+        url: '/api/v1/.../public-urls',
+      },
+    ];
+
+    it('still parses markdown and renders [n] as an interactive citation', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: 'Adoption rose **25%** [1].', citations },
+      });
+
+      // Markdown is parsed (bold becomes <strong>, not literal asterisks)...
+      expect(container.querySelector('strong')?.textContent).toBe('25%');
+      expect(container.textContent).not.toContain('**');
+      // ...and [1] becomes a citation marker.
+      expect(
+        screen.getByRole('button', { name: 'Source 1' }),
+      ).toBeInTheDocument();
+    });
+
+    it('leaves an unsupported [n] (no matching source) as plain text', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: 'No source for this [9].', citations },
+      });
+
+      expect(container.textContent).toContain('[9]');
+      expect(screen.queryByRole('button', { name: 'Source 9' })).toBeNull();
+    });
+
+    it('emits open-source end-to-end when a citation card action is used', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkMarkdownRenderer, {
+        props: { content: 'See the report [1].', citations },
+      });
+
+      await user.hover(screen.getByRole('button', { name: 'Source 1' }));
+      await user.click(
+        await screen.findByRole('button', { name: 'Open source' }),
+      );
+
+      expect(emitted('open-source')).toEqual([['/api/v1/.../public-urls']]);
+    });
+
+    it('renders the `citation` slot instead of the default marker when provided', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkMarkdownRenderer, {
+        props: { content: 'See the report [1].', citations },
+        slots: {
+          citation: ({
+            source,
+            openSource,
+          }: {
+            source: { index: number; url?: string };
+            openSource: (url: string) => void;
+          }) =>
+            h(
+              'button',
+              { onClick: () => source.url && openSource(source.url) },
+              `custom-${source.index}`,
+            ),
+        },
+      });
+
+      const custom = screen.getByRole('button', { name: 'custom-1' });
+      expect(custom).toBeInTheDocument();
+      // The default chip is replaced, not added alongside.
+      expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+
+      await user.click(custom);
+      expect(emitted('open-source')).toEqual([['/api/v1/.../public-urls']]);
+    });
+
+    describe('numeric marker conversion across markdown contexts', () => {
+      it('does not convert [n] inside an inline code span', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: 'use `arr[1]` here', citations },
+        });
+        expect(container.querySelector('code')?.textContent).toBe('arr[1]');
+        expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+      });
+
+      it('does not convert [n] inside a fenced code block', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: '```\n[1]\n```', citations },
+        });
+        expect(container.querySelector('pre')?.textContent).toContain('[1]');
+        expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+      });
+
+      it('does not convert a non-numeric [note] marker', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: 'see [note] here', citations },
+        });
+        expect(container.textContent).toContain('[note]');
+      });
+
+      it('converts a marker at the very start of the content', () => {
+        render(CkMarkdownRenderer, {
+          props: { content: '[1] leads the paragraph', citations },
+        });
+        expect(
+          screen.getByRole('button', { name: 'Source 1' }),
+        ).toBeInTheDocument();
+      });
+
+      it('converts markers inside a heading and a list item', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: '# Title [1]\n\n- item [1]', citations },
+        });
+        expect(container.querySelector('h1')).toBeInTheDocument();
+        expect(container.querySelector('li')).toBeInTheDocument();
+        expect(
+          screen.getAllByRole('button', { name: 'Source 1' }),
+        ).toHaveLength(2);
+      });
+    });
+  });
 });

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.stories.ts

@@ -430,3 +430,121 @@ export const WithCustomPlugin: Story = {
   }),
   parameters: { docs: { source: { code: withCustomPluginTemplateSource } } },
 };
+
+const withCitationsTemplateSource = `<script setup lang="ts">
+import { CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+import type { CkCitationSource } from '@aleph-alpha/chat-kit';
+
+// An assistant reply is markdown that may contain inline [n] references.
+const content = [
+  'Customized training drove measurably better outcomes.',
+  '',
+  'Departments with tailored sessions saw a **25% higher adoption rate** [1],',
+  'and reported fewer support tickets in the first quarter [2].',
+].join('\\n');
+
+// The numbered sources, mapped from the backend citations manifest.
+const citations: CkCitationSource[] = [
+  {
+    index: 1,
+    fileName: 'Q2_Business_Plan.pdf',
+    snippet: 'Departments that received customized training saw a 25% higher adoption rate…',
+    locationLabel: 'Page 3',
+    url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
+  },
+  {
+    index: 2,
+    fileName: 'Support-Metrics-Q1.csv',
+    snippet: 'Ticket volume fell 18% quarter-over-quarter for tailored-training cohorts.',
+    locationLabel: 'Row 42',
+    url: '/api/v1/search-stores/ss_abc/files/file_456/public-urls',
+  },
+];
+
+function openSource(url: string) {
+  // Source URLs are auth-proxied; the host performs the navigation.
+  window.open(url, '_blank', 'noopener');
+}
+</script>
+
+<template>
+  <CkMarkdownRenderer
+    :content="content"
+    :citations="citations"
+    @open-source="openSource"
+  />
+</template>`;
+
+const CITATIONS = [
+  {
+    index: 1,
+    fileName: 'Q2_Business_Plan.pdf',
+    snippet:
+      'Departments that received customized training saw a 25% higher adoption rate of the new tools compared to those with generic training.',
+    locationLabel: 'Page 3',
+    url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
+  },
+  {
+    index: 2,
+    fileName: 'Support-Metrics-Q1.csv',
+    snippet:
+      'Ticket volume fell 18% quarter-over-quarter for the tailored-training cohorts versus the control group.',
+    locationLabel: 'Row 42',
+    url: '/api/v1/search-stores/ss_abc/files/file_456/public-urls',
+  },
+];
+
+/**
+ * The headline integration: an assistant reply is **markdown that contains
+ * inline `[n]` references**, and the `citations` prop turns each one into an
+ * interactive `CkCitation` (numbered marker + hover card) — handled as a
+ * dedicated case, distinct from ordinary markdown. Hover a marker to preview
+ * its source; the external-link action emits `open-source`.
+ */
+export const WithCitations: Story = {
+  render: () => ({
+    components: { CkMarkdownRenderer },
+    setup() {
+      const content = [
+        '## Training impact',
+        '',
+        'Customized training drove measurably better outcomes across teams.',
+        '',
+        'Departments with tailored sessions saw a **25% higher adoption rate** [1],',
+        'and reported markedly fewer support tickets in the first quarter [2].',
+        '',
+        '- Faster onboarding for new hires [1]',
+        '- Lower support load [2]',
+      ].join('\n');
+      function openSource(url: string) {
+        window.open(url, '_blank', 'noopener');
+      }
+      return { content, citations: CITATIONS, openSource };
+    },
+    template:
+      '<CkMarkdownRenderer :content="content" :citations="citations" @open-source="openSource" />',
+  }),
+  parameters: { docs: { source: { code: withCitationsTemplateSource } } },
+};
+
+/**
+ * Unsupported markers degrade gracefully: a `[n]` with no matching source
+ * (here `[9]`) is left as plain text rather than rendered as a citation, while
+ * the markers that do have sources still render. Citation handling never
+ * touches code spans — the `[3]` inside `` `arr[3]` `` stays literal.
+ */
+export const WithUnsupportedAndCodeMarkers: Story = {
+  render: () => ({
+    components: { CkMarkdownRenderer },
+    setup() {
+      const content = [
+        'Two real sources back this [1][2], but [9] has no source and stays as text.',
+        '',
+        'A marker inside code such as `arr[3]` is never treated as a citation.',
+      ].join('\n');
+      return { content, citations: CITATIONS };
+    },
+    template:
+      '<CkMarkdownRenderer :content="content" :citations="citations" />',
+  }),
+};

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue

@@ -14,6 +14,8 @@ import {
   defaultChatKitLabels,
   useChatKitLabels,
 } from '../../../handlers/useChatKitLabels';
+import { useCitationRendering } from './useCitationRendering';
+import type { CkCitationSource } from '../CkCitation';
 import type { CkMarkdownElementClasses } from './types';
 import { defaultMarkdownClasses } from './defaultMarkdownClasses';
 
@@ -21,30 +23,44 @@ import { defaultMarkdownClasses } from './defaultMarkdownClasses';
 // never forces the whole message column wider on narrow viewports.
 const TABLE_WRAPPER_CLASS = 'max-w-full overflow-x-auto';
 
-function domToVNode(
-  node: Node,
-  slots: Slots,
-  classes: CkMarkdownElementClasses,
-  tableLabel: string,
-): VNode | string | null {
+type RenderedNode = VNode | VNode[] | string | null;
+
+interface DomToVNodeContext {
+  slots: Slots;
+  classes: CkMarkdownElementClasses;
+  tableLabel: string;
+  // Maps a citation placeholder element to a node, or null for other elements.
+  renderCitation: (el: Element) => VNode | VNode[] | null;
+}
+
+// Routes a fenced code block to the `code-block` slot when one is provided;
+// otherwise returns null so it renders as the default `<pre><code>`.
+function renderCodeBlock(el: Element, ctx: DomToVNodeContext): VNode[] | null {
+  if (el.tagName !== 'PRE' || el.firstElementChild?.tagName !== 'CODE') {
+    return null;
+  }
+  if (!ctx.slots['code-block']) return null;
+
+  const codeEl = el.firstElementChild;
+  const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? '';
+  const code = codeEl.textContent ?? '';
+  return ctx.slots['code-block']({ code, language });
+}
+
+function domToVNode(node: Node, ctx: DomToVNodeContext): RenderedNode {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
 
   const el = node as Element;
 
-  if (el.tagName === 'PRE' && el.firstElementChild?.tagName === 'CODE') {
-    const codeEl = el.firstElementChild;
-    const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? '';
-    const code = codeEl.textContent ?? '';
-
-    if (slots['code-block']) {
-      return slots['code-block']({ code, language }) as unknown as VNode;
-    }
-  }
+  // Explicit null check: a slot may legitimately render an empty string, which
+  // must still count as "handled" rather than falling through to the element.
+  const special = renderCodeBlock(el, ctx) ?? ctx.renderCitation(el);
+  if (special != null) return special;
 
   const children = Array.from(node.childNodes)
-    .map((child) => domToVNode(child, slots, classes, tableLabel))
-    .filter((c): c is VNode | string => c != null);
+    .map((child) => domToVNode(child, ctx))
+    .filter((c): c is NonNullable<RenderedNode> => c != null);
 
   const attrs: Record<string, string> = {};
   for (const attr of el.attributes) {
@@ -52,7 +68,7 @@ function domToVNode(
   }
 
   const tag = el.tagName.toLowerCase();
-  const customClass = classes[tag as keyof CkMarkdownElementClasses];
+  const customClass = ctx.classes[tag as keyof CkMarkdownElementClasses];
   if (customClass) {
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
@@ -66,7 +82,7 @@ function domToVNode(
         class: TABLE_WRAPPER_CLASS,
         tabindex: '0',
         role: 'region',
-        'aria-label': tableLabel,
+        'aria-label': ctx.tableLabel,
       },
       [vnode],
     );
@@ -84,12 +100,34 @@ export default defineComponent({
       default: () => ({}),
     },
     plugins: { type: Array as PropType<PluggableList>, default: undefined },
+    citations: {
+      type: Array as PropType<CkCitationSource[]>,
+      default: undefined,
+    },
+  },
+  emits: {
+    'open-source': (url: string) => typeof url === 'string',
   },
-  setup(props, { slots }) {
-    const { content, plugins } = toRefs(props);
-    const { html } = useMarkdownParser(content, plugins);
+  setup(props, { slots, emit }) {
+    const { content } = toRefs(props);
     const labels = useChatKitLabels();
 
+    function handleOpenSource(url: string): void {
+      emit('open-source', url);
+    }
+
+    const { citationPlugins, renderCitationNode } = useCitationRendering(
+      () => props.citations,
+      handleOpenSource,
+    );
+
+    const effectivePlugins = computed<PluggableList>(() => [
+      ...(props.plugins ?? []),
+      ...citationPlugins.value,
+    ]);
+
+    const { html } = useMarkdownParser(content, effectivePlugins);
+
     const parsedNodes = computed(() => {
       const raw = html.value;
       if (!raw) return [];
@@ -103,13 +141,17 @@ export default defineComponent({
     }));
 
     return () => {
-      const elementClasses = mergedClasses.value;
-      const tableLabel =
-        labels.value.markdownTableLabel ??
-        defaultChatKitLabels.markdownTableLabel!;
+      const ctx: DomToVNodeContext = {
+        slots,
+        classes: mergedClasses.value,
+        tableLabel:
+          labels.value.markdownTableLabel ??
+          defaultChatKitLabels.markdownTableLabel!,
+        renderCitation: (el) => renderCitationNode(el, slots.citation),
+      };
       const children = parsedNodes.value
-        .map((node) => domToVNode(node, slots, elementClasses, tableLabel))
-        .filter((c): c is VNode | string => c != null);
+        .map((node) => domToVNode(node, ctx))
+        .filter((c): c is NonNullable<RenderedNode> => c != null);
       return h(
         'div',
         { class: 'markdown-renderer min-w-0 break-words' },

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

@@ -1,5 +1,6 @@
 export { default as CkMarkdownRenderer } from './CkMarkdownRenderer.vue';
 export type {
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkMarkdownElementClasses,
 } from './types';

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

@@ -1,4 +1,5 @@
 import type { PluggableList } from 'unified';
+import type { CkCitationSource } from '../CkCitation';
 
 export interface CkMarkdownElementClasses {
   h1?: string;
@@ -50,4 +51,29 @@ export interface CkMarkdownRendererProps {
   classes?: CkMarkdownElementClasses;
   /** Extra [unified](https://unifiedjs.com/) plugins to extend parsing. */
   plugins?: PluggableList;
+  /**
+   * Citation sources for inline `[n]` references in `content`. When provided,
+   * each `[n]` whose number matches a source's `index` is rendered as an
+   * interactive `CkCitation` (numbered marker + hover card); unmatched markers
+   * stay as plain text. Fully opt-in — omit it and markdown renders unchanged.
+   *
+   * Notes for callers:
+   * - Any numeric `[n]` in prose is turned into a citation when source `n`
+   *   exists — including incidental ones like array indexing (`arr[1]`). Wrap
+   *   such text in a code span (`` `arr[1]` ``) to keep it literal. `[n]` inside
+   *   code spans/blocks is never converted.
+   * - `index` must be unique across sources; on a collision the last wins.
+   * - Pass a stable/memoized array reference. A new array identity on every
+   *   render forces the markdown processor to rebuild.
+   */
+  citations?: CkCitationSource[];
+}
+
+export interface CkMarkdownRendererEmits {
+  /**
+   * Emitted when the user opens a citation's source from its card. The
+   * payload is the source `url`. Forward it to a handler that performs the
+   * (often auth-proxied) navigation.
+   */
+  (e: 'open-source', url: string): void;
 }

package/src/components/base/CkMarkdownRenderer/useCitationRendering.spec.ts

@@ -0,0 +1,94 @@
+import { h, type VNode } from 'vue';
+import { useCitationRendering } from './useCitationRendering';
+import { CkCitation } from '../CkCitation';
+import { remarkCitations } from '../../../helpers/unified/remarkCitations';
+import type { CkCitationSource } from '../CkCitation';
+
+const SOURCES: CkCitationSource[] = [
+  {
+    index: 1,
+    fileName: 'q3-report.pdf',
+    snippet: 'the cited chunk text',
+    locationLabel: 'Page 3',
+    url: '/api/v1/.../public-urls',
+  },
+];
+
+function citationPlaceholder(index: number): Element {
+  const el = document.createElement('span');
+  el.setAttribute('data-citation-index', String(index));
+  return el;
+}
+
+describe('useCitationRendering', () => {
+  describe('citationPlugins', () => {
+    it('adds no plugins when there are no citations', () => {
+      const { citationPlugins } = useCitationRendering(
+        () => undefined,
+        vi.fn(),
+      );
+      expect(citationPlugins.value).toEqual([]);
+    });
+
+    it('adds the remarkCitations plugin when citations are present', () => {
+      const { citationPlugins } = useCitationRendering(() => SOURCES, vi.fn());
+      expect(citationPlugins.value).toHaveLength(1);
+      const [plugin] = citationPlugins.value[0] as [unknown, unknown];
+      expect(plugin).toBe(remarkCitations);
+    });
+  });
+
+  describe('renderCitationNode', () => {
+    it('renders a matching placeholder as a CkCitation with the source props', () => {
+      const onOpenSource = vi.fn();
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        onOpenSource,
+      );
+
+      const vnode = renderCitationNode(citationPlaceholder(1)) as VNode;
+
+      expect(vnode.type).toBe(CkCitation);
+      expect(vnode.props).toMatchObject({
+        index: 1,
+        fileName: 'q3-report.pdf',
+        url: '/api/v1/.../public-urls',
+        onOpenSource,
+      });
+    });
+
+    it('returns null for a placeholder with no matching source', () => {
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        vi.fn(),
+      );
+      expect(renderCitationNode(citationPlaceholder(9))).toBeNull();
+    });
+
+    it('returns null for a non-citation element', () => {
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        vi.fn(),
+      );
+      expect(renderCitationNode(document.createElement('p'))).toBeNull();
+    });
+
+    it('delegates to the slot when provided, passing source and openSource', () => {
+      const onOpenSource = vi.fn();
+      const slotResult = [h('span', 'custom')];
+      const slot = vi.fn(() => slotResult);
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        onOpenSource,
+      );
+
+      const result = renderCitationNode(citationPlaceholder(1), slot);
+
+      expect(slot).toHaveBeenCalledWith({
+        source: SOURCES[0],
+        openSource: onOpenSource,
+      });
+      expect(result).toBe(slotResult);
+    });
+  });
+});

package/src/components/base/CkMarkdownRenderer/useCitationRendering.ts

@@ -0,0 +1,52 @@
+import { computed, h, toValue, type MaybeRefOrGetter, type VNode } from 'vue';
+import type { PluggableList } from 'unified';
+import { remarkCitations } from '../../../helpers/unified/remarkCitations';
+import { CkCitation } from '../CkCitation';
+import type { CkCitationSource } from '../CkCitation';
+
+/** Scope passed to the `citation` slot when overriding how a source renders. */
+export type CkCitationSlot = (props: {
+  source: CkCitationSource;
+  openSource: (url: string) => void;
+}) => VNode[];
+
+/**
+ * The citation concern of `CkMarkdownRenderer`, extracted so the renderer stays
+ * markdown-focused and this logic is testable on its own.
+ */
+export function useCitationRendering(
+  citations: MaybeRefOrGetter<CkCitationSource[] | undefined>,
+  onOpenSource: (url: string) => void,
+) {
+  const sourcesByIndex = computed(
+    () =>
+      new Map(
+        (toValue(citations) ?? []).map((source) => [source.index, source]),
+      ),
+  );
+
+  const citationPlugins = computed<PluggableList>(() => {
+    const list = toValue(citations);
+    if (!list?.length) return [];
+    const indices = new Set(list.map((source) => source.index));
+    return [[remarkCitations, { indices }]];
+  });
+
+  // Returns null for non-citation elements so the renderer handles them normally.
+  function renderCitationNode(
+    el: Element,
+    slot?: CkCitationSlot,
+  ): VNode | VNode[] | null {
+    if (!el.hasAttribute('data-citation-index')) return null;
+
+    const index = Number(el.getAttribute('data-citation-index'));
+    const source = sourcesByIndex.value.get(index);
+    if (!source) return null;
+
+    // Expose the same handler so slot content can forward `open-source`.
+    if (slot) return slot({ source, openSource: onOpenSource });
+    return h(CkCitation, { ...source, onOpenSource });
+  }
+
+  return { citationPlugins, renderCitationNode };
+}

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 } } },