@aleph-alpha/chat-kit 1.17.3 → 2.0.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-DYBCJPBn.js → CkInput.vue_vue_type_script_setup_true_lang-DPZedAQS.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, computed, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, withModifiers, resolveDynamicComponent, useTemplateRef, onBeforeUnmount, createSlots, normalizeProps, guardReactiveProps } from "vue";
-import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-BC6ItJc6.js";
+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;
@@ -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 _hoisted_1$b = {
+const _hoisted_1$c = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -47,31 +47,31 @@ const _hoisted_1$b = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$c, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", { d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" }, null, -1),
         createElementVNode("path", { d: "M6 12h16" }, null, -1)
       ])]);
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._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"
@@ -80,41 +80,41 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "flex w-full flex-col gap-6 pb-6" };
-const _hoisted_2$6 = {
+const _hoisted_1$a = { class: "flex w-full flex-col gap-6 pb-6" };
+const _hoisted_2$7 = {
   key: 0,
   class: "flex items-start gap-3"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   key: 0,
   "data-testid": "ck-agent-message-icon",
   class: "flex flex-shrink-0 justify-center"
 };
-const _hoisted_4$4 = {
+const _hoisted_4$5 = {
   key: 1,
   "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$3 = { 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$2 = {
   key: 1,
   class: "flex items-center gap-4"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
-          _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+          _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
             renderSlot(_ctx.$slots, "icon")
           ])) : createCommentVNode("", true),
-          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$4, [
+          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$5, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$3, [
+        createElementVNode("div", _hoisted_5$4, [
           renderSlot(_ctx.$slots, "default")
         ]),
         _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
@@ -124,16 +124,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["data-message-row"];
-const _hoisted_2$5 = {
+const _hoisted_1$9 = ["data-message-row"];
+const _hoisted_2$6 = {
   key: 0,
   class: "flex justify-end"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$5 = {
   key: 1,
   class: "flex justify-start"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -273,12 +273,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             key: message.id,
             "data-message-row": message.role
           }, [
-            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
               renderSlot(_ctx.$slots, "user-message", { message })
-            ])) : (openBlock(), createElementBlock("div", _hoisted_3$4, [
+            ])) : (openBlock(), createElementBlock("div", _hoisted_3$5, [
               renderSlot(_ctx.$slots, "agent-message", { message })
             ]))
-          ], 8, _hoisted_1$8);
+          ], 8, _hoisted_1$9);
         }), 128)),
         hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -289,7 +289,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageActionButton"
   },
@@ -313,11 +313,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCopyMessageActionButton"
   },
@@ -374,7 +374,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
+          createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -401,7 +401,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["disabled"]),
-          createElementVNode("span", _hoisted_1$7, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
+          createElementVNode("span", _hoisted_1$8, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
         ]),
         _: 1
       }, 8, ["open", "content"]);
@@ -415,9 +415,9 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-f77a1193"]]);
-const _hoisted_1$6 = ["aria-label"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-f77a1193"]]);
+const _hoisted_1$7 = ["aria-label"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackButton"
   },
@@ -472,7 +472,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
+            createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
               "aria-pressed": isUpSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isUpDisabled.value,
@@ -502,7 +502,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
+            createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
               "aria-pressed": isDownSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isDownDisabled.value,
@@ -525,11 +525,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["content"])
-      ], 8, _hoisted_1$6);
+      ], 8, _hoisted_1$7);
     };
   }
 });
-const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-245705b8"]]);
+const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-245705b8"]]);
 const defaultMarkdownClasses = {
   p: "my-1 leading-7",
   a: "underline underline-offset-4",
@@ -571,7 +571,7 @@ function domToVNode(node, slots, classes) {
   }
   return h(tag, attrs, children);
 }
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "CkMarkdownRenderer",
   props: {
     content: { type: String, required: true },
@@ -601,17 +601,17 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "flex min-h-0 flex-col gap-2"
 };
