@aleph-alpha/chat-kit 3.1.3 → 3.3.0

package/src/components/base/CkMarkdownRenderer/useCitationRendering.ts

@@ -0,0 +1,52 @@
+import { computed, h, toValue, type MaybeRefOrGetter, type VNode } from 'vue';
+import type { PluggableList } from 'unified';
+import { remarkCitations } from '../../../helpers/unified/remarkCitations';
+import { CkCitation } from '../CkCitation';
+import type { CkCitationSource } from '../CkCitation';
+
+/** Scope passed to the `citation` slot when overriding how a source renders. */
+export type CkCitationSlot = (props: {
+  source: CkCitationSource;
+  openSource: (url: string) => void;
+}) => VNode[];
+
+/**
+ * The citation concern of `CkMarkdownRenderer`, extracted so the renderer stays
+ * markdown-focused and this logic is testable on its own.
+ */
+export function useCitationRendering(
+  citations: MaybeRefOrGetter<CkCitationSource[] | undefined>,
+  onOpenSource: (url: string) => void,
+) {
+  const sourcesByIndex = computed(
+    () =>
+      new Map(
+        (toValue(citations) ?? []).map((source) => [source.index, source]),
+      ),
+  );
+
+  const citationPlugins = computed<PluggableList>(() => {
+    const list = toValue(citations);
+    if (!list?.length) return [];
+    const indices = new Set(list.map((source) => source.index));
+    return [[remarkCitations, { indices }]];
+  });
+
+  // Returns null for non-citation elements so the renderer handles them normally.
+  function renderCitationNode(
+    el: Element,
+    slot?: CkCitationSlot,
+  ): VNode | VNode[] | null {
+    if (!el.hasAttribute('data-citation-index')) return null;
+
+    const index = Number(el.getAttribute('data-citation-index'));
+    const source = sourcesByIndex.value.get(index);
+    if (!source) return null;
+
+    // Expose the same handler so slot content can forward `open-source`.
+    if (slot) return slot({ source, openSource: onOpenSource });
+    return h(CkCitation, { ...source, onOpenSource });
+  }
+
+  return { citationPlugins, renderCitationNode };
+}

package/src/components/base/index.ts

@@ -1,5 +1,16 @@
 export { CkSendIcon, CkStopIcon } from './icons';
 export { CkAgentMessage } from './CkAgentMessage';
+export { CkCitation } from './CkCitation';
+export type {
+  CkCitationProps,
+  CkCitationEmits,
+  CkCitationSource,
+} from './CkCitation';
+export { CkCitationCard } from './CkCitationCard';
+export type {
+  CkCitationCardProps,
+  CkCitationCardEmits,
+} from './CkCitationCard';
 export { CkConversationLayout } from './CkConversationLayout';
 export type { CkConversationLayoutProps } from './CkConversationLayout';
 export { CkCopyMessageActionButton } from './CkCopyMessageActionButton';
@@ -36,6 +47,7 @@ export type { CkHistoryWrapperProps } from './CkHistoryWrapper';
 export { CkMarkdownRenderer } from './CkMarkdownRenderer';
 export type {
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkMarkdownElementClasses,
 } from './CkMarkdownRenderer';
 export { CkMessageActionButton } from './CkMessageActionButton';

package/src/components/index.ts

