@loopstack/loopstack-studio 0.21.0-rc.0 → 0.21.1

package/dist/components/LoadingCentered.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+var LoadingCentered_default = (i) => {
+	let o = c(16), s, l, u, d, f;
+	o[0] === i ? (s = o[1], l = o[2], u = o[3], d = o[4], f = o[5]) : ({loading: u, size: d, children: f, className: s, ...l} = i, o[0] = i, o[1] = s, o[2] = l, o[3] = u, o[4] = d, o[5] = f);
+	let p = u === void 0 ? !1 : u, m = d === void 0 ? 24 : d, h = f === void 0 ? null : f;
+	if (p) {
+		let r;
+		o[6] === s ? r = o[7] : (r = cn("flex items-center justify-center", s), o[6] = s, o[7] = r);
+		let i;
+		o[8] === m ? i = o[9] : (i = /* @__PURE__ */ jsx(Loader2, {
+			className: "animate-spin",
+			size: m
+		}), o[8] = m, o[9] = i);
+		let a;
+		return o[10] !== l || o[11] !== r || o[12] !== i ? (a = /* @__PURE__ */ jsx("div", {
+			className: r,
+			...l,
+			children: i
+		}), o[10] = l, o[11] = r, o[12] = i, o[13] = a) : a = o[13], a;
+	}
+	let g;
+	return o[14] === h ? g = o[15] : (g = /* @__PURE__ */ jsx(Fragment$1, { children: h }), o[14] = h, o[15] = g), g;
+};
+export { LoadingCentered_default as default };

package/dist/components/ai-elements/code-block.js

@@ -0,0 +1,96 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "../ui/button.js";
+import { codeToHtml } from "../../node_modules/shiki/dist/bundle-full.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+var CodeBlockContext = createContext({ code: "" }), lineNumberTransformer = {
+	name: "line-numbers",
+	line(n, l) {
+		n.children.unshift({
+			type: "element",
+			tagName: "span",
+			properties: { className: [
+				"inline-block",
+				"min-w-10",
+				"mr-4",
+				"text-right",
+				"select-none",
+				"text-muted-foreground"
+			] },
+			children: [{
+				type: "text",
+				value: String(l)
+			}]
+		});
+	}
+};
+async function highlightCode(n, u, d = !1) {
+	let f = d ? [lineNumberTransformer] : [];
+	return await Promise.all([codeToHtml(n, {
+		lang: u,
+		theme: "one-light",
+		transformers: f
+	}), codeToHtml(n, {
+		lang: u,
+		theme: "one-dark-pro",
+		transformers: f
+	})]);
+}
+const CodeBlock = (l) => {
+	let d = c(33), f, p, m, h, g, _;
+	d[0] === l ? (f = d[1], p = d[2], m = d[3], h = d[4], g = d[5], _ = d[6]) : ({code: m, language: h, showLineNumbers: _, className: p, children: f, ...g} = l, d[0] = l, d[1] = f, d[2] = p, d[3] = m, d[4] = h, d[5] = g, d[6] = _);
+	let v = _ === void 0 ? !1 : _, [y, b] = useState(""), [x, S] = useState(""), C = useRef(!1), w, T;
+	d[7] !== m || d[8] !== h || d[9] !== v ? (w = () => (highlightCode(m, h, v).then((n) => {
+		let [l, u] = n;
+		C.current ||= (b(l), S(u), !0);
+	}), () => {
+		C.current = !1;
+	}), T = [
+		m,
+		h,
+		v
+	], d[7] = m, d[8] = h, d[9] = v, d[10] = w, d[11] = T) : (w = d[10], T = d[11]), useEffect(w, T);
+	let E;
+	d[12] === m ? E = d[13] : (E = { code: m }, d[12] = m, d[13] = E);
+	let D;
+	d[14] === p ? D = d[15] : (D = cn("group bg-background text-foreground relative w-full overflow-hidden rounded-md border", p), d[14] = p, d[15] = D);
+	let O;
+	d[16] === y ? O = d[17] : (O = /* @__PURE__ */ jsx("div", {
+		className: "[&>pre]:bg-background! [&>pre]:text-foreground! overflow-hidden dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm",
+		dangerouslySetInnerHTML: { __html: y }
+	}), d[16] = y, d[17] = O);
+	let k;
+	d[18] === x ? k = d[19] : (k = /* @__PURE__ */ jsx("div", {
+		className: "[&>pre]:bg-background! [&>pre]:text-foreground! hidden overflow-hidden dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm",
+		dangerouslySetInnerHTML: { __html: x }
+	}), d[18] = x, d[19] = k);
+	let A;
+	d[20] === f ? A = d[21] : (A = f && /* @__PURE__ */ jsx("div", {
+		className: "absolute top-2 right-2 flex items-center gap-2",
+		children: f
+	}), d[20] = f, d[21] = A);
+	let j;
+	d[22] !== O || d[23] !== k || d[24] !== A ? (j = /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [
+			O,
+			k,
+			A
+		]
+	}), d[22] = O, d[23] = k, d[24] = A, d[25] = j) : j = d[25];
+	let M;
+	d[26] !== g || d[27] !== D || d[28] !== j ? (M = /* @__PURE__ */ jsx("div", {
+		className: D,
+		...g,
+		children: j
+	}), d[26] = g, d[27] = D, d[28] = j, d[29] = M) : M = d[29];
+	let N;
+	return d[30] !== M || d[31] !== E ? (N = /* @__PURE__ */ jsx(CodeBlockContext.Provider, {
+		value: E,
+		children: M
+	}), d[30] = M, d[31] = E, d[32] = N) : N = d[32], N;
+};
+export { CodeBlock };

