@aleph-alpha/chat-kit 2.1.0 → 2.2.0

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

@@ -0,0 +1,202 @@
+import { createDocumentUploadProvider } from './useFileUploadWrapper';
+import type { DocumentUploadConfig } from './types';
+
+function createFile(name: string, size = 100): File {
+  return new File(['x'.repeat(size)], name, { type: 'application/pdf' });
+}
+
+function createMockFetchResponse(body: unknown, status = 200) {
+  return Promise.resolve({
+    ok: status >= 200 && status < 300,
+    status,
+    headers: new Headers({ 'content-length': '1' }),
+    json: () => Promise.resolve(body),
+    body: null,
+  });
+}
+
+function makeInputEvent(files: File[]): Event {
+  const input = document.createElement('input');
+  input.type = 'file';
+  Object.defineProperty(input, 'files', {
+    value: files,
+    writable: true,
+  });
+  return { target: input } as unknown as Event;
+}
+
+function buildConfig(
+  overrides?: Partial<DocumentUploadConfig>,
+): DocumentUploadConfig {
+  return {
+    baseUrl: 'https://test.example.com',
+    userId: 'user-1',
+    workflowId: 'wf-1',
+    searchStoreConfig: {
+      models: [
+        {
+          type: 'dense',
+          dimension: 1024,
+          distance: 'cosine',
+          modality: 'text',
+          embedding_model: 'test-model',
+        },
+      ],
+      fusion_strategy: { type: 'rrf' },
+    },
+    workflowConfig: { name: 'wf-1' },
+    ...overrides,
+  };
+}
+
+describe('useFileUploadWrapper handleFilesSelected', () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+
+    fetchMock.mockImplementation((url: string, init?: RequestInit) => {
+      const method = init?.method ?? 'GET';
+
+      if (method === 'GET' && url.includes('search-stores')) {
+        return createMockFetchResponse([{ id: 'store-1' }]);
+      }
+      if (method === 'POST' && url.includes('/files')) {
+        return createMockFetchResponse([{ id: 'remote-1' }]);
+      }
+      if (method === 'POST' && url.includes('/workflows')) {
+        return createMockFetchResponse({ id: 'run-1' });
+      }
+      if (url.includes('/event-stream')) {
+        return createMockFetchResponse(null, 200).then((res) => ({
+          ...res,
+          body: new ReadableStream({
+            start(controller) {
+              controller.close();
+            },
+          }),
+        }));
+      }
+      return createMockFetchResponse({});
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('exposes maxFilesPerUpload from config', () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 7 }),
+    );
+    const result = provider.useDocumentUpload('conv-1');
+    expect(result.maxFilesPerUpload).toBe(7);
+  });
+
+  it('defaults maxFilesPerUpload to 20 when not configured', () => {
+    const provider = createDocumentUploadProvider(buildConfig());
+    const result = provider.useDocumentUpload('conv-1');
+    expect(result.maxFilesPerUpload).toBe(20);
+  });
+
+  it('uploads all files when within the limit', async () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 5 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const onFilesExceeded = vi.fn();
+    const event = makeInputEvent([createFile('a.pdf'), createFile('b.pdf')]);
+
+    handleFilesSelected(event, { onFilesExceeded });
+
+    expect(onFilesExceeded).not.toHaveBeenCalled();
+  });
+
+  it('truncates files to available slots and calls onFilesExceeded', () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 2 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const onFilesExceeded = vi.fn();
+    const event = makeInputEvent([
+      createFile('a.pdf'),
+      createFile('b.pdf'),
+      createFile('c.pdf'),
+      createFile('d.pdf'),
+    ]);
+
+    handleFilesSelected(event, { onFilesExceeded });
+
+    expect(onFilesExceeded).toHaveBeenCalledWith({
+      selected: 4,
+      allowed: 2,
+      kept: 2,
+    });
+  });
+
+  it('resets input value after handling', () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 5 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const event = makeInputEvent([createFile('a.pdf')]);
+    const input = (event as any).target as HTMLInputElement;
+
+    const valueSetter = vi.spyOn(input, 'value', 'set');
+
+    handleFilesSelected(event);
+
+    expect(valueSetter).toHaveBeenCalledWith('');
+  });
+
+  it('does not upload when no slots are available', async () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 0 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const onFilesExceeded = vi.fn();
+    const event = makeInputEvent([createFile('a.pdf')]);
+
+    handleFilesSelected(event, { onFilesExceeded });
+
+    expect(onFilesExceeded).toHaveBeenCalledWith({
+      selected: 1,
+      allowed: 0,
+      kept: 0,
+    });
+  });
+
+  it('does not call onFilesExceeded when exactly at the limit', () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 3 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const onFilesExceeded = vi.fn();
+    const event = makeInputEvent([
+      createFile('a.pdf'),
+      createFile('b.pdf'),
+      createFile('c.pdf'),
+    ]);
+
+    handleFilesSelected(event, { onFilesExceeded });
+
+    expect(onFilesExceeded).not.toHaveBeenCalled();
+  });
+
+  it('works without onFilesExceeded callback (no crash)', () => {
+    const provider = createDocumentUploadProvider(
+      buildConfig({ maxFilesPerUpload: 1 }),
+    );
+    const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
+
+    const event = makeInputEvent([createFile('a.pdf'), createFile('b.pdf')]);
+
+    expect(() => handleFilesSelected(event)).not.toThrow();
+  });
+});

