@aleph-alpha/chat-kit 6.5.0 → 6.6.0

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-C4XS2QQI.js → CkHistory.vue_vue_type_script_setup_true_lang-BnUMeeto.js}

@@ -227,7 +227,7 @@ const _hoisted_4$8 = {
   key: 0,
   class: "flex items-center gap-1.5 text-sm leading-5 text-content-on-surface-muted"
 };
-const _hoisted_5$4 = {
+const _hoisted_5$5 = {
   key: 1,
   "aria-hidden": "true",
   class: "shrink-0 text-border-input-strong"
@@ -327,7 +327,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["content", "disabled"])) : createCommentVNode("", true),
-          __props.collectionName && __props.locationLabel ? (openBlock(), createElementBlock("span", _hoisted_5$4, " | ")) : createCommentVNode("", true),
+          __props.collectionName && __props.locationLabel ? (openBlock(), createElementBlock("span", _hoisted_5$5, " | ")) : createCommentVNode("", true),
           __props.locationLabel ? (openBlock(), createElementBlock("span", _hoisted_6$4, toDisplayString(__props.locationLabel), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
@@ -858,7 +858,7 @@ const _hoisted_1$b = ["aria-label"];
 const _hoisted_2$7 = { class: "pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4 text-content-on-surface-primary" };
 const _hoisted_3$6 = { class: "flex flex-col items-center gap-1 text-center" };
 const _hoisted_4$6 = { class: "body-16-bold" };
-const _hoisted_5$3 = {
+const _hoisted_5$4 = {
   key: 0,
   class: "body-16-regular"
 };
@@ -1034,7 +1034,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   createVNode(_sfc_main$l, { class: "h-36 w-52" }),
                   createElementVNode("div", _hoisted_3$6, [
                     createElementVNode("p", _hoisted_4$6, toDisplayString(resolvedHeading.value), 1),
-                    __props.hint ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+                    __props.hint ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
                   ])
                 ], true)
               ])
@@ -1326,6 +1326,10 @@ const _hoisted_4$5 = {
   class: "self-end text-sm text-content-on-surface-muted tabular-nums",
   "aria-live": "polite"
 };
+const _hoisted_5$3 = {
+  key: 0,
+  class: "ck-feedback-dialog__footer flex items-center gap-2 text-sm text-content-on-surface-muted"
+};
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackDialog"
@@ -1558,17 +1562,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])
-              ], 2)
+              ], 2),
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
+                renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+              ])) : createCommentVNode("", true)
             ]),
-            _: 1
+            _: 3
           }, 8, ["title", "show-close-button"])
         ]),
-        _: 1
+        _: 3
       }, 8, ["open"]);
     };
   }
 });
-const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-fce18e3e"]]);
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-8d78ea5d"]]);
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",

package/dist/chat-kit.css

@@ -45,7 +45,7 @@
 }
 }
 
