@aleph-alpha/chat-kit 5.11.0 → 5.13.0

package/dist/index.js

@@ -1,43 +1,44 @@
 import { u } from "./useMessageHandler-Tellov3w.js";
 import { C, d, p, u as u2, b } from "./useChatKitLabels-CMOr3Kjq.js";
 import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-Dn4ctxk8.js";
-import { _, a as a2, C as C2, b as b3, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A } from "./CkHistory.vue_vue_type_script_setup_true_lang-SL1vOAd9.js";
+import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B } from "./CkHistory.vue_vue_type_script_setup_true_lang-BNcJURkq.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,
   a2 as CkAgentMessageHeader,
-  C2 as CkCitation,
-  b3 as CkCitationCard,
-  c2 as CkConversation,
-  d3 as CkConversationLayout,
-  e2 as CkCopyMessageButton,
-  f2 as CkDropZoneOverlay,
-  g as CkEditableUserMessage,
-  h as CkFeedbackButton,
-  i as CkFeedbackDialog,
-  j as CkFileItemsList,
-  k as CkHeaderActivityButton,
-  l as CkHistory,
-  m as CkHistoryItem,
-  n as CkHistoryWrapper,
-  o as CkMarkdownRenderer,
-  p2 as CkMessageButton,
-  q as CkModelSelector,
-  r as CkPromptInput,
-  s as CkPromptInputDisclaimer,
-  t as CkPromptMenuButton,
-  u4 as CkPromptSendButton,
-  v as CkPromptStopButton,
-  w as CkRegenerateMessageButton,
-  x as CkSendIcon,
-  y as CkStopIcon,
-  z as CkUserMessage,
+  b3 as CkCitation,
+  c2 as CkCitationCard,
+  C2 as CkCitationLabel,
+  d3 as CkConversation,
+  e2 as CkConversationLayout,
+  f2 as CkCopyMessageButton,
+  g as CkDropZoneOverlay,
+  h as CkEditableUserMessage,
+  i as CkFeedbackButton,
+  j as CkFeedbackDialog,
+  k as CkFileItemsList,
+  l as CkHeaderActivityButton,
+  m as CkHistory,
+  n as CkHistoryItem,
+  o as CkHistoryWrapper,
+  p2 as CkMarkdownRenderer,
+  q as CkMessageButton,
+  r as CkModelSelector,
+  s as CkPromptInput,
+  t as CkPromptInputDisclaimer,
+  u4 as CkPromptMenuButton,
+  v as CkPromptSendButton,
+  w as CkPromptStopButton,
+  x as CkRegenerateMessageButton,
+  y as CkSendIcon,
+  z as CkStopIcon,
+  A as CkUserMessage,
   S as SdkError,
   c as createDocumentUploadProvider,
   d as defaultChatKitLabels,
   d2 as defaultDocumentUploadConfig,
   f as defaultEndpoints,
-  A as formatRelativeTime,
+  B as formatRelativeTime,
   p as provideChatKitLabels,
   u3 as useChat,
   u2 as useChatKitLabels,

package/dist/types.d.ts

