@aleph-alpha/chat-kit 5.8.0 → 5.9.0

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

@@ -15,6 +15,13 @@ export declare const Default: Story;
  * Use when streaming tokens from an LLM into the last agent message.
  */
 export declare const StreamingSimulation: Story;
+/**
+ * Programmatic navigation via the exposed `scrollToMessage(index)` method. Enter
+ * a zero-based row index and the layout scrolls that message to the top. Index
+ * counts all rows regardless of role (a `thread-footer`, when present, is the
+ * trailing row); omitting the index scrolls to the last row.
+ */
+export declare const ScrollToMessage: Story;
 /**
  * Empty state for when there are no messages. Use as an initial state before
  * the first user turn, or when history has been cleared.

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

@@ -1 +1 @@
-{"version":3,"file":"CkConversationLayout.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAI3C,QAAA,MAAM,oBAAoB,EACoB,eAAe,CAAC;AAoB9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAU3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA2EnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAiFjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC"}
+{"version":3,"file":"CkConversationLayout.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAI3C,QAAA,MAAM,oBAAoB,EACoB,eAAe,CAAC;AAoB9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAU3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6GnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAiFjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC"}

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

@@ -7,7 +7,9 @@ declare const __VLS_export: <T extends {
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        scrollToMessage: (index?: number) => void;
+    }>) => void;
     attrs: any;
     slots: {
         'user-message': (props: {

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":"AAyRA,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;WAkWO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBA9V3C,CAAC,EAAE;MA8V2D,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;;wBA3VO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;QAChD;;;;WAIG;yBACc,MAAM,IAAI;;UAsVtB,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+TA,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;WAwYO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBApY3C,CAAC,EAAE;MAoY2D,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;kCAjPb,MAAM,KAAG,IAAI;MAiPsB,KAAK,IAAI;WACxE,GAAG;;wBAjYO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;QAChD;;;;WAIG;yBACc,MAAM,IAAI;;UA4XtB,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/CkConversation/CkConversation.stories.d.ts

@@ -12,6 +12,13 @@ type Story = StoryObj<typeof meta>;
  * `#agent-message-header-content`.
  */
 export declare const Default: Story;
+/**
+ * A diagram of how CkConversation's slots nest. Every slot has a default
+ * rendering; overriding a parent slot replaces everything nested beneath it,
+ * so the child slots below it no longer apply. Collapse a node to see which
+ * slots "fold away" when you take over its parent.
+ */
+export declare const SlotAnatomy: Story;
 /**
  * Uses a remote avatar image (with fallback text). Use when you want a
  * branded agent identity in each reply.
@@ -70,11 +77,24 @@ export declare const StreamingSimulation: Story;
  */
 export declare const WithCustomMarkdownClasses: Story;
 /**
- * Integrates a custom code-block renderer (Shiki, Prism, etc.) via
- * `#agent-message-code-block`. Use when you want syntax highlighting or
- * inline copy buttons for assistant code.
+ * Fenced code blocks in agent markdown render with `UiCodeBlock` out of the
+ * box — syntax highlighting, a language label, and a copy button — without any
+ * slot wiring.
+ */
+export declare const DefaultCodeBlock: Story;
+/**
+ * Fenced code blocks render with `UiCodeBlock` (syntax highlighting + copy
+ * button) by default. Override that with a custom renderer (Prism, a bespoke
+ * theme, etc.) via `#agent-message-code-block`, as shown here.
  */
 export declare const WithCustomCodeBlock: Story;
