@aleph-alpha/chat-kit 1.18.0 → 2.0.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js → CkInput.vue_vue_type_script_setup_true_lang-DPZedAQS.js}

@@ -665,14 +665,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const submitLabel = computed(
       () => __props.submitLabel ?? labels.value.feedbackDialogSubmitLabel ?? defaultChatKitLabels.feedbackDialogSubmitLabel
     );
-    const selectedReason = ref("");
+    const selectedReasons = ref([]);
     const freeText = ref("");
     const freeTextId = useId();
     watch(
       () => __props.open,
       (isOpen, wasOpen) => {
         if (isOpen && !wasOpen) {
-          selectedReason.value = "";
+          selectedReasons.value = [];
           freeText.value = "";
         }
       }
@@ -682,7 +682,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     );
     const characterCount = computed(() => freeText.value.length);
     const canSubmit = computed(
-      () => !__props.disabled && !__props.submitting && (selectedReason.value !== "" || freeText.value.trim() !== "")
+      () => !__props.disabled && !__props.submitting && (selectedReasons.value.length > 0 || freeText.value.trim() !== "")
     );
     function handleOpenChange(next) {
       if (!next && (__props.submitting || __props.disabled)) {
@@ -706,7 +706,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
       emit("submit", {
         sentiment: __props.sentiment,
-        reason: selectedReason.value === "" ? null : selectedReason.value,
+        // Copy so the host can't mutate our internal reactive array, and so the
+        // payload is a plain snapshot at submit time.
+        reasons: [...selectedReasons.value],
         reasonText: freeText.value.trim()
       });
     }
@@ -775,9 +777,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true),
                 createElementVNode("section", _hoisted_3$4, [
                   createVNode(unref(UiToggleGroup), {
-                    modelValue: selectedReason.value,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReason.value = $event),
-                    type: "single",
+                    modelValue: selectedReasons.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReasons.value = $event),
+                    type: "multiple",
                     variant: "outline",
                     disabled: __props.disabled || __props.submitting,
                     class: "grid grid-cols-2 gap-4",
@@ -835,7 +837,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-181a7aa9"]]);
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4d1d9c59"]]);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",

package/dist/chat-kit.css

@@ -23,7 +23,7 @@
 }
 }
 
