@aleph-alpha/chat-kit 5.1.0 → 5.2.0

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-vlUZ_Tw1.js → CkHistory.vue_vue_type_script_setup_true_lang-BxzHdcxY.js}

@@ -2257,9 +2257,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("form", {
           class: normalizeClass([
-            "border-border-surface-default bg-background-input-strong  min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ",
+            "ck-prompt-form border-border-surface-default bg-background-input-strong grid items-center gap-x-0 gap-y-5 border transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ",
             hasMultipleRows.value ? "rounded-2xl" : "rounded-3xl",
-            isKeyboardFocused.value ? "border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2" : "ck-prompt-form"
+            isKeyboardFocused.value ? "border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2" : "ck-prompt-shadow"
           ]),
           style: normalizeStyle({
             gridTemplateColumns: "auto 1fr auto",
@@ -2316,7 +2316,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d828da46"]]);
+const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c6b78cec"]]);
 const _hoisted_1$2 = {
   key: 0,
   class: "text-center text-content-on-surface-muted text-xs font-normal leading-4"

package/dist/chat-kit.css

@@ -89,18 +89,21 @@
    variant (≤320px container) and the Desktop variant (≥768px container) rather
    than snapping at a breakpoint. Range = 768 − 320 = 448; each term is
    `clamp(mobile, calc(mobile + (100cqw − 320px) × span / 448), desktop)`. */
-.ck-prompt-root[data-v-d828da46] {
+.ck-prompt-root[data-v-c6b78cec] {
   container-type: inline-size;
 }
-
-/* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
-   `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
-   utility from preset-wind4 uses a cold black-based shadow instead. */
-.ck-prompt-form[data-v-d828da46] {
+.ck-prompt-form[data-v-c6b78cec] {
   /* 8px (mobile) → 16px (desktop) */
   padding: clamp(8px, calc(8px + (100cqw - 320px) * 8 / 448), 16px);
   /* 52px → 68px (= 36px button + 2× padding) */
   min-height: clamp(52px, calc(52px + (100cqw - 320px) * 16 / 448), 68px);
+}
+
+/* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
+   `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
+   utility from preset-wind4 uses a cold black-based shadow instead. Applied
+   only when the field is not keyboard-focused; the focus ring replaces it. */
+.ck-prompt-shadow[data-v-c6b78cec] {
   box-shadow:
     0 4px 6px -2px rgba(112, 95, 90, 0.1),
     0 6px 14px -2px rgba(248, 94, 43, 0.05);
@@ -109,7 +112,7 @@
 /* 14px → 16px font, 20px → 24px line-height, 120px → 144px (6 lines) cap.
    `adjustHeight` reads the resolved line-height from the DOM so the auto-grow
    math tracks these fluid values. */
-.ck-prompt-textarea[data-v-d828da46] {
+.ck-prompt-textarea[data-v-c6b78cec] {
   font-size: clamp(14px, calc(14px + (100cqw - 320px) * 2 / 448), 16px);
   line-height: clamp(20px, calc(20px + (100cqw - 320px) * 4 / 448), 24px);
   max-height: clamp(120px, calc(120px + (100cqw - 320px) * 24 / 448), 144px);
@@ -118,17 +121,17 @@
 /* Slim styled scrollbar for the multi-line textarea — matches Figma's 4 px
    muted-default track. Firefox uses the native `scrollbar-*` properties;
    Chromium/WebKit needs the `::-webkit-scrollbar` pseudo-elements. */
-.ck-prompt-textarea[data-v-d828da46] {
+.ck-prompt-textarea[data-v-c6b78cec] {
   scrollbar-width: thin;
   scrollbar-color: rgba(166, 141, 133, 0.3) transparent;
 }
-.ck-prompt-textarea[data-v-d828da46]::-webkit-scrollbar {
+.ck-prompt-textarea[data-v-c6b78cec]::-webkit-scrollbar {
   width: 4px;
 }
-.ck-prompt-textarea[data-v-d828da46]::-webkit-scrollbar-track {
+.ck-prompt-textarea[data-v-c6b78cec]::-webkit-scrollbar-track {
   background: transparent;
 }
-.ck-prompt-textarea[data-v-d828da46]::-webkit-scrollbar-thumb {
+.ck-prompt-textarea[data-v-c6b78cec]::-webkit-scrollbar-thumb {
   background: rgba(166, 141, 133, 0.3);
   border-radius: 9999px;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CkPromptInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptInput/CkPromptInput.vue"],"names":[],"mappings":"AA2QA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8GlD,iBAAS,MAAM,IAAI,IAAI,CAKtB;AASD,iBAAS,KAAK,IAAI,IAAI,CAErB;AAmLD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO;;;;CAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACnD;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CkPromptInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptInput/CkPromptInput.vue"],"names":[],"mappings":"AA+QA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8GlD,iBAAS,MAAM,IAAI,IAAI,CAKtB;AASD,iBAAS,KAAK,IAAI,IAAI,CAErB;AAkLD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO;;;;CAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACnD;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/composed/CkConversation/CkConversation.stories.d.ts

@@ -33,6 +33,12 @@ export declare const NoIcon: Story;
  * your own branded icon.
  */
 export declare const WithCustomIcon: Story;
+/**
+ * A conversation with an in-flight assistant reply. The final message's
+ * `status: 'sending'` swaps its avatar for the loading icon (a spinner by
+ * default; set `agent-loading-image` to show a custom loading avatar instead).
+ */
+export declare const WithLoadingIcon: Story;
 /**
  * Overrides `#agent-message-footer` to add real action buttons next to each
  * assistant reply: `CkCopyMessageButton` for clipboard copy and

package/dist/components/composed/CkConversation/CkConversation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkConversation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkConversation/CkConversation.stories.ts"],"names":[],"mappings":"AASA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA4G3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAkCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiRnC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAYtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAiBnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAiBpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA4GjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAmBvC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
+{"version":3,"file":"CkConversation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkConversation/CkConversation.stories.ts"],"names":[],"mappings":"AASA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAwI3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAkCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4SnC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAYtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAmC/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAiBnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAiBpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA4GjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAmBvC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

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 } from "../CkHistory.vue_vue_type_script_setup_true_lang-vlUZ_Tw1.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 } from "../CkHistory.vue_vue_type_script_setup_true_lang-BxzHdcxY.js";
 export {
   _ as CkAgentMessage,
   a as CkAgentMessageHeader,

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-N50Yj-NU.js";
 import { C, d, p, u as u2, a } from "./useChatKitLabels-zMFV7aEz.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-CyrVnbS9.js";
-import { _, a as a3, C as C2, b as b2, 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 } from "./CkHistory.vue_vue_type_script_setup_true_lang-vlUZ_Tw1.js";
+import { _, a as a3, C as C2, b as b2, 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 } from "./CkHistory.vue_vue_type_script_setup_true_lang-BxzHdcxY.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -106,8 +106,8 @@
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
     "@aleph-alpha/eslint-config-frontend": "0.7.0",
-    "@aleph-alpha/tsconfig-frontend": "0.7.0",
-    "@aleph-alpha/prettier-config-frontend": "2.1.0"
+    "@aleph-alpha/prettier-config-frontend": "2.1.0",
+    "@aleph-alpha/tsconfig-frontend": "0.7.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/components/base/CkPromptInput/CkPromptInput.vue

@@ -160,11 +160,11 @@ defineExpose({ focus, submit });
   <div class="ck-prompt-root flex flex-col gap-2">
     <form
       :class="[
-        'border-border-surface-default bg-background-input-strong  min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ',
+        'ck-prompt-form border-border-surface-default bg-background-input-strong grid items-center gap-x-0 gap-y-5 border transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ',
         hasMultipleRows ? 'rounded-2xl' : 'rounded-3xl',
         isKeyboardFocused
           ? 'border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2'
-          : 'ck-prompt-form',
+          : 'ck-prompt-shadow',
       ]"
       :style="{
         gridTemplateColumns: 'auto 1fr auto',
@@ -222,14 +222,18 @@ defineExpose({ focus, submit });
   container-type: inline-size;
 }
 
-/* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
-   `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
-   utility from preset-wind4 uses a cold black-based shadow instead. */
 .ck-prompt-form {
   /* 8px (mobile) → 16px (desktop) */
   padding: clamp(8px, calc(8px + (100cqw - 320px) * 8 / 448), 16px);
   /* 52px → 68px (= 36px button + 2× padding) */
   min-height: clamp(52px, calc(52px + (100cqw - 320px) * 16 / 448), 68px);
+}
+
+/* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
+   `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
+   utility from preset-wind4 uses a cold black-based shadow instead. Applied
+   only when the field is not keyboard-focused; the focus ring replaces it. */
+.ck-prompt-shadow {
   box-shadow:
     0 4px 6px -2px rgba(112, 95, 90, 0.1),
     0 6px 14px -2px rgba(248, 94, 43, 0.05);

package/src/components/composed/CkConversation/CkConversation.stories.ts

@@ -116,6 +116,34 @@ const sampleMessages: BaseMessage[] = [
   },
 ];
 
+/**
+ * A conversation whose final assistant turn is still being generated. The
+ * message `status` of `'sending'` (or `'started'`) drives the loading icon —
+ * a spinner by default, or `agentLoadingImage` when provided.
+ */
+const loadingMessages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [
+      text(
+        "Find the lessons learned from the 'Digital Transformation Phase 1' project.",
+      ),
+    ],
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: [
+      { type: 'text', id: 'a-loading', text: '', status: 'in_progress' },
+    ],
+    createdAt: now,
+    status: 'sending',
+  },
+];
+
 const meta: Meta<typeof CkConversation> = {
   title: 'Composed/CkConversation',
   component: CkConversation,
@@ -248,6 +276,33 @@ const messages: BaseMessage[] = [/* ... */];
   </CkConversation>
 </template>`;
 
+const withLoadingIconTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [{ type: 'text', id: 't1', text: 'Find the lessons learned.', status: 'completed' }],
+    createdAt: new Date(),
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    // A 'sending' / 'started' status renders the loading icon (spinner by default).
+    content: [{ type: 'text', id: 't2', text: '', status: 'in_progress' }],
+    createdAt: new Date(),
+    status: 'sending',
+  },
+];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />
+</template>`;
+
 const withFooterActionsTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import {
@@ -522,6 +577,23 @@ export const WithCustomIcon: Story = {
   parameters: { docs: { source: { code: withCustomIconTemplateSource } } },
 };
 
+/**
+ * A conversation with an in-flight assistant reply. The final message's
+ * `status: 'sending'` swaps its avatar for the loading icon (a spinner by
+ * default; set `agent-loading-image` to show a custom loading avatar instead).
+ */
+export const WithLoadingIcon: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: loadingMessages };
+    },
+    template:
+      '<CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: withLoadingIconTemplateSource } } },
+};
+
 /**
  * Overrides `#agent-message-footer` to add real action buttons next to each
  * assistant reply: `CkCopyMessageButton` for clipboard copy and