@aleph-alpha/chat-kit 5.0.1 → 5.2.0

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

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, computed, createVNode, toDisplayString, ref, onBeforeUnmount, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, computed, createVNode, toDisplayString, ref, onBeforeUnmount, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps, Comment, Text } from "vue";
 import { UiIcon, UiButton, UiFileType, UiPopover, UiPopoverTrigger, UiPopoverContent, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
 import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-zMFV7aEz.js";
 const MINUTE = 60;
@@ -45,7 +45,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -57,7 +57,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "CkStopIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$g, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$h, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", {
           d: "M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z",
           fill: "currentColor"
@@ -66,7 +66,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 0,
   "data-testid": "ck-agent-message-header",
   class: "w-full min-w-0"
@@ -90,7 +90,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           __props.bottomSeparator && "border-border-surface-default border-b"
         ])
       }, [
-        _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
           renderSlot(_ctx.$slots, "header")
         ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$a, [
@@ -103,7 +103,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   "data-testid": "ck-agent-message-header-icon",
   class: "flex flex-shrink-0 items-center justify-center"
@@ -126,7 +126,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           _ctx.$slots.activity && "border-border-surface-default border-b py-4"
         ])
       }, [
-        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
           renderSlot(_ctx.$slots, "icon")
         ])) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2$9, [
@@ -181,7 +181,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { 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" };
+const _hoisted_1$e = { 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" };
 const _hoisted_2$8 = { class: "flex items-center gap-2" };
 const _hoisted_3$7 = ["title"];
 const _hoisted_4$6 = { class: "line-clamp-6 break-words text-sm leading-5 text-content-on-surface-secondary" };
@@ -215,7 +215,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$8, [
           createVNode(unref(UiFileType), {
             filename: __props.fileName,
@@ -249,7 +249,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["aria-label"];
+const _hoisted_1$d = ["aria-label"];
 const CLOSE_DELAY_MS = 80;
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
@@ -337,7 +337,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 onKeydown: onTriggerKeydown,
                 onMouseenter: onPointerEnter,
                 onMouseleave: onPointerLeave
-              }, toDisplayString(__props.index), 43, _hoisted_1$c)
+              }, toDisplayString(__props.index), 43, _hoisted_1$d)
             ]),
             _: 1
           }),
@@ -378,7 +378,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-73025da4"]]);
-const _hoisted_1$b = ["data-message-row"];
+const _hoisted_1$c = ["data-message-row"];
 const _hoisted_2$7 = {
   key: 0,
   class: "flex min-w-0 justify-end"
@@ -533,7 +533,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ])) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
               renderSlot(_ctx.$slots, "agent-message", { message })
             ]))
-          ], 8, _hoisted_1$b);
+          ], 8, _hoisted_1$c);
         }), 128)),
         hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -568,7 +568,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   class: "sr-only",
   "aria-live": "polite"
 };
@@ -656,7 +656,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["disabled"]),
-          createElementVNode("span", _hoisted_1$a, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
+          createElementVNode("span", _hoisted_1$b, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
         ]),
         _: 1
       }, 8, ["open", "content"]);
@@ -664,7 +664,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 const CkCopyMessageButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-ba2e5f32"]]);
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   width: "208",
   height: "144",
   viewBox: "0 0 208 144",
