@aleph-alpha/chat-kit 3.3.0 → 5.0.0

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

@@ -0,0 +1,36 @@
+/**
+ * Compact, ghost-styled button shown on the right of an agent message header
+ * (see `CkAgentMessageHeader`). Renders a short label followed by a trailing
+ * icon (an arrow by default) and emits a generic `click` event — it performs
+ * no action of its own, leaving the consumer to decide what happens (e.g. open
+ * an activity / chain-of-thought panel).
+ *
+ * @category Actions
+ * @useCases agent message header action, open activity panel, chain-of-thought summary toggle, tool/source indicator
+ * @keywords header, activity, action, button, ghost, arrow, agent, message
+ * @related CkAgentMessageHeader, CkAgentMessage, CkConversation, CkMessageButton
+ */
+export interface CkHeaderActivityButtonProps {
+  /**
+   * Whether the button is disabled and ignores clicks.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Accessible label for the button. Defaults to the rendered label text when
+   * omitted, but should be set when the slot content is not descriptive on its
+   * own.
+   */
+  ariaLabel?: string;
+  /**
+   * Trailing [Lucide](https://lucide.dev/icons) icon name shown after the
+   * label. Set to an empty string to hide the icon.
+   * @default 'arrow-right'
+   */
+  icon?: string;
+}
+
+export interface CkHeaderActivityButtonEmits {
+  /** Emitted when the button is pressed and not disabled. */
+  (e: 'click'): void;
+}

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.

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

@@ -199,6 +199,94 @@ describe('CkPromptInput', () => {
     });
   });
 
+  // The focus highlight (border + ring) must appear for keyboard navigation
+  // only — not when the textarea is focused by a mouse click. The component
+  // distinguishes the two by remembering whether a pointerdown immediately
+  // preceded the focus event.
+  describe('keyboard vs mouse focus highlight', () => {
+    const HIGHLIGHT_CLASS = 'ring-2';
+
+    it('shows the highlight when focused via keyboard (no preceding pointer)', async () => {
+      const { container } = render(CkPromptInput);
+
+      await fireEvent.focus(screen.getByRole('textbox'));
+
+      const form = container.querySelector('form');
+      expect(form?.className).toContain(HIGHLIGHT_CLASS);
+      expect(form?.className).toContain('border-border-surface-focus-ring');
+    });
+
+    it('does NOT show the highlight when focused via mouse click', async () => {
+      const { container } = render(CkPromptInput);
+      const textarea = screen.getByRole('textbox');
+
+      // A real mouse click fires pointerdown before focus.
+      await fireEvent.pointerDown(textarea);
+      await fireEvent.focus(textarea);
+
+      expect(container.querySelector('form')?.className).not.toContain(
+        HIGHLIGHT_CLASS,
+      );
+    });
+
+    it('removes the highlight on blur', async () => {
+      const { container } = render(CkPromptInput);
+      const textarea = screen.getByRole('textbox');
+
+      await fireEvent.focus(textarea);
+      expect(container.querySelector('form')?.className).toContain(
+        HIGHLIGHT_CLASS,
+      );
+
+      await fireEvent.blur(textarea);
+      expect(container.querySelector('form')?.className).not.toContain(
+        HIGHLIGHT_CLASS,
+      );
+    });
+
+    it('shows the highlight on a later keyboard focus after a prior mouse focus', async () => {
+      const { container } = render(CkPromptInput);
+      const textarea = screen.getByRole('textbox');
+
+      // First interaction: mouse click → no highlight.
+      await fireEvent.pointerDown(textarea);
+      await fireEvent.focus(textarea);
+      expect(container.querySelector('form')?.className).not.toContain(
+        HIGHLIGHT_CLASS,
+      );
+      await fireEvent.blur(textarea);
+
+      // Second interaction: tab in (focus with no preceding pointerdown). The
+      // pointer flag must have reset, so the highlight returns.
+      await fireEvent.focus(textarea);
+      expect(container.querySelector('form')?.className).toContain(
+        HIGHLIGHT_CLASS,
+      );
+    });
+
+    it('is not misclassified by a pointerdown inside an already-focused field', async () => {
+      const { container } = render(CkPromptInput);
+      const textarea = screen.getByRole('textbox');
+
+      // Keyboard focus → highlight on.
+      await fireEvent.focus(textarea);
+      expect(container.querySelector('form')?.className).toContain(
+        HIGHLIGHT_CLASS,
+      );
+
+      // Click inside the already-focused field: pointerdown fires with no
+      // following focus, which would otherwise leave the pointer flag stale.
+      await fireEvent.pointerDown(textarea);
+
+      // Blur then keyboard-focus again — the stale flag must not suppress it.
+      await fireEvent.blur(textarea);
+      await fireEvent.focus(textarea);
+      expect(container.querySelector('form')?.className).toContain(
+        HIGHLIGHT_CLASS,
+      );
+    });
+  });
+
   // The form switches between compact (single-row, rounded-3xl) and stacked
   // (multi-row, rounded-2xl) layouts based on (a) the presence of the
   // `toolbar-top` slot and (b) whether the textarea content exceeds one line.

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

