@aleph-alpha/chat-kit 4.0.0 → 5.0.0

package/src/components/base/CkFileItemsList/CkFileItemsList.vue

@@ -8,7 +8,7 @@ import {
   UiProgress,
   type UiFileItemSize,
 } from '@aleph-alpha/ui-library';
-import { computed, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import CkFileItemRow from './CkFileItemRow.vue';
 import type {
   CkFileEntry,
@@ -21,7 +21,8 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<CkFileItemsListProps>(), {
-  maxInline: 3,
+  minItemWidth: 200,
+  maxItemWidth: 256,
   size: 'small',
   isRemovable: false,
   removeLabel: 'Remove file',
@@ -48,7 +49,42 @@ defineSlots<{
   }) => unknown;
 }>();
 
-const isCollapsed = computed(() => props.files.length > props.maxInline);
+// Gap between inline items (`gap-2` => 0.5rem => 8px).
+const ITEM_GAP = 8;
+
+const rootRef = ref<HTMLElement | null>(null);
+const containerWidth = ref(0);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  const el = rootRef.value;
+  if (!el) return;
+  containerWidth.value = el.clientWidth;
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerWidth.value = entry.contentRect.width;
+      }
+    });
+    resizeObserver.observe(el);
+  }
+});
+
+onBeforeUnmount(() => resizeObserver?.disconnect());
+
+// Number of items that fit at the current width while each stays at least
+// `minItemWidth` wide. There is no upper cap — as many items as fit are kept
+// inline. Falls back to showing every file before the first measurement (SSR /
+// initial render / environments without ResizeObserver) so the list never
+// flashes collapsed; the observer corrects it on mount.
+const inlineCapacity = computed(() => {
+  const width = containerWidth.value;
+  if (!width) return props.files.length;
+  const fit = Math.floor((width + ITEM_GAP) / (props.minItemWidth + ITEM_GAP));
+  return Math.max(1, fit);
+});
+
+const isCollapsed = computed(() => props.files.length > inlineCapacity.value);
 const isOpen = ref(false);
 
 function isRowDisabled(file: CkFileEntry): boolean {
@@ -120,123 +156,130 @@ function handleRowClick(file: CkFileEntry, event: MouseEvent) {
 </script>
 
 <template>
-  <ul
-    v-if="!isCollapsed"
-    data-slot="file-items-list"
-    class="m-0 flex w-full min-w-0 list-none flex-wrap items-center gap-2 p-0"
-    :aria-label="listLabel"
-  >
-    <li
-      v-for="file in files"
-      :key="file.id"
-      class="min-w-0 max-w-64 flex-1 basis-0"
-      @click="handleRowClick(file, $event)"
+  <div ref="rootRef" class="w-full min-w-0">
+    <ul
+      v-if="!isCollapsed"
+      data-slot="file-items-list"
+      class="m-0 flex w-full min-w-0 list-none flex-wrap items-center gap-2 p-0"
+      :aria-label="listLabel"
     >
-      <CkFileItemRow
-        :file="file"
-        :size="size"
-        :is-removable="isRemovable"
-        :remove-label="removeLabel"
-        :disabled="isRowDisabled(file)"
-        @remove="handleRemove(file)"
-      >
-        <template #default="bindings">
-          <slot name="item" v-bind="bindings" />
-        </template>
-      </CkFileItemRow>
-    </li>
-  </ul>
-
-  <UiPopover v-else v-model:open="isOpen">
-    <UiPopoverTrigger as-child>
-      <button
-        type="button"
-        data-slot="file-items-list-trigger"
-        :disabled="disabled"
-        class="relative flex w-full max-w-64 min-w-0 items-center gap-3 rounded-xl bg-background-surface-muted-subtle text-left transition-colors hover:bg-background-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background-surface-muted-subtle"
-        :class="size === 'small' ? 'p-2' : 'p-3'"
-        :aria-label="resolvedTriggerAriaLabel"
+      <li
+        v-for="file in files"
+        :key="file.id"
+        class="flex-1 basis-0"
+        :style="{
+          minWidth: `${minItemWidth}px`,
+          maxWidth: `${maxItemWidth}px`,
+        }"
+        @click="handleRowClick(file, $event)"
       >
-        <UiFileType
-          v-if="showStatus && hasFailures && !uploadInProgress"
-          :error="true"
-        />
-        <UiFileType v-else icon="paperclip" tone="default" />
-
-        <span
-          v-if="!showStatus"
-          class="min-w-0 flex-1 truncate text-content-on-surface-primary"
-          :class="size === 'small' ? 'label-12-medium' : 'body-14-medium'"
+        <CkFileItemRow
+          :file="file"
+          :size="size"
+          :is-removable="isRemovable"
+          :remove-label="removeLabel"
+          :disabled="isRowDisabled(file)"
+          @remove="handleRemove(file)"
         >
-          {{ resolvedTriggerLabel }}
-        </span>
-        <div v-else class="flex min-w-0 flex-1 flex-col items-start gap-0.5">
+          <template #default="bindings">
+            <slot name="item" v-bind="bindings" />
+          </template>
+        </CkFileItemRow>
+      </li>
+    </ul>
+
+    <UiPopover v-else v-model:open="isOpen">
+      <UiPopoverTrigger as-child>
+        <button
+          type="button"
+          data-slot="file-items-list-trigger"
+          :disabled="disabled"
+          class="relative flex w-full max-w-64 min-w-0 items-center gap-3 rounded-xl bg-background-surface-muted-subtle text-left transition-colors hover:bg-background-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background-surface-muted-subtle"
+          :class="size === 'small' ? 'p-2' : 'p-3'"
+          :aria-label="resolvedTriggerAriaLabel"
+        >
+          <UiFileType
+            v-if="showStatus && hasFailures && !uploadInProgress"
+            :error="true"
+          />
+          <UiFileType v-else icon="paperclip" tone="default" />
+
           <span
-            class="w-full truncate text-content-on-surface-primary"
+            v-if="!showStatus"
+            class="min-w-0 flex-1 truncate text-content-on-surface-primary"
             :class="size === 'small' ? 'label-12-medium' : 'body-14-medium'"
           >
             {{ resolvedTriggerLabel }}
           </span>
-          <UiProgress
-            v-if="uploadInProgress"
-            :model-value="aggregateProgress"
-            class="h-1 w-full"
-            :aria-label="`${resolvedTriggerLabel} upload progress`"
+          <div v-else class="flex min-w-0 flex-1 flex-col items-start gap-0.5">
+            <span
+              class="w-full truncate text-content-on-surface-primary"
+              :class="size === 'small' ? 'label-12-medium' : 'body-14-medium'"
+            >
+              {{ resolvedTriggerLabel }}
+            </span>
+            <UiProgress
+              v-if="uploadInProgress"
+              :model-value="aggregateProgress"
+              class="h-1 w-full"
+              :aria-label="`${resolvedTriggerLabel} upload progress`"
+            />
+            <span
+              v-else-if="hasFailures"
+              class="label-12-medium w-full truncate text-content-on-status-error-inverse"
+            >
+              {{ failedStatusLabel }}
+            </span>
+            <span
+              v-else-if="triggerLabel"
+              class="label-12-medium w-full truncate text-content-on-surface-muted"
+            >
+              {{ countStatusLabel }}
+            </span>
+          </div>
+
+          <UiIcon
+            name="chevron-down"
+            :size="16"
+            aria-hidden="true"
+            class="shrink-0 text-content-on-surface-muted transition-transform"
+            :class="isOpen && 'rotate-180'"
           />
-          <span
-            v-else-if="hasFailures"
-            class="label-12-medium w-full truncate text-content-on-status-error-inverse"
-          >
-            {{ failedStatusLabel }}
-          </span>
-          <span
-            v-else-if="triggerLabel"
-            class="label-12-medium w-full truncate text-content-on-surface-muted"
-          >
-            {{ countStatusLabel }}
-          </span>
-        </div>
-
-        <UiIcon
-          name="chevron-down"
-          :size="16"
-          aria-hidden="true"
-          class="shrink-0 text-content-on-surface-muted transition-transform"
-          :class="isOpen && 'rotate-180'"
-        />
-      </button>
-    </UiPopoverTrigger>
-
-    <UiPopoverContent
-      align="start"
-      :side-offset="4"
-      :class="['w-64 p-2', popoverClass]"
-    >
-      <ul
-        data-slot="file-items-list-collapsed"
-        class="m-0 flex list-none flex-col gap-2 p-0"
-        :aria-label="listLabel"
+        </button>
+      </UiPopoverTrigger>
+
+      <UiPopoverContent
+        align="start"
+        :side-offset="4"
+        :class="['w-64 p-2', popoverClass]"
       >
-        <li
-          v-for="file in files"
-          :key="file.id"
-          class="min-w-0 max-w-64"
-          @click="handleRowClick(file, $event)"
+        <ul
+          data-slot="file-items-list-collapsed"
+          class="m-0 flex list-none flex-col gap-2 p-0"
+          :aria-label="listLabel"
         >
-          <CkFileItemRow
-            :file="file"
-            :size="size"
-            :is-removable="isRemovable"
-            :remove-label="removeLabel"
-            :disabled="isRowDisabled(file)"
-            @remove="handleRemove(file)"
+          <li
+            v-for="file in files"
+            :key="file.id"
+            class="min-w-0"
+            :style="{ maxWidth: `${maxItemWidth}px` }"
+            @click="handleRowClick(file, $event)"
           >
-            <template #default="bindings">
-              <slot name="item" v-bind="bindings" />
-            </template>
-          </CkFileItemRow>
-        </li>
-      </ul>
-    </UiPopoverContent>
-  </UiPopover>
+            <CkFileItemRow
+              :file="file"
+              :size="size"
+              :is-removable="isRemovable"
+              :remove-label="removeLabel"
+              :disabled="isRowDisabled(file)"
+              @remove="handleRemove(file)"
+            >
+              <template #default="bindings">
+                <slot name="item" v-bind="bindings" />
+              </template>
+            </CkFileItemRow>
+          </li>
+        </ul>
+      </UiPopoverContent>
+    </UiPopover>
+  </div>
 </template>

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

@@ -25,8 +25,9 @@ export interface CkFileEntry {
 }
 
 /**
- * Horizontal list of file attachments; collapses to a popover once the
- * count exceeds `maxInline`.
+ * Horizontal list of file attachments. Renders as many items inline as fit the
+ * available width — each kept between `minItemWidth` and `maxItemWidth` wide —
+ * and collapses into a popover once they no longer fit.
  *
  * @category Form Inputs
  * @useCases user message attachments, prompt input previews, chat file row
@@ -36,8 +37,20 @@ export interface CkFileEntry {
 export interface CkFileItemsListProps {
   /** Files to render. Order is preserved. */
   files: CkFileEntry[];
-  /** @default 3 */
-  maxInline?: number;
+  /**
+   * Minimum width (px) an inline item may occupy. As the wrapper narrows, fewer
+   * items stay inline (each kept at least this wide) until the list collapses
+   * into the popover. Lower values keep more items inline on narrow widths.
+   * @default 200
+   */
+  minItemWidth?: number;
+  /**
+   * Maximum width (px) an inline item may grow to. Items never stretch beyond
+   * this width; any extra horizontal space is left unused. There is no cap on
+   * the number of inline items as long as they fit the wrapper.
+   * @default 256
+   */
+  maxItemWidth?: number;
   /** @default 'small' */
   size?: UiFileItemSize;
   /** Show a remove control on every row. @default false */

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

@@ -0,0 +1,50 @@
+import CkHeaderActivityButton from './CkHeaderActivityButton.vue';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+describe('CkHeaderActivityButton', () => {
+  it('renders the slot content as the label', () => {
+    render(CkHeaderActivityButton, {
+      slots: { default: '1 tool, 42 sources' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: /1 tool, 42 sources/ }),
+    ).toBeInTheDocument();
+  });
+
+  it('uses the explicit ariaLabel when provided', () => {
+    render(CkHeaderActivityButton, {
+      props: { ariaLabel: 'Show activity' },
+      slots: { default: '1 tool' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Show activity' }),
+    ).toBeInTheDocument();
+  });
+
+  it('emits click when pressed', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkHeaderActivityButton, {
+      slots: { default: 'Activity' },
+    });
+
+    await user.click(screen.getByRole('button'));
+
+    expect(emitted('click')).toHaveLength(1);
+  });
+
+  it('does not emit click when disabled', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkHeaderActivityButton, {
+      props: { disabled: true },
+      slots: { default: 'Activity' },
+    });
+
+    await user.click(screen.getByRole('button'));
+
+    expect(emitted('click')).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,102 @@
+import CkHeaderActivityButton from './CkHeaderActivityButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkHeaderActivityButton> = {
+  title: 'Base/CkHeaderActivityButton',
+  component: CkHeaderActivityButton,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button and prevents the `click` event.',
+    },
+    ariaLabel: {
+      control: 'text',
+      description:
+        'Accessible label. Falls back to the label text when omitted.',
+    },
+    icon: {
+      control: 'text',
+      description:
+        "Trailing Lucide icon name. Set to '' to hide. Defaults to 'arrow-right'.",
+    },
+  },
+  decorators: [
+    () => ({
+      template: '<div style="padding: 24px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkHeaderActivityButton } from '@aleph-alpha/chat-kit';
+
+function openActivity() {
+  // open the activity / chain-of-thought panel
+}
+</script>
+
+<template>
+  <CkHeaderActivityButton @click="openActivity">
+    1 tool, 42 sources
+  </CkHeaderActivityButton>
+</template>`;
+
+/**
+ * Default activity button: a short label followed by the trailing arrow icon.
+ * It emits a generic `click` and performs no action on its own.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { CkHeaderActivityButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CkHeaderActivityButton v-bind="args">
+        1 tool, 42 sources
+      </CkHeaderActivityButton>
+    `,
+  }),
+  args: { disabled: false, icon: 'arrow-right' },
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Without a trailing icon — pass an empty `icon` to render the label only.
+ */
+export const WithoutIcon: Story = {
+  render: (args) => ({
+    components: { CkHeaderActivityButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CkHeaderActivityButton v-bind="args">
+        3 sources
+      </CkHeaderActivityButton>
+    `,
+  }),
+  args: { icon: '' },
+};
+
+/**
+ * Disabled state: the button is non-interactive and does not emit `click`.
+ */
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { CkHeaderActivityButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CkHeaderActivityButton v-bind="args">
+        1 tool, 42 sources
+      </CkHeaderActivityButton>
+    `,
+  }),
+  args: { disabled: true },
+};

package/src/components/base/CkHeaderActivityButton/CkHeaderActivityButton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { CkHeaderActivityButtonProps } from './types';
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library';
+
+defineOptions({
+  name: 'CkHeaderActivityButton',
+});
+
+const props = withDefaults(defineProps<CkHeaderActivityButtonProps>(), {
+  disabled: false,
+  icon: 'arrow-right',
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('click');
+}
+</script>
+
+<template>
+  <UiButton
+    v-bind="{ ariaLabel }"
+    :disabled="disabled"
+    variant="ghost"
+    size="sm"
+    class="label-12-medium text-content-on-surface-muted gap-1 rounded-[3px] px-2 py-1"
+    @click="handleClick"
+  >
+    <slot />
+    <UiIcon v-if="icon" :name="icon" :size="12" aria-hidden="true" />
+  </UiButton>
+</template>

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

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

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/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.