@@ -678,13 +678,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "CkDropZoneIllustration",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
         createStaticVNode('<g clip-path="url(#ck-drop-zone-clip)"><path d="M0 71.5391C0 32.0292 32.0292 0 71.5391 0H135.739C175.249 0 207.278 32.0292 207.278 71.5391C207.278 111.049 175.249 143.078 135.739 143.078H71.5392C32.0292 143.078 0 111.049 0 71.5391Z" fill="#F2EBE8"></path><path d="M120.899 98.2608L134.973 45.7385C135.223 44.805 136.182 44.251 137.116 44.5011L172.976 54.1098C173.909 54.3599 174.463 55.3195 174.213 56.2531L160.14 108.775C159.89 109.709 158.93 110.263 157.997 110.013L122.137 100.404C121.203 100.154 120.649 99.1943 120.899 98.2608Z" fill="#FFCCBB" stroke="#333333"></path><g><path d="M153.839 69.86L144.18 67.2718C143.118 66.9871 142.015 67.6235 141.731 68.686L137.589 84.1409C137.305 85.2034 137.941 86.3056 139.004 86.5904L150.595 89.6962C151.657 89.9809 152.76 89.3445 153.044 88.282L156.668 74.759L153.839 69.86Z" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M153.839 69.86L153.063 72.7578C152.921 73.2891 153.239 73.8402 153.77 73.9825L156.668 74.759" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M143.783 76.4828L151.51 78.5534" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M143.006 79.3806L150.733 81.4511" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M142.23 82.2784L147.059 83.5725" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path></g><path d="M86.3795 98.2608L72.3062 45.7385C72.0561 44.805 71.0965 44.251 70.1629 44.5011L34.3029 54.1098C33.3694 54.3599 32.8153 55.3195 33.0655 56.2531L47.1388 108.775C47.3889 109.709 48.3485 110.263 49.2821 110.013L85.1421 100.404C86.0756 100.154 86.6297 99.1943 86.3795 98.2608Z" fill="#FFE9B5" stroke="#333333"></path><g><path d="M60.3294 76.0227L58.0001 67.3293C60.3057 66.7116 62.7623 67.035 64.8294 68.2284C66.8966 69.4219 68.405 71.3877 69.0228 73.6933L60.3294 76.0227Z" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M55.3303 68.8899C54.4077 69.3934 53.5755 70.0573 52.8752 70.8559C51.7015 72.1942 50.9511 73.8504 50.7187 75.6152C50.4864 77.38 50.7826 79.1741 51.5699 80.7706C52.3572 82.367 53.6002 83.6942 55.1417 84.5842C56.6833 85.4742 58.4541 85.8871 60.2304 85.7707C62.0066 85.6543 63.7084 85.0138 65.1206 83.9302C66.5328 82.8465 67.5919 81.3685 68.1641 79.6829C68.5135 78.6536 68.6717 77.5751 68.6371 76.4998" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path></g><path d="M76.5186 107.5L76.5185 35C76.5185 33.6193 77.6378 32.5 79.0185 32.5H128.519C129.899 32.5 131.019 33.6193 131.019 35V107.5C131.019 108.881 129.899 110 128.519 110H79.0186C77.6378 110 76.5186 108.881 76.5186 107.5Z" fill="#FFB3DD" stroke="#333333"></path><g><path d="M107.519 56.8335H95.519C94.419 56.8335 93.519 57.7335 93.519 58.8335V82.1665C93.519 83.2675 94.419 84.1665 95.519 84.1665H111.519C112.619 84.1665 113.519 83.2675 113.519 82.1665V64.8335L107.519 56.8335Z" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M107.519 56.8335V62.8335C107.519 63.9335 108.419 64.8335 109.519 64.8335H113.519" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M103.519 78.8335V70.8335" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path><path d="M99.519 74.8335L103.519 70.8335L107.519 74.8335" stroke="#1D1D1B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path></g></g><defs><clipPath id="ck-drop-zone-clip"><rect width="208" height="144" fill="white"></rect></clipPath></defs>', 2)
       ])]);
     };
   }
 });
-const _hoisted_1$8 = ["aria-label"];
+const _hoisted_1$9 = ["aria-label"];
 const _hoisted_2$6 = { 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$5 = { class: "flex flex-col items-center gap-1 text-center" };
 const _hoisted_4$5 = { class: "body-16-bold" };
@@ -868,7 +868,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ])
                 ], true)
               ])
-            ], 40, _hoisted_1$8)) : createCommentVNode("", true)
+            ], 40, _hoisted_1$9)) : createCommentVNode("", true)
           ]),
           _: 3
         }),
@@ -887,7 +887,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-54119668"]]);
-const _hoisted_1$7 = ["aria-label"];
+const _hoisted_1$8 = ["aria-label"];
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackButton"
@@ -996,7 +996,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["content"])
-      ], 8, _hoisted_1$7);
+      ], 8, _hoisted_1$8);
     };
   }
 });
