@aleph-alpha/chat-kit 3.1.3 → 3.3.0

package/src/components/base/CkCitationCard/CkCitationCard.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { UiFileType, UiButton, UiIcon } from '@aleph-alpha/ui-library';
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
+import type { CkCitationCardProps } from './types';
+
+defineOptions({
+  name: 'CkCitationCard',
+});
+
+const props = withDefaults(defineProps<CkCitationCardProps>(), {
+  locationLabel: undefined,
+  url: undefined,
+  openSourceLabel: undefined,
+});
+
+const emit = defineEmits<{
+  'open-source': [url: string];
+}>();
+
+const labels = useChatKitLabels();
+
+// Resolution order: per-instance prop, injected label, English default.
+const openSourceAriaLabel = computed(
+  () =>
+    props.openSourceLabel ??
+    labels.value.citationOpenSource ??
+    defaultChatKitLabels.citationOpenSource!,
+);
+
+function handleOpen(): void {
+  if (props.url) {
+    emit('open-source', props.url);
+  }
+}
+</script>
+
+<template>
+  <div
+    class="ck-citation-card flex w-[22.5rem] max-w-[90vw] flex-col gap-2 rounded-md bg-background-surface-floating px-6 pb-6 pt-4 shadow-md"
+  >
+    <div class="flex items-center gap-3">
+      <UiFileType :filename="fileName" class="shrink-0" />
+      <p
+        class="min-w-0 flex-1 truncate text-sm font-medium text-content-on-surface-primary"
+        :title="fileName"
+      >
+        {{ fileName }}
+      </p>
+      <UiButton
+        v-if="url"
+        variant="ghost"
+        size="icon-sm"
+        :aria-label="openSourceAriaLabel"
+        class="shrink-0"
+        @click="handleOpen"
+      >
+        <UiIcon name="external-link" :size="16" aria-hidden="true" />
+      </UiButton>
+    </div>
+
+    <p class="break-words text-sm leading-5 text-content-on-surface-secondary">
+      {{ snippet }}
+    </p>
+
+    <p
+      v-if="locationLabel"
+      class="text-sm leading-5 text-content-on-surface-muted"
+    >
+      {{ locationLabel }}
+    </p>
+  </div>
+</template>

package/src/components/base/CkCitationCard/index.ts

@@ -0,0 +1,2 @@
+export { default as CkCitationCard } from './CkCitationCard.vue';
+export type * from './types';

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

@@ -0,0 +1,51 @@
+/**
+ * The floating card that describes a single citation source: the source file,
+ * the cited excerpt, an optional location (e.g. page), and an optional
+ * external-link action. Rendered as the hover/focus content of `CkCitation`,
+ * but usable on its own wherever a source preview is needed.
+ *
+ * Purely presentational and prop-driven. The external-link action is exposed
+ * as an `open-source` event rather than a plain link, because the source URL
+ * is often auth-proxied and cannot be navigated to directly.
+ *
+ * @category Data Display
+ * @useCases citation source preview, hover card for an inline reference, show the cited file/page/excerpt
+ * @keywords citation, source, card, popover, reference, file, page, excerpt, preview
+ * @related CkCitation, CkMarkdownRenderer, CkAgentMessage
+ */
+export interface CkCitationCardProps {
+  /**
+   * Source file name. Rendered as the card title and used to derive the
+   * file-type badge icon/tone (pass the original name with its extension,
+   * e.g. `q3-report.pdf`).
+   */
+  fileName: string;
+  /** The cited chunk text, shown in the card body. */
+  snippet: string;
+  /**
+   * Location label shown in the footer, e.g. `"Page 3"`. Pass a fully
+   * formatted, localized string — the component does no number formatting.
+   * Omit for non-paginated sources to hide the footer.
+   */
+  locationLabel?: string;
+  /**
+   * When set, the external-link action is shown in the header. Activating it
+   * emits `open-source` with this value; the host opens it (it may be an
+   * auth-proxied URL that can't be a plain link). Omit to hide the action.
+   */
+  url?: string;
+  /**
+   * Accessible label for the external-link action. When omitted, resolves from
+   * `useChatKitLabels().citationOpenSource` (English default `"Open source"`).
+   * Set this to override per instance.
+   */
+  openSourceLabel?: string;
+}
+
+export interface CkCitationCardEmits {
+  /**
+   * Emitted when the user activates the header external-link action. The
+   * payload is `url`. Only emitted when `url` is set.
+   */
+  (e: 'open-source', url: string): void;
+}

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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { h } from 'vue';
 import CkMarkdownRenderer from './CkMarkdownRenderer.vue';
 import { defaultMarkdownClasses } from './defaultMarkdownClasses';
