@aleph-alpha/chat-kit 2.2.0 → 3.0.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-CjfKRuZs.js → CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.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, createStaticVNode, computed, onBeforeUnmount, Teleport, withModifiers, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, mergeProps, withCtx, createVNode, Transition, toDisplayString, createStaticVNode, computed, onBeforeUnmount, Teleport, withModifiers, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { UiIcon, UiButton, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiProgress, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
 import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-ZutacPad.js";
-import { UiButton, UiTooltip, UiIcon, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -36,26 +36,12 @@ 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 _hoisted_1$e = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "2",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$e, [..._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)
-      ])]);
+      return openBlock(), createBlock(unref(UiIcon), { name: "arrow-up-right" });
     };
   }
 });
@@ -66,7 +52,7 @@ const _hoisted_1$d = {
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
@@ -74,7 +60,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("svg", _hoisted_1$d, [..._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"
+          fill: "currentColor"
         }, null, -1)
       ])]);
     };
@@ -95,12 +81,12 @@ const _hoisted_4$6 = {
   "data-testid": "ck-agent-message-header",
   class: "body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
 };
-const _hoisted_5$5 = { class: "text-content-on-surface-primary text-base leading-7" };
+const _hoisted_5$4 = { class: "text-content-on-surface-primary text-base leading-7" };
 const _hoisted_6$3 = {
   key: 1,
   class: "flex items-center gap-4"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   setup(__props) {
@@ -114,7 +100,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$5, [
+        createElementVNode("div", _hoisted_5$4, [
           renderSlot(_ctx.$slots, "default")
         ]),
         _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
@@ -133,7 +119,7 @@ const _hoisted_3$6 = {
   key: 1,
   class: "flex justify-start"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -289,7 +275,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageActionButton"
   },
@@ -317,7 +303,7 @@ const _hoisted_1$a = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCopyMessageActionButton"
   },
@@ -374,7 +360,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$j), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
+          createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -415,7 +401,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-f77a1193"]]);
+const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-f77a1193"]]);
 const _hoisted_1$9 = {
   width: "208",
   height: "144",
@@ -425,7 +411,7 @@ const _hoisted_1$9 = {
   "aria-hidden": "true",
   focusable: "false"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{ name: "CkDropZoneIllustration" },
   __name: "CkDropZoneIllustration",
   setup(__props) {
@@ -440,7 +426,7 @@ const _hoisted_1$8 = ["aria-label"];
 const _hoisted_2$6 = { class: "pointer-events-none flex h-full w-full flex-col items-center justify-center gap-4 text-content-on-surface-primary" };
 const _hoisted_3$5 = { class: "flex flex-col items-center gap-1 text-center" };
 const _hoisted_4$5 = { class: "body-16-bold" };
-const _hoisted_5$4 = {
+const _hoisted_5$3 = {
   key: 0,
   class: "body-16-regular"
 };
@@ -450,7 +436,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$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkDropZoneOverlay"
   },
@@ -501,11 +487,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       if (type && wildcards.some((w) => type.startsWith(w))) return true;
       return false;
     }
-    function formatBytes(bytes) {
-      const mb = bytes / (1024 * 1024);
-      if (mb >= 1) return `${mb.toFixed(0)} MB`;
-      return `${Math.max(1, Math.round(bytes / 1024))} KB`;
-    }
     const isSingle = computed(() => props.maxFiles === 1);
     const resolvedHeading = computed(
       () => props.heading ?? (isSingle.value ? "Drop a file here to add to chat" : "Drop files here to add to chat")
@@ -561,7 +542,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           rejected.push({
             file,
             reason: "too-large",
-            message: `"${file.name}" — exceeds ${formatBytes(props.maxFileSizeBytes)} limit`
+            message: `"${file.name}" — exceeds ${formatFileSize(props.maxFileSizeBytes)} limit`
           });
           continue;
         }
@@ -618,10 +599,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_2$6, [
                 renderSlot(_ctx.$slots, "default", {}, () => [
-                  createVNode(_sfc_main$h, { class: "h-36 w-52" }),
+                  createVNode(_sfc_main$i, { 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$4, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+                    __props.hint ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
                   ])
                 ], true)
               ])
@@ -643,9 +624,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-ede88d0d"]]);
+const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-54119668"]]);
 const _hoisted_1$7 = ["aria-label"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackButton"
   },
@@ -700,7 +681,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$j), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
+            createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
               "aria-pressed": isUpSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isUpDisabled.value,
@@ -730,7 +711,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$j), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
+            createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
               "aria-pressed": isDownSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isDownDisabled.value,
