@aleph-alpha/chat-kit 5.12.0 → 6.0.0

package/src/adapters/responses-api.ts

@@ -141,7 +141,11 @@ export type ResponseOutputToolType =
   | 'file_search_call'
   | 'code_interpreter_call'
   | 'image_generation_call'
-  | 'local_shell_call';
+  | 'local_shell_call'
+  // Hosted Aleph Alpha extras. `shell_call` is the stored skill-fetch
+  // wrapper; `fetch_url` is the page-read behind hosted web search.
+  | 'shell_call'
+  | 'fetch_url';
 
 /**
  * Server-provided rendering hints for a tool invocation. The server emits a
@@ -377,16 +381,16 @@ function toAssistantParts(resp: StoredResponse): MessageContent[] {
         parts.push(textPart(text, out.id || undefined));
         break;
       }
-      // Actual tool invocations surface as tool parts. `mcp_list_tools` is
-      // informational discovery (the server advertising tools) rather than
-      // a call the assistant made, so it is intentionally skipped.
-      case 'mcp_call':
-      case 'function_call':
-      case 'tool_call': {
-        parts.push(toolPart(out));
+      // Discovery catalog, not a call the assistant made.
+      case 'mcp_list_tools':
         break;
-      }
+      // Every other `ResponseOutputTool` is an invocation — function /
+      // MCP / hosted builtins (`web_search_call`, `file_search_call`,
+      // `shell_call`, …). Hosts used to coerce those to `tool_call`
+      // before calling this adapter; converting them here keeps the
+      // stored item type intact for citations.
       default:
+        parts.push(toolPart(out));
         break;
     }
   }

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

@@ -72,11 +72,11 @@ describe('CkCitation', () => {
     expect(marker).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('renders the default (amber) marker state by default', () => {
+  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-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     expect(marker.className).not.toContain('bg-background-accent-soft');
   });
 
@@ -85,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

@@ -109,10 +109,13 @@ onBeforeUnmount(() => {
 <template>
   <UiPopover v-model:open="open">
     <UiPopoverTrigger as-child>
+      <!-- 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"
+        :selected="selected || open"
         :aria-label="ariaLabel"
         @keydown="onTriggerKeydown"
         @mouseenter="onPointerEnter"
@@ -134,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)"

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,
 });
@@ -28,7 +35,17 @@ const openSourceAriaLabel = computed(
   () =>
     props.openSourceLabel ??
     labels.value.citationOpenSource ??
-    defaultChatKitLabels.citationOpenSource!,
+    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 {
@@ -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

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

@@ -53,11 +53,11 @@ describe('CkCitationLabel', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders the default (amber) state by default', () => {
+  it('renders the default (neutral) state by default', () => {
     const { container } = render(CkCitationLabel, { props: { index: 1 } });
 
     const marker = container.querySelector('.ck-citation')!;
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     expect(marker.className).not.toContain('bg-background-accent-soft');
   });
 
@@ -68,6 +68,6 @@ describe('CkCitationLabel', () => {
 
     const marker = container.querySelector('.ck-citation')!;
     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/CkCitationLabel/CkCitationLabel.vue

@@ -25,7 +25,7 @@ const isButton = computed(() => props.as === 'button');
 const resolvedAriaLabel = computed(
   () =>
     props.ariaLabel ??
-    `${labels.value.citationSourceLabel ?? defaultChatKitLabels.citationSourceLabel!} ${props.index}`,
+    `${labels.value.citationSourceLabel ?? defaultChatKitLabels.citationSourceLabel} ${props.index}`,
 );
 </script>
 
@@ -46,17 +46,18 @@ const resolvedAriaLabel = computed(
     :role="isButton ? undefined : 'img'"
     :aria-label="resolvedAriaLabel"
     :class="[
-      'ck-citation mx-px inline-flex h-5 min-w-5 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',
+      'ck-citation ui-focus-ring mx-px inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-transparent px-1 align-middle text-sm leading-4 tabular-nums transition-colors',
       // The static chip is part of the prose: it must stay selectable so the
       // number survives a copy of the surrounding text. A control shouldn't
       // start a text selection on click, so button mode keeps `select-none`.
-      isButton ? 'select-none' : '',
+      // Only the control gets the hover layer; a static chip has no hover state.
+      isButton ? 'select-none hover-layer hover-layer-default' : '',
       selected
-        ? 'bg-background-accent-soft text-black'
-        : 'bg-background-accent-yellow text-background-status-warning',
+        ? 'bg-background-accent-soft text-content-on-accent-soft'
+        : 'bg-background-surface-citation text-content-on-surface-primary',
     ]"
   >
-    {{ index }}
+    <span>{{ index }}</span>
   </component>
 </template>
 

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

@@ -26,7 +26,6 @@ const messages = [
 function renderLayout(
   msgs: Array<{ role: string; content: string }> = messages,
 ) {
-  // eslint-disable-next-line vue/one-component-per-file
   const Wrapper = defineComponent({
     setup() {
       return () =>
@@ -55,7 +54,7 @@ function renderWithInstance(
   { withFooter = false }: { withFooter?: boolean } = {},
 ) {
   let instance: LayoutInstance | undefined;
-  // eslint-disable-next-line vue/one-component-per-file
+
   const Wrapper = defineComponent({
     setup() {
       const layoutRef = ref<LayoutInstance>();
@@ -167,7 +166,6 @@ describe('CkConversationLayout', () => {
     }
 
     it('provides the full message object including custom fields to scoped slots', () => {
-      // eslint-disable-next-line vue/one-component-per-file
       const Wrapper = defineComponent({ setup: () => renderCustomSlotWrapper });
 
       render(Wrapper);
@@ -206,7 +204,6 @@ describe('CkConversationLayout', () => {
     });
 
     it('gives the thread-footer the larger top margin when messages exist', () => {
-      // eslint-disable-next-line vue/one-component-per-file
       const Wrapper = defineComponent({
         setup() {
           return () =>
@@ -233,7 +230,6 @@ describe('CkConversationLayout', () => {
     });
 
     it('gives the thread-footer the smaller top margin when there are no messages', () => {
-      // eslint-disable-next-line vue/one-component-per-file
       const Wrapper = defineComponent({
         setup() {
           return () =>

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

@@ -5,7 +5,7 @@ import { flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 describe('CkCopyMessageButton', () => {
-  const writeText = vi.fn((_: string) => Promise.resolve());
+  const writeText = vi.fn(() => Promise.resolve());
 
   beforeEach(() => {
     writeText.mockReset();

package/src/components/base/CkFeedbackButton/CkFeedbackButton.vue

@@ -32,19 +32,19 @@ const thumbsUpLabel = computed(
   () =>
     props.ariaLabelThumbsUp ??
     labels.value.feedbackThumbsUp ??
-    defaultChatKitLabels.feedbackThumbsUp!,
+    defaultChatKitLabels.feedbackThumbsUp,
 );
 const thumbsDownLabel = computed(
   () =>
     props.ariaLabelThumbsDown ??
     labels.value.feedbackThumbsDown ??
-    defaultChatKitLabels.feedbackThumbsDown!,
+    defaultChatKitLabels.feedbackThumbsDown,
 );
 const groupLabel = computed(
   () =>
     props.ariaLabelGroup ??
     labels.value.feedbackGroup ??
-    defaultChatKitLabels.feedbackGroup!,
+    defaultChatKitLabels.feedbackGroup,
 );
 
 const isUpSelected = computed(() => props.value === 'up');

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

@@ -257,7 +257,7 @@ describe('CkFeedbackDialog', () => {
     const marker = document.body.querySelector('.ck-citation')!;
     expect(marker.tagName).toBe('SPAN');
     expect(marker).toHaveTextContent('1');
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     // Announced as its own labelled object, and never as a control.
     expect(screen.getByRole('img', { name: 'Source 1' })).toBeInTheDocument();
     expect(

package/src/components/base/CkFeedbackDialog/CkFeedbackDialog.vue

@@ -61,56 +61,56 @@ const title = computed(() => {
     return (
       titlePositive ??
       labels.value.feedbackDialogTitlePositive ??
-      defaultChatKitLabels.feedbackDialogTitlePositive!
+      defaultChatKitLabels.feedbackDialogTitlePositive
     );
   }
   return (
     titleNegative ??
     labels.value.feedbackDialogTitleNegative ??
-    defaultChatKitLabels.feedbackDialogTitleNegative!
+    defaultChatKitLabels.feedbackDialogTitleNegative
   );
 });
 const responseHeading = computed(
   () =>
     responseHeadingProp ??
     labels.value.feedbackDialogResponseHeading ??
-    defaultChatKitLabels.feedbackDialogResponseHeading!,
+    defaultChatKitLabels.feedbackDialogResponseHeading,
 );
 const description = computed(
   () =>
     descriptionProp ??
     labels.value.feedbackDialogDescription ??
-    defaultChatKitLabels.feedbackDialogDescription!,
+    defaultChatKitLabels.feedbackDialogDescription,
 );
 const otherLabel = computed(
   () =>
     otherLabelProp ??
     labels.value.feedbackDialogOtherLabel ??
-    defaultChatKitLabels.feedbackDialogOtherLabel!,
+    defaultChatKitLabels.feedbackDialogOtherLabel,
 );
 const otherTooltip = computed(
   () =>
     otherTooltipProp ??
     labels.value.feedbackDialogOtherTooltip ??
-    defaultChatKitLabels.feedbackDialogOtherTooltip!,
+    defaultChatKitLabels.feedbackDialogOtherTooltip,
 );
 const freeTextPlaceholder = computed(
   () =>
     freeTextPlaceholderProp ??
     labels.value.feedbackDialogFreeTextPlaceholder ??
-    defaultChatKitLabels.feedbackDialogFreeTextPlaceholder!,
+    defaultChatKitLabels.feedbackDialogFreeTextPlaceholder,
 );
 const cancelLabel = computed(
   () =>
     cancelLabelProp ??
     labels.value.feedbackDialogCancelLabel ??
-    defaultChatKitLabels.feedbackDialogCancelLabel!,
+    defaultChatKitLabels.feedbackDialogCancelLabel,
 );
 const submitLabel = computed(
   () =>
     submitLabelProp ??
     labels.value.feedbackDialogSubmitLabel ??
-    defaultChatKitLabels.feedbackDialogSubmitLabel!,
+    defaultChatKitLabels.feedbackDialogSubmitLabel,
 );
 
 // Multi-select: the user may pick zero or more reason codes. Backed by an

package/src/components/base/CkHistoryItem/CkHistoryItem.vue

@@ -138,13 +138,11 @@ const actionPopoverPanelClass = computed(() => [
 ]);
 
 const passthroughAttrs = computed(() => {
-  const {
-    class: _class,
-    as: _as,
-    asChild: _asChild,
-    'as-child': _asChildAttr,
-    ...rest
-  } = attrs as Record<string, unknown>;
+  const rest = { ...(attrs as Record<string, unknown>) };
+  delete rest.class;
+  delete rest.as;
+  delete rest.asChild;
+  delete rest['as-child'];
   return rest;
 });