@aleph-alpha/chat-kit 1.13.0 → 1.14.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-DCZTSiBj.js → CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js}

@@ -1,5 +1,5 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, computed, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, withModifiers, resolveDynamicComponent, useTemplateRef, createSlots, normalizeProps, guardReactiveProps } from "vue";
-import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-DeHxZG2a.js";
+import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, computed, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, withModifiers, resolveDynamicComponent, useTemplateRef, onBeforeUnmount, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-BxNkTzr2.js";
 import { UiButton, UiTooltip, UiIcon, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
 const _hoisted_1$b = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -1453,26 +1453,78 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "bg-background-surface-primary inline-flex max-w-[600px] flex-col items-end justify-start gap-4 rounded-xl p-6" };
-const _hoisted_2 = { class: "text-content-on-surface-primary justify-start self-stretch text-base leading-6 font-normal" };
+const _hoisted_1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
+const _hoisted_2 = ["aria-expanded"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkUserMessage" },
   __name: "CkUserMessage",
   props: {
-    message: {}
+    message: { default: void 0 },
+    collapsedLines: { default: 0 }
   },
   setup(__props) {
+    const props = __props;
+    const labels = useChatKitLabels();
+    const showMoreLabel = computed(
+      () => labels.value.userMessageShowMore ?? defaultChatKitLabels.userMessageShowMore
+    );
+    const showLessLabel = computed(
+      () => labels.value.userMessageShowLess ?? defaultChatKitLabels.userMessageShowLess
+    );
+    const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
+    const contentRef = ref(null);
+    const expanded = ref(false);
+    const isOverflowing = ref(false);
+    function measure() {
+      const el = contentRef.value;
+      if (!el || !clampEnabled.value || expanded.value) return;
+      isOverflowing.value = el.scrollHeight - el.clientHeight > 1;
+    }
+    function toggle() {
+      expanded.value = !expanded.value;
+    }
+    let resizeObserver;
+    onMounted(() => {
+      nextTick(measure);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => measure());
+        if (contentRef.value) resizeObserver.observe(contentRef.value);
+      }
+    });
+    onBeforeUnmount(() => resizeObserver?.disconnect());
+    watch([() => props.message, () => props.collapsedLines], () => {
+      expanded.value = false;
+      nextTick(measure);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", {
+          ref_key: "contentRef",
+          ref: contentRef,
+          class: normalizeClass(["ck-user-message__content text-content-on-surface-muted min-w-0 max-w-full self-stretch text-lg leading-7 font-medium break-words whitespace-pre-wrap [overflow-wrap:anywhere]", {
+            "ck-user-message__content--clamped": clampEnabled.value && !expanded.value,
+            "ck-user-message__content--faded": clampEnabled.value && !expanded.value && isOverflowing.value
+          }]),
+          style: normalizeStyle(
+            clampEnabled.value ? { "--ck-collapsed-lines": __props.collapsedLines } : void 0
+          )
+        }, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.message), 1)
-          ])
-        ])
+          ], true)
+        ], 6),
+        clampEnabled.value && isOverflowing.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-expanded": expanded.value,
+          class: "ck-user-message__toggle label-12-medium text-content-on-surface-primary bg-background-surface-floating focus-visible:ring-ring self-center rounded-3xl px-3 py-2 focus-visible:ring-2 focus-visible:outline-none",
+          onClick: toggle
+        }, toDisplayString(expanded.value ? showLessLabel.value : showMoreLabel.value), 9, _hoisted_2)) : createCommentVNode("", true)
       ]);
     };
   }
 });
+const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c759a863"]]);
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversation" },
   __name: "CkConversation",