@@ -757,7 +738,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-245705b8"]]);
+const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-245705b8"]]);
 const defaultMarkdownClasses = {
   p: "my-1 leading-7",
   a: "underline underline-offset-4",
@@ -799,7 +780,7 @@ function domToVNode(node, slots, classes) {
   }
   return h(tag, attrs, children);
 }
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "CkMarkdownRenderer",
   props: {
     content: { type: String, required: true },
@@ -839,7 +820,7 @@ const _hoisted_4$4 = {
   class: "self-end text-sm text-content-on-surface-muted tabular-nums",
   "aria-live": "polite"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackDialog"
   },
@@ -1000,7 +981,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     _: 1
                   }),
                   createElementVNode("div", _hoisted_2$5, [
-                    createVNode(unref(_sfc_main$e), { content: __props.responseText }, null, 8, ["content"])
+                    createVNode(unref(_sfc_main$f), { content: __props.responseText }, null, 8, ["content"])
                   ])
                 ])) : createCommentVNode("", true),
                 createElementVNode("section", _hoisted_3$4, [
@@ -1066,8 +1047,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-12dfee8a"]]);
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-12dfee8a"]]);
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",
     inheritAttrs: false
@@ -1113,9 +1094,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 const _hoisted_1$5 = ["aria-label"];
 const _hoisted_2$4 = ["onClick"];
 const _hoisted_3$3 = ["disabled", "aria-label"];
-const _hoisted_4$3 = ["aria-label"];
-const _hoisted_5$3 = ["onClick"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_4$3 = {
+  key: 3,
+  class: "flex min-w-0 flex-1 flex-col items-start gap-0.5"
+};
+const _hoisted_5$2 = {
+  key: 1,
+  class: "label-12-medium w-full truncate text-content-on-status-error-inverse"
+};
+const _hoisted_6$1 = {
+  key: 2,
+  class: "label-12-medium w-full truncate text-content-on-surface-muted"
+};
+const _hoisted_7$1 = ["aria-label"];
+const _hoisted_8$1 = ["onClick"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemsList"
   },
@@ -1127,6 +1120,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     isRemovable: { type: Boolean, default: false },
     removeLabel: { default: "Remove file" },
     disabled: { type: Boolean, default: false },
+    showStatus: { type: Boolean, default: false },
     triggerLabel: { default: void 0 },
     triggerAriaLabel: { default: void 0 },
     listLabel: { default: void 0 },
@@ -1145,9 +1139,40 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const resolvedTriggerLabel = computed(
       () => props.triggerLabel ?? defaultTriggerLabel.value
     );
-    const resolvedTriggerAriaLabel = computed(
-      () => props.triggerAriaLabel ?? props.triggerLabel ?? defaultTriggerLabel.value
+    function hasError(file) {
+      return file.error != null && file.error !== "";
+    }
+    const failedFiles = computed(() => props.files.filter(hasError));
+    const uploadingFiles = computed(
+      () => props.files.filter(
+        (f) => !hasError(f) && f.progress != null && f.progress < 100
+      )
     );
+    const hasFailures = computed(() => failedFiles.value.length > 0);
+    const uploadInProgress = computed(() => uploadingFiles.value.length > 0);
+    const aggregateProgress = computed(() => {
+      const list = uploadingFiles.value;
+      if (!list.length) return 0;
+      const total = list.reduce((sum, f) => sum + (f.progress ?? 0), 0);
+      return Math.round(total / list.length);
+    });
+    const failedStatusLabel = computed(() => {
+      const n = failedFiles.value.length;
+      return `${n} ${n === 1 ? "upload" : "uploads"} failed`;
+    });
+    const countStatusLabel = computed(() => `${props.files.length} files`);
+    const triggerStatusText = computed(() => {
+      if (!props.showStatus) return "";
+      if (uploadInProgress.value) return `uploading ${aggregateProgress.value}%`;
+      if (hasFailures.value) return failedStatusLabel.value;
+      if (props.triggerLabel) return countStatusLabel.value;
+      return "";
+    });
+    const resolvedTriggerAriaLabel = computed(() => {
+      if (props.triggerAriaLabel) return props.triggerAriaLabel;
+      const base = props.triggerLabel ?? defaultTriggerLabel.value;
+      return triggerStatusText.value ? `${base}, ${triggerStatusText.value}` : base;
+    });
     function handleRemove(file) {
       if (isRowDisabled(file)) return;
       emit("remove", file.id);
@@ -1172,7 +1197,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             class: "min-w-0 max-w-64 flex-1 basis-0",
             onClick: ($event) => handleRowClick(file, $event)
           }, [
-            createVNode(_sfc_main$c, {
+            createVNode(_sfc_main$d, {
               file,
               size: __props.size,
               "is-removable": __props.isRemovable,
@@ -1202,13 +1227,28 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["relative flex w-full max-w-64 min-w-0 items-center gap-3 rounded-xl bg-background-surface-muted-subtle text-left transition-colors hover:bg-background-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background-surface-muted-subtle", __props.size === "small" ? "p-2" : "p-3"]),
                 "aria-label": resolvedTriggerAriaLabel.value
               }, [
-                createVNode(unref(UiFileType), {
+                __props.showStatus && hasFailures.value && !uploadInProgress.value ? (openBlock(), createBlock(unref(UiFileType), {
+                  key: 0,
+                  error: true
+                })) : (openBlock(), createBlock(unref(UiFileType), {
+                  key: 1,
                   icon: "paperclip",
                   tone: "default"
-                }),
-                createElementVNode("span", {
+                })),
+                !__props.showStatus ? (openBlock(), createElementBlock("span", {
+                  key: 2,
                   class: normalizeClass(["min-w-0 flex-1 truncate text-content-on-surface-primary", __props.size === "small" ? "label-12-medium" : "body-14-medium"])
-                }, toDisplayString(resolvedTriggerLabel.value), 3),
+                }, toDisplayString(resolvedTriggerLabel.value), 3)) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
+                  createElementVNode("span", {
+                    class: normalizeClass(["w-full truncate text-content-on-surface-primary", __props.size === "small" ? "label-12-medium" : "body-14-medium"])
+                  }, toDisplayString(resolvedTriggerLabel.value), 3),
+                  uploadInProgress.value ? (openBlock(), createBlock(unref(UiProgress), {
+                    key: 0,
+                    "model-value": aggregateProgress.value,
+                    class: "h-1 w-full",
+                    "aria-label": `${resolvedTriggerLabel.value} upload progress`
+                  }, null, 8, ["model-value", "aria-label"])) : hasFailures.value ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(failedStatusLabel.value), 1)) : __props.triggerLabel ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(countStatusLabel.value), 1)) : createCommentVNode("", true)
+                ])),
                 createVNode(unref(UiIcon), {
                   name: "chevron-down",
                   size: 16,
@@ -1236,7 +1276,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     class: "min-w-0 max-w-64",
                     onClick: ($event) => handleRowClick(file, $event)
                   }, [
-                    createVNode(_sfc_main$c, {
+                    createVNode(_sfc_main$d, {
                       file,
                       size: __props.size,
                       "is-removable": __props.isRemovable,
@@ -1249,9 +1289,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
-                  ], 8, _hoisted_5$3);
+                  ], 8, _hoisted_8$1);
                 }), 128))