@@ -657,8 +657,8 @@ function onSubmit(value: string): void {
  * End-to-end composition matching the Figma "Prompt field" spec: file
  * attachments via the `+` button and drag-and-drop, model selection next to
  * the send button, and a hallucination disclaimer in the footer. File chips
- * collapse to a popover once more than three are attached (`CkFileItemsList`
- * default).
+ * collapse to a popover once they no longer fit the prompt field's width
+ * (`CkFileItemsList` keeps each chip at least `minItemWidth` wide).
  */
 export const WithUploadAndModelSelection: Story = {
   render: () => ({
@@ -955,10 +955,10 @@ function removeFile(id: CkFileEntry['id']) {
 </template>`;
 
 /**
- * Five attached files — past the default `maxInline=3` threshold of
- * `CkFileItemsList`, so the list collapses to a single popover trigger
- * labeled "5 files". Click it to inspect / remove the individual items.
- * The toolbar-left `+` menu stays available so users can keep adding more.
+ * Five attached files — more than fit inline at the prompt field's width, so
+ * `CkFileItemsList` collapses to a single popover trigger labeled "5 files".
+ * Click it to inspect / remove the individual items. The toolbar-left `+` menu
+ * stays available so users can keep adding more.
  */
 export const WithCollapsedFileChips: Story = {
   render: () => ({

package/src/components/base/CkPromptInput/CkPromptInput.vue

@@ -14,13 +14,8 @@ import {
 
 defineOptions({ name: 'CkPromptInput' });
 
-// Pixel height of one rendered line — must match the textarea's `leading-6`
-// (24 px). Used to derive how many lines the current content occupies.
-const LINE_HEIGHT = 24;
-
 // Cap the textarea at 6 visible lines; content beyond that scrolls inside.
 const MAX_LINES = 6;
-const MAX_HEIGHT = LINE_HEIGHT * MAX_LINES;
 
 const props = withDefaults(defineProps<CkPromptInputProps>(), {
   modelValue: '',
@@ -84,19 +79,25 @@ function adjustHeight(): void {
     return;
   }
 
+  // Line height is fluid (it scales with the container via `clamp()`), so read
+  // the resolved px value from the DOM instead of a hard-coded constant — the
+  // 6-line cap and the 2-line latch threshold both depend on it.
+  const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24;
+  const maxHeight = lineHeight * MAX_LINES;
+
   // Collapse to natural content height first so the next scrollHeight read
   // reflects what the content needs, not what the inline height is forcing.
   el.style.height = 'auto';
   const measured = el.scrollHeight;
-  el.style.height = `${Math.min(measured, MAX_HEIGHT)}px`;
+  el.style.height = `${Math.min(measured, maxHeight)}px`;
 
   // Latch only on a *real* second line: either explicit newline OR scrollHeight
-  // ≥ 2 × line-height. Using `Math.round` on a borderline 36 px (sub-pixel
-  // emoji/CJK rendering on Chromium/Linux) would falsely latch a single line.
+  // ≥ 2 × line-height. Using `Math.round` on a borderline single line (sub-pixel
+  // emoji/CJK rendering on Chromium/Linux) would falsely latch it.
   const hasExplicitNewline = props.modelValue.includes('\n');
   if (
     !isMultiLine.value &&
-    (hasExplicitNewline || measured >= LINE_HEIGHT * 2)
+    (hasExplicitNewline || measured >= lineHeight * 2)
   ) {
     isMultiLine.value = true;
   }
@@ -124,6 +125,28 @@ function focus(): void {
   textareaRef.value?.focus();
 }
 
+// Highlight (border + ring) should appear for keyboard navigation only, not
+// mouse clicks. `:focus-visible` can't express this on a textarea — browsers
+// always treat text fields as focus-visible since they take keyboard input —
+// so we track the focus origin ourselves: a pointerdown immediately preceding
+// a focus means the mouse caused it, so suppress the highlight.
+const isKeyboardFocused = ref(false);
+let focusedByPointer = false;
+
+function onPointerDown(): void {
+  focusedByPointer = true;
+}
+
+function onFocus(): void {
+  isKeyboardFocused.value = !focusedByPointer;
+  focusedByPointer = false;
+}
+
+function onBlur(): void {
+  isKeyboardFocused.value = false;
+  focusedByPointer = false;
+}
+
 watch(
   () => props.modelValue,
   () => nextTick(adjustHeight),
@@ -134,11 +157,14 @@ defineExpose({ focus, submit });
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="ck-prompt-root flex flex-col gap-2">
     <form
       :class="[
-        'ck-prompt-form border-border-surface-default bg-background-input-strong [&:has(textarea:focus)]:border-border-surface-focus-ring [&:has(textarea:focus)]:ring-border-surface-focus-ring/40 min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] [&:has(textarea:focus)]:ring-2',
+        'border-border-surface-default bg-background-input-strong  min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ',
         hasMultipleRows ? 'rounded-2xl' : 'rounded-3xl',
+        isKeyboardFocused
+          ? 'border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2'
+          : 'ck-prompt-form',
       ]"
       :style="{
         gridTemplateColumns: 'auto 1fr auto',
@@ -164,11 +190,14 @@ defineExpose({ focus, submit });
         :disabled="disabled"
         style="grid-area: input"
         :class="[
-          'ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans text-base font-normal leading-6 max-h-36 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60',
+          'ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans font-normal focus:outline-none disabled:cursor-not-allowed disabled:opacity-60',
           isMultiLine ? 'pl-3 pr-3' : 'px-0',
         ]"
         @input="onInput"
         @keydown="onKeydown"
+        @pointerdown="onPointerDown"
+        @focus="onFocus"
+        @blur="onBlur"
       />
       <div :class="[!isMultiLine && 'pl-4']" style="grid-area: right">
         <slot
@@ -184,15 +213,37 @@ defineExpose({ focus, submit });
 </template>
 
 <style scoped>
+/* Fluid mobile↔desktop sizing. Sizes interpolate against the component's own
+   container width (`cqw`), gradually transforming between the Figma Mobile
+   variant (≤320px container) and the Desktop variant (≥768px container) rather
+   than snapping at a breakpoint. Range = 768 − 320 = 448; each term is
+   `clamp(mobile, calc(mobile + (100cqw − 320px) × span / 448), desktop)`. */
+.ck-prompt-root {
+  container-type: inline-size;
+}
+
 /* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
    `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
    utility from preset-wind4 uses a cold black-based shadow instead. */
 .ck-prompt-form {
+  /* 8px (mobile) → 16px (desktop) */
+  padding: clamp(8px, calc(8px + (100cqw - 320px) * 8 / 448), 16px);
+  /* 52px → 68px (= 36px button + 2× padding) */
+  min-height: clamp(52px, calc(52px + (100cqw - 320px) * 16 / 448), 68px);
   box-shadow:
     0 4px 6px -2px rgba(112, 95, 90, 0.1),
     0 6px 14px -2px rgba(248, 94, 43, 0.05);
 }
 
+/* 14px → 16px font, 20px → 24px line-height, 120px → 144px (6 lines) cap.
+   `adjustHeight` reads the resolved line-height from the DOM so the auto-grow
+   math tracks these fluid values. */
+.ck-prompt-textarea {
+  font-size: clamp(14px, calc(14px + (100cqw - 320px) * 2 / 448), 16px);
+  line-height: clamp(20px, calc(20px + (100cqw - 320px) * 4 / 448), 24px);
+  max-height: clamp(120px, calc(120px + (100cqw - 320px) * 24 / 448), 144px);
+}
+
 /* Slim styled scrollbar for the multi-line textarea — matches Figma's 4 px
    muted-default track. Firefox uses the native `scrollbar-*` properties;
    Chromium/WebKit needs the `::-webkit-scrollbar` pseudo-elements. */

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

@@ -4,14 +4,14 @@
  * slots and keyboard submission (Enter to submit, Shift+Enter for newline).
  * The form layout adapts between a compact single-row variant (large 3xl
  * radius) and a stacked multi-row variant (2xl radius) automatically — driven
- * by content height and whether `toolbar-top` is filled. Use when you need
- * full control over the prompt layout; for a turnkey chat input use `CkInput`
- * instead.
+ * by content height and whether `toolbar-top` is filled. Compose it with
+ * `CkPromptSendButton`, `CkPromptStopButton`, and `CkPromptInputDisclaimer`
+ * to build a complete chat input.
  *
  * @category Form Inputs
  * @useCases raw chat prompt textarea, custom prompt toolbar, auto-growing compose box, file-attachment chip row, multi-line chat input, keyboard submit
  * @keywords prompt, input, textarea, chat, compose, submit, v-model, auto-grow, multi-line, toolbar
- * @related CkInput, CkPromptSendButton, CkPromptStopButton, CkPromptMenuButton, CkPromptInputDisclaimer, CkFileItemsList
+ * @related CkPromptSendButton, CkPromptStopButton, CkPromptMenuButton, CkPromptInputDisclaimer, CkFileItemsList
  */
 export interface CkPromptInputProps {
   /**

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

@@ -33,7 +33,7 @@ describe('CkPromptInputDisclaimer', () => {
 
     const el = screen.getByText('Disclaimer');
     expect(el.tagName).toBe('P');
-    expect(el.className).toContain('text-core-content-tertiary');
+    expect(el.className).toContain('text-content-on-surface-muted');
     expect(el.className).toContain('text-center');
     expect(el.className).toContain('text-xs');
   });

package/src/components/base/CkPromptInputDisclaimer/CkPromptInputDisclaimer.vue

@@ -9,7 +9,7 @@ defineProps<CkPromptInputDisclaimerProps>();
 <template>
   <p
     v-if="$slots.default || text"
-    class="text-core-content-tertiary text-center text-xs leading-3.5"
+    class="text-center text-content-on-surface-muted text-xs font-normal leading-4"
   >
     <slot>{{ text }}</slot>
   </p>

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

@@ -6,7 +6,7 @@
  * @category Feedback
  * @useCases chat disclaimer, ai may make mistakes, prompt footnote, small help text under input
  * @keywords disclaimer, notice, footer, help text, ai, prompt
- * @related CkInput, CkPromptInput
+ * @related CkPromptInput, CkPromptSendButton
  */
 export interface CkPromptInputDisclaimerProps {
   /**

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

@@ -7,7 +7,7 @@
  * @category Actions
  * @useCases send message button, submit prompt, primary chat send action, loading send button, disabled send button
  * @keywords prompt, send, submit, button, icon, loading, brand
- * @related CkPromptInput, CkPromptStopButton, CkInput, CkSendIcon
+ * @related CkPromptInput, CkPromptStopButton, CkSendIcon
  */
 export interface CkPromptSendButtonProps {
   /**

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

@@ -8,7 +8,7 @@
  * @category Actions
  * @useCases stop assistant generation, cancel streaming reply, abort in-flight request, halt llm response
  * @keywords stop, cancel, abort, prompt, button, icon, streaming, secondary
- * @related CkPromptSendButton, CkPromptMenuButton, CkPromptInput, CkInput, CkStopIcon
+ * @related CkPromptSendButton, CkPromptMenuButton, CkPromptInput, CkStopIcon
  */
 export interface CkPromptStopButtonProps {
   /**

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

@@ -0,0 +1,49 @@
+import CkRegenerateMessageButton from './CkRegenerateMessageButton.vue';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+describe('CkRegenerateMessageButton', () => {
+  it('renders an accessible button with the default label', () => {
+    render(CkRegenerateMessageButton);
+
+    expect(
+      screen.getByRole('button', { name: 'Regenerate response' }),
+    ).toBeInTheDocument();
+  });
+
+  it('uses a custom aria-label when provided', () => {
+    render(CkRegenerateMessageButton, {
+      props: { ariaLabel: 'Try again' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Try again' }),
+    ).toBeInTheDocument();
+  });
+
+  it('emits regenerate when clicked', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkRegenerateMessageButton);
+
+    await user.click(
+      screen.getByRole('button', { name: 'Regenerate response' }),
+    );
+
+    expect(emitted('regenerate')).toEqual([[]]);
+  });
+
+  it('does not emit regenerate when disabled', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkRegenerateMessageButton, {
+      props: { disabled: true },
+    });
+
+    const button = screen.getByRole('button', { name: 'Regenerate response' });
+    expect(button).toBeDisabled();
+
+    await user.click(button);
+
+    expect(emitted('regenerate')).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,63 @@
+import CkRegenerateMessageButton from './CkRegenerateMessageButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkRegenerateMessageButton> = {
+  title: 'Base/CkRegenerateMessageButton',
+  component: CkRegenerateMessageButton,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled and ignores clicks.',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible label and tooltip content for the button.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="max-width: 640px; margin: 0 auto; padding: 24px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkRegenerateMessageButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkRegenerateMessageButton @regenerate="() => {}" />
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkRegenerateMessageButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkRegenerateMessageButton disabled />
+</template>`;
+
+/**
+ * Default regenerate action. Clicking emits a `regenerate` event so the host
+ * can request a new response for the message.
+ */
+export const Default: Story = {
+  args: {},
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Disabled state — clicks are ignored and the button appears inactive.
+ * Use while a message is still streaming or in an error state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};

package/src/components/base/CkRegenerateMessageButton/CkRegenerateMessageButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CkMessageButton } from '../CkMessageButton';
+import type { CkRegenerateMessageButtonProps } from './types';
+import { UiIcon, UiTooltip } from '@aleph-alpha/ui-library';
+
+defineOptions({
+  name: 'CkRegenerateMessageButton',
+});
+
+const props = withDefaults(defineProps<CkRegenerateMessageButtonProps>(), {
+  disabled: false,
+  ariaLabel: 'Regenerate response',
+});
+
+const emit = defineEmits<{
+  regenerate: [];
+}>();
+
+function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('regenerate');
+}
+</script>
+
+<template>
+  <UiTooltip
+    :content="ariaLabel"
+    side="bottom"
+    align="center"
+    :delay-duration="0"
+  >
+    <CkMessageButton
+      v-bind="{ ariaLabel }"
+      :disabled="disabled"
+      @click="handleClick"
+    >
+      <UiIcon name="repeat" :size="16" aria-hidden="true" />
+    </CkMessageButton>
+  </UiTooltip>
+</template>

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

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