@vite-hub/ui 0.0.3 → 0.1.0

package/dist/primitive-rail.js

@@ -0,0 +1,348 @@
+import { t as hasRuntimeType } from "./runtime-type-DlCscMfw.js";
+import { computed, defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region src/components/primitive-icon.ts
+const rect = (x, y, width, height, rx = 1.5) => ["rect", {
+	x,
+	y,
+	width,
+	height,
+	rx
+}];
+const path = (d) => ["path", { d }];
+/** Square 24px icons, one for each Server Primitive and docs area. Strokes use currentColor. */
+const primitiveIcons = {
+	agent: {
+		base: [
+			rect(4.5, 9, 15, 11, 3),
+			path("M12 6v3"),
+			["circle", {
+				cx: 12,
+				cy: 5,
+				r: 1
+			}]
+		],
+		motion: [path("M9.5 13.5v2M14.5 13.5v2")]
+	},
+	auth: {
+		base: [rect(5, 10.5, 14, 10, 2), path("M12 14.5v2")],
+		motion: [path("M8 10.5v-3a4 4 0 0 1 8 0v3")]
+	},
+	blob: {
+		base: [path("M5 9.5A1.5 1.5 0 0 1 6.5 8H12l4 4v7.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 19.5z"), path("M12 8v4h4")],
+		motion: [path("M9 5V4.5A1.5 1.5 0 0 1 10.5 3H16l4 4v8.5a1.5 1.5 0 0 1-1.5 1.5H18")]
+	},
+	browser: {
+		base: [rect(3, 4, 18, 16, 2), path("M3 8.5h18M6 6.25h.01M8.5 6.25h.01")],
+		motion: [path("m11 12 5.5 2-2.25 1-1 2.25z")]
+	},
+	channel: {
+		base: [path("M5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H11l-4.5 4v-4h-1A1.5 1.5 0 0 1 4 14.5v-9A1.5 1.5 0 0 1 5.5 4z")],
+		motion: [path("M8 8.5h8M8 12h5")]
+	},
+	connection: {
+		base: [path("M12 16v5")],
+		motion: [path("M9 3v4M15 3v4M6.5 7h11v3.5a5.5 5.5 0 0 1-11 0z")]
+	},
+	content: {
+		base: [rect(5, 3, 14, 18, 2), path("M8.5 7.5h7")],
+		motion: [path("M8.5 11.5h7M8.5 15.5h4.5")]
+	},
+	database: {
+		base: [path("M5 6v12c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6"), path("M5 12c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5")],
+		motion: [path("M5 6c0-1.4 3.1-2.5 7-2.5s7 1.1 7 2.5-3.1 2.5-7 2.5S5 7.4 5 6z")]
+	},
+	development: {
+		base: [path("m8.5 7-5 5 5 5M15.5 7l5 5-5 5")],
+		motion: [path("m13.5 5-3 14")]
+	},
+	email: {
+		base: [rect(3, 5.5, 18, 13, 2)],
+		motion: [path("m3.5 7.5 8.5 6 8.5-6")]
+	},
+	env: {
+		base: [],
+		motion: [["circle", {
+			cx: 8,
+			cy: 16,
+			r: 4
+		}], path("M10.8 13.2 20 4M17 7l2.5 2.5M14.5 9.5l2 2")]
+	},
+	hosts: {
+		base: [path("m3.5 12.5 8.5 4.5 8.5-4.5M3.5 16.5l8.5 4.5 8.5-4.5")],
+		motion: [path("m12 3.5 8.5 4.5-8.5 4.5L3.5 8z")]
+	},
+	kv: {
+		base: [rect(3, 5, 18, 14, 2), path("M9 5v14M3 12h18")],
+		motion: [path("M12.5 8.5h5M12.5 15.5h3.5")]
+	},
+	queue: {
+		base: [path("M16.5 12H21m-2-2.5 2 2.5-2 2.5")],
+		motion: [rect(3, 9.5, 5, 5, 1), rect(9.5, 9.5, 5, 5, 1)]
+	},
+	"rate-limit": {
+		base: [path("M3.5 15a8.5 8.5 0 0 1 17 0M6 19h12"), ["circle", {
+			cx: 12,
+			cy: 15,
+			r: 1
+		}]],
+		motion: [path("m12 15 3.5-4.5")]
+	},
+	realtime: {
+		base: [["circle", {
+			cx: 12,
+			cy: 12,
+			r: 1.5
+		}], path("M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7")],
+		motion: [path("M5.5 5.5a9.2 9.2 0 0 0 0 13M18.5 5.5a9.2 9.2 0 0 1 0 13")]
+	},
+	reference: {
+		base: [path("M12 6.5c-1.5-1.5-4-2-8-2v13c4 0 6.5.5 8 2")],
+		motion: [path("M12 6.5c1.5-1.5 4-2 8-2v13c-4 0-6.5.5-8 2V6.5")]
+	},
+	sandbox: {
+		base: [path("M3 8V4.5A1.5 1.5 0 0 1 4.5 3H8M16 3h3.5A1.5 1.5 0 0 1 21 4.5V8M21 16v3.5a1.5 1.5 0 0 1-1.5 1.5H16M8 21H4.5A1.5 1.5 0 0 1 3 19.5V16")],
+		motion: [rect(8.5, 8.5, 7, 7, 1)]
+	},
+	schedule: {
+		base: [rect(3.5, 5, 17, 15.5, 2), path("M3.5 10h17M8 3v4M16 3v4")],
+		motion: [rect(7, 13, 3, 3, .5)]
+	},
+	shell: {
+		base: [rect(3, 4, 18, 16, 2), path("m7 9.5 3 2.5-3 2.5")],
+		motion: [path("M12.5 15h4")]
+	},
+	source: {
+		base: [path("M4 14v4.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V14")],
+		motion: [path("M12 3v10M8 9.5l4 4 4-4")]
+	},
+	start: {
+		base: [path("M6 21V3.5")],
+		motion: [path("M6 4h11l-2.5 4 2.5 4H6")]
+	},
+	ui: {
+		base: [
+			rect(3.5, 3.5, 7, 7),
+			rect(13.5, 3.5, 7, 7),
+			rect(3.5, 13.5, 7, 7)
+		],
+		motion: [rect(13.5, 13.5, 7, 7)]
+	},
+	usage: {
+		base: [path("M4 19h16")],
+		motion: [
+			rect(6, 10, 3, 6, .5),
+			rect(10.5, 5, 3, 11, .5),
+			rect(15, 8, 3, 8, .5)
+		]
+	},
+	workflow: {
+		base: [
+			rect(3, 3, 6, 6),
+			rect(3, 15, 6, 6),
+			path("M9 6h2.5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9M12.5 12H15")
+		],
+		motion: [rect(15, 9, 6, 6)]
+	},
+	workspace: {
+		base: [path("M3 7.5A1.5 1.5 0 0 1 4.5 6H9l2 2h8.5A1.5 1.5 0 0 1 21 9.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z")],
+		motion: [path("M3 11.5h18")]
+	}
+};
+function isPrimitiveIconName(value) {
+	return hasRuntimeType(value, "string") && Object.hasOwn(primitiveIcons, value);
+}
+const primitiveIconNames = Object.keys(primitiveIcons).filter(isPrimitiveIconName);
+const shapes = (list) => list.map(([tag, attributes]) => h(tag, attributes));
+const PrimitiveIcon = defineComponent({
+	name: "PrimitiveIcon",
+	props: { name: {
+		required: true,
+		type: String
+	} },
+	setup(props) {
+		return () => {
+			const icon = primitiveIcons[props.name];
+			return h("svg", {
+				"aria-hidden": "true",
+				class: "vh-primitive-icon",
+				"data-icon": props.name,
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"stroke-width": 1.5,
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [...shapes(icon.base), h("g", { class: "vh-primitive-icon__motion" }, shapes(icon.motion))]);
+		};
+	}
+});
+//#endregion
+//#region src/components/primitive-rail.ts
+const hoverIntentDelay = 140;
+/**
+* The narrow icon rail that ViteHub docs and the Console show at the left edge.
+* It always takes 3.5rem of the layout. On hover or keyboard focus, its surface expands over the next element to show the labels.
+*/
+const PrimitiveRail = defineComponent({
+	name: "PrimitiveRail",
+	props: { 
+	/** Accessible name of the navigation landmark. */
+label: {
+		required: true,
+		type: String
+	} },
+	slots: Object,
+	setup(props, { slots }) {
+		const hovered = ref(false);
+		const focused = ref(false);
+		const dismissed = ref(false);
+		const root = ref();
+		const expanded = computed(() => (hovered.value || focused.value) && !dismissed.value);
+		let intent;
+		const cancelIntent = () => {
+			clearTimeout(intent);
+			intent = void 0;
+		};
+		const release = () => {
+			if (!hovered.value && !focused.value) dismissed.value = false;
+		};
+		function onPointerenter(event) {
+			if (event.pointerType === "touch" || !globalThis.matchMedia?.("(hover: hover) and (pointer: fine)").matches) return;
+			cancelIntent();
+			intent = setTimeout(() => {
+				intent = void 0;
+				hovered.value = true;
+			}, hoverIntentDelay);
+		}
+		function onPointerleave() {
+			cancelIntent();
+			hovered.value = false;
+			release();
+		}
+		function dismissForMenu(event) {
+			if (!(event.target instanceof Element) || !root.value?.contains(event.target) || !event.target.closest("[aria-haspopup]")) return;
+			cancelIntent();
+			dismissed.value = true;
+		}
+		function onFocusin(event) {
+			focused.value = event.target instanceof Element && event.target.matches(":focus-visible");
+		}
+		function onFocusout(event) {
+			const rail = event.currentTarget;
+			if (rail instanceof Element && event.relatedTarget instanceof Node && rail.contains(event.relatedTarget)) return;
+			focused.value = false;
+			release();
+		}
+		function onKeydown(event) {
+			if ([
+				"Enter",
+				" ",
+				"ArrowDown"
+			].includes(event.key)) dismissForMenu(event);
+			else if (event.key === "Escape" && expanded.value) {
+				cancelIntent();
+				dismissed.value = true;
+			}
+		}
+		onMounted(() => document.addEventListener("keydown", onKeydown));
+		onBeforeUnmount(() => {
+			cancelIntent();
+			document.removeEventListener("keydown", onKeydown);
+		});
+		return () => {
+			const slotProps = { expanded: expanded.value };
+			return h("nav", {
+				"aria-label": props.label,
+				class: "vh-primitive-rail",
+				"data-dismissed": dismissed.value ? "" : void 0,
+				"data-expanded": expanded.value ? "" : void 0,
+				onFocusin,
+				onFocusout,
+				onPointerdown: dismissForMenu,
+				onPointerenter,
+				onPointerleave,
+				ref: root
+			}, h("div", { class: "vh-primitive-rail__surface" }, [
+				slots.header ? h("div", { class: "vh-primitive-rail__header" }, slots.header(slotProps)) : null,
+				h("div", { class: "vh-primitive-rail__body" }, slots.default?.(slotProps)),
+				slots.footer ? h("div", { class: "vh-primitive-rail__footer" }, slots.footer(slotProps)) : null
+			]));
+		};
+	}
+});
+/**
+* Scrolls the rail body the least amount that shows the whole item, with no animation.
+* It changes only the rail's own scroll position, never the page scroll.
+*/
+function revealInRail(item) {
+	const body = item.closest(".vh-primitive-rail__body");
+	if (!body) return;
+	const itemBox = item.getBoundingClientRect();
+	const bodyBox = body.getBoundingClientRect();
+	if (itemBox.top < bodyBox.top) body.scrollTop -= bodyBox.top - itemBox.top;
+	else if (itemBox.bottom > bodyBox.bottom) body.scrollTop += itemBox.bottom - bodyBox.bottom;
+}
+/** A group of rail items. A short rule separates consecutive groups. */
+const PrimitiveRailGroup = defineComponent({
+	name: "PrimitiveRailGroup",
+	setup(_props, { slots }) {
+		return () => h("div", { class: "vh-primitive-rail__group" }, slots.default?.());
+	}
+});
+/**
+* One rail target: a square icon that becomes a labeled row when the rail expands. It renders a button by default.
+* Pass a link component in `as` and its props, such as `to`, as attributes.
+* The default slot replaces the primitive icon, for example with a host icon component. The icon is decorative.
+* The `label` slot replaces the visible label, for example to add a badge. `label` stays the accessible name.
+*/
+const PrimitiveRailItem = defineComponent({
+	name: "PrimitiveRailItem",
+	props: {
+		as: {
+			default: "button",
+			type: [
+				String,
+				Object,
+				Function
+			]
+		},
+		/** Marks the item as the current page with `aria-current="page"`. */
+		current: Boolean,
+		icon: {
+			required: false,
+			type: String
+		},
+		/** Visible label and accessible name. The label shows when the rail expands. */
+		label: {
+			required: true,
+			type: String
+		}
+	},
+	setup(props, { slots }) {
+		const instance = getCurrentInstance();
+		const revealIfCurrent = () => {
+			const element = instance?.proxy?.$el;
+			if (props.current && hasRuntimeType(globalThis.Element, "function") && element instanceof Element) revealInRail(element);
+		};
+		onMounted(revealIfCurrent);
+		watch(() => props.current, revealIfCurrent, { flush: "post" });
+		const content = () => [h("span", {
+			"aria-hidden": "true",
+			class: "vh-primitive-rail__icon"
+		}, slots.default?.() ?? (props.icon ? [h(PrimitiveIcon, { name: props.icon })] : [])), h("span", { class: "vh-primitive-rail__label" }, slots.label?.() ?? props.label)];
+		return () => {
+			const attributes = {
+				"aria-current": props.current ? "page" : void 0,
+				"aria-label": props.label,
+				class: "vh-primitive-rail__item"
+			};
+			return hasRuntimeType(props.as, "string") ? h(props.as, {
+				...attributes,
+				type: props.as === "button" ? "button" : void 0
+			}, content()) : h(props.as, attributes, { default: content });
+		};
+	}
+});
+//#endregion
+export { PrimitiveIcon, PrimitiveRail, PrimitiveRailGroup, PrimitiveRailItem, isPrimitiveIconName, primitiveIconNames };

package/dist/prompt-input-BbnCb80O.js

@@ -0,0 +1,299 @@
+import { t as uiErrorDiagnostics } from "./error-diagnostics-B4hMpJRL.js";
+import { t as ImagePreview } from "./image-preview-VfknBEFu.js";
+import { c as AttachmentTitle, i as AttachmentContent, n as AttachmentAction, o as AttachmentGroup, r as AttachmentActions, s as AttachmentMedia, t as Attachment } from "./attachment-B3dXC7jM.js";
+import { computed, defineComponent, h, onBeforeUnmount, onScopeDispose, ref, resolveComponent } from "vue";
+//#region src/composables/attachments.ts
+function matchesAccept(file, accept) {
+	if (!accept) return true;
+	return accept.split(",").some((entry) => {
+		const value = entry.trim();
+		if (value.startsWith(".")) return file.name.toLowerCase().endsWith(value.toLowerCase());
+		if (value.endsWith("/*")) return file.type.startsWith(value.slice(0, -1));
+		return file.type === value;
+	});
+}
+function fileToDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onerror = () => reject(reader.error ?? uiErrorDiagnostics.UI_R0001({ message: `Could not read ${file.name}.` }));
+		reader.onload = () => resolve(String(reader.result));
+		reader.readAsDataURL(file);
+	});
+}
+async function fileToUIPart(file) {
+	return {
+		filename: file.name,
+		mediaType: file.type || "application/octet-stream",
+		type: "file",
+		url: await fileToDataUrl(file)
+	};
+}
+function useAgentAttachments(options = {}) {
+	const files = ref([]);
+	const accept = computed(() => options.accept);
+	const revoke = (attachment) => {
+		if (attachment.previewUrl?.startsWith("blob:")) URL.revokeObjectURL(attachment.previewUrl);
+	};
+	const remove = (id) => {
+		const attachment = files.value.find((item) => item.id === id);
+		if (attachment) revoke(attachment);
+		files.value = files.value.filter((item) => item.id !== id);
+	};
+	const clear = () => {
+		files.value.forEach(revoke);
+		files.value = [];
+	};
+	const add = (input) => {
+		for (const file of Array.from(input)) {
+			if (!matchesAccept(file, options.accept)) {
+				options.onReject?.(file, "type");
+				continue;
+			}
+			if (options.maxSize !== void 0 && file.size > options.maxSize) {
+				options.onReject?.(file, "size");
+				continue;
+			}
+			if (options.multiple === false && files.value.length > 0 || options.maxFiles !== void 0 && files.value.length >= options.maxFiles) {
+				options.onReject?.(file, "count");
+				continue;
+			}
+			const previewUrl = file.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : void 0;
+			files.value.push({
+				file,
+				id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${file.name}`,
+				previewUrl
+			});
+		}
+	};
+	onScopeDispose(clear);
+	return {
+		accept,
+		add,
+		clear,
+		files,
+		inputProps: computed(() => ({
+			accept: options.accept,
+			multiple: options.multiple ?? true,
+			type: "file"
+		})),
+		remove,
+		async toFileParts() {
+			return Promise.all(files.value.map(({ file }) => fileToUIPart(file)));
+		}
+	};
+}
+//#endregion
+//#region src/internal/prompt-files.ts
+function nextPromptFiles(current, selected, multiple) {
+	return multiple ? [...current, ...selected] : selected.slice(-1);
+}
+//#endregion
+//#region src/components/prompt-input.ts
+const submitLabels = {
+	error: "Retry prompt",
+	ready: "Send prompt",
+	streaming: "Stop response",
+	submitted: "Stop response"
+};
+const submitIcons = {
+	error: "i-ph-arrow-clockwise",
+	ready: "i-ph-arrow-up",
+	streaming: "i-ph-stop-fill",
+	submitted: "i-ph-stop-fill"
+};
+/** Whether the device has only coarse pointers, such as a phone. A tablet with a trackpad or a mouse is not touch only. */
+function touchOnly() {
+	return typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches && !matchMedia("(any-pointer: fine)").matches;
+}
+const PromptInput = defineComponent({
+	name: "PromptInput",
+	inheritAttrs: false,
+	props: {
+		accept: { type: String },
+		attachments: {
+			default: true,
+			type: Boolean
+		},
+		files: {
+			default: () => [],
+			type: Array
+		},
+		filterFiles: { type: Function },
+		modelValue: {
+			default: "",
+			type: String
+		},
+		multiple: {
+			default: true,
+			type: Boolean
+		},
+		placeholder: { type: String },
+		status: {
+			default: "ready",
+			type: String
+		},
+		/** The name of the submit button while the status is `ready`. Default `Send prompt`. */
+		submitLabel: { type: String }
+	},
+	emits: [
+		"error",
+		"reload",
+		"submit",
+		"stop",
+		"update:files",
+		"update:modelValue"
+	],
+	setup(props, { attrs, emit, slots }) {
+		const input = ref(null);
+		const form = ref(null);
+		const pendingFiles = ref(0);
+		const preparingFiles = computed(() => pendingFiles.value > 0);
+		const canSubmit = computed(() => props.status === "ready" && !preparingFiles.value && (props.modelValue.trim().length > 0 || props.files.length > 0));
+		let disposed = false;
+		let nextBatch = 0;
+		const convertedBatches = /* @__PURE__ */ new Map();
+		onBeforeUnmount(() => {
+			disposed = true;
+		});
+		const UButton = resolveComponent("UButton");
+		const UIcon = resolveComponent("UIcon");
+		const remove = (index) => emit("update:files", props.files.filter((_, current) => current !== index));
+		const addFiles = async (input, onAccepted) => {
+			const batch = nextBatch++;
+			pendingFiles.value++;
+			try {
+				const rawFiles = Array.from(input);
+				const acceptedFiles = props.filterFiles?.(rawFiles) ?? rawFiles;
+				if (acceptedFiles.length === 0) return;
+				onAccepted?.();
+				const files = await Promise.all(Array.from(acceptedFiles, fileToUIPart));
+				if (!disposed) convertedBatches.set(batch, files);
+			} catch (error) {
+				if (!disposed) emit("error", error);
+			} finally {
+				pendingFiles.value--;
+				if (!disposed && pendingFiles.value === 0 && convertedBatches.size > 0) {
+					const files = [...convertedBatches].sort(([first], [second]) => first - second).flatMap(([, converted]) => converted);
+					convertedBatches.clear();
+					emit("update:files", nextPromptFiles(props.files, files, props.multiple));
+				}
+			}
+		};
+		const paste = async (event) => {
+			const clipboard = event.clipboardData;
+			if (!props.attachments || !clipboard) return;
+			const hasText = clipboard.getData("text/plain").length > 0;
+			const files = Array.from(clipboard.files).filter((file) => file.type.startsWith("image/") || !hasText);
+			if (files.length === 0) return;
+			await addFiles(files, () => event.preventDefault());
+		};
+		const submit = (event) => {
+			event.preventDefault();
+			if (!canSubmit.value) return;
+			emit("submit", {
+				files: props.files,
+				text: props.modelValue.trim()
+			});
+		};
+		const pressSubmit = () => {
+			if (props.status === "streaming" || props.status === "submitted") emit("stop");
+			else if (props.status === "error") emit("reload");
+			else form.value?.requestSubmit();
+		};
+		const attachments = () => h(AttachmentGroup, { "data-slot": "prompt-input-attachments" }, () => props.files.map((file, index) => {
+			const label = file.filename ?? file.mediaType;
+			const image = file.mediaType.startsWith("image/");
+			return h(Attachment, {
+				key: `${file.filename}-${index}`,
+				size: "xs"
+			}, () => [
+				h(AttachmentMedia, { variant: image ? "image" : "icon" }, () => image ? h(ImagePreview, {
+					alt: label,
+					compact: true,
+					src: file.url
+				}) : h(UIcon, { name: "i-ph-file-light" })),
+				h(AttachmentContent, () => h(AttachmentTitle, () => label)),
+				h(AttachmentActions, () => h(AttachmentAction, {
+					"aria-label": `Remove ${file.filename ?? "attachment"}`,
+					icon: "i-ph-x-light",
+					onClick: () => remove(index)
+				}))
+			]);
+		}));
+		return () => h("form", {
+			...attrs,
+			"data-slot": "prompt-input",
+			onSubmit: submit,
+			ref: form
+		}, [h("div", { "data-slot": "prompt-input-group" }, [
+			props.files.length > 0 || slots.files ? slots.files?.({
+				files: props.files,
+				remove
+			}) ?? attachments() : null,
+			h("textarea", {
+				"aria-label": attrs["aria-label"] ?? "Message",
+				"data-slot": "prompt-input-textarea",
+				onInput: (event) => emit("update:modelValue", event.target.value),
+				onKeydown: (event) => {
+					if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return;
+					if (touchOnly()) return;
+					event.preventDefault();
+					if (props.status === "ready") form.value?.requestSubmit();
+				},
+				onPaste: paste,
+				placeholder: props.placeholder,
+				rows: 1,
+				value: props.modelValue
+			}),
+			h("div", { "data-slot": "prompt-input-toolbar" }, [
+				props.attachments && h("input", {
+					accept: props.accept,
+					"aria-label": "Add attachment",
+					class: "vh-visually-hidden",
+					multiple: props.multiple,
+					onChange: async (event) => {
+						const target = event.currentTarget;
+						if (!(target instanceof HTMLInputElement)) return;
+						await addFiles(target.files ?? []);
+						target.value = "";
+					},
+					ref: input,
+					tabindex: -1,
+					type: "file"
+				}),
+				slots.actions?.() ?? (props.attachments && h(UButton, {
+					"aria-label": "Add attachment",
+					class: "rounded-full",
+					color: "neutral",
+					icon: "i-ph-plus",
+					onClick: () => input.value?.click(),
+					size: "sm",
+					square: true,
+					type: "button",
+					variant: "outline"
+				})),
+				slots["footer-leading"]?.(),
+				h("span", { "data-slot": "prompt-input-spacer" }),
+				slots.submit?.({
+					canSubmit: canSubmit.value,
+					preparingFiles: preparingFiles.value,
+					status: props.status
+				}) ?? h(UButton, {
+					"aria-label": props.status === "ready" && props.submitLabel ? props.submitLabel : submitLabels[props.status],
+					class: "rounded-full",
+					color: "neutral",
+					disabled: props.status === "ready" && !canSubmit.value,
+					icon: submitIcons[props.status],
+					loading: props.status === "ready" && preparingFiles.value,
+					onClick: pressSubmit,
+					size: "sm",
+					square: true,
+					type: "button",
+					variant: "solid"
+				})
+			])
+		])]);
+	}
+});
+//#endregion
+export { useAgentAttachments as i, fileToDataUrl as n, fileToUIPart as r, PromptInput as t };