@@ -1141,7 +1141,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "flex min-h-0 flex-col gap-2"
 };
@@ -1304,7 +1304,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   showResponseColumn.value ? "grid-cols-2" : "grid-cols-1"
                 ])
               }, [
-                showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$6, [
+                showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$7, [
                   createVNode(unref(UiFieldLabel), null, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(responseHeading.value), 1)
@@ -1422,7 +1422,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["aria-label"];
+const _hoisted_1$6 = ["aria-label"];
 const _hoisted_2$4 = ["onClick"];
 const _hoisted_3$3 = ["disabled", "aria-label"];
 const _hoisted_4$3 = {
@@ -1577,7 +1577,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
             ], 12, _hoisted_2$4);
           }), 128))
-        ], 8, _hoisted_1$5)) : (openBlock(), createBlock(unref(UiPopover), {
+        ], 8, _hoisted_1$6)) : (openBlock(), createBlock(unref(UiPopover), {
           key: 1,
           open: isOpen.value,
           "onUpdate:open": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event)
@@ -1669,7 +1669,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 const CHAT_HISTORY_ACTIVE_INDICATOR_CLASS = "ui-active-indicator";
-const _hoisted_1$4 = ["data-active"];
+const _hoisted_1$5 = ["data-active"];
 const _hoisted_2$3 = { class: "min-w-0 flex-1" };
 const _hoisted_3$2 = { class: "truncate body-14-regular text-content-on-surface-primary" };
 const _hoisted_4$2 = {
@@ -1927,7 +1927,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             }))
           ], 42, _hoisted_10))
         ], 34)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$4);
+      ], 10, _hoisted_1$5);
     };
   }
 });
@@ -1962,7 +1962,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["disabled", "aria-expanded", "aria-label"];
+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"];
@@ -2024,7 +2024,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   class: "shrink-0",
                   "aria-hidden": "true"
                 })
-              ], 8, _hoisted_1$3)
+              ], 8, _hoisted_1$4)
             ]),
             _: 1
           }),
