@aleph-alpha/chat-kit 1.12.0 → 1.14.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-C1Jnn1fK.js → CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js}

@@ -1,7 +1,7 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, computed, normalizeClass, useAttrs, useSlots, withModifiers, resolveDynamicComponent, toRefs, h, useId, useTemplateRef, createTextVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
-import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-ftC52m7f.js";
-import { UiButton, UiTooltip, UiIcon, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
-const _hoisted_1$a = {
+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-BxNkTzr2.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 _hoisted_1$b = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -12,31 +12,31 @@ const _hoisted_1$a = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   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: "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$9 = {
+const _hoisted_1$a = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", {
           d: "M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z",
           fill: "#1D1D1B"
@@ -45,13 +45,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "flex w-full items-start gap-2" };
-const _hoisted_2$5 = {
+const _hoisted_1$9 = { class: "flex w-full items-start gap-2" };
+const _hoisted_2$6 = {
   key: 0,
   class: "flex flex-shrink-0 items-center justify-center"
 };
-const _hoisted_3$4 = { class: "text-core-content-primary flex min-w-0 flex-1 flex-col gap-2" };
-const _hoisted_4$3 = {
+const _hoisted_3$5 = { class: "text-core-content-primary flex min-w-0 flex-1 flex-col gap-2" };
+const _hoisted_4$4 = {
   key: 0,
   class: "text-sm font-bold"
 };
@@ -59,17 +59,17 @@ const _hoisted_5$3 = {
   key: 1,
   class: "flex items-center"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
-        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
           renderSlot(_ctx.$slots, "icon")
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$4, [
-          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$3, [
+        createElementVNode("div", _hoisted_3$5, [
+          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$4, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true),
           createElementVNode("div", null, [
@@ -83,16 +83,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["data-message-row"];
-const _hoisted_2$4 = {
+const _hoisted_1$8 = ["data-message-row"];
+const _hoisted_2$5 = {
   key: 0,
   class: "flex justify-end"
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   key: 1,
   class: "flex justify-start"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
   __name: "CkConversationLayout",
   props: {
@@ -232,12 +232,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             key: message.id,
             "data-message-row": message.role
           }, [
-            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+            message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
               renderSlot(_ctx.$slots, "user-message", { message })
-            ])) : (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            ])) : (openBlock(), createElementBlock("div", _hoisted_3$4, [
               renderSlot(_ctx.$slots, "agent-message", { message })
             ]))
-          ], 8, _hoisted_1$7);
+          ], 8, _hoisted_1$8);
         }), 128)),
         hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -248,7 +248,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkMessageActionButton"
   },
@@ -272,11 +272,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkCopyMessageActionButton"
   },
@@ -333,7 +333,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         "delay-duration": 0
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$f), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
+          createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
             disabled: __props.disabled,
             onClick: handleClick
           }), {
@@ -360,7 +360,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 16, ["disabled"]),
-          createElementVNode("span", _hoisted_1$6, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
+          createElementVNode("span", _hoisted_1$7, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
         ]),
         _: 1
       }, 8, ["open", "content"]);
@@ -374,9 +374,9 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-f77a1193"]]);
-const _hoisted_1$5 = ["aria-label"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-f77a1193"]]);
+const _hoisted_1$6 = ["aria-label"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFeedbackButton"
   },
@@ -431,7 +431,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$f), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
+            createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
               "aria-pressed": isUpSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isUpDisabled.value,
@@ -461,7 +461,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           "delay-duration": 0
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$f), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
+            createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
               "aria-pressed": isDownSelected.value,
               "aria-disabled": __props.locked || void 0,
               disabled: isDownDisabled.value,
@@ -484,12 +484,318 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["content"])
-      ], 8, _hoisted_1$5);
+      ], 8, _hoisted_1$6);
     };
   }
 });
