@aleph-alpha/chat-kit 2.1.1 → 2.2.0

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import CkDropZoneOverlay from './CkDropZoneOverlay.vue';
+import type { CkDropZoneRejection } from './types';
+
+const meta: Meta<typeof CkDropZoneOverlay> = {
+  title: 'Base/CkDropZoneOverlay',
+  component: CkDropZoneOverlay,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Full-window drag-and-drop overlay. It listens for file drags anywhere on the page, reveals a teleported overlay, validates dropped files against `accept`, `maxFileSizeBytes` and `maxFiles`, then emits the accepted files. Drag a real file from your desktop onto the canvas to see it, or use the "Simulate drag" button to preview the overlay.',
+      },
+    },
+  },
+  argTypes: {
+    accept: { control: 'text' },
+    maxFiles: { control: { type: 'number', min: 1, max: 20, step: 1 } },
+    disabled: { control: 'boolean' },
+    heading: { control: 'text' },
+    hint: { control: 'text' },
+    showErrors: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CkDropZoneOverlay>;
+
+const usageSource = `<script setup lang="ts">
+import { CkDropZoneOverlay } from '@aleph-alpha/chat-kit';
+
+const MAX_FILES = 10;
+const isStreaming = false;
+
+function onFiles(files: File[]) {
+  // hand off to your upload pipeline
+}
+</script>
+
+<template>
+  <CkDropZoneOverlay
+    :accept="'.txt,.docx,.pdf,.md,.csv'"
+    :max-files="MAX_FILES"
+    :disabled="isStreaming"
+    hint="Add txt, docx, pdf, md, or csv"
+    @files="onFiles"
+  />
+</template>`;
+
+/**
+ * The overlay is invisible until a file drag enters the window. The "Simulate
+ * drag" button dispatches a synthetic `dragenter` so you can preview the
+ * overlay without an OS-level drag; dropping a real file emits `files`.
+ */
+export const Default: Story = {
+  args: {
+    accept: '.txt,.docx,.pdf,.md,.csv',
+    maxFiles: 10,
+    hint: 'Add txt, docx, pdf, md, or csv',
+  },
+  render: (args) => ({
+    components: { CkDropZoneOverlay },
+    setup() {
+      const lastFiles = ref<string[]>([]);
+      const lastRejections = ref<string[]>([]);
+      function simulateDrag() {
+        const event = new Event('dragenter', { bubbles: true });
+        Object.defineProperty(event, 'dataTransfer', {
+          value: { types: ['Files'], files: [] },
+        });
+        window.dispatchEvent(event);
+      }
+      function onFiles(files: File[]) {
+        lastFiles.value = files.map((f) => f.name);
+      }
+      function onRejected(rejections: CkDropZoneRejection[]) {
+        lastRejections.value = rejections.map((r) => r.message);
+      }
+      return {
+        args,
+        lastFiles,
+        lastRejections,
+        simulateDrag,
+        onFiles,
+        onRejected,
+      };
+    },
+    template: `
+      <div class="min-h-[60vh] bg-background-surface-primary p-8 text-content-on-surface-primary">
+        <button
+          type="button"
+          class="rounded-lg bg-background-surface-secondary px-4 py-2 body-14-medium"
+          @click="simulateDrag"
+        >
+          Simulate drag
+        </button>
+        <p class="label-12-regular mt-4 text-content-on-surface-muted">
+          Last accepted: {{ lastFiles.length ? lastFiles.join(', ') : '—' }}
+        </p>
+        <p class="label-12-regular mt-1 text-content-on-surface-muted">
+          Last rejected: {{ lastRejections.length ? lastRejections.join(' · ') : '—' }}
+        </p>
+        <CkDropZoneOverlay
+          v-bind="args"
+          @files="onFiles"
+          @rejected="onRejected"
+        />
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: usageSource } } },
+};
+
+/**
+ * A single-file zone (`maxFiles="1"`) switches the default heading to its
+ * singular form and rejects extra files with a `too-many` reason.
+ */
+export const SingleFile: Story = {
+  args: {
+    maxFiles: 1,
+    accept: '.pdf',
+    hint: 'Add a pdf',
+  },
+  render: Default.render,
+  parameters: { docs: { source: { code: usageSource } } },
+};

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

package/src/components/index.ts

@@ -3,6 +3,7 @@ export {
   CkAgentMessage,
   CkConversationLayout,
   CkCopyMessageActionButton,
+  CkDropZoneOverlay,
   CkFeedbackButton,
   CkFeedbackDialog,
   CkFileItemsList,
@@ -21,6 +22,10 @@ export {
 } from './base';
 export type {
   CkConversationLayoutProps,
+  CkDropZoneOverlayProps,
+  CkDropZoneOverlayEmits,
+  CkDropZoneRejection,
+  CkDropZoneRejectionReason,
   CkFeedbackButtonProps,
   CkFeedbackDialogEmits,
   CkFeedbackDialogProps,

package/src/composables/fileUpload/index.spec.ts

@@ -63,11 +63,11 @@ describe('fileUpload index', () => {
       expect(workflowConfig.workflow_name).toBe('DocumentAI');
     });
 
-    it('configures workflowConfig definition', () => {
+    it('does not send the legacy workflow definition field', () => {
+      // The search-stores API dropped the redundant `definition` field
+      // (it duplicated `workflow_name`); sending it now breaks store creation.
       const { workflowConfig } = defaultDocumentUploadConfig;
-      expect(workflowConfig.definition).toEqual({
-        workflow_name: 'DocumentAI',
-      });
+      expect(workflowConfig.definition).toBeUndefined();
     });
 
     it('configures initialization parameters', () => {
@@ -83,7 +83,16 @@ describe('fileUpload index', () => {
         .parameters as Record<string, unknown>;
       const extraction = params.document_extraction as Record<string, unknown>;
 
-      expect(extraction.pdf_reader).toEqual({ kind: 'pypdf', batch_size: 10 });
+      expect(extraction.pdf_reader).toEqual({
+        kind: 'vision',
+        batch_size: 10,
+        ignore_headers_footers: true,
+        max_tokens: 16384,
+        model: 'gemini-2.5-flash',
+        retries: 3,
+        timeout: 120,
+        workers: 4,
+      });
       expect(extraction.docx_reader).toEqual({
         kind: 'docx',
         batch_size: 10,
@@ -121,10 +130,12 @@ describe('fileUpload index', () => {
         unknown
       >;
       expect(chunkExtraction.chunker).toEqual({
-        kind: 'naive',
+        kind: 'recursive',
         batch_size: 1,
         include_image_descriptions: false,
-        chunk_size: 200,
+        chunk_overlap: 200,
+        chunk_size: 1200,
+        separators: ['\n\n', '\n', ' ', '.', ',', ''],
       });
     });