@aleph-alpha/chat-kit 5.3.0 → 5.4.0

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-BcYJmbCd.js → CkHistory.vue_vue_type_script_setup_true_lang-D9oP6oEj.js}

@@ -184,7 +184,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 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" };
+const _hoisted_4$7 = { class: "line-clamp-6 break-words text-sm leading-5 text-content-on-surface-secondary" };
 const _hoisted_5$4 = {
   key: 0,
   class: "text-sm leading-5 text-content-on-surface-muted"
@@ -243,7 +243,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["aria-label"])) : createCommentVNode("", true)
         ]),
-        createElementVNode("p", _hoisted_4$6, toDisplayString(__props.snippet), 1),
+        createElementVNode("p", _hoisted_4$7, toDisplayString(__props.snippet), 1),
         __props.locationLabel ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(__props.locationLabel), 1)) : createCommentVNode("", true)
       ]);
     };
@@ -378,12 +378,13 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-73025da4"]]);
-const _hoisted_1$c = ["data-message-row"];
-const _hoisted_2$7 = {
+const _hoisted_1$c = { class: "relative flex min-h-0 flex-col overflow-hidden" };
+const _hoisted_2$7 = ["data-message-row"];
+const _hoisted_3$6 = {
   key: 0,
   class: "flex min-w-0 justify-end"
 };
-const _hoisted_3$6 = {
+const _hoisted_4$6 = {
   key: 1,
   class: "flex min-w-0 justify-start"
 };
@@ -400,6 +401,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const isAutoScrollEnabled = ref(true);
     const hasBottomSpacer = ref(false);
     const spacerHeight = ref(0);
+    const showTopFade = ref(false);
+    const showBottomFade = ref(false);
     let resizeObserver = null;
     onMounted(() => {
       const container = scrollContainerRef.value;
@@ -409,10 +412,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           for (const entry of entries) {
             containerHeight.value = entry.contentRect.height;
           }
+          updateFades();
         });
         resizeObserver.observe(container);
         nextTick(() => {
           container.scrollTop = container.scrollHeight;
+          updateFades();
         });
       }
     });
@@ -431,6 +436,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     }
     function handleScroll() {
       isAutoScrollEnabled.value = isFollowingContent();
+      updateFades();
+    }
+    function updateFades() {
+      const container = scrollContainerRef.value;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const maxScroll = scrollHeight - clientHeight;
+      showTopFade.value = scrollTop > 1;
+      showBottomFade.value = scrollTop < maxScroll - 1;
     }
     function updateSpacerHeight() {
       const container = scrollContainerRef.value;
@@ -495,7 +509,10 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         if (newLen <= (oldLen ?? 0)) return;
         const lastMessage = props.messages[newLen - 1];
         if (lastMessage?.role === "user") {
-          nextTick(() => scrollUserMessageToTop());
+          nextTick(() => {
+            scrollUserMessageToTop();
+            updateFades();
+          });
         }
       }
     );
@@ -510,37 +527,48 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             if (isAutoScrollEnabled.value) {
               scrollToEndOfContent();
             }