-const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-245705b8"]]);
+const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-245705b8"]]);
+const defaultMarkdownClasses = {
+  p: "my-1 leading-7",
+  a: "underline underline-offset-4",
+  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",
+  code: "rounded px-1.5 py-0.5",
+  blockquote: "my-2 border-l-2 pl-4 italic",
+  table: "my-2 w-full border-collapse",
+  th: "border p-2 text-left font-semibold",
+  td: "border p-2",
+  hr: "my-4"
+};
+function domToVNode(node, slots, classes) {
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  const el = node;
+  if (el.tagName === "PRE" && el.firstElementChild?.tagName === "CODE") {
+    const codeEl = el.firstElementChild;
+    const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? "";
+    const code = codeEl.textContent ?? "";
+    if (slots["code-block"]) {
+      return slots["code-block"]({ code, language });
+    }
+  }
+  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes)).filter((c) => c != null);
+  const attrs = {};
+  for (const attr of el.attributes) {
+    attrs[attr.name] = attr.value;
+  }
+  const tag = el.tagName.toLowerCase();
+  const customClass = classes[tag];
+  if (customClass) {
+    attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
+  }
+  return h(tag, attrs, children);
+}
+const _sfc_main$d = defineComponent({
+  name: "CkMarkdownRenderer",
+  props: {
+    content: { type: String, required: true },
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    plugins: { type: Array, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { content, plugins } = toRefs(props);
+    const { html } = useMarkdownParser(content, plugins);
+    const parsedNodes = computed(() => {
+      const raw = html.value;
+      if (!raw) return [];
+      const doc = new DOMParser().parseFromString(raw, "text/html");
+      return Array.from(doc.body.childNodes);
+    });
+    const mergedClasses = computed(() => ({
+      ...defaultMarkdownClasses,
+      ...props.classes
+    }));
+    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 _hoisted_1$5 = {
+  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 = {
+  class: "self-end text-sm text-content-on-surface-muted tabular-nums",
+  "aria-live": "polite"
+};
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CkFeedbackDialog"
+  },
+  __name: "CkFeedbackDialog",
+  props: {
+    open: { type: Boolean, default: false },
+    sentiment: {},
+    responseText: { default: "" },
+    reasons: {},
+    maxFreeTextLength: { default: 250 },
+    submitting: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    titlePositive: {},
+    titleNegative: {},
+    responseHeading: {},
+    description: {},
+    otherLabel: {},
+    otherTooltip: {},
+    freeTextPlaceholder: {},
+    cancelLabel: {},
+    submitLabel: {}
+  },
+  emits: ["update:open", "submit", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const labels = useChatKitLabels();
+    const title = computed(() => {
+      if (__props.sentiment === "positive") {
+        return __props.titlePositive ?? labels.value.feedbackDialogTitlePositive ?? defaultChatKitLabels.feedbackDialogTitlePositive;
+      }
+      return __props.titleNegative ?? labels.value.feedbackDialogTitleNegative ?? defaultChatKitLabels.feedbackDialogTitleNegative;
+    });
+    const responseHeading = computed(
+      () => __props.responseHeading ?? labels.value.feedbackDialogResponseHeading ?? defaultChatKitLabels.feedbackDialogResponseHeading
+    );
+    const description = computed(
+      () => __props.description ?? labels.value.feedbackDialogDescription ?? defaultChatKitLabels.feedbackDialogDescription
+    );
+    const otherLabel = computed(
+      () => __props.otherLabel ?? labels.value.feedbackDialogOtherLabel ?? defaultChatKitLabels.feedbackDialogOtherLabel
+    );
+    const otherTooltip = computed(
+      () => __props.otherTooltip ?? labels.value.feedbackDialogOtherTooltip ?? defaultChatKitLabels.feedbackDialogOtherTooltip
+    );
+    const freeTextPlaceholder = computed(
+      () => __props.freeTextPlaceholder ?? labels.value.feedbackDialogFreeTextPlaceholder ?? defaultChatKitLabels.feedbackDialogFreeTextPlaceholder
+    );
+    const cancelLabel = computed(
+      () => __props.cancelLabel ?? labels.value.feedbackDialogCancelLabel ?? defaultChatKitLabels.feedbackDialogCancelLabel
+    );
+    const submitLabel = computed(
+      () => __props.submitLabel ?? labels.value.feedbackDialogSubmitLabel ?? defaultChatKitLabels.feedbackDialogSubmitLabel
+    );
+    const selectedReason = ref("");
+    const freeText = ref("");
+    const freeTextId = useId();
+    watch(
+      () => __props.open,
+      (isOpen, wasOpen) => {
+        if (isOpen && !wasOpen) {
+          selectedReason.value = "";
+          freeText.value = "";
+        }
+      }
+    );
+    const showResponseColumn = computed(
+      () => typeof __props.responseText === "string" && __props.responseText !== ""
+    );
+    const characterCount = computed(() => freeText.value.length);
+    const canSubmit = computed(
+      () => !__props.disabled && !__props.submitting && (selectedReason.value !== "" || freeText.value.trim() !== "")
+    );
+    function handleOpenChange(next) {
+      if (!next && (__props.submitting || __props.disabled)) {
+        return;
+      }
+      emit("update:open", next);
+      if (!next && __props.open) {
+        emit("cancel");
+      }
+    }
+    function handleCancel() {
+      if (__props.disabled || __props.submitting) {
+        return;
+      }
+      emit("cancel");
+      emit("update:open", false);
+    }
+    function handleSubmit() {
+      if (!canSubmit.value) {
+        return;
+      }
+      emit("submit", {
+        sentiment: __props.sentiment,
+        reason: selectedReason.value === "" ? null : selectedReason.value,
+        reasonText: freeText.value.trim()
+      });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiDialog), {
+        open: __props.open,
+        "onUpdate:open": handleOpenChange
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(UiDialogContent), {
+            title: title.value,
+            "max-width": "max-w-4xl",
+            class: "ck-feedback-dialog",
+            "show-close-button": !(__props.submitting || __props.disabled)
+          }, {
+            actions: withCtx(() => [
+              createVNode(unref(UiButton), {
+                type: "button",
+                variant: "outline",
+                "aria-label": cancelLabel.value,
+                disabled: __props.disabled || __props.submitting,
+                onClick: handleCancel
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(cancelLabel.value), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "disabled"]),
+              createVNode(unref(UiButton), {
+                type: "button",
+                variant: "default",
+                "aria-label": submitLabel.value,
+                loading: __props.submitting,
+                disabled: !canSubmit.value,
+                onClick: handleSubmit
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(submitLabel.value), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "loading", "disabled"])
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(UiDialogDescription), { class: "sr-only" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(description.value), 1)
+                ]),
+                _: 1
+              }),
+              createElementVNode("div", {
+                class: normalizeClass([
+                  "grid gap-12",
+                  showResponseColumn.value ? "grid-cols-2" : "grid-cols-1"
+                ])
+              }, [
+                showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$5, [
+                  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"])
+                  ])
+                ])) : createCommentVNode("", true),
+                createElementVNode("section", _hoisted_3$3, [
+                  createVNode(unref(UiToggleGroup), {
+                    modelValue: selectedReason.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReason.value = $event),
+                    type: "single",
+                    variant: "outline",
+                    disabled: __props.disabled || __props.submitting,
+                    class: "grid grid-cols-2 gap-4",
+                    "aria-label": title.value
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.reasons, (reason) => {
+                        return openBlock(), createBlock(unref(UiToggleGroupItem), {
+                          key: reason.code,
+                          value: reason.code,
+                          class: "ck-feedback-dialog__chip"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(reason.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "disabled", "aria-label"]),
+                  createVNode(unref(UiField), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(UiFieldLabel), {
+                        for: unref(freeTextId),
+                        tooltip: otherTooltip.value
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(otherLabel.value), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["for", "tooltip"]),
+                      createVNode(unref(UiTextarea), {
+                        id: unref(freeTextId),
+                        modelValue: freeText.value,
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => freeText.value = $event),
+                        name: "ck-feedback-dialog-free-text",
+                        placeholder: freeTextPlaceholder.value,
+                        disabled: __props.disabled || __props.submitting,
+                        maxlength: __props.maxFreeTextLength,
+                        rows: "3"
+                      }, null, 8, ["id", "modelValue", "placeholder", "disabled", "maxlength"]),
+                      createElementVNode("div", _hoisted_4$3, toDisplayString(characterCount.value) + "/" + toDisplayString(__props.maxFreeTextLength), 1)
+                    ]),
+                    _: 1
+                  })
+                ])
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["title", "show-close-button"])
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-eaffd2d5"]]);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemRow",
     inheritAttrs: false
@@ -537,7 +843,7 @@ 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$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkFileItemsList"
   },
