@aleph-alpha/chat-kit 5.2.0 → 5.4.0

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

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, computed, createVNode, toDisplayString, ref, onBeforeUnmount, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps, Comment, Text } from "vue";
-import { UiIcon, UiButton, UiFileType, UiPopover, UiPopoverTrigger, UiPopoverContent, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
-import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-zMFV7aEz.js";
+import { UiIcon, UiButton, UiFileType, UiPopover, UiPopoverTrigger, UiPopoverContent, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
+import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-DLy0BFx8.js";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -36,7 +36,7 @@ function formatRelativeTime(unixSeconds, nowSeconds = Math.floor(Date.now() / 1e
   const years = Math.floor(delta / YEAR);
   return years === 1 ? "1 year ago" : `${years} years ago`;
 }
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   setup(__props) {
@@ -52,7 +52,7 @@ const _hoisted_1$h = {
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
@@ -76,7 +76,7 @@ const _hoisted_3$9 = {
   key: 1,
   class: "flex items-center gap-4"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   props: {
@@ -114,7 +114,7 @@ const _hoisted_3$8 = {
   "data-testid": "ck-agent-message-header-activity",
   class: "flex flex-shrink-0 items-center"
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessageHeader" },
   __name: "CkAgentMessageHeader",
   setup(__props) {
@@ -139,7 +139,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHeaderActivityButton"
   },
@@ -184,12 +184,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
 const _hoisted_1$e = { class: "ck-citation-card flex w-[22.5rem] max-w-[90vw] flex-col gap-2 rounded-md bg-background-surface-floating px-6 pb-6 pt-4 shadow-md" };
 const _hoisted_2$8 = { class: "flex items-center gap-2" };
 const _hoisted_3$7 = ["title"];
-const _hoisted_4$6 = { class: "line-clamp-6 break-words text-sm leading-5 text-content-on-surface-secondary" };
+const _hoisted_4$7 = { class: "line-clamp-6 break-words text-sm leading-5 text-content-on-surface-secondary" };
 const _hoisted_5$4 = {
   key: 0,
   class: "text-sm leading-5 text-content-on-surface-muted"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCitationCard"
   },
@@ -243,7 +243,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["aria-label"])) : createCommentVNode("", true)
         ]),
-        createElementVNode("p", _hoisted_4$6, toDisplayString(__props.snippet), 1),
+        createElementVNode("p", _hoisted_4$7, toDisplayString(__props.snippet), 1),
         __props.locationLabel ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(__props.locationLabel), 1)) : createCommentVNode("", true)
       ]);
     };
@@ -251,7 +251,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$d = ["aria-label"];
 const CLOSE_DELAY_MS = 80;
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCitation"
   },
