@aleph-alpha/chat-kit 2.3.0 → 3.1.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-DYTizPsB.js → CkInput.vue_vue_type_script_setup_true_lang-DKzc21Yp.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 { 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, UiProgress, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
+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-CLsWWwgG.js";
 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,13 +60,13 @@ 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)
       ])]);
     };
   }
 });
-const _hoisted_1$c = { class: "flex w-full flex-col gap-6 pb-6" };
+const _hoisted_1$c = { class: "flex w-full min-w-0 flex-col gap-6 pb-6" };
 const _hoisted_2$8 = {
   key: 0,
   class: "flex items-start gap-3"
@@ -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_6$4 = {
+const _hoisted_5$4 = { class: "text-content-on-surface-primary min-w-0 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,10 +100,10 @@ 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$4, [
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
           renderSlot(_ctx.$slots, "footer")
         ])) : createCommentVNode("", true)
       ]);
@@ -127,13 +113,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 const _hoisted_1$b = ["data-message-row"];
 const _hoisted_2$7 = {
   key: 0,
-  class: "flex justify-end"
+  class: "flex min-w-0 justify-end"
 };
 const _hoisted_3$6 = {
   key: 1,
-  class: "flex justify-start"
+  class: "flex min-w-0 justify-start"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -271,7 +257,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
           return openBlock(), createElementBlock("div", {
             key: message.id,
-            "data-message-row": message.role
+            "data-message-row": message.role,
+            class: "min-w-0"
           }, [
             message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
               renderSlot(_ctx.$slots, "user-message", { message })
@@ -289,7 +276,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageActionButton"
   },
@@ -317,7 +304,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 +361,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 +402,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 +412,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,17 +427,17 @@ 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"
 };
-const _hoisted_6$3 = {
+const _hoisted_6$2 = {
   key: 0,
   "data-slot": "drop-zone-errors",
   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 +488,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 +543,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 +600,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)
               ])
@@ -631,7 +613,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }),
         createVNode(Transition, { name: "ck-drop-overlay" }, {
           default: withCtx(() => [
-            __props.showErrors && errors.value.length ? (openBlock(), createElementBlock("ul", _hoisted_6$3, [
+            __props.showErrors && errors.value.length ? (openBlock(), createElementBlock("ul", _hoisted_6$2, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(errors.value, (msg, i) => {
                 return openBlock(), createElementBlock("li", { key: i }, toDisplayString(msg), 1);
               }), 128))
@@ -643,9 +625,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 +682,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 +712,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,17 +739,18 @@ 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",
+  img: "max-w-full h-auto",
   h1: "mt-4 mb-2 text-2xl font-bold",
   h2: "mt-3 mb-2 text-xl font-semibold",
   h3: "mt-3 mb-1 text-lg font-semibold",
   ul: "my-1 ml-6 list-disc",
   ol: "my-1 ml-6 list-decimal",
   li: "my-0.5",
-  pre: "my-2 overflow-x-auto rounded-lg p-4",
+  pre: "my-2 max-w-full overflow-x-auto rounded-lg p-4",
   code: "rounded px-1.5 py-0.5",
   blockquote: "my-2 border-l-2 pl-4 italic",
   table: "my-2 w-full border-collapse",
@@ -775,7 +758,8 @@ const defaultMarkdownClasses = {
   td: "border p-2",
   hr: "my-4"
 };
-function domToVNode(node, slots, classes) {
+const TABLE_WRAPPER_CLASS = "max-w-full overflow-x-auto";
+function domToVNode(node, slots, classes, tableLabel) {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
   const el = node;
@@ -787,7 +771,7 @@ function domToVNode(node, slots, classes) {
       return slots["code-block"]({ code, language });
     }
   }
-  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes)).filter((c) => c != null);
+  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes, tableLabel)).filter((c) => c != null);
   const attrs = {};
   for (const attr of el.attributes) {
     attrs[attr.name] = attr.value;
@@ -797,9 +781,22 @@ function domToVNode(node, slots, classes) {
   if (customClass) {
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
-  return h(tag, attrs, children);
+  const vnode = h(tag, attrs, children);
+  if (tag === "table") {
+    return h(
+      "div",
+      {
+        class: TABLE_WRAPPER_CLASS,
+        tabindex: "0",
+        role: "region",
+        "aria-label": tableLabel
+      },
+      [vnode]
+    );
+  }
+  return vnode;
 }
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "CkMarkdownRenderer",
   props: {
     content: { type: String, required: true },
@@ -812,6 +809,7 @@ const _sfc_main$e = defineComponent({
   setup(props, { slots }) {
     const { content, plugins } = toRefs(props);
     const { html } = useMarkdownParser(content, plugins);
+    const labels = useChatKitLabels();
     const parsedNodes = computed(() => {
       const raw = html.value;
       if (!raw) return [];
@@ -824,8 +822,13 @@ const _sfc_main$e = defineComponent({
     }));
     return () => {
       const elementClasses = mergedClasses.value;
-      const children = parsedNodes.value.map((node) => domToVNode(node, slots, elementClasses)).filter((c) => c != null);
-      return h("div", { class: "markdown-renderer" }, children);
+      const tableLabel = labels.value.markdownTableLabel ?? defaultChatKitLabels.markdownTableLabel;
+      const children = parsedNodes.value.map((node) => domToVNode(node, slots, elementClasses, tableLabel)).filter((c) => c != null);
+      return h(
+        "div",
+        { class: "markdown-renderer min-w-0 break-words" },
+        children
+      );
     };
   }
 });
@@ -839,7 +842,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 +1003,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 +1069,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
@@ -1117,17 +1120,17 @@ const _hoisted_4$3 = {
   key: 3,
   class: "flex min-w-0 flex-1 flex-col items-start gap-0.5"
 };
-const _hoisted_5$3 = {
+const _hoisted_5$2 = {
   key: 1,
   class: "label-12-medium w-full truncate text-content-on-status-error-inverse"
 };
-const _hoisted_6$2 = {
+const _hoisted_6$1 = {
   key: 2,
   class: "label-12-medium w-full truncate text-content-on-surface-muted"
 };
-const _hoisted_7$2 = ["aria-label"];
+const _hoisted_7$1 = ["aria-label"];
 const _hoisted_8$1 = ["onClick"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemsList"
   },
@@ -1216,7 +1219,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,
@@ -1266,7 +1269,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     "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$3, toDisplayString(failedStatusLabel.value), 1)) : __props.triggerLabel ? (openBlock(), createElementBlock("span", _hoisted_6$2, toDisplayString(countStatusLabel.value), 1)) : createCommentVNode("", true)
+                  }, 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",
@@ -1295,7 +1298,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,
@@ -1310,7 +1313,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
                   ], 8, _hoisted_8$1);
                 }), 128))
-              ], 8, _hoisted_7$2)
+              ], 8, _hoisted_7$1)
             ]),
             _: 3
           }, 8, ["class"])