@@ -345,4 +346,127 @@ describe('CkMarkdownRenderer', () => {
       expect(container.querySelector('p')?.textContent).toBe('PREFIX:HELLO');
     });
   });
+
+  describe('citations', () => {
+    const citations = [
+      {
+        index: 1,
+        fileName: 'q3-report.pdf',
+        snippet: 'the cited chunk text',
+        locationLabel: 'Page 3',
+        url: '/api/v1/.../public-urls',
+      },
+    ];
+
+    it('still parses markdown and renders [n] as an interactive citation', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: 'Adoption rose **25%** [1].', citations },
+      });
+
+      // Markdown is parsed (bold becomes <strong>, not literal asterisks)...
+      expect(container.querySelector('strong')?.textContent).toBe('25%');
+      expect(container.textContent).not.toContain('**');
+      // ...and [1] becomes a citation marker.
+      expect(
+        screen.getByRole('button', { name: 'Source 1' }),
+      ).toBeInTheDocument();
+    });
+
+    it('leaves an unsupported [n] (no matching source) as plain text', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: 'No source for this [9].', citations },
+      });
+
+      expect(container.textContent).toContain('[9]');
+      expect(screen.queryByRole('button', { name: 'Source 9' })).toBeNull();
+    });
+
+    it('emits open-source end-to-end when a citation card action is used', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkMarkdownRenderer, {
+        props: { content: 'See the report [1].', citations },
+      });
+
+      await user.hover(screen.getByRole('button', { name: 'Source 1' }));
+      await user.click(
+        await screen.findByRole('button', { name: 'Open source' }),
+      );
+
+      expect(emitted('open-source')).toEqual([['/api/v1/.../public-urls']]);
+    });
+
+    it('renders the `citation` slot instead of the default marker when provided', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkMarkdownRenderer, {
+        props: { content: 'See the report [1].', citations },
+        slots: {
+          citation: ({
+            source,
+            openSource,
+          }: {
+            source: { index: number; url?: string };
+            openSource: (url: string) => void;
+          }) =>
+            h(
+              'button',
+              { onClick: () => source.url && openSource(source.url) },
+              `custom-${source.index}`,
+            ),
+        },
+      });
+
+      const custom = screen.getByRole('button', { name: 'custom-1' });
+      expect(custom).toBeInTheDocument();
+      // The default chip is replaced, not added alongside.
+      expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+
+      await user.click(custom);
+      expect(emitted('open-source')).toEqual([['/api/v1/.../public-urls']]);
+    });
+
+    describe('numeric marker conversion across markdown contexts', () => {
+      it('does not convert [n] inside an inline code span', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: 'use `arr[1]` here', citations },
+        });
+        expect(container.querySelector('code')?.textContent).toBe('arr[1]');
+        expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+      });
+
+      it('does not convert [n] inside a fenced code block', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: '```\n[1]\n```', citations },
+        });
+        expect(container.querySelector('pre')?.textContent).toContain('[1]');
+        expect(screen.queryByRole('button', { name: 'Source 1' })).toBeNull();
+      });
+
+      it('does not convert a non-numeric [note] marker', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: 'see [note] here', citations },
+        });
+        expect(container.textContent).toContain('[note]');
+      });
+
+      it('converts a marker at the very start of the content', () => {
+        render(CkMarkdownRenderer, {
+          props: { content: '[1] leads the paragraph', citations },
+        });
+        expect(
+          screen.getByRole('button', { name: 'Source 1' }),
+        ).toBeInTheDocument();
+      });
+
+      it('converts markers inside a heading and a list item', () => {
+        const { container } = render(CkMarkdownRenderer, {
+          props: { content: '# Title [1]\n\n- item [1]', citations },
+        });
+        expect(container.querySelector('h1')).toBeInTheDocument();
+        expect(container.querySelector('li')).toBeInTheDocument();
+        expect(
+          screen.getAllByRole('button', { name: 'Source 1' }),
+        ).toHaveLength(2);
+      });
+    });
+  });
 });

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

@@ -430,3 +430,121 @@ export const WithCustomPlugin: Story = {
   }),
   parameters: { docs: { source: { code: withCustomPluginTemplateSource } } },
 };