-              ], 8, _hoisted_4$3)
+              ], 8, _hoisted_7$1)
             ]),
             _: 3
           }, 8, ["class"])
@@ -1269,22 +1309,22 @@ const _hoisted_4$2 = {
   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$2 = {
+const _hoisted_5$1 = {
   key: 0,
   class: "truncate"
 };
-const _hoisted_6$1 = {
+const _hoisted_6 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_7$1 = {
+const _hoisted_7 = {
   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({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryItem",
     inheritAttrs: false
@@ -1417,9 +1457,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_3$2, toDisplayString(props.title), 1),
               props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "meta", {}, () => [
-                  props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$2, 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)
+                  props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
+                  props.metaStart && props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_6, "|")) : createCommentVNode("", true),
+                  props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(props.metaEnd), 1)) : createCommentVNode("", true)
                 ])
               ])) : createCommentVNode("", true)
             ])
@@ -1525,7 +1565,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const baseClass = "flex w-full min-w-0 flex-col p-2";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryWrapper",
     inheritAttrs: false
@@ -1559,8 +1599,8 @@ const _hoisted_1$3 = ["disabled", "aria-expanded", "aria-label"];
 const _hoisted_2$2 = { class: "max-w-[10rem] truncate" };
 const _hoisted_3$1 = ["aria-label"];
 const _hoisted_4$1 = ["aria-selected", "onClick"];