-const _hoisted_2$4 = { class: "ck-feedback-dialog__response min-h-0 flex-1 overflow-y-auto rounded-md border border-input bg-background-input-default px-3 py-2 shadow-xs" };
-const _hoisted_3$3 = { class: "flex min-h-0 flex-col gap-4" };
-const _hoisted_4$3 = {
+const _hoisted_2$5 = { class: "ck-feedback-dialog__response min-h-0 flex-1 overflow-y-auto rounded-md border border-input bg-background-input-default px-3 py-2 shadow-xs" };
+const _hoisted_3$4 = { class: "flex min-h-0 flex-col gap-4" };
+const _hoisted_4$4 = {
   class: "self-end text-sm text-content-on-surface-muted tabular-nums",
   "aria-live": "polite"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackDialog"
   },
@@ -665,14 +665,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const submitLabel = computed(
       () => __props.submitLabel ?? labels.value.feedbackDialogSubmitLabel ?? defaultChatKitLabels.feedbackDialogSubmitLabel
     );
-    const selectedReason = ref("");
+    const selectedReasons = ref([]);
     const freeText = ref("");
     const freeTextId = useId();
     watch(
       () => __props.open,
       (isOpen, wasOpen) => {
         if (isOpen && !wasOpen) {
-          selectedReason.value = "";
+          selectedReasons.value = [];
           freeText.value = "";
         }
       }
@@ -682,7 +682,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     );
     const characterCount = computed(() => freeText.value.length);
     const canSubmit = computed(
-      () => !__props.disabled && !__props.submitting && (selectedReason.value !== "" || freeText.value.trim() !== "")
+      () => !__props.disabled && !__props.submitting && (selectedReasons.value.length > 0 || freeText.value.trim() !== "")
     );
     function handleOpenChange(next) {
       if (!next && (__props.submitting || __props.disabled)) {
@@ -706,7 +706,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
       emit("submit", {
         sentiment: __props.sentiment,
-        reason: selectedReason.value === "" ? null : selectedReason.value,
+        // Copy so the host can't mutate our internal reactive array, and so the
+        // payload is a plain snapshot at submit time.
+        reasons: [...selectedReasons.value],
         reasonText: freeText.value.trim()
       });
     }
@@ -762,22 +764,22 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   showResponseColumn.value ? "grid-cols-2" : "grid-cols-1"
                 ])
               }, [
-                showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$5, [
+                showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$6, [
                   createVNode(unref(UiFieldLabel), null, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(responseHeading.value), 1)
                     ]),
                     _: 1
                   }),
-                  createElementVNode("div", _hoisted_2$4, [
-                    createVNode(unref(_sfc_main$d), { content: __props.responseText }, null, 8, ["content"])
+                  createElementVNode("div", _hoisted_2$5, [
+                    createVNode(unref(_sfc_main$e), { content: __props.responseText }, null, 8, ["content"])
                   ])
                 ])) : createCommentVNode("", true),
-                createElementVNode("section", _hoisted_3$3, [
+                createElementVNode("section", _hoisted_3$4, [
                   createVNode(unref(UiToggleGroup), {
-                    modelValue: selectedReason.value,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReason.value = $event),
-                    type: "single",
+                    modelValue: selectedReasons.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReasons.value = $event),
+                    type: "multiple",
                     variant: "outline",
                     disabled: __props.disabled || __props.submitting,
                     class: "grid grid-cols-2 gap-4",
@@ -820,7 +822,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                         maxlength: __props.maxFreeTextLength,
                         rows: "3"
                       }, null, 8, ["id", "modelValue", "placeholder", "disabled", "maxlength"]),
-                      createElementVNode("div", _hoisted_4$3, toDisplayString(characterCount.value) + "/" + toDisplayString(__props.maxFreeTextLength), 1)
+                      createElementVNode("div", _hoisted_4$4, toDisplayString(characterCount.value) + "/" + toDisplayString(__props.maxFreeTextLength), 1)
                     ]),
                     _: 1
                   })
@@ -835,8 +837,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-181a7aa9"]]);
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4d1d9c59"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",
     inheritAttrs: false