+
+const withCitationsTemplateSource = `<script setup lang="ts">
+import { CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+import type { CkCitationSource } from '@aleph-alpha/chat-kit';
+
+// An assistant reply is markdown that may contain inline [n] references.
+const content = [
+  'Customized training drove measurably better outcomes.',
+  '',
+  'Departments with tailored sessions saw a **25% higher adoption rate** [1],',
+  'and reported fewer support tickets in the first quarter [2].',
+].join('\\n');
+
+// The numbered sources, mapped from the backend citations manifest.
+const citations: CkCitationSource[] = [
+  {
+    index: 1,
+    fileName: 'Q2_Business_Plan.pdf',
+    snippet: 'Departments that received customized training saw a 25% higher adoption rate…',
+    locationLabel: 'Page 3',
+    url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
+  },
+  {
+    index: 2,
+    fileName: 'Support-Metrics-Q1.csv',
+    snippet: 'Ticket volume fell 18% quarter-over-quarter for tailored-training cohorts.',
+    locationLabel: 'Row 42',
+    url: '/api/v1/search-stores/ss_abc/files/file_456/public-urls',
+  },
+];
+
+function openSource(url: string) {
+  // Source URLs are auth-proxied; the host performs the navigation.
+  window.open(url, '_blank', 'noopener');
+}
+</script>
+
+<template>
+  <CkMarkdownRenderer
+    :content="content"
+    :citations="citations"
+    @open-source="openSource"
+  />
+</template>`;
+
+const CITATIONS = [
+  {
+    index: 1,
+    fileName: 'Q2_Business_Plan.pdf',
+    snippet:
+      'Departments that received customized training saw a 25% higher adoption rate of the new tools compared to those with generic training.',
+    locationLabel: 'Page 3',
+    url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
+  },
+  {
+    index: 2,
+    fileName: 'Support-Metrics-Q1.csv',
+    snippet:
+      'Ticket volume fell 18% quarter-over-quarter for the tailored-training cohorts versus the control group.',
+    locationLabel: 'Row 42',
+    url: '/api/v1/search-stores/ss_abc/files/file_456/public-urls',
+  },
+];
+
+/**
+ * The headline integration: an assistant reply is **markdown that contains
+ * inline `[n]` references**, and the `citations` prop turns each one into an
+ * interactive `CkCitation` (numbered marker + hover card) — handled as a
+ * dedicated case, distinct from ordinary markdown. Hover a marker to preview
+ * its source; the external-link action emits `open-source`.
+ */
+export const WithCitations: Story = {
+  render: () => ({
+    components: { CkMarkdownRenderer },
+    setup() {
+      const content = [
+        '## Training impact',
+        '',
+        'Customized training drove measurably better outcomes across teams.',
+        '',
+        'Departments with tailored sessions saw a **25% higher adoption rate** [1],',
+        'and reported markedly fewer support tickets in the first quarter [2].',
+        '',
+        '- Faster onboarding for new hires [1]',
+        '- Lower support load [2]',
+      ].join('\n');
+      function openSource(url: string) {
+        window.open(url, '_blank', 'noopener');
+      }
+      return { content, citations: CITATIONS, openSource };
+    },
+    template:
+      '<CkMarkdownRenderer :content="content" :citations="citations" @open-source="openSource" />',
+  }),
+  parameters: { docs: { source: { code: withCitationsTemplateSource } } },
+};
+
+/**
+ * Unsupported markers degrade gracefully: a `[n]` with no matching source
+ * (here `[9]`) is left as plain text rather than rendered as a citation, while
+ * the markers that do have sources still render. Citation handling never
+ * touches code spans — the `[3]` inside `` `arr[3]` `` stays literal.
+ */
+export const WithUnsupportedAndCodeMarkers: Story = {
+  render: () => ({
+    components: { CkMarkdownRenderer },
+    setup() {
+      const content = [
+        'Two real sources back this [1][2], but [9] has no source and stays as text.',
+        '',
+        'A marker inside code such as `arr[3]` is never treated as a citation.',
+      ].join('\n');
+      return { content, citations: CITATIONS };
+    },
+    template:
+      '<CkMarkdownRenderer :content="content" :citations="citations" />',
+  }),
+};

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue

@@ -14,6 +14,8 @@ import {
   defaultChatKitLabels,
   useChatKitLabels,
 } from '../../../handlers/useChatKitLabels';
+import { useCitationRendering } from './useCitationRendering';
+import type { CkCitationSource } from '../CkCitation';
 import type { CkMarkdownElementClasses } from './types';
 import { defaultMarkdownClasses } from './defaultMarkdownClasses';
 
@@ -21,30 +23,44 @@ import { defaultMarkdownClasses } from './defaultMarkdownClasses';
 // never forces the whole message column wider on narrow viewports.
 const TABLE_WRAPPER_CLASS = 'max-w-full overflow-x-auto';
 