@@ -594,7 +900,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$b, {
               file,
               size: __props.size,
               "is-removable": __props.isRemovable,
@@ -658,7 +964,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$b, {
                       file,
                       size: __props.size,
                       "is-removable": __props.isRemovable,
@@ -706,7 +1012,7 @@ const _hoisted_7$1 = {
 const _hoisted_8 = ["aria-label"];
 const _hoisted_9 = ["aria-label"];
 const _hoisted_10 = ["aria-label"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryItem",
     inheritAttrs: false
@@ -947,7 +1253,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$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "CkHistoryWrapper",
     inheritAttrs: false
@@ -977,77 +1283,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const defaultMarkdownClasses = {
-  p: "my-1 leading-7",
-  a: "underline underline-offset-4",
-  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",
-  code: "rounded px-1.5 py-0.5",
-  blockquote: "my-2 border-l-2 pl-4 italic",
-  table: "my-2 w-full border-collapse",
-  th: "border p-2 text-left font-semibold",
-  td: "border p-2",
-  hr: "my-4"
-};
-function domToVNode(node, slots, classes) {
-  if (node.nodeType === Node.TEXT_NODE) return node.textContent;
-  if (node.nodeType !== Node.ELEMENT_NODE) return null;
-  const el = node;
-  if (el.tagName === "PRE" && el.firstElementChild?.tagName === "CODE") {
-    const codeEl = el.firstElementChild;
-    const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? "";
-    const code = codeEl.textContent ?? "";
-    if (slots["code-block"]) {
-      return slots["code-block"]({ code, language });
-    }
-  }
-  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes)).filter((c) => c != null);
-  const attrs = {};
-  for (const attr of el.attributes) {
-    attrs[attr.name] = attr.value;
-  }
-  const tag = el.tagName.toLowerCase();
-  const customClass = classes[tag];
-  if (customClass) {
-    attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
-  }
-  return h(tag, attrs, children);
-}
-const _sfc_main$8 = defineComponent({
-  name: "CkMarkdownRenderer",
-  props: {
-    content: { type: String, required: true },
-    classes: {
-      type: Object,
-      default: () => ({})
-    },
-    plugins: { type: Array, default: void 0 }
-  },
-  setup(props, { slots }) {
-    const { content, plugins } = toRefs(props);
-    const { html } = useMarkdownParser(content, plugins);
-    const parsedNodes = computed(() => {
-      const raw = html.value;
-      if (!raw) return [];
-      const doc = new DOMParser().parseFromString(raw, "text/html");
-      return Array.from(doc.body.childNodes);
-    });
-    const mergedClasses = computed(() => ({
-      ...defaultMarkdownClasses,
-      ...props.classes
-    }));
-    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 _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkPromptActionButton" },
   __name: "CkPromptActionButton",
@@ -1218,26 +1453,78 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "bg-background-surface-primary inline-flex max-w-[600px] flex-col items-end justify-start gap-4 rounded-xl p-6" };
-const _hoisted_2 = { class: "text-content-on-surface-primary justify-start self-stretch text-base leading-6 font-normal" };
+const _hoisted_1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
+const _hoisted_2 = ["aria-expanded"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkUserMessage" },
   __name: "CkUserMessage",
   props: {
-    message: {}
+    message: { default: void 0 },
+    collapsedLines: { default: 0 }
   },
   setup(__props) {
+    const props = __props;
+    const labels = useChatKitLabels();
+    const showMoreLabel = computed(
+      () => labels.value.userMessageShowMore ?? defaultChatKitLabels.userMessageShowMore
+    );
+    const showLessLabel = computed(
+      () => labels.value.userMessageShowLess ?? defaultChatKitLabels.userMessageShowLess
+    );
+    const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
+    const contentRef = ref(null);
+    const expanded = ref(false);
+    const isOverflowing = ref(false);
+    function measure() {
+      const el = contentRef.value;
+      if (!el || !clampEnabled.value || expanded.value) return;
+      isOverflowing.value = el.scrollHeight - el.clientHeight > 1;
+    }
+    function toggle() {
+      expanded.value = !expanded.value;
+    }
+    let resizeObserver;
+    onMounted(() => {
+      nextTick(measure);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => measure());
+        if (contentRef.value) resizeObserver.observe(contentRef.value);
+      }
+    });
+    onBeforeUnmount(() => resizeObserver?.disconnect());
+    watch([() => props.message, () => props.collapsedLines], () => {
+      expanded.value = false;
+      nextTick(measure);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", {
+          ref_key: "contentRef",
+          ref: contentRef,
+          class: normalizeClass(["ck-user-message__content text-content-on-surface-muted min-w-0 max-w-full self-stretch text-lg leading-7 font-medium break-words whitespace-pre-wrap [overflow-wrap:anywhere]", {
+            "ck-user-message__content--clamped": clampEnabled.value && !expanded.value,
+            "ck-user-message__content--faded": clampEnabled.value && !expanded.value && isOverflowing.value
+          }]),
+          style: normalizeStyle(
+            clampEnabled.value ? { "--ck-collapsed-lines": __props.collapsedLines } : void 0
+          )
+        }, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.message), 1)
-          ])
-        ])
+          ], true)
+        ], 6),
+        clampEnabled.value && isOverflowing.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-expanded": expanded.value,
+          class: "ck-user-message__toggle label-12-medium text-content-on-surface-primary bg-background-surface-floating focus-visible:ring-ring self-center rounded-3xl px-3 py-2 focus-visible:ring-2 focus-visible:outline-none",
+          onClick: toggle
+        }, toDisplayString(expanded.value ? showLessLabel.value : showMoreLabel.value), 9, _hoisted_2)) : createCommentVNode("", true)
       ]);
     };
   }
 });
