@aleph-alpha/chat-kit 5.7.0 → 5.8.0

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-YHwE2DYx.js → CkHistory.vue_vue_type_script_setup_true_lang-DG96wNug.js}

@@ -730,7 +730,7 @@ const _hoisted_5$3 = {
   key: 0,
   class: "body-16-regular"
 };
-const _hoisted_6$2 = {
+const _hoisted_6$3 = {
   key: 0,
   "data-slot": "drop-zone-errors",
   class: "pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-[36rem] -translate-x-1/2 flex list-inside list-disc flex-col gap-1 rounded-md border border-border-surface-default bg-background-surface-default p-3 text-sm text-content-on-surface-secondary",
@@ -912,7 +912,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         }),
         createVNode(Transition, { name: "ck-drop-overlay" }, {
           default: withCtx(() => [
-            __props.showErrors && errors.value.length ? (openBlock(), createElementBlock("ul", _hoisted_6$2, [
+            __props.showErrors && errors.value.length ? (openBlock(), createElementBlock("ul", _hoisted_6$3, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(errors.value, (msg, i) => {
                 return openBlock(), createElementBlock("li", { key: i }, toDisplayString(msg), 1);
               }), 128))
@@ -1471,11 +1471,11 @@ const _hoisted_5$2 = {
   key: 1,
   class: "label-12-medium w-full truncate text-content-on-status-error-inverse"
 };
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
   key: 2,
   class: "label-12-medium w-full truncate text-content-on-surface-muted"
 };
-const _hoisted_7$1 = ["aria-label"];
+const _hoisted_7$2 = ["aria-label"];
 const _hoisted_8$1 = ["onClick"];
 const ITEM_GAP = 8;
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
@@ -1650,7 +1650,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       "model-value": aggregateProgress.value,
                       class: "h-1 w-full",
                       "aria-label": `${resolvedTriggerLabel.value} upload progress`
-                    }, null, 8, ["model-value", "aria-label"])) : hasFailures.value ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(failedStatusLabel.value), 1)) : __props.triggerLabel ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(countStatusLabel.value), 1)) : createCommentVNode("", true)
+                    }, null, 8, ["model-value", "aria-label"])) : hasFailures.value ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(failedStatusLabel.value), 1)) : __props.triggerLabel ? (openBlock(), createElementBlock("span", _hoisted_6$2, toDisplayString(countStatusLabel.value), 1)) : createCommentVNode("", true)
                   ])),
                   createVNode(unref(UiIcon), {
                     name: "chevron-down",
@@ -1695,7 +1695,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
                     ], 12, _hoisted_8$1);
                   }), 128))
-                ], 8, _hoisted_7$1)
+                ], 8, _hoisted_7$2)
               ]),
               _: 3
             }, 8, ["class"])
@@ -1718,11 +1718,11 @@ const _hoisted_5$1 = {
   key: 0,
   class: "truncate"
 };
-const _hoisted_6 = {
+const _hoisted_6$1 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_7 = {
+const _hoisted_7$1 = {
   key: 2,
   class: "truncate"
 };
@@ -1863,8 +1863,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "meta", {}, () => [
                   props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
-                  props.metaStart && props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_6, "|")) : createCommentVNode("", true),
-                  props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(props.metaEnd), 1)) : createCommentVNode("", true)
+                  props.metaStart && props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_6$1, "|")) : createCommentVNode("", true),
+                  props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(props.metaEnd), 1)) : createCommentVNode("", true)
                 ])
               ])) : createCommentVNode("", true)
             ])
@@ -2004,7 +2004,12 @@ const _hoisted_1$4 = ["disabled", "aria-expanded", "aria-label"];
 const _hoisted_2$2 = { class: "min-w-0 max-w-[10rem] truncate" };
 const _hoisted_3$1 = ["aria-label"];
 const _hoisted_4$1 = ["aria-selected", "onClick"];
-const _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
+const _hoisted_5 = { class: "flex min-w-0 flex-1 flex-col" };
+const _hoisted_6 = { class: "min-w-0 truncate" };
+const _hoisted_7 = {
+  key: 0,
+  class: "min-w-0 truncate text-xs text-content-on-surface-muted"
+};
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{ name: "CkModelSelector" },
   __name: "CkModelSelector",
