@aleph-alpha/chat-kit 1.0.0 → 1.1.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-744ZHsQU.js → CkInput.vue_vue_type_script_setup_true_lang-DpYyyCgU.js}

@@ -1,6 +1,6 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, Comment, cloneVNode, h, useAttrs, useSlots, computed, normalizeClass, withModifiers, resolveDynamicComponent, toRefs, useId, useTemplateRef, createTextVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, useAttrs, useSlots, computed, normalizeClass, withModifiers, resolveDynamicComponent, toRefs, h, useId, useTemplateRef, createTextVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
 import { a as useMarkdownParser, u as useChatKitLabels } from "./useChatKitLabels-Dvi2FmjE.js";
-import { UiButton, UiTooltip, UiIcon, UiPopover, UiPopoverTrigger, UiPopoverContent, UiIconButton, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
+import { UiButton, UiTooltip, UiIcon, Primitive, UiPopover, UiPopoverTrigger, UiPopoverContent, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
 const _hoisted_1$8 = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
@@ -375,60 +375,6 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-f77a1193"]]);
-function renderSlotFragments(children) {
-  if (!children) return [];
-  return children.flatMap((child) => {
-    if (child.type === Fragment) return renderSlotFragments(child.children);
-    return [child];
-  });
-}
-const Slot = defineComponent({
-  name: "PrimitiveSlot",
-  inheritAttrs: false,
-  setup(_, { attrs, slots }) {
-    return () => {
-      if (!slots.default) return null;
-      const children = renderSlotFragments(slots.default());
-      const firstNonCommentChildrenIndex = children.findIndex((child) => child.type !== Comment);
-      if (firstNonCommentChildrenIndex === -1) return children;
-      const firstNonCommentChildren = children[firstNonCommentChildrenIndex];
-      delete firstNonCommentChildren.props?.ref;
-      const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
-      const cloned = cloneVNode({
-        ...firstNonCommentChildren,
-        props: {}
-      }, mergedProps);
-      if (children.length === 1) return cloned;
-      children[firstNonCommentChildrenIndex] = cloned;
-      return children;
-    };
-  }
-});
-const SELF_CLOSING_TAGS = [
-  "area",
-  "img",
-  "input"
-];
-const Primitive = defineComponent({
-  name: "Primitive",
-  inheritAttrs: false,
-  props: {
-    asChild: {
-      type: Boolean,
-      default: false
-    },
-    as: {
-      type: [String, Object],
-      default: "div"
-    }
-  },
-  setup(props, { attrs, slots }) {
-    const asTag = props.asChild ? "template" : props.as;
-    if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag)) return () => h(asTag, attrs);
-    if (asTag !== "template") return () => h(props.as, attrs, { default: slots.default });
-    return () => h(Slot, attrs, { default: slots.default });
-  }
-});
 const CHAT_HISTORY_ACTIVE_INDICATOR_CLASS = 'before:absolute before:z-10 before:top-1/2 before:left-0 before:h-1/2 before:w-0.5 before:-translate-y-1/2 before:origin-left before:scale-x-0 before:rounded-full before:bg-background-accent-default before:opacity-0 before:transition-[transform,opacity] before:duration-200 before:ease-linear before:content-[""] data-[active=true]:before:scale-x-100 data-[active=true]:before:opacity-100';
 const _hoisted_1$3 = ["data-active"];
 const _hoisted_2$2 = { class: "min-w-0 flex-1" };
@@ -472,9 +418,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     actionPopoverSide: { default: "right" },
     actionPopoverAlign: { default: "start" },
     actionPopoverSideOffset: { default: 8 },