+const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c759a863"]]);
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversation" },
   __name: "CkConversation",
@@ -1260,13 +1547,13 @@ 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$g, { messages: __props.messages }, {
+      return openBlock(), createBlock(_sfc_main$h, { messages: __props.messages }, {
         "user-message": withCtx(({ message }) => [
           createElementVNode("div", {
             class: normalizeClass({ "ml-8": hasIcon.value })
           }, [
             renderSlot(_ctx.$slots, "user-message", { message }, () => [
-              createVNode(_sfc_main$3, null, {
+              createVNode(CkUserMessage, null, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "user-message-content", { message }, () => [
                     createTextVNode(toDisplayString(getMessageText(message)), 1)
@@ -1279,7 +1566,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$h, null, createSlots({
+            createVNode(_sfc_main$i, null, createSlots({
               footer: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
                   getMessageText(message) && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -1292,7 +1579,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
-                  createVNode(_sfc_main$8, {
+                  createVNode(_sfc_main$d, {
                     content: getMessageText(message),
                     classes: __props.agentMarkdownClasses
                   }, createSlots({ _: 2 }, [
@@ -1400,7 +1687,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emit("select", c, event);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, null, {
+      return openBlock(), createBlock(_sfc_main$8, null, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(props.conversations, (conversation) => {
             return renderSlot(_ctx.$slots, "item", {
@@ -1413,7 +1700,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               edit: () => emit("edit", conversation),
               delete: () => emit("delete", conversation)
             }, () => [
-              createVNode(_sfc_main$a, {
+              createVNode(_sfc_main$9, {
                 as: "a",
                 href: hrefFor(conversation),
                 "is-active": conversation.id === props.activeId,
@@ -1522,7 +1809,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "stop-icon", {}, () => [
-                  createVNode(_sfc_main$i)
+                  createVNode(_sfc_main$j)
                 ])
               ]),
               _: 3
@@ -1532,7 +1819,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "send-icon", {}, () => [
-                  createVNode(_sfc_main$j)
+                  createVNode(_sfc_main$k)
                 ])
               ]),
               _: 3
@@ -1562,22 +1849,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   CkCopyMessageActionButton as C,
-  _sfc_main$h as _,
+  _sfc_main$i as _,
   _sfc_main$2 as a,
-  _sfc_main$g as b,
+  _sfc_main$h as b,
   CkFeedbackButton as c,
-  _sfc_main$b as d,
-  _sfc_main$1 as e,
-  _sfc_main$a as f,
+  CkFeedbackDialog as d,
+  _sfc_main$a as e,
+  _sfc_main$1 as f,
   _sfc_main$9 as g,
-  _sfc_main as h,
-  _sfc_main$8 as i,
-  _sfc_main$f as j,
-  _sfc_main$7 as k,
-  _sfc_main$5 as l,
-  _sfc_main$4 as m,
-  _sfc_main$6 as n,
-  _sfc_main$j as o,
-  _sfc_main$i as p,
-  _sfc_main$3 as q
+  _sfc_main$8 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
 };