@aleph-alpha/chat-kit 3.2.0 → 3.3.0

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

@@ -1,4 +1,5 @@
 import type { PluggableList } from 'unified';
+import type { CkCitationSource } from '../CkCitation';
 
 export interface CkMarkdownElementClasses {
   h1?: string;
@@ -50,4 +51,29 @@ export interface CkMarkdownRendererProps {
   classes?: CkMarkdownElementClasses;
   /** Extra [unified](https://unifiedjs.com/) plugins to extend parsing. */
   plugins?: PluggableList;
+  /**
+   * Citation sources for inline `[n]` references in `content`. When provided,
+   * each `[n]` whose number matches a source's `index` is rendered as an
+   * interactive `CkCitation` (numbered marker + hover card); unmatched markers
+   * stay as plain text. Fully opt-in — omit it and markdown renders unchanged.
+   *
+   * Notes for callers:
+   * - Any numeric `[n]` in prose is turned into a citation when source `n`
+   *   exists — including incidental ones like array indexing (`arr[1]`). Wrap
+   *   such text in a code span (`` `arr[1]` ``) to keep it literal. `[n]` inside
+   *   code spans/blocks is never converted.
+   * - `index` must be unique across sources; on a collision the last wins.
+   * - Pass a stable/memoized array reference. A new array identity on every
+   *   render forces the markdown processor to rebuild.
+   */
+  citations?: CkCitationSource[];
+}
+
+export interface CkMarkdownRendererEmits {
+  /**
+   * Emitted when the user opens a citation's source from its card. The
+   * payload is the source `url`. Forward it to a handler that performs the
+   * (often auth-proxied) navigation.
+   */
+  (e: 'open-source', url: string): void;
 }

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

@@ -0,0 +1,94 @@
+import { h, type VNode } from 'vue';
+import { useCitationRendering } from './useCitationRendering';
+import { CkCitation } from '../CkCitation';
+import { remarkCitations } from '../../../helpers/unified/remarkCitations';
+import type { CkCitationSource } from '../CkCitation';
+
+const SOURCES: CkCitationSource[] = [
+  {
+    index: 1,
+    fileName: 'q3-report.pdf',
+    snippet: 'the cited chunk text',
+    locationLabel: 'Page 3',
+    url: '/api/v1/.../public-urls',
+  },
+];
+
+function citationPlaceholder(index: number): Element {
+  const el = document.createElement('span');
+  el.setAttribute('data-citation-index', String(index));
+  return el;
+}
+
+describe('useCitationRendering', () => {
+  describe('citationPlugins', () => {
+    it('adds no plugins when there are no citations', () => {
+      const { citationPlugins } = useCitationRendering(
+        () => undefined,
+        vi.fn(),
+      );
+      expect(citationPlugins.value).toEqual([]);
+    });
+
+    it('adds the remarkCitations plugin when citations are present', () => {
+      const { citationPlugins } = useCitationRendering(() => SOURCES, vi.fn());
+      expect(citationPlugins.value).toHaveLength(1);
+      const [plugin] = citationPlugins.value[0] as [unknown, unknown];
+      expect(plugin).toBe(remarkCitations);
+    });
+  });
+
+  describe('renderCitationNode', () => {
+    it('renders a matching placeholder as a CkCitation with the source props', () => {
+      const onOpenSource = vi.fn();
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        onOpenSource,
+      );
+
+      const vnode = renderCitationNode(citationPlaceholder(1)) as VNode;
+
+      expect(vnode.type).toBe(CkCitation);
+      expect(vnode.props).toMatchObject({
+        index: 1,
+        fileName: 'q3-report.pdf',
+        url: '/api/v1/.../public-urls',
+        onOpenSource,
+      });
+    });
+
+    it('returns null for a placeholder with no matching source', () => {
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        vi.fn(),
+      );
+      expect(renderCitationNode(citationPlaceholder(9))).toBeNull();
+    });
+
+    it('returns null for a non-citation element', () => {
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        vi.fn(),
+      );
+      expect(renderCitationNode(document.createElement('p'))).toBeNull();
+    });
+
+    it('delegates to the slot when provided, passing source and openSource', () => {
+      const onOpenSource = vi.fn();
+      const slotResult = [h('span', 'custom')];
+      const slot = vi.fn(() => slotResult);
+      const { renderCitationNode } = useCitationRendering(
+        () => SOURCES,
+        onOpenSource,
+      );
+
+      const result = renderCitationNode(citationPlaceholder(1), slot);
+
+      expect(slot).toHaveBeenCalledWith({
+        source: SOURCES[0],
+        openSource: onOpenSource,
+      });
+      expect(result).toBe(slotResult);
+    });
+  });
+});

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

@@ -707,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}.`,
       );
     }
 

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

@@ -94,30 +94,42 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     fetchMock.mockImplementation((url: string, init?: RequestInit) => {
       const method = init?.method ?? 'GET';
 
-      if (method === 'GET' && url.includes('/workflows')) {
+      if (method === 'GET' && url.endsWith('search-stores')) {
         return createMockFetchResponse({
           items: [
             {
-              id: 'workflow-api-1',
-              name: 'wf-1',
-              created_at: '2024-01-01T00:00:00Z',
+              id: 'store-1',
+              name: 'conv-1',
+              models: [{ embedding_model: 'test-model' }],
             },
           ],
           total: 1,
         });
       }
-      if (method === 'GET' && url.includes('search-stores')) {
+      if (method === 'GET' && url.includes('/workflows')) {
         return createMockFetchResponse({
-          items: [
-            {
-              id: 'store-1',
-              name: 'test-store',
-              models: [{ embedding_model: 'test-model' }],
-            },
-          ],
-          total: 1,
+          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' }]);
+      }
+      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({});
     });
   });
@@ -222,7 +234,6 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     });
     await settleAsyncUploads();
     expect(uploadMock.upload).not.toHaveBeenCalled();
-    expect(fetchMock).not.toHaveBeenCalled();
   });
 
   it('does not call onFilesExceeded when exactly at the limit', async () => {
@@ -258,3 +269,173 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     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');
+    });
+  });
+});