-.ck-feedback-dialog__chip[data-v-fce18e3e] {
+.ck-feedback-dialog__chip[data-v-8d78ea5d] {
   width: 100%;
   min-height: 36px;
   height: auto;
@@ -59,8 +59,8 @@
  * emitted by the consumer's UnoCSS build. The :hover selector holds the
  * styling when hovering a selected chip (the outline variant ships a
  * data-[state=on]:hover override of equal specificity otherwise). */
-.ck-feedback-dialog__chip[data-state='on'][data-v-fce18e3e],
-.ck-feedback-dialog__chip[data-state='on'][data-v-fce18e3e]:hover {
+.ck-feedback-dialog__chip[data-state='on'][data-v-8d78ea5d],
+.ck-feedback-dialog__chip[data-state='on'][data-v-8d78ea5d]:hover {
   border-color: oklch(var(--accent-default));
   background-color: oklch(var(--background-accent-soft));
   color: oklch(var(--content-on-accent-soft));
@@ -70,17 +70,17 @@
  * The free-text field stays vertically resizable, but cap its height so
  * dragging the resize handle can't push it past the dialog bounds.
  */
-.ck-feedback-dialog__freetext[data-v-fce18e3e] {
+.ck-feedback-dialog__freetext[data-v-8d78ea5d] {
   max-height: 11rem;
 }
-.ck-feedback-dialog__response[data-v-fce18e3e] p,
-.ck-feedback-dialog__response[data-v-fce18e3e] li {
+.ck-feedback-dialog__response[data-v-8d78ea5d] p,
+.ck-feedback-dialog__response[data-v-8d78ea5d] li {
   line-height: 1.5rem;
 }
-.ck-feedback-dialog__response[data-v-fce18e3e] p {
+.ck-feedback-dialog__response[data-v-8d78ea5d] p {
   margin: 0 0 0.5rem 0;
 }
-.ck-feedback-dialog__response[data-v-fce18e3e] p:last-child {
+.ck-feedback-dialog__response[data-v-8d78ea5d] p:last-child {
   margin-bottom: 0;
 }
 

package/dist/components/base/CkFeedbackDialog/CkFeedbackDialog.stories.d.ts

@@ -40,6 +40,11 @@ export declare const Submitting: Story;
  * actions remain reachable.
  */
 export declare const LongResponse: Story;
+/**
+ * The optional `footer` slot renders a row below the columns, e.g. a reference
+ * id the user can copy when reporting the answer.
+ */
+export declare const WithFooter: Story;
 /**
  * Realistic end-to-end flow wired to `CkFeedbackButton`. Click a thumb to open
  * the dialog; submit or cancel; the button locks only on submit.

package/dist/components/base/CkFeedbackDialog/CkFeedbackDialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkFeedbackDialog.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/CkFeedbackDialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAOtD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAoF3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkBvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoEnC;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAqEhC,CAAC"}
+{"version":3,"file":"CkFeedbackDialog.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/CkFeedbackDialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAOtD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAoF3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkBvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoEnC;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAqEhC,CAAC"}

package/dist/components/base/CkFeedbackDialog/CkFeedbackDialog.vue.d.ts

@@ -1,5 +1,12 @@
 import type { CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload } from './types';
-declare const __VLS_export: import("vue").DefineComponent<CkFeedbackDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_Slots = {
+    /**
+     * Optional row below the reasons and response columns, e.g. a reference id
+     * the user can copy. Not rendered when empty.
+     */
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<CkFeedbackDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;
     submit: (payload: CkFeedbackDialogSubmitPayload) => any;
     "update:open": (open: boolean) => any;
@@ -8,6 +15,12 @@ declare const __VLS_export: import("vue").DefineComponent<CkFeedbackDialogProps,
     onSubmit?: ((payload: CkFeedbackDialogSubmitPayload) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=CkFeedbackDialog.vue.d.ts.map

package/dist/components/base/CkFeedbackDialog/CkFeedbackDialog.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkFeedbackDialog.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/CkFeedbackDialog.vue"],"names":[],"mappings":"AAiVA,OAAO,KAAK,EACV,qBAAqB,EACrB,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AAgjBjB,QAAA,MAAM,YAAY;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkFeedbackDialog.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/CkFeedbackDialog.vue"],"names":[],"mappings":"AAgWA,OAAO,KAAK,EACV,qBAAqB,EACrB,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AAyCjB,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC;CACxB,CAAC;AAuhBF,QAAA,MAAM,UAAU;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, c, C, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, D, E } from "../CkHistory.vue_vue_type_script_setup_true_lang-C4XS2QQI.js";
+import { _, a, b, c, C, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, D, E } from "../CkHistory.vue_vue_type_script_setup_true_lang-BnUMeeto.js";
 export {
   _ as CkAgentMessage,
   a as CkAgentMessageHeader,

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-Bkzrdgfj.js";
 import { C, d, p, u as u2, b } from "./useChatKitLabels-DxW0N5U-.js";
 import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-D0DQjdsq.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, D, F, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-C4XS2QQI.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, D, F, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-BnUMeeto.js";
 import { m as m2 } from "./markdownToPlainText-DN_G-I6g.js";
 export {
   C as CHAT_KIT_LABELS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -115,9 +115,9 @@
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
+    "@aleph-alpha/eslint-config-frontend": "0.7.1",
     "@aleph-alpha/prettier-config-frontend": "2.1.1",
-    "@aleph-alpha/tsconfig-frontend": "0.7.3",
-    "@aleph-alpha/eslint-config-frontend": "0.7.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/CkFeedbackDialog/CkFeedbackDialog.spec.ts

@@ -284,4 +284,31 @@ describe('CkFeedbackDialog', () => {
     await screen.findByRole('button', { name: SUBMIT });
     expect(screen.queryByText(RESPONSE_HEADING)).not.toBeInTheDocument();
   });
+
+  it('renders footer slot content below the columns', async () => {
+    render(CkFeedbackDialog, {
+      props: {
+        open: true,
+        sentiment: 'positive',
+        reasons: REASONS,
+        responseText: 'A sample assistant response.',
+      } as CkFeedbackDialogProps,
+      slots: {
+        footer: '<span>Trace ID: 4bf92f3577b34da6a3ce929d0e0e4736</span>',
+      },
+    });
+
+    expect(
+      await screen.findByText('Trace ID: 4bf92f3577b34da6a3ce929d0e0e4736'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders no footer row without footer slot content', async () => {
+    renderDialog();
+
+    await screen.findByRole('button', { name: SUBMIT });
+    expect(
+      document.querySelector('.ck-feedback-dialog__footer'),
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -274,6 +274,29 @@ export const LongResponse: Story = {
   },
 };
 
+/**
+ * The optional `footer` slot renders a row below the columns, e.g. a reference
+ * id the user can copy when reporting the answer.
+ */
+export const WithFooter: Story = {
+  args: {
+    open: true,
+    sentiment: 'negative',
+    reasons: NEGATIVE_REASONS,
+    responseText: SAMPLE_RESPONSE,
+  },
+  render: (args) => ({
+    components: { CkFeedbackDialog },
+    setup: () => ({ args }),
+    template: `<CkFeedbackDialog v-bind="args">
+  <template #footer>
+    <span>Trace ID</span>
+    <code>4bf92f3577b34da6a3ce929d0e0e4736</code>
+  </template>
+</CkFeedbackDialog>`,
+  }),
+};
+
 /**
  * Realistic end-to-end flow wired to `CkFeedbackButton`. Click a thumb to open
  * the dialog; submit or cancel; the button locks only on submit.

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

@@ -48,6 +48,14 @@ const {
   submitLabel: submitLabelProp,
 } = defineProps<CkFeedbackDialogProps>();
 
+defineSlots<{
+  /**
+   * Optional row below the reasons and response columns, e.g. a reference id
+   * the user can copy. Not rendered when empty.
+   */
+  footer?: () => unknown;
+}>();
+
 const emit = defineEmits<{
   'update:open': [open: boolean];
   submit: [payload: CkFeedbackDialogSubmitPayload];
@@ -259,6 +267,13 @@ function handleSubmit(): void {
         </section>
       </div>
 
+      <div
+        v-if="$slots.footer"
+        class="ck-feedback-dialog__footer flex items-center gap-2 text-sm text-content-on-surface-muted"
+      >
+        <slot name="footer" />
+      </div>
+
       <template #actions>
         <UiButton
           type="button"