@@ -57,6 +57,35 @@ export interface MessageReasoningContent {
  * Discriminated union of all content parts that can appear inside a message.
  */
 export type MessageContent = MessageTextContent | MessageToolContent | MessageReasoningContent;
+declare global {
+    /**
+     * Extension point for {@link MessageMetadata}. Consumers declare their
+     * well-known metadata keys here and get them typed on every message,
+     * without chat-kit knowing what any of them mean:
+     *
+     * ```ts
+     * // app/src/types/chat-kit.d.ts
+     * declare global {
+     *   interface ChatKitMessageMetadata {
+     *     responseId?: string;
+     *     citations?: CitationManifest;
+     *   }
+     * }
+     * export {};
+     * ```
+     *
+     * Declare every key **optional**: chat-kit itself never populates them, and
+     * a message can reach a consumer before its host has stamped anything (mid
+     * stream, or on an optimistic node).
+     *
+     * This is a `declare global` interface rather than a module augmentation
+     * because `MessageMetadata` is re-exported through the package barrel —
+     * `declare module '@aleph-alpha/chat-kit'` does not merge across a
+     * re-export, and would silently type nothing.
+     */
+    interface ChatKitMessageMetadata {
+    }
+}
 /**
  * Open-ended metadata bag carried alongside a message. chat-kit is
  * intentionally agnostic about its contents — adapter authors
@@ -64,11 +93,11 @@ export type MessageContent = MessageTextContent | MessageToolContent | MessageRe
  * through the tree → linear path projection, but never inspect it.
  *
  * Consumers attach their own well-known keys (attachments, citations,
- * ratings, …) and define their own typed projections at the read site
- * rather than extending this base type. That keeps the handler API stable
- * even as the shape of what gets stored on a message evolves.
+ * ratings, …). Declaring them on {@link ChatKitMessageMetadata} types those
+ * reads everywhere; the retained index signature keeps any other key legal,
+ * so the handler API stays stable as the stored shape evolves.
  */
-export type MessageMetadata = Record<string, unknown>;
+export type MessageMetadata = ChatKitMessageMetadata & Record<string, unknown>;
 export interface BaseMessage {
     id: string;
     role: MessageRole;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE1E;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9E;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,kBAAkB,GAClB,kBAAkB,GAClB,uBAAuB,CAAC;AAE5B,OAAO,CAAC,MAAM,CAAC;IACb;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IAEH,UAAU,sBAAsB;KAAG;CACpC;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/E,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "5.11.0",
+  "version": "5.13.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -67,7 +67,6 @@
     "vue": "^3.5.27"
   },
   "dependencies": {
-    "@aleph-alpha/ui-library": "^5.3.0",
     "dompurify": "^3.3.2",
     "katex": "^0.17.0",
     "mdast-util-find-and-replace": "^3.0.2",
@@ -77,7 +76,8 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "unified": "^11.0.5"
+    "unified": "^11.0.5",
+    "@aleph-alpha/ui-library": "5.10.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.2.17",
@@ -108,8 +108,8 @@
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
     "@aleph-alpha/eslint-config-frontend": "0.7.1",
-    "@aleph-alpha/tsconfig-frontend": "0.7.2",
-    "@aleph-alpha/prettier-config-frontend": "2.1.1"
+    "@aleph-alpha/prettier-config-frontend": "2.1.1",
+    "@aleph-alpha/tsconfig-frontend": "0.7.3"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

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

@@ -61,11 +61,22 @@ describe('CkCitation', () => {
     expect(await screen.findByText('q3-report.pdf')).toBeInTheDocument();
   });
 
-  it('renders the default (amber) marker state by default', () => {
+  // The marker is a `CkCitationLabel` passed to `UiPopoverTrigger as-child`,
+  // so the popover's trigger props have to reach the rendered button through
+  // attribute fallthrough. Guards that composition against regressions.
+  it('forwards the popover trigger attributes onto the marker', () => {
     render(CkCitation, { props: base });
 
     const marker = screen.getByRole('button', { name: 'Source 1' });
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(marker).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('renders the default (neutral) marker state by default', () => {
+    render(CkCitation, { props: base });
+
+    const marker = screen.getByRole('button', { name: 'Source 1' });
+    expect(marker.className).toContain('bg-background-surface-citation');
     expect(marker.className).not.toContain('bg-background-accent-soft');
   });
 
@@ -74,6 +85,6 @@ describe('CkCitation', () => {
 
     const marker = screen.getByRole('button', { name: 'Source 1' });
     expect(marker.className).toContain('bg-background-accent-soft');
-    expect(marker.className).not.toContain('bg-background-accent-yellow');
+    expect(marker.className).not.toContain('bg-background-surface-citation');
   });
 });

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

@@ -1,4 +1,5 @@
 import CkCitation from './CkCitation.vue';
+import { CkCitationLabel } from '../CkCitationLabel';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 const SNIPPET =
@@ -44,10 +45,91 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * A single marker in its default (amber) state. Hover the chip (or focus it and
- * press Enter) to reveal the source card.
+ * A single marker in its default (neutral) state. Hover the chip (or focus it
+ * and press Enter) to reveal the source card.
  */
-export const Default: Story = {};
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkCitation } from '@aleph-alpha/chat-kit';
+
+function openSource(url: string) {
+  // The source URL is often auth-proxied, so the host opens it.
+  window.open(url, '_blank', 'noopener');
+}
+</script>
+
+<template>
+  <p>
+    Departments with tailored training adopted the tools faster.<CkCitation
+      :index="1"
+      file-name="Q2_Business_Plan.pdf"
+      snippet="Lorem ipsum dolor sit amet consectetur…"
+      location-label="Page 3"
+      collection-name="Collection name"
+      url="/api/v1/search-stores/ss_abc/files/file_123/public-urls"
+      @open-source="openSource"
+    />
+  </p>
+</template>`;
+
+export const Default: Story = {
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * The four marker states side by side, as specified in the design: default,
+ * hover, focus and selected. Hover and focus are live — mouse over the second
+ * chip or tab to the third to see them.
+ */
+const statesTemplateSource = `<script setup lang="ts">
+import { CkCitationLabel } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <!-- \`hover-layer-active\` pins the hover overlay open; focus is a real
+       :focus-visible, so it only shows when the chip is focused. -->
+  <CkCitationLabel as="button" :index="1" />
+  <CkCitationLabel as="button" :index="1" class="hover-layer-active" />
+  <CkCitationLabel as="button" :index="1" />
+  <CkCitationLabel as="button" :index="1" selected />
+</template>`;
+
+export const States: Story = {
+  parameters: { docs: { source: { code: statesTemplateSource } } },
+  render: (args) => ({
+    components: { CkCitationLabel },
+    setup() {
+      return { args };
+    },
+    // `CkCitationLabel` renders the chip on its own, so each state can be shown
+    // at rest. Hover is forced with `hover-layer-active` (the class ui-library
+    // uses to pin its overlay open); focus is real, applied by the play
+    // function below, because `:focus-visible` cannot be faked with a class.
+    template: `
+      <div style="display: flex; align-items: flex-start; gap: 32px;">
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" />
+          <small style="font-size: 11px; opacity: 0.6;">default</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" class="hover-layer-active" />
+          <small style="font-size: 11px; opacity: 0.6;">hover</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" data-focus-demo />
+          <small style="font-size: 11px; opacity: 0.6;">focus</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" selected />
+          <small style="font-size: 11px; opacity: 0.6;">selected</small>
+        </div>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    // A real focus, so the ring is the one keyboard users actually get.
+    canvasElement.querySelector<HTMLElement>('[data-focus-demo]')?.focus();
+  },
+};
 
 /**
  * The selected (teal) state — set `selected` when the citation's source is the

package/src/components/base/CkCitation/CkCitation.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 import {
   UiPopover,
   UiPopoverTrigger,
   UiPopoverContent,
 } from '@aleph-alpha/ui-library';
-import {
-  defaultChatKitLabels,
-  useChatKitLabels,
-} from '../../../handlers/useChatKitLabels';
 import { CkCitationCard } from '../CkCitationCard';
+import { CkCitationLabel } from '../CkCitationLabel';
 import type { CkCitationProps } from './types';
 
 defineOptions({
   name: 'CkCitation',
 });
 
-const props = withDefaults(defineProps<CkCitationProps>(), {
+withDefaults(defineProps<CkCitationProps>(), {
   selected: false,
   locationLabel: undefined,
   url: undefined,
@@ -28,16 +25,6 @@ const emit = defineEmits<{
   'open-source': [url: string];
 }>();
 
-const labels = useChatKitLabels();
-
-// Resolution order: per-instance prop, then `"{citationSourceLabel} {index}"`
-// from the injected label, then the English default.
-const triggerLabel = computed(
-  () =>
-    props.ariaLabel ??
-    `${labels.value.citationSourceLabel ?? defaultChatKitLabels.citationSourceLabel!} ${props.index}`,
-);
-
 // Close delay so the pointer can cross the gap from the marker into the card
 // without it disappearing on the way.
 const CLOSE_DELAY_MS = 80;
@@ -122,21 +109,18 @@ onBeforeUnmount(() => {
 <template>
   <UiPopover v-model:open="open">
     <UiPopoverTrigger as-child>
-      <button
-        type="button"
-        :aria-label="triggerLabel"
-        :class="[
-          'ck-citation mx-px inline-flex h-5 min-w-5 select-none items-center justify-center rounded-sm px-1 align-middle text-sm leading-4 tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          selected
-            ? 'bg-background-accent-soft text-black'
-            : 'bg-background-accent-yellow text-background-status-warning',
-        ]"
+      <!-- An open card is itself a selection: the chip the user is reading
+           about shows the selected state, so it stands out from its neighbours
+           while the card is up. -->
+      <CkCitationLabel
+        as="button"
+        :index="index"
+        :selected="selected || open"
+        :aria-label="ariaLabel"
         @keydown="onTriggerKeydown"
         @mouseenter="onPointerEnter"
         @mouseleave="onPointerLeave"
-      >
-        {{ index }}
-      </button>
+      />
     </UiPopoverTrigger>
     <UiPopoverContent
       align="start"
@@ -153,6 +137,7 @@ onBeforeUnmount(() => {
         :file-name="fileName"
         :snippet="snippet"
         :location-label="locationLabel"
+        :collection-name="collectionName"
         :url="url"
         :open-source-label="openSourceLabel"
         @open-source="(u: string) => emit('open-source', u)"
@@ -160,11 +145,3 @@ onBeforeUnmount(() => {
     </UiPopoverContent>
   </UiPopover>
 </template>
-
-<style scoped>
-@media (prefers-reduced-motion: reduce) {
-  .ck-citation {
-    transition-duration: 0.01ms;
-  }
-}
-</style>

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

@@ -27,6 +27,11 @@ export interface CkCitationSource {
    * non-paginated sources.
    */
   locationLabel?: string;
+  /**
+   * Name of the collection the source belongs to, shown in the card footer
+   * before the location. Omit when the source has no collection.
+   */
+  collectionName?: string;
   /**
    * Source URL for the card's external-link action. Activating it emits
    * `open-source`. Omit to hide the action.
@@ -53,7 +58,7 @@ export interface CkCitationProps extends CkCitationSource {
   /**
    * Marks the citation as selected/active (e.g. the source it points to is
    * currently open or highlighted). Renders the marker in its selected (teal)
-   * state instead of the default amber.
+   * state instead of the default neutral one.
    * @default false
    */
   selected?: boolean;

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

@@ -69,6 +69,43 @@ describe('CkCitationCard', () => {
     expect(screen.getByText(snippet).className).toContain('line-clamp-6');
   });
 
+  it('shows the collection name before the location in the footer', () => {
+    render(CkCitationCard, {
+      props: { ...base, collectionName: 'EU AI Act', locationLabel: 'Page 3' },
+    });
+
+    const footer = screen.getByText('EU AI Act').closest('p');
+    expect(footer).toHaveTextContent('EU AI Act | Page 3');
+  });
+
+  it('drops the separator when only one footer part is present', () => {
+    render(CkCitationCard, { props: { ...base, collectionName: 'EU AI Act' } });
+
+    expect(screen.getByText('EU AI Act').closest('p')).not.toHaveTextContent(
+      '|',
+    );
+  });
+
+  it('hides the footer entirely with neither a collection nor a location', () => {
+    render(CkCitationCard, { props: base });
+
+    expect(screen.queryByText('Page 3')).not.toBeInTheDocument();
+    expect(screen.queryByText('|')).not.toBeInTheDocument();
+  });
+
+  it('keeps the location intact when the collection name is too long', () => {
+    const collectionName =
+      'Public Sector Knowledge Base — European Union Regulatory Corpus 2026';
+    render(CkCitationCard, {
+      props: { ...base, collectionName, locationLabel: 'Page 3' },
+    });
+
+    // jsdom has no layout, so the guarantee is asserted through the classes
+    // that produce it: the name is the only part allowed to give way.
+    expect(screen.getByText(collectionName).className).toContain('truncate');
+    expect(screen.getByText('Page 3').className).toContain('shrink-0');
+  });
+
   it('uses the injected citationOpenSource label via provideChatKitLabels', () => {
     const Wrapper = defineComponent({
       setup() {

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

@@ -20,6 +20,7 @@ const meta: Meta<typeof CkCitationCard> = {
     fileName: { control: 'text' },
     snippet: { control: 'text' },
     locationLabel: { control: 'text' },
+    collectionName: { control: 'text' },
     url: { control: 'text' },
     openSourceLabel: { control: 'text' },
   },
@@ -27,6 +28,7 @@ const meta: Meta<typeof CkCitationCard> = {
     fileName: 'Q2_Business_Plan.pdf',
     snippet: LOREM,
     locationLabel: 'Page 3',
+    collectionName: 'Collection name',
     url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
   },
   decorators: [
@@ -76,19 +78,44 @@ export const WithoutLink: Story = {
 };
 
 /**
- * No `locationLabel` — the footer is hidden. Use for non-paginated sources
- * such as a plain web page or a whole-document citation.
+ * No `locationLabel` — the footer keeps just the collection. Use for
+ * non-paginated sources such as a plain web page.
  */
 export const WithoutLocation: Story = {
   args: { locationLabel: undefined },
 };
 
+/**
+ * No `collectionName` — the footer keeps just the location, and the separator
+ * goes with it. Use for sources that don't come from a collection.
+ */
+export const WithoutCollection: Story = {
+  args: { collectionName: undefined },
+};
+
+/**
+ * A collection name longer than the card is wide. The name truncates and the
+ * location stays on the same line — the page a citation points at is the more
+ * useful half, so it must not be pushed out or wrapped away.
+ */
+export const LongCollectionName: Story = {
+  args: {
+    collectionName:
+      'Public Sector Knowledge Base — European Union Regulatory Corpus 2026',
+    locationLabel: 'Page 3',
+  },
+};
+
 /**
  * Minimal: title + excerpt only (no link, no location). The leanest source a
  * card can describe.
  */
 export const MinimalSnippetOnly: Story = {
-  args: { url: undefined, locationLabel: undefined },
+  args: {
+    url: undefined,
+    locationLabel: undefined,
+    collectionName: undefined,
+  },
 };
 
 /**

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { UiFileType, UiButton, UiIcon } from '@aleph-alpha/ui-library';
+import { computed, useTemplateRef } from 'vue';
+import {
+  UiFileType,
+  UiButton,
+  UiIcon,
+  UiTooltip,
+} from '@aleph-alpha/ui-library';
+import { useIsTruncated } from '../../../composables/useIsTruncated';
 import {
   defaultChatKitLabels,
   useChatKitLabels,
@@ -13,6 +19,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<CkCitationCardProps>(), {
   locationLabel: undefined,
+  collectionName: undefined,
   url: undefined,
   openSourceLabel: undefined,
 });
@@ -31,6 +38,16 @@ const openSourceAriaLabel = computed(
     defaultChatKitLabels.citationOpenSource!,
 );
 
+// Both labels are clipped to the card width, so each gets the same tooltip
+// treatment as a file row: revealed only when the text is actually cut off.
+const fileNameRef = useTemplateRef<HTMLElement>('fileNameRef');
+const collectionRef = useTemplateRef<HTMLElement>('collectionRef');
+const isFileNameTruncated = useIsTruncated(fileNameRef, () => props.fileName);
+const isCollectionTruncated = useIsTruncated(
+  collectionRef,
+  () => props.collectionName,
+);
+
 function handleOpen(): void {
   if (props.url) {
     emit('open-source', props.url);
@@ -42,14 +59,20 @@ function handleOpen(): void {
   <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-2">
+    <div class="flex min-w-0 items-center gap-3 py-0.5">
       <UiFileType :filename="fileName" class="shrink-0" />
-      <p
-        class="min-w-0 truncate text-sm font-medium text-content-on-surface-primary"
-        :title="fileName"
+      <UiTooltip
+        :content="fileName"
+        :disabled="!isFileNameTruncated"
+        align="start"
       >
-        {{ fileName }}
-      </p>
+        <p
+          ref="fileNameRef"
+          class="min-w-0 truncate text-sm font-medium leading-4 text-content-on-surface-primary"
+        >
+          {{ fileName }}
+        </p>
+      </UiTooltip>
       <UiButton
         v-if="url"
         variant="ghost"
@@ -68,11 +91,30 @@ function handleOpen(): void {
       {{ snippet }}
     </p>
 
+    <!-- The location is the more useful half, so the collection name is the
+         part that gives way when the two don't fit on one line. -->
     <p
-      v-if="locationLabel"
-      class="text-sm leading-5 text-content-on-surface-muted"
+      v-if="collectionName || locationLabel"
+      class="flex items-center gap-1.5 text-sm leading-5 text-content-on-surface-muted"
     >
-      {{ locationLabel }}
+      <UiTooltip
+        v-if="collectionName"
+        :content="collectionName"
+        :disabled="!isCollectionTruncated"
+        align="start"
+      >
+        <span ref="collectionRef" class="min-w-0 truncate">
+          {{ collectionName }}
+        </span>
+      </UiTooltip>
+      <span
+        v-if="collectionName && locationLabel"
+        aria-hidden="true"
+        class="shrink-0 text-border-input-strong"
+      >
+        |
+      </span>
+      <span v-if="locationLabel" class="shrink-0">{{ locationLabel }}</span>
     </p>
   </div>
 </template>

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

@@ -25,9 +25,14 @@ export interface CkCitationCardProps {
   /**
    * 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.
+   * Omit for non-paginated sources.
    */
   locationLabel?: string;
+  /**
+   * Name of the collection the source belongs to, shown in the footer before
+   * the location. Omit when the source has no collection.
+   */
+  collectionName?: 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