@@ -1328,22 +1331,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
@@ -1476,9 +1479,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)
             ])
@@ -1584,7 +1587,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
@@ -1615,11 +1618,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = ["disabled", "aria-expanded", "aria-label"];
-const _hoisted_2$2 = { class: "max-w-[10rem] truncate" };
+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$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: {
@@ -1663,7 +1666,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createElementVNode("button", {
                 type: "button",
-                class: "ck-model-selector__trigger inline-flex h-9 shrink-0 items-center gap-1 rounded-3xl px-3 label-14-medium text-content-on-surface-primary outline-none transition-colors hover:bg-background-surface-muted focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                class: "ck-model-selector__trigger inline-flex h-9 min-w-0 items-center gap-1 rounded-3xl px-3 label-14-medium text-content-on-surface-primary outline-none transition-colors hover:bg-background-surface-muted focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                 disabled: __props.disabled,
                 "aria-haspopup": "listbox",
                 "aria-expanded": open.value,
@@ -1673,6 +1676,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 createVNode(unref(UiIcon), {
                   name: "chevron-down",
                   size: 16,
+                  class: "shrink-0",
                   "aria-hidden": "true"
                 })
               ], 8, _hoisted_1$3)
@@ -1705,7 +1709,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",
@@ -1726,9 +1730,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 },
@@ -1742,7 +1746,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")
@@ -1752,6 +1756,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",
@@ -1764,9 +1798,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(() => [
@@ -1778,12 +1813,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",
@@ -1791,27 +1828,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;
@@ -1830,52 +1891,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"
@@ -1990,7 +2069,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 })
@@ -2009,7 +2088,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, {
@@ -2022,7 +2101,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 }, [
@@ -2148,7 +2227,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
@@ -2167,7 +2246,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,
@@ -2241,7 +2320,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 }
@@ -2269,13 +2347,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
@@ -2290,17 +2367,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
@@ -2317,39 +2394,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
 };