@@ -2157,7 +2157,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "ck-prompt-root flex flex-col gap-2" };
+const _hoisted_1$3 = { class: "ck-prompt-root flex flex-col gap-2" };
 const _hoisted_2$1 = {
   key: 0,
   style: { "grid-area": "top" }
@@ -2254,12 +2254,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     onMounted(adjustHeight);
     __expose({ focus, submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      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,8 +2316,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d828da46"]]);
-const _hoisted_1$1 = {
+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"
 };
@@ -2329,7 +2329,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return _ctx.$slots.default || __props.text ? (openBlock(), createElementBlock("p", _hoisted_1$1, [
+      return _ctx.$slots.default || __props.text ? (openBlock(), createElementBlock("p", _hoisted_1$2, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(__props.text), 1)
         ])
@@ -2383,7 +2383,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
+const _hoisted_1$1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
 const _hoisted_2 = ["aria-expanded"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkUserMessage" },
@@ -2427,7 +2427,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       nextTick(measure);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createElementVNode("div", {
           ref_key: "contentRef",
           ref: contentRef,
@@ -2455,6 +2455,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c759a863"]]);
+const _hoisted_1 = {
+  key: 1,
+  class: "flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"
+};
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversation" },
   __name: "CkConversation",
@@ -2482,6 +2486,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function getMessageText(message) {
       return message.content.filter((c) => c.type === "text").map((c) => c.text).join("");
     }
+    function isVNodeEmpty(vnode) {
+      if (vnode.type === Comment) return true;
+      if (vnode.type === Text) return String(vnode.children ?? "").trim() === "";
+      if (vnode.type === Fragment) {
+        const children = vnode.children;
+        return !children || children.every(isVNodeEmpty);
+      }
+      return false;
+    }
+    function hasHeaderActivity(message) {
+      const slot = slots["agent-message-header-activity"];
+      return slot ? slot({ message }).some((vnode) => !isVNodeEmpty(vnode)) : false;
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$l, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
@@ -2533,7 +2550,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, [
-              hasIcon.value || _ctx.$slots["agent-message-header"] || _ctx.$slots["agent-message-header-content"] || _ctx.$slots["agent-message-header-activity"] ? {
+              hasIcon.value || _ctx.$slots["agent-message-header"] || _ctx.$slots["agent-message-header-content"] || hasHeaderActivity(message) ? {
                 name: "header",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "agent-message-header", { message }, () => [
@@ -2552,7 +2569,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                           }, () => [
                             __props.agentLoadingImage ? (openBlock(), createBlock(unref(UiAvatar), {
                               key: 0,
-                              class: "size-8"
+                              class: "size-4 rounded-2xl bg-background-surface-muted-subtle"
                             }, {
                               default: withCtx(() => [
                                 createVNode(unref(UiAvatarImage), {
@@ -2561,23 +2578,27 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                 }, null, 8, ["src", "alt"])
                               ]),
                               _: 1
-                            })) : (openBlock(), createBlock(unref(UiSpinner), {
-                              key: 1,
-                              class: "size-8",
-                              "aria-label": unref(labels).agentLoadingAvatarAlt
-                            }, null, 8, ["aria-label"]))
+                            })) : (openBlock(), createElementBlock("div", _hoisted_1, [
+                              createVNode(unref(UiSpinner), {
+                                class: "size-4",
+                                "aria-label": unref(labels).agentLoadingAvatarAlt
+                              }, null, 8, ["aria-label"])
+                            ]))
                           ]) : renderSlot(_ctx.$slots, "agent-message-icon", {
                             key: 1,
                             message
                           }, () => [
-                            createVNode(unref(UiAvatar), { class: "size-8" }, {
+                            createVNode(unref(UiAvatar), { class: "size-8 rounded-2xl bg-background-surface-muted-subtle" }, {
                               default: withCtx(() => [
                                 __props.agentAvatarImage ? (openBlock(), createBlock(unref(UiAvatarImage), {
                                   key: 0,
                                   src: __props.agentAvatarImage,
                                   alt: unref(labels).agentAvatarAlt
                                 }, null, 8, ["src", "alt"])) : createCommentVNode("", true),
-                                __props.agentAvatarFallback ? (openBlock(), createBlock(unref(UiAvatarFallback), { key: 1 }, {
+                                __props.agentAvatarFallback ? (openBlock(), createBlock(unref(UiAvatarFallback), {
+                                  key: 1,
+                                  class: "bg-background-surface-muted-subtle rounded-2xl"
+                                }, {
                                   default: withCtx(() => [
                                     createTextVNode(toDisplayString(__props.agentAvatarFallback), 1)
                                   ]),
@@ -2590,7 +2611,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         ]),
                         key: "0"
                       } : void 0,
-                      _ctx.$slots["agent-message-header-activity"] ? {
+                      hasHeaderActivity(message) ? {
                         name: "activity",
                         fn: withCtx(() => [
                           renderSlot(_ctx.$slots, "agent-message-header-activity", { message })

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

@@ -7,16 +7,11 @@ type Story = StoryObj<typeof meta>;
  * Drop-in conversation UI. Pass `messages` with `role`, `content` (a list of
  * text / tool / reasoning parts), and `status` fields and CkConversation
  * renders user bubbles, assistant markdown, avatars, and a copy button on
- * each reply.
+ * each reply. Here the assistant messages carry a `reasoning` part whose
+ * `text` is surfaced as the header (e.g. "Thought about …") via
+ * `#agent-message-header-content`.
  */
 export declare const Default: Story;
-/**
- * Demonstrates a chain-of-thought assistant turn with reasoning and tool
- * calls in `message.content`. By default only text parts are rendered, so
- * use `#agent-message-content` to opt-in to a custom rendering of the
- * non-text parts. The host owns the visual treatment for those segments.
- */
-export declare const ChainOfThought: Story;
 /**
  * Uses a remote avatar image (with fallback text). Use when you want a
  * branded agent identity in each reply.
@@ -38,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":"AAQA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAiH3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAkCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqTnC;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,KAyB5B,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/composed/CkConversation/CkConversation.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkConversation.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkConversation/CkConversation.vue"],"names":[],"mappings":"AA6MA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,gBAAgB,CAAC;AAOtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAkBnD,KAAK,WAAW,GAAG;IACjB,gDAAgD;IAChD,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1D,yDAAyD;IACzD,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,iDAAiD;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,oCAAoC;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,8EAA8E;IAC9E,4BAA4B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,iFAAiF;IACjF,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,6EAA6E;IAC7E,8BAA8B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E;;;;OAIG;IACH,+BAA+B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,mDAAmD;IACnD,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,qEAAqE;IACrE,0BAA0B,EAAE,CAAC,KAAK,EAAE;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;CACZ,CAAC;AAsUF,QAAA,MAAM,UAAU;;;;6EAGd,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":"CkConversation.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkConversation/CkConversation.vue"],"names":[],"mappings":"AA6OA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,gBAAgB,CAAC;AAOtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAkBnD,KAAK,WAAW,GAAG;IACjB,gDAAgD;IAChD,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1D,yDAAyD;IACzD,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,iDAAiD;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,oCAAoC;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,8EAA8E;IAC9E,4BAA4B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,iFAAiF;IACjF,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,6EAA6E;IAC7E,8BAA8B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E;;;;OAIG;IACH,+BAA+B,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,mDAAmD;IACnD,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,qEAAqE;IACrE,0BAA0B,EAAE,CAAC,KAAK,EAAE;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;CACZ,CAAC;AA+WF,QAAA,MAAM,UAAU;;;;6EAGd,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/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-CtQUc3m3.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-CtQUc3m3.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.0.1",
+  "version": "5.2.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -91,6 +91,8 @@
     "@unocss/reset": "^66.6.2",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "^2.4.6",
+    "concurrently": "9.2.1",
+    "http-server": "14.1.1",
     "jsdom": "^25.0.1",
     "storybook": "^10.2.17",
     "pinia": "^3.0.3",
@@ -102,6 +104,7 @@
     "vitest": "3.2.6",
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
+    "wait-on": "9.0.3",
     "@aleph-alpha/eslint-config-frontend": "0.7.0",
     "@aleph-alpha/prettier-config-frontend": "2.1.0",
     "@aleph-alpha/tsconfig-frontend": "0.7.0"
@@ -114,6 +117,8 @@
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint --fix src",
     "storybook": "storybook dev -p 6007",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:storybook": "pnpm concurrently -k --ks SIGKILL -s command-test -n \"storybook,test\" \"pnpm http-server ../../dist/storybook/chat-kit --port 4401 --silent\" \"wait-on tcp:4401 && test-storybook --url http://127.0.0.1:4401\"",
+    "test:storybook:local": "pnpm build-storybook && pnpm concurrently -k --ks SIGKILL -s command-test -n \"storybook,test\" \"pnpm http-server storybook-static --port 4401 --silent\" \"wait-on tcp:4401 && test-storybook --url http://127.0.0.1:4401\""
   }
 }

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.spec.ts

@@ -2,7 +2,7 @@ import type { BaseMessage, MessageContent } from '../../../types';
 import CkConversation from './CkConversation.vue';
 import { defaultMarkdownClasses } from '../../base/CkMarkdownRenderer/defaultMarkdownClasses';
 import { render, screen } from '@testing-library/vue';
-import { h } from 'vue';
+import { createCommentVNode, h } from 'vue';
 
 const now = new Date();
 
@@ -404,6 +404,37 @@ describe('CkConversation', () => {
       expect(screen.getByTestId('activity')).toBeInTheDocument();
     });
 
+    it('shows the header divider when the activity slot renders content', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
+        slots: {
+          'agent-message-header-activity': () =>
+            h('button', { 'data-testid': 'activity' }, '1 tool'),
+        },
+      });
+
+      expect(screen.getByTestId('activity')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-row').className,
+      ).toContain('border-b');
+    });
+
+    it('omits the header divider when the activity slot renders nothing for a message', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
+        slots: {
+          // Emulates a falsy `v-if` inside the slot (renders a comment node).
+          'agent-message-header-activity': () => createCommentVNode('v-if'),
+        },
+      });
+
+      // The header still renders because of the avatar icon...
+      const row = screen.getByTestId('ck-agent-message-header-row');
+      // ...but there is no activity control and no divider.
+      expect(screen.queryByTestId('activity')).not.toBeInTheDocument();
+      expect(row.className).not.toContain('border-b');
+    });
+
     it('allows adding footer actions via agent-message-footer slot', () => {
       render(CkConversation, {
         props: { messages: [agentMessage()] },

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

@@ -4,6 +4,7 @@ import type { CkFeedbackValue } from '../../base/CkFeedbackButton';
 import type {
   BaseMessage,
   MessageContent,
+  MessageReasoningContent,
   MessageTextContent,
 } from '../../../types';
 import CkConversation from './CkConversation.vue';
@@ -30,6 +31,15 @@ function getMessageText(message: BaseMessage): string {
     .join('');
 }
 
+/** First reasoning trail found on a message, used as the header text. */
+function getReasoningText(message: BaseMessage): string {
+  return (
+    message.content.find(
+      (c): c is MessageReasoningContent => c.type === 'reasoning',
+    )?.text ?? ''
+  );
+}
+
 const markdownContent = [
   'Based on a review of internal documents, here are the **key lessons learned** and best practices from the *Digital Transformation Phase 1* project, broken down by category.',
   '',
@@ -67,6 +77,12 @@ const sampleMessages: BaseMessage[] = [
     id: '2',
     role: 'assistant',
     content: [
+      {
+        type: 'reasoning',
+        id: 'r-2',
+        status: 'completed',
+        text: 'Thought about how best to help',
+      },
       text('Of course! I am here to help. What would you like to know?'),
     ],
     createdAt: now,
@@ -86,19 +102,32 @@ const sampleMessages: BaseMessage[] = [
   {
     id: '4',
     role: 'assistant',
-    content: [text(markdownContent)],
+    content: [
+      {
+        type: 'reasoning',
+        id: 'r-4',
+        status: 'completed',
+        text: 'Thought about the lessons learned of the Digital Transformation Phase 1',
+      },
+      text(markdownContent),
+    ],
     createdAt: now,
     status: 'completed',
   },
 ];
 
-const chainOfThoughtMessages: 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(
-        'Look up the recent revenue numbers for Q3 and tell me how they compare to last year.',
+        "Find the lessons learned from the 'Digital Transformation Phase 1' project.",
       ),
     ],
     createdAt: now,
@@ -107,16 +136,11 @@ const chainOfThoughtMessages: BaseMessage[] = [
   {
     id: '2',
     role: 'assistant',
-    createdAt: now,
-    status: 'completed',
     content: [
-      { type: 'reasoning', id: 'r-1', status: 'completed' },
-      { type: 'tool', id: 't-1', name: 'finance_lookup' },
-      { type: 'tool', id: 't-2', name: 'compare_periods' },
-      text(
-        '## Revenue summary\n\n- **Q3 2025:** **$48.2M** (+12% YoY)\n- **Q3 2024:** $43.0M\n\nThe biggest contributor was the EMEA segment, which grew **18%** year over year. North America was roughly flat.',
-      ),
+      { type: 'text', id: 'a-loading', text: '', status: 'in_progress' },
     ],
+    createdAt: now,
+    status: 'sending',
   },
 ];
 
@@ -174,63 +198,27 @@ const messages: BaseMessage[] = [
   {
     id: '2',
     role: 'assistant',
-    content: [{ type: 'text', id: 't2', text: 'Hi there!', status: 'completed' }],
+    content: [
+      // A \`reasoning\` part carries the thinking trail shown in the header.
+      { type: 'reasoning', id: 'r2', text: 'Thought about how best to help', status: 'completed' },
+      { type: 'text', id: 't2', text: 'Hi there!', status: 'completed' },
+    ],
     createdAt: new Date(),
     status: 'completed',
   },
 ];
-</script>
-
-<template>
-  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />
-</template>`;
 
-const chainOfThoughtTemplateSource = `<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: 'Compare Q3 revenue.', status: 'completed' }],
-    createdAt: new Date(),
-    status: 'completed',
-  },
-  {
-    id: '2',
-    role: 'assistant',
-    createdAt: new Date(),
-    status: 'completed',
-    content: [
-      { type: 'reasoning', id: 'r1', status: 'completed' },
-      { type: 'tool', id: 'tl1', name: 'finance_lookup' },
-      { type: 'tool', id: 'tl2', name: 'compare_periods' },
-      { type: 'text', id: 't2', text: 'Q3 grew **12% YoY**.', status: 'completed' },
-    ],
-  },
-];
+// Pull the reasoning trail off the message so it can be shown in the header.
+function getReasoningText(message: BaseMessage): string {
+  return message.content.find((c) => c.type === 'reasoning')?.text ?? '';
+}
 </script>
 
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
-    <!--
-      Use #agent-message-content to take over rendering of the entire body.
-      The slot exposes the full message so you can iterate every content
-      part (text, tool, reasoning) and render them however you like.
-    -->
-    <template #agent-message-content="{ message }">
-      <div class="flex flex-col gap-2">
-        <template v-for="part in message.content" :key="part.id">
-          <span v-if="part.type === 'reasoning'" class="text-xs italic opacity-60">
-            Reasoning: {{ part.status }}
-          </span>
-          <span v-else-if="part.type === 'tool'" class="text-xs font-mono opacity-70">
-            ⚙️ {{ part.name }}
-          </span>
-          <p v-else-if="part.type === 'text'">{{ part.text }}</p>
-        </template>
-      </div>
+    <!-- Surface the reasoning trail from the message data as the header. -->
+    <template #agent-message-header-content="{ message }">
+      {{ getReasoningText(message) }}
     </template>
   </CkConversation>
 </template>`;
@@ -288,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 {
@@ -470,51 +485,25 @@ import { CkConversation } from '@aleph-alpha/chat-kit';
  * Drop-in conversation UI. Pass `messages` with `role`, `content` (a list of
  * text / tool / reasoning parts), and `status` fields and CkConversation
  * renders user bubbles, assistant markdown, avatars, and a copy button on
- * each reply.
+ * each reply. Here the assistant messages carry a `reasoning` part whose
+ * `text` is surfaced as the header (e.g. "Thought about …") via
+ * `#agent-message-header-content`.
  */
 export const Default: Story = {
   render: () => ({
     components: { CkConversation },
     setup() {
-      return { messages: sampleMessages };
-    },
-    template:
-      '<CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />',
-  }),
-  parameters: { docs: { source: { code: defaultTemplateSource } } },
-};
-
-/**
- * Demonstrates a chain-of-thought assistant turn with reasoning and tool
- * calls in `message.content`. By default only text parts are rendered, so
- * use `#agent-message-content` to opt-in to a custom rendering of the
- * non-text parts. The host owns the visual treatment for those segments.
- */
-export const ChainOfThought: Story = {
-  render: () => ({
-    components: { CkConversation },
-    setup() {
-      return { messages: chainOfThoughtMessages };
+      return { messages: sampleMessages, getReasoningText };
     },
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
-        <template #agent-message-content="{ message }">
-          <div style="display: flex; flex-direction: column; gap: 8px;">
-            <template v-for="part in message.content" :key="part.id">
-              <span v-if="part.type === 'reasoning'" style="font-size: 12px; font-style: italic; opacity: 0.6;">
-                Reasoning: {{ part.status }}
-              </span>
-              <span v-else-if="part.type === 'tool'" style="font-size: 12px; font-family: monospace; opacity: 0.7;">
-                ⚙️ {{ part.name }}
-              </span>
-              <p v-else-if="part.type === 'text'" style="margin: 0;">{{ part.text }}</p>
-            </template>
-          </div>
+        <template #agent-message-header-content="{ message }">
+          {{ getReasoningText(message) }}
         </template>
       </CkConversation>
     `,
   }),
-  parameters: { docs: { source: { code: chainOfThoughtTemplateSource } } },
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
 };
 
 /**
@@ -588,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

package/src/components/composed/CkConversation/CkConversation.vue

@@ -14,7 +14,7 @@ import {
   UiAvatarImage,
   UiSpinner,
 } from '@aleph-alpha/ui-library';
-import { computed } from 'vue';
+import { Comment, Fragment, Text, computed, type VNode } from 'vue';
 
 defineOptions({ name: 'CkConversation' });
 
@@ -92,6 +92,30 @@ function getMessageText(message: BaseMessage): string {
     .map((c) => c.text)
     .join('');
 }
+
+/** Whether a rendered VNode tree is effectively empty (e.g. a falsy `v-if`). */
+function isVNodeEmpty(vnode: VNode): boolean {
+  if (vnode.type === Comment) return true;
+  if (vnode.type === Text) return String(vnode.children ?? '').trim() === '';
+  if (vnode.type === Fragment) {
+    const children = vnode.children as VNode[] | null;
+    return !children || children.every(isVNodeEmpty);
+  }
+  return false;
+}
+
+/**
+ * Whether the `agent-message-header-activity` slot renders real content for
+ * this message. Gates both the activity control and the header divider, so a
+ * host can toggle them per message with a `v-if` inside the slot instead of
+ * the divider being forced on for every message once the slot is defined.
+ */
+function hasHeaderActivity(message: BaseMessage): boolean {
+  const slot = slots['agent-message-header-activity'] as
+    | ((props: { message: BaseMessage }) => VNode[])
+    | undefined;
+  return slot ? slot({ message }).some((vnode) => !isVNodeEmpty(vnode)) : false;
+}
 </script>
 
 <template>
@@ -116,7 +140,7 @@ function getMessageText(message: BaseMessage): string {
               hasIcon ||
               $slots['agent-message-header'] ||
               $slots['agent-message-header-content'] ||
-              $slots['agent-message-header-activity']
+              hasHeaderActivity(message)
             "
             #header
           >
@@ -125,31 +149,42 @@ function getMessageText(message: BaseMessage): string {
                 <template v-if="hasIcon" #icon>
                   <template v-if="isLoading(message)">
                     <slot name="agent-message-loading-icon" :message="message">
-                      <UiAvatar v-if="agentLoadingImage" class="size-8">
+                      <UiAvatar
+                        v-if="agentLoadingImage"
+                        class="size-4 rounded-2xl bg-background-surface-muted-subtle"
+                      >
                         <UiAvatarImage
                           :src="agentLoadingImage"
                           :alt="labels.agentLoadingAvatarAlt"
                         />
                       </UiAvatar>
-                      <UiSpinner
+                      <div
                         v-else
-                        class="size-8"
-                        :aria-label="labels.agentLoadingAvatarAlt"
-                      />
+                        class="flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"
+                      >
+                        <UiSpinner
+                          class="size-4"
+                          :aria-label="labels.agentLoadingAvatarAlt"
+                        />
+                      </div>
                     </slot>
                   </template>
 
                   <template v-else>
                     <slot name="agent-message-icon" :message="message">
-                      <UiAvatar class="size-8">
+                      <UiAvatar
+                        class="size-8 rounded-2xl bg-background-surface-muted-subtle"
+                      >
                         <UiAvatarImage
                           v-if="agentAvatarImage"
                           :src="agentAvatarImage"
                           :alt="labels.agentAvatarAlt"
                         />
-                        <UiAvatarFallback v-if="agentAvatarFallback">{{
-                          agentAvatarFallback
-                        }}</UiAvatarFallback>
+                        <UiAvatarFallback
+                          v-if="agentAvatarFallback"
+                          class="bg-background-surface-muted-subtle rounded-2xl"
+                          >{{ agentAvatarFallback }}</UiAvatarFallback
+                        >
                       </UiAvatar>
                     </slot>
                   </template>
@@ -157,10 +192,7 @@ function getMessageText(message: BaseMessage): string {
 
                 <slot name="agent-message-header-content" :message="message" />
 
-                <template
-                  v-if="$slots['agent-message-header-activity']"
-                  #activity
-                >
+                <template v-if="hasHeaderActivity(message)" #activity>
                   <slot
                     name="agent-message-header-activity"
                     :message="message"