-    actionPopoverContentClass: {},
-    asChild: { type: Boolean },
-    as: { default: "button" }
+    actionPopoverContentClass: {}
   },
   emits: ["action-click"],
   setup(__props, { emit: __emit }) {
@@ -512,10 +456,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       // Whole-row focus ring: first tab lands on the main row control; second tab on the action button — both are inside this container.
       // `:has(:focus-visible)` instead of `:focus-within` so mouse clicks on the row don't flash a keyboard focus ring.
       "has-[:focus-visible]:border-border-surface-focus-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50",
-      // Row hover/active tint — flat `default` hover-mix color. Hover is suppressed while the
-      // pointer/focus is on the action column so the icon's own tint does not stack on top.
-      props.isActive ? "bg-background-surface-primary-hover-default" : "",
-      !pointerOnAction.value ? "hover:bg-background-surface-primary-hover-default" : "",
+      // Row hover/active fill. Hover is suppressed while the
+      // pointer/focus is on the action column so the icon's own fill does not stack on top.
+      (props.isActive || !pointerOnAction.value) && "hover:bg-background-surface-muted-subtle",
+      props.isActive && "bg-background-surface-muted-subtle",
       CHAT_HISTORY_ACTIVE_INDICATOR_CLASS
     ]);
     const itemClass = computed(() => [
@@ -541,16 +485,26 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       "relative z-10 inline-flex size-8 shrink-0 items-center justify-center rounded-sm border border-transparent text-content-on-surface-primary outline-hidden transition-colors",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       "focus-visible:ring-0 focus-visible:outline-none",
-      pointerOnAction.value ? "bg-background-surface-primary-hover-default border-border-button-outlined" : ""
+      pointerOnAction.value && "bg-background-surface-muted-subtle border-border-button-outlined"
     ]);
     const actionPopoverPanelClass = computed(() => [
       "w-auto min-w-48 max-w-sm p-0 bg-background-surface-secondary",
       props.actionPopoverContentClass
     ]);
     const passthroughAttrs = computed(() => {
-      const { class: _class, ...rest } = attrs;
+      const {
+        class: _class,
+        as: _as,
+        asChild: _asChild,
+        "as-child": _asChildAttr,
+        ...rest
+      } = attrs;
       return rest;
     });
