@aleph-alpha/chat-kit 2.1.0 → 2.2.0

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

@@ -10,6 +10,7 @@ vi.mock('./useFileUploadWrapper', () => ({
       upload: {},
       storeId: { value: '' },
       fileInput: { value: null },
+      maxFilesPerUpload: config.maxFilesPerUpload ?? 20,
       uploadFiles: vi.fn(),
       unassignedFiles: { value: [] },
       assignFilesToMessage: vi.fn(),
@@ -62,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', () => {
@@ -82,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,
@@ -120,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', ' ', '.', ',', ''],
       });
     });
 
@@ -143,6 +155,10 @@ describe('fileUpload index', () => {
         additionalProperties: true,
       });
     });
+
+    it('does not set maxFilesPerUpload by default', () => {
+      expect(defaultDocumentUploadConfig.maxFilesPerUpload).toBeUndefined();
+    });
   });
 
   describe('createDocumentUploadProvider', () => {
@@ -187,6 +203,22 @@ describe('fileUpload index', () => {
       };
       expect(provider._config).toBe(customConfig);
     });
+
+    it('passes maxFilesPerUpload through config', () => {
+      const customConfig: DocumentUploadConfig = {
+        ...defaultDocumentUploadConfig,
+        maxFilesPerUpload: 5,
+      };
+
+      const provider = createDocumentUploadProvider(
+        customConfig,
+      ) as unknown as {
+        useDocumentUpload: (id: string) => { maxFilesPerUpload: number };
+        _config: DocumentUploadConfig;
+      };
+      const result = provider.useDocumentUpload('conv-1');
+      expect(result.maxFilesPerUpload).toBe(5);
+    });
   });
 
   describe('useDocumentUploadWithDefaultConfig', () => {

package/src/composables/fileUpload/index.ts

@@ -22,40 +22,60 @@ export const defaultDocumentUploadConfig: DocumentUploadConfig = {
   workflowConfig: {
     name: WORKFLOW_ID,
     workflow_name: 'DocumentAI',
-    definition: { workflow_name: 'DocumentAI' },
     parameters: {
-      initialization: {
-        store: { batch_size: 10, pages_per_part: 25 },
+      chunk_extraction: {
+        chunker: {
+          batch_size: 1,
+          chunk_overlap: 200,
+          chunk_size: 1200,
+          include_image_descriptions: false,
+          kind: 'recursive',
+          separators: ['\n\n', '\n', ' ', '.', ',', ''],
+        },
       },
       document_extraction: {
-        pdf_reader: { kind: 'pypdf', batch_size: 10 },
         docx_reader: {
-          kind: 'docx',
           batch_size: 10,
+          kind: 'docx',
           split_by_sections: false,
         },
-        pptx_reader: { kind: 'pptx', batch_size: 10, include_notes: true },
-        xlsx_reader: {
-          kind: 'xlsx',
+        markdown_reader: {
           batch_size: 10,
-          max_rows: 10000,
-          max_cols: 100,
-          include_empty_sheets: false,
+          kind: 'markdown',
+        },
+        pdf_reader: {
+          batch_size: 10,
+          ignore_headers_footers: true,
+          kind: 'vision',
+          max_tokens: 16384,
+          model: 'gemini-2.5-flash',
+          retries: 3,
+          timeout: 120,
+          workers: 4,
         },
-        markdown_reader: { kind: 'markdown', batch_size: 10 },
         plaintext_reader: {
-          kind: 'plaintext',
           batch_size: 10,
+          kind: 'plaintext',
           max_content_size: 500000,
           min_space_ratio: 0.02,
         },
+        pptx_reader: {
+          batch_size: 10,
+          include_notes: true,
+          kind: 'pptx',
+        },
+        xlsx_reader: {
+          batch_size: 10,
+          include_empty_sheets: false,
+          kind: 'xlsx',
+          max_cols: 100,
+          max_rows: 10000,
+        },
       },
-      chunk_extraction: {
-        chunker: {
-          kind: 'naive',
-          batch_size: 1,
-          include_image_descriptions: false,
-          chunk_size: 200,
+      initialization: {
+        store: {
+          batch_size: 10,
+          pages_per_part: 25,
         },
       },
     },
@@ -83,6 +103,8 @@ export { useDocumentUploadWithDefaultConfig, createDocumentUploadProvider };
 export type {
   DocumentUploadConfig,
   DocumentUploadProvider,
+  DocumentUploadReturn,
+  HandleFilesSelectedOptions,
   FileEntry,
   FileStatus,
 } from './types';

package/src/composables/fileUpload/types.ts

@@ -345,6 +345,7 @@ export interface DocumentUploadConfig {
   workflowConfig: Record<string, unknown>;
   persist?: boolean;
   maxConcurrency?: number;
+  maxFilesPerUpload?: number;
   headers?: Record<string, string>;
   onEvent?: (event: UploadEvent) => void;
 }
@@ -359,13 +360,25 @@ export interface DocumentUploadReturn {
   upload: UseFileUploadReturn;
   storeId: Ref<string>;
   fileInput: Ref<HTMLInputElement | null>;
+  maxFilesPerUpload: number;
   uploadFiles: (files: File[]) => Promise<UploadResult | undefined>;
   unassignedFiles: ComputedRef<FileEntry[]>;
   assignFilesToMessage: (messageId: string) => void;
   getFilesForMessage: (messageId: string) => FileEntry[];
   stampResponseId: (responseId: string, localMessageId: string) => void;
   purgeCompletedFiles: () => void;
-  handleFilesSelected: (event: Event) => void;
+  handleFilesSelected: (
+    event: Event,
+    options?: HandleFilesSelectedOptions,
+  ) => void;
+}
+
+export interface HandleFilesSelectedOptions {
+  onFilesExceeded?: (info: {
+    selected: number;
+    allowed: number;
+    kept: number;
+  }) => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -379,6 +392,7 @@ export interface UseFileUploadOptions {
   endpoints?: EndpointResolver;
   persist?: PersistOptions | boolean;
   maxConcurrency?: number;
+  maxFilesPerUpload?: number;
   retryPolicy?: RetryPolicy;
   validators?: ValidatorFn[];
   onEvent?: (event: UploadEvent) => void;

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

@@ -29,6 +29,10 @@ function makeEntry(id: string, remoteFileId: string): FileEntry {
   };
 }
 
+function makeSuccessEntry(id: string, remoteFileId: string): FileEntry {
+  return { ...makeEntry(id, remoteFileId), status: 'success', progress: 100 };
+}
+
 /**
  * Mock `HttpClient` whose `stream` captures the subscriber so the test can
  * drive SSE events synchronously. `post` resolves the workflow run id.
@@ -47,6 +51,18 @@ function createMockClient(captured: { cb?: (event: SseEvent) => void }) {
   } as unknown as HttpClient;
 }
 
+function createUploadMockClient() {
+  return {
+    get: vi.fn(),
+    delete: vi.fn(),
+    post: vi.fn().mockResolvedValue([{ id: 'remote-1' }]),
+    stream: vi.fn(() => ({
+      subscribe: vi.fn(),
+      close: vi.fn(),
+    })),
+  } as unknown as HttpClient;
+}
+
 function completeEvent(
   documents: Array<{ document_id?: string; file_id?: string }>,
 ): SseEvent {
@@ -60,6 +76,10 @@ function completeEvent(
   };
 }
 
+function createFile(name: string, size = 100): File {
+  return new File(['x'.repeat(size)], name, { type: 'application/pdf' });
+}
+
 describe('useFileUpload runWorkflow', () => {
   it('stamps documentId onto each file from the completed event, matched by file_id', async () => {
     const captured: { cb?: (event: SseEvent) => void } = {};
@@ -109,3 +129,130 @@ describe('useFileUpload runWorkflow', () => {
     expect(upload.getFileState('key-1')?.metadata.documentId).toBeUndefined();
   });
 });
+
+describe('useFileUpload maxFilesPerUpload', () => {
+  it('uses default maxFilesPerUpload of 20 when not configured', () => {
+    const upload = useFileUpload({
+      client: createUploadMockClient(),
+      workflowId: 'wf',
+      storeId: 'ss-1',
+    });
+
+    const constraints = upload.getSupportedFileTypes();
+    expect(constraints.maxFilesPerUpload).toBe(20);
+  });
+
+  it('respects custom maxFilesPerUpload from options', () => {
+    const upload = useFileUpload({
+      client: createUploadMockClient(),
+      workflowId: 'wf',
+      storeId: 'ss-1',
+      maxFilesPerUpload: 5,
+    });
+
+    const constraints = upload.getSupportedFileTypes();
+    expect(constraints.maxFilesPerUpload).toBe(5);
+  });
+
+  it('throws MAX_FILES_EXCEEDED when batch exceeds limit', async () => {
+    const upload = useFileUpload({
+      client: createUploadMockClient(),
+      workflowId: 'wf',
+      storeId: 'ss-1',
+      maxFilesPerUpload: 2,
+    });
+
+    const files = [
+      createFile('a.pdf'),
+      createFile('b.pdf'),
+      createFile('c.pdf'),
+    ];
+
+    await expect(upload.upload({ id: 'g1', files })).rejects.toMatchObject({
+      code: 'MAX_FILES_EXCEEDED',
+    });
+  });
+
+  it('throws MAX_FILES_EXCEEDED when active files plus new batch exceeds limit', async () => {
+    const client = createUploadMockClient();
+    (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
+      { id: 'remote-1' },
+    ]);
+
+    const upload = useFileUpload({
+      client,
+      workflowId: 'wf',
+      storeId: 'ss-1',
+      maxFilesPerUpload: 3,
+    });
+
+    upload.files.value.set('existing-1', makeSuccessEntry('existing-1', 'r-1'));
+    upload.files.value.set('existing-2', makeSuccessEntry('existing-2', 'r-2'));
+
+    await expect(
+      upload.upload({
+        id: 'g2',
+        files: [createFile('a.pdf'), createFile('b.pdf')],
+      }),
+    ).rejects.toMatchObject({
+      code: 'MAX_FILES_EXCEEDED',
+    });
+  });
+
+  it('allows upload when active files plus new batch is within limit', async () => {
+    const client = createUploadMockClient();
+    (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
+      { id: 'remote-new' },
+    ]);
+
+    const upload = useFileUpload({
+      client,
+      workflowId: 'wf',
+      storeId: 'ss-1',
+      maxFilesPerUpload: 3,
+    });
+
+    upload.files.value.set('existing-1', makeSuccessEntry('existing-1', 'r-1'));
+
+    const result = await upload.upload({
+      id: 'g3',
+      files: [createFile('a.pdf'), createFile('b.pdf')],
+    });
+
+    expect(result.results).toHaveLength(2);
+  });
+
+  it('does not count failed/cancelled/removed files towards active count', async () => {
+    const client = createUploadMockClient();
+    (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
+      { id: 'remote-new' },
+    ]);
+
+    const upload = useFileUpload({
+      client,
+      workflowId: 'wf',
+      storeId: 'ss-1',
+      maxFilesPerUpload: 2,
+    });
+
+    const failedEntry: FileEntry = {
+      ...makeEntry('failed-1', 'r-f1'),
+      status: 'failed',
+      error: { code: 'UPLOAD_FAILED', message: 'err', occurredAt: 'now' },
+    };
+    const cancelledEntry: FileEntry = {
+      ...makeEntry('cancelled-1', 'r-c1'),
+      status: 'cancelled',
+    };
+
+    upload.files.value.set('failed-1', failedEntry);
+    upload.files.value.set('cancelled-1', cancelledEntry);
+
+    const result = await upload.upload({
+      id: 'g4',
+      files: [createFile('a.pdf'), createFile('b.pdf')],
+    });
+
+    expect(result.results).toHaveLength(2);
+  });
+});

package/src/composables/fileUpload/useFileUpload.ts

@@ -473,7 +473,12 @@ export function useFileUpload(
   let storeId = options.storeId ?? '';
   const endpoints: EndpointResolver = options.endpoints ?? defaultEndpoints;
   const retryPolicy: RetryPolicy = options.retryPolicy ?? DEFAULT_RETRY_POLICY;
-  const constraints: FileConstraints = { ...DEFAULT_CONSTRAINTS };
+  const constraints: FileConstraints = {
+    ...DEFAULT_CONSTRAINTS,
+    ...(options.maxFilesPerUpload != null && {
+      maxFilesPerUpload: options.maxFilesPerUpload,
+    }),
+  };
   const validators: ValidatorFn[] = options.validators ?? [];
   const maxConcurrency = options.maxConcurrency ?? 3;
 
@@ -701,10 +706,17 @@ export function useFileUpload(
       ? params.files
       : [params.files];
 
-    if (fileList.length > constraints.maxFilesPerUpload) {
+    const activeFileCount = [...files.value.values()].filter(
+      (e) =>
+        e.status !== 'failed' &&
+        e.status !== 'cancelled' &&
+        e.status !== 'removed',
+    ).length;
+
+    if (activeFileCount + fileList.length > constraints.maxFilesPerUpload) {
       throw new SdkError(
         'MAX_FILES_EXCEEDED',
-        `Cannot upload ${fileList.length} files — maximum is ${constraints.maxFilesPerUpload}.`,
+        `Cannot upload ${fileList.length} file(s) — ${activeFileCount} already active, maximum is ${constraints.maxFilesPerUpload}.`,
       );
     }
 
@@ -1133,7 +1145,9 @@ export function useFileUpload(
       if (data.status === 'completed') {
         workflowRun.value.status = 'completed';
         workflowRun.value.completedAt = now();
-        completeInvolvedFiles(Array.isArray(data.documents) ? data.documents : []);
+        completeInvolvedFiles(
+          Array.isArray(data.documents) ? data.documents : [],
+        );
         emit({ type: 'workflow:completed', runId });
       } else if (data.status === 'failed' || data.status === 'error') {
         workflowRun.value.status = 'failed';