@@ -353,7 +353,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onFocusout: onContentFocusOut
           }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$n), {
+              createVNode(unref(_sfc_main$o), {
                 "file-name": __props.fileName,
                 snippet: __props.snippet,
                 "location-label": __props.locationLabel,
@@ -377,17 +377,18 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-73025da4"]]);
-const _hoisted_1$c = ["data-message-row"];
-const _hoisted_2$7 = {
+const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-73025da4"]]);
+const _hoisted_1$c = { class: "relative flex min-h-0 flex-col overflow-hidden" };
+const _hoisted_2$7 = ["data-message-row"];
+const _hoisted_3$6 = {
   key: 0,
   class: "flex min-w-0 justify-end"
 };
-const _hoisted_3$6 = {
+const _hoisted_4$6 = {
   key: 1,
   class: "flex min-w-0 justify-start"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -400,6 +401,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const isAutoScrollEnabled = ref(true);
     const hasBottomSpacer = ref(false);
     const spacerHeight = ref(0);
+    const showTopFade = ref(false);
+    const showBottomFade = ref(false);
     let resizeObserver = null;
     onMounted(() => {
       const container = scrollContainerRef.value;
@@ -409,10 +412,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           for (const entry of entries) {
             containerHeight.value = entry.contentRect.height;
           }
+          updateFades();
         });
         resizeObserver.observe(container);
         nextTick(() => {
           container.scrollTop = container.scrollHeight;
+          updateFades();
         });
       }
     });
@@ -431,6 +436,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     }
     function handleScroll() {
       isAutoScrollEnabled.value = isFollowingContent();
+      updateFades();
+    }
+    function updateFades() {
+      const container = scrollContainerRef.value;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const maxScroll = scrollHeight - clientHeight;
+      showTopFade.value = scrollTop > 1;
+      showBottomFade.value = scrollTop < maxScroll - 1;
     }
     function updateSpacerHeight() {
       const container = scrollContainerRef.value;
@@ -495,7 +509,10 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         if (newLen <= (oldLen ?? 0)) return;
         const lastMessage = props.messages[newLen - 1];
         if (lastMessage?.role === "user") {
-          nextTick(() => scrollUserMessageToTop());
+          nextTick(() => {
+            scrollUserMessageToTop();
+            updateFades();
+          });
         }
       }
     );
@@ -510,41 +527,52 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             if (isAutoScrollEnabled.value) {
               scrollToEndOfContent();
             }
+            updateFades();
           });
         }
       },
       { deep: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "scrollContainerRef",
-        ref: scrollContainerRef,
-        class: "relative flex flex-col gap-8 overflow-y-auto",
-        onScroll: handleScroll
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
-          return openBlock(), createElementBlock("div", {
-            key: message.id,
-            "data-message-row": message.role,
-            class: "min-w-0"
-          }, [
-            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
-              renderSlot(_ctx.$slots, "user-message", { message })
-            ])) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
-              renderSlot(_ctx.$slots, "agent-message", { message })
-            ]))
-          ], 8, _hoisted_1$c);
-        }), 128)),
-        hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", {
+          "aria-hidden": "true",
+          class: normalizeClass(["pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background-surface-primary to-transparent transition-opacity duration-200", showTopFade.value ? "opacity-100" : "opacity-0"])
+        }, null, 2),
+        createElementVNode("div", {
+          ref_key: "scrollContainerRef",
+          ref: scrollContainerRef,
+          class: "relative flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto",
+          onScroll: handleScroll
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
+            return openBlock(), createElementBlock("div", {
+              key: message.id,
+              "data-message-row": message.role,
+              class: "min-w-0"
+            }, [
+              message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+                renderSlot(_ctx.$slots, "user-message", { message })
+              ])) : (openBlock(), createElementBlock("div", _hoisted_4$6, [
+                renderSlot(_ctx.$slots, "agent-message", { message })
+              ]))
+            ], 8, _hoisted_2$7);
+          }), 128)),
+          hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "aria-hidden": "true",
+            style: normalizeStyle({ minHeight: `${spacerHeight.value}px` })
+          }, null, 4)) : createCommentVNode("", true)
+        ], 544),
+        createElementVNode("div", {
           "aria-hidden": "true",
-          style: normalizeStyle({ minHeight: `${spacerHeight.value}px` })
-        }, null, 4)) : createCommentVNode("", true)
-      ], 544);
+          class: normalizeClass(["pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-gradient-to-t from-background-surface-primary to-transparent transition-opacity duration-200", showBottomFade.value ? "opacity-100" : "opacity-0"])
+        }, null, 2)
+      ]);
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageButton"
   },
@@ -572,7 +600,7 @@ const _hoisted_1$b = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCopyMessageButton"
   },
