@aleph-alpha/chat-kit 2.1.1 → 2.3.0

package/src/components/base/CkDropZoneOverlay/CkDropZoneOverlay.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import CkDropZoneIllustration from './CkDropZoneIllustration.vue';
+import type {
+  CkDropZoneOverlayEmits,
+  CkDropZoneOverlayProps,
+  CkDropZoneRejection,
+} from './types';
+
+defineOptions({
+  name: 'CkDropZoneOverlay',
+});
+
+const props = withDefaults(defineProps<CkDropZoneOverlayProps>(), {
+  accept: '',
+  maxFileSizeBytes: Number.POSITIVE_INFINITY,
+  maxFiles: Number.POSITIVE_INFINITY,
+  disabled: false,
+  heading: undefined,
+  hint: 'Add txt, docx, pdf, md, or csv',
+  ariaLabel: 'Drop files anywhere to attach',
+  showErrors: true,
+  errorTimeoutMs: 4000,
+});
+
+const emit = defineEmits<CkDropZoneOverlayEmits>();
+
+const visible = ref(false);
+/**
+ * `dragenter`/`dragleave` fire when crossing *any* element boundary, not just
+ * the page boundary. We count enters/leaves so the overlay stays open while
+ * the cursor moves over child elements and only closes when the drag truly
+ * leaves the window. See https://stackoverflow.com/a/21002544.
+ */
+const dragCounter = ref(0);
+const errors = ref<string[]>([]);
+let errorTimer: ReturnType<typeof setTimeout> | null = null;
+
+// --- accept parsing --------------------------------------------------------
+
+interface ParsedAccept {
+  extensions: string[];
+  mimes: string[];
+  /** Wildcard MIME prefixes like `image/` (from `image/*`). */
+  wildcards: string[];
+}
+
+const parsedAccept = computed<ParsedAccept>(() => {
+  const extensions: string[] = [];
+  const mimes: string[] = [];
+  const wildcards: string[] = [];
+  for (const raw of props.accept.split(',')) {
+    const token = raw.trim().toLowerCase();
+    if (!token) continue;
+    if (token.startsWith('.')) {
+      extensions.push(token);
+    } else if (token.endsWith('/*')) {
+      wildcards.push(token.slice(0, -1));
+    } else {
+      mimes.push(token);
+    }
+  }
+  return { extensions, mimes, wildcards };
+});
+
+function fileMatchesAccept(file: File): boolean {
+  const { extensions, mimes, wildcards } = parsedAccept.value;
+  // Empty accept = allow everything.
+  if (!extensions.length && !mimes.length && !wildcards.length) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  if (extensions.some((e) => name.endsWith(e))) return true;
+  if (type && mimes.includes(type)) return true;
+  if (type && wildcards.some((w) => type.startsWith(w))) return true;
+  return false;
+}
+
+function formatBytes(bytes: number): string {
+  const mb = bytes / (1024 * 1024);
+  if (mb >= 1) return `${mb.toFixed(0)} MB`;
+  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+}
+
+const isSingle = computed(() => props.maxFiles === 1);
+
+const resolvedHeading = computed(
+  () =>
+    props.heading ??
+    (isSingle.value
+      ? 'Drop a file here to add to chat'
+      : 'Drop files here to add to chat'),
+);
+
+// --- drag detection --------------------------------------------------------
+
+function isFileDrag(e: DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  // 'Files' is the standard token; Firefox also exposes 'application/x-moz-file'.
+  for (const t of types) {
+    if (t === 'Files' || t.toLowerCase().includes('file')) return true;
+  }
+  return false;
+}
+
+function onWindowDragEnter(e: DragEvent) {
+  if (props.disabled || !isFileDrag(e)) return;
+  dragCounter.value += 1;
+  visible.value = true;
+}
+
+function onWindowDragOver(e: DragEvent) {
+  if (props.disabled || !visible.value || !isFileDrag(e)) return;
+  e.preventDefault();
+}
+
+function onWindowDragLeave() {
+  if (!visible.value) return;
+  dragCounter.value = Math.max(0, dragCounter.value - 1);
+  if (dragCounter.value === 0) hide();
+}
+
+function onWindowDrop(e: DragEvent) {
+  if (props.disabled || !visible.value || !isFileDrag(e)) return;
+  e.preventDefault();
+  hide();
+}
+
+function hide() {
+  dragCounter.value = 0;
+  visible.value = false;
+}
+
+// --- overlay drop handler --------------------------------------------------
+
+function onOverlayDrop(e: DragEvent) {
+  e.preventDefault();
+  const dropped = Array.from(e.dataTransfer?.files ?? []);
+  hide();
+  if (!dropped.length) return;
+
+  const accepted: File[] = [];
+  const rejected: CkDropZoneRejection[] = [];
+
+  for (const file of dropped) {
+    if (!fileMatchesAccept(file)) {
+      rejected.push({
+        file,
+        reason: 'unsupported-type',
+        message: `"${file.name}" — unsupported file type`,
+      });
+      continue;
+    }
+    if (file.size > props.maxFileSizeBytes) {
+      rejected.push({
+        file,
+        reason: 'too-large',
+        message: `"${file.name}" — exceeds ${formatBytes(props.maxFileSizeBytes)} limit`,
+      });
+      continue;
+    }
+    accepted.push(file);
+  }
+
+  // Enforce the per-drop cap: anything beyond `maxFiles` is dropped with a
+  // single consolidated rejection so the user understands why.
+  let toEmit = accepted;
+  if (accepted.length > props.maxFiles) {
+    toEmit = accepted.slice(0, props.maxFiles);
+    rejected.push({
+      reason: 'too-many',
+      message: isSingle.value
+        ? 'Only one file at a time — kept the first.'
+        : `Only up to ${props.maxFiles} files at a time — kept the first ${props.maxFiles}.`,
+    });
+  }
+
+  if (rejected.length) {
+    emit('rejected', rejected);
+    if (props.showErrors) pushErrors(rejected.map((r) => r.message));
+  }
+  if (toEmit.length) emit('files', toEmit);
+}
+
+function pushErrors(messages: string[]) {
+  errors.value = [...errors.value, ...messages];
+  if (errorTimer) clearTimeout(errorTimer);
+  errorTimer = setTimeout(() => {
+    errors.value = [];
+  }, props.errorTimeoutMs);
+}
+
+// --- lifecycle -------------------------------------------------------------
+
+onMounted(() => {
+  window.addEventListener('dragenter', onWindowDragEnter);
+  window.addEventListener('dragover', onWindowDragOver);
+  window.addEventListener('dragleave', onWindowDragLeave);
+  window.addEventListener('drop', onWindowDrop);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('dragenter', onWindowDragEnter);
+  window.removeEventListener('dragover', onWindowDragOver);
+  window.removeEventListener('dragleave', onWindowDragLeave);
+  window.removeEventListener('drop', onWindowDrop);
+  if (errorTimer) clearTimeout(errorTimer);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="ck-drop-overlay">
+      <!-- The overlay IS the drop target; `role="dialog"` describes its
+           transient appearance for AT users, but the lint rule still flags
+           the drop handler as a "static element interaction". -->
+      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+      <div
+        v-if="visible"
+        data-slot="drop-zone-overlay"
+        class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background-surface-secondary/80 backdrop-blur-sm p-6"
+        role="dialog"
+        aria-modal="false"
+        :aria-label="ariaLabel"
+        @dragover.prevent
+        @drop="onOverlayDrop"
+      >
+        <div
+          class="pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4 text-content-on-surface-primary"
+        >
+          <!-- Replace the whole overlay surface (illustration + copy). -->
+          <slot>
+            <CkDropZoneIllustration class="h-36 w-52" />
+            <div class="flex flex-col items-center gap-1 text-center">
+              <p class="body-16-bold">{{ resolvedHeading }}</p>
+              <p v-if="hint" class="body-16-regular">{{ hint }}</p>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </Transition>
+
+    <Transition name="ck-drop-overlay">
+      <ul
+        v-if="showErrors && errors.length"
+        data-slot="drop-zone-errors"
+        class="pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-[36rem] -translate-x-1/2 flex list-inside list-disc flex-col gap-1 rounded-md border border-border-surface-default bg-background-surface-default p-3 text-sm text-content-on-surface-secondary"
+        role="alert"
+      >
+        <li v-for="(msg, i) in errors" :key="i">{{ msg }}</li>
+      </ul>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ck-drop-overlay-enter-active,
+.ck-drop-overlay-leave-active {
+  transition: opacity 150ms ease;
+}
+.ck-drop-overlay-enter-from,
+.ck-drop-overlay-leave-to {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ck-drop-overlay-enter-active,
+  .ck-drop-overlay-leave-active {
+    transition: none;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,93 @@
+/** Why a dropped file was rejected. */
+export type CkDropZoneRejectionReason =
+  | 'unsupported-type'
+  | 'too-large'
+  | 'too-many';
+
+export interface CkDropZoneRejection {
+  /** The offending file, when the rejection concerns a specific file. */
+  file?: File;
+  /** Machine-readable reason, for consumers building their own messaging. */
+  reason: CkDropZoneRejectionReason;
+  /** Default human-readable (English) message used by the built-in toast. */
+  message: string;
+}
+
+/**
+ * Full-window drag-and-drop overlay. Listens for file drags anywhere on the
+ * page, reveals a teleported overlay, validates dropped files against `accept`,
+ * `maxFileSizeBytes` and `maxFiles`, and emits the accepted files.
+ *
+ * Purely presentational and self-contained: it owns its own drag state and has
+ * no knowledge of the host app. All limits and copy are configurable, and
+ * rejection handling can be delegated to the consumer via the `rejected` event.
+ *
+ * @category Form Inputs
+ * @useCases page-level file attachment, drag-and-drop upload, chat composer
+ * @keywords drag and drop, drop zone, file upload, overlay, attachments
+ * @related CkFileItemsList, CkPromptInput
+ */
+export interface CkDropZoneOverlayProps {
+  /**
+   * HTML `accept` string used to validate dropped files (extensions, MIME
+   * types and `type/*` wildcards). Empty string accepts everything.
+   * @default ''
+   */
+  accept?: string;
+  /**
+   * Reject files larger than this many bytes.
+   * @default Number.POSITIVE_INFINITY
+   */
+  maxFileSizeBytes?: number;
+  /**
+   * Maximum number of files accepted per drop. Excess files are dropped and
+   * reported as a single rejection.
+   * @default Number.POSITIVE_INFINITY
+   */
+  maxFiles?: number;
+  /**
+   * When true, the overlay never appears and window drag events are ignored,
+   * so the page behaves normally (e.g. while a response is streaming or the
+   * attachment limit is already reached).
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Heading text. Defaults to a sensible singular/plural string derived from
+   * `maxFiles` (e.g. "Drop a file here to add to chat" vs "Drop files here to
+   * add to chat").
+   */
+  heading?: string;
+  /**
+   * Secondary hint shown under the heading (e.g. supported formats / limits).
+   * Pass an empty string to hide it.
+   * @default 'Add txt, docx, pdf, md, or csv'
+   */
+  hint?: string;
+  /**
+   * `aria-label` for the overlay dialog.
+   * @default 'Drop files anywhere to attach'
+   */
+  ariaLabel?: string;
+  /**
+   * Render the built-in error toast for rejected files. Set to `false` to take
+   * over messaging via the `rejected` event.
+   * @default true
+   */
+  showErrors?: boolean;
+  /**
+   * How long the built-in error toast stays visible, in milliseconds.
+   * @default 4000
+   */
+  errorTimeoutMs?: number;
+}
+
+export interface CkDropZoneOverlayEmits {
+  /** Files that passed validation, capped to `maxFiles`. */
+  (event: 'files', files: File[]): void;
+  /**
+   * Rejected files / drops. Emitted alongside the built-in toast so consumers
+   * can integrate their own notification system (and disable `showErrors`).
+   */
+  (event: 'rejected', rejections: CkDropZoneRejection[]): void;
+}

package/src/components/base/CkFeedbackDialog/CkFeedbackDialog.vue

@@ -215,7 +215,7 @@ function handleSubmit(): void {
               v-for="reason in reasons"
               :key="reason.code"
               :value="reason.code"
-              class="ck-feedback-dialog__chip"
+              class="ck-feedback-dialog__chip shadow-none"
             >
               {{ reason.label }}
             </UiToggleGroupItem>
@@ -229,6 +229,7 @@ function handleSubmit(): void {
               :id="freeTextId"
               v-model="freeText"
               name="ck-feedback-dialog-free-text"
+              class="ck-feedback-dialog__freetext"
               :placeholder="freeTextPlaceholder"
               :disabled="disabled || submitting"
               :maxlength="maxFreeTextLength"
@@ -279,6 +280,26 @@ function handleSubmit(): void {
   line-height: 1rem;
 }
 
+/* Selected chip: soft-active treatment (per Figma). Token vars keep it
+ * theme-aware; scoped here because the data-[state=on]:bg-* utility isn't
+ * emitted by the consumer's UnoCSS build. The :hover selector holds the
+ * styling when hovering a selected chip (the outline variant ships a
+ * data-[state=on]:hover override of equal specificity otherwise). */
+.ck-feedback-dialog__chip[data-state='on'],
+.ck-feedback-dialog__chip[data-state='on']:hover {
+  border-color: oklch(var(--accent-default));
+  background-color: oklch(var(--background-accent-soft));
+  color: oklch(var(--content-on-accent-soft));
+}
+
+/*
+ * The free-text field stays vertically resizable, but cap its height so
+ * dragging the resize handle can't push it past the dialog bounds.
+ */
+.ck-feedback-dialog__freetext {
+  max-height: 11rem;
+}
+
 .ck-feedback-dialog__response :deep(p),
 .ck-feedback-dialog__response :deep(li) {
   line-height: 1.5rem;

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

@@ -41,6 +41,73 @@ describe('CkFileItemsList', () => {
     expect(screen.getByRole('button')).toHaveTextContent('+1 more attachment');
   });
 
+  it('keeps a single-line trigger (no count subtitle) when showStatus is off', () => {
+    render(CkFileItemsList, {
+      props: { files, triggerLabel: 'Uploaded documents' },
+    });
+
+    const trigger = screen.getByRole('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', () => {
+      const withFailures: CkFileEntry[] = [
+        { id: 'a', filename: 'a.pdf', error: 'Upload failed' },
+        { id: 'b', filename: 'b.md', error: 'Upload failed' },
+        { id: 'c', filename: 'c.csv' },
+        { id: 'd', filename: 'd.docx' },
+      ];
+
+      render(CkFileItemsList, {
+        props: {
+          files: withFailures,
+          showStatus: true,
+          triggerLabel: 'Uploading documents',
+        },
+      });
+
+      const trigger = screen.getByRole('button', {
+        name: /Uploading documents, 2 uploads failed/i,
+      });
+      expect(trigger).toHaveTextContent('2 uploads failed');
+    });
+
+    it('renders an aggregate progress bar while files are uploading', () => {
+      const uploading: CkFileEntry[] = [
+        { id: 'a', filename: 'a.pdf', progress: 20 },
+        { id: 'b', filename: 'b.md', progress: 60 },
+        { id: 'c', filename: 'c.csv', progress: 40 },
+        { id: 'd', filename: 'd.docx', progress: 80 },
+      ];
+
+      const { container } = render(CkFileItemsList, {
+        props: {
+          files: uploading,
+          showStatus: true,
+          triggerLabel: 'Uploading documents',
+        },
+      });
+
+      expect(container.querySelector('[data-slot="progress"]')).toBeTruthy();
+    });
+
+    it('shows the file count once all uploads succeed', () => {
+      render(CkFileItemsList, {
+        props: {
+          files,
+          showStatus: true,
+          triggerLabel: 'Uploaded documents',
+        },
+      });
+
+      const trigger = screen.getByRole('button');
+      expect(trigger).toHaveTextContent('Uploaded documents');
+      expect(trigger).toHaveTextContent('4 files');
+    });
+  });
+
   it('emits remove with the file id from inline items', async () => {
     const user = userEvent.setup();
     const { emitted } = render(CkFileItemsList, {

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

@@ -130,6 +130,54 @@ export const Collapsed: Story = {
   parameters: { docs: { source: { code: collapsedTemplateSource } } },
 };
 
+const uploadingFiles: CkFileEntry[] = [
+  { id: 1, filename: 'project-proposal.pdf', typeLabel: 'PDF', progress: 35 },
+  { id: 2, filename: 'meeting-notes.md', typeLabel: 'MD', progress: 70 },
+  { id: 3, filename: 'q3-revenue.csv', typeLabel: 'CSV', progress: 50 },
+  { id: 4, filename: 'design-spec.docx', typeLabel: 'DOCX', progress: 20 },
+];
+
+const failedFiles: CkFileEntry[] = [
+  { id: 1, filename: 'project-proposal.pdf', error: 'Upload failed' },
+  { id: 2, filename: 'meeting-notes.md', error: 'Upload failed' },
+  { id: 3, filename: 'q3-revenue.csv', typeLabel: 'CSV', sizeLabel: '320 KB' },
+  {
+    id: 4,
+    filename: 'design-spec.docx',
+    typeLabel: 'DOCX',
+    sizeLabel: '880 KB',
+  },
+];
+
+/**
+ * With `show-status`, the collapsed trigger becomes a two-line summary derived
+ * from each entry's `progress`/`error`: an aggregate progress bar while
+ * uploading, an "N uploads failed" line (error tone) once any entry fails, and
+ * otherwise an "N files" count. Open the popover to see the per-file rows.
+ */
+export const UploadStatus: Story = {
+  render: () => ({
+    components: { CkFileItemsList },
+    setup: () => ({ uploadingFiles, failedFiles, doneFiles: overflowFiles }),
+    template: `
+      <div class="flex flex-col gap-6 bg-background-surface-primary p-4 w-[28rem]">
+        <div>
+          <p class="label-12-medium text-content-on-surface-muted mb-2">Uploading</p>
+          <CkFileItemsList :files="uploadingFiles" show-status trigger-label="Uploading documents" />
+        </div>
+        <div>
+          <p class="label-12-medium text-content-on-surface-muted mb-2">Some uploads failed</p>
+          <CkFileItemsList :files="failedFiles" show-status is-removable trigger-label="Uploading documents" />
+        </div>
+        <div>
+          <p class="label-12-medium text-content-on-surface-muted mb-2">All uploaded</p>
+          <CkFileItemsList :files="doneFiles" show-status trigger-label="Uploaded documents" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
 /**
  * Each row exposes a remove control when `isRemovable` is `true`. The component
  * emits `remove` with the corresponding file `id`.

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

@@ -5,6 +5,7 @@ import {
   UiPopover,
   UiPopoverContent,
   UiPopoverTrigger,
+  UiProgress,
   type UiFileItemSize,
 } from '@aleph-alpha/ui-library';
 import { computed, ref } from 'vue';
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<CkFileItemsListProps>(), {
   isRemovable: false,
   removeLabel: 'Remove file',
   disabled: false,
+  showStatus: false,
   triggerLabel: undefined,
   triggerAriaLabel: undefined,
   listLabel: undefined,
@@ -57,10 +59,49 @@ const defaultTriggerLabel = computed(() => `${props.files.length} files`);
 const resolvedTriggerLabel = computed(
   () => props.triggerLabel ?? defaultTriggerLabel.value,
 );
-const resolvedTriggerAriaLabel = computed(
-  () =>
-    props.triggerAriaLabel ?? props.triggerLabel ?? defaultTriggerLabel.value,
+
+// --- upload status summary (only used when `showStatus` is set) ------------
+
+function hasError(file: CkFileEntry): boolean {
+  return file.error != null && file.error !== '';
+}
+
+const failedFiles = computed(() => props.files.filter(hasError));
+const uploadingFiles = computed(() =>
+  props.files.filter(
+    (f) => !hasError(f) && f.progress != null && f.progress < 100,
+  ),
 );
+const hasFailures = computed(() => failedFiles.value.length > 0);
+const uploadInProgress = computed(() => uploadingFiles.value.length > 0);
+
+const aggregateProgress = computed(() => {
+  const list = uploadingFiles.value;
+  if (!list.length) return 0;
+  const total = list.reduce((sum, f) => sum + (f.progress ?? 0), 0);
+  return Math.round(total / list.length);
+});
+
+const failedStatusLabel = computed(() => {
+  const n = failedFiles.value.length;
+  return `${n} ${n === 1 ? 'upload' : 'uploads'} failed`;
+});
+const countStatusLabel = computed(() => `${props.files.length} files`);
+
+/** Status portion appended to the trigger's accessible name. */
+const triggerStatusText = computed(() => {
+  if (!props.showStatus) return '';
+  if (uploadInProgress.value) return `uploading ${aggregateProgress.value}%`;
+  if (hasFailures.value) return failedStatusLabel.value;
+  if (props.triggerLabel) return countStatusLabel.value;
+  return '';
+});
+
+const resolvedTriggerAriaLabel = computed(() => {
+  if (props.triggerAriaLabel) return props.triggerAriaLabel;
+  const base = props.triggerLabel ?? defaultTriggerLabel.value;
+  return triggerStatusText.value ? `${base}, ${triggerStatusText.value}` : base;
+});
 
 function handleRemove(file: CkFileEntry) {
   if (isRowDisabled(file)) return;
@@ -116,13 +157,46 @@ function handleRowClick(file: CkFileEntry, event: MouseEvent) {
         :class="size === 'small' ? 'p-2' : 'p-3'"
         :aria-label="resolvedTriggerAriaLabel"
       >
-        <UiFileType icon="paperclip" tone="default" />
+        <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'"
         >
           {{ resolvedTriggerLabel }}
         </span>
+        <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"

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

@@ -46,6 +46,15 @@ export interface CkFileItemsListProps {
   removeLabel?: string;
   /** Disable every row + the collapsed trigger. @default false */
   disabled?: boolean;
+  /**
+   * Render a two-line collapsed trigger that summarises upload state derived
+   * from each entry's `progress`/`error`: an aggregate progress bar while any
+   * entry is uploading, an "N uploads failed" line (error tone) once any entry
+   * fails, otherwise an "N files" count (shown only when an explicit
+   * `triggerLabel` is set). Off by default so static lists keep the original
+   * single-line trigger. @default false
+   */
+  showStatus?: boolean;
   /** Visible label on the collapsed trigger. Defaults to `"{n} files"`. */
   triggerLabel?: string;
   /** A11y label for the trigger. Falls back to `triggerLabel`, then count. */

package/src/components/base/index.ts

@@ -3,6 +3,13 @@ export { CkAgentMessage } from './CkAgentMessage';
 export { CkConversationLayout } from './CkConversationLayout';
 export type { CkConversationLayoutProps } from './CkConversationLayout';
 export { CkCopyMessageActionButton } from './CkCopyMessageActionButton';
+export { CkDropZoneOverlay } from './CkDropZoneOverlay';
+export type {
+  CkDropZoneOverlayProps,
+  CkDropZoneOverlayEmits,
+  CkDropZoneRejection,
+  CkDropZoneRejectionReason,
+} from './CkDropZoneOverlay';
 export { CkFeedbackButton } from './CkFeedbackButton';
 export type {
   CkFeedbackButtonProps,