-const _hoisted_5$1 = { class: "min-w-0 flex-1 truncate" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkModelSelector" },
   __name: "CkModelSelector",
   props: {
@@ -1646,7 +1686,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                       class: "relative flex w-full items-center gap-2 rounded-sm py-2 pr-8 pl-3 text-left body-14-regular text-content-on-surface-primary outline-none hover:bg-background-surface-muted-subtle focus-visible:ring-2 focus-visible:ring-ring",
                       onClick: ($event) => select(model.id)
                     }, [
-                      createElementVNode("span", _hoisted_5$1, toDisplayString(model.label), 1),
+                      createElementVNode("span", _hoisted_5, toDisplayString(model.label), 1),
                       model.id === __props.selectedModelId ? (openBlock(), createBlock(unref(UiIcon), {
                         key: 0,
                         name: "check",
@@ -1667,9 +1707,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...{ name: "CkPromptActionButton" },
-  __name: "CkPromptActionButton",
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{ name: "CkPromptSendButton" },
+  __name: "CkPromptSendButton",
   props: {
     ariaLabel: {},
     disabled: { type: Boolean, default: false },
@@ -1683,7 +1723,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         type: __props.type,
         disabled: __props.disabled,
         loading: __props.loading,
-        class: "!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md"
+        class: "!rounded-full"
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
@@ -1693,6 +1733,36 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "CkPromptMenuButton" },
+  __name: "CkPromptMenuButton",
+  props: {
+    ariaLabel: {},
+    disabled: { type: Boolean, default: false },
+    type: { default: "button" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
+        variant: "ghost",
+        size: "icon",
+        type: __props.type,
+        disabled: __props.disabled,
+        class: "!rounded-full"
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createVNode(unref(UiIcon), {
+              name: "plus",
+              size: 20
+            })
+          ])
+        ]),
+        _: 3
+      }, 16, ["type", "disabled"]);
+    };
+  }
+});
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptStopButton" },
   __name: "CkPromptStopButton",