@@ -629,7 +657,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
+          createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -663,7 +691,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkCopyMessageButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-ba2e5f32"]]);
+const CkCopyMessageButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ba2e5f32"]]);
 const _hoisted_1$a = {
   width: "208",
   height: "144",
@@ -673,7 +701,7 @@ const _hoisted_1$a = {
   "aria-hidden": "true",
   focusable: "false"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{ name: "CkDropZoneIllustration" },
   __name: "CkDropZoneIllustration",
   setup(__props) {
@@ -698,7 +726,7 @@ const _hoisted_6$2 = {
   class: "pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-[36rem] -translate-x-1/2 flex list-inside list-disc flex-col gap-1 rounded-md border border-border-surface-default bg-background-surface-default p-3 text-sm text-content-on-surface-secondary",
   role: "alert"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkDropZoneOverlay"
   },
@@ -861,7 +889,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_2$6, [
                 renderSlot(_ctx.$slots, "default", {}, () => [
-                  createVNode(_sfc_main$i, { class: "h-36 w-52" }),
+                  createVNode(_sfc_main$j, { class: "h-36 w-52" }),
                   createElementVNode("div", _hoisted_3$5, [
                     createElementVNode("p", _hoisted_4$5, toDisplayString(resolvedHeading.value), 1),
                     __props.hint ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
@@ -886,9 +914,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-54119668"]]);
+const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-54119668"]]);
 const _hoisted_1$8 = ["aria-label"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackButton"
   },
@@ -943,7 +971,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
+            createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
               "aria-pressed": isUpSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isUpDisabled.value,
@@ -973,7 +1001,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
+            createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
               "aria-pressed": isDownSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isDownDisabled.value,
@@ -1000,7 +1028,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-cf3d46b6"]]);
+const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-cf3d46b6"]]);
 function useCitationRendering(citations, onOpenSource) {
   const sourcesByIndex = computed(
     () => new Map(
@@ -1083,7 +1111,7 @@ function domToVNode(node, ctx) {
   }
   return vnode;
 }
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "CkMarkdownRenderer",
   props: {
     content: { type: String, required: true },
@@ -1151,7 +1179,7 @@ const _hoisted_4$4 = {
   class: "self-end text-sm text-content-on-surface-muted tabular-nums",
   "aria-live": "polite"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackDialog"
   },
@@ -1312,7 +1340,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _: 1
                   }),
                   createElementVNode("div", _hoisted_2$5, [
-                    createVNode(unref(_sfc_main$f), { content: __props.responseText }, null, 8, ["content"])
+                    createVNode(unref(_sfc_main$g), { content: __props.responseText }, null, 8, ["content"])
                   ])
                 ])) : createCommentVNode("", true),
                 createElementVNode("section", _hoisted_3$4, [
@@ -1378,8 +1406,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-12dfee8a"]]);
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-12dfee8a"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",
     inheritAttrs: false
@@ -1440,7 +1468,7 @@ const _hoisted_6$1 = {
 const _hoisted_7$1 = ["aria-label"];
 const _hoisted_8$1 = ["onClick"];
 const ITEM_GAP = 8;
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemsList"
   },
@@ -1562,7 +1590,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               }),
               onClick: ($event) => handleRowClick(file, $event)
             }, [
-              createVNode(_sfc_main$d, {
+              createVNode(_sfc_main$e, {
                 file,
                 size: __props.size,
                 "is-removable": __props.isRemovable,
@@ -1642,7 +1670,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                       style: normalizeStyle({ maxWidth: `${__props.maxItemWidth}px` }),
                       onClick: ($event) => handleRowClick(file, $event)
                     }, [
-                      createVNode(_sfc_main$d, {
+                      createVNode(_sfc_main$e, {
                         file,
                         size: __props.size,
                         "is-removable": __props.isRemovable,
@@ -1691,7 +1719,7 @@ const _hoisted_7 = {
 const _hoisted_8 = ["aria-label"];
 const _hoisted_9 = ["aria-label"];
 const _hoisted_10 = ["aria-label"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryItem",
     inheritAttrs: false
@@ -1931,8 +1959,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const baseClass = "flex w-full min-w-0 flex-col p-2";
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const baseClass = "flex w-full min-w-0 flex-col py-2";
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryWrapper",
     inheritAttrs: false
@@ -1967,7 +1995,7 @@ const _hoisted_2$2 = { class: "min-w-0 max-w-[10rem] truncate" };
 const _hoisted_3$1 = ["aria-label"];
 const _hoisted_4$1 = ["aria-selected", "onClick"];
 const _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{ name: "CkModelSelector" },
   __name: "CkModelSelector",
   props: {
@@ -2075,7 +2103,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptSendButton" },
   __name: "CkPromptSendButton",
   props: {
@@ -2101,7 +2129,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptMenuButton" },
   __name: "CkPromptMenuButton",
   props: {
@@ -2131,7 +2159,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptStopButton" },
   __name: "CkPromptStopButton",
   props: {
@@ -2165,7 +2193,7 @@ const _hoisted_2$1 = {
 const _hoisted_3 = ["for"];
 const _hoisted_4 = ["id", "value", "placeholder", "disabled"];
 const MAX_LINES = 6;
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptInput" },
   __name: "CkPromptInput",
   props: {
@@ -2316,12 +2344,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c6b78cec"]]);
+const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-c6b78cec"]]);
 const _hoisted_1$2 = {
   key: 0,
   class: "text-center text-content-on-surface-muted text-xs font-normal leading-4"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptInputDisclaimer" },
   __name: "CkPromptInputDisclaimer",
   props: {
@@ -2337,7 +2365,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkRegenerateMessageButton"
   },
@@ -2364,7 +2392,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: __props.ariaLabel }, {
+          createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: __props.ariaLabel }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -2385,7 +2413,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
 const _hoisted_2 = ["aria-expanded"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkUserMessage" },
   __name: "CkUserMessage",
   props: {
@@ -2395,12 +2423,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const labels = useChatKitLabels();
-    const showMoreLabel = computed(
-      () => labels.value.userMessageShowMore ?? defaultChatKitLabels.userMessageShowMore
-    );
-    const showLessLabel = computed(
-      () => labels.value.userMessageShowLess ?? defaultChatKitLabels.userMessageShowLess
-    );
+    const showMoreLabel = computed(() => labels.value.userMessageShowMore);
+    const showLessLabel = computed(() => labels.value.userMessageShowLess);
     const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
     const contentRef = ref(null);
     const expanded = ref(false);
@@ -2414,13 +2438,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       expanded.value = !expanded.value;
     }
     let resizeObserver;
-    onMounted(() => {
-      nextTick(measure);
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(() => measure());
-        if (contentRef.value) resizeObserver.observe(contentRef.value);
-      }
-    });
+    function observeContent(el) {
+      if (typeof ResizeObserver === "undefined") return;
+      if (!resizeObserver) resizeObserver = new ResizeObserver(() => measure());
+      resizeObserver.disconnect();
+      if (el) resizeObserver.observe(el);
+    }
+    watch(
+      contentRef,
+      (el) => {
+        observeContent(el);
+        nextTick(measure);
+      },
+      { flush: "post" }
+    );
     onBeforeUnmount(() => resizeObserver?.disconnect());
     watch([() => props.message, () => props.collapsedLines], () => {
       expanded.value = false;
@@ -2454,7 +2485,68 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c759a863"]]);
+const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4ca9ee1b"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "CkEditableUserMessage" },
+  __name: "CkEditableUserMessage",
+  props: {
+    message: { default: void 0 },
+    collapsedLines: { default: 0 }
+  },
+  emits: ["edit"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const slots = useSlots();
+    const labels = useChatKitLabels();
+    const actionsLabel = computed(() => labels.value.userMessageActions);
+    const editActionLabel = computed(() => labels.value.userMessageEditAction);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiFloatActions), {
+        trigger: "hover",
+        placement: "left",
+        offset: 4,
+        class: "max-w-full"
+      }, {
+        container: withCtx(() => [
+          createVNode(unref(CkUserMessage), {
+            message: __props.message,
+            "collapsed-lines": __props.collapsedLines
+          }, createSlots({ _: 2 }, [
+            unref(slots).default ? {
+              name: "default",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["message", "collapsed-lines"])
+        ]),
+        action: withCtx(() => [
+          createVNode(unref(UiFloatActionItems), { "aria-label": actionsLabel.value }, {
+            default: withCtx(() => [
+              createVNode(unref(UiFloatActionItems), {
+                type: "button",
+                "aria-label": editActionLabel.value,
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("edit"))
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(UiIcon), {
+                    name: "pencil",
+                    size: 16,
+                    "aria-hidden": "true"
+                  })
+                ]),
+                _: 1
+              }, 8, ["aria-label"])
+            ]),
+            _: 1
+          }, 8, ["aria-label"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
 const _hoisted_1 = {
   key: 1,
   class: "flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"
@@ -2500,7 +2592,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return slot ? slot({ message }).some((vnode) => !isVNodeEmpty(vnode)) : false;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, { messages: __props.messages }, {
+      return openBlock(), createBlock(_sfc_main$m, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
           createElementVNode("div", {
             class: normalizeClass({ "ml-8": hasIcon.value })
@@ -2519,7 +2611,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$q, {
+            createVNode(_sfc_main$r, {
               "bottom-separator": message.id !== lastAgentMessageId.value
             }, createSlots({
               footer: withCtx(() => [
@@ -2534,7 +2626,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
-                  createVNode(_sfc_main$f, {
+                  createVNode(_sfc_main$g, {
                     content: getMessageText(message),
                     classes: __props.agentMarkdownClasses
                   }, createSlots({ _: 2 }, [
@@ -2554,7 +2646,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 name: "header",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "agent-message-header", { message }, () => [
-                    createVNode(_sfc_main$p, null, createSlots({
+                    createVNode(_sfc_main$q, null, createSlots({
                       default: withCtx(() => [
                         renderSlot(_ctx.$slots, "agent-message-header-content", { message })
                       ]),
@@ -2642,7 +2734,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showActionOnHover: { type: Boolean, default: true },
     timeFormatter: { type: Function, default: formatRelativeTime },
     collapsedLimit: { default: 5 },
-    maxHeight: { default: void 0 }
+    maxHeight: { default: void 0 },
+    contentClass: { default: void 0 }
   },
   emits: ["select", "edit", "delete"],
   setup(__props, { emit: __emit }) {
@@ -2679,8 +2772,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$a, {
-          class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
+        createVNode(_sfc_main$b, {
+          class: normalizeClass([
+            isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0,
+            props.contentClass
+          ]),
           style: normalizeStyle(
             isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
           )
@@ -2698,7 +2794,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 edit: () => emit("edit", conversation),
                 delete: () => emit("delete", conversation)
               }, () => [
-                createVNode(_sfc_main$b, {
+                createVNode(_sfc_main$c, {
                   as: "a",
                   href: hrefFor(conversation),
                   "is-active": conversation.id === props.activeId,
@@ -2765,32 +2861,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
+  formatRelativeTime as A,
   CkCitation as C,
-  _sfc_main$q as _,
-  _sfc_main$p as a,
-  _sfc_main$n as b,
+  _sfc_main$r as _,
+  _sfc_main$q as a,
+  _sfc_main$o as b,
   _sfc_main$1 as c,
-  _sfc_main$l as d,
+  _sfc_main$m as d,
   CkCopyMessageButton as e,
   CkDropZoneOverlay as f,
-  CkFeedbackButton as g,
-  CkFeedbackDialog as h,
-  _sfc_main$c as i,
-  _sfc_main$o as j,
-  _sfc_main as k,
-  _sfc_main$b as l,
-  _sfc_main$a as m,
-  _sfc_main$f as n,
-  _sfc_main$k as o,
-  _sfc_main$9 as p,
-  CkPromptInput as q,
-  _sfc_main$4 as r,
-  _sfc_main$7 as s,
+  _sfc_main$2 as g,
+  CkFeedbackButton as h,
+  CkFeedbackDialog as i,
+  _sfc_main$d as j,
+  _sfc_main$p as k,
+  _sfc_main as l,
+  _sfc_main$c as m,
+  _sfc_main$b as n,
+  _sfc_main$g as o,
+  _sfc_main$l as p,
+  _sfc_main$a as q,
+  CkPromptInput as r,
+  _sfc_main$5 as s,
   _sfc_main$8 as t,
-  _sfc_main$6 as u,
-  _sfc_main$3 as v,
-  _sfc_main$s as w,
-  _sfc_main$r as x,
-  CkUserMessage as y,
-  formatRelativeTime as z
+  _sfc_main$9 as u,
+  _sfc_main$7 as v,
+  _sfc_main$4 as w,
+  _sfc_main$t as x,
+  _sfc_main$s as y,
+  CkUserMessage as z
 };