package/src/composables/fileUpload/useFileUploadWrapper.ts

@@ -9,6 +9,7 @@ import type {
   DocumentUploadConfig,
   DocumentUploadProvider,
   DocumentUploadReturn,
+  HandleFilesSelectedOptions,
   UploadEvent,
 } from './types';
 import { useFileUpload } from './useFileUpload';
@@ -166,6 +167,7 @@ export function createDocumentUploadProvider(
     workflowConfig,
     persist = true,
     maxConcurrency = 3,
+    maxFilesPerUpload,
   } = config;
 
   const defaultHeaders: Record<string, string> = {
@@ -249,6 +251,7 @@ export function createDocumentUploadProvider(
         workflowId,
         persist,
         maxConcurrency,
+        maxFilesPerUpload,
         onEvent,
       });
     }
@@ -262,6 +265,7 @@ export function createDocumentUploadProvider(
   ): DocumentUploadReturn {
     const fileInput = ref<HTMLInputElement | null>(null);
     const upload = getUploadInstance();
+    const resolvedMaxFiles = upload.getSupportedFileTypes().maxFilesPerUpload;
     const storeId = ref<string>(resolvedStoreId ?? '');
 
     const currentScope = shallowRef<ScopedFileView | null>(
@@ -360,10 +364,27 @@ export function createDocumentUploadProvider(
       }
     }
 
-    function handleFilesSelected(event: Event) {
+    function handleFilesSelected(
+      event: Event,
+      options?: HandleFilesSelectedOptions,
+    ) {
       const input = event.target as HTMLInputElement;
-      const fileList = Array.from(input.files ?? []);
-      uploadFiles(fileList);
+      let fileList = Array.from(input.files ?? []);
+      const availableSlots = resolvedMaxFiles - unassignedFiles.value.length;
+
+      if (fileList.length > availableSlots) {
+        const kept = Math.max(0, availableSlots);
+        options?.onFilesExceeded?.({
+          selected: fileList.length,
+          allowed: availableSlots,
+          kept,
+        });
+        fileList = fileList.slice(0, kept);
+      }
+
+      if (fileList.length > 0) {
+        uploadFiles(fileList);
+      }
       input.value = '';
     }
 
@@ -371,6 +392,7 @@ export function createDocumentUploadProvider(
       upload,
       storeId,
       fileInput,
+      maxFilesPerUpload: resolvedMaxFiles,
       uploadFiles,
       unassignedFiles,
       assignFilesToMessage,

package/src/index.ts

@@ -66,6 +66,7 @@ export {
   CkConversation,
   CkConversationLayout,
   CkCopyMessageActionButton,
+  CkDropZoneOverlay,
   CkFeedbackButton,
   CkFeedbackDialog,
   CkFileItemsList,
@@ -87,6 +88,10 @@ export {
 export type {
   CkConversationLayoutProps,
   CkConversationProps,
+  CkDropZoneOverlayProps,
+  CkDropZoneOverlayEmits,
+  CkDropZoneRejection,
+  CkDropZoneRejectionReason,
   CkFeedbackButtonProps,
   CkFeedbackDialogEmits,
   CkFeedbackDialogProps,