@@ -1501,7 +1553,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ "ml-8": hasIcon.value })
           }, [
             renderSlot(_ctx.$slots, "user-message", { message }, () => [
-              createVNode(_sfc_main$3, null, {
+              createVNode(CkUserMessage, null, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "user-message-content", { message }, () => [
                     createTextVNode(toDisplayString(getMessageText(message)), 1)
@@ -1815,5 +1867,5 @@ export {
   _sfc_main$6 as o,
   _sfc_main$k as p,
   _sfc_main$j as q,
-  _sfc_main$3 as r
+  CkUserMessage as r
 };

package/dist/chat-kit.css

@@ -41,3 +41,31 @@
 .ck-feedback-dialog__response[data-v-eaffd2d5] p:last-child {
   margin-bottom: 0;
 }
+
+/* Floating pill per design — the inset white + soft drop shadow aren't
+   expressible with the design-system shadow utilities, so set them here. */
+.ck-user-message__toggle[data-v-c759a863] {
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.05),
+    0 0 4px 0 #fff inset;
+}
+
+/* text-lg has a 1.75rem (28px) line-height; clamp height = lines × line-height. */
+.ck-user-message__content--clamped[data-v-c759a863] {
+  max-height: calc(var(--ck-collapsed-lines) * 1.75rem);
+  overflow: hidden;
+}
+
+/* Fade the last visible line to low opacity. */
+.ck-user-message__content--faded[data-v-c759a863] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+}

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

@@ -22,4 +22,10 @@ export declare const MultilineMessage: Story;
  * attachments). Use when a plain string is not sufficient.
  */
 export declare const WithSlotContent: Story;
+/**
+ * Long message clamped to 4 lines. The last visible line fades out and a
+ * centered "Show more" / "Show less" toggle expands and collapses the text.
+ * The toggle only appears when the content actually overflows the clamp.
+ */
+export declare const Collapsible: Story;
 //# sourceMappingURL=CkUserMessage.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CkUserMessage.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/CkUserMessage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAiBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwCnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC"}
+{"version":3,"file":"CkUserMessage.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/CkUserMessage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAsBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwDnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}

package/dist/components/base/CkUserMessage/CkUserMessage.vue.d.ts

@@ -3,7 +3,10 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CkUserMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CkUserMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<CkUserMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CkUserMessageProps> & Readonly<{}>, {
+    message: string;
+    collapsedLines: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CkUserMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/CkUserMessage.vue"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6ClD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,gTAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CkUserMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/CkUserMessage.vue"],"names":[],"mappings":"AAwIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA2JlD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,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/base/CkUserMessage/types.d.ts

@@ -1,15 +1,24 @@
 /**
- * Bubble layout for a single user turn in a conversation. Renders the message
- * text on the right side with a tokenized background and max-width; supports
- * a default slot for custom inline content.
+ * Layout for a single user turn in a conversation. Renders the message text
+ * right-aligned in the muted on-surface color with a max-width; supports a
+ * default slot for custom inline content. When `collapsedLines` is set, long
+ * messages are clamped with a fade and a "Show more" / "Show less" toggle.
  *
  * @category Messages
- * @useCases render user message bubble, conversation turn from user, chat input preview, right-aligned message
- * @keywords user, message, bubble, chat, conversation, turn
+ * @useCases render user message, conversation turn from user, chat input preview, right-aligned message, collapsible long message
+ * @keywords user, message, chat, conversation, turn, collapse, show more
  * @related CkAgentMessage, CkConversation
  */
 export interface CkUserMessageProps {
     /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */
     message?: string;
+    /**
+     * When greater than `0`, collapse the message to at most this many lines.
+     * The last visible line fades out and a "Show more" / "Show less" toggle is
+     * revealed only when the content actually overflows. Omit or pass `0`
+     * (the default) to render the full message with no clamping — preserving the
+     * original behavior for existing consumers.
+     */
+    collapsedLines?: number;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkUserMessage/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r } from "../CkInput.vue_vue_type_script_setup_true_lang-DCZTSiBj.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r } from "../CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,

package/dist/handlers/index.js

@@ -1,5 +1,5 @@
 import { u } from "../useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "../useChatKitLabels-DeHxZG2a.js";
+import { C, d, p, u as u2, a } from "../useChatKitLabels-BxNkTzr2.js";
 export {
   C as CHAT_KIT_LABELS,
   d as defaultChatKitLabels,

package/dist/handlers/useChatKitLabels.d.ts

@@ -63,6 +63,10 @@ export type ChatKitLabels = {
     feedbackDialogCancelLabel?: string;
     /** Submit button label in `CkFeedbackDialog`. */
     feedbackDialogSubmitLabel?: string;
+    /** Label for the `CkUserMessage` toggle when the message is collapsed. */
+    userMessageShowMore?: string;
+    /** Label for the `CkUserMessage` toggle when the message is expanded. */
+    userMessageShowLess?: string;
     /** Fallback title used by `CkHistory` when a conversation has no `title`. */
     historyItemUntitled: string;
     /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */

package/dist/handlers/useChatKitLabels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aAwBlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}
+{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aA0BlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "./useChatKitLabels-DeHxZG2a.js";
+import { C, d, p, u as u2, a } from "./useChatKitLabels-BxNkTzr2.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-Ct5hD214.js";
-import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r } from "./CkInput.vue_vue_type_script_setup_true_lang-DCZTSiBj.js";
+import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r } from "./CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/dist/{useChatKitLabels-DeHxZG2a.js → useChatKitLabels-BxNkTzr2.js}

@@ -12717,6 +12717,8 @@ const defaultChatKitLabels = {
   feedbackDialogFreeTextPlaceholder: "Write down some additional details",
   feedbackDialogCancelLabel: "Cancel",
   feedbackDialogSubmitLabel: "Submit",
+  userMessageShowMore: "Show more",
+  userMessageShowLess: "Show less",
   historyItemUntitled: "Untitled conversation",
   historyItemActionAriaLabel: "Conversation options",
   historyItemEditAction: "Edit",

package/package.json

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

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

@@ -1,6 +1,9 @@
 import CkUserMessage from './CkUserMessage.vue';
 import { render, screen } from '@testing-library/vue';
 
+const CONTENT_SELECTOR = '.ck-user-message__content';
+const CLAMPED_CLASS = 'ck-user-message__content--clamped';
+
 describe('CkUserMessage', () => {
   it('displays the message text from prop', () => {
     render(CkUserMessage, { props: { message: 'Hello from tests' } });
@@ -17,4 +20,26 @@ describe('CkUserMessage', () => {
     expect(screen.getByText('Custom slot content')).toBeInTheDocument();
     expect(screen.queryByText('Fallback text')).not.toBeInTheDocument();
   });
+
+  describe('collapsedLines clamping', () => {
+    it('does not clamp or render a toggle when collapsedLines is omitted', () => {
+      const { container } = render(CkUserMessage, {
+        props: { message: 'A message' },
+      });
+
+      const content = container.querySelector(CONTENT_SELECTOR);
+      expect(content).not.toHaveClass(CLAMPED_CLASS);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('clamps the content to the requested number of lines', () => {
+      const { container } = render(CkUserMessage, {
+        props: { message: 'A long message', collapsedLines: 3 },
+      });
+
+      const content = container.querySelector<HTMLElement>(CONTENT_SELECTOR);
+      expect(content).toHaveClass(CLAMPED_CLASS);
+      expect(content?.style.getPropertyValue('--ck-collapsed-lines')).toBe('3');
+    });
+  });
 });

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

@@ -11,6 +11,11 @@ const meta: Meta<typeof CkUserMessage> = {
       description:
         'The message text to display. Can also be provided via the default slot.',
     },
+    collapsedLines: {
+      control: { type: 'number', min: 0 },
+      description:
+        'When > 0, clamp the message to this many lines with a fade and a "Show more" / "Show less" toggle (shown only when the content overflows). 0 disables clamping.',
+    },
   },
   decorators: [
     () => ({
@@ -61,6 +66,22 @@ import { CkUserMessage } from '@aleph-alpha/chat-kit';
   </CkUserMessage>
 </template>`;
 
+const collapsibleMessage =
+  'Lorem ipsum dolor sit amet consectetur. Scelerisque justo pharetra enim eros risus. ' +
+  'Urna dictumst ultrices mattis tristique lacus in in. Elit sed in a pellentesque purus ' +
+  'lectus quis. Massa facilisis eget etiam maecenas eget libero iaculis consectetur. ' +
+  'Curabitur vivamus a nulla cras venenatis nec ultrices donec. Dui tempus posuere nulla ' +
+  'in id dictumst id congue odio. At lacus elit sit amet. Sodales lorem lacus faucibus ' +
+  'condimentum lectus auctor.';
+
+const collapsibleTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage :collapsed-lines="4" message="..." />
+</template>`;
+
 /**
  * Standard user message bubble populated via the `message` prop. Use as the
  * default way to render the user turn in a conversation.
@@ -110,3 +131,16 @@ export const WithSlotContent: Story = {
   }),
   parameters: { docs: { source: { code: withSlotContentTemplateSource } } },
 };
+
+/**
+ * Long message clamped to 4 lines. The last visible line fades out and a
+ * centered "Show more" / "Show less" toggle expands and collapses the text.
+ * The toggle only appears when the content actually overflows the clamp.
+ */
+export const Collapsible: Story = {
+  args: {
+    message: collapsibleMessage,
+    collapsedLines: 4,
+  },
+  parameters: { docs: { source: { code: collapsibleTemplateSource } } },
+};

package/src/components/base/CkUserMessage/CkUserMessage.vue

@@ -1,19 +1,129 @@
 <script setup lang="ts">
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
 import type { CkUserMessageProps } from './types';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 defineOptions({ name: 'CkUserMessage' });
 
-defineProps<CkUserMessageProps>();
+const props = withDefaults(defineProps<CkUserMessageProps>(), {
+  message: undefined,
+  collapsedLines: 0,
+});
+
+const labels = useChatKitLabels();
+
+// Resolution order: injected label, English default.
+const showMoreLabel = computed(
+  () =>
+    labels.value.userMessageShowMore ??
+    defaultChatKitLabels.userMessageShowMore!,
+);
+const showLessLabel = computed(
+  () =>
+    labels.value.userMessageShowLess ??
+    defaultChatKitLabels.userMessageShowLess!,
+);
+
+/** Clamping is opt-in: only active when a positive `collapsedLines` is given. */
+const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
+
+const contentRef = ref<HTMLElement | null>(null);
+const expanded = ref(false);
+const isOverflowing = ref(false);
+
+function measure() {
+  const el = contentRef.value;
+  if (!el || !clampEnabled.value || expanded.value) return;
+  isOverflowing.value = el.scrollHeight - el.clientHeight > 1;
+}
+
+function toggle() {
+  expanded.value = !expanded.value;
+}
+
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  nextTick(measure);
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => measure());
+    if (contentRef.value) resizeObserver.observe(contentRef.value);
+  }
+});
+
+onBeforeUnmount(() => resizeObserver?.disconnect());
+
+// New content (or a changed clamp) re-evaluates from the collapsed state.
+watch([() => props.message, () => props.collapsedLines], () => {
+  expanded.value = false;
+  nextTick(measure);
+});
 </script>
 
 <template>
-  <div
-    class="bg-background-surface-primary inline-flex max-w-[600px] flex-col items-end justify-start gap-4 rounded-xl p-6"
-  >
+  <div class="inline-flex max-w-[536px] flex-col items-end justify-start gap-1">
     <div
-      class="text-content-on-surface-primary justify-start self-stretch text-base leading-6 font-normal"
+      ref="contentRef"
+      class="ck-user-message__content text-content-on-surface-muted min-w-0 max-w-full self-stretch text-lg leading-7 font-medium break-words whitespace-pre-wrap [overflow-wrap:anywhere]"
+      :class="{
+        'ck-user-message__content--clamped': clampEnabled && !expanded,
+        'ck-user-message__content--faded':
+          clampEnabled && !expanded && isOverflowing,
+      }"
+      :style="
+        clampEnabled ? { '--ck-collapsed-lines': collapsedLines } : undefined
+      "
     >
       <slot>{{ message }}</slot>
     </div>
+    <button
+      v-if="clampEnabled && isOverflowing"
+      type="button"
+      :aria-expanded="expanded"
+      class="ck-user-message__toggle label-12-medium text-content-on-surface-primary bg-background-surface-floating focus-visible:ring-ring self-center rounded-3xl px-3 py-2 focus-visible:ring-2 focus-visible:outline-none"
+      @click="toggle"
+    >
+      {{ expanded ? showLessLabel : showMoreLabel }}
+    </button>
   </div>
 </template>
+
+<style scoped>
+/* Floating pill per design — the inset white + soft drop shadow aren't
+   expressible with the design-system shadow utilities, so set them here. */
+.ck-user-message__toggle {
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.05),
+    0 0 4px 0 #fff inset;
+}
+
+/* text-lg has a 1.75rem (28px) line-height; clamp height = lines × line-height. */
+.ck-user-message__content--clamped {
+  max-height: calc(var(--ck-collapsed-lines) * 1.75rem);
+  overflow: hidden;
+}
+
+/* Fade the last visible line to low opacity. */
+.ck-user-message__content--faded {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+}
+</style>

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

@@ -1,14 +1,23 @@
 /**
- * Bubble layout for a single user turn in a conversation. Renders the message
- * text on the right side with a tokenized background and max-width; supports
- * a default slot for custom inline content.
+ * Layout for a single user turn in a conversation. Renders the message text
+ * right-aligned in the muted on-surface color with a max-width; supports a
+ * default slot for custom inline content. When `collapsedLines` is set, long
+ * messages are clamped with a fade and a "Show more" / "Show less" toggle.
  *
  * @category Messages
- * @useCases render user message bubble, conversation turn from user, chat input preview, right-aligned message
- * @keywords user, message, bubble, chat, conversation, turn
+ * @useCases render user message, conversation turn from user, chat input preview, right-aligned message, collapsible long message
+ * @keywords user, message, chat, conversation, turn, collapse, show more
  * @related CkAgentMessage, CkConversation
  */
 export interface CkUserMessageProps {
   /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */
   message?: string;
+  /**
+   * When greater than `0`, collapse the message to at most this many lines.
+   * The last visible line fades out and a "Show more" / "Show less" toggle is
+   * revealed only when the content actually overflows. Omit or pass `0`
+   * (the default) to render the full message with no clamping — preserving the
+   * original behavior for existing consumers.
+   */
+  collapsedLines?: number;
 }

package/src/handlers/useChatKitLabels.spec.ts

@@ -54,6 +54,8 @@ describe('useChatKitLabels', () => {
       feedbackDialogFreeTextPlaceholder: 'Zusätzliche Details eingeben',
       feedbackDialogCancelLabel: 'Abbrechen',
       feedbackDialogSubmitLabel: 'Senden',
+      userMessageShowMore: 'Mehr anzeigen',
+      userMessageShowLess: 'Weniger anzeigen',
       historyItemUntitled: 'Unbenannte Konversation',
       historyItemActionAriaLabel: 'Konversationsoptionen',
       historyItemEditAction: 'Bearbeiten',

package/src/handlers/useChatKitLabels.ts

@@ -65,6 +65,10 @@ export type ChatKitLabels = {
   feedbackDialogCancelLabel?: string;
   /** Submit button label in `CkFeedbackDialog`. */
   feedbackDialogSubmitLabel?: string;
+  /** Label for the `CkUserMessage` toggle when the message is collapsed. */
+  userMessageShowMore?: string;
+  /** Label for the `CkUserMessage` toggle when the message is expanded. */
+  userMessageShowLess?: string;
   /** Fallback title used by `CkHistory` when a conversation has no `title`. */
   historyItemUntitled: string;
   /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */
@@ -96,6 +100,8 @@ export const defaultChatKitLabels: ChatKitLabels = {
   feedbackDialogFreeTextPlaceholder: 'Write down some additional details',
   feedbackDialogCancelLabel: 'Cancel',
   feedbackDialogSubmitLabel: 'Submit',
+  userMessageShowMore: 'Show more',
+  userMessageShowLess: 'Show less',
   historyItemUntitled: 'Untitled conversation',
   historyItemActionAriaLabel: 'Conversation options',
   historyItemEditAction: 'Edit',