-.ck-feedback-dialog__chip[data-v-181a7aa9] {
+.ck-feedback-dialog__chip[data-v-4d1d9c59] {
   width: 100%;
   min-height: 36px;
   height: auto;
@@ -31,14 +31,14 @@
   text-align: center;
   line-height: 1rem;
 }
-.ck-feedback-dialog__response[data-v-181a7aa9] p,
-.ck-feedback-dialog__response[data-v-181a7aa9] li {
+.ck-feedback-dialog__response[data-v-4d1d9c59] p,
+.ck-feedback-dialog__response[data-v-4d1d9c59] li {
   line-height: 1.5rem;
 }
-.ck-feedback-dialog__response[data-v-181a7aa9] p {
+.ck-feedback-dialog__response[data-v-4d1d9c59] p {
   margin: 0 0 0.5rem 0;
 }
-.ck-feedback-dialog__response[data-v-181a7aa9] p:last-child {
+.ck-feedback-dialog__response[data-v-4d1d9c59] p:last-child {
   margin-bottom: 0;
 }
 

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

@@ -4,7 +4,7 @@ declare const meta: Meta<typeof CkFeedbackDialog>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**
- * Positive variant. Single-select reason chips on the right, the response on
+ * Positive variant. Multi-select reason chips on the right, the response on
  * the left, optional free text underneath.
  */
 export declare const Positive: Story;

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":"AAwSA,OAAO,KAAK,EACV,qBAAqB,EACrB,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AAygBjB,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":"AA4SA,OAAO,KAAK,EACV,qBAAqB,EACrB,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AA6gBjB,QAAA,MAAM,YAAY;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,16 +1,17 @@
 /**
  * Modal dialog for collecting qualitative feedback on an assistant response.
  * Opened after a binary thumbs-up / thumbs-down click (see `CkFeedbackButton`),
- * it lets the user pick a single reason code and add an optional free-text
- * comment, then submit both alongside the original sentiment.
+ * it lets the user pick one or more reason codes and add an optional free-text
+ * comment, then submit them alongside the original sentiment.
  *
- * One reason per submission: the backend (feedback-kit) stores a single
- * `reason` enum per response, so the dialog is single-select by design.
+ * Multiple reasons per submission: the backend (feedback-kit) stores a list of
+ * reason codes per response (each becomes its own categorical score), so the
+ * chips are multi-select.
  *
  * Fully prop-driven: the host application owns `open`, the list of reasons to
  * show (fetched from `GET /feedback/config`), the response text to display, and
  * the submission handler. The component only manages transient form state (the
- * selected reason and free-text value) until the user submits or cancels.
+ * selected reasons and free-text value) until the user submits or cancels.
  *
  * @category Feedback
  * @useCases collect qualitative feedback, gather a reason code for a response,
@@ -34,8 +35,12 @@ export interface CkFeedbackReason {
 export interface CkFeedbackDialogSubmitPayload {
     /** The sentiment the dialog was opened for. */
     sentiment: CkFeedbackSentiment;
-    /** The selected reason `code`, or `null` if the user only left free text. */
-    reason: string | null;
+    /**
+     * The selected reason `code`s. Empty array when the user submitted with
+     * only free text and no reason chips selected. Order follows the order in
+     * which the user toggled the chips on.
+     */
+    reasons: string[];
     /** Free-text comment, trimmed. Empty string when the user typed nothing. */
     reasonText: string;
 }
@@ -60,9 +65,9 @@ export interface CkFeedbackDialogProps {
      */
     responseText?: string;
     /**
-     * Available reasons to render as single-select chips. The host fetches the
+     * Available reasons to render as multi-select chips. The host fetches the
      * appropriate per-sentiment list from `GET /feedback/config` and passes it
-     * here. The chip shows `label`; the selected `code` is emitted on submit.
+     * here. The chip shows `label`; the selected `code`s are emitted on submit.
      */
     reasons: CkFeedbackReason[];
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,+CAA+C;IAC/C,SAAS,EAAE,mBAAmB,CAAC;IAC/B,6EAA6E;IAC7E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,EAAE,mBAAmB,CAAC;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACxC;;;;OAIG;IACH,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,6BAA6B,GAAG,IAAI,CAAC;IAC5D;;;OAGG;IACH,CAAC,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackDialog/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,+CAA+C;IAC/C,SAAS,EAAE,mBAAmB,CAAC;IAC/B;;;;OAIG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,EAAE,mBAAmB,CAAC;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACxC;;;;OAIG;IACH,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,6BAA6B,GAAG,IAAI,CAAC;IAC5D;;;OAGG;IACH,CAAC,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACrB"}

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 } from "../CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s } from "../CkInput.vue_vue_type_script_setup_true_lang-DPZedAQS.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-CMdy-lm0.js";
 import { C, d, p, u as u2, a } from "./useChatKitLabels-ZutacPad.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-Ct5hD214.js";
-import { _, a as a3, b as b2, 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 } from "./CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js";
+import { _, a as a3, b as b2, 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 } from "./CkInput.vue_vue_type_script_setup_true_lang-DPZedAQS.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "1.18.0",
+  "version": "2.0.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -60,8 +60,8 @@ describe('CkFeedbackDialog', () => {
     expect(await screen.findByText(TITLE_NEGATIVE)).toBeInTheDocument();
   });
 
-  // AC: "Submitting sends sentiment + reason + reason_text to the backend."
-  // The dialog emits the selected reason CODE (not the label) and the sentiment.
+  // AC: "Submitting sends sentiment + reasons + reason_text to the backend."
+  // The dialog emits the selected reason CODE(s) (not the label) and sentiment.
   it('emits submit with the selected reason code and sentiment', async () => {
     const user = userEvent.setup();
     const { emitted } = renderDialog({ sentiment: 'negative' });
@@ -75,25 +75,48 @@ describe('CkFeedbackDialog', () => {
     expect(submitEvents).toHaveLength(1);
     expect(submitEvents[0][0]).toEqual({
       sentiment: 'negative',
-      reason: REASONS[0].code,
+      reasons: [REASONS[0].code],
       reasonText: '',
     });
   });
 
-  // Single-select: choosing a second reason replaces the first (only one code
-  // is ever submitted).
-  it('keeps only one reason selected (single-select)', async () => {
+  // Multi-select: choosing several reasons emits all selected codes, in the
+  // order the user toggled them on.
+  it('emits all selected reason codes (multi-select)', async () => {
     const user = userEvent.setup();
     const { emitted } = renderDialog();
 
     await user.click(
       await screen.findByRole('button', { name: REASONS[0].label }),
     );
-    await user.click(screen.getByRole('button', { name: REASONS[1].label }));
+    await user.click(screen.getByRole('button', { name: REASONS[2].label }));
     await user.click(screen.getByRole('button', { name: SUBMIT }));
 
     const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
-    expect(submitEvents[0][0].reason).toBe(REASONS[1].code);
+    expect(submitEvents).toHaveLength(1);
+    expect(submitEvents[0][0].reasons).toEqual([
+      REASONS[0].code,
+      REASONS[2].code,
+    ]);
+  });
+
+  // Edge case: toggling a selected reason off again removes it from the
+  // payload. If it was the only signal, submit becomes disabled again.
+  it('deselects a reason when toggled twice and re-gates submit', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog();
+
+    const chip = await screen.findByRole('button', { name: REASONS[0].label });
+    const submit = screen.getByRole('button', { name: SUBMIT });
+
+    await user.click(chip); // select
+    await waitFor(() => expect(submit).not.toBeDisabled());
+
+    await user.click(chip); // deselect
+    await waitFor(() => expect(submit).toBeDisabled());
+
+    // Never submitted, so no payload was emitted.
+    expect(emitted('submit')).toBeUndefined();
   });
 
   // Submit is gated until the user provides at least one signal (a reason or
@@ -109,7 +132,7 @@ describe('CkFeedbackDialog', () => {
     await waitFor(() => expect(submit).not.toBeDisabled());
   });
 
-  // Free text alone (no reason) is a valid submission; reason is null.
+  // Free text alone (no reason) is a valid submission; reasons is empty.
   it('allows submitting with only free text', async () => {
     const user = userEvent.setup();
     const { emitted } = renderDialog();
@@ -120,11 +143,31 @@ describe('CkFeedbackDialog', () => {
     const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
     expect(submitEvents).toHaveLength(1);
     expect(submitEvents[0][0]).toMatchObject({
-      reason: null,
+      reasons: [],
       reasonText: 'Needs more detail',
     });
   });
 
+  // Edge case: reasons + free text combine into one payload, free text trimmed.
+  it('emits both reasons and free text when given', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog({ sentiment: 'negative' });
+
+    await user.click(
+      await screen.findByRole('button', { name: REASONS[0].label }),
+    );
+    await user.click(screen.getByRole('button', { name: REASONS[1].label }));
+    await user.type(screen.getByRole('textbox'), '  extra context  ');
+    await user.click(screen.getByRole('button', { name: SUBMIT }));
+
+    const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
+    expect(submitEvents[0][0]).toEqual({
+      sentiment: 'negative',
+      reasons: [REASONS[0].code, REASONS[1].code],
+      reasonText: 'extra context',
+    });
+  });
+
   // AC: "After clicking Cancel ... the user can click again" — cancel emits
   // both `cancel` and `update:open(false)` without a `submit`.
   it('emits cancel and closes without submitting', async () => {

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

@@ -152,7 +152,7 @@ function onCancel() {
 </template>`;
 
 /**
- * Positive variant. Single-select reason chips on the right, the response on
+ * Positive variant. Multi-select reason chips on the right, the response on
  * the left, optional free text underneath.
  */
 export const Positive: Story = {

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

@@ -109,7 +109,9 @@ const submitLabel = computed(
     defaultChatKitLabels.feedbackDialogSubmitLabel!,
 );
 
-const selectedReason = ref('');
+// Multi-select: the user may pick zero or more reason codes. Backed by an
+// array so `UiToggleGroup type="multiple"` can two-way bind directly.
+const selectedReasons = ref<string[]>([]);
 const freeText = ref('');
 
 // Per-instance id so the label/textarea association stays correct even when
@@ -120,7 +122,7 @@ watch(
   () => open,
   (isOpen, wasOpen) => {
     if (isOpen && !wasOpen) {
-      selectedReason.value = '';
+      selectedReasons.value = [];
       freeText.value = '';
     }
   },
@@ -134,7 +136,7 @@ const canSubmit = computed(
   () =>
     !disabled &&
     !submitting &&
-    (selectedReason.value !== '' || freeText.value.trim() !== ''),
+    (selectedReasons.value.length > 0 || freeText.value.trim() !== ''),
 );
 
 function handleOpenChange(next: boolean): void {
@@ -166,7 +168,9 @@ function handleSubmit(): void {
   }
   emit('submit', {
     sentiment,
-    reason: selectedReason.value === '' ? null : selectedReason.value,
+    // Copy so the host can't mutate our internal reactive array, and so the
+    // payload is a plain snapshot at submit time.
+    reasons: [...selectedReasons.value],
     reasonText: freeText.value.trim(),
   });
 }
@@ -200,8 +204,8 @@ function handleSubmit(): void {
 
         <section class="flex min-h-0 flex-col gap-4">
           <UiToggleGroup
-            v-model="selectedReason"
-            type="single"
+            v-model="selectedReasons"
+            type="multiple"
             variant="outline"
             :disabled="disabled || submitting"
             class="grid grid-cols-2 gap-4"

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

@@ -1,16 +1,17 @@
 /**
  * Modal dialog for collecting qualitative feedback on an assistant response.
  * Opened after a binary thumbs-up / thumbs-down click (see `CkFeedbackButton`),
- * it lets the user pick a single reason code and add an optional free-text
- * comment, then submit both alongside the original sentiment.
+ * it lets the user pick one or more reason codes and add an optional free-text
+ * comment, then submit them alongside the original sentiment.
  *
- * One reason per submission: the backend (feedback-kit) stores a single
- * `reason` enum per response, so the dialog is single-select by design.
+ * Multiple reasons per submission: the backend (feedback-kit) stores a list of
+ * reason codes per response (each becomes its own categorical score), so the
+ * chips are multi-select.
  *
  * Fully prop-driven: the host application owns `open`, the list of reasons to
  * show (fetched from `GET /feedback/config`), the response text to display, and
  * the submission handler. The component only manages transient form state (the
- * selected reason and free-text value) until the user submits or cancels.
+ * selected reasons and free-text value) until the user submits or cancels.
  *
  * @category Feedback
  * @useCases collect qualitative feedback, gather a reason code for a response,
@@ -36,8 +37,12 @@ export interface CkFeedbackReason {
 export interface CkFeedbackDialogSubmitPayload {
   /** The sentiment the dialog was opened for. */
   sentiment: CkFeedbackSentiment;
-  /** The selected reason `code`, or `null` if the user only left free text. */
-  reason: string | null;
+  /**
+   * The selected reason `code`s. Empty array when the user submitted with
+   * only free text and no reason chips selected. Order follows the order in
+   * which the user toggled the chips on.
+   */
+  reasons: string[];
   /** Free-text comment, trimmed. Empty string when the user typed nothing. */
   reasonText: string;
 }
@@ -63,9 +68,9 @@ export interface CkFeedbackDialogProps {
    */
   responseText?: string;
   /**
-   * Available reasons to render as single-select chips. The host fetches the
+   * Available reasons to render as multi-select chips. The host fetches the
    * appropriate per-sentiment list from `GET /feedback/config` and passes it
-   * here. The chip shows `label`; the selected `code` is emitted on submit.
+   * here. The chip shows `label`; the selected `code`s are emitted on submit.
    */
   reasons: CkFeedbackReason[];
   /**