@aleph-alpha/chat-kit 0.9.0 → 1.0.0

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

@@ -1,7 +1,7 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, toRefs, computed, h, useId, useTemplateRef, withModifiers, createTextVNode, useSlots, createSlots, normalizeProps, guardReactiveProps, normalizeClass } from "vue";
-import { a as useMarkdownParser, u as useChatKitLabels } from "./useChatKitLabels-DNwoZ1x6.js";
-import { UiIconButton, UiTooltip, UiIcon, UiButton, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback } from "@aleph-alpha/ui-library";
-const _hoisted_1$7 = {
+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 { 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";
+const _hoisted_1$8 = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -12,31 +12,31 @@ const _hoisted_1$7 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", { d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" }, null, -1),
         createElementVNode("path", { d: "M6 12h16" }, null, -1)
       ])]);
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", {
           d: "M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z",
           fill: "#1D1D1B"
@@ -45,37 +45,37 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "flex w-full items-start gap-2" };
-const _hoisted_2$3 = {
+const _hoisted_1$6 = { class: "flex w-full items-start gap-2" };
+const _hoisted_2$4 = {
   key: 0,
   class: "flex flex-shrink-0 items-center justify-center"
 };
-const _hoisted_3$2 = { class: "text-core-content-primary flex min-w-0 flex-1 flex-col gap-2" };
-const _hoisted_4$1 = {
+const _hoisted_3$3 = { class: "text-core-content-primary flex min-w-0 flex-1 flex-col gap-2" };
+const _hoisted_4$2 = {
   key: 0,
   class: "text-sm font-bold"
 };
-const _hoisted_5$1 = {
+const _hoisted_5$2 = {
   key: 1,
   class: "flex items-center"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
           renderSlot(_ctx.$slots, "icon")
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$2, [
-          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
+        createElementVNode("div", _hoisted_3$3, [
+          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$2, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true),
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default")
           ]),
-          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
             renderSlot(_ctx.$slots, "footer")
           ])) : createCommentVNode("", true)
         ])
@@ -83,16 +83,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["data-message-row"];
-const _hoisted_2$2 = {
+const _hoisted_1$5 = ["data-message-row"];
+const _hoisted_2$3 = {
   key: 0,
   class: "flex justify-end"
 };
-const _hoisted_3$1 = {
+const _hoisted_3$2 = {
   key: 1,
   class: "flex justify-start"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -143,7 +143,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         spacerHeight.value = 0;
         return;
       }
-      const userRows = container.querySelectorAll('[data-message-row="user"]');
+      const userRows = container.querySelectorAll(
+        '[data-message-row="user"]'
+      );
       const lastUserRow = userRows[userRows.length - 1];
       if (!lastUserRow) {
         spacerHeight.value = 0;
@@ -159,7 +161,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       const lastRowBottom = lastRow.offsetTop + lastRow.offsetHeight;
       const contentFromUserToEnd = lastRowBottom - lastUserTop;
       const gap = parseFloat(getComputedStyle(container).rowGap) || 0;
-      spacerHeight.value = Math.max(0, containerHeight.value - contentFromUserToEnd - gap);
+      spacerHeight.value = Math.max(
+        0,
+        containerHeight.value - contentFromUserToEnd - gap
+      );
     }
     function scrollUserMessageToTop() {
       const container = scrollContainerRef.value;
@@ -167,7 +172,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       hasBottomSpacer.value = true;
       spacerHeight.value = containerHeight.value;
       nextTick(() => {
-        const userRows = container.querySelectorAll('[data-message-row="user"]');
+        const userRows = container.querySelectorAll(
+          '[data-message-row="user"]'
+        );
         const lastUserRow = userRows[userRows.length - 1];
         if (lastUserRow) {
           lastUserRow.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -225,12 +232,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             key: message.id,
             "data-message-row": message.role
           }, [
-            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
               renderSlot(_ctx.$slots, "user-message", { message })
-            ])) : (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            ])) : (openBlock(), createElementBlock("div", _hoisted_3$2, [
               renderSlot(_ctx.$slots, "agent-message", { message })
             ]))
-          ], 8, _hoisted_1$4);
+          ], 8, _hoisted_1$5);
         }), 128)),
         hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -241,7 +248,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageActionButton"
   },