@@ -2092,7 +2097,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       class: "relative flex w-full items-center gap-2 rounded-sm py-2 pr-8 pl-3 text-left body-14-regular text-content-on-surface-primary outline-none hover:bg-background-surface-muted-subtle focus-visible:ring-2 focus-visible:ring-ring",
                       onClick: ($event) => select(model.id)
                     }, [
-                      createElementVNode("span", _hoisted_5, toDisplayString(model.label), 1),
+                      createElementVNode("span", _hoisted_5, [
+                        createElementVNode("span", _hoisted_6, toDisplayString(model.label), 1),
+                        model.sublabel ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(model.sublabel), 1)) : createCommentVNode("", true)
+                      ]),
                       model.id === __props.selectedModelId ? (openBlock(), createBlock(unref(UiIcon), {
                         key: 0,
                         name: "check",

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

@@ -17,4 +17,10 @@ export declare const Placeholder: Story;
  * Disabled trigger — e.g. while the model list is still loading.
  */
 export declare const Disabled: Story;
+/**
+ * Rows can carry an optional `sublabel` — a muted second line for secondary
+ * metadata like a serving revision or provider. It shows only in the dropdown;
+ * the trigger stays label-only. Rows without one render just the label.
+ */
+export declare const WithSublabels: Story;
 //# sourceMappingURL=CkModelSelector.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CkModelSelector.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,eAAe,MAAM,uBAAuB,CAAC;AASpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAyBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAoC9C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC"}
+{"version":3,"file":"CkModelSelector.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,eAAe,MAAM,uBAAuB,CAAC;AASpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAyBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAoC9C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CkModelSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.vue"],"names":[],"mappings":"AAiIA,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAiR1E,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkModelSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.vue"],"names":[],"mappings":"AAwIA,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAiS1E,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -19,6 +19,12 @@ export interface CkModelOption {
     id: string;
     /** Display name shown in the trigger and the option row. */
     label: string;
+    /**
+     * Optional secondary line shown muted beneath `label` in the dropdown row
+     * (e.g. a serving revision or provider). Not shown on the trigger, which
+     * stays label-only. Rows without one render just the label.
+     */
+    sublabel?: string;
 }
 export interface CkModelSelectorProps {
     /** Models to choose from. The dropdown trigger is still rendered when empty. */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,wBAAwB,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;CACxC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,wBAAwB,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;CACxC"}

package/dist/components/index.js

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

package/dist/index.js

@@ -1,7 +1,7 @@
 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-YHwE2DYx.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-DG96wNug.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

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

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

@@ -46,6 +46,29 @@ describe('CkModelSelector', () => {
     expect(emitted('update:selectedModelId')).toEqual([['kimi']]);
   });
 
+  it('renders a sublabel beneath the label when a model has one', async () => {
+    const user = userEvent.setup();
+    render(CkModelSelector, {
+      props: {
+        models: [
+          { id: 'kimi', label: 'Kimi' },
+          { id: 'phoenix', label: 'Phoenix', sublabel: '20260708-ash' },
+        ] satisfies CkModelOption[],
+        selectedModelId: 'phoenix',
+      },
+    });
+
+    await user.click(screen.getByRole('button', { name: TRIGGER_LABEL }));
+
+    // The sublabel sits inside the option row alongside its label.
+    const phoenix = await screen.findByRole('option', { name: /Phoenix/ });
+    expect(phoenix).toHaveTextContent('20260708-ash');
+    // A model without a sublabel shows only its label.
+    expect(
+      await screen.findByRole('option', { name: 'Kimi' }),
+    ).toHaveTextContent(/^Kimi$/);
+  });
+
   it('does not re-emit when the already-selected model is clicked', async () => {
     const user = userEvent.setup();
     const { emitted } = render(CkModelSelector, {

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

@@ -99,3 +99,23 @@ export const Disabled: Story = {
   args: { disabled: true },
   render: renderStory,
 };
+
+/**
+ * Rows can carry an optional `sublabel` — a muted second line for secondary
+ * metadata like a serving revision or provider. It shows only in the dropdown;
+ * the trigger stays label-only. Rows without one render just the label.
+ */
+export const WithSublabels: Story = {
+  args: {
+    models: [
+      { id: 'kimi', label: 'Kimi' },
+      { id: 'phoenix', label: 'Phoenix', sublabel: '20260708-ash' },
+      {
+        id: 'phoenix-no-think',
+        label: 'Phoenix (no thinking)',
+        sublabel: '20260708-ash',
+      },
+    ],
+  },
+  render: renderStory,
+};

package/src/components/base/CkModelSelector/CkModelSelector.vue

@@ -98,7 +98,14 @@ function select(id: string) {
             class="relative flex w-full items-center gap-2 rounded-sm py-2 pr-8 pl-3 text-left body-14-regular text-content-on-surface-primary outline-none hover:bg-background-surface-muted-subtle focus-visible:ring-2 focus-visible:ring-ring"
             @click="select(model.id)"
           >
-            <span class="min-w-0 flex-1 truncate">{{ model.label }}</span>
+            <span class="flex min-w-0 flex-1 flex-col">
+              <span class="min-w-0 truncate">{{ model.label }}</span>
+              <span
+                v-if="model.sublabel"
+                class="min-w-0 truncate text-xs text-content-on-surface-muted"
+                >{{ model.sublabel }}</span
+              >
+            </span>
             <UiIcon
               v-if="model.id === selectedModelId"
               name="check"

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

@@ -19,6 +19,12 @@ export interface CkModelOption {
   id: string;
   /** Display name shown in the trigger and the option row. */
   label: string;
+  /**
+   * Optional secondary line shown muted beneath `label` in the dropdown row
+   * (e.g. a serving revision or provider). Not shown on the trigger, which
+   * stays label-only. Rows without one render just the label.
+   */
+  sublabel?: string;
 }
 
 export interface CkModelSelectorProps {