@orvui/vue 0.0.0-stage → 0.1.1

package/dist/prompt-input-CkBWtc3e.js

@@ -0,0 +1,246 @@
+import { u as e } from "./ease-rIvCM4O3.js";
+import { t } from "./utils-DIrLOK2M.js";
+import { n as ee, r as te, t as ne } from "./popover-CMwRDauk.js";
+import { a as n } from "./button-CDD333Yn.js";
+import { l as r, o as re, s as ie, u as ae } from "./select-CpzmgBi9.js";
+import { a as i, r as a, t as o } from "./shared-DAEawhBJ.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as h, mergeProps as oe, nextTick as g, normalizeClass as se, normalizeStyle as ce, onBeforeUnmount as le, onMounted as ue, openBlock as _, ref as v, renderList as y, renderSlot as de, toDisplayString as fe, unref as b, useAttrs as pe, watch as me, withCtx as x, withModifiers as he } from "vue";
+import { AnimatePresence as S, motion as C } from "motion-v";
+import { ArrowUp as w, Plus as T, Square as E } from "lucide-vue-next";
+// src/agents/prompt-input/src/PromptInput.vue?vue&type=script&setup=true&lang.ts
+var D = [
+	"value",
+	"rows",
+	"disabled",
+	"placeholder",
+	"aria-label"
+], O = { class: "mt-1 flex min-h-8 items-center gap-1" }, k = ["disabled", "onClick"], A = {
+	key: 0,
+	class: "mt-0.5 grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4"
+}, j = { class: "min-w-0" }, M = { class: "block text-sm" }, N = {
+	key: 0,
+	class: "mt-0.5 block text-xs leading-4 text-muted-foreground"
+}, P = { class: "flex min-w-0 items-center gap-1.5" }, F = {
+	key: 0,
+	class: "grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5"
+}, I = { class: "truncate text-muted-foreground" }, L = { class: "flex min-w-0 items-center gap-2" }, R = {
+	key: 0,
+	class: "grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4"
+}, ge = { class: "min-w-0 truncate text-sm" }, z = /* @__PURE__ */ m({
+	inheritAttrs: !1,
+	__name: "PromptInput",
+	props: {
+		modelValue: {},
+		defaultValue: { default: "" },
+		models: { default: () => [] },
+		model: {},
+		defaultModel: {},
+		actions: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		minRows: { default: 2 },
+		maxRows: { default: 8 },
+		disabled: { type: Boolean },
+		placeholder: { default: "Ask the agent to do something…" }
+	},
+	emits: [
+		"update:modelValue",
+		"valueChange",
+		"update:model",
+		"modelChange",
+		"action",
+		"submit",
+		"stop"
+	],
+	setup(m, { emit: z }) {
+		let B = m, V = z, H = a(() => B.modelValue, B.defaultValue, (e) => {
+			V("update:modelValue", e), V("valueChange", e);
+		}), U = a(() => B.model, B.defaultModel ?? B.models[0]?.value, (e) => {
+			e !== void 0 && (V("update:model", e), V("modelChange", e));
+		}), W = c(() => B.models.find((e) => e.value === U.value)), G = c(() => H.value.trim().length > 0 && !B.disabled && !B.loading), K = v(), q = v(), J = v(!1), Y = i(), _e = pe(), ve = h(), ye = () => !!ve?.vnode.props?.onStop, be = () => Object.fromEntries(Object.entries(_e).filter(([e]) => e !== "class" && e !== "style")), X, Z = !1;
+		function Q() {
+			if (!Z || !K.value || !q.value) return;
+			let e = Math.min(B.maxRows * 24, Math.max(B.minRows * 24, q.value.scrollHeight));
+			K.value.style.height = `${e}px`;
+		}
+		function xe(e) {
+			let t = e.target;
+			H.value = t.value, g(() => {
+				Z && (B.modelValue !== void 0 && (t.value = B.modelValue), Q());
+			});
+		}
+		function $() {
+			G.value && (V("submit", H.value.trim(), U.value), B.modelValue === void 0 && (H.value = ""), K.value?.focus({ preventScroll: !0 }));
+		}
+		function Se(e) {
+			e.key !== "Enter" || e.shiftKey || e.isComposing || (e.preventDefault(), $());
+		}
+		function Ce(e) {
+			e.disabled || (V("action", e.value), J.value = !1);
+		}
+		return me([
+			H,
+			() => B.minRows,
+			() => B.maxRows
+		], () => g(Q)), ue(() => {
+			Z = !0, Q(), K.value && typeof ResizeObserver < "u" && (X = new ResizeObserver(Q), X.observe(K.value));
+		}), le(() => {
+			Z = !1, X?.disconnect();
+		}), (i, a) => (_(), d("form", {
+			class: se(b(t)("relative w-full rounded-2xl border border-border/80 bg-background p-2 transition-colors focus-within:border-foreground/40", m.disabled && "opacity-60", i.$attrs.class)),
+			style: ce(i.$attrs.style),
+			onSubmit: he($, ["prevent"])
+		}, [
+			f("div", {
+				ref_key: "measurement",
+				ref: q,
+				"aria-hidden": "true",
+				class: "pointer-events-none invisible absolute inset-x-2 top-0 whitespace-pre-wrap px-2 text-sm leading-6 [overflow-wrap:break-word]"
+			}, fe(b(H) + "​"), 513),
+			f("textarea", oe({
+				ref_key: "textarea",
+				ref: K
+			}, be(), {
+				value: b(H),
+				rows: m.minRows,
+				disabled: m.disabled,
+				placeholder: m.placeholder,
+				"aria-label": i.$attrs["aria-label"] || "Prompt",
+				class: "scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55",
+				onInput: xe,
+				onKeydown: Se
+			}), null, 16, D),
+			f("div", O, [
+				m.actions.length ? (_(), l(b(te), {
+					key: 0,
+					open: J.value,
+					"onUpdate:open": a[0] ||= (e) => J.value = e
+				}, {
+					default: x(() => [p(b(ne), null, {
+						default: x(() => [p(b(n), {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							disabled: m.disabled || m.loading,
+							"aria-label": "Add to prompt",
+							class: "size-8 rounded-full"
+						}, {
+							default: x(() => [p(b(C).span, {
+								"aria-hidden": "true",
+								animate: { rotate: J.value ? 45 : 0 },
+								transition: b(Y) ? { duration: 0 } : b(e)
+							}, {
+								default: x(() => [p(b(T), { class: "size-4" })]),
+								_: 1
+							}, 8, ["animate", "transition"])]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}), p(b(ee), {
+						side: "top",
+						align: "start",
+						"side-offset": 8,
+						radius: 12,
+						class: "w-56 p-1.5"
+					}, {
+						default: x(() => [(_(!0), d(s, null, y(m.actions, (e) => (_(), d("button", {
+							key: e.value,
+							type: "button",
+							disabled: e.disabled,
+							onClick: (t) => Ce(e),
+							class: "flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50"
+						}, [e.icon ? (_(), d("span", A, [p(b(o), { node: e.icon }, null, 8, ["node"])])) : u("", !0), f("span", j, [f("span", M, [p(b(o), { node: e.label }, null, 8, ["node"])]), e.description ? (_(), d("span", N, [p(b(o), { node: e.description }, null, 8, ["node"])])) : u("", !0)])], 8, k))), 128))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open"])) : u("", !0),
+				de(i.$slots, "leading-action"),
+				m.models.length ? (_(), l(b(ae), {
+					key: 1,
+					"model-value": b(U),
+					disabled: m.disabled || m.loading,
+					class: "min-w-0",
+					"onUpdate:modelValue": a[1] ||= (e) => U.value = e
+				}, {
+					default: x(() => [p(b(r), {
+						"aria-label": "AI model",
+						class: "h-8 w-auto max-w-52 rounded-xl border-0 bg-transparent px-2 py-0 text-xs hover:bg-muted focus-visible:ring-2"
+					}, {
+						default: x(() => [f("span", P, [W.value?.icon ? (_(), d("span", F, [p(b(o), { node: W.value.icon }, null, 8, ["node"])])) : u("", !0), f("span", I, [p(b(o), { node: W.value?.label ?? "Choose model" }, null, 8, ["node"])])])]),
+						_: 1
+					}), p(b(ie), { class: "right-auto w-52 shadow-none" }, {
+						default: x(() => [(_(!0), d(s, null, y(m.models, (e) => (_(), l(b(re), {
+							key: e.value,
+							value: e.value,
+							disabled: e.disabled,
+							class: "py-2"
+						}, {
+							default: x(() => [f("span", L, [e.icon ? (_(), d("span", R, [p(b(o), { node: e.icon }, null, 8, ["node"])])) : u("", !0), f("span", ge, [p(b(o), { node: e.label }, null, 8, ["node"])])])]),
+							_: 2
+						}, 1032, ["value", "disabled"]))), 128))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["model-value", "disabled"])) : u("", !0),
+				p(b(n), {
+					type: m.loading ? "button" : "submit",
+					size: "icon",
+					disabled: m.loading ? !ye() : !G.value,
+					"aria-label": m.loading ? "Stop generating" : "Send prompt",
+					class: "ml-auto size-8 rounded-full",
+					onClick: a[2] ||= (e) => m.loading && V("stop")
+				}, {
+					default: x(() => [p(b(S), {
+						initial: !1,
+						mode: "popLayout"
+					}, {
+						default: x(() => [(_(), l(b(C).span, {
+							key: m.loading ? "stop" : "send",
+							class: "grid place-items-center",
+							initial: b(Y) ? { opacity: 1 } : {
+								opacity: 0,
+								y: 3,
+								scale: .8
+							},
+							animate: {
+								opacity: 1,
+								y: 0,
+								scale: 1
+							},
+							exit: b(Y) ? { opacity: 0 } : {
+								opacity: 0,
+								y: -3,
+								scale: .8
+							},
+							transition: b(Y) ? { duration: 0 } : b(e)
+						}, {
+							default: x(() => [m.loading ? (_(), l(b(E), {
+								key: 0,
+								class: "size-3 fill-current"
+							})) : (_(), l(b(w), {
+								key: 1,
+								class: "size-4"
+							}))]),
+							_: 1
+						}, 8, [
+							"initial",
+							"exit",
+							"transition"
+						]))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"type",
+					"disabled",
+					"aria-label"
+				])
+			])
+		], 38));
+	}
+});
+export { z as t };
+
+//# sourceMappingURL=prompt-input-CkBWtc3e.js.map

package/dist/prompt-input-CkBWtc3e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input-CkBWtc3e.js","names":["$attrs","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_withModifiers","_createElementVNode","_toDisplayString","_mergeProps","_createBlock","MorphPopover","_withCtx","_createVNode","MorphPopoverTrigger","Button","MorphPopoverContent","_Fragment","_renderList","_createCommentVNode","_renderSlot","Select","SelectTrigger","SelectContent","SelectItem","_sfc_main","SPRING_SWAP","MorphPopoverContent_default","MorphPopover_default","MorphPopoverTrigger_default","Button_default","SelectTrigger_default","SelectItem_default","SelectContent_default","Select_default","useReduced","useControllable","RenderNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","PromptInput_default","defineComponent","__emit","props","__props","emit","value","next","selected","selectedModel","computed","item","ready","textarea","ref","measurement","menu","reduced","attrs","useAttrs","instance","getCurrentInstance","stoppable","inputAttributes","key","observer","alive","fit","height","input","element","event","nextTick","submit","keydown","choose","action","watch","onMounted","onBeforeUnmount","openBlock","createElementBlock","normalizeClass","unref","cn","_ctx","normalizeStyle","withModifiers","createElementVNode","toDisplayString","mergeProps","createBlock","_cache","$event","withCtx","createVNode","motion","Plus","Fragment","renderList","createCommentVNode","renderSlot","option","AnimatePresence","Square","ArrowUp"],"sources":["../src/agents/prompt-input/src/PromptInput.vue","../src/agents/prompt-input/src/PromptInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n} from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { ArrowUp, Plus, Square } from \"lucide-vue-next\";\nimport { Button } from \"../../../motion/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"../../../motion/select\";\nimport {\n  MorphPopover,\n  MorphPopoverContent,\n  MorphPopoverTrigger,\n} from \"../../../motion/popover\";\nimport { SPRING_SWAP } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport {\n  RenderNode,\n  useControllable,\n  useReduced,\n  type Content,\n} from \"../../shared\";\nexport interface PromptModel {\n  value: string;\n  label: Content;\n  icon?: Content;\n  disabled?: boolean;\n}\nexport interface PromptAction {\n  value: string;\n  label: Content;\n  description?: Content;\n  icon?: Content;\n  disabled?: boolean;\n}\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    models?: PromptModel[];\n    model?: string;\n    defaultModel?: string;\n    actions?: PromptAction[];\n    loading?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    disabled?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    defaultValue: \"\",\n    models: () => [],\n    actions: () => [],\n    loading: false,\n    minRows: 2,\n    maxRows: 8,\n    placeholder: \"Ask the agent to do something…\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string];\n  valueChange: [value: string];\n  \"update:model\": [value: string];\n  modelChange: [value: string];\n  action: [action: string];\n  submit: [value: string, model?: string];\n  stop: [];\n}>();\nconst value = useControllable(\n  () => props.modelValue,\n  props.defaultValue,\n  (next) => {\n    emit(\"update:modelValue\", next);\n    emit(\"valueChange\", next);\n  },\n);\nconst selected = useControllable(\n  () => props.model,\n  props.defaultModel ?? props.models[0]?.value,\n  (next) => {\n    if (next !== undefined) {\n      emit(\"update:model\", next);\n      emit(\"modelChange\", next);\n    }\n  },\n);\nconst selectedModel = computed(() =>\n  props.models.find((item) => item.value === selected.value),\n);\nconst ready = computed(\n  () => value.value.trim().length > 0 && !props.disabled && !props.loading,\n);\nconst textarea = ref<HTMLTextAreaElement>();\nconst measurement = ref<HTMLElement>();\nconst menu = ref(false);\nconst reduced = useReduced();\nconst attrs = useAttrs();\nconst instance = getCurrentInstance();\nconst stoppable = () => !!instance?.vnode.props?.onStop;\nconst inputAttributes = () =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== \"class\" && key !== \"style\"),\n  );\nlet observer: ResizeObserver | undefined,\n  alive = false;\nfunction fit() {\n  if (!alive || !textarea.value || !measurement.value) return;\n  const height = Math.min(\n    props.maxRows * 24,\n    Math.max(props.minRows * 24, measurement.value.scrollHeight),\n  );\n  textarea.value.style.height = `${height}px`;\n}\nfunction input(event: Event) {\n  const element = event.target as HTMLTextAreaElement;\n  value.value = element.value;\n  nextTick(() => {\n    if (!alive) return;\n    if (props.modelValue !== undefined) element.value = props.modelValue;\n    fit();\n  });\n}\nfunction submit() {\n  if (!ready.value) return;\n  emit(\"submit\", value.value.trim(), selected.value);\n  if (props.modelValue === undefined) value.value = \"\";\n  textarea.value?.focus({ preventScroll: true });\n}\nfunction keydown(event: KeyboardEvent) {\n  if (event.key !== \"Enter\" || event.shiftKey || event.isComposing) return;\n  event.preventDefault();\n  submit();\n}\nfunction choose(action: PromptAction) {\n  if (!action.disabled) {\n    emit(\"action\", action.value);\n    menu.value = false;\n  }\n}\nwatch([value, () => props.minRows, () => props.maxRows], () => nextTick(fit));\nonMounted(() => {\n  alive = true;\n  fit();\n  if (textarea.value && typeof ResizeObserver !== \"undefined\") {\n    observer = new ResizeObserver(fit);\n    observer.observe(textarea.value);\n  }\n});\nonBeforeUnmount(() => {\n  alive = false;\n  observer?.disconnect();\n});\n</script>\n<template>\n  <form\n    :class=\"\n      cn(\n        'relative w-full rounded-2xl border border-border/80 bg-background p-2 transition-colors focus-within:border-foreground/40',\n        disabled && 'opacity-60',\n        $attrs.class,\n      )\n    \"\n    :style=\"$attrs.style as any\"\n    @submit.prevent=\"submit\"\n  >\n    <div\n      ref=\"measurement\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none invisible absolute inset-x-2 top-0 whitespace-pre-wrap px-2 text-sm leading-6 [overflow-wrap:break-word]\"\n    >\n      {{ value + \"​\" }}\n    </div>\n    <textarea\n      ref=\"textarea\"\n      v-bind=\"inputAttributes()\"\n      :value=\"value\"\n      :rows=\"minRows\"\n      :disabled=\"disabled\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"($attrs['aria-label'] as string) || 'Prompt'\"\n      class=\"scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55\"\n      @input=\"input\"\n      @keydown=\"keydown\"\n    />\n    <div class=\"mt-1 flex min-h-8 items-center gap-1\">\n      <MorphPopover v-if=\"actions.length\" v-model:open=\"menu\"\n        ><MorphPopoverTrigger\n          ><Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            :disabled=\"disabled || loading\"\n            aria-label=\"Add to prompt\"\n            class=\"size-8 rounded-full\"\n            ><motion.span\n              aria-hidden=\"true\"\n              :animate=\"{ rotate: menu ? 45 : 0 }\"\n              :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n              ><Plus class=\"size-4\" /></motion.span></Button\n        ></MorphPopoverTrigger>\n        <MorphPopoverContent\n          side=\"top\"\n          align=\"start\"\n          :side-offset=\"8\"\n          :radius=\"12\"\n          class=\"w-56 p-1.5\"\n        >\n          <button\n            v-for=\"action in actions\"\n            :key=\"action.value\"\n            type=\"button\"\n            :disabled=\"action.disabled\"\n            @click=\"choose(action)\"\n            class=\"flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50\"\n          >\n            <span\n              v-if=\"action.icon\"\n              class=\"mt-0.5 grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4\"\n              ><RenderNode :node=\"action.icon\" /></span\n            ><span class=\"min-w-0\"\n              ><span class=\"block text-sm\"\n                ><RenderNode :node=\"action.label\" /></span\n              ><span\n                v-if=\"action.description\"\n                class=\"mt-0.5 block text-xs leading-4 text-muted-foreground\"\n                ><RenderNode :node=\"action.description\" /></span\n            ></span>\n          </button>\n        </MorphPopoverContent>\n      </MorphPopover>\n      <slot name=\"leading-action\" />\n      <Select\n        v-if=\"models.length\"\n        :model-value=\"selected\"\n        :disabled=\"disabled || loading\"\n        class=\"min-w-0\"\n        @update:model-value=\"selected = $event\"\n        ><SelectTrigger\n          aria-label=\"AI model\"\n          class=\"h-8 w-auto max-w-52 rounded-xl border-0 bg-transparent px-2 py-0 text-xs hover:bg-muted focus-visible:ring-2\"\n          ><span class=\"flex min-w-0 items-center gap-1.5\"\n            ><span\n              v-if=\"selectedModel?.icon\"\n              class=\"grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5\"\n              ><RenderNode :node=\"selectedModel.icon\" /></span\n            ><span class=\"truncate text-muted-foreground\"\n              ><RenderNode\n                :node=\"selectedModel?.label ?? 'Choose model'\" /></span></span\n        ></SelectTrigger>\n        <SelectContent class=\"right-auto w-52 shadow-none\"\n          ><SelectItem\n            v-for=\"option in models\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n            class=\"py-2\"\n            ><span class=\"flex min-w-0 items-center gap-2\"\n              ><span\n                v-if=\"option.icon\"\n                class=\"grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4\"\n                ><RenderNode :node=\"option.icon\" /></span\n              ><span class=\"min-w-0 truncate text-sm\"\n                ><RenderNode :node=\"option.label\" /></span></span></SelectItem\n        ></SelectContent>\n      </Select>\n      <Button\n        :type=\"loading ? 'button' : 'submit'\"\n        size=\"icon\"\n        :disabled=\"loading ? !stoppable() : !ready\"\n        :aria-label=\"loading ? 'Stop generating' : 'Send prompt'\"\n        class=\"ml-auto size-8 rounded-full\"\n        @click=\"loading && emit('stop')\"\n        ><AnimatePresence :initial=\"false\" mode=\"popLayout\"\n          ><motion.span\n            :key=\"loading ? 'stop' : 'send'\"\n            class=\"grid place-items-center\"\n            :initial=\"\n              reduced ? { opacity: 1 } : { opacity: 0, y: 3, scale: 0.8 }\n            \"\n            :animate=\"{ opacity: 1, y: 0, scale: 1 }\"\n            :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.8 }\"\n            :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n            ><Square v-if=\"loading\" class=\"size-3 fill-current\" /><ArrowUp\n              v-else\n              class=\"size-4\" /></motion.span></AnimatePresence\n      ></Button>\n    </div>\n  </form>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n} from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { ArrowUp, Plus, Square } from \"lucide-vue-next\";\nimport { Button } from \"../../../motion/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"../../../motion/select\";\nimport {\n  MorphPopover,\n  MorphPopoverContent,\n  MorphPopoverTrigger,\n} from \"../../../motion/popover\";\nimport { SPRING_SWAP } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport {\n  RenderNode,\n  useControllable,\n  useReduced,\n  type Content,\n} from \"../../shared\";\nexport interface PromptModel {\n  value: string;\n  label: Content;\n  icon?: Content;\n  disabled?: boolean;\n}\nexport interface PromptAction {\n  value: string;\n  label: Content;\n  description?: Content;\n  icon?: Content;\n  disabled?: boolean;\n}\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    models?: PromptModel[];\n    model?: string;\n    defaultModel?: string;\n    actions?: PromptAction[];\n    loading?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    disabled?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    defaultValue: \"\",\n    models: () => [],\n    actions: () => [],\n    loading: false,\n    minRows: 2,\n    maxRows: 8,\n    placeholder: \"Ask the agent to do something…\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string];\n  valueChange: [value: string];\n  \"update:model\": [value: string];\n  modelChange: [value: string];\n  action: [action: string];\n  submit: [value: string, model?: string];\n  stop: [];\n}>();\nconst value = useControllable(\n  () => props.modelValue,\n  props.defaultValue,\n  (next) => {\n    emit(\"update:modelValue\", next);\n    emit(\"valueChange\", next);\n  },\n);\nconst selected = useControllable(\n  () => props.model,\n  props.defaultModel ?? props.models[0]?.value,\n  (next) => {\n    if (next !== undefined) {\n      emit(\"update:model\", next);\n      emit(\"modelChange\", next);\n    }\n  },\n);\nconst selectedModel = computed(() =>\n  props.models.find((item) => item.value === selected.value),\n);\nconst ready = computed(\n  () => value.value.trim().length > 0 && !props.disabled && !props.loading,\n);\nconst textarea = ref<HTMLTextAreaElement>();\nconst measurement = ref<HTMLElement>();\nconst menu = ref(false);\nconst reduced = useReduced();\nconst attrs = useAttrs();\nconst instance = getCurrentInstance();\nconst stoppable = () => !!instance?.vnode.props?.onStop;\nconst inputAttributes = () =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== \"class\" && key !== \"style\"),\n  );\nlet observer: ResizeObserver | undefined,\n  alive = false;\nfunction fit() {\n  if (!alive || !textarea.value || !measurement.value) return;\n  const height = Math.min(\n    props.maxRows * 24,\n    Math.max(props.minRows * 24, measurement.value.scrollHeight),\n  );\n  textarea.value.style.height = `${height}px`;\n}\nfunction input(event: Event) {\n  const element = event.target as HTMLTextAreaElement;\n  value.value = element.value;\n  nextTick(() => {\n    if (!alive) return;\n    if (props.modelValue !== undefined) element.value = props.modelValue;\n    fit();\n  });\n}\nfunction submit() {\n  if (!ready.value) return;\n  emit(\"submit\", value.value.trim(), selected.value);\n  if (props.modelValue === undefined) value.value = \"\";\n  textarea.value?.focus({ preventScroll: true });\n}\nfunction keydown(event: KeyboardEvent) {\n  if (event.key !== \"Enter\" || event.shiftKey || event.isComposing) return;\n  event.preventDefault();\n  submit();\n}\nfunction choose(action: PromptAction) {\n  if (!action.disabled) {\n    emit(\"action\", action.value);\n    menu.value = false;\n  }\n}\nwatch([value, () => props.minRows, () => props.maxRows], () => nextTick(fit));\nonMounted(() => {\n  alive = true;\n  fit();\n  if (textarea.value && typeof ResizeObserver !== \"undefined\") {\n    observer = new ResizeObserver(fit);\n    observer.observe(textarea.value);\n  }\n});\nonBeforeUnmount(() => {\n  alive = false;\n  observer?.disconnect();\n});\n</script>\n<template>\n  <form\n    :class=\"\n      cn(\n        'relative w-full rounded-2xl border border-border/80 bg-background p-2 transition-colors focus-within:border-foreground/40',\n        disabled && 'opacity-60',\n        $attrs.class,\n      )\n    \"\n    :style=\"$attrs.style as any\"\n    @submit.prevent=\"submit\"\n  >\n    <div\n      ref=\"measurement\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none invisible absolute inset-x-2 top-0 whitespace-pre-wrap px-2 text-sm leading-6 [overflow-wrap:break-word]\"\n    >\n      {{ value + \"​\" }}\n    </div>\n    <textarea\n      ref=\"textarea\"\n      v-bind=\"inputAttributes()\"\n      :value=\"value\"\n      :rows=\"minRows\"\n      :disabled=\"disabled\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"($attrs['aria-label'] as string) || 'Prompt'\"\n      class=\"scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55\"\n      @input=\"input\"\n      @keydown=\"keydown\"\n    />\n    <div class=\"mt-1 flex min-h-8 items-center gap-1\">\n      <MorphPopover v-if=\"actions.length\" v-model:open=\"menu\"\n        ><MorphPopoverTrigger\n          ><Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            :disabled=\"disabled || loading\"\n            aria-label=\"Add to prompt\"\n            class=\"size-8 rounded-full\"\n            ><motion.span\n              aria-hidden=\"true\"\n              :animate=\"{ rotate: menu ? 45 : 0 }\"\n              :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n              ><Plus class=\"size-4\" /></motion.span></Button\n        ></MorphPopoverTrigger>\n        <MorphPopoverContent\n          side=\"top\"\n          align=\"start\"\n          :side-offset=\"8\"\n          :radius=\"12\"\n          class=\"w-56 p-1.5\"\n        >\n          <button\n            v-for=\"action in actions\"\n            :key=\"action.value\"\n            type=\"button\"\n            :disabled=\"action.disabled\"\n            @click=\"choose(action)\"\n            class=\"flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50\"\n          >\n            <span\n              v-if=\"action.icon\"\n              class=\"mt-0.5 grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4\"\n              ><RenderNode :node=\"action.icon\" /></span\n            ><span class=\"min-w-0\"\n              ><span class=\"block text-sm\"\n                ><RenderNode :node=\"action.label\" /></span\n              ><span\n                v-if=\"action.description\"\n                class=\"mt-0.5 block text-xs leading-4 text-muted-foreground\"\n                ><RenderNode :node=\"action.description\" /></span\n            ></span>\n          </button>\n        </MorphPopoverContent>\n      </MorphPopover>\n      <slot name=\"leading-action\" />\n      <Select\n        v-if=\"models.length\"\n        :model-value=\"selected\"\n        :disabled=\"disabled || loading\"\n        class=\"min-w-0\"\n        @update:model-value=\"selected = $event\"\n        ><SelectTrigger\n          aria-label=\"AI model\"\n          class=\"h-8 w-auto max-w-52 rounded-xl border-0 bg-transparent px-2 py-0 text-xs hover:bg-muted focus-visible:ring-2\"\n          ><span class=\"flex min-w-0 items-center gap-1.5\"\n            ><span\n              v-if=\"selectedModel?.icon\"\n              class=\"grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5\"\n              ><RenderNode :node=\"selectedModel.icon\" /></span\n            ><span class=\"truncate text-muted-foreground\"\n              ><RenderNode\n                :node=\"selectedModel?.label ?? 'Choose model'\" /></span></span\n        ></SelectTrigger>\n        <SelectContent class=\"right-auto w-52 shadow-none\"\n          ><SelectItem\n            v-for=\"option in models\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n            class=\"py-2\"\n            ><span class=\"flex min-w-0 items-center gap-2\"\n              ><span\n                v-if=\"option.icon\"\n                class=\"grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4\"\n                ><RenderNode :node=\"option.icon\" /></span\n              ><span class=\"min-w-0 truncate text-sm\"\n                ><RenderNode :node=\"option.label\" /></span></span></SelectItem\n        ></SelectContent>\n      </Select>\n      <Button\n        :type=\"loading ? 'button' : 'submit'\"\n        size=\"icon\"\n        :disabled=\"loading ? !stoppable() : !ready\"\n        :aria-label=\"loading ? 'Stop generating' : 'Send prompt'\"\n        class=\"ml-auto size-8 rounded-full\"\n        @click=\"loading && emit('stop')\"\n        ><AnimatePresence :initial=\"false\" mode=\"popLayout\"\n          ><motion.span\n            :key=\"loading ? 'stop' : 'send'\"\n            class=\"grid place-items-center\"\n            :initial=\"\n              reduced ? { opacity: 1 } : { opacity: 0, y: 3, scale: 0.8 }\n            \"\n            :animate=\"{ opacity: 1, y: 0, scale: 1 }\"\n            :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.8 }\"\n            :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n            ><Square v-if=\"loading\" class=\"size-3 fill-current\" /><ArrowUp\n              v-else\n              class=\"size-4\" /></motion.span></AnimatePresence\n      ></Button>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAMsD,IAAQC,GAwBRC,IAAOH,GASPI,IAAQrB,QACNkB,EAAM,YACZA,EAAM,eACL,MAAS;GAER,AADAE,EAAK,qBAAqBE,CAAI,GAC9BF,EAAK,eAAeE,CAAI;EAC1B,CACF,GACMC,IAAWvB,QACTkB,EAAM,OACZA,EAAM,gBAAgBA,EAAM,OAAO,EAAE,EAAE,QACtC,MAAS;GACR,AAAII,MAAS,KAAA,MACXF,EAAK,gBAAgBE,CAAI,GACzBF,EAAK,eAAeE,CAAI;EAE5B,CACF,GACME,IAAgBC,QACpBP,EAAM,OAAO,MAAM,MAASQ,EAAK,UAAUH,EAAS,KAAK,CAC3D,GACMI,IAAQF,QACNJ,EAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,CAACH,EAAM,YAAY,CAACA,EAAM,OACnE,GACMU,IAAWC,EAAyB,GACpCC,IAAcD,EAAiB,GAC/BE,IAAOF,EAAI,EAAK,GAChBG,IAAUjC,EAAW,GACrBkC,KAAQC,GAAS,GACjBC,KAAWC,EAAmB,GAC9BC,WAAkB,CAAC,CAACF,IAAU,MAAM,OAAO,QAC3CG,WACJ,OAAO,YACL,OAAO,QAAQL,EAAK,CAAC,CAAC,QAAQ,CAACM,OAASA,MAAQ,WAAWA,MAAQ,OAAO,CAC5E,GACEC,GACFC,IAAQ;EACV,SAASC,IAAM;GACb,IAAI,CAACD,KAAS,CAACb,EAAS,SAAS,CAACE,EAAY,OAAO;GACrD,IAAMa,IAAS,KAAK,IAClBzB,EAAM,UAAU,IAChB,KAAK,IAAIA,EAAM,UAAU,IAAIY,EAAY,MAAM,YAAY,CAC7D;GACA,EAAS,MAAM,MAAM,SAAS,GAAGa,EAAO;EAC1C;EACA,SAASC,GAAM,GAAc;GAC3B,IAAMC,IAAUC,EAAM;GAEtB,AADA,EAAM,QAAQD,EAAQ,OACtBE,QAAe;IACb,AAAKN,MACDvB,EAAM,eAAe,KAAA,MAAW,EAAQ,QAAQA,EAAM,aAC1DwB,EAAI;GACN,CAAC;EACH;EACA,SAASM,IAAS;GAChB,AAAKrB,EAAM,UACXP,EAAK,UAAUC,EAAM,MAAM,KAAK,GAAGE,EAAS,KAAK,GAC7CL,EAAM,eAAe,KAAA,MAAW,EAAM,QAAQ,KAClDU,EAAS,OAAO,MAAM,EAAE,eAAe,GAAK,CAAC;EAC/C;EACA,SAASqB,GAAQ,GAAsB;GACrC,AAAIH,EAAM,QAAQ,WAAWA,EAAM,YAAYA,EAAM,gBACrDA,EAAM,eAAe,GACrBE,EAAO;EACT;EACA,SAASE,GAAO,GAAsB;GACpC,AAAKC,EAAO,aACV/B,EAAK,UAAU+B,EAAO,KAAK,GAC3B,EAAK,QAAQ;EAEjB;E,OACAC,GAAM;GAAC/B;SAAaH,EAAM;SAAeA,EAAM;EAAO,SAAS6B,EAASL,CAAG,CAAC,GAC5EW,SAAgB;GAGd,AAFA,IAAQ,IACRX,EAAI,GACAd,EAAS,SAAS,OAAO,iBAAmB,QAC9C,IAAW,IAAI,eAAec,CAAG,GACjCF,EAAS,QAAQZ,EAAS,KAAK;EAEnC,CAAC,GACD0B,SAAsB;GAEpB,AADA,IAAQ,IACRd,GAAU,WAAW;EACvB,CAAC,I,UAGC3E,EAAA,GAAAC,EAqIO,QAAA;GApIJ,OAAKC,GAASC,EAAA2F,CAAA,CAAE,C,6HAA+IxC,EAAA,YAAQ,cAA0BvD,EAAAA,OAAO,K;GAOxM,OAAKK,GAAEL,EAAAA,OAAO,KAAK;GACnB,UAAMM,GAAU8E,GAAM,CAAA,SAAA,CAAA;;GAEvB7E,EAMM,OAAA;IALA,SAAA;IAAJ,KAAI2D;IACJ,eAAY;IACZ,OAAM;GAEH,GAAA1D,GAAAJ,EAAAqD,CAAA,IAAK,GAAA,GAAA,GAAA;GAEVlD,EAWE,YAXFE,GAWE;IAVI,SAAA;IAAJ,KAAIuD;GACI,GAAAU,GAAe,GAAA;IACtB,OAAOtE,EAAAqD,CAAA;IACP,MAAMF,EAAA;IACN,UAAUA,EAAA;IACV,aAAaA,EAAA;IACb,cAAavD,EAAAA,OAAM,iBAAA;IACpB,OAAM;IACL,SAAOgF;IACP,WAASK;;GAEZ9E,EAsGM,OAtGNgC,GAsGM;IArGgBgB,EAAA,QAAQ,UAA5BtD,EAAA,GAAAS,EA4CeN,EAAAO,EAAA,GAAA;;KA5C6B,MAAMwD,EAAA;KAAA,iBAAA,AAAAoC,EAAA,QAAA,MAAA,EAAI,QAAAC;;KACnD,SAAA5F,QAasB,CAbtBC,EAasBT,EAAAU,EAAA,GAAA,MAAA;MAZpB,SAAAF,QAYF,CAZEC,EAYFT,EAAAW,CAAA,GAAA;OAXG,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAUwC,EAAA,YAAYA,EAAA;OACvB,cAAW;OACX,OAAM;;OACL,SAAA3C,QAIuC,CAJvCC,EAIuCT,EAAAuG,CAAA,CAAA,CAAA,MAAA;QAHtC,eAAY;QACX,SAAO,EAAA,QAAYxC,EAAA,QAAI,KAAA,EAAA;QACvB,YAAY/D,EAAAgE,CAAA,IAAO,EAAA,UAAA,EAAA,IAAqBhE,EAAAsB,CAAA;;QACxC,SAAAd,QAAuB,CAAvBC,EAAuBT,EAAAwG,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C;;;;;;K,IAE3B/F,EA4BsBT,EAAAY,EAAA,GAAA;MA3BpB,MAAK;MACL,OAAM;MACL,eAAa;MACb,QAAQ;MACT,OAAM;;MAGJ,SAAAJ,QAAyB,EAD3BX,EAAA,EAAA,GAAAC,EAoBSe,GAAA,MAAAC,EAnBUqC,EAAA,UAAV,OADTtD,EAAA,GAAAC,EAoBS,UAAA;OAlBN,KAAKqF,EAAO;OACb,MAAK;OACJ,UAAUA,EAAO;OACjB,UAAK,MAAED,GAAOC,CAAM;OACrB,OAAM;M,IAGEA,EAAO,QADftF,EAAA,GAAAC,EAIC,QAJDuC,GAIC,CADE5B,EAAkCT,EAAAiC,CAAA,GAAA,EAArB,MAAMkD,EAAO,K,sCAC5BhF,EAOO,QAPPmC,GAOO,CANLnC,EAEA,QAFAoC,GAEA,CADE9B,EAAmCT,EAAAiC,CAAA,GAAA,EAAtB,MAAMkD,EAAO,M,yBAErBA,EAAO,eADdtF,EAAA,GAAAC,EAIF,QAJE0C,GAIF,CADI/B,EAAyCT,EAAAiC,CAAA,GAAA,EAA5B,MAAMkD,EAAO,Y;;;;;IAKrCnE,GAA8B4E,EAAA,QAAA,gBAAA;IAEtBzC,EAAA,OAAO,UADftD,EAAA,GAAAS,EAiCSN,EAAAiB,EAAA,GAAA;;KA/BN,eAAajB,EAAAuD,CAAA;KACb,UAAUJ,EAAA,YAAYA,EAAA;KACvB,OAAM;KACL,uBAAkB,AAAAgD,EAAA,QAAA,MAAE,EAAA,QAAWC;;KAC/B,SAAA5F,QAWgB,CAXhBC,EAWgBT,EAAAkB,CAAA,GAAA;MAVf,cAAW;MACX,OAAM;;MACL,SAAAV,QAQF,CAREL,EAQF,QAREsC,GAQF,CANWe,EAAA,OAAe,QADtB3D,EAAA,GAAAC,EAIA,QAJA4C,GAIA,CADEjC,EAAyCT,EAAAiC,CAAA,GAAA,EAA5B,MAAMuB,EAAA,MAAc,K,sCACnCrD,EAE2D,QAF3DwC,GAE2D,CADzDlC,EACkDT,EAAAiC,CAAA,GAAA,EAAhD,MAAMuB,EAAA,OAAe,SAAK,e;;K,IAEnC/C,EAciBT,EAAAmB,EAAA,GAAA,EAdF,OAAM,8BAA6B,GAAA;MAE9C,SAAAX,QAAwB,EADzBX,EAAA,EAAA,GAAAC,EAaFe,GAAA,MAAAC,EAZoBqC,EAAA,SAAV,OADRtD,EAAA,GAAAS,EAaFN,EAAAoB,EAAA,GAAA;OAXI,KAAKyF,EAAO;OACZ,OAAOA,EAAO;OACd,UAAUA,EAAO;OAClB,OAAM;;OACL,SAAArG,QAMqD,CANrDL,EAMqD,QANrDyC,GAMqD,CAJ5CiE,EAAO,QADdhH,EAAA,GAAAC,EAIA,QAJA+C,GAIA,CADEpC,EAAkCT,EAAAiC,CAAA,GAAA,EAArB,MAAM4E,EAAO,K,sCAC5B1G,EAC4C,QAD5C2C,IAC4C,CAA1CrC,EAAmCT,EAAAiC,CAAA,GAAA,EAAtB,MAAM4E,EAAO,M;;;;;;;IAGrCpG,EAoBUT,EAAAW,CAAA,GAAA;KAnBP,MAAMwC,EAAA,UAAO,WAAA;KACd,MAAK;KACJ,UAAUA,EAAA,UAAO,CAAIkB,GAAS,IAAA,CAAMV,EAAA;KACpC,cAAYR,EAAA,UAAO,oBAAA;KACpB,OAAM;KACL,SAAK,AAAAgD,EAAA,QAAA,MAAEhD,EAAA,WAAWC,EAAI,MAAA;;KACtB,SAAA5C,QAaF,CAbEC,EAaFT,EAAA8G,CAAA,GAAA;MAboB,SAAS;MAAO,MAAK;;MACrC,SAAAtG,QAWkC,EAXlCX,EAAA,GAAAS,EAWkCN,EAAAuG,CAAA,CAAA,CAAA,MAAA;OAVhC,KAAKpD,EAAA,UAAO,SAAA;OACb,OAAM;OACL,SAAwBnD,EAAAgE,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;QAAA,SAAA;QAAA,GAAA;QAAA,OAAA;OAAA;OAG/B,SAAS;QAAA,SAAA;QAAA,GAAA;QAAA,OAAA;OAAA;OACT,MAAMhE,EAAAgE,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;QAAA,SAAA;QAAA,GAAA;QAAA,OAAA;OAAA;OACb,YAAYhE,EAAAgE,CAAA,IAAO,EAAA,UAAA,EAAA,IAAqBhE,EAAAsB,CAAA;;OACxC,SAAAd,QAAqD,CAAvC2C,EAAA,WAAdtD,EAAA,GAAAS,EAAqDN,EAAA+G,CAAA,GAAA;;QAA9B,OAAM;O,OAAwBlH,EAAA,GAAAS,EAEnCN,EAAAgH,CAAA,GAAA;;QAAjB,OAAM"}