@aleph-alpha/chat-kit 3.3.0 → 5.0.0

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import CkFileItemsList from './CkFileItemsList.vue';
 import type { CkFileEntry } from './types';
 
@@ -12,12 +12,13 @@ const meta: Meta<typeof CkFileItemsList> = {
     docs: {
       description: {
         component:
-          'Compact horizontal row of file attachments. Renders up to `maxInline` `UiFileItem`s side-by-side; once that threshold is exceeded, the full list collapses into a single popover trigger.',
+          'Compact horizontal row of file attachments. Renders as many `UiFileItem`s inline as fit the available width — each kept between `minItemWidth` and `maxItemWidth` wide — and collapses the full list into a single popover trigger once they no longer fit.',
       },
     },
   },
   argTypes: {
-    maxInline: { control: { type: 'number', min: 1, max: 6, step: 1 } },
+    minItemWidth: { control: { type: 'number', min: 80, max: 320, step: 8 } },
+    maxItemWidth: { control: { type: 'number', min: 120, max: 480, step: 8 } },
     size: { control: { type: 'inline-radio' }, options: ['default', 'small'] },
     isRemovable: { control: 'boolean' },
     disabled: { control: 'boolean' },
@@ -97,15 +98,15 @@ function handleRemove(id: CkFileEntry['id']) {
 </template>`;
 
 /**
- * Up to `maxInline` (default `3`) files are rendered inline as a horizontal
- * row of `UiFileItem`s.
+ * As many files as fit the available width are rendered inline as a horizontal
+ * row of `UiFileItem`s (each kept between `minItemWidth` and `maxItemWidth`).
  */
 export const Inline: Story = {
   render: () => ({
     components: { CkFileItemsList },
     setup: () => ({ files: baseFiles }),
     template: `
-      <div class="bg-background-surface-primary p-4 w-[36rem]">
+      <div class="bg-background-surface-primary p-4 w-[44rem]">
         <CkFileItemsList :files="files" />
       </div>
     `,
@@ -114,15 +115,15 @@ export const Inline: Story = {
 };
 
 /**
- * When the list overflows `maxInline`, the component collapses to a single
- * popover trigger. Click it to reveal the full vertical list of files.
+ * When the files no longer fit the available width, the component collapses to
+ * a single popover trigger. Click it to reveal the full vertical list of files.
  */
 export const Collapsed: Story = {
   render: () => ({
     components: { CkFileItemsList },
     setup: () => ({ files: overflowFiles }),
     template: `
-      <div class="bg-background-surface-primary p-4 w-[36rem]">
+      <div class="bg-background-surface-primary p-4 w-[44rem]">
         <CkFileItemsList :files="files" />
       </div>
     `,
@@ -193,7 +194,7 @@ export const Removable: Story = {
       return { files, handleRemove };
     },
     template: `
-      <div class="bg-background-surface-primary p-4 w-[36rem]">
+      <div class="bg-background-surface-primary p-4 w-[44rem]">
         <CkFileItemsList :files="files" is-removable @remove="handleRemove" />
       </div>
     `,
@@ -232,7 +233,7 @@ export const CustomItem: Story = {
     components: { CkFileItemsList },
     setup: () => ({ files: baseFiles }),
     template: `
-      <div class="bg-background-surface-primary p-4 w-[36rem]">
+      <div class="bg-background-surface-primary p-4 w-[44rem]">
         <CkFileItemsList :files="files">
           <template #item="{ file }">
             <a
@@ -283,7 +284,7 @@ export const Clickable: Story = {
       return { files: overflowFiles, openFile, lastClicked };
     },
     template: `
-      <div class="bg-background-surface-primary p-4 w-[36rem]">
+      <div class="bg-background-surface-primary p-4 w-[44rem]">
         <CkFileItemsList
           :files="files"
           list-label="Attached files"
@@ -335,7 +336,7 @@ export const Disabled: Story = {
       ] as CkFileEntry[],
     }),
     template: `
-      <div class="flex flex-col gap-6 bg-background-surface-primary p-4 w-[36rem]">
+      <div class="flex flex-col gap-6 bg-background-surface-primary p-4 w-[44rem]">
         <div>
           <p class="label-12-medium text-content-on-surface-muted mb-2">
             Whole list disabled
@@ -353,3 +354,50 @@ export const Disabled: Story = {
   }),
   parameters: { docs: { source: { code: disabledTemplateSource } } },
 };
+
+/**
+ * The inline count adapts to the available width. There is no hard cap on the
+ * number of inline items — as many fit are kept, each between `minItemWidth`
+ * and `maxItemWidth` wide. As the wrapper narrows, fewer items stay inline
+ * until the whole list collapses into the popover trigger.
+ *
+ * Drag the bottom-right corner of the box to resize it and watch the list
+ * react. (The other stories use a fixed-width wrapper, so resizing the browser
+ * window alone won't change their layout.)
+ */
+export const Responsive: Story = {
+  args: {
+    minItemWidth: 200,
+    maxItemWidth: 256,
+    fileCount: 3,
+  } as never,
+  argTypes: {
+    fileCount: { control: { type: 'number', min: 1, max: 5, step: 1 } },
+  } as never,
+  render: (args) => ({
+    components: { CkFileItemsList },
+    setup() {
+      const argsWithCount = args as typeof args & { fileCount?: number };
+      const files = computed(() =>
+        overflowFiles.slice(
+          0,
+          Math.min(5, Math.max(1, argsWithCount.fileCount ?? 5)),
+        ),
+      );
+      const listArgs = computed(() => {
+        const rest = { ...argsWithCount };
+        delete rest.fileCount;
+        return rest;
+      });
+      return { args: listArgs, files };
+    },
+    template: `
+      <div
+        class="resize-x overflow-auto bg-background-surface-primary p-4"
+        style="resize: horizontal; overflow: auto; width: 44rem; min-width: 12rem; max-width: 100%;"
+      >
+        <CkFileItemsList v-bind="args" :files="files" />
+      </div>
+    `,
+  }),
+};

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';