@@ -252,32 +259,24 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(UiIconButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
+      return openBlock(), createBlock(unref(UiButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
         disabled: __props.disabled,
         variant: "ghost",
-        class: "message-action-button box-border w-8 h-8 transition-colors hover:bg-background-surface-muted hover:border-border-button-outlined focus-visible:bg-background-surface-muted focus-visible:border-border-button-outlined active:bg-background-surface-muted active:border-border-button-outlined"
+        size: "icon-sm"
       }), {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
       }, 16, ["disabled"]);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const CkMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-ee7595cc"]]);
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCopyMessageActionButton"
   },
@@ -334,7 +333,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(CkMessageActionButton), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
+          createVNode(unref(_sfc_main$c), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -361,14 +360,361 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["disabled"]),
-          createElementVNode("span", _hoisted_1$3, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
+          createElementVNode("span", _hoisted_1$4, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
         ]),
         _: 1
       }, 8, ["open", "content"]);
     };
   }
 });
-const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-141343e6"]]);
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  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" };
+const _hoisted_3$1 = { class: "truncate body-14-regular text-content-on-surface-primary" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "mt-0.5 flex min-w-0 items-center gap-1 label-12-medium text-content-on-surface-muted"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "truncate"
+};
+const _hoisted_6$1 = {
+  key: 1,
+  "aria-hidden": "true"
+};
+const _hoisted_7$1 = {
+  key: 2,
+  class: "truncate"
+};
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = ["aria-label"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CkHistoryItem",
+    inheritAttrs: false
+  },
+  __name: "CkHistoryItem",
+  props: {
+    title: {},
+    metaStart: {},
+    metaEnd: {},
+    isActive: { type: Boolean, default: false },
+    showAction: { type: Boolean, default: true },
+    showActionOnHover: { type: Boolean, default: true },
+    actionTooltip: { default: "" },
+    actionAriaLabel: { default: "History item action" },
+    actionIcon: {},
+    actionPopover: { type: Boolean, default: false },
+    actionPopoverSide: { default: "right" },
+    actionPopoverAlign: { default: "start" },
+    actionPopoverSideOffset: { default: 8 },
+    actionPopoverContentClass: {},
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  emits: ["action-click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const hasMeta = computed(
+      () => Boolean(props.metaStart || props.metaEnd || slots.meta)
+    );
+    const pointerOnAction = ref(false);
+    function onActionPointerEnter() {
+      pointerOnAction.value = true;
+    }
+    function onActionPointerLeave() {
+      pointerOnAction.value = false;
+    }
+    function onActionFocusIn() {
+      pointerOnAction.value = true;
+    }
+    function onActionFocusOut() {
+      pointerOnAction.value = false;
+    }
+    watch(
+      () => props.showAction,
+      (show) => {
+        if (!show) {
+          pointerOnAction.value = false;
+        }
+      }
+    );
+    const containerClass = computed(() => [
+      "group/ck-history-item relative flex w-full min-w-0 items-stretch gap-2 rounded-md border border-transparent px-2 py-1.5 transition-colors",
+      hasMeta.value ? "h-12" : "h-10",
+      // 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" : "",
+      CHAT_HISTORY_ACTIVE_INDICATOR_CLASS
+    ]);
+    const itemClass = computed(() => [
+      "text-left outline-hidden transition-colors",
+      "body-14-regular text-content-on-surface-primary",
+      "!hover:bg-transparent !active:bg-transparent",
+      // Suppress a second ring on the primary control; the row ring is on the outer container.
+      "focus-visible:ring-0 focus-visible:outline-none",
+      "data-[active=true]:text-content-on-surface-primary",
+      // Stretched-link: extend the primary control's hit area to cover the full row
+      // container (including its `px-2 py-1.5` padding and the gap before the action
+      // column) so clicks anywhere on the row activate the item. The action button
+      // stays interactive because it comes later in the DOM and is `relative`.
+      'before:content-[""] before:absolute before:inset-0 before:z-0',
+      "flex min-w-0 flex-1 items-center",
+      attrs.class
+    ]);
+    const actionColumnClass = computed(() => [
+      "ml-auto flex shrink-0 items-center self-stretch",
+      props.showActionOnHover ? "[&_button]:opacity-0 [&_button]:transition-opacity group-hover/ck-history-item:[&_button]:opacity-100 group-focus-within/ck-history-item:[&_button]:opacity-100" : ""
+    ]);
+    const actionButtonClass = computed(() => [
+      "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" : ""
+    ]);
+    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;
+      return rest;
+    });
+    function onActionClick(event) {
+      event.stopPropagation();
+      const el = event.currentTarget;
+      if (el instanceof HTMLElement && el.focus) {
+        queueMicrotask(() => el.focus({ preventScroll: true }));
+      }
+      if (!props.actionPopover) {
+        emit("action-click", event);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-active": props.isActive,
+        class: normalizeClass(containerClass.value)
+      }, [
+        createVNode(unref(Primitive), mergeProps(passthroughAttrs.value, {
+          as: props.as,
+          "as-child": props.asChild,
+          "data-active": props.isActive,
+          class: itemClass.value
+        }), {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2$2, [
+              createElementVNode("div", _hoisted_3$1, toDisplayString(props.title), 1),
+              props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                renderSlot(_ctx.$slots, "meta", {}, () => [
+                  props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
+                  props.metaStart && props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_6$1, "|")) : createCommentVNode("", true),
+                  props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(props.metaEnd), 1)) : createCommentVNode("", true)
+                ])
+              ])) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 3
+        }, 16, ["as", "as-child", "data-active", "class"]),
+        props.showAction ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(actionColumnClass.value),
+          onPointerenter: onActionPointerEnter,
+          onPointerleave: onActionPointerLeave
+        }, [
+          props.actionPopover ? (openBlock(), createBlock(unref(UiPopover), { key: 0 }, {
+            default: withCtx(() => [
+              createVNode(unref(UiPopoverTrigger), { "as-child": "" }, {
+                default: withCtx(() => [
+                  createElementVNode("button", {
+                    type: "button",
+                    "aria-label": props.actionAriaLabel,
+                    "aria-haspopup": "dialog",
+                    class: normalizeClass(actionButtonClass.value),
+                    onFocusin: onActionFocusIn,
+                    onFocusout: onActionFocusOut,
+                    onClick: withModifiers(onActionClick, ["stop"])
+                  }, [
+                    props.actionIcon ? (openBlock(), createBlock(resolveDynamicComponent(props.actionIcon), {
+                      key: 0,
+                      size: 16,
+                      "aria-hidden": "true"
+                    })) : (openBlock(), createBlock(unref(UiIcon), {
+                      key: 1,
+                      name: "more-vertical",
+                      size: 16,
+                      "aria-hidden": "true"
+                    }))
+                  ], 42, _hoisted_8)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(UiPopoverContent), {
+                side: props.actionPopoverSide,
+                align: props.actionPopoverAlign,
+                "side-offset": props.actionPopoverSideOffset,
+                class: normalizeClass(actionPopoverPanelClass.value)
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "action-popover")
+                ]),
+                _: 3
+              }, 8, ["side", "align", "side-offset", "class"])
+            ]),
+            _: 3
+          })) : props.actionTooltip ? (openBlock(), createBlock(unref(UiTooltip), {
+            key: 1,
+            content: props.actionTooltip,
+            side: "right"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                type: "button",
+                "aria-label": props.actionAriaLabel,
+                class: normalizeClass(actionButtonClass.value),
+                onFocusin: onActionFocusIn,
+                onFocusout: onActionFocusOut,
+                onClick: withModifiers(onActionClick, ["stop"])
+              }, [
+                props.actionIcon ? (openBlock(), createBlock(resolveDynamicComponent(props.actionIcon), {
+                  key: 0,
+                  size: 16,
+                  "aria-hidden": "true"
+                })) : (openBlock(), createBlock(unref(UiIcon), {
+                  key: 1,
+                  name: "more-vertical",
+                  size: 16,
+                  "aria-hidden": "true"
+                }))
+              ], 42, _hoisted_9)
+            ]),
+            _: 1
+          }, 8, ["content"])) : (openBlock(), createElementBlock("button", {
+            key: 2,
+            type: "button",
+            "aria-label": props.actionAriaLabel,
+            class: normalizeClass(actionButtonClass.value),
+            onFocusin: onActionFocusIn,
+            onFocusout: onActionFocusOut,
+            onClick: withModifiers(onActionClick, ["stop"])
+          }, [
+            props.actionIcon ? (openBlock(), createBlock(resolveDynamicComponent(props.actionIcon), {
+              key: 0,
+              size: 16,
+              "aria-hidden": "true"
+            })) : (openBlock(), createBlock(unref(UiIcon), {
+              key: 1,
+              name: "more-vertical",
+              size: 16,
+              "aria-hidden": "true"
+            }))
+          ], 42, _hoisted_10))
+        ], 34)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+const baseClass = "flex w-full min-w-0 flex-col p-2";
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CkHistoryWrapper",
+    inheritAttrs: false
+  },
+  __name: "CkHistoryWrapper",
+  props: {
+    withGap: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const rootClass = computed(() => {
+      const consumerClass = typeof attrs.class === "string" ? attrs.class : void 0;
+      return [baseClass, props.withGap ? "gap-1" : void 0, consumerClass].filter(Boolean).join(" ");
+    });
+    const passthroughAttrs = computed(() => {
+      const { class: _class, ...rest } = attrs;
+      return rest;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(passthroughAttrs.value, {
+        "data-slot": "chat-history",
+        class: rootClass.value
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
 const defaultMarkdownClasses = {
   p: "my-1 leading-7",
   a: "underline underline-offset-4",
@@ -410,11 +756,14 @@ function domToVNode(node, slots, classes) {
   }
   return h(tag, attrs, children);
 }
-const _sfc_main$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   name: "CkMarkdownRenderer",
   props: {
     content: { type: String, required: true },
-    classes: { type: Object, default: () => ({}) },
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
     plugins: { type: Array, default: void 0 }
   },
   setup(props, { slots }) {
@@ -437,7 +786,7 @@ const _sfc_main$7 = defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptActionButton" },
   __name: "CkPromptActionButton",
   props: {
@@ -463,7 +812,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptStopButton" },
   __name: "CkPromptStopButton",
   props: {
@@ -494,7 +843,7 @@ const _hoisted_4 = { class: "flex items-center justify-between" };
 const _hoisted_5 = { key: 0 };
 const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { class: "ml-auto" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptInput" },
   __name: "CkPromptInput",
   props: {
@@ -590,7 +939,7 @@ const _hoisted_1$1 = {
   key: 0,
   class: "text-core-content-tertiary text-center text-xs leading-3.5"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptInputDisclaimer" },
   __name: "CkPromptInputDisclaimer",
   props: {
@@ -608,7 +957,7 @@ const _sfc_main$3 = /* @__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 _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkUserMessage" },
   __name: "CkUserMessage",
   props: {
@@ -626,7 +975,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversation" },
   __name: "CkConversation",
   props: {
@@ -645,13 +994,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     );
     const isLoading = (message) => message.status === "started" || message.status === "sending";
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, { messages: __props.messages }, {
+      return openBlock(), createBlock(_sfc_main$d, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
           createElementVNode("div", {
             class: normalizeClass({ "ml-8": hasIcon.value })
           }, [
             renderSlot(_ctx.$slots, "user-message", { message }, () => [
-              createVNode(_sfc_main$2, {
+              createVNode(_sfc_main$3, {
                 message: message.content
               }, {
                 default: withCtx(() => [
@@ -666,7 +1015,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$b, null, createSlots({
+            createVNode(_sfc_main$e, null, createSlots({
               footer: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
                   message.content && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -679,7 +1028,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
-                  createVNode(_sfc_main$7, {
+                  createVNode(_sfc_main$8, {
                     content: message.content,
                     classes: __props.agentMarkdownClasses
                   }, createSlots({ _: 2 }, [
@@ -757,6 +1106,101 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "CkHistory" },
+  __name: "CkHistory",
+  props: {
+    conversations: {},
+    hrefResolver: {},
+    activeId: { default: void 0 },
+    showAction: { type: Boolean, default: true },
+    showActionOnHover: { type: Boolean, default: true }
+  },
+  emits: ["select", "edit", "delete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labels = useChatKitLabels();
+    function hrefFor(c) {
+      return props.hrefResolver(c.id);
+    }
+    function titleFor(c) {
+      const title = c.title?.trim();
+      return title ? title : labels.value.historyItemUntitled;
+    }
+    function handleRowClick(c, event) {
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      event.preventDefault();
+      emit("select", c, event);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$9, null, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.conversations, (conversation) => {
+            return renderSlot(_ctx.$slots, "item", {
+              key: conversation.id,
+              conversation,
+              href: hrefFor(conversation),
+              isActive: conversation.id === props.activeId,
+              title: titleFor(conversation),
+              select: (event) => handleRowClick(conversation, event),
+              edit: () => emit("edit", conversation),
+              delete: () => emit("delete", conversation)
+            }, () => [
+              createVNode(_sfc_main$a, {
+                as: "a",
+                href: hrefFor(conversation),
+                "is-active": conversation.id === props.activeId,
+                title: titleFor(conversation),
+                "show-action": props.showAction,
+                "show-action-on-hover": props.showActionOnHover,
+                "action-popover": props.showAction,
+                "action-aria-label": unref(labels).historyItemActionAriaLabel,
+                onClick: ($event) => handleRowClick(conversation, $event)
+              }, {
+                "action-popover": withCtx(() => [
+                  createVNode(unref(UiSidebarPopoverMenu), { "show-footer-separator": false }, {
+                    default: withCtx(() => [
+                      createVNode(unref(UiSidebarPopoverMenuItem), {
+                        label: unref(labels).historyItemEditAction,
+                        onClick: ($event) => emit("edit", conversation)
+                      }, {
+                        icon: withCtx(() => [
+                          createVNode(unref(UiIcon), {
+                            name: "pencil",
+                            size: "s"
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["label", "onClick"]),
+                      createVNode(unref(UiSidebarPopoverMenuItem), {
+                        label: unref(labels).historyItemDeleteAction,
+                        onClick: ($event) => emit("delete", conversation)
+                      }, {
+                        icon: withCtx(() => [
+                          createVNode(unref(UiIcon), {
+                            name: "trash",
+                            size: "s"
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["label", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1032, ["href", "is-active", "title", "show-action", "show-action-on-hover", "action-popover", "action-aria-label", "onClick"])
+            ]);
+          }), 128))
+        ]),
+        _: 3
+      });
+    };
+  }
+});
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "CkInput" },
   __name: "CkInput",
@@ -793,7 +1237,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     __expose({ focus, submit });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$5, {
         ref_key: "promptInputRef",
         ref: promptInputRef,
         "model-value": __props.modelValue,
@@ -806,7 +1250,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, createSlots({
         "toolbar-right": withCtx((scope) => [
           renderSlot(_ctx.$slots, "toolbar-right", normalizeProps(guardReactiveProps(scope)), () => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$5, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$6, {
               key: 0,
               "aria-label": __props.stopAriaLabel,
               disabled: __props.disabled,
@@ -814,17 +1258,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "stop-icon", {}, () => [
-                  createVNode(_sfc_main$c)
+                  createVNode(_sfc_main$f)
                 ])
               ]),
               _: 3
-            }, 8, ["aria-label", "disabled"])) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, { ariaLabel: "Send message" }, {
+            }, 8, ["aria-label", "disabled"])) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, { ariaLabel: "Send message" }, {
               type: "submit",
               disabled: scope.disabled
             }), {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "send-icon", {}, () => [
-                  createVNode(_sfc_main$d)
+                  createVNode(_sfc_main$g)
                 ])
               ]),
               _: 3
@@ -833,7 +1277,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         footer: withCtx(() => [
           renderSlot(_ctx.$slots, "footer", {}, () => [
-            __props.disclaimer ? (openBlock(), createBlock(_sfc_main$3, {
+            __props.disclaimer ? (openBlock(), createBlock(_sfc_main$4, {
               key: 0,
               text: __props.disclaimer
             }, null, 8, ["text"])) : createCommentVNode("", true)
@@ -854,17 +1298,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   CkCopyMessageActionButton as C,
-  _sfc_main$b as _,
-  _sfc_main$1 as a,
-  _sfc_main$a as b,
-  _sfc_main as c,
-  _sfc_main$7 as d,
-  CkMessageActionButton as e,
-  _sfc_main$6 as f,
-  _sfc_main$4 as g,
-  _sfc_main$3 as h,
-  _sfc_main$5 as i,
-  _sfc_main$d as j,
-  _sfc_main$c as k,
-  _sfc_main$2 as l
+  _sfc_main$e as _,
+  _sfc_main$2 as a,
+  _sfc_main$d as b,
+  _sfc_main$1 as c,
+  _sfc_main$a as d,
+  _sfc_main$9 as e,
+  _sfc_main as f,
+  _sfc_main$8 as g,
+  _sfc_main$c as h,
+  _sfc_main$7 as i,
+  _sfc_main$5 as j,
+  _sfc_main$4 as k,
+  _sfc_main$6 as l,
+  _sfc_main$g as m,
+  _sfc_main$f as n,
+  _sfc_main$3 as o
 };