+    const primitiveAs = computed(() => attrs.as ?? "button");
+    const primitiveAsChild = computed(
+      () => attrs.asChild === true || attrs.asChild === "" || attrs["as-child"] === true || attrs["as-child"] === ""
+    );
     function onActionClick(event) {
       event.stopPropagation();
       const el = event.currentTarget;
@@ -567,8 +521,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         class: normalizeClass(containerClass.value)
       }, [
         createVNode(unref(Primitive), mergeProps(passthroughAttrs.value, {
-          as: props.as,
-          "as-child": props.asChild,
+          as: primitiveAs.value,
+          "as-child": primitiveAsChild.value,
           "data-active": props.isActive,
           class: itemClass.value
         }), {
@@ -823,7 +777,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(UiIconButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
+      return openBlock(), createBlock(unref(UiButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
+        size: "icon-sm",
         disabled: props.disabled,
         class: "!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md",
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))

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

@@ -1,13 +1,13 @@
-import type { CkHistoryItemProps } from './types';
+import type { CkHistoryItemOwnProps } from './types';
 declare var __VLS_7: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
     meta?: (props: typeof __VLS_7) => any;
 } & {
     'action-popover'?: (props: typeof __VLS_37) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CkHistoryItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<CkHistoryItemOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "action-click": (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<CkHistoryItemProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<CkHistoryItemOwnProps> & Readonly<{
     "onAction-click"?: ((event: MouseEvent) => any) | undefined;
 }>, {
     isActive: boolean;
@@ -19,7 +19,6 @@ declare const __VLS_base: import("vue").DefineComponent<CkHistoryItemProps, {},
     actionPopoverSide: "top" | "right" | "bottom" | "left";
     actionPopoverAlign: "start" | "center" | "end";
     actionPopoverSideOffset: number;
-    as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, 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/base/CkHistoryItem/CkHistoryItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkHistoryItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkHistoryItem/CkHistoryItem.vue"],"names":[],"mappings":"AA8RA,OAAO,KAAK,EAAsB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6ctE,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKzD,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":"CkHistoryItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkHistoryItem/CkHistoryItem.vue"],"names":[],"mappings":"AA0SA,OAAO,KAAK,EAAsB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA0dzE,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKzD,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/base/CkHistoryItem/types.d.ts

@@ -1,5 +1,5 @@
 import type { Component, HTMLAttributes } from 'vue';
-import type { PrimitiveProps } from 'reka-ui';
+import type { PrimitiveProps } from '@aleph-alpha/ui-library';
 /**
  * A single chat history entry with title, optional meta line, active
  * indicator, and a trailing action control (plain button or popover).
@@ -10,7 +10,8 @@ import type { PrimitiveProps } from 'reka-ui';
  * @keywords chat, history, item, row, conversation, thread
  * @related CkHistoryWrapper
  */
-export interface CkHistoryItemProps extends PrimitiveProps {
+export type CkHistoryItemProps = PrimitiveProps & CkHistoryItemOwnProps;
+export interface CkHistoryItemOwnProps {
     /**
      * Main title of the history item.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkHistoryItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAExD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEhD;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACH,yBAAyB,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkHistoryItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,qBAAqB,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAExD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEhD;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACH,yBAAyB,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;CACrC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CkPromptStopButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptStopButton/CkPromptStopButton.vue"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AA2EvD,QAAA,IAAI,QAAQ,IAAW,CAAE;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,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":"CkPromptStopButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptStopButton/CkPromptStopButton.vue"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AA6EvD,QAAA,IAAI,QAAQ,IAAW,CAAE;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,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/index.js

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

package/dist/index.js

@@ -2,7 +2,7 @@ import { C } from "./ChatService-LogwJNxh.js";
 import { u } from "./useMessageHandler-uLHNac39.js";
 import { C as C2, d, p, u as u2, a } from "./useChatKitLabels-Dvi2FmjE.js";
 import { u as u3, a as a2 } from "./useConversations-Ca242D2P.js";
-import { _, a as a3, b, C as C3, c, d as d2, e, f, g, h, i, j, k, l, m, n, o } from "./CkInput.vue_vue_type_script_setup_true_lang-744ZHsQU.js";
+import { _, a as a3, b, C as C3, c, d as d2, e, f, g, h, i, j, k, l, m, n, o } from "./CkInput.vue_vue_type_script_setup_true_lang-DpYyyCgU.js";
 export {
   C2 as CHAT_KIT_LABELS,
   C as ChatService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,7 +29,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "keywords": [
     "chat",
@@ -58,13 +59,12 @@
   },
   "dependencies": {
     "dompurify": "^3.3.2",
-    "reka-ui": "^2.7.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
-    "@aleph-alpha/ui-library": "2.0.0"
+    "@aleph-alpha/ui-library": "2.2.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.2.17",
@@ -89,7 +89,7 @@
     "vitest": "4.0.15",
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
-    "@aleph-alpha/config-css": "1.0.0"
+    "@aleph-alpha/config-css": "1.1.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

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

@@ -0,0 +1,91 @@
+import CkAgentMessage from './CkAgentMessage.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkAgentMessage', () => {
+  describe('header', () => {
+    it('displays custom header slot content', () => {
+      render(CkAgentMessage, {
+        slots: { header: 'Custom Header' },
+      });
+
+      expect(screen.getByText('Custom Header')).toBeInTheDocument();
+    });
+
+    it('hides the header section when no header slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(
+        container.querySelector('.text-sm.font-bold'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('content', () => {
+    it('displays message content from the default slot', () => {
+      render(CkAgentMessage, {
+        slots: { default: '<p>Agent response content</p>' },
+      });
+
+      expect(screen.getByText('Agent response content')).toBeInTheDocument();
+    });
+  });
+
+  describe('icon', () => {
+    it('displays the icon when provided via slot', () => {
+      render(CkAgentMessage, {
+        slots: { icon: '<img src="" alt="bot-icon" />' },
+      });
+
+      expect(screen.getByAltText('bot-icon')).toBeInTheDocument();
+    });
+
+    it('renders the icon container only when the icon slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { icon: '<img src="" alt="bot-icon" />' },
+      });
+
+      expect(
+        container.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('does not render the icon container when no icon slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(
+        container.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('footer', () => {
+    it('displays footer actions when the footer slot is provided', () => {
+      render(CkAgentMessage, {
+        slots: { footer: '<button>Copy</button><button>Retry</button>' },
+      });
+
+      expect(screen.getByText('Copy')).toBeInTheDocument();
+      expect(screen.getByText('Retry')).toBeInTheDocument();
+    });
+
+    it('does not display a footer area when no footer slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(screen.getByText('Some content')).toBeInTheDocument();
+      // Footer buttons should not exist
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      // The container should not have empty footer wrappers
+      expect(container.textContent).not.toBe('');
+    });
+  });
+});

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

@@ -0,0 +1,215 @@
+import CkAgentMessage from './CkAgentMessage.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkAgentMessage> = {
+  title: 'Base/CkAgentMessage',
+  component: CkAgentMessage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <p>Based on a review of internal documents, here are the key lessons learned.</p>
+  </CkAgentMessage>
+</template>`;
+
+const withFooterActionsTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <p>Research completed. Ask any follow-up questions as needed.</p>
+    <template #footer>
+      <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+      <button class="p-1 opacity-60 hover:opacity-100">Regenerate</button>
+    </template>
+  </CkAgentMessage>
+</template>`;
+
+const withRichContentTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <div>
+      <p>Key lessons learned from the project:</p>
+      <ul class="mt-1 list-disc pl-4">
+        <li><strong>Stakeholder Involvement:</strong> Early and continuous stakeholder involvement.</li>
+        <li><strong>User Training:</strong> Hands-on training beats generic sessions.</li>
+      </ul>
+    </div>
+    <template #footer>
+      <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+    </template>
+  </CkAgentMessage>
+</template>`;
+
+const withCustomHeaderTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <template #header>
+      <span>Custom Agent</span>
+      <span class="text-core-content-quaternary ml-2 text-xs font-normal">v2.1</span>
+    </template>
+    <p>Hello! How can I assist you today?</p>
+  </CkAgentMessage>
+</template>`;
+
+const withoutIconTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <p>A message from an agent without a custom icon.</p>
+  </CkAgentMessage>
+</template>`;
+
+/**
+ * Standard agent reply with an icon slot and a body slot. Use as the default
+ * layout for assistant messages in a conversation.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <p>Based on a review of internal documents, here are the key lessons learned and best practices from the 'Digital Transformation Phase 1' project, broken down by category.</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Adds action buttons (copy, regenerate, etc.) via the `footer` slot.
+ * Use when messages need post-response interactions.
+ */
+export const WithFooterActions: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <p>Research completed. Ask any follow-up questions as needed.</p>
+        <template #footer>
+          <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+          <button class="p-1 opacity-60 hover:opacity-100">Regenerate</button>
+        </template>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withFooterActionsTemplateSource } } },
+};
+
+/**
+ * Arbitrary rich content in the default slot — lists, bold text, etc.
+ * Use when you are rendering structured answers directly (rather than via CkMarkdownRenderer).
+ */
+export const WithRichContent: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <div>
+          <p>Based on a review of internal documents, here are the key lessons learned:</p>
+          <ul class="mt-1 list-disc pl-4">
+            <li><strong>Stakeholder Involvement:</strong> Early and continuous stakeholder involvement.</li>
+            <li><strong>User Training:</strong> Hands-on training was far more effective than generic sessions.</li>
+          </ul>
+        </div>
+        <template #footer>
+          <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+        </template>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withRichContentTemplateSource } } },
+};
+
+/**
+ * Replaces the default header row with a custom title/metadata block.
+ * Use to label the assistant (agent name, version, model) above the message body.
+ */
+export const WithCustomHeader: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <template #header>
+          <span>Custom Agent</span>
+          <span class="text-core-content-quaternary ml-2 text-xs font-normal">v2.1</span>
+        </template>
+        <p>Hello! How can I assist you today?</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withCustomHeaderTemplateSource } } },
+};
+
+/**
+ * Omits the icon slot. Use for minimalist conversations or systems where
+ * the assistant identity is conveyed elsewhere.
+ */
+export const WithoutIcon: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <p>A message from an agent without a custom icon.</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withoutIconTemplateSource } } },
+};