+            updateFades();
           });
         }
       },
       { deep: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "scrollContainerRef",
-        ref: scrollContainerRef,
-        class: "relative flex flex-col gap-8 overflow-y-auto",
-        onScroll: handleScroll
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
-          return openBlock(), createElementBlock("div", {
-            key: message.id,
-            "data-message-row": message.role,
-            class: "min-w-0"
-          }, [
-            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
-              renderSlot(_ctx.$slots, "user-message", { message })
-            ])) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
-              renderSlot(_ctx.$slots, "agent-message", { message })
-            ]))
-          ], 8, _hoisted_1$c);
-        }), 128)),
-        hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", {
+          "aria-hidden": "true",
+          class: normalizeClass(["pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background-surface-primary to-transparent transition-opacity duration-200", showTopFade.value ? "opacity-100" : "opacity-0"])
+        }, null, 2),
+        createElementVNode("div", {
+          ref_key: "scrollContainerRef",
+          ref: scrollContainerRef,
+          class: "relative flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto",
+          onScroll: handleScroll
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
+            return openBlock(), createElementBlock("div", {
+              key: message.id,
+              "data-message-row": message.role,
+              class: "min-w-0"
+            }, [
+              message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+                renderSlot(_ctx.$slots, "user-message", { message })
+              ])) : (openBlock(), createElementBlock("div", _hoisted_4$6, [
+                renderSlot(_ctx.$slots, "agent-message", { message })
+              ]))
+            ], 8, _hoisted_2$7);
+          }), 128)),
+          hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "aria-hidden": "true",
+            style: normalizeStyle({ minHeight: `${spacerHeight.value}px` })
+          }, null, 4)) : createCommentVNode("", true)
+        ], 544),
+        createElementVNode("div", {
           "aria-hidden": "true",
-          style: normalizeStyle({ minHeight: `${spacerHeight.value}px` })
-        }, null, 4)) : createCommentVNode("", true)
-      ], 544);
+          class: normalizeClass(["pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-gradient-to-t from-background-surface-primary to-transparent transition-opacity duration-200", showBottomFade.value ? "opacity-100" : "opacity-0"])
+        }, null, 2)
+      ]);
     };
   }
 });
@@ -1931,7 +1959,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const baseClass = "flex w-full min-w-0 flex-col p-2";
+const baseClass = "flex w-full min-w-0 flex-col py-2";
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryWrapper",
@@ -2706,7 +2734,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showActionOnHover: { type: Boolean, default: true },
     timeFormatter: { type: Function, default: formatRelativeTime },
     collapsedLimit: { default: 5 },
