@orvui/vue 0.0.0-stage → 0.1.1

package/dist/message-bubble-BWfWrrcc.js

@@ -0,0 +1,207 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { o as t, r as n, u as r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { r as a, t as o } from "./shared-DAEawhBJ.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, h as m, inject as h, mergeProps as g, normalizeClass as _, openBlock as v, provide as y, ref as b, renderSlot as x, resolveDynamicComponent as S, unref as C, useAttrs as w, useId as T, useSlots as E, withCtx as D } from "vue";
+import { motion as O } from "motion-v";
+import { ChevronDown as k } from "lucide-vue-next";
+// src/agents/message/src/context.ts
+var A = Symbol("orvui-message"), j = Symbol("orvui-bubble"), M = Symbol("orvui-bubble-layout"), N = /* @__PURE__ */ p({
+	__name: "MessageBubble",
+	props: {
+		variant: { default: "soft" },
+		align: {},
+		animateIn: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let r = n, a = h(A, s(() => "assistant")), o = s(() => r.align ?? (a.value === "user" ? "end" : "start")), l = s(() => ({
+			align: o.value,
+			variant: r.variant,
+			animateIn: r.animateIn
+		}));
+		y(j, l);
+		let u = e();
+		return (e, r) => (v(), c(C(O).div, {
+			"data-slot": "message-bubble",
+			"data-align": o.value,
+			"data-variant": n.variant,
+			class: _(C(i)("group/bubble flex w-full flex-col", o.value === "end" ? "items-end" : "items-start")),
+			exit: {
+				opacity: 0,
+				y: -3,
+				scale: .99
+			},
+			transition: C(u) ? { duration: 0 } : C(t)
+		}, {
+			default: D(() => [x(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"data-align",
+			"data-variant",
+			"class",
+			"transition"
+		]));
+	}
+}), P = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "MessageBubbleContent",
+	props: { as: { default: "div" } },
+	setup(r) {
+		let a = r, o = h(j, s(() => ({
+			align: "start",
+			variant: "soft",
+			animateIn: !1
+		}))), u = e(), d = b(0);
+		y(M, () => {
+			d.value++;
+		});
+		let p = {
+			solid: "bg-foreground",
+			soft: "bg-muted",
+			tint: "bg-muted",
+			outline: "border border-border/70 bg-background",
+			ghost: "",
+			danger: "bg-destructive/10"
+		}, m = s(() => i(o.value.variant === "solid" && "text-background", o.value.variant === "danger" && "text-destructive", o.value.variant === "ghost" && "w-full max-w-none rounded-none px-0 py-0", ["button", "a"].includes(a.as) && "cursor-pointer text-left outline-none transition-[background-color,color,transform] duration-150 hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]"));
+		return (e, a) => (v(), c(S(r.as), g({ "data-slot": "message-bubble-content" }, e.$attrs, { class: C(i)("relative z-0 min-w-9 max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-6 text-foreground [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-background/60 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-background/60 [&_pre]:p-3 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", m.value, e.$attrs.class) }), {
+			default: D(() => [C(o).variant === "ghost" ? l("", !0) : (v(), c(C(O).span, {
+				key: 0,
+				"aria-hidden": "true",
+				layout: !C(u) && "size",
+				"layout-dependency": d.value,
+				initial: C(o).animateIn && !C(u) ? {
+					opacity: 0,
+					scale: .92
+				} : !1,
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				transition: C(u) ? { duration: 0 } : {
+					opacity: {
+						duration: .12,
+						ease: C(n)
+					},
+					scale: {
+						type: "spring",
+						stiffness: 520,
+						damping: 27,
+						mass: .52
+					},
+					layout: C(t)
+				},
+				class: _(C(i)("pointer-events-none absolute inset-0 -z-10 rounded-[inherit]", C(o).align === "end" ? "origin-bottom-right" : "origin-bottom-left", p[C(o).variant]))
+			}, null, 8, [
+				"layout",
+				"layout-dependency",
+				"initial",
+				"transition",
+				"class"
+			])), f(C(O).div, {
+				class: "relative",
+				initial: C(o).animateIn ? { opacity: 0 } : !1,
+				animate: { opacity: 1 },
+				transition: {
+					duration: .12,
+					ease: C(n),
+					delay: C(u) ? 0 : .04
+				}
+			}, {
+				default: D(() => [x(e.$slots, "default")]),
+				_: 3
+			}, 8, ["initial", "transition"])]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), F = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "MessageBubbleGroup",
+	props: { spacing: { default: "compact" } },
+	setup(e) {
+		let t = e, n = E(), r = w(), a = {
+			compact: "gap-1.5",
+			default: "gap-3"
+		}, o = () => m("div", {
+			"data-slot": "message-bubble-group",
+			...r,
+			class: i("flex w-full flex-col", a[t.spacing === "compact" ? "compact" : "default"], r.class)
+		}, [x(n, "default")]);
+		return (e, t) => (v(), c(o));
+	}
+}), I = ["data-state"], L = ["id"], R = ["aria-expanded", "aria-controls"], z = /* @__PURE__ */ p({
+	__name: "MessageBubbleCollapsible",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedLines: { default: 4 },
+		moreLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Show more"
+		},
+		lessLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Show less"
+		},
+		contentClassName: {},
+		triggerClassName: {}
+	},
+	emits: ["update:open", "openChange"],
+	setup(t, { emit: n }) {
+		let c = t, l = n, p = h(M, () => {}), m = a(() => c.open, c.defaultOpen, (e) => {
+			p(), l("update:open", e), l("openChange", e);
+		}), g = T(), y = e(), b = s(() => ({
+			2: "line-clamp-2",
+			3: "line-clamp-3",
+			4: "line-clamp-4",
+			5: "line-clamp-5",
+			6: "line-clamp-6"
+		})[c.collapsedLines]);
+		return (e, n) => (v(), u("div", {
+			"data-slot": "message-bubble-collapsible",
+			"data-state": C(m) ? "open" : "closed",
+			class: "w-full"
+		}, [d("div", {
+			id: C(g),
+			class: _(C(i)("transition-[mask-image] duration-200", !C(m) && b.value, !C(m) && "[mask-image:linear-gradient(to_bottom,#000_68%,transparent_100%)]", t.contentClassName))
+		}, [x(e.$slots, "default")], 10, L), d("button", {
+			type: "button",
+			"aria-expanded": C(m),
+			"aria-controls": C(g),
+			onClick: n[0] ||= (e) => m.value = !C(m),
+			class: _(C(i)("mt-2 inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", t.triggerClassName))
+		}, [d("span", null, [f(C(o), { node: C(m) ? t.lessLabel : t.moreLabel }, null, 8, ["node"])]), f(C(O).span, {
+			"aria-hidden": "true",
+			animate: { rotate: C(m) ? 180 : 0 },
+			transition: C(y) ? { duration: 0 } : C(r)
+		}, {
+			default: D(() => [f(C(k), { class: "size-3.5" })]),
+			_: 1
+		}, 8, ["animate", "transition"])], 10, R)], 8, I));
+	}
+});
+export { j as a, N as i, F as n, M as o, P as r, A as s, z as t };
+
+//# sourceMappingURL=message-bubble-BWfWrrcc.js.map

package/dist/message-bubble-BWfWrrcc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bubble-BWfWrrcc.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_renderSlot","_sfc_main","$attrs","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","_normalizeClass","_createCommentVNode","_createVNode","_renderSlot","_sfc_main","_useSlots","_openBlock","_createBlock","_sfc_main","_openBlock","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","_withCtx","_sfc_main","useReducedMotion","SPRING_LAYOUT","EASE_OUT","SPRING_SWAP","cn","useControllable","RenderNode","messageKey","bubbleKey","bubbleLayoutKey","MessageBubble_default","defineComponent","props","__props","parent","inject","computed","alignment","context","reduced","openBlock","createBlock","unref","motion","normalizeClass","withCtx","renderSlot","_ctx","MessageBubbleContent_default","revision","ref","variants","classes","resolveDynamicComponent","mergeProps","createCommentVNode","createVNode","MessageBubbleGroup_default","slots","useSlots","attrs","useAttrs","gaps","RenderFrame","h","_hoisted_1","_hoisted_2","_hoisted_3","MessageBubbleCollapsible_default","__emit","emit","invalidate","expanded","value","identity","useId","clamp","createElementBlock","createElementVNode","_cache","ChevronDown"],"sources":["../src/agents/message/src/context.ts","../src/agents/message-bubble/src/context.ts","../src/agents/message-bubble/src/MessageBubble.vue","../src/agents/message-bubble/src/MessageBubble.vue","../src/agents/message-bubble/src/MessageBubbleContent.vue","../src/agents/message-bubble/src/MessageBubbleContent.vue","../src/agents/message-bubble/src/MessageBubbleGroup.vue","../src/agents/message-bubble/src/MessageBubbleGroup.vue","../src/agents/message-bubble/src/MessageBubbleCollapsible.vue","../src/agents/message-bubble/src/MessageBubbleCollapsible.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from \"vue\";\nexport type MessageFrom = \"user\" | \"assistant\";\nexport const messageKey = Symbol(\"orvui-message\") as InjectionKey<\n  ComputedRef<MessageFrom>\n>;\n","import type { ComputedRef, InjectionKey } from \"vue\";\nexport type MessageBubbleVariant =\n  \"solid\" | \"soft\" | \"tint\" | \"outline\" | \"ghost\" | \"danger\";\nexport type MessageBubbleAlign = \"start\" | \"end\";\ninterface BubbleContext {\n  align: MessageBubbleAlign;\n  variant: MessageBubbleVariant;\n  animateIn: boolean;\n}\nexport const bubbleKey = Symbol(\"orvui-bubble\") as InjectionKey<\n  ComputedRef<BubbleContext>\n>;\nexport const bubbleLayoutKey = Symbol(\"orvui-bubble-layout\") as InjectionKey<\n  () => void\n>;\n","<script setup lang=\"ts\">\nimport { computed, inject, provide } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { messageKey } from \"../../message/src/context\";\nimport {\n  bubbleKey,\n  type MessageBubbleAlign,\n  type MessageBubbleVariant,\n} from \"./context\";\nconst props = withDefaults(\n  defineProps<{\n    variant?: MessageBubbleVariant;\n    align?: MessageBubbleAlign;\n    animateIn?: boolean;\n  }>(),\n  { variant: \"soft\", animateIn: false },\n);\nconst parent = inject(\n  messageKey,\n  computed(() => \"assistant\" as const),\n);\nconst alignment = computed(\n  () => props.align ?? (parent.value === \"user\" ? \"end\" : \"start\"),\n);\nconst context = computed(() => ({\n  align: alignment.value,\n  variant: props.variant,\n  animateIn: props.animateIn,\n}));\nprovide(bubbleKey, context);\nconst reduced = useReducedMotion();\n</script>\n<template>\n  <motion.div\n    data-slot=\"message-bubble\"\n    :data-align=\"alignment\"\n    :data-variant=\"variant\"\n    :class=\"\n      cn(\n        'group/bubble flex w-full flex-col',\n        alignment === 'end' ? 'items-end' : 'items-start',\n      )\n    \"\n    :exit=\"{ opacity: 0, y: -3, scale: 0.99 }\"\n    :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\"\n    ><slot\n  /></motion.div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, provide } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { messageKey } from \"../../message/src/context\";\nimport {\n  bubbleKey,\n  type MessageBubbleAlign,\n  type MessageBubbleVariant,\n} from \"./context\";\nconst props = withDefaults(\n  defineProps<{\n    variant?: MessageBubbleVariant;\n    align?: MessageBubbleAlign;\n    animateIn?: boolean;\n  }>(),\n  { variant: \"soft\", animateIn: false },\n);\nconst parent = inject(\n  messageKey,\n  computed(() => \"assistant\" as const),\n);\nconst alignment = computed(\n  () => props.align ?? (parent.value === \"user\" ? \"end\" : \"start\"),\n);\nconst context = computed(() => ({\n  align: alignment.value,\n  variant: props.variant,\n  animateIn: props.animateIn,\n}));\nprovide(bubbleKey, context);\nconst reduced = useReducedMotion();\n</script>\n<template>\n  <motion.div\n    data-slot=\"message-bubble\"\n    :data-align=\"alignment\"\n    :data-variant=\"variant\"\n    :class=\"\n      cn(\n        'group/bubble flex w-full flex-col',\n        alignment === 'end' ? 'items-end' : 'items-start',\n      )\n    \"\n    :exit=\"{ opacity: 0, y: -3, scale: 0.99 }\"\n    :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\"\n    ><slot\n  /></motion.div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, provide, ref, type Component } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { bubbleKey, bubbleLayoutKey } from \"./context\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(defineProps<{ as?: string | Component }>(), {\n  as: \"div\",\n});\nconst context = inject(\n  bubbleKey,\n  computed(() => ({\n    align: \"start\" as const,\n    variant: \"soft\" as const,\n    animateIn: false,\n  })),\n);\nconst reduced = useReducedMotion();\nconst revision = ref(0);\nprovide(bubbleLayoutKey, () => {\n  revision.value++;\n});\nconst variants = {\n  solid: \"bg-foreground\",\n  soft: \"bg-muted\",\n  tint: \"bg-muted\",\n  outline: \"border border-border/70 bg-background\",\n  ghost: \"\",\n  danger: \"bg-destructive/10\",\n};\nconst classes = computed(() =>\n  cn(\n    context.value.variant === \"solid\" && \"text-background\",\n    context.value.variant === \"danger\" && \"text-destructive\",\n    context.value.variant === \"ghost\" &&\n      \"w-full max-w-none rounded-none px-0 py-0\",\n    [\"button\", \"a\"].includes(props.as as string) &&\n      \"cursor-pointer text-left outline-none transition-[background-color,color,transform] duration-150 hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]\",\n  ),\n);\n</script>\n<template>\n  <component\n    :is=\"as\"\n    data-slot=\"message-bubble-content\"\n    v-bind=\"$attrs\"\n    :class=\"\n      cn(\n        'relative z-0 min-w-9 max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-6 text-foreground [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-background/60 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-background/60 [&_pre]:p-3 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5',\n        classes,\n        $attrs.class,\n      )\n    \"\n  >\n    <motion.span\n      v-if=\"context.variant !== 'ghost'\"\n      aria-hidden=\"true\"\n      :layout=\"reduced ? false : 'size'\"\n      :layout-dependency=\"revision\"\n      :initial=\"\n        context.animateIn && !reduced ? { opacity: 0, scale: 0.92 } : false\n      \"\n      :animate=\"{ opacity: 1, scale: 1 }\"\n      :transition=\"\n        reduced\n          ? { duration: 0 }\n          : {\n              opacity: { duration: 0.12, ease: EASE_OUT },\n              scale: {\n                type: 'spring',\n                stiffness: 520,\n                damping: 27,\n                mass: 0.52,\n              },\n              layout: SPRING_LAYOUT,\n            }\n      \"\n      :class=\"\n        cn(\n          'pointer-events-none absolute inset-0 -z-10 rounded-[inherit]',\n          context.align === 'end'\n            ? 'origin-bottom-right'\n            : 'origin-bottom-left',\n          variants[context.variant],\n        )\n      \"\n    />\n    <motion.div\n      class=\"relative\"\n      :initial=\"context.animateIn ? { opacity: 0 } : false\"\n      :animate=\"{ opacity: 1 }\"\n      :transition=\"{\n        duration: 0.12,\n        ease: EASE_OUT,\n        delay: reduced ? 0 : 0.04,\n      }\"\n      ><slot\n    /></motion.div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, provide, ref, type Component } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { bubbleKey, bubbleLayoutKey } from \"./context\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(defineProps<{ as?: string | Component }>(), {\n  as: \"div\",\n});\nconst context = inject(\n  bubbleKey,\n  computed(() => ({\n    align: \"start\" as const,\n    variant: \"soft\" as const,\n    animateIn: false,\n  })),\n);\nconst reduced = useReducedMotion();\nconst revision = ref(0);\nprovide(bubbleLayoutKey, () => {\n  revision.value++;\n});\nconst variants = {\n  solid: \"bg-foreground\",\n  soft: \"bg-muted\",\n  tint: \"bg-muted\",\n  outline: \"border border-border/70 bg-background\",\n  ghost: \"\",\n  danger: \"bg-destructive/10\",\n};\nconst classes = computed(() =>\n  cn(\n    context.value.variant === \"solid\" && \"text-background\",\n    context.value.variant === \"danger\" && \"text-destructive\",\n    context.value.variant === \"ghost\" &&\n      \"w-full max-w-none rounded-none px-0 py-0\",\n    [\"button\", \"a\"].includes(props.as as string) &&\n      \"cursor-pointer text-left outline-none transition-[background-color,color,transform] duration-150 hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]\",\n  ),\n);\n</script>\n<template>\n  <component\n    :is=\"as\"\n    data-slot=\"message-bubble-content\"\n    v-bind=\"$attrs\"\n    :class=\"\n      cn(\n        'relative z-0 min-w-9 max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-6 text-foreground [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-background/60 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-background/60 [&_pre]:p-3 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5',\n        classes,\n        $attrs.class,\n      )\n    \"\n  >\n    <motion.span\n      v-if=\"context.variant !== 'ghost'\"\n      aria-hidden=\"true\"\n      :layout=\"reduced ? false : 'size'\"\n      :layout-dependency=\"revision\"\n      :initial=\"\n        context.animateIn && !reduced ? { opacity: 0, scale: 0.92 } : false\n      \"\n      :animate=\"{ opacity: 1, scale: 1 }\"\n      :transition=\"\n        reduced\n          ? { duration: 0 }\n          : {\n              opacity: { duration: 0.12, ease: EASE_OUT },\n              scale: {\n                type: 'spring',\n                stiffness: 520,\n                damping: 27,\n                mass: 0.52,\n              },\n              layout: SPRING_LAYOUT,\n            }\n      \"\n      :class=\"\n        cn(\n          'pointer-events-none absolute inset-0 -z-10 rounded-[inherit]',\n          context.align === 'end'\n            ? 'origin-bottom-right'\n            : 'origin-bottom-left',\n          variants[context.variant],\n        )\n      \"\n    />\n    <motion.div\n      class=\"relative\"\n      :initial=\"context.animateIn ? { opacity: 0 } : false\"\n      :animate=\"{ opacity: 1 }\"\n      :transition=\"{\n        duration: 0.12,\n        ease: EASE_OUT,\n        delay: reduced ? 0 : 0.04,\n      }\"\n      ><slot\n    /></motion.div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { h, renderSlot, useAttrs } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(defineProps<{ spacing?: \"compact\" | \"default\" }>(), {\n  spacing: \"compact\",\n});\nconst slots = defineSlots<{ default?(props: {}): any }>();\nconst attrs = useAttrs();\nconst gaps = { compact: \"gap-1.5\", default: \"gap-3\" } as const;\nconst RenderFrame = () =>\n  h(\n    \"div\",\n    {\n      \"data-slot\": \"message-bubble-group\",\n      ...attrs,\n      class: cn(\n        \"flex w-full flex-col\",\n        gaps[props.spacing === \"compact\" ? \"compact\" : \"default\"],\n        attrs.class,\n      ),\n    },\n    [renderSlot(slots, \"default\")],\n  );\n</script>\n<template><RenderFrame /></template>\n","<script setup lang=\"ts\">\nimport { h, renderSlot, useAttrs } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(defineProps<{ spacing?: \"compact\" | \"default\" }>(), {\n  spacing: \"compact\",\n});\nconst slots = defineSlots<{ default?(props: {}): any }>();\nconst attrs = useAttrs();\nconst gaps = { compact: \"gap-1.5\", default: \"gap-3\" } as const;\nconst RenderFrame = () =>\n  h(\n    \"div\",\n    {\n      \"data-slot\": \"message-bubble-group\",\n      ...attrs,\n      class: cn(\n        \"flex w-full flex-col\",\n        gaps[props.spacing === \"compact\" ? \"compact\" : \"default\"],\n        attrs.class,\n      ),\n    },\n    [renderSlot(slots, \"default\")],\n  );\n</script>\n<template><RenderFrame /></template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { ChevronDown } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { SPRING_SWAP } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport { bubbleLayoutKey } from \"./context\";\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    collapsedLines?: 2 | 3 | 4 | 5 | 6;\n    moreLabel?: Content;\n    lessLabel?: Content;\n    contentClassName?: string;\n    triggerClassName?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    collapsedLines: 4,\n    moreLabel: \"Show more\",\n    lessLabel: \"Show less\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:open\": [open: boolean];\n  openChange: [open: boolean];\n}>();\nconst invalidate = inject(bubbleLayoutKey, () => {});\nconst expanded = useControllable(\n  () => props.open,\n  props.defaultOpen,\n  (value) => {\n    invalidate();\n    emit(\"update:open\", value);\n    emit(\"openChange\", value);\n  },\n);\nconst identity = useId();\nconst reduced = useReducedMotion();\nconst clamp = computed(\n  () =>\n    ({\n      2: \"line-clamp-2\",\n      3: \"line-clamp-3\",\n      4: \"line-clamp-4\",\n      5: \"line-clamp-5\",\n      6: \"line-clamp-6\",\n    })[props.collapsedLines],\n);\n</script>\n<template>\n  <div\n    data-slot=\"message-bubble-collapsible\"\n    :data-state=\"expanded ? 'open' : 'closed'\"\n    class=\"w-full\"\n  >\n    <div\n      :id=\"identity\"\n      :class=\"\n        cn(\n          'transition-[mask-image] duration-200',\n          !expanded && clamp,\n          !expanded &&\n            '[mask-image:linear-gradient(to_bottom,#000_68%,transparent_100%)]',\n          contentClassName,\n        )\n      \"\n    >\n      <slot />\n    </div>\n    <button\n      type=\"button\"\n      :aria-expanded=\"expanded\"\n      :aria-controls=\"identity\"\n      @click=\"expanded = !expanded\"\n      :class=\"\n        cn(\n          'mt-2 inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n          triggerClassName,\n        )\n      \"\n    >\n      <span><RenderNode :node=\"expanded ? lessLabel : moreLabel\" /></span\n      ><motion.span\n        aria-hidden=\"true\"\n        :animate=\"{ rotate: expanded ? 180 : 0 }\"\n        :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n        ><ChevronDown class=\"size-3.5\"\n      /></motion.span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { ChevronDown } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { SPRING_SWAP } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport { bubbleLayoutKey } from \"./context\";\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    collapsedLines?: 2 | 3 | 4 | 5 | 6;\n    moreLabel?: Content;\n    lessLabel?: Content;\n    contentClassName?: string;\n    triggerClassName?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    collapsedLines: 4,\n    moreLabel: \"Show more\",\n    lessLabel: \"Show less\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:open\": [open: boolean];\n  openChange: [open: boolean];\n}>();\nconst invalidate = inject(bubbleLayoutKey, () => {});\nconst expanded = useControllable(\n  () => props.open,\n  props.defaultOpen,\n  (value) => {\n    invalidate();\n    emit(\"update:open\", value);\n    emit(\"openChange\", value);\n  },\n);\nconst identity = useId();\nconst reduced = useReducedMotion();\nconst clamp = computed(\n  () =>\n    ({\n      2: \"line-clamp-2\",\n      3: \"line-clamp-3\",\n      4: \"line-clamp-4\",\n      5: \"line-clamp-5\",\n      6: \"line-clamp-6\",\n    })[props.collapsedLines],\n);\n</script>\n<template>\n  <div\n    data-slot=\"message-bubble-collapsible\"\n    :data-state=\"expanded ? 'open' : 'closed'\"\n    class=\"w-full\"\n  >\n    <div\n      :id=\"identity\"\n      :class=\"\n        cn(\n          'transition-[mask-image] duration-200',\n          !expanded && clamp,\n          !expanded &&\n            '[mask-image:linear-gradient(to_bottom,#000_68%,transparent_100%)]',\n          contentClassName,\n        )\n      \"\n    >\n      <slot />\n    </div>\n    <button\n      type=\"button\"\n      :aria-expanded=\"expanded\"\n      :aria-controls=\"identity\"\n      @click=\"expanded = !expanded\"\n      :class=\"\n        cn(\n          'mt-2 inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n          triggerClassName,\n        )\n      \"\n    >\n      <span><RenderNode :node=\"expanded ? lessLabel : moreLabel\" /></span\n      ><motion.span\n        aria-hidden=\"true\"\n        :animate=\"{ rotate: expanded ? 180 : 0 }\"\n        :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n        ><ChevronDown class=\"size-3.5\"\n      /></motion.span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/message-scroller-D3DUIH1X.js

@@ -0,0 +1,189 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { t } from "./utils-DIrLOK2M.js";
+import { t as n } from "./preview-rail-C7Rbzlxy.js";
+import { computed as r, createBlock as i, createElementBlock as a, createVNode as o, defineComponent as s, h as c, isRef as l, mergeProps as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, unref as h, useId as g, useSlots as ee, watch as _, withCtx as v } from "vue";
+// src/agents/message-scroller/src/MessageScroller.vue
+var y = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "MessageScroller",
+	props: {
+		followOutput: {
+			type: Boolean,
+			default: !0
+		},
+		followThreshold: { default: 56 },
+		smooth: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Conversation" },
+		busy: { type: Boolean },
+		navigation: {},
+		navigationLabel: { default: "Message navigation" },
+		viewportClassName: {},
+		contentClassName: {},
+		railClassName: {},
+		viewportRef: {},
+		viewportProps: {},
+		contentProps: {}
+	},
+	emits: ["followChange"],
+	setup(s, { expose: y, emit: b }) {
+		let x = s, S = b, C = ee(), w = e(), te = g(), T = m(null), E = m(null), D = m([]), O = m(""), k = m(!1), A = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new Map(), M = 0, N = x.followOutput, P = !1, F = !1, I, L, R, z, B, V = () => w.value || !x.smooth ? "auto" : "smooth";
+		function H(e) {
+			N !== e && (N = e, S("followChange", e));
+		}
+		function U(e) {
+			T.value = e, typeof x.viewportRef == "function" ? x.viewportRef(T.value) : l(x.viewportRef) && (x.viewportRef.value = T.value);
+		}
+		function W(e) {
+			return ((e.querySelector("[data-slot=\"message-bubble-content\"], [data-slot=\"message-content\"]") ?? e).textContent ?? "").replace(/\s+/g, " ").trim();
+		}
+		function G(e, t) {
+			if (e.length <= t) return e;
+			let n = e.lastIndexOf(" ", t);
+			return e.slice(0, n > t * .65 ? n : t).trimEnd() + "…";
+		}
+		function K() {
+			let e = T.value, t = [...j];
+			if (x.navigation !== "rail" || !e || !t.length) return;
+			if (e.scrollTop <= x.followThreshold) {
+				O.value = t[0][0];
+				return;
+			}
+			if (e.scrollHeight - e.clientHeight - e.scrollTop <= x.followThreshold) {
+				O.value = t[t.length - 1][0];
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = n.top + n.height / 2, i = t[0][0], a = Infinity;
+			t.forEach(([e, t]) => {
+				let n = t.getBoundingClientRect(), o = Math.abs(n.top + n.height / 2 - r);
+				o < a && (a = o, i = e);
+			}), O.value = i;
+		}
+		function q() {
+			if (j.clear(), x.navigation !== "rail" || !E.value || !T.value) {
+				D.value = [], k.value = !1;
+				return;
+			}
+			let e = Array.from(E.value.querySelectorAll("[data-slot=\"message\"]")), t = e.map((t, n) => {
+				let r = A.get(t);
+				r || (r = `${te}-message-${++M}`, A.set(t, r)), j.set(r, t);
+				let i = W(t), a = t.dataset.from ?? "conversation", o = a === "user" ? e.slice(n + 1).find((e) => e.dataset.from === "assistant") : void 0, s = G(i, 56) || "Message", c = s.endsWith("…") ? s.length - 1 : i.length, l = G(o ? W(o) : i.slice(c).trim(), 88) || void 0;
+				return {
+					id: r,
+					label: s,
+					description: l,
+					ariaLabel: `Go to ${a} message ${n + 1} of ${e.length}`
+				};
+			});
+			JSON.stringify(t) !== JSON.stringify(D.value) && (D.value = t), k.value = e.length > 1 && T.value.scrollHeight > T.value.clientHeight + 1, K();
+		}
+		function J() {
+			F && x.navigation === "rail" && (L !== void 0 && cancelAnimationFrame(L), L = requestAnimationFrame(() => {
+				L = void 0, F && q();
+			}));
+		}
+		function Y(e, t) {
+			T.value && (P = !0, typeof T.value.scrollTo == "function" ? T.value.scrollTo({
+				top: e,
+				behavior: t
+			}) : T.value.scrollTop = e, I !== void 0 && clearTimeout(I), I = setTimeout(() => {
+				P = !1, K();
+			}, t === "smooth" ? 320 : 0));
+		}
+		function X(e = V()) {
+			T.value && Y(T.value.scrollHeight, e);
+		}
+		function ne() {
+			let e = T.value;
+			e && !P && (H(e.scrollHeight - e.clientHeight - e.scrollTop <= x.followThreshold), K());
+		}
+		function Z() {
+			P = !1;
+		}
+		function re(e) {
+			let t = j.get(e.id), n = T.value;
+			if (!t || !n) return;
+			if (O.value = e.id, D.value[D.value.length - 1]?.id === e.id) {
+				H(!0), X();
+				return;
+			}
+			H(!1);
+			let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+			Y(n.scrollTop + r.top - i.top - (n.clientHeight - r.height) / 2, V());
+		}
+		function Q() {
+			z?.disconnect(), B?.disconnect(), F && (typeof ResizeObserver < "u" && (z = new ResizeObserver((e) => {
+				J(), e.some((e) => e.target === E.value) && x.followOutput && N && X();
+			}), E.value && z.observe(E.value), T.value && z.observe(T.value)), x.navigation === "rail" && E.value && typeof MutationObserver < "u" && (B = new MutationObserver(J), B.observe(E.value, {
+				childList: !0,
+				subtree: !0,
+				characterData: !0
+			})), x.navigation === "rail" ? J() : q());
+		}
+		_(() => x.navigation, Q, { flush: "post" }), _(() => x.followOutput, (e) => {
+			N = e, F && e && (R !== void 0 && cancelAnimationFrame(R), R = requestAnimationFrame(() => X("auto")));
+		}), f(() => {
+			F = !0, x.followOutput && (R = requestAnimationFrame(() => X("auto"))), Q();
+		}), d(() => {
+			F = !1, z?.disconnect(), B?.disconnect(), I !== void 0 && clearTimeout(I), L !== void 0 && cancelAnimationFrame(L), R !== void 0 && cancelAnimationFrame(R), U(null);
+		});
+		let ie = r(() => t("h-full overflow-y-auto overscroll-contain outline-none [overflow-anchor:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", x.navigation === "rail" ? "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "[scrollbar-gutter:stable]", x.viewportClassName, x.navigation === "rail" && k.value && "pr-10"));
+		function $() {
+			let { onScroll: e, onWheel: t, onTouchstart: n, onKeydown: r, ...i } = x.viewportProps ?? {};
+			return c("section", {
+				...i,
+				ref: U,
+				"aria-label": x.label,
+				class: ie.value,
+				onScroll: [ne, e],
+				onWheel: [Z, t],
+				onTouchstart: [Z, n],
+				onKeydown: [(e) => {
+					[
+						"ArrowUp",
+						"PageUp",
+						"Home"
+					].includes(e.key) && Z();
+				}, r]
+			}, c("div", {
+				role: "log",
+				"aria-live": "polite",
+				"aria-relevant": "additions text",
+				"aria-busy": x.busy,
+				class: x.contentClassName,
+				...x.contentProps,
+				ref: E
+			}, C.default?.()));
+		}
+		return y({
+			scrollToEnd: X,
+			viewport: T
+		}), (e, r) => (p(), a("div", u({ "data-slot": "message-scroller" }, e.$attrs, { class: h(t)("min-h-0", e.$attrs.class) }), [s.navigation === "rail" ? (p(), i(h(n), {
+			key: 0,
+			items: k.value ? D.value : [],
+			label: s.navigationLabel,
+			"active-id": O.value,
+			onItemSelect: re,
+			"preview-side": "before",
+			"highlight-active": "",
+			"item-size": 14,
+			class: "h-full min-h-0 overflow-hidden",
+			"preview-container-class-name": "right-8 left-3",
+			"preview-class-name": "mr-1 w-64 max-w-full [&_[data-slot=preview-rail-card]]:h-20 [&_[data-slot=preview-rail-card]]:overflow-hidden [&_[data-slot=preview-rail-card]]:p-3 [&_[data-slot=preview-rail-title]]:line-clamp-1 [&_[data-slot=preview-rail-title]]:text-xs [&_[data-slot=preview-rail-title]]:leading-4 [&_[data-slot=preview-rail-description]]:line-clamp-2 [&_[data-slot=preview-rail-description]]:text-xs [&_[data-slot=preview-rail-description]]:leading-4",
+			"rail-class-name": h(t)("absolute inset-y-3 right-1 w-7 content-center py-1 [&_[data-slot=preview-rail-item]]:w-7 [&_[data-slot=preview-rail-item]]:justify-end [&_[data-slot=preview-rail-tick]]:h-px [&_[data-slot=preview-rail-tick]]:w-4 [&_[data-slot=preview-rail-tick]]:origin-right", k.value ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", s.railClassName)
+		}, {
+			default: v(() => [o($)]),
+			_: 1
+		}, 8, [
+			"items",
+			"label",
+			"active-id",
+			"rail-class-name"
+		])) : (p(), i($, { key: 1 }))], 16));
+	}
+});
+export { y as t };
+
+//# sourceMappingURL=message-scroller-D3DUIH1X.js.map

package/dist/message-scroller-D3DUIH1X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller-D3DUIH1X.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_createBlock","PreviewRail","_withCtx","_createVNode","_sfc_main","useReducedMotion","PreviewRail_default","MessageScroller_default","defineComponent","__expose","__emit","props","__props","emit","slots","useSlots","reduced","identity","useId","viewport","ref","transcript","links","selected","overflowing","identities","destinations","sequence","live","programmatic","mounted","releaseProgrammatic","scheduled","initialScroll","sizeObserver","changes","scrollBehavior","setFollowing","value","attach","node","isRef","contents","excerpt","text","limit","space","refreshSelection","element","entries","boundary","middle","closest","distance","id","rect","nextDistance","rebuildRail","messages","next","message","sender","reply","index","candidate","label","tailStart","description","queueRail","scroll","top","behavior","scrollToEnd","userScroll","interruptScroll","select","item","box","observe","entry","watch","onMounted","onBeforeUnmount","viewportClasses","computed","cn","Viewport","attributes","h","onScroll","onWheel","onTouchstart","event","onKeydown","openBlock","createElementBlock","mergeProps","_ctx","unref","createBlock","withCtx","createVNode"],"sources":["../src/agents/message-scroller/src/MessageScroller.vue","../src/agents/message-scroller/src/MessageScroller.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  h,\n  isRef,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useSlots,\n  watch,\n  type ComponentPublicInstance,\n  type HTMLAttributes,\n  type Ref,\n} from \"vue\";\nimport { PreviewRail, type PreviewRailItem } from \"../../../motion/preview-rail\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { cn } from \"../../../lib/utils\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    followOutput?: boolean;\n    followThreshold?: number;\n    smooth?: boolean;\n    label?: string;\n    busy?: boolean;\n    navigation?: \"rail\";\n    navigationLabel?: string;\n    viewportClassName?: string;\n    contentClassName?: string;\n    railClassName?: string;\n    viewportRef?:\n      Ref<HTMLElement | null> | ((element: HTMLElement | null) => void);\n    viewportProps?: HTMLAttributes;\n    contentProps?: HTMLAttributes;\n  }>(),\n  {\n    followOutput: true,\n    followThreshold: 56,\n    smooth: true,\n    label: \"Conversation\",\n    navigationLabel: \"Message navigation\",\n  },\n);\nconst emit = defineEmits<{ followChange: [following: boolean] }>();\nconst slots = useSlots();\nconst reduced = useReducedMotion();\nconst identity = useId();\nconst viewport = ref<HTMLElement | null>(null);\nconst transcript = ref<HTMLElement | null>(null);\nconst links = ref<PreviewRailItem[]>([]);\nconst selected = ref(\"\");\nconst overflowing = ref(false);\nconst identities = new WeakMap<HTMLElement, string>();\nconst destinations = new Map<string, HTMLElement>();\nlet sequence = 0,\n  live = props.followOutput,\n  programmatic = false,\n  mounted = false;\nlet releaseProgrammatic: ReturnType<typeof setTimeout> | undefined;\nlet scheduled: number | undefined;\nlet initialScroll: number | undefined;\nlet sizeObserver: ResizeObserver | undefined,\n  changes: MutationObserver | undefined;\nconst scrollBehavior = (): ScrollBehavior =>\n  reduced.value || !props.smooth ? \"auto\" : \"smooth\";\nfunction setFollowing(value: boolean) {\n  if (live !== value) {\n    live = value;\n    emit(\"followChange\", value);\n  }\n}\nfunction attach(node: Element | ComponentPublicInstance | null) {\n  viewport.value = node as HTMLElement | null;\n  if (typeof props.viewportRef === \"function\")\n    props.viewportRef(viewport.value);\n  else if (isRef(props.viewportRef)) props.viewportRef.value = viewport.value;\n}\nfunction contents(node: HTMLElement) {\n  return (\n    (\n      node.querySelector(\n        '[data-slot=\"message-bubble-content\"], [data-slot=\"message-content\"]',\n      ) ?? node\n    ).textContent ?? \"\"\n  )\n    .replace(/\\s+/g, \" \")\n    .trim();\n}\nfunction excerpt(text: string, limit: number): string {\n  if (text.length <= limit) return text;\n  const space = text.lastIndexOf(\" \", limit);\n  return text.slice(0, space > limit * 0.65 ? space : limit).trimEnd() + \"…\";\n}\nfunction refreshSelection() {\n  const element = viewport.value;\n  const entries = [...destinations];\n  if (props.navigation !== \"rail\" || !element || !entries.length) return;\n  if (element.scrollTop <= props.followThreshold) {\n    selected.value = entries[0][0];\n    return;\n  }\n  if (\n    element.scrollHeight - element.clientHeight - element.scrollTop <=\n    props.followThreshold\n  ) {\n    selected.value = entries[entries.length - 1][0];\n    return;\n  }\n  const boundary = element.getBoundingClientRect();\n  const middle = boundary.top + boundary.height / 2;\n  let closest = entries[0][0],\n    distance = Infinity;\n  entries.forEach(([id, node]) => {\n    const rect = node.getBoundingClientRect(),\n      nextDistance = Math.abs(rect.top + rect.height / 2 - middle);\n    if (nextDistance < distance) {\n      distance = nextDistance;\n      closest = id;\n    }\n  });\n  selected.value = closest;\n}\nfunction rebuildRail() {\n  destinations.clear();\n  if (props.navigation !== \"rail\" || !transcript.value || !viewport.value) {\n    links.value = [];\n    overflowing.value = false;\n    return;\n  }\n  const messages = Array.from(\n    transcript.value.querySelectorAll<HTMLElement>('[data-slot=\"message\"]'),\n  );\n  const next = messages.map((message, index) => {\n    let id = identities.get(message);\n    if (!id) {\n      id = `${identity}-message-${++sequence}`;\n      identities.set(message, id);\n    }\n    destinations.set(id, message);\n    const text = contents(message);\n    const sender = message.dataset.from ?? \"conversation\";\n    const reply =\n      sender === \"user\"\n        ? messages\n            .slice(index + 1)\n            .find((candidate) => candidate.dataset.from === \"assistant\")\n        : undefined;\n    const label = excerpt(text, 56) || \"Message\";\n    const tailStart = label.endsWith(\"…\") ? label.length - 1 : text.length;\n    const description =\n      excerpt(reply ? contents(reply) : text.slice(tailStart).trim(), 88) ||\n      undefined;\n    return {\n      id,\n      label,\n      description,\n      ariaLabel: `Go to ${sender} message ${index + 1} of ${messages.length}`,\n    };\n  });\n  if (JSON.stringify(next) !== JSON.stringify(links.value)) links.value = next;\n  overflowing.value =\n    messages.length > 1 &&\n    viewport.value.scrollHeight > viewport.value.clientHeight + 1;\n  refreshSelection();\n}\nfunction queueRail() {\n  if (!mounted || props.navigation !== \"rail\") return;\n  if (scheduled !== undefined) cancelAnimationFrame(scheduled);\n  scheduled = requestAnimationFrame(() => {\n    scheduled = undefined;\n    if (mounted) rebuildRail();\n  });\n}\nfunction scroll(top: number, behavior: ScrollBehavior) {\n  if (!viewport.value) return;\n  programmatic = true;\n  if (typeof viewport.value.scrollTo === \"function\")\n    viewport.value.scrollTo({ top, behavior });\n  else viewport.value.scrollTop = top;\n  if (releaseProgrammatic !== undefined) clearTimeout(releaseProgrammatic);\n  releaseProgrammatic = setTimeout(\n    () => {\n      programmatic = false;\n      refreshSelection();\n    },\n    behavior === \"smooth\" ? 320 : 0,\n  );\n}\nfunction scrollToEnd(behavior: ScrollBehavior = scrollBehavior()) {\n  if (viewport.value) scroll(viewport.value.scrollHeight, behavior);\n}\nfunction userScroll() {\n  const element = viewport.value;\n  if (!element || programmatic) return;\n  setFollowing(\n    element.scrollHeight - element.clientHeight - element.scrollTop <=\n      props.followThreshold,\n  );\n  refreshSelection();\n}\nfunction interruptScroll() {\n  programmatic = false;\n}\nfunction select(item: PreviewRailItem) {\n  const node = destinations.get(item.id),\n    element = viewport.value;\n  if (!node || !element) return;\n  selected.value = item.id;\n  if (links.value[links.value.length - 1]?.id === item.id) {\n    setFollowing(true);\n    scrollToEnd();\n    return;\n  }\n  setFollowing(false);\n  const box = node.getBoundingClientRect(),\n    boundary = element.getBoundingClientRect();\n  scroll(\n    element.scrollTop +\n      box.top -\n      boundary.top -\n      (element.clientHeight - box.height) / 2,\n    scrollBehavior(),\n  );\n}\nfunction observe() {\n  sizeObserver?.disconnect();\n  changes?.disconnect();\n  if (!mounted) return;\n  if (typeof ResizeObserver !== \"undefined\") {\n    sizeObserver = new ResizeObserver((entries) => {\n      queueRail();\n      if (\n        entries.some((entry) => entry.target === transcript.value) &&\n        props.followOutput &&\n        live\n      )\n        scrollToEnd();\n    });\n    if (transcript.value) sizeObserver.observe(transcript.value);\n    if (viewport.value) sizeObserver.observe(viewport.value);\n  }\n  if (\n    props.navigation === \"rail\" &&\n    transcript.value &&\n    typeof MutationObserver !== \"undefined\"\n  ) {\n    changes = new MutationObserver(queueRail);\n    changes.observe(transcript.value, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  if (props.navigation === \"rail\") queueRail();\n  else rebuildRail();\n}\nwatch(() => props.navigation, observe, { flush: \"post\" });\nwatch(\n  () => props.followOutput,\n  (value) => {\n    live = value;\n    if (mounted && value) {\n      if (initialScroll !== undefined) cancelAnimationFrame(initialScroll);\n      initialScroll = requestAnimationFrame(() => scrollToEnd(\"auto\"));\n    }\n  },\n);\nonMounted(() => {\n  mounted = true;\n  if (props.followOutput)\n    initialScroll = requestAnimationFrame(() => scrollToEnd(\"auto\"));\n  observe();\n});\nonBeforeUnmount(() => {\n  mounted = false;\n  sizeObserver?.disconnect();\n  changes?.disconnect();\n  if (releaseProgrammatic !== undefined) clearTimeout(releaseProgrammatic);\n  if (scheduled !== undefined) cancelAnimationFrame(scheduled);\n  if (initialScroll !== undefined) cancelAnimationFrame(initialScroll);\n  attach(null);\n});\nconst viewportClasses = computed(() =>\n  cn(\n    \"h-full overflow-y-auto overscroll-contain outline-none [overflow-anchor:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    props.navigation === \"rail\"\n      ? \"[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n      : \"[scrollbar-gutter:stable]\",\n    props.viewportClassName,\n    props.navigation === \"rail\" && overflowing.value && \"pr-10\",\n  ),\n);\nfunction Viewport() {\n  const { onScroll, onWheel, onTouchstart, onKeydown, ...attributes } =\n    props.viewportProps ?? {};\n  return h(\n    \"section\",\n    {\n      ...attributes,\n      ref: attach,\n      \"aria-label\": props.label,\n      class: viewportClasses.value,\n      onScroll: [userScroll, onScroll],\n      onWheel: [interruptScroll, onWheel],\n      onTouchstart: [interruptScroll, onTouchstart],\n      onKeydown: [\n        (event: KeyboardEvent) => {\n          if ([\"ArrowUp\", \"PageUp\", \"Home\"].includes(event.key))\n            interruptScroll();\n        },\n        onKeydown,\n      ],\n    },\n    h(\n      \"div\",\n      {\n        role: \"log\",\n        \"aria-live\": \"polite\",\n        \"aria-relevant\": \"additions text\",\n        \"aria-busy\": props.busy,\n        class: props.contentClassName,\n        ...props.contentProps,\n        ref: transcript,\n      },\n      slots.default?.(),\n    ),\n  );\n}\ndefineExpose({ scrollToEnd, viewport });\n</script>\n<template>\n  <div\n    data-slot=\"message-scroller\"\n    v-bind=\"$attrs\"\n    :class=\"cn('min-h-0', $attrs.class)\"\n  >\n    <PreviewRail\n      v-if=\"navigation === 'rail'\"\n      :items=\"overflowing ? links : []\"\n      :label=\"navigationLabel\"\n      :active-id=\"selected\"\n      @item-select=\"select\"\n      preview-side=\"before\"\n      highlight-active\n      :item-size=\"14\"\n      class=\"h-full min-h-0 overflow-hidden\"\n      preview-container-class-name=\"right-8 left-3\"\n      preview-class-name=\"mr-1 w-64 max-w-full [&_[data-slot=preview-rail-card]]:h-20 [&_[data-slot=preview-rail-card]]:overflow-hidden [&_[data-slot=preview-rail-card]]:p-3 [&_[data-slot=preview-rail-title]]:line-clamp-1 [&_[data-slot=preview-rail-title]]:text-xs [&_[data-slot=preview-rail-title]]:leading-4 [&_[data-slot=preview-rail-description]]:line-clamp-2 [&_[data-slot=preview-rail-description]]:text-xs [&_[data-slot=preview-rail-description]]:leading-4\"\n      :rail-class-name=\"\n        cn(\n          'absolute inset-y-3 right-1 w-7 content-center py-1 [&_[data-slot=preview-rail-item]]:w-7 [&_[data-slot=preview-rail-item]]:justify-end [&_[data-slot=preview-rail-tick]]:h-px [&_[data-slot=preview-rail-tick]]:w-4 [&_[data-slot=preview-rail-tick]]:origin-right',\n          overflowing\n            ? 'pointer-events-auto opacity-100'\n            : 'pointer-events-none opacity-0',\n          railClassName,\n        )\n      \"\n      ><Viewport /></PreviewRail\n    ><Viewport v-else />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  computed,\n  h,\n  isRef,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useSlots,\n  watch,\n  type ComponentPublicInstance,\n  type HTMLAttributes,\n  type Ref,\n} from \"vue\";\nimport { PreviewRail, type PreviewRailItem } from \"../../../motion/preview-rail\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { cn } from \"../../../lib/utils\";\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    followOutput?: boolean;\n    followThreshold?: number;\n    smooth?: boolean;\n    label?: string;\n    busy?: boolean;\n    navigation?: \"rail\";\n    navigationLabel?: string;\n    viewportClassName?: string;\n    contentClassName?: string;\n    railClassName?: string;\n    viewportRef?:\n      Ref<HTMLElement | null> | ((element: HTMLElement | null) => void);\n    viewportProps?: HTMLAttributes;\n    contentProps?: HTMLAttributes;\n  }>(),\n  {\n    followOutput: true,\n    followThreshold: 56,\n    smooth: true,\n    label: \"Conversation\",\n    navigationLabel: \"Message navigation\",\n  },\n);\nconst emit = defineEmits<{ followChange: [following: boolean] }>();\nconst slots = useSlots();\nconst reduced = useReducedMotion();\nconst identity = useId();\nconst viewport = ref<HTMLElement | null>(null);\nconst transcript = ref<HTMLElement | null>(null);\nconst links = ref<PreviewRailItem[]>([]);\nconst selected = ref(\"\");\nconst overflowing = ref(false);\nconst identities = new WeakMap<HTMLElement, string>();\nconst destinations = new Map<string, HTMLElement>();\nlet sequence = 0,\n  live = props.followOutput,\n  programmatic = false,\n  mounted = false;\nlet releaseProgrammatic: ReturnType<typeof setTimeout> | undefined;\nlet scheduled: number | undefined;\nlet initialScroll: number | undefined;\nlet sizeObserver: ResizeObserver | undefined,\n  changes: MutationObserver | undefined;\nconst scrollBehavior = (): ScrollBehavior =>\n  reduced.value || !props.smooth ? \"auto\" : \"smooth\";\nfunction setFollowing(value: boolean) {\n  if (live !== value) {\n    live = value;\n    emit(\"followChange\", value);\n  }\n}\nfunction attach(node: Element | ComponentPublicInstance | null) {\n  viewport.value = node as HTMLElement | null;\n  if (typeof props.viewportRef === \"function\")\n    props.viewportRef(viewport.value);\n  else if (isRef(props.viewportRef)) props.viewportRef.value = viewport.value;\n}\nfunction contents(node: HTMLElement) {\n  return (\n    (\n      node.querySelector(\n        '[data-slot=\"message-bubble-content\"], [data-slot=\"message-content\"]',\n      ) ?? node\n    ).textContent ?? \"\"\n  )\n    .replace(/\\s+/g, \" \")\n    .trim();\n}\nfunction excerpt(text: string, limit: number): string {\n  if (text.length <= limit) return text;\n  const space = text.lastIndexOf(\" \", limit);\n  return text.slice(0, space > limit * 0.65 ? space : limit).trimEnd() + \"…\";\n}\nfunction refreshSelection() {\n  const element = viewport.value;\n  const entries = [...destinations];\n  if (props.navigation !== \"rail\" || !element || !entries.length) return;\n  if (element.scrollTop <= props.followThreshold) {\n    selected.value = entries[0][0];\n    return;\n  }\n  if (\n    element.scrollHeight - element.clientHeight - element.scrollTop <=\n    props.followThreshold\n  ) {\n    selected.value = entries[entries.length - 1][0];\n    return;\n  }\n  const boundary = element.getBoundingClientRect();\n  const middle = boundary.top + boundary.height / 2;\n  let closest = entries[0][0],\n    distance = Infinity;\n  entries.forEach(([id, node]) => {\n    const rect = node.getBoundingClientRect(),\n      nextDistance = Math.abs(rect.top + rect.height / 2 - middle);\n    if (nextDistance < distance) {\n      distance = nextDistance;\n      closest = id;\n    }\n  });\n  selected.value = closest;\n}\nfunction rebuildRail() {\n  destinations.clear();\n  if (props.navigation !== \"rail\" || !transcript.value || !viewport.value) {\n    links.value = [];\n    overflowing.value = false;\n    return;\n  }\n  const messages = Array.from(\n    transcript.value.querySelectorAll<HTMLElement>('[data-slot=\"message\"]'),\n  );\n  const next = messages.map((message, index) => {\n    let id = identities.get(message);\n    if (!id) {\n      id = `${identity}-message-${++sequence}`;\n      identities.set(message, id);\n    }\n    destinations.set(id, message);\n    const text = contents(message);\n    const sender = message.dataset.from ?? \"conversation\";\n    const reply =\n      sender === \"user\"\n        ? messages\n            .slice(index + 1)\n            .find((candidate) => candidate.dataset.from === \"assistant\")\n        : undefined;\n    const label = excerpt(text, 56) || \"Message\";\n    const tailStart = label.endsWith(\"…\") ? label.length - 1 : text.length;\n    const description =\n      excerpt(reply ? contents(reply) : text.slice(tailStart).trim(), 88) ||\n      undefined;\n    return {\n      id,\n      label,\n      description,\n      ariaLabel: `Go to ${sender} message ${index + 1} of ${messages.length}`,\n    };\n  });\n  if (JSON.stringify(next) !== JSON.stringify(links.value)) links.value = next;\n  overflowing.value =\n    messages.length > 1 &&\n    viewport.value.scrollHeight > viewport.value.clientHeight + 1;\n  refreshSelection();\n}\nfunction queueRail() {\n  if (!mounted || props.navigation !== \"rail\") return;\n  if (scheduled !== undefined) cancelAnimationFrame(scheduled);\n  scheduled = requestAnimationFrame(() => {\n    scheduled = undefined;\n    if (mounted) rebuildRail();\n  });\n}\nfunction scroll(top: number, behavior: ScrollBehavior) {\n  if (!viewport.value) return;\n  programmatic = true;\n  if (typeof viewport.value.scrollTo === \"function\")\n    viewport.value.scrollTo({ top, behavior });\n  else viewport.value.scrollTop = top;\n  if (releaseProgrammatic !== undefined) clearTimeout(releaseProgrammatic);\n  releaseProgrammatic = setTimeout(\n    () => {\n      programmatic = false;\n      refreshSelection();\n    },\n    behavior === \"smooth\" ? 320 : 0,\n  );\n}\nfunction scrollToEnd(behavior: ScrollBehavior = scrollBehavior()) {\n  if (viewport.value) scroll(viewport.value.scrollHeight, behavior);\n}\nfunction userScroll() {\n  const element = viewport.value;\n  if (!element || programmatic) return;\n  setFollowing(\n    element.scrollHeight - element.clientHeight - element.scrollTop <=\n      props.followThreshold,\n  );\n  refreshSelection();\n}\nfunction interruptScroll() {\n  programmatic = false;\n}\nfunction select(item: PreviewRailItem) {\n  const node = destinations.get(item.id),\n    element = viewport.value;\n  if (!node || !element) return;\n  selected.value = item.id;\n  if (links.value[links.value.length - 1]?.id === item.id) {\n    setFollowing(true);\n    scrollToEnd();\n    return;\n  }\n  setFollowing(false);\n  const box = node.getBoundingClientRect(),\n    boundary = element.getBoundingClientRect();\n  scroll(\n    element.scrollTop +\n      box.top -\n      boundary.top -\n      (element.clientHeight - box.height) / 2,\n    scrollBehavior(),\n  );\n}\nfunction observe() {\n  sizeObserver?.disconnect();\n  changes?.disconnect();\n  if (!mounted) return;\n  if (typeof ResizeObserver !== \"undefined\") {\n    sizeObserver = new ResizeObserver((entries) => {\n      queueRail();\n      if (\n        entries.some((entry) => entry.target === transcript.value) &&\n        props.followOutput &&\n        live\n      )\n        scrollToEnd();\n    });\n    if (transcript.value) sizeObserver.observe(transcript.value);\n    if (viewport.value) sizeObserver.observe(viewport.value);\n  }\n  if (\n    props.navigation === \"rail\" &&\n    transcript.value &&\n    typeof MutationObserver !== \"undefined\"\n  ) {\n    changes = new MutationObserver(queueRail);\n    changes.observe(transcript.value, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  if (props.navigation === \"rail\") queueRail();\n  else rebuildRail();\n}\nwatch(() => props.navigation, observe, { flush: \"post\" });\nwatch(\n  () => props.followOutput,\n  (value) => {\n    live = value;\n    if (mounted && value) {\n      if (initialScroll !== undefined) cancelAnimationFrame(initialScroll);\n      initialScroll = requestAnimationFrame(() => scrollToEnd(\"auto\"));\n    }\n  },\n);\nonMounted(() => {\n  mounted = true;\n  if (props.followOutput)\n    initialScroll = requestAnimationFrame(() => scrollToEnd(\"auto\"));\n  observe();\n});\nonBeforeUnmount(() => {\n  mounted = false;\n  sizeObserver?.disconnect();\n  changes?.disconnect();\n  if (releaseProgrammatic !== undefined) clearTimeout(releaseProgrammatic);\n  if (scheduled !== undefined) cancelAnimationFrame(scheduled);\n  if (initialScroll !== undefined) cancelAnimationFrame(initialScroll);\n  attach(null);\n});\nconst viewportClasses = computed(() =>\n  cn(\n    \"h-full overflow-y-auto overscroll-contain outline-none [overflow-anchor:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    props.navigation === \"rail\"\n      ? \"[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n      : \"[scrollbar-gutter:stable]\",\n    props.viewportClassName,\n    props.navigation === \"rail\" && overflowing.value && \"pr-10\",\n  ),\n);\nfunction Viewport() {\n  const { onScroll, onWheel, onTouchstart, onKeydown, ...attributes } =\n    props.viewportProps ?? {};\n  return h(\n    \"section\",\n    {\n      ...attributes,\n      ref: attach,\n      \"aria-label\": props.label,\n      class: viewportClasses.value,\n      onScroll: [userScroll, onScroll],\n      onWheel: [interruptScroll, onWheel],\n      onTouchstart: [interruptScroll, onTouchstart],\n      onKeydown: [\n        (event: KeyboardEvent) => {\n          if ([\"ArrowUp\", \"PageUp\", \"Home\"].includes(event.key))\n            interruptScroll();\n        },\n        onKeydown,\n      ],\n    },\n    h(\n      \"div\",\n      {\n        role: \"log\",\n        \"aria-live\": \"polite\",\n        \"aria-relevant\": \"additions text\",\n        \"aria-busy\": props.busy,\n        class: props.contentClassName,\n        ...props.contentProps,\n        ref: transcript,\n      },\n      slots.default?.(),\n    ),\n  );\n}\ndefineExpose({ scrollToEnd, viewport });\n</script>\n<template>\n  <div\n    data-slot=\"message-scroller\"\n    v-bind=\"$attrs\"\n    :class=\"cn('min-h-0', $attrs.class)\"\n  >\n    <PreviewRail\n      v-if=\"navigation === 'rail'\"\n      :items=\"overflowing ? links : []\"\n      :label=\"navigationLabel\"\n      :active-id=\"selected\"\n      @item-select=\"select\"\n      preview-side=\"before\"\n      highlight-active\n      :item-size=\"14\"\n      class=\"h-full min-h-0 overflow-hidden\"\n      preview-container-class-name=\"right-8 left-3\"\n      preview-class-name=\"mr-1 w-64 max-w-full [&_[data-slot=preview-rail-card]]:h-20 [&_[data-slot=preview-rail-card]]:overflow-hidden [&_[data-slot=preview-rail-card]]:p-3 [&_[data-slot=preview-rail-title]]:line-clamp-1 [&_[data-slot=preview-rail-title]]:text-xs [&_[data-slot=preview-rail-title]]:leading-4 [&_[data-slot=preview-rail-description]]:line-clamp-2 [&_[data-slot=preview-rail-description]]:text-xs [&_[data-slot=preview-rail-description]]:leading-4\"\n      :rail-class-name=\"\n        cn(\n          'absolute inset-y-3 right-1 w-7 content-center py-1 [&_[data-slot=preview-rail-item]]:w-7 [&_[data-slot=preview-rail-item]]:justify-end [&_[data-slot=preview-rail-tick]]:h-px [&_[data-slot=preview-rail-tick]]:w-4 [&_[data-slot=preview-rail-tick]]:origin-right',\n          overflowing\n            ? 'pointer-events-auto opacity-100'\n            : 'pointer-events-none opacity-0',\n          railClassName,\n        )\n      \"\n      ><Viewport /></PreviewRail\n    ><Viewport v-else />\n  </div>\n</template>\n"],"mappings":"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"}