@@ -1,6 +1,8 @@
 // Base (presentational) components
 export {
   CkAgentMessage,
+  CkCitation,
+  CkCitationCard,
   CkConversationLayout,
   CkCopyMessageActionButton,
   CkDropZoneOverlay,
@@ -22,6 +24,11 @@ export {
   CkUserMessage,
 } from './base';
 export type {
+  CkCitationProps,
+  CkCitationEmits,
+  CkCitationSource,
+  CkCitationCardProps,
+  CkCitationCardEmits,
   CkConversationLayoutProps,
   CkDropZoneOverlayProps,
   CkDropZoneOverlayEmits,
@@ -42,6 +49,7 @@ export type {
   CkHistoryWrapperProps,
   CkMarkdownElementClasses,
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkModelOption,
   CkModelSelectorProps,
   CkModelSelectorEmits,

package/src/composables/fileUpload/types.ts

@@ -34,6 +34,8 @@ export interface EndpointResolver {
   files: (storeId: string) => string;
   file: (storeId: string, fileId: string) => string;
   filePublicUrl: (storeId: string, fileId: string) => string;
+  workflows: (storeId: string) => string;
+  createWorkflow: (storeId: string) => string;
   workflowRun: (storeId: string, workflowId: string) => string;
   workflowRunEventStream: (
     storeId: string,
@@ -47,6 +49,9 @@ export const defaultEndpoints: EndpointResolver = {
   file: (storeId, fileId) => `search-stores/${storeId}/files/${fileId}`,
   filePublicUrl: (storeId, fileId) =>
     `search-stores/${storeId}/files/${fileId}/public-urls?ttl=1h`,
+  workflows: (storeId) =>
+    `search-stores/${storeId}/workflows?limit=20&offset=0&created_after=&created_before=`,
+  createWorkflow: (storeId) => `search-stores/${storeId}/workflows`,
   workflowRun: (storeId, workflowId) =>
     `search-stores/${storeId}/workflows/${workflowId}/runs`,
   workflowRunEventStream: (storeId, workflowId, runId) =>
@@ -410,6 +415,7 @@ export interface UseFileUploadReturn {
   updateFileMetadata: (id: string, meta: Record<string, unknown>) => void;
   clearState: () => void;
   setStoreId: (id: string) => void;
+  setWorkflowId: (id: string) => void;
   getPublicUrl: (fileId: string) => Promise<string>;
 
   scopeBy: (metadataKey: string, value: string) => ScopedFileView;

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

@@ -199,33 +199,7 @@ describe('useFileUpload maxFilesPerUpload', () => {
     });
   });
 
-  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 () => {
+  it('allows upload when batch is within limit regardless of existing active files', async () => {
     const client = createUploadMockClient();
     (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
       { id: 'remote-new' },
@@ -239,6 +213,7 @@ describe('useFileUpload maxFilesPerUpload', () => {
     });
 
     upload.files.value.set('existing-1', makeSuccessEntry('existing-1', 'r-1'));
+    upload.files.value.set('existing-2', makeSuccessEntry('existing-2', 'r-2'));
 
     const result = await upload.upload({
       id: 'g3',
@@ -247,38 +222,4 @@ describe('useFileUpload maxFilesPerUpload', () => {
 
     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

@@ -469,8 +469,9 @@ function deriveStateKey(
 export function useFileUpload(
   options: UseFileUploadOptions,
 ): UseFileUploadReturn {
-  const { client, workflowId } = options;
+  const { client } = options;
   let storeId = options.storeId ?? '';
+  let workflowId = options.workflowId;
   const endpoints: EndpointResolver = options.endpoints ?? defaultEndpoints;
   const retryPolicy: RetryPolicy = options.retryPolicy ?? DEFAULT_RETRY_POLICY;
   const constraints: FileConstraints = {
@@ -706,17 +707,10 @@ export function useFileUpload(
       ? params.files
       : [params.files];
 
-    const activeFileCount = [...files.value.values()].filter(
-      (e) =>
-        e.status !== 'failed' &&
-        e.status !== 'cancelled' &&
-        e.status !== 'removed',
-    ).length;
-
-    if (activeFileCount + fileList.length > constraints.maxFilesPerUpload) {
+    if (fileList.length > constraints.maxFilesPerUpload) {
       throw new SdkError(
         'MAX_FILES_EXCEEDED',
-        `Cannot upload ${fileList.length} file(s) — ${activeFileCount} already active, maximum is ${constraints.maxFilesPerUpload}.`,
+        `Cannot upload ${fileList.length} file(s) — maximum per selection is ${constraints.maxFilesPerUpload}.`,
       );
     }
 
@@ -1257,6 +1251,10 @@ export function useFileUpload(
     storeId = id;
   }
 
+  function setWorkflowId(id: string) {
+    workflowId = id;
+  }
+
   async function getPublicUrl(fileId: string): Promise<string> {
     const res = await client.post<{ url: string; expires_at: string }>(
       endpoints.filePublicUrl(storeId, fileId),
@@ -1277,6 +1275,7 @@ export function useFileUpload(
     updateFileMetadata,
     clearState,
     setStoreId,
+    setWorkflowId,
     getPublicUrl,
 
     scopeBy,

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

@@ -1,6 +1,34 @@
+import { flushPromises } from '@vue/test-utils';
+import { ref } from 'vue';
 import { createDocumentUploadProvider } from './useFileUploadWrapper';
 import type { DocumentUploadConfig } from './types';
 
+const uploadMock = vi.hoisted(() => ({
+  upload: vi.fn().mockResolvedValue({ results: [] }),
+}));
+
+vi.mock('./useFileUpload', () => ({
+  useFileUpload: vi.fn((options) => {
+    const scopedFiles = ref([]);
+    return {
+      files: ref(new Map()),
+      getSupportedFileTypes: () => ({
+        maxFilesPerUpload: options.maxFilesPerUpload ?? 20,
+        allowedMimeTypes: ['application/pdf'],
+        allowedExtensions: ['.pdf'],
+        maxFileSizeBytes: 100 * 1024 * 1024,
+      }),
+      scopeBy: () => ({ files: scopedFiles }),
+      upload: uploadMock.upload,
+      runWorkflow: vi.fn().mockResolvedValue({ close: vi.fn() }),
+      setStoreId: vi.fn(),
+      setWorkflowId: vi.fn(),
+      updateFileMetadata: vi.fn(),
+      removeFile: vi.fn(),
+    };
+  }),
+}));
+
 function createFile(name: string, size = 100): File {
   return new File(['x'.repeat(size)], name, { type: 'application/pdf' });
 }
@@ -31,6 +59,7 @@ function buildConfig(
   return {
     baseUrl: 'https://test.example.com',
     workflowId: 'wf-1',
+    persist: false,
     searchStoreConfig: {
       models: [
         {
@@ -48,28 +77,43 @@ function buildConfig(
   };
 }
 
+async function settleAsyncUploads() {
+  await flushPromises();
+}
+
 describe('useFileUploadWrapper handleFilesSelected', () => {
   let fetchMock: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
+    uploadMock.upload.mockClear();
+    uploadMock.upload.mockResolvedValue({ results: [] });
+
     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')) {
+      if (method === 'GET' && url.endsWith('search-stores')) {
         return createMockFetchResponse({
           items: [
             {
               id: 'store-1',
-              name: 'test-store',
+              name: 'conv-1',
               models: [{ embedding_model: 'test-model' }],
             },
           ],
           total: 1,
         });
       }
+      if (method === 'GET' && url.includes('/workflows')) {
+        return createMockFetchResponse({
+          items: [{ id: 'wf-1', name: 'wf-1' }],
+        });
+      }
+      if (method === 'POST' && url.endsWith('search-stores')) {
+        return createMockFetchResponse({ id: 'new-store-id' });
+      }
       if (method === 'POST' && url.includes('/files')) {
         return createMockFetchResponse([{ id: 'remote-1' }]);
       }
@@ -90,7 +134,8 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     });
   });
 
-  afterEach(() => {
+  afterEach(async () => {
+    await settleAsyncUploads();
     vi.unstubAllGlobals();
   });
 
@@ -115,26 +160,31 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
 
     const onFilesExceeded = vi.fn();
-    const event = makeInputEvent([createFile('a.pdf'), createFile('b.pdf')]);
+    const files = [createFile('a.pdf'), createFile('b.pdf')];
+    const event = makeInputEvent(files);
 
     handleFilesSelected(event, { onFilesExceeded });
 
     expect(onFilesExceeded).not.toHaveBeenCalled();
+    await settleAsyncUploads();
+    expect(uploadMock.upload).toHaveBeenCalledOnce();
+    expect(uploadMock.upload.mock.calls[0]?.[0].files).toEqual(files);
   });
 
-  it('truncates files to available slots and calls onFilesExceeded', () => {
+  it('truncates files to available slots and calls onFilesExceeded', async () => {
     const provider = createDocumentUploadProvider(
       buildConfig({ maxFilesPerUpload: 2 }),
     );
     const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
 
     const onFilesExceeded = vi.fn();
-    const event = makeInputEvent([
+    const files = [
       createFile('a.pdf'),
       createFile('b.pdf'),
       createFile('c.pdf'),
       createFile('d.pdf'),
-    ]);
+    ];
+    const event = makeInputEvent(files);
 
     handleFilesSelected(event, { onFilesExceeded });
 
@@ -143,9 +193,13 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
       allowed: 2,
       kept: 2,
     });
+    await settleAsyncUploads();
+    expect(uploadMock.upload.mock.calls[0]?.[0].files).toEqual(
+      files.slice(0, 2),
+    );
   });
 
-  it('resets input value after handling', () => {
+  it('resets input value after handling', async () => {
     const provider = createDocumentUploadProvider(
       buildConfig({ maxFilesPerUpload: 5 }),
     );
@@ -159,6 +213,7 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     handleFilesSelected(event);
 
     expect(valueSetter).toHaveBeenCalledWith('');
+    await settleAsyncUploads();
   });
 
   it('does not upload when no slots are available', async () => {
@@ -177,9 +232,11 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
       allowed: 0,
       kept: 0,
     });
+    await settleAsyncUploads();
+    expect(uploadMock.upload).not.toHaveBeenCalled();
   });
 
-  it('does not call onFilesExceeded when exactly at the limit', () => {
+  it('does not call onFilesExceeded when exactly at the limit', async () => {
     const provider = createDocumentUploadProvider(
       buildConfig({ maxFilesPerUpload: 3 }),
     );
@@ -195,9 +252,11 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     handleFilesSelected(event, { onFilesExceeded });
 
     expect(onFilesExceeded).not.toHaveBeenCalled();
+    await settleAsyncUploads();
+    expect(uploadMock.upload).toHaveBeenCalledOnce();
   });
 
-  it('works without onFilesExceeded callback (no crash)', () => {
+  it('works without onFilesExceeded callback (no crash)', async () => {
     const provider = createDocumentUploadProvider(
       buildConfig({ maxFilesPerUpload: 1 }),
     );
@@ -206,5 +265,177 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     const event = makeInputEvent([createFile('a.pdf'), createFile('b.pdf')]);
 
     expect(() => handleFilesSelected(event)).not.toThrow();
+    await settleAsyncUploads();
+    expect(uploadMock.upload).toHaveBeenCalledOnce();
+  });
+});
+
+describe('useFileUploadWrapper search store resolution', () => {
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('reuses an existing search store named after the conversation id', async () => {
+    fetchMock.mockImplementation((url: string, init?: RequestInit) => {
+      const method = init?.method ?? 'GET';
+
+      if (method === 'GET' && url.endsWith('search-stores')) {
+        return createMockFetchResponse({
+          items: [
+            {
+              id: 'existing-store',
+              name: 'conv-1',
+              models: [{ embedding_model: 'test-model' }],
+            },
+          ],
+          total: 1,
+        });
+      }
+      if (method === 'GET' && url.includes('/workflows')) {
+        return createMockFetchResponse({
+          items: [{ id: 'wf-1', name: 'wf-1' }],
+        });
+      }
+      return createMockFetchResponse({});
+    });
+
+    const provider = createDocumentUploadProvider(buildConfig());
+    const { storeId } = provider.useDocumentUpload('conv-1');
+
+    await vi.waitFor(() => {
+      expect(storeId.value).toBe('existing-store');
+    });
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://test.example.com/search-stores',
+      expect.objectContaining({ method: 'GET' }),
+    );
+    expect(
+      fetchMock.mock.calls.some(
+        ([url, init]) =>
+          init?.method === 'POST' && String(url).endsWith('search-stores'),
+      ),
+    ).toBe(false);
+  });
+
+  it('creates a search store and workflow when none exists for the conversation', async () => {
+    fetchMock.mockImplementation((url: string, init?: RequestInit) => {
+      const method = init?.method ?? 'GET';
+
+      if (method === 'GET' && url.endsWith('search-stores')) {
+        return createMockFetchResponse({ items: [], total: 0 });
+      }
+      if (method === 'POST' && url.endsWith('search-stores')) {
+        const body = JSON.parse(String(init?.body));
+        expect(body.name).toBe('conv-2');
+        return createMockFetchResponse({ id: 'created-store' });
+      }
+      if (method === 'POST' && url.includes('/workflows')) {
+        return createMockFetchResponse({ id: 'wf-run-1' });
+      }
+      return createMockFetchResponse({});
+    });
+
+    const provider = createDocumentUploadProvider(buildConfig());
+    const { storeId } = provider.useDocumentUpload('conv-2');
+
+    await vi.waitFor(() => {
+      expect(storeId.value).toBe('created-store');
+    });
+
+    expect(
+      fetchMock.mock.calls.some(
+        ([url, init]) =>
+          init?.method === 'POST' &&
+          String(url).endsWith('search-stores/created-store/workflows'),
+      ),
+    ).toBe(true);
+  });
+
+  it('creates a workflow when reusing a store that has none', async () => {
+    fetchMock.mockImplementation((url: string, init?: RequestInit) => {
+      const method = init?.method ?? 'GET';
+
+      if (method === 'GET' && url.endsWith('search-stores')) {
+        return createMockFetchResponse({
+          items: [
+            {
+              id: 'orphan-store',
+              name: 'conv-3',
+              models: [{ embedding_model: 'test-model' }],
+            },
+          ],
+          total: 1,
+        });
+      }
+      if (method === 'GET' && url.includes('/workflows')) {
+        return createMockFetchResponse({ items: [] });
+      }
+      if (method === 'POST' && url.includes('/workflows')) {
+        return createMockFetchResponse({ id: 'wf-1' });
+      }
+      return createMockFetchResponse({});
+    });
+
+    const provider = createDocumentUploadProvider(buildConfig());
+    const { storeId } = provider.useDocumentUpload('conv-3');
+
+    await vi.waitFor(() => {
+      expect(storeId.value).toBe('orphan-store');
+    });
+
+    expect(
+      fetchMock.mock.calls.some(
+        ([url, init]) =>
+          init?.method === 'POST' &&
+          String(url).endsWith('search-stores/orphan-store/workflows'),
+      ),
+    ).toBe(true);
+  });
+
+  it('resolves a different store per conversation id', async () => {
+    fetchMock.mockImplementation((url: string, init?: RequestInit) => {
+      const method = init?.method ?? 'GET';
+
+      if (method === 'GET' && url.endsWith('search-stores')) {
+        return createMockFetchResponse({
+          items: [
+            {
+              id: 'store-a',
+              name: 'conv-a',
+              models: [{ embedding_model: 'test-model' }],
+            },
+            {
+              id: 'store-b',
+              name: 'conv-b',
+              models: [{ embedding_model: 'test-model' }],
+            },
+          ],
+          total: 2,
+        });
+      }
+      if (method === 'GET' && url.includes('/workflows')) {
+        return createMockFetchResponse({
+          items: [{ id: 'wf-1', name: 'wf-1' }],
+        });
+      }
+      return createMockFetchResponse({});
+    });
+
+    const provider = createDocumentUploadProvider(buildConfig());
+    const uploadA = provider.useDocumentUpload('conv-a');
+    const uploadB = provider.useDocumentUpload('conv-b');
+
+    await vi.waitFor(() => {
+      expect(uploadA.storeId.value).toBe('store-a');
+      expect(uploadB.storeId.value).toBe('store-b');
+    });
   });
 });