-    maxHeight: { default: void 0 }
+    maxHeight: { default: void 0 },
+    contentClass: { default: void 0 }
   },
   emits: ["select", "edit", "delete"],
   setup(__props, { emit: __emit }) {
@@ -2744,7 +2773,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
         createVNode(_sfc_main$b, {
-          class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
+          class: normalizeClass([
+            isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0,
+            props.contentClass
+          ]),
           style: normalizeStyle(
             isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
           )

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

@@ -1 +1 @@
-{"version":3,"file":"CkConversationLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.vue"],"names":[],"mappings":"AAoNA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC5D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA6PO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBAzP3C,CAAC,EAAE;MAyP2D,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;wBAtPO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;;UAuP3C,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CkConversationLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.vue"],"names":[],"mappings":"AA+PA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC5D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAsUO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBAlU3C,CAAC,EAAE;MAkU2D,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;wBA/TO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;;UAgU3C,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/composed/CkHistory/CkHistory.vue.d.ts

@@ -44,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<CkHistoryProps, {}, {},
     timeFormatter: (updatedAtSeconds: number) => string;
     collapsedLimit: number;
     maxHeight: string;
+    contentClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composed/CkHistory/CkHistory.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkHistory.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkHistory/CkHistory.vue"],"names":[],"mappings":"AA+LA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,SAAS,CAAC;AAiB9D,KAAK,WAAW,GAAG;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE;QACZ,YAAY,EAAE,YAAY,CAAC;QAC3B,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;QACzB,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;QACpC,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,IAAI,CAAC;CACZ,CAAC;AA+SF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;6EAId,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":"CkHistory.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkHistory/CkHistory.vue"],"names":[],"mappings":"AAmMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,SAAS,CAAC;AAkB9D,KAAK,WAAW,GAAG;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE;QACZ,YAAY,EAAE,YAAY,CAAC;QAC3B,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;QACzB,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;QACpC,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,IAAI,CAAC;CACZ,CAAC;AAsTF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;6EAId,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/CkHistory/types.d.ts

@@ -69,7 +69,7 @@ export interface CkHistoryProps {
      * below the visible rows. Clicking it expands the list and makes it
      * scrollable (capped at `maxHeight`).
      *
-     * Set to `0` or `undefined` to disable collapsing — all conversations
+     * Set to `0` to disable collapsing — all conversations
      * are shown and the list is always scrollable.
      *
      * @default 5
@@ -82,6 +82,14 @@ export interface CkHistoryProps {
      * @default undefined — no max-height constraint
      */
     maxHeight?: string;
+    /**
+     * Additional CSS class(es) applied to the inner `CkHistoryWrapper` that
+     * wraps the conversation rows. Useful for adjusting padding, spacing, or
+     * other layout concerns of the list container.
+     *
+     * @default undefined
+     */
+    contentClass?: string;
 }
 /**
  * Emitted events for `CkHistory`.

package/dist/components/composed/CkHistory/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkHistory/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;;;;;;;;;;;OAYG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;;;OAOG;IACH,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;IACxD,0EAA0E;IAC1E,IAAI,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACnC,4EAA4E;IAC5E,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;CACtC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkHistory/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;;;;;;;;;;;OAYG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;;;OAOG;IACH,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;IACxD,0EAA0E;IAC1E,IAAI,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACnC,4EAA4E;IAC5E,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;CACtC"}

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-BcYJmbCd.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-D9oP6oEj.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-DLy0BFx8.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, A } from "./CkHistory.vue_vue_type_script_setup_true_lang-BcYJmbCd.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, A } from "./CkHistory.vue_vue_type_script_setup_true_lang-D9oP6oEj.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

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

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

@@ -1,5 +1,5 @@
 import CkConversationLayout from './CkConversationLayout.vue';
-import { render, screen } from '@testing-library/vue';
+import { fireEvent, render, screen } from '@testing-library/vue';
 import { type Component, defineComponent, h } from 'vue';
 
 const messages = [
@@ -126,4 +126,87 @@ describe('CkConversationLayout', () => {
       expect(screen.getByText('42|2026-02-13|Hi')).toBeInTheDocument();
     });
   });
+
+  describe('scroll fade indicators', () => {
+    function getFadeElements(container: HTMLElement) {
+      return {
+        topFade: container.querySelector('.bg-gradient-to-b') as HTMLElement,
+        bottomFade: container.querySelector('.bg-gradient-to-t') as HTMLElement,
+        scrollEl: container.querySelector(
+          '[class*="overflow-y-auto"]',
+        ) as HTMLElement,
+      };
+    }
+
+    function setScrollMetrics(
+      el: HTMLElement,
+      {
+        scrollHeight,
+        clientHeight,
+      }: { scrollHeight: number; clientHeight: number },
+    ) {
+      Object.defineProperty(el, 'scrollHeight', {
+        configurable: true,
+        value: scrollHeight,
+      });
+      Object.defineProperty(el, 'clientHeight', {
+        configurable: true,
+        value: clientHeight,
+      });
+    }
+
+    it('renders decorative top and bottom fade overlays', () => {
+      const { container } = renderLayout();
+      const { topFade, bottomFade } = getFadeElements(container);
+
+      expect(topFade).toBeTruthy();
+      expect(bottomFade).toBeTruthy();
+      expect(topFade.getAttribute('aria-hidden')).toBe('true');
+      expect(bottomFade.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('hides both fades when the content is not scrollable', () => {
+      const { container } = renderLayout();
+      const { topFade, bottomFade } = getFadeElements(container);
+
+      expect(topFade.className).toContain('opacity-0');
+      expect(bottomFade.className).toContain('opacity-0');
+    });
+
+    it('shows both fades when scrolled into the middle of the content', async () => {
+      const { container } = renderLayout();
+      const { topFade, bottomFade, scrollEl } = getFadeElements(container);
+
+      setScrollMetrics(scrollEl, { scrollHeight: 1000, clientHeight: 400 });
+      scrollEl.scrollTop = 200;
+      await fireEvent.scroll(scrollEl);
+
+      expect(topFade.className).toContain('opacity-100');
+      expect(bottomFade.className).toContain('opacity-100');
+    });
+
+    it('hides the top fade at the start of the conversation', async () => {
+      const { container } = renderLayout();
+      const { topFade, bottomFade, scrollEl } = getFadeElements(container);
+
+      setScrollMetrics(scrollEl, { scrollHeight: 1000, clientHeight: 400 });
+      scrollEl.scrollTop = 0;
+      await fireEvent.scroll(scrollEl);
+
+      expect(topFade.className).toContain('opacity-0');
+      expect(bottomFade.className).toContain('opacity-100');
+    });
+
+    it('hides the bottom fade at the end of the conversation', async () => {
+      const { container } = renderLayout();
+      const { topFade, bottomFade, scrollEl } = getFadeElements(container);
+
+      setScrollMetrics(scrollEl, { scrollHeight: 1000, clientHeight: 400 });
+      scrollEl.scrollTop = 600;
+      await fireEvent.scroll(scrollEl);
+
+      expect(topFade.className).toContain('opacity-100');
+      expect(bottomFade.className).toContain('opacity-0');
+    });
+  });
 });

package/src/components/base/CkConversationLayout/CkConversationLayout.vue

@@ -18,6 +18,11 @@ const isAutoScrollEnabled = ref(true);
 const hasBottomSpacer = ref(false);
 const spacerHeight = ref(0);
 
+// Whether there is scrollable content above / below the current viewport.
+// Drives the top / bottom fade overlays that hint at more content to scroll to.
+const showTopFade = ref(false);
+const showBottomFade = ref(false);
+
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
@@ -28,12 +33,14 @@ onMounted(() => {
       for (const entry of entries) {
         containerHeight.value = entry.contentRect.height;
       }
+      updateFades();
     });
     resizeObserver.observe(container);
 
     // Initially scroll to the bottom of the conversation without any spacer
     nextTick(() => {
       container.scrollTop = container.scrollHeight;
+      updateFades();
     });
   }
 });
@@ -60,6 +67,24 @@ function isFollowingContent(): boolean {
 
 function handleScroll(): void {
   isAutoScrollEnabled.value = isFollowingContent();
+  updateFades();
+}
+
+/**
+ * Update the visibility of the top / bottom fade overlays based on the current
+ * scroll position. The top fade appears once the user has scrolled away from
+ * the start; the bottom fade appears while there is still content below the
+ * viewport. When the content fits entirely, both fades stay hidden.
+ */
+function updateFades(): void {
+  const container = scrollContainerRef.value;
+  if (!container) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = container;
+  const maxScroll = scrollHeight - clientHeight;
+
+  showTopFade.value = scrollTop > 1;
+  showBottomFade.value = scrollTop < maxScroll - 1;
 }
 
 /**
@@ -153,7 +178,10 @@ watch(
     if (newLen <= (oldLen ?? 0)) return;
     const lastMessage = props.messages[newLen - 1];
     if (lastMessage?.role === 'user') {
-      nextTick(() => scrollUserMessageToTop());
+      nextTick(() => {
+        scrollUserMessageToTop();
+        updateFades();
+      });
     }
   },
 );
@@ -171,6 +199,7 @@ watch(
         if (isAutoScrollEnabled.value) {
           scrollToEndOfContent();
         }
+        updateFades();
       });
     }
   },
@@ -179,29 +208,43 @@ watch(
 </script>
 
 <template>
-  <div
-    ref="scrollContainerRef"
-    class="relative flex flex-col gap-8 overflow-y-auto"
-    @scroll="handleScroll"
-  >
+  <div class="relative flex min-h-0 flex-col overflow-hidden">
+    <!-- Top fade: hints that there is more content above the viewport -->
     <div
-      v-for="message in messages"
-      :key="message.id"
-      :data-message-row="message.role"
-      class="min-w-0"
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background-surface-primary to-transparent transition-opacity duration-200"
+      :class="showTopFade ? 'opacity-100' : 'opacity-0'"
+    />
+    <div
+      ref="scrollContainerRef"
+      class="relative flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto"
+      @scroll="handleScroll"
     >
-      <div v-if="message.role === 'user'" class="flex min-w-0 justify-end">
-        <slot name="user-message" :message="message" />
-      </div>
-      <div v-else class="flex min-w-0 justify-start">
-        <slot name="agent-message" :message="message" />
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        :data-message-row="message.role"
+        class="min-w-0"
+      >
+        <div v-if="message.role === 'user'" class="flex min-w-0 justify-end">
+          <slot name="user-message" :message="message" />
+        </div>
+        <div v-else class="flex min-w-0 justify-start">
+          <slot name="agent-message" :message="message" />
+        </div>
       </div>
+      <!-- Bottom spacer: shrinks as agent content grows to keep viewport stable -->
+      <div
+        v-if="hasBottomSpacer"
+        aria-hidden="true"
+        :style="{ minHeight: `${spacerHeight}px` }"
+      />
     </div>
-    <!-- Bottom spacer: shrinks as agent content grows to keep viewport stable -->
+    <!-- Bottom fade: hints that there is more content below the viewport -->
     <div
-      v-if="hasBottomSpacer"
       aria-hidden="true"
-      :style="{ minHeight: `${spacerHeight}px` }"
+      class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-gradient-to-t from-background-surface-primary to-transparent transition-opacity duration-200"
+      :class="showBottomFade ? 'opacity-100' : 'opacity-0'"
     />
   </div>
 </template>

package/src/components/base/CkHistoryWrapper/CkHistoryWrapper.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<CkHistoryWrapperProps>(), {
 
 const attrs = useAttrs();
 
-const baseClass = 'flex w-full min-w-0 flex-col p-2';
+const baseClass = 'flex w-full min-w-0 flex-col py-2';
 
 const rootClass = computed(() => {
   const consumerClass =

package/src/components/composed/CkHistory/CkHistory.spec.ts

@@ -433,4 +433,34 @@ describe('CkHistory', () => {
       expect(emitted().select).toBeUndefined();
     });
   });
+
+  describe('contentClass', () => {
+    it('applies contentClass to the inner history wrapper', () => {
+      const { container } = render(CkHistory, {
+        props: {
+          conversations: [makeConversation({ id: 'c-1' })],
+          hrefResolver,
+          contentClass: 'px-2 custom-content',
+        },
+      });
+
+      const wrapper = container.querySelector('[data-slot="chat-history"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper?.className).toMatch(/px-2/);
+      expect(wrapper?.className).toMatch(/custom-content/);
+    });
+
+    it('does not add any content class to the wrapper by default', () => {
+      const { container } = render(CkHistory, {
+        props: {
+          conversations: [makeConversation({ id: 'c-1' })],
+          hrefResolver,
+        },
+      });
+
+      const wrapper = container.querySelector('[data-slot="chat-history"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper?.className).not.toMatch(/px-2/);
+    });
+  });
 });

package/src/components/composed/CkHistory/CkHistory.vue

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<CkHistoryProps>(), {
   timeFormatter: formatRelativeTime,
   collapsedLimit: 5,
   maxHeight: undefined,
+  contentClass: undefined,
 });
 
 const emit = defineEmits<CkHistoryEmits>();
@@ -106,7 +107,10 @@ function handleRowClick(c: Conversation, event: MouseEvent) {
 <template>
   <div>
     <CkHistoryWrapper
-      :class="isExpanded && props.maxHeight ? 'overflow-y-auto' : undefined"
+      :class="[
+        isExpanded && props.maxHeight ? 'overflow-y-auto' : undefined,
+        props.contentClass,
+      ]"
       :style="
         isExpanded && props.maxHeight
           ? { maxHeight: props.maxHeight }

package/src/components/composed/CkHistory/types.ts

@@ -70,7 +70,7 @@ export interface CkHistoryProps {
    * below the visible rows. Clicking it expands the list and makes it
    * scrollable (capped at `maxHeight`).
    *
-   * Set to `0` or `undefined` to disable collapsing — all conversations
+   * Set to `0` to disable collapsing — all conversations
    * are shown and the list is always scrollable.
    *
    * @default 5
@@ -83,6 +83,14 @@ export interface CkHistoryProps {
    * @default undefined — no max-height constraint
    */
   maxHeight?: string;
+  /**
+   * Additional CSS class(es) applied to the inner `CkHistoryWrapper` that
+   * wraps the conversation rows. Useful for adjusting padding, spacing, or
+   * other layout concerns of the list container.
+   *
+   * @default undefined
+   */
+  contentClass?: string;
 }
 
 /**