package/src/components/base/CkAgentMessage/CkAgentMessage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ name: 'CkAgentMessage' });
+</script>
+
+<template>
+  <div class="flex w-full items-start gap-2">
+    <div
+      v-if="$slots.icon"
+      class="flex flex-shrink-0 items-center justify-center"
+    >
+      <slot name="icon" />
+    </div>
+    <div class="text-core-content-primary flex min-w-0 flex-1 flex-col gap-2">
+      <span v-if="$slots.header" class="text-sm font-bold">
+        <slot name="header" />
+      </span>
+      <div>
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="flex items-center">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/base/CkAgentMessage/index.ts

@@ -0,0 +1,2 @@
+export { default as CkAgentMessage } from './CkAgentMessage.vue';
+export type * from './types';

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

@@ -0,0 +1,11 @@
+/**
+ * Layout for a single assistant (agent) turn in a conversation. Exposes
+ * `icon`, `header`, default content and `footer` slots for full control over
+ * each section while keeping consistent spacing and alignment.
+ *
+ * @category Messages
+ * @useCases render assistant reply, AI message layout, conversation turn, streaming message container
+ * @keywords agent, assistant, message, bubble, reply, ai, conversation
+ * @related CkUserMessage, CkConversation, CkMarkdownRenderer, CkCopyMessageActionButton
+ */
+export type CkAgentMessageProps = Record<string, never>;