+/**
+ * Programmatic navigation via the exposed `scrollToMessage(index)` method. Enter
+ * a zero-based row index and the conversation scrolls that message to the top.
+ * Index counts all rows regardless of role (a `thread-footer`, when present, is
+ * the trailing row); omitting the index scrolls to the last row.
+ */
+export declare const ScrollToMessage: Story;
 /**
  * Empty state — an initial view before the first turn. Use to show a welcome
  * screen, quick prompts, or onboarding content above this surface.

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

@@ -1 +1 @@
-{"version":3,"file":"CkConversation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkConversation/CkConversation.stories.ts"],"names":[],"mappings":"AASA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;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"}
+{"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;AA6WnC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AA2HF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAgCzB,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,gBAAgB,EAAE,KA6C9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAsC7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

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

@@ -49,7 +49,11 @@ type __VLS_Slots = {
     'agent-message-footer': (props: {
         message: BaseMessage;
     }) => void;
-    /** Replace the default code block rendering inside agent markdown */
+    /**
+     * Replace the default code block rendering inside agent markdown. When not
+     * provided, fenced code blocks render with `UiCodeBlock` (syntax highlighting
+     * + copy button).
+     */
     'agent-message-code-block': (props: {
         code: string;
         language: string;
@@ -61,7 +65,18 @@ type __VLS_Slots = {
      */
     'thread-footer': () => void;
 };
-declare const __VLS_base: import("vue").DefineComponent<CkConversationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CkConversationProps> & Readonly<{}>, {
+/**
+ * Scroll so the message at `index` sits at the top of the viewport. `index` is
+ * the zero-based position among the rendered rows (any `thread-footer` counts
+ * as the trailing row); when omitted it scrolls to the last row.
+ *
+ * This only performs the scroll — it does not focus the message. Any
+ * accompanying focus handling must be done separately by the caller.
+ */
+declare function scrollToMessage(index?: number): void;
+declare const __VLS_base: import("vue").DefineComponent<CkConversationProps, {
+    scrollToMessage: typeof scrollToMessage;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CkConversationProps> & Readonly<{}>, {
     agentAvatarImage: string;
     agentAvatarFallback: string;
     agentLoadingImage: string;

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":"AAuPA,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;IACX;;;;OAIG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAwXF,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":"AAqRA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,gBAAgB,CAAC;AAOtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA0BnD,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;;;;OAIG;IACH,0BAA0B,EAAE,CAAC,KAAK,EAAE;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;IACX;;;;OAIG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AA8DF;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAE7C;AAkVD,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/CkHistory.vue.d.ts

@@ -40,10 +40,10 @@ declare const __VLS_base: import("vue").DefineComponent<CkHistoryProps, {}, {},
 }>, {
     showAction: boolean;
     showActionOnHover: boolean;
+    maxHeight: string;
     activeId: string;
     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>;

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-DG96wNug.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-CEqJtMuI.js";
 export {
   _ as CkAgentMessage,
   a as CkAgentMessageHeader,

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-Tellov3w.js";
 import { C, d, p, u as u2, b } from "./useChatKitLabels-CMOr3Kjq.js";
 import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-Dn4ctxk8.js";
-import { _, a as a2, C as C2, b as b3, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A } from "./CkHistory.vue_vue_type_script_setup_true_lang-DG96wNug.js";
+import { _, a as a2, C as C2, b as b3, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A } from "./CkHistory.vue_vue_type_script_setup_true_lang-CEqJtMuI.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

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

package/src/adapters/responses-api.spec.ts

@@ -456,9 +456,12 @@ describe('responsesToTree', () => {
         },
       ],
     });
-    // The assistant turn does not inherit attachments but still carries
-    // its responseId stamp.
-    expect(tree.nodes['msg-a1']!.metadata).toEqual({ responseId: 'r1' });
+    // The assistant turn does not inherit attachments but still carries its
+    // responseId stamp and the response's model id.
+    expect(tree.nodes['msg-a1']!.metadata).toEqual({
+      responseId: 'r1',
+      model: 'pharia-1',
+    });
   });
 
   it('skips malformed metadata.attachments without polluting the tree', () => {

package/src/adapters/responses-api.ts

@@ -462,6 +462,53 @@ function parseResponseAttachments(
   return attachments as ResponseAttachment[];
 }
 
+// Maps response-level attachments onto the shape stored in node metadata.
+function toMessageAttachments(
+  attachments: ResponseAttachment[],
+): ResponseMessageAttachment[] {
+  return attachments.map(
+    (a): ResponseMessageAttachment => ({
+      name: a.fileName,
+      fileId: a.fileId,
+      fileName: a.fileName,
+      searchStoreId: a.searchStoreId,
+      ...(a.documentId ? { documentId: a.documentId } : {}),
+    }),
+  );
+}
+
+// Builds the user node for a single `request_input`, or null when the input is
+// not a user turn / carries no visible content. Attachments bind to the first
+// user node only (`isFirstUserNode`).
+function buildUserNode(
+  resp: StoredResponse,
+  input: unknown,
+  idx: number,
+  responseAttachments: ResponseAttachment[] | null,
+  isFirstUserNode: boolean,
+): ResponseMessageNode | null {
+  const role = (input as { role?: string }).role;
+  const text = extractInputText((input as { content?: unknown }).content);
+  const hasContent = text || responseAttachments?.length;
+  if (role !== 'user' || !hasContent) return null;
+
+  const metadata: ResponseTreeMessageMetadata = {
+    responseId: resp.id,
+    ...(resp.model ? { model: resp.model } : {}),
+  };
+  if (responseAttachments && isFirstUserNode) {
+    metadata.attachments = toMessageAttachments(responseAttachments);
+  }
+
+  return {
+    id: `user-${resp.id}-${idx}`,
+    role: 'user',
+    content: [textPart(text)],
+    createdAt: new Date(resp.created_at * 1000),
+    metadata,
+  };
+}
+
 // Within a single response, the visible messages chain linearly: every user
 // input is followed by exactly one assistant turn (whose reasoning, tool,
 // and text outputs are merged into one node). Across responses, branching
@@ -473,40 +520,15 @@ function responseToMessageNodes(resp: StoredResponse): ResponseMessageNode[] {
   // the user turn that started the response. We bind them to the first
   // user `request_input` (mirroring the existing wire convention).
   const responseAttachments = parseResponseAttachments(resp);
-  let userNodesPushed = 0;
-  if (resp.request_input) {
-    for (const [idx, input] of resp.request_input.entries()) {
-      const role = (input as { role?: string }).role;
-      const rawContent = (input as { content?: unknown }).content;
-      const text = extractInputText(rawContent);
-      const userContent = text || responseAttachments?.length;
-      if (role !== 'user' || !userContent) continue;
-
-      const metadata: ResponseTreeMessageMetadata = {
-        responseId: resp.id,
-        ...(resp.model ? { model: resp.model } : {}),
-      };
-      if (responseAttachments && userNodesPushed === 0) {
-        metadata.attachments = responseAttachments.map(
-          (a): ResponseMessageAttachment => ({
-            name: a.fileName,
-            fileId: a.fileId,
-            fileName: a.fileName,
-            searchStoreId: a.searchStoreId,
-            ...(a.documentId ? { documentId: a.documentId } : {}),
-          }),
-        );
-      }
-
-      nodes.push({
-        id: `user-${resp.id}-${idx}`,
-        role: 'user',
-        content: [textPart(text)],
-        createdAt: new Date(resp.created_at * 1000),
-        metadata,
-      });
-      userNodesPushed += 1;
-    }
+  for (const [idx, input] of resp.request_input?.entries() ?? []) {
+    const userNode = buildUserNode(
+      resp,
+      input,
+      idx,
+      responseAttachments,
+      nodes.length === 0,
+    );
+    if (userNode) nodes.push(userNode);
   }
 
   const assistantParts = toAssistantParts(resp);
@@ -516,7 +538,12 @@ function responseToMessageNodes(resp: StoredResponse): ResponseMessageNode[] {
       role: 'assistant',
       content: assistantParts,
       createdAt: new Date((resp.completed_at ?? resp.created_at) * 1000),
-      metadata: { responseId: resp.id },
+      // A stored response carries a single `model` covering both its input and
+      // output, so the assistant node gets the same model id as its user node.
+      metadata: {
+        responseId: resp.id,
+        ...(resp.model ? { model: resp.model } : {}),
+      },
     });
   }
   return nodes;

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

@@ -1,6 +1,15 @@
 import CkConversationLayout from './CkConversationLayout.vue';
 import { fireEvent, render, screen } from '@testing-library/vue';
-import { type Component, defineComponent, h } from 'vue';
+import {
+  type Component,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+} from 'vue';
+
+type LayoutInstance = { scrollToMessage: (index?: number) => void };
 
 const messages = [
   { role: 'user', content: 'Hello there' },
@@ -37,6 +46,46 @@ function renderLayout(
   return render(Wrapper);
 }
 
+/**
+ * Render the layout and capture the child component instance so the exposed
+ * `scrollToMessage` method can be invoked from the test.
+ */
+function renderWithInstance(
+  msgs: Array<{ role: string; content: string }> = messages,
+  { withFooter = false }: { withFooter?: boolean } = {},
+) {
+  let instance: LayoutInstance | undefined;
+  // eslint-disable-next-line vue/one-component-per-file
+  const Wrapper = defineComponent({
+    setup() {
+      const layoutRef = ref<LayoutInstance>();
+      onMounted(() => {
+        instance = layoutRef.value;
+      });
+      return () =>
+        h(
+          CkConversationLayout as unknown as Component,
+          { messages: msgs, ref: layoutRef },
+          {
+            'user-message': ({ message }: { message: (typeof msgs)[0] }) =>
+              h('p', { 'data-testid': 'user-msg' }, message.content),
+            'agent-message': ({ message }: { message: (typeof msgs)[0] }) =>
+              h('p', { 'data-testid': 'agent-msg' }, message.content),
+            ...(withFooter
+              ? {
+                  'thread-footer': () =>
+                    h('p', { 'data-testid': 'footer' }, 'footer'),
+                }
+              : {}),
+          },
+        );
+    },
+  });
+
+  const utils = render(Wrapper);
+  return { ...utils, getInstance: () => instance! };
+}
+
 describe('CkConversationLayout', () => {
   describe('message display', () => {
     it('displays all provided messages', () => {
@@ -127,6 +176,90 @@ describe('CkConversationLayout', () => {
     });
   });
 
+  describe('row spacing', () => {
+    it('gives the first row a smaller top margin than the following rows', () => {
+      const { container } = renderLayout();
+
+      const rows =
+        container.querySelectorAll<HTMLElement>('[data-message-row]');
+      expect(rows[0].className).toContain('mt-2xl');
+      expect(rows[0].className).not.toContain('mt-3xl');
+    });
+
+    it('gives every non-first row the larger top margin', () => {
+      const { container } = renderLayout();
+
+      const rows =
+        container.querySelectorAll<HTMLElement>('[data-message-row]');
+      for (const row of Array.from(rows).slice(1)) {
+        expect(row.className).toContain('mt-3xl');
+      }
+    });
+
+    it('does not use a flex gap for row spacing', () => {
+      const { container } = renderLayout();
+
+      const scrollEl = container.querySelector(
+        '[class*="overflow-y-auto"]',
+      ) as HTMLElement;
+      expect(scrollEl.className).not.toContain('gap-8');
+    });
+
+    it('gives the thread-footer the larger top margin when messages exist', () => {
+      // eslint-disable-next-line vue/one-component-per-file
+      const Wrapper = defineComponent({
+        setup() {
+          return () =>
+            h(
+              CkConversationLayout as unknown as Component,
+              { messages },
+              {
+                'user-message': () => h('p', 'user'),
+                'agent-message': () => h('p', 'agent'),
+                'thread-footer': () =>
+                  h('p', { 'data-testid': 'footer' }, 'footer'),
+              },
+            );
+        },
+      });
+
+      const { container } = render(Wrapper);
+
+      const footerRow = container.querySelector(
+        '[data-message-row="agent"]:last-of-type',
+      ) as HTMLElement;
+      expect(footerRow.querySelector('[data-testid="footer"]')).not.toBeNull();
+      expect(footerRow.className).toContain('mt-3xl');
+    });
+
+    it('gives the thread-footer the smaller top margin when there are no messages', () => {
+      // eslint-disable-next-line vue/one-component-per-file
+      const Wrapper = defineComponent({
+        setup() {
+          return () =>
+            h(
+              CkConversationLayout as unknown as Component,
+              { messages: [] },
+              {
+                'user-message': () => h('p', 'user'),
+                'agent-message': () => h('p', 'agent'),
+                'thread-footer': () =>
+                  h('p', { 'data-testid': 'footer' }, 'footer'),
+              },
+            );
+        },
+      });
+
+      const { container } = render(Wrapper);
+
+      const footerRow = container.querySelector(
+        '[data-message-row="agent"]',
+      ) as HTMLElement;
+      expect(footerRow.className).toContain('mt-2xl');
+      expect(footerRow.className).not.toContain('mt-3xl');
+    });
+  });
+
   describe('scroll fade indicators', () => {
     function getFadeElements(container: HTMLElement) {
       return {
@@ -209,4 +342,79 @@ describe('CkConversationLayout', () => {
       expect(bottomFade.className).toContain('opacity-0');
     });
   });
+
+  describe('scrollToMessage', () => {
+    // jsdom reports offsetTop as 0, so stub distinct positions per rendered row.
+    function stubRowOffsets(container: Element) {
+      container
+        .querySelectorAll<HTMLElement>('[data-message-row]')
+        .forEach((row, i) => {
+          Object.defineProperty(row, 'offsetTop', {
+            configurable: true,
+            value: (i + 1) * 100,
+          });
+        });
+    }
+
+    function setup(options?: { withFooter?: boolean }) {
+      const { container, getInstance } = renderWithInstance(messages, options);
+      const scrollEl = container.querySelector(
+        '[class*="overflow-y-auto"]',
+      ) as HTMLElement;
+      const scrollTo = vi.fn();
+      scrollEl.scrollTo = scrollTo;
+      stubRowOffsets(container);
+
+      return { getInstance, scrollTo };
+    }
+
+    it('scrolls to the last message by default', async () => {
+      // Four rows (user, agent, user, agent) → last row is at offsetTop 400.
+      const { getInstance, scrollTo } = setup();
+
+      getInstance().scrollToMessage();
+      await nextTick();
+
+      expect(scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({ top: 400, behavior: 'smooth' }),
+      );
+    });
+
+    it('scrolls to the message at the given index, regardless of role', async () => {
+      const { getInstance, scrollTo } = setup();
+
+      getInstance().scrollToMessage(1);
+      await nextTick();
+
+      expect(scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({ top: 200, behavior: 'smooth' }),
+      );
+    });
+
+    it('treats the thread-footer as the trailing row', async () => {
+      // Four messages + footer → the footer is the fifth row at offsetTop 500.
+      const { getInstance, scrollTo } = setup({ withFooter: true });
+
+      getInstance().scrollToMessage();
+      await nextTick();
+
+      expect(scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({ top: 500, behavior: 'smooth' }),
+      );
+    });
+
+    it('does nothing when there are no messages', async () => {
+      const { container, getInstance } = renderWithInstance([]);
+      const scrollEl = container.querySelector(
+        '[class*="overflow-y-auto"]',
+      ) as HTMLElement;
+      const scrollTo = vi.fn();
+      scrollEl.scrollTo = scrollTo;
+
+      getInstance().scrollToMessage();
+      await nextTick();
+
+      expect(scrollTo).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -99,6 +99,40 @@ function streamAgentReply(): void {
   </div>
 </template>`;
 
+const scrollToMessageTemplateSource = `<script setup lang="ts">
+import { CkConversationLayout } from '@aleph-alpha/chat-kit';
+import { ref, useTemplateRef } from 'vue';
+
+interface Message { role: string; content: string }
+const messages: Message[] = [/* ... */];
+
+const layout = useTemplateRef('layout');
+const index = ref(0);
+
+function scrollToMessage(): void {
+  // Zero-based index among all rows (a thread-footer counts as the last row).
+  layout.value?.scrollToMessage(index.value);
+}
+</script>
+
+<template>
+  <div class="flex h-[400px] flex-col">
+    <div class="flex items-center gap-2 border-b p-2">
+      <label for="msg-index">Message index</label>
+      <input id="msg-index" v-model.number="index" type="number" min="0" />
+      <button @click="scrollToMessage">Scroll to message</button>
+    </div>
+    <CkConversationLayout ref="layout" :messages="messages" class="min-h-0 flex-1">
+      <template #user-message="{ message }">
+        <div class="bg-core-bg-secondary rounded-md px-3 py-2 max-w-[400px]">{{ message.content }}</div>
+      </template>
+      <template #agent-message="{ message }">
+        <div class="px-3 py-2 max-w-[400px]">{{ message.content }}</div>
+      </template>
+    </CkConversationLayout>
+  </div>
+</template>`;
+
 const emptyTemplateSource = `<script setup lang="ts">
 import { CkConversationLayout } from '@aleph-alpha/chat-kit';
 
@@ -229,6 +263,56 @@ export const StreamingSimulation: Story = {
   parameters: { docs: { source: { code: streamingSimulationTemplateSource } } },
 };
 
+/**
+ * Programmatic navigation via the exposed `scrollToMessage(index)` method. Enter
+ * a zero-based row index and the layout scrolls that message to the top. Index
+ * counts all rows regardless of role (a `thread-footer`, when present, is the
+ * trailing row); omitting the index scrolls to the last row.
+ */
+export const ScrollToMessage: Story = {
+  render: () => ({
+    components: { CkConversationLayout },
+    setup() {
+      const messages = Array.from({ length: 12 }, (_, i) => ({
+        role: i % 2 === 0 ? 'user' : 'agent',
+        content: `[${i}] ${
+          i % 2 === 0 ? 'User' : 'Agent'
+        } message number ${i}. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.`,
+      }));
+      const layout = ref();
+      const index = ref(0);
+      function scrollToMessage() {
+        layout.value?.scrollToMessage(index.value);
+      }
+      return { messages, layout, index, scrollToMessage };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; height: 100%;">
+        <div style="display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #e0e0e0;">
+          <label for="msg-index">Message index</label>
+          <input id="msg-index" v-model.number="index" type="number" min="0" style="width: 72px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 6px;" />
+          <button @click="scrollToMessage" style="padding: 6px 16px; border-radius: 6px; background: #333; color: white; cursor: pointer;">
+            Scroll to message
+          </button>
+        </div>
+        <CkConversationLayout ref="layout" :messages="messages" style="flex: 1; min-height: 0;">
+          <template #user-message="{ message }">
+            <div style="background: #f0f0f0; padding: 8px 12px; border-radius: 12px 0 12px 12px; max-width: 400px;">
+              {{ message.content }}
+            </div>
+          </template>
+          <template #agent-message="{ message }">
+            <div style="padding: 8px 12px; max-width: 400px;">
+              {{ message.content }}
+            </div>
+          </template>
+        </CkConversationLayout>
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: scrollToMessageTemplateSource } } },
+};
+
 /**
  * Empty state for when there are no messages. Use as an initial state before
  * the first user turn, or when history has been cleared.