@@ -1705,9 +1775,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(UiButton), mergeProps({ ariaLabel: __props.ariaLabel }, {
-        size: "icon-sm",
+        variant: "secondary",
+        size: "icon",
         disabled: props.disabled,
-        class: "!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md",
+        class: "!rounded-full",
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }), {
         default: withCtx(() => [
@@ -1719,12 +1790,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "flex flex-col gap-2" };
-const _hoisted_2$1 = ["for"];
-const _hoisted_3 = ["id", "value", "placeholder", "disabled"];
-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 _hoisted_2$1 = {
+  key: 0,
+  style: { "grid-area": "top" }
+};
+const _hoisted_3 = ["for"];
+const _hoisted_4 = ["id", "value", "placeholder", "disabled"];
+const LINE_HEIGHT = 24;
+const MAX_LINES = 6;
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptInput" },
   __name: "CkPromptInput",
@@ -1732,27 +1805,51 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     modelValue: { default: "" },
     placeholder: { default: void 0 },
     disabled: { type: Boolean, default: false },
-    maxHeight: { default: 200 },
     ariaLabel: { default: void 0 }
   },
   emits: ["update:modelValue", "submit"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const MAX_HEIGHT = LINE_HEIGHT * MAX_LINES;
     const props = __props;
     const emit = __emit;
     const textareaId = useId();
     const textareaRef = useTemplateRef("textareaRef");
+    const slots = useSlots();
+    const isMultiLine = ref(false);
     const isEmpty = computed(() => props.modelValue.trim() === "");
     const isSubmitDisabled = computed(() => props.disabled || isEmpty.value);
+    const hasToolbarTop = ref(typeof slots["toolbar-top"] === "function");
+    function syncSlotState() {
+      const next = typeof slots["toolbar-top"] === "function";
+      if (next !== hasToolbarTop.value) hasToolbarTop.value = next;
+    }
+    onMounted(syncSlotState);
+    onUpdated(syncSlotState);
+    const hasMultipleRows = computed(
+      () => isMultiLine.value || hasToolbarTop.value
+    );
+    const gridAreas = computed(() => {
+      const top = hasToolbarTop.value ? '"top top top" ' : "";
+      return isMultiLine.value ? `${top}"input input input" "left . right"` : `${top}"left input right"`;
+    });
     function adjustHeight() {
       const el = textareaRef.value;
       if (!el) return;
+      if (props.modelValue === "") {
+        isMultiLine.value = false;
+        el.style.height = "";
+        return;
+      }
       el.style.height = "auto";
-      el.style.height = `${Math.min(el.scrollHeight, props.maxHeight)}px`;
+      const measured = el.scrollHeight;
+      el.style.height = `${Math.min(measured, MAX_HEIGHT)}px`;
+      const hasExplicitNewline = props.modelValue.includes("\n");
+      if (!isMultiLine.value && (hasExplicitNewline || measured >= LINE_HEIGHT * 2)) {
+        isMultiLine.value = true;
+      }
     }
     function onInput(event) {
-      const value = event.target.value;
-      emit("update:modelValue", value);
-      adjustHeight();
+      emit("update:modelValue", event.target.value);
     }
     function submit() {
       if (isSubmitDisabled.value) return;
@@ -1771,52 +1868,70 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     }
     watch(
       () => props.modelValue,
-      () => {
-        nextTick(adjustHeight);
-      }
+      () => nextTick(adjustHeight)
     );
+    onMounted(adjustHeight);
     __expose({ focus, submit });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createElementVNode("form", {
-          class: "border-core-border-default bg-core-bg-primary [&:has(textarea:focus)]:ring-core-border-focus flex flex-col gap-3 rounded-xl border px-4 pt-3 pb-3 shadow-sm [&:has(textarea:focus)]:ring-2",
+          class: normalizeClass([
+            "ck-prompt-form border-border-surface-default bg-background-input-strong [&:has(textarea:focus)]:border-border-surface-focus-ring [&:has(textarea:focus)]:ring-border-surface-focus-ring/40 min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] [&:has(textarea:focus)]:ring-2",
+            hasMultipleRows.value ? "rounded-2xl" : "rounded-3xl"
+          ]),
+          style: normalizeStyle({
+            gridTemplateColumns: "auto 1fr auto",
+            gridTemplateAreas: gridAreas.value
+          }),
           onSubmit: withModifiers(submit, ["prevent"])
         }, [
+          hasToolbarTop.value ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+            renderSlot(_ctx.$slots, "toolbar-top", {}, void 0, true)
+          ])) : createCommentVNode("", true),
           __props.ariaLabel ? (openBlock(), createElementBlock("label", {
-            key: 0,
+            key: 1,
             for: unref(textareaId),
             class: "sr-only"
-          }, toDisplayString(__props.ariaLabel), 9, _hoisted_2$1)) : createCommentVNode("", true),
+          }, toDisplayString(__props.ariaLabel), 9, _hoisted_3)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass([!isMultiLine.value && "pr-2"]),
+            style: { "grid-area": "left" }
+          }, [
+            renderSlot(_ctx.$slots, "toolbar-left", {}, void 0, true)
+          ], 2),
           createElementVNode("textarea", {
             id: unref(textareaId),
             ref_key: "textareaRef",
             ref: textareaRef,
-            rows: "2",
+            rows: "1",
             value: __props.modelValue,
             placeholder: __props.placeholder,
             disabled: __props.disabled,
-            class: "text-core-content-primary placeholder-core-content-placeholder min-h-10 w-full resize-none bg-transparent text-sm leading-5 focus:outline-none",
+            style: { "grid-area": "input" },
+            class: normalizeClass([
+              "ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans text-base font-normal leading-6 max-h-36 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60",
+              isMultiLine.value ? "pl-3 pr-3" : "px-0"
+            ]),
             onInput,
             onKeydown
-          }, null, 40, _hoisted_3),
-          createElementVNode("div", _hoisted_4, [
-            _ctx.$slots["toolbar-left"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-              renderSlot(_ctx.$slots, "toolbar-left")
-            ])) : (openBlock(), createElementBlock("div", _hoisted_6)),
-            createElementVNode("div", _hoisted_7, [
-              renderSlot(_ctx.$slots, "toolbar-right", {
-                submit,
-                disabled: isSubmitDisabled.value,
-                isEmpty: isEmpty.value
-              })
-            ])
-          ])
-        ], 32),
-        renderSlot(_ctx.$slots, "footer")
+          }, null, 42, _hoisted_4),
+          createElementVNode("div", {
+            class: normalizeClass([!isMultiLine.value && "pl-4"]),
+            style: { "grid-area": "right" }
+          }, [
+            renderSlot(_ctx.$slots, "toolbar-right", {
+              submit,
+              disabled: isSubmitDisabled.value,
+              isEmpty: isEmpty.value
+            }, void 0, true)
+          ], 2)
+        ], 38),
+        renderSlot(_ctx.$slots, "footer", {}, void 0, true)
       ]);
     };
   }
 });