-function domToVNode(
-  node: Node,
-  slots: Slots,
-  classes: CkMarkdownElementClasses,
-  tableLabel: string,
-): VNode | string | null {
+type RenderedNode = VNode | VNode[] | string | null;
+
+interface DomToVNodeContext {
+  slots: Slots;
+  classes: CkMarkdownElementClasses;
+  tableLabel: string;
+  // Maps a citation placeholder element to a node, or null for other elements.
+  renderCitation: (el: Element) => VNode | VNode[] | null;
+}
+
+// Routes a fenced code block to the `code-block` slot when one is provided;
+// otherwise returns null so it renders as the default `<pre><code>`.
+function renderCodeBlock(el: Element, ctx: DomToVNodeContext): VNode[] | null {
+  if (el.tagName !== 'PRE' || el.firstElementChild?.tagName !== 'CODE') {
+    return null;
+  }
+  if (!ctx.slots['code-block']) return null;
+
+  const codeEl = el.firstElementChild;
+  const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? '';
+  const code = codeEl.textContent ?? '';
+  return ctx.slots['code-block']({ code, language });
+}
+
+function domToVNode(node: Node, ctx: DomToVNodeContext): RenderedNode {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
 
   const el = node as Element;
 
-  if (el.tagName === 'PRE' && el.firstElementChild?.tagName === 'CODE') {
-    const codeEl = el.firstElementChild;
-    const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? '';
-    const code = codeEl.textContent ?? '';
-
-    if (slots['code-block']) {
-      return slots['code-block']({ code, language }) as unknown as VNode;
-    }
-  }
+  // Explicit null check: a slot may legitimately render an empty string, which
+  // must still count as "handled" rather than falling through to the element.
+  const special = renderCodeBlock(el, ctx) ?? ctx.renderCitation(el);
+  if (special != null) return special;
 
   const children = Array.from(node.childNodes)
-    .map((child) => domToVNode(child, slots, classes, tableLabel))
-    .filter((c): c is VNode | string => c != null);
+    .map((child) => domToVNode(child, ctx))
+    .filter((c): c is NonNullable<RenderedNode> => c != null);
 
   const attrs: Record<string, string> = {};
   for (const attr of el.attributes) {
@@ -52,7 +68,7 @@ function domToVNode(
   }
 
   const tag = el.tagName.toLowerCase();
-  const customClass = classes[tag as keyof CkMarkdownElementClasses];
+  const customClass = ctx.classes[tag as keyof CkMarkdownElementClasses];
   if (customClass) {
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
@@ -66,7 +82,7 @@ function domToVNode(
         class: TABLE_WRAPPER_CLASS,
         tabindex: '0',
         role: 'region',
-        'aria-label': tableLabel,
+        'aria-label': ctx.tableLabel,
       },
       [vnode],
     );
@@ -84,12 +100,34 @@ export default defineComponent({
       default: () => ({}),
     },
     plugins: { type: Array as PropType<PluggableList>, default: undefined },
+    citations: {
+      type: Array as PropType<CkCitationSource[]>,
+      default: undefined,
+    },
+  },
+  emits: {
+    'open-source': (url: string) => typeof url === 'string',
   },
-  setup(props, { slots }) {
-    const { content, plugins } = toRefs(props);
-    const { html } = useMarkdownParser(content, plugins);
+  setup(props, { slots, emit }) {
+    const { content } = toRefs(props);
     const labels = useChatKitLabels();
 
+    function handleOpenSource(url: string): void {
+      emit('open-source', url);
+    }
+
+    const { citationPlugins, renderCitationNode } = useCitationRendering(
+      () => props.citations,
+      handleOpenSource,
+    );
+
+    const effectivePlugins = computed<PluggableList>(() => [
+      ...(props.plugins ?? []),
+      ...citationPlugins.value,
+    ]);
+
+    const { html } = useMarkdownParser(content, effectivePlugins);
+
     const parsedNodes = computed(() => {
       const raw = html.value;
       if (!raw) return [];
@@ -103,13 +141,17 @@ export default defineComponent({
     }));
 
     return () => {
-      const elementClasses = mergedClasses.value;
-      const tableLabel =
-        labels.value.markdownTableLabel ??
-        defaultChatKitLabels.markdownTableLabel!;
+      const ctx: DomToVNodeContext = {
+        slots,
+        classes: mergedClasses.value,
+        tableLabel:
+          labels.value.markdownTableLabel ??
+          defaultChatKitLabels.markdownTableLabel!,
+        renderCitation: (el) => renderCitationNode(el, slots.citation),
+      };
       const children = parsedNodes.value
-        .map((node) => domToVNode(node, slots, elementClasses, tableLabel))
-        .filter((c): c is VNode | string => c != null);
+        .map((node) => domToVNode(node, ctx))
+        .filter((c): c is NonNullable<RenderedNode> => c != null);
       return h(
         'div',
         { class: 'markdown-renderer min-w-0 break-words' },

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

@@ -1,5 +1,6 @@
 export { default as CkMarkdownRenderer } from './CkMarkdownRenderer.vue';
 export type {
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkMarkdownElementClasses,
 } from './types';

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);
+    });
+  });
+});