@@ -879,12 +881,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["aria-label"];
-const _hoisted_2$3 = ["onClick"];
-const _hoisted_3$2 = ["disabled", "aria-label"];
-const _hoisted_4$2 = ["aria-label"];
-const _hoisted_5$2 = ["onClick"];
-const _sfc_main$a = /* @__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({
   ...{
     name: "CkFileItemsList"
   },
@@ -941,7 +943,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             class: "min-w-0 max-w-64 flex-1 basis-0",
             onClick: ($event) => handleRowClick(file, $event)
           }, [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$c, {
               file,
               size: __props.size,
               "is-removable": __props.isRemovable,
@@ -954,9 +956,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
-          ], 8, _hoisted_2$3);
+          ], 8, _hoisted_2$4);
         }), 128))
-      ], 8, _hoisted_1$4)) : (openBlock(), createBlock(unref(UiPopover), {
+      ], 8, _hoisted_1$5)) : (openBlock(), createBlock(unref(UiPopover), {
         key: 1,
         open: isOpen.value,
         "onUpdate:open": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event)
@@ -984,7 +986,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   "aria-hidden": "true",
                   class: normalizeClass(["shrink-0 text-content-on-surface-muted transition-transform", isOpen.value && "rotate-180"])
                 }, null, 8, ["class"])
-              ], 10, _hoisted_3$2)
+              ], 10, _hoisted_3$3)
             ]),
             _: 1
           }),
@@ -1005,7 +1007,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     class: "min-w-0 max-w-64",
                     onClick: ($event) => handleRowClick(file, $event)
                   }, [
-                    createVNode(_sfc_main$b, {
+                    createVNode(_sfc_main$c, {
                       file,
                       size: __props.size,
                       "is-removable": __props.isRemovable,
@@ -1018,9 +1020,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
-                  ], 8, _hoisted_5$2);
+                  ], 8, _hoisted_5$3);
                 }), 128))
-              ], 8, _hoisted_4$2)
+              ], 8, _hoisted_4$3)
             ]),
             _: 3
           }, 8, ["class"])
@@ -1031,14 +1033,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const CHAT_HISTORY_ACTIVE_INDICATOR_CLASS = "ui-active-indicator";
-const _hoisted_1$3 = ["data-active"];
-const _hoisted_2$2 = { class: "min-w-0 flex-1" };
-const _hoisted_3$1 = { class: "truncate body-14-regular text-content-on-surface-primary" };
-const _hoisted_4$1 = {
+const _hoisted_1$4 = ["data-active"];
+const _hoisted_2$3 = { class: "min-w-0 flex-1" };
+const _hoisted_3$2 = { class: "truncate body-14-regular text-content-on-surface-primary" };
+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$1 = {
+const _hoisted_5$2 = {
   key: 0,
   class: "truncate"
 };
@@ -1053,7 +1055,7 @@ const _hoisted_7$1 = {
 const _hoisted_8 = ["aria-label"];
 const _hoisted_9 = ["aria-label"];
 const _hoisted_10 = ["aria-label"];
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryItem",
     inheritAttrs: false
@@ -1182,11 +1184,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           class: itemClass.value
         }), {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_2$2, [
-              createElementVNode("div", _hoisted_3$1, toDisplayString(props.title), 1),
-              props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            createElementVNode("div", _hoisted_2$3, [
+              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$1, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
+                  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)
                 ])
@@ -1289,12 +1291,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             }))
           ], 42, _hoisted_10))
         ], 34)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$4);
     };
   }
 });
 const baseClass = "flex w-full min-w-0 flex-col p-2";
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryWrapper",
     inheritAttrs: false
@@ -1324,6 +1326,118 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+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({
+  ...{ name: "CkModelSelector" },
+  __name: "CkModelSelector",
+  props: {
+    models: { default: () => [] },
+    selectedModelId: { default: null },
+    disabled: { type: Boolean, default: false },
+    side: { default: "top" },
+    align: { default: "end" },
+    sideOffset: { default: 8 }
+  },
+  emits: ["update:selectedModelId"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labels = useChatKitLabels();
+    const triggerAriaLabel = computed(
+      () => labels.value.modelSelectorAriaLabel ?? defaultChatKitLabels.modelSelectorAriaLabel
+    );
+    const listAriaLabel = computed(
+      () => labels.value.modelSelectorListAriaLabel ?? defaultChatKitLabels.modelSelectorListAriaLabel
+    );
+    const placeholderLabel = computed(
+      () => labels.value.modelSelectorPlaceholder ?? defaultChatKitLabels.modelSelectorPlaceholder
+    );
+    const open = ref(false);
+    const selectedLabel = computed(() => {
+      const match = props.models.find((m) => m.id === props.selectedModelId);
+      return match?.label ?? placeholderLabel.value;
+    });
+    function select(id) {
+      open.value = false;
+      if (id !== props.selectedModelId) emit("update:selectedModelId", id);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiPopover), {
+        open: open.value,
+        "onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(UiPopoverTrigger), { "as-child": "" }, {
+            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",
+                disabled: __props.disabled,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open.value,
+                "aria-label": triggerAriaLabel.value
+              }, [
+                createElementVNode("span", _hoisted_2$2, toDisplayString(selectedLabel.value), 1),
+                createVNode(unref(UiIcon), {
+                  name: "chevron-down",
+                  size: 16,
+                  "aria-hidden": "true"
+                })
+              ], 8, _hoisted_1$3)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(UiPopoverContent), {
+            side: __props.side,
+            align: __props.align,
+            "side-offset": __props.sideOffset,
+            class: "max-h-72 w-56 overflow-y-auto rounded-xl border border-border-surface-default bg-background-surface-floating p-2 text-content-on-surface-primary shadow-md",
+            onOpenAutoFocus: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["prevent"]))
+          }, {
+            default: withCtx(() => [
+              createElementVNode("ul", {
+                class: "flex flex-col gap-1",
+                role: "listbox",
+                "aria-label": listAriaLabel.value
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.models, (model) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: model.id,
+                    role: "presentation"
+                  }, [
+                    createElementVNode("button", {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": model.id === __props.selectedModelId,
+                      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),
+                      model.id === __props.selectedModelId ? (openBlock(), createBlock(unref(UiIcon), {
+                        key: 0,
+                        name: "check",
+                        size: 16,
+                        class: "absolute right-2 text-content-on-surface-primary",
+                        "aria-hidden": "true"
+                      })) : createCommentVNode("", true)
+                    ], 8, _hoisted_4$1)
+                  ]);
+                }), 128))
+              ], 8, _hoisted_3$1)
+            ]),
+            _: 1
+          }, 8, ["side", "align", "side-offset"])
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptActionButton" },
   __name: "CkPromptActionButton",
@@ -1588,7 +1702,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$h, { messages: __props.messages }, {
+      return openBlock(), createBlock(_sfc_main$i, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
           createElementVNode("div", {
             class: normalizeClass({ "ml-8": hasIcon.value })
@@ -1607,7 +1721,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$i, null, createSlots({
+            createVNode(_sfc_main$j, null, createSlots({
               footer: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
                   getMessageText(message) && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -1620,7 +1734,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
-                  createVNode(_sfc_main$d, {
+                  createVNode(_sfc_main$e, {
                     content: getMessageText(message),
                     classes: __props.agentMarkdownClasses
                   }, createSlots({ _: 2 }, [
@@ -1746,7 +1860,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$8, {
+        createVNode(_sfc_main$9, {
           class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
           style: normalizeStyle(
             isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
@@ -1765,7 +1879,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 edit: () => emit("edit", conversation),
                 delete: () => emit("delete", conversation)
               }, () => [
-                createVNode(_sfc_main$9, {
+                createVNode(_sfc_main$a, {
                   as: "a",
                   href: hrefFor(conversation),
                   "is-active": conversation.id === props.activeId,
@@ -1888,7 +2002,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "stop-icon", {}, () => [
-                  createVNode(_sfc_main$j)
+                  createVNode(_sfc_main$k)
                 ])
               ]),
               _: 3
@@ -1898,7 +2012,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "send-icon", {}, () => [
-                  createVNode(_sfc_main$k)
+                  createVNode(_sfc_main$l)
                 ])
               ]),
               _: 3
@@ -1928,24 +2042,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   CkCopyMessageActionButton as C,
-  _sfc_main$i as _,
+  _sfc_main$j as _,
   _sfc_main$2 as a,
-  _sfc_main$h as b,
+  _sfc_main$i as b,
   CkFeedbackButton as c,
   CkFeedbackDialog as d,
-  _sfc_main$a as e,
+  _sfc_main$b as e,
   _sfc_main$1 as f,
-  _sfc_main$9 as g,
-  _sfc_main$8 as h,
+  _sfc_main$a as g,
+  _sfc_main$9 as h,
   _sfc_main as i,
-  _sfc_main$d as j,
-  _sfc_main$g as k,
-  _sfc_main$7 as l,
-  _sfc_main$5 as m,
-  _sfc_main$4 as n,
-  _sfc_main$6 as o,
-  _sfc_main$k as p,
-  _sfc_main$j as q,
-  CkUserMessage as r,
-  formatRelativeTime as s
+  _sfc_main$e as j,
+  _sfc_main$h as k,
+  _sfc_main$8 as l,
+  _sfc_main$7 as m,
+  _sfc_main$5 as n,
+  _sfc_main$4 as o,
+  _sfc_main$6 as p,
+  _sfc_main$l as q,
+  _sfc_main$k as r,
+  CkUserMessage as s,
+  formatRelativeTime as t
 };