+const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-92b05731"]]);
 const _hoisted_1$1 = {
   key: 0,
   class: "text-core-content-tertiary text-center text-xs leading-3.5"
@@ -1931,7 +2046,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return message.content.filter((c) => c.type === "text").map((c) => c.text).join("");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$k, { messages: __props.messages }, {
+      return openBlock(), createBlock(_sfc_main$l, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
           createElementVNode("div", {
             class: normalizeClass({ "ml-8": hasIcon.value })
@@ -1950,7 +2065,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$l, null, createSlots({
+            createVNode(_sfc_main$m, null, createSlots({
               footer: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
                   getMessageText(message) && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -1963,7 +2078,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
-                  createVNode(_sfc_main$e, {
+                  createVNode(_sfc_main$f, {
                     content: getMessageText(message),
                     classes: __props.agentMarkdownClasses
                   }, createSlots({ _: 2 }, [
@@ -2089,7 +2204,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$9, {
+        createVNode(_sfc_main$a, {
           class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
           style: normalizeStyle(
             isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
@@ -2108,7 +2223,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 edit: () => emit("edit", conversation),
                 delete: () => emit("delete", conversation)
               }, () => [
-                createVNode(_sfc_main$a, {
+                createVNode(_sfc_main$b, {
                   as: "a",
                   href: hrefFor(conversation),
                   "is-active": conversation.id === props.activeId,
@@ -2182,7 +2297,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholder: { default: "Ask me anything" },
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
-    maxHeight: { default: 200 },
     ariaLabel: { default: "Chat message input" },
     stopAriaLabel: { default: "Stop generating" },
     disclaimer: { default: void 0 }
@@ -2210,13 +2324,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     __expose({ focus, submit });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, {
+      return openBlock(), createBlock(CkPromptInput, {
         ref_key: "promptInputRef",
         ref: promptInputRef,
         "model-value": __props.modelValue,
         placeholder: __props.placeholder,
         disabled: isDisabled.value,
-        "max-height": __props.maxHeight,
         "aria-label": __props.ariaLabel,
         "onUpdate:modelValue": onUpdateModelValue,
         onSubmit
@@ -2231,17 +2344,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "stop-icon", {}, () => [
-                  createVNode(_sfc_main$m)
+                  createVNode(_sfc_main$n)
                 ])
               ]),
               _: 3
-            }, 8, ["aria-label", "disabled"])) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, { ariaLabel: "Send message" }, {
+            }, 8, ["aria-label", "disabled"])) : (openBlock(), createBlock(_sfc_main$8, mergeProps({ key: 1 }, { ariaLabel: "Send message" }, {
               type: "submit",
               disabled: scope.disabled
             }), {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "send-icon", {}, () => [
-                  createVNode(_sfc_main$n)
+                  createVNode(_sfc_main$o)
                 ])
               ]),
               _: 3
@@ -2258,39 +2371,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         _: 2
       }, [
+        _ctx.$slots["toolbar-top"] ? {
+          name: "toolbar-top",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "toolbar-top")
+          ]),
+          key: "0"
+        } : void 0,
         _ctx.$slots["toolbar-left"] ? {
           name: "toolbar-left",
           fn: withCtx(() => [
             renderSlot(_ctx.$slots, "toolbar-left")
           ]),
-          key: "0"
+          key: "1"
         } : void 0
-      ]), 1032, ["model-value", "placeholder", "disabled", "max-height", "aria-label"]);
+      ]), 1032, ["model-value", "placeholder", "disabled", "aria-label"]);
     };
   }
 });
 export {
   CkCopyMessageActionButton as C,
-  _sfc_main$l as _,
+  _sfc_main$m as _,
   _sfc_main$2 as a,
-  _sfc_main$k as b,
+  _sfc_main$l as b,
   CkDropZoneOverlay as c,
   CkFeedbackButton as d,
   CkFeedbackDialog as e,
-  _sfc_main$b as f,
+  _sfc_main$c as f,
   _sfc_main$1 as g,
-  _sfc_main$a as h,
-  _sfc_main$9 as i,
+  _sfc_main$b as h,
+  _sfc_main$a as i,
   _sfc_main as j,
-  _sfc_main$e as k,
-  _sfc_main$j as l,
-  _sfc_main$8 as m,
-  _sfc_main$7 as n,
-  _sfc_main$5 as o,
-  _sfc_main$4 as p,
-  _sfc_main$6 as q,
-  _sfc_main$n as r,
-  _sfc_main$m as s,
-  CkUserMessage as t,
-  formatRelativeTime as u
+  _sfc_main$f as k,
+  _sfc_main$k as l,
+  _sfc_main$9 as m,
+  CkPromptInput as n,
+  _sfc_main$4 as o,
+  _sfc_main$7 as p,
+  _sfc_main$8 as q,
+  _sfc_main$6 as r,
+  _sfc_main$o as s,
+  _sfc_main$n as t,
+  CkUserMessage as u,
+  formatRelativeTime as v
 };