@aleph-alpha/chat-kit 3.3.0 → 5.0.0

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

@@ -0,0 +1,21 @@
+/**
+ * Full-width header row for an assistant (agent) message. Owns the agent icon,
+ * a header text and an optional activity button, and is intended to be passed
+ * into the `header` slot of `CkAgentMessage`.
+ *
+ * It has two visual states, driven purely by whether the `activity` slot is
+ * provided:
+ * - **with `activity`** — vertical padding and a bottom border separate the
+ *   header from the message body;
+ * - **without `activity`** — a compact icon + text row with no padding or
+ *   border.
+ *
+ * Slots: `icon` (leading agent avatar/icon), default (header text, ellipsised
+ * on overflow), `activity` (typically a `CkHeaderActivityButton`).
+ *
+ * @category Messages
+ * @useCases agent message header, assistant turn header, chain-of-thought summary row, activity indicator row
+ * @keywords agent, assistant, message, header, icon, activity, conversation
+ * @related CkAgentMessage, CkHeaderActivityButton, CkConversation
+ */
+export type CkAgentMessageHeaderProps = Record<string, never>;

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

@@ -100,6 +100,18 @@ export const WithoutLink: Story = {
   args: { url: undefined },
 };
 
+/**
+ * A very long file name truncates with an ellipsis inside the hover card while
+ * the external-link action stays pinned to the right of the truncated name; the
+ * full name is exposed on hover via the `title` attribute.
+ */
+export const LongFileName: Story = {
+  args: {
+    fileName:
+      'Annual-Strategy-And-Operational-Review-And-Lessons-Learned-Digital-Transformation-Phase-1-FY2026-Final-APPROVED-v3.pdf',
+  },
+};
+
 /**
  * Non-paginated source — the card omits the page footer.
  */

package/src/components/base/CkCitation/CkCitation.vue

@@ -43,9 +43,11 @@ const triggerLabel = computed(
 const CLOSE_DELAY_MS = 80;
 
 const open = ref(false);
-// Tracks whether the current open was driven by the pointer (hover) rather than
-// the keyboard, so we can suppress the popover's focus management for hover only.
-const isPointerInteraction = ref(false);
+// Whether the current open session was initiated by the pointer (hover) rather
+// than the keyboard. Persists for the whole session — including the close — so
+// we can fully suppress the popover's focus management for hover while keeping
+// it for keyboard users.
+const openedByPointer = ref(false);
 let closeTimer: ReturnType<typeof setTimeout> | undefined;
 
 function show(): void {
@@ -65,20 +67,41 @@ function scheduleHide(): void {
 }
 
 function onPointerEnter(): void {
-  isPointerInteraction.value = true;
+  // Only mark the session pointer-driven on a closed → open transition. A stray
+  // mouseenter while the card is already open (e.g. it was opened via keyboard,
+  // then the pointer drifts over it) must not flip the flag, or onCloseAutoFocus
+  // would wrongly skip restoring focus and leave focus lost on close.
+  if (!open.value) openedByPointer.value = true;
   show();
 }
 
+// Don't reset `openedByPointer` here — the close fires one tick later
+// (CLOSE_DELAY_MS), and `onCloseAutoFocus` still needs to know the session was
+// hover-driven so it can skip restoring focus to the marker.
 function onPointerLeave(): void {
-  isPointerInteraction.value = false;
   scheduleHide();
 }
 
-// Suppress auto-focus for hover opens only (so hovering never steals focus or
-// scrolls). Keyboard opens keep it, moving focus into the card so the source
-// action is reachable.
+// Enter/Space activate the marker (opening the card) via keyboard; mark those
+// sessions keyboard-driven so focus management is restored (into the card on
+// open, back to the marker on close/Escape). Other keys (Tab, arrows) must not
+// flip the pointer/keyboard distinction.
+function onTriggerKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Enter' || event.key === ' ') {
+    openedByPointer.value = false;
+  }
+}
+
+// For hover sessions, suppress the popover's focus management entirely: don't
+// pull focus into the card on open (it would steal focus / scroll), and don't
+// yank focus back to the marker on close. That close-time refocus is what
+// painted a stray focus-visible ring on the marker you'd just hovered away from.
 function onOpenAutoFocus(event: Event): void {
-  if (isPointerInteraction.value) event.preventDefault();
+  if (openedByPointer.value) event.preventDefault();
+}
+
+function onCloseAutoFocus(event: Event): void {
+  if (openedByPointer.value) event.preventDefault();
 }
 
 // Close once focus leaves the card entirely (keyboard users tabbing out). Moving
@@ -108,6 +131,7 @@ onBeforeUnmount(() => {
             ? 'bg-background-accent-soft text-black'
             : 'bg-background-accent-yellow text-background-status-warning',
         ]"
+        @keydown="onTriggerKeydown"
         @mouseenter="onPointerEnter"
         @mouseleave="onPointerLeave"
       >
@@ -119,6 +143,7 @@ onBeforeUnmount(() => {
       :side-offset="8"
       class="w-auto border-0 bg-transparent p-0 shadow-none"
       @open-auto-focus="onOpenAutoFocus"
+      @close-auto-focus="onCloseAutoFocus"
       @mouseenter="onPointerEnter"
       @mouseleave="onPointerLeave"
       @focusin="show"

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

@@ -92,10 +92,11 @@ export const MinimalSnippetOnly: Story = {
 };
 
 /**
- * A long file name truncates with an ellipsis (the badge and external-link
- * action stay pinned, the card keeps its width); the full name stays available
- * on hover via the `title` attribute. The `truncate` behaviour holds for any
- * length, including a single unbroken token with no separators.
+ * A long file name truncates with an ellipsis while the external-link action
+ * stays pinned to the right of the (truncated) name and the card keeps its
+ * width; the full name stays available on hover via the `title` attribute. The
+ * `truncate` behaviour holds for any length, including a single unbroken token
+ * with no separators.
  */
 export const LongFileName: Story = {
   args: {

package/src/components/base/CkCitationCard/CkCitationCard.vue

@@ -42,10 +42,10 @@ function handleOpen(): void {
   <div
     class="ck-citation-card flex w-[22.5rem] max-w-[90vw] flex-col gap-2 rounded-md bg-background-surface-floating px-6 pb-6 pt-4 shadow-md"
   >
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-2">
       <UiFileType :filename="fileName" class="shrink-0" />
       <p
-        class="min-w-0 flex-1 truncate text-sm font-medium text-content-on-surface-primary"
+        class="min-w-0 truncate text-sm font-medium text-content-on-surface-primary"
         :title="fileName"
       >
         {{ fileName }}

package/src/components/base/CkConversationLayout/CkConversationLayout.vue

@@ -181,7 +181,7 @@ watch(
 <template>
   <div
     ref="scrollContainerRef"
-    class="relative flex flex-col gap-4 overflow-y-auto"
+    class="relative flex flex-col gap-8 overflow-y-auto"
     @scroll="handleScroll"
   >
     <div

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/CkFileItemsList/CkFileItemsList.spec.ts

@@ -1,6 +1,6 @@
 import { render, screen, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import CkFileItemsList from './CkFileItemsList.vue';
 import type { CkFileEntry } from './types';
 
@@ -11,8 +11,34 @@ const files: CkFileEntry[] = [
   { id: 'd', filename: 'archive.zip' },
 ];
 
+// The inline capacity is derived purely from the measured container width: how
+// many items fit at `minItemWidth` each. JSDOM has no layout, so we stub
+// `clientWidth` (read in `onMounted`). The default 700px fits 3 inline items at
+// the default 200px `minItemWidth`, reproducing the typical "3 inline, rest
+// collapsed" behaviour for these specs.
+//
+// Note: width is measured in `onMounted`, which updates reactively *after* the
+// initial render. Assertions that depend on the *narrowed* (width-collapsed)
+// state must therefore await the re-render (e.g. via `findByRole`) rather than
+// querying synchronously.
+let clientWidthSpy: ReturnType<typeof vi.spyOn>;
+
+function setContainerWidth(px: number) {
+  clientWidthSpy.mockReturnValue(px);
+}
+
+beforeEach(() => {
+  clientWidthSpy = vi
+    .spyOn(Element.prototype, 'clientWidth', 'get')
+    .mockReturnValue(700);
+});
+
+afterEach(() => {
+  clientWidthSpy.mockRestore();
+});
+
 describe('CkFileItemsList', () => {
-  it('renders all files inline when count <= maxInline', () => {
+  it('renders all files inline when they fit the available width', () => {
     const { container } = render(CkFileItemsList, {
       props: { files: files.slice(0, 3) },
     });
@@ -25,34 +51,82 @@ describe('CkFileItemsList', () => {
     ).toBeNull();
   });
 
-  it('collapses into a popover trigger when count exceeds maxInline', () => {
+  it('collapses into a popover trigger when the files no longer fit', async () => {
     render(CkFileItemsList, { props: { files } });
 
-    const trigger = screen.getByRole('button', { name: /4 files/i });
+    const trigger = await screen.findByRole('button', { name: /4 files/i });
     expect(trigger).toBeInTheDocument();
     expect(trigger).toHaveTextContent('4 files');
   });
 
-  it('uses an explicit triggerLabel when provided', () => {
+  it('keeps every file inline on a wide wrapper (no upper cap)', () => {
+    setContainerWidth(2000);
+    const many: CkFileEntry[] = [
+      ...files,
+      { id: 'e', filename: 'slides.key' },
+      { id: 'f', filename: 'budget.xlsx' },
+    ];
+
+    const { container } = render(CkFileItemsList, { props: { files: many } });
+
+    const list = container.querySelector('[data-slot="file-items-list"]');
+    expect(list?.querySelectorAll('li')).toHaveLength(6);
+    expect(
+      container.querySelector('[data-slot="file-items-list-trigger"]'),
+    ).toBeNull();
+  });
+
+  it('reduces the inline count as the wrapper narrows', async () => {
+    // 360px fits only 1 item at the default 200px minItemWidth, so 3 files no
+    // longer fit and collapse. The narrowing is applied after the onMounted
+    // measurement, so await the collapsed trigger rather than querying
+    // synchronously.
+    setContainerWidth(360);
+
+    const { container } = render(CkFileItemsList, {
+      props: { files: files.slice(0, 3) },
+    });
+
+    expect(
+      await screen.findByRole('button', { name: /3 files/i }),
+    ).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="file-items-list"]')).toBeNull();
+  });
+
+  it('constrains inline item width between minItemWidth and maxItemWidth', () => {
+    const { container } = render(CkFileItemsList, {
+      props: { files: files.slice(0, 2), minItemWidth: 140, maxItemWidth: 200 },
+    });
+
+    const item = container.querySelector<HTMLElement>(
+      '[data-slot="file-items-list"] li',
+    );
+    expect(item?.style.minWidth).toBe('140px');
+    expect(item?.style.maxWidth).toBe('200px');
+  });
+
+  it('uses an explicit triggerLabel when provided', async () => {
     render(CkFileItemsList, {
       props: { files, triggerLabel: '+1 more attachment' },
     });
 
-    expect(screen.getByRole('button')).toHaveTextContent('+1 more attachment');
+    expect(await screen.findByRole('button')).toHaveTextContent(
+      '+1 more attachment',
+    );
   });
 
-  it('keeps a single-line trigger (no count subtitle) when showStatus is off', () => {
+  it('keeps a single-line trigger (no count subtitle) when showStatus is off', async () => {
     render(CkFileItemsList, {
       props: { files, triggerLabel: 'Uploaded documents' },
     });
 
-    const trigger = screen.getByRole('button');
+    const trigger = await screen.findByRole('button');
     expect(trigger).toHaveTextContent('Uploaded documents');
     expect(trigger).not.toHaveTextContent('4 files');
   });
 
   describe('showStatus summary on the collapsed trigger', () => {
-    it('summarises the number of failed uploads in an error line', () => {
+    it('summarises the number of failed uploads in an error line', async () => {
       const withFailures: CkFileEntry[] = [
         { id: 'a', filename: 'a.pdf', error: 'Upload failed' },
         { id: 'b', filename: 'b.md', error: 'Upload failed' },
@@ -68,13 +142,13 @@ describe('CkFileItemsList', () => {
         },
       });
 
-      const trigger = screen.getByRole('button', {
+      const trigger = await screen.findByRole('button', {
         name: /Uploading documents, 2 uploads failed/i,
       });
       expect(trigger).toHaveTextContent('2 uploads failed');
     });
 
-    it('renders an aggregate progress bar while files are uploading', () => {
+    it('renders an aggregate progress bar while files are uploading', async () => {
       const uploading: CkFileEntry[] = [
         { id: 'a', filename: 'a.pdf', progress: 20 },
         { id: 'b', filename: 'b.md', progress: 60 },
@@ -90,10 +164,11 @@ describe('CkFileItemsList', () => {
         },
       });
 
+      await screen.findByRole('button');
       expect(container.querySelector('[data-slot="progress"]')).toBeTruthy();
     });
 
-    it('shows the file count once all uploads succeed', () => {
+    it('shows the file count once all uploads succeed', async () => {
       render(CkFileItemsList, {
         props: {
           files,
@@ -102,7 +177,7 @@ describe('CkFileItemsList', () => {
         },
       });
 
-      const trigger = screen.getByRole('button');
+      const trigger = await screen.findByRole('button');
       expect(trigger).toHaveTextContent('Uploaded documents');
       expect(trigger).toHaveTextContent('4 files');
     });