package/dist/components/ai-elements/message.js

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { _r } from "../../node_modules/streamdown/dist/chunk-RLXIAIE6.js";
+import "../../node_modules/streamdown/dist/index.js";
+import "../ui/button-group.js";
+import { c } from "react/compiler-runtime";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, XIcon } from "lucide-react";
+const Message = (i) => {
+	let a = c(10), o, s, l;
+	a[0] === i ? (o = a[1], s = a[2], l = a[3]) : ({className: o, from: s, ...l} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = l);
+	let u = s === "user" ? "is-user ml-auto max-w-[80%] justify-end" : "is-assistant", f;
+	a[4] !== o || a[5] !== u ? (f = cn("group relative flex w-full flex-col gap-2 rounded-lg transition-colors", u, o), a[4] = o, a[5] = u, a[6] = f) : f = a[6];
+	let p;
+	return a[7] !== l || a[8] !== f ? (p = /* @__PURE__ */ jsx("div", {
+		className: f,
+		...l
+	}), a[7] = l, a[8] = f, a[9] = p) : p = a[9], p;
+}, MessageContent = (i) => {
+	let a = c(10), o, s, l;
+	a[0] === i ? (o = a[1], s = a[2], l = a[3]) : ({children: o, className: s, ...l} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = l);
+	let u;
+	a[4] === s ? u = a[5] : (u = cn("is-user:dark flex w-fit flex-col gap-2 overflow-hidden", "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3", "group-[.is-assistant]:text-foreground", s), a[4] = s, a[5] = u);
+	let f;
+	return a[6] !== o || a[7] !== l || a[8] !== u ? (f = /* @__PURE__ */ jsx("div", {
+		className: u,
+		...l,
+		children: o
+	}), a[6] = o, a[7] = l, a[8] = u, a[9] = f) : f = a[9], f;
+}, MessageActions = (i) => {
+	let a = c(10), o, s, l;
+	a[0] === i ? (o = a[1], s = a[2], l = a[3]) : ({className: s, children: o, ...l} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = l);
+	let u;
+	a[4] === s ? u = a[5] : (u = cn("absolute top-0 right-0 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", s), a[4] = s, a[5] = u);
+	let f;
+	return a[6] !== o || a[7] !== l || a[8] !== u ? (f = /* @__PURE__ */ jsx("div", {
+		className: u,
+		...l,
+		children: o
+	}), a[6] = o, a[7] = l, a[8] = u, a[9] = f) : f = a[9], f;
+}, MessageAction = (e) => {
+	let u = c(22), f, p, m, h, g, _;
+	u[0] === e ? (f = u[1], p = u[2], m = u[3], h = u[4], g = u[5], _ = u[6]) : ({tooltip: _, children: f, label: p, variant: h, size: g, ...m} = e, u[0] = e, u[1] = f, u[2] = p, u[3] = m, u[4] = h, u[5] = g, u[6] = _);
+	let v = h === void 0 ? "ghost" : h, y = g === void 0 ? "icon-sm" : g, b = p || _, x;
+	u[7] === b ? x = u[8] : (x = /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: b
+	}), u[7] = b, u[8] = x);
+	let S;
+	u[9] !== f || u[10] !== m || u[11] !== y || u[12] !== x || u[13] !== v ? (S = /* @__PURE__ */ jsxs(Button, {
+		size: y,
+		type: "button",
+		variant: v,
+		...m,
+		children: [f, x]
+	}), u[9] = f, u[10] = m, u[11] = y, u[12] = x, u[13] = v, u[14] = S) : S = u[14];
+	let C = S;
+	if (_) {
+		let e;
+		u[15] === C ? e = u[16] : (e = /* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: !0,
+			children: C
+		}), u[15] = C, u[16] = e);
+		let i;
+		u[17] === _ ? i = u[18] : (i = /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: _ }) }), u[17] = _, u[18] = i);
+		let d;
+		return u[19] !== e || u[20] !== i ? (d = /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [e, i] }) }), u[19] = e, u[20] = i, u[21] = d) : d = u[21], d;
+	}
+	return C;
+};
+createContext(null);
+const MessageResponse = memo((i) => {
+	let a = c(8), o, s;
+	a[0] === i ? (o = a[1], s = a[2]) : ({className: o, ...s} = i, a[0] = i, a[1] = o, a[2] = s);
+	let l;
+	a[3] === o ? l = a[4] : (l = cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", o), a[3] = o, a[4] = l);
+	let f;
+	return a[5] !== s || a[6] !== l ? (f = /* @__PURE__ */ jsx(_r, {
+		className: l,
+		...s
+	}), a[5] = s, a[6] = l, a[7] = f) : f = a[7], f;
+}, (e, i) => e.children === i.children);
+MessageResponse.displayName = "MessageResponse";
+export { Message, MessageAction, MessageActions, MessageContent, MessageResponse };

package/dist/components/ai-elements/prompt-input.js

@@ -0,0 +1,321 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "../ui/button.js";
+import "../ui/dropdown-menu.js";
+import "../ui/select.js";
+import { nanoid } from "../../node_modules/nanoid/index.browser.js";
+import "../ui/command.js";
+import "../ui/hover-card.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "../ui/input-group.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CornerDownLeftIcon, Loader2Icon, SquareIcon, XIcon } from "lucide-react";
+var PromptInputController = createContext(null), ProviderAttachmentsContext = createContext(null), useOptionalPromptInputController = () => useContext(PromptInputController), useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext), LocalAttachmentsContext = createContext(null);
+const usePromptInputAttachments = () => {
+	let e = useOptionalProviderAttachments(), t = useContext(LocalAttachmentsContext), n = e ?? t;
+	if (!n) throw Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider");
+	return n;
+}, PromptInput = (r) => {
+	let i = c(94), a, o, s, l, u, f, _, v, y, b, x;
+	i[0] === r ? (a = i[1], o = i[2], s = i[3], l = i[4], u = i[5], f = i[6], _ = i[7], v = i[8], y = i[9], b = i[10], x = i[11]) : ({className: s, accept: a, multiple: _, globalDrop: l, syncHiddenInput: x, maxFiles: f, maxFileSize: u, onError: v, onSubmit: y, children: o, ...b} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = l, i[5] = u, i[6] = f, i[7] = _, i[8] = v, i[9] = y, i[10] = b, i[11] = x);
+	let S = useOptionalPromptInputController(), C = !!S, T = useRef(null), le = useRef(null), ue = useRef(null), de, fe;
+	i[12] === Symbol.for("react.memo_cache_sentinel") ? (de = () => {
+		let e = le.current?.closest("form");
+		e instanceof HTMLFormElement && (ue.current = e);
+	}, fe = [], i[12] = de, i[13] = fe) : (de = i[12], fe = i[13]), useEffect(de, fe);
+	let pe;
+	i[14] === Symbol.for("react.memo_cache_sentinel") ? (pe = [], i[14] = pe) : pe = i[14];
+	let [me, he] = useState(pe), E = C ? S.attachments.files : me, D;
+	i[15] === Symbol.for("react.memo_cache_sentinel") ? (D = () => {
+		T.current?.click();
+	}, i[15] = D) : D = i[15];
+	let ge = D, O;
+	i[16] === a ? O = i[17] : (O = (e) => !a || a.trim() === "" ? !0 : a.includes("image/*") ? e.type.startsWith("image/") : !0, i[16] = a, i[17] = O);
+	let _e = O, k;
+	i[18] !== _e || i[19] !== u || i[20] !== f || i[21] !== v ? (k = (e) => {
+		let n = Array.from(e), r = n.filter((e) => _e(e));
+		if (n.length && r.length === 0) {
+			v?.({
+				code: "accept",
+				message: "No files match the accepted types."
+			});
+			return;
+		}
+		let i = r.filter((e) => u ? e.size <= u : !0);
+		if (r.length > 0 && i.length === 0) {
+			v?.({
+				code: "max_file_size",
+				message: "All files exceed the maximum size."
+			});
+			return;
+		}
+		he((e) => {
+			let n = typeof f == "number" ? Math.max(0, f - e.length) : void 0, r = typeof n == "number" ? i.slice(0, n) : i;
+			typeof n == "number" && i.length > n && v?.({
+				code: "max_files",
+				message: "Too many files. Some were not added."
+			});
+			let a = [];
+			for (let e of r) a.push({
+				id: nanoid(),
+				type: "file",
+				url: URL.createObjectURL(e),
+				mediaType: e.type,
+				filename: e.name
+			});
+			return e.concat(a);
+		});
+	}, i[18] = _e, i[19] = u, i[20] = f, i[21] = v, i[22] = k) : k = i[22];
+	let ve = k, A;
+	i[23] !== ve || i[24] !== S || i[25] !== C ? (A = C ? (e) => S.attachments.add(e) : ve, i[23] = ve, i[24] = S, i[25] = C, i[26] = A) : A = i[26];
+	let j = A, M;
+	i[27] !== S || i[28] !== C ? (M = C ? (e) => S.attachments.remove(e) : (e) => he((t) => {
+		let n = t.find((t) => t.id === e);
+		return n?.url && URL.revokeObjectURL(n.url), t.filter((t) => t.id !== e);
+	}), i[27] = S, i[28] = C, i[29] = M) : M = i[29];
+	let ye = M, N;
+	i[30] !== S || i[31] !== C ? (N = C ? () => S.attachments.clear() : () => he(_temp4), i[30] = S, i[31] = C, i[32] = N) : N = i[32];
+	let P = N, F;
+	i[33] !== S || i[34] !== C ? (F = C ? () => S.attachments.openFileDialog() : ge, i[33] = S, i[34] = C, i[35] = F) : F = i[35];
+	let be = F, I, L;
+	i[36] !== S || i[37] !== C ? (I = () => {
+		C && S.__registerFileInput(T, () => T.current?.click());
+	}, L = [C, S], i[36] = S, i[37] = C, i[38] = I, i[39] = L) : (I = i[38], L = i[39]), useEffect(I, L);
+	let R;
+	i[40] !== E.length || i[41] !== x ? (R = () => {
+		x && T.current && E.length === 0 && (T.current.value = "");
+	}, i[40] = E.length, i[41] = x, i[42] = R) : R = i[42];
+	let z;
+	i[43] !== E || i[44] !== x ? (z = [E, x], i[43] = E, i[44] = x, i[45] = z) : z = i[45], useEffect(R, z);
+	let B, V;
+	i[46] === j ? (B = i[47], V = i[48]) : (B = () => {
+		let e = ue.current;
+		if (!e) return;
+		let t = _temp5, n = (e) => {
+			e.dataTransfer?.types?.includes("Files") && e.preventDefault(), e.dataTransfer?.files && e.dataTransfer.files.length > 0 && j(e.dataTransfer.files);
+		};
+		return e.addEventListener("dragover", t), e.addEventListener("drop", n), () => {
+			e.removeEventListener("dragover", t), e.removeEventListener("drop", n);
+		};
+	}, V = [j], i[46] = j, i[47] = B, i[48] = V), useEffect(B, V);
+	let H, U;
+	i[49] !== j || i[50] !== l ? (H = () => {
+		if (!l) return;
+		let e = _temp6, t = (e) => {
+			e.dataTransfer?.types?.includes("Files") && e.preventDefault(), e.dataTransfer?.files && e.dataTransfer.files.length > 0 && j(e.dataTransfer.files);
+		};
+		return document.addEventListener("dragover", e), document.addEventListener("drop", t), () => {
+			document.removeEventListener("dragover", e), document.removeEventListener("drop", t);
+		};
+	}, U = [j, l], i[49] = j, i[50] = l, i[51] = H, i[52] = U) : (H = i[51], U = i[52]), useEffect(H, U);
+	let W, G;
+	i[53] !== E || i[54] !== C ? (W = () => () => {
+		if (!C) for (let e of E) e.url && URL.revokeObjectURL(e.url);
+	}, G = [C, E], i[53] = E, i[54] = C, i[55] = W, i[56] = G) : (W = i[55], G = i[56]), useEffect(W, G);
+	let K;
+	i[57] === j ? K = i[58] : (K = (e) => {
+		e.currentTarget.files && j(e.currentTarget.files);
+	}, i[57] = j, i[58] = K);
+	let xe = K, Se = _temp7, q;
+	i[59] === E ? q = i[60] : (q = E.map(_temp8), i[59] = E, i[60] = q);
+	let Ce;
+	i[61] !== j || i[62] !== P || i[63] !== be || i[64] !== ye || i[65] !== q ? (Ce = {
+		files: q,
+		add: j,
+		remove: ye,
+		clear: P,
+		openFileDialog: be,
+		fileInputRef: T
+	}, i[61] = j, i[62] = P, i[63] = be, i[64] = ye, i[65] = q, i[66] = Ce) : Ce = i[66];
+	let we = Ce, Te;
+	i[67] !== P || i[68] !== S || i[69] !== E || i[70] !== y || i[71] !== C ? (Te = (e) => {
+		e.preventDefault();
+		let t = e.currentTarget, n = C ? S.textInput.value : (() => new FormData(t).get("message") || "")();
+		C || t.reset(), Promise.all(E.map(async (e) => {
+			let { id: t, ...n } = e;
+			return n.url && n.url.startsWith("blob:") ? {
+				...n,
+				url: await Se(n.url)
+			} : n;
+		})).then((t) => {
+			try {
+				let r = y({
+					text: n,
+					files: t
+				}, e);
+				r instanceof Promise ? r.then(() => {
+					P(), C && S.textInput.clear();
+				}).catch(_temp9) : (P(), C && S.textInput.clear());
+			} catch {}
+		});
+	}, i[67] = P, i[68] = S, i[69] = E, i[70] = y, i[71] = C, i[72] = Te) : Te = i[72];
+	let Ee = Te, J;
+	i[73] === Symbol.for("react.memo_cache_sentinel") ? (J = /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "hidden",
+		ref: le
+	}), i[73] = J) : J = i[73];
+	let Y;
+	i[74] !== a || i[75] !== xe || i[76] !== _ ? (Y = /* @__PURE__ */ jsx("input", {
+		accept: a,
+		"aria-label": "Upload files",
+		className: "hidden",
+		multiple: _,
+		onChange: xe,
+		ref: T,
+		title: "Upload files",
+		type: "file"
+	}), i[74] = a, i[75] = xe, i[76] = _, i[77] = Y) : Y = i[77];
+	let X;
+	i[78] === s ? X = i[79] : (X = cn("w-full", s), i[78] = s, i[79] = X);
+	let Z;
+	i[80] === o ? Z = i[81] : (Z = /* @__PURE__ */ jsx(InputGroup, {
+		className: "overflow-hidden",
+		children: o
+	}), i[80] = o, i[81] = Z);
+	let Q;
+	i[82] !== Ee || i[83] !== b || i[84] !== X || i[85] !== Z ? (Q = /* @__PURE__ */ jsx("form", {
+		className: X,
+		onSubmit: Ee,
+		...b,
+		children: Z
+	}), i[82] = Ee, i[83] = b, i[84] = X, i[85] = Z, i[86] = Q) : Q = i[86];
+	let De;
+	i[87] !== Y || i[88] !== Q ? (De = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		J,
+		Y,
+		Q
+	] }), i[87] = Y, i[88] = Q, i[89] = De) : De = i[89];
+	let Oe = De, $;
+	return i[90] !== we || i[91] !== Oe || i[92] !== C ? ($ = C ? Oe : /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, {
+		value: we,
+		children: Oe
+	}), i[90] = we, i[91] = Oe, i[92] = C, i[93] = $) : $ = i[93], $;
+}, PromptInputBody = (t) => {
+	let n = c(8), r, i;
+	n[0] === t ? (r = n[1], i = n[2]) : ({className: r, ...i} = t, n[0] = t, n[1] = r, n[2] = i);
+	let a;
+	n[3] === r ? a = n[4] : (a = cn("contents", r), n[3] = r, n[4] = a);
+	let o;
+	return n[5] !== i || n[6] !== a ? (o = /* @__PURE__ */ jsx("div", {
+		className: a,
+		...i
+	}), n[5] = i, n[6] = a, n[7] = o) : o = n[7], o;
+}, PromptInputTextarea = (t) => {
+	let n = c(24), r, i, o, s;
+	n[0] === t ? (r = n[1], i = n[2], o = n[3], s = n[4]) : ({onChange: i, className: r, placeholder: s, ...o} = t, n[0] = t, n[1] = r, n[2] = i, n[3] = o, n[4] = s);
+	let l = s === void 0 ? "What would you like to know?" : s, u = useOptionalPromptInputController(), d = usePromptInputAttachments(), [f, p] = useState(!1), h;
+	n[5] !== d || n[6] !== f ? (h = (e) => {
+		if (e.key === "Enter") {
+			if (f || e.nativeEvent.isComposing || e.shiftKey) return;
+			e.preventDefault();
+			let t = e.currentTarget.form;
+			if (t?.querySelector("button[type=\"submit\"]")?.disabled) return;
+			t?.requestSubmit();
+		}
+		if (e.key === "Backspace" && e.currentTarget.value === "" && d.files.length > 0) {
+			e.preventDefault();
+			let t = d.files.at(-1);
+			t && d.remove(t.id);
+		}
+	}, n[5] = d, n[6] = f, n[7] = h) : h = n[7];
+	let g = h, _;
+	n[8] === d ? _ = n[9] : (_ = (e) => {
+		let t = e.clipboardData?.items;
+		if (!t) return;
+		let n = [];
+		for (let e of t) if (e.kind === "file") {
+			let t = e.getAsFile();
+			t && n.push(t);
+		}
+		n.length > 0 && (e.preventDefault(), d.add(n));
+	}, n[8] = d, n[9] = _);
+	let v = _, y;
+	n[10] !== u || n[11] !== i ? (y = u ? {
+		value: u.textInput.value,
+		onChange: (e) => {
+			u.textInput.setInput(e.currentTarget.value), i?.(e);
+		}
+	} : { onChange: i }, n[10] = u, n[11] = i, n[12] = y) : y = n[12];
+	let b = y, x;
+	n[13] === r ? x = n[14] : (x = cn("field-sizing-content max-h-48 min-h-16 text-base md:text-base", r), n[13] = r, n[14] = x);
+	let S, C;
+	n[15] === Symbol.for("react.memo_cache_sentinel") ? (S = () => p(!1), C = () => p(!0), n[15] = S, n[16] = C) : (S = n[15], C = n[16]);
+	let w;
+	return n[17] !== b || n[18] !== g || n[19] !== v || n[20] !== l || n[21] !== o || n[22] !== x ? (w = /* @__PURE__ */ jsx(InputGroupTextarea, {
+		className: x,
+		name: "message",
+		onCompositionEnd: S,
+		onCompositionStart: C,
+		onKeyDown: g,
+		onPaste: v,
+		placeholder: l,
+		...o,
+		...b
+	}), n[17] = b, n[18] = g, n[19] = v, n[20] = l, n[21] = o, n[22] = x, n[23] = w) : w = n[23], w;
+}, PromptInputFooter = (t) => {
+	let n = c(8), i, a;
+	n[0] === t ? (i = n[1], a = n[2]) : ({className: i, ...a} = t, n[0] = t, n[1] = i, n[2] = a);
+	let o;
+	n[3] === i ? o = n[4] : (o = cn("justify-between gap-1", i), n[3] = i, n[4] = o);
+	let s;
+	return n[5] !== a || n[6] !== o ? (s = /* @__PURE__ */ jsx(InputGroupAddon, {
+		align: "block-end",
+		className: o,
+		...a
+	}), n[5] = a, n[6] = o, n[7] = s) : s = n[7], s;
+}, PromptInputSubmit = (t) => {
+	let n = c(19), r, a, o, s, l, u;
+	n[0] === t ? (r = n[1], a = n[2], o = n[3], s = n[4], l = n[5], u = n[6]) : ({className: a, variant: l, size: u, status: s, children: r, ...o} = t, n[0] = t, n[1] = r, n[2] = a, n[3] = o, n[4] = s, n[5] = l, n[6] = u);
+	let d = l === void 0 ? "default" : l, f = u === void 0 ? "icon-sm" : u, p;
+	n[7] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4" }), n[7] = p) : p = n[7];
+	let m = p;
+	if (s === "submitted") {
+		let e;
+		n[8] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }), n[8] = e) : e = n[8], m = e;
+	} else if (s === "streaming") {
+		let e;
+		n[9] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" }), n[9] = e) : e = n[9], m = e;
+	} else if (s === "error") {
+		let e;
+		n[10] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(XIcon, { className: "size-4" }), n[10] = e) : e = n[10], m = e;
+	}
+	let h;
+	n[11] === a ? h = n[12] : (h = cn(a), n[11] = a, n[12] = h);
+	let g = r ?? m, x;
+	return n[13] !== o || n[14] !== f || n[15] !== h || n[16] !== g || n[17] !== d ? (x = /* @__PURE__ */ jsx(InputGroupButton, {
+		"aria-label": "Submit",
+		className: h,
+		size: f,
+		type: "submit",
+		variant: d,
+		...o,
+		children: g
+	}), n[13] = o, n[14] = f, n[15] = h, n[16] = g, n[17] = d, n[18] = x) : x = n[18], x;
+};
+function _temp4(e) {
+	for (let t of e) t.url && URL.revokeObjectURL(t.url);
+	return [];
+}
+function _temp5(e) {
+	e.dataTransfer?.types?.includes("Files") && e.preventDefault();
+}
+function _temp6(e) {
+	e.dataTransfer?.types?.includes("Files") && e.preventDefault();
+}
+async function _temp7(e) {
+	let t = await (await fetch(e)).blob();
+	return new Promise((e, n) => {
+		let r = new FileReader();
+		r.onloadend = () => e(r.result), r.onerror = n, r.readAsDataURL(t);
+	});
+}
+function _temp8(e) {
+	return {
+		...e,
+		id: e.id
+	};
+}
+function _temp9() {}
+export { PromptInput, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea };

package/dist/components/ai-elements/reasoning.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { _r } from "../../node_modules/streamdown/dist/chunk-RLXIAIE6.js";
+import "../../node_modules/streamdown/dist/index.js";
+import { Shimmer } from "./shimmer.js";
+import { c } from "react/compiler-runtime";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+var ReasoningContext = createContext(null), useReasoning = () => {
+	let t = useContext(ReasoningContext);
+	if (!t) throw Error("Reasoning components must be used within Reasoning");
+	return t;
+}, AUTO_CLOSE_DELAY = 1e3, MS_IN_S = 1e3;
+const Reasoning = memo((o) => {
+	let s = c(45), l, u, d, f, p, g, _, v;
+	s[0] === o ? (l = s[1], u = s[2], d = s[3], f = s[4], p = s[5], g = s[6], _ = s[7], v = s[8]) : ({className: u, isStreaming: _, open: p, defaultOpen: v, onOpenChange: f, duration: d, children: l, ...g} = o, s[0] = o, s[1] = l, s[2] = u, s[3] = d, s[4] = f, s[5] = p, s[6] = g, s[7] = _, s[8] = v);
+	let y = _ === void 0 ? !1 : _, S = v === void 0 ? !0 : v, C;
+	s[9] !== S || s[10] !== f || s[11] !== p ? (C = {
+		prop: p,
+		defaultProp: S,
+		onChange: f
+	}, s[9] = S, s[10] = f, s[11] = p, s[12] = C) : C = s[12];
+	let [w, T] = useControllableState(C), E;
+	s[13] === d ? E = s[14] : (E = {
+		prop: d,
+		defaultProp: void 0
+	}, s[13] = d, s[14] = E);
+	let [D, O] = useControllableState(E), [k, A] = useState(!1), [j, M] = useState(null), N, P;
+	s[15] !== y || s[16] !== O || s[17] !== j ? (N = () => {
+		y ? j === null && M(Date.now()) : j !== null && (O(Math.ceil((Date.now() - j) / MS_IN_S)), M(null));
+	}, P = [
+		y,
+		j,
+		O
+	], s[15] = y, s[16] = O, s[17] = j, s[18] = N, s[19] = P) : (N = s[18], P = s[19]), useEffect(N, P);
+	let F, I;
+	s[20] !== S || s[21] !== k || s[22] !== w || s[23] !== y || s[24] !== T ? (F = () => {
+		if (S && !y && w && !k) {
+			let t = setTimeout(() => {
+				T(!1), A(!0);
+			}, AUTO_CLOSE_DELAY);
+			return () => clearTimeout(t);
+		}
+	}, I = [
+		y,
+		w,
+		S,
+		T,
+		k
+	], s[20] = S, s[21] = k, s[22] = w, s[23] = y, s[24] = T, s[25] = F, s[26] = I) : (F = s[25], I = s[26]), useEffect(F, I);
+	let L;
+	s[27] === T ? L = s[28] : (L = (t) => {
+		T(t);
+	}, s[27] = T, s[28] = L);
+	let R = L, z;
+	s[29] !== D || s[30] !== w || s[31] !== y || s[32] !== T ? (z = {
+		isStreaming: y,
+		isOpen: w,
+		setIsOpen: T,
+		duration: D
+	}, s[29] = D, s[30] = w, s[31] = y, s[32] = T, s[33] = z) : z = s[33];
+	let B;
+	s[34] === u ? B = s[35] : (B = cn("not-prose mb-4", u), s[34] = u, s[35] = B);
+	let V;
+	s[36] !== l || s[37] !== R || s[38] !== w || s[39] !== g || s[40] !== B ? (V = /* @__PURE__ */ jsx(Collapsible, {
+		className: B,
+		onOpenChange: R,
+		open: w,
+		...g,
+		children: l
+	}), s[36] = l, s[37] = R, s[38] = w, s[39] = g, s[40] = B, s[41] = V) : V = s[41];
+	let H;
+	return s[42] !== z || s[43] !== V ? (H = /* @__PURE__ */ jsx(ReasoningContext.Provider, {
+		value: z,
+		children: V
+	}), s[42] = z, s[43] = V, s[44] = H) : H = s[44], H;
+});
+var getThinkingMessage = (t, a) => t || a === 0 ? /* @__PURE__ */ jsx(Shimmer, {
+	duration: 1,
+	children: "Thinking..."
+}) : a === void 0 ? /* @__PURE__ */ jsx("p", { children: "Thought for a few seconds" }) : /* @__PURE__ */ jsxs("p", { children: [
+	"Thought for ",
+	a,
+	" seconds"
+] });
+const ReasoningTrigger = memo((a) => {
+	let o = c(15), l, u, d;
+	o[0] === a ? (l = o[1], u = o[2], d = o[3]) : ({className: u, children: l, ...d} = a, o[0] = a, o[1] = l, o[2] = u, o[3] = d);
+	let { isStreaming: f, isOpen: p, duration: m } = useReasoning(), h;
+	o[4] === u ? h = o[5] : (h = cn("text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors", u), o[4] = u, o[5] = h);
+	let b;
+	o[6] !== l || o[7] !== m || o[8] !== p || o[9] !== f ? (b = l ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+		getThinkingMessage(f, m),
+		/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4 transition-transform", p ? "rotate-180" : "rotate-0") })
+	] }), o[6] = l, o[7] = m, o[8] = p, o[9] = f, o[10] = b) : b = o[10];
+	let x;
+	return o[11] !== d || o[12] !== h || o[13] !== b ? (x = /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		className: h,
+		...d,
+		children: b
+	}), o[11] = d, o[12] = h, o[13] = b, o[14] = x) : x = o[14], x;
+}), ReasoningContent = memo((a) => {
+	let s = c(13), u, d, f;
+	s[0] === a ? (u = s[1], d = s[2], f = s[3]) : ({className: d, children: u, ...f} = a, s[0] = a, s[1] = u, s[2] = d, s[3] = f);
+	let p;
+	s[4] === d ? p = s[5] : (p = cn("mt-4 text-sm", "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none", d), s[4] = d, s[5] = p);
+	let m;
+	s[6] !== u || s[7] !== f ? (m = /* @__PURE__ */ jsx(_r, {
+		...f,
+		children: u
+	}), s[6] = u, s[7] = f, s[8] = m) : m = s[8];
+	let h;
+	return s[9] !== f || s[10] !== p || s[11] !== m ? (h = /* @__PURE__ */ jsx(CollapsibleContent, {
+		className: p,
+		...f,
+		children: m
+	}), s[9] = f, s[10] = p, s[11] = m, s[12] = h) : h = s[12], h;
+});
+Reasoning.displayName = "Reasoning", ReasoningTrigger.displayName = "ReasoningTrigger", ReasoningContent.displayName = "ReasoningContent";
+export { Reasoning, ReasoningContent, ReasoningTrigger };