@thewhatmatters/wmds 0.4.0 → 0.4.2

package/dist/components/organisms/ChatDock/ChatDock.js

@@ -1,255 +1,697 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { motionBeatSeconds as t, motionTransitionProp as n, readMotionDurationSeconds as ee } from "../../../lib/motion.js";
-import { ButtonIcon as r } from "../../atoms/Button/ButtonIcon.js";
-import { Button as i } from "../../atoms/Button/Button.js";
-import { Status as te } from "../../atoms/Status/Status.js";
-import { PromptBar as a } from "../../molecules/PromptBar/PromptBar.js";
+import { motionBeatSeconds as t, motionStaggerSeconds as n, motionTransitionProp as r, readMotionDurationSeconds as i } from "../../../lib/motion.js";
+import { ButtonIcon as a } from "../../atoms/Button/ButtonIcon.js";
+import { Button as o } from "../../atoms/Button/Button.js";
+import { IconButton as s } from "../../atoms/IconButton/IconButton.js";
+import { Status as ee } from "../../atoms/Status/Status.js";
+import { PromptBar as te } from "../../molecules/PromptBar/PromptBar.js";
 import { OverlayPanelHeader as ne } from "../Dialog/OverlayPanelHeader.js";
-import { chatDockAssistantMessageClasses as o, chatDockComposerClasses as re, chatDockDisclaimerClasses as ie, chatDockDockClasses as ae, chatDockGridClasses as oe, chatDockPillClasses as se, chatDockPillsClasses as ce, chatDockPlacements as s, chatDockRootClasses as le, chatDockSuggestionLabelClasses as ue, chatDockSuggestionListClasses as de, chatDockSuggestionRowContentClasses as fe, chatDockThinkingClasses as pe, chatDockThreadClasses as me, chatDockUserMessageClasses as he, chatDockWindowClasses as ge } from "./chatDockStyles.js";
-import { useEffect as _e, useId as c, useLayoutEffect as ve, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { AnimatePresence as p, motion as m, useReducedMotion as ye } from "motion/react";
+import { subscribeChatDockViewport as re, useChatDockVisibleArea as ie, useChatDockWide as ae } from "./chatDockViewport.js";
+import { ChatDockGate as c, chatDockGateDefaultLabels as l } from "./ChatDockGate.js";
+import { chatDockAssistantMessageClasses as u, chatDockComposerAreaClasses as oe, chatDockComposerClasses as se, chatDockComposerFootSpacerClasses as ce, chatDockComposerLayerClasses as le, chatDockDisclaimerClasses as ue, chatDockDockClasses as de, chatDockDockHoverClasses as fe, chatDockFollowUpRowClasses as pe, chatDockFollowUpsComposerClasses as me, chatDockFollowUpsInlineClasses as he, chatDockGridClasses as ge, chatDockMarkClasses as _e, chatDockPillClasses as ve, chatDockPillsClasses as ye, chatDockPlacements as d, chatDockReplyActionsClasses as be, chatDockReplyActionsPendingClasses as xe, chatDockReplyButtonsClasses as Se, chatDockReplyClasses as Ce, chatDockReplyMetaClasses as we, chatDockRootClasses as Te, chatDockRootRaisedClasses as Ee, chatDockSuggestionLabelClasses as De, chatDockSuggestionListClasses as Oe, chatDockSuggestionRowContentClasses as ke, chatDockThinkingClasses as Ae, chatDockThreadClasses as je, chatDockUserMessageClasses as Me, chatDockWindowClasses as Ne, chatDockWindowContentClasses as Pe } from "./chatDockStyles.js";
+import { useContext as Fe, useEffect as f, useId as Ie, useLayoutEffect as p, useRef as m, useState as h, useSyncExternalStore as Le } from "react";
+import { Check as Re, Copy as ze, CornerDownRight as Be, ThumbsDown as Ve, ThumbsUp as He } from "lucide-react";
+import { Fragment as Ue, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AnimatePresence as v, MotionConfigContext as We, motion as y, useReducedMotion as Ge } from "motion/react";
 //#region src/components/organisms/ChatDock/ChatDock.tsx
-var h = {
+var Ke = {
 	close: "Close chat",
 	thinking: "Thinking…",
 	conversation: "Conversation",
 	suggestions: "Suggested questions",
+	followUps: "Suggested follow-ups",
 	field: "Ask anything",
-	send: "Send"
-};
-function g(e) {
+	send: "Send",
+	copy: "Copy reply",
+	copied: "Copied",
+	helpful: "Mark this reply helpful",
+	notHelpful: "Mark this reply not helpful"
+}, b = ["inline", "composer"];
+function qe(e) {
 	return e.filter((e) => e.prompt != null && e.prompt.trim() !== "");
 }
-function _(e, t) {
+function Je(e, t) {
 	return e.length > 0 && t.length === 0;
 }
-var v = 48, y = "inset(calc(100% - 3.25rem) 0rem 0rem 0rem round 1.625rem)", b = "inset(calc(0% - 0rem) 0rem 0rem 0rem round 1rem)";
-function x({ title: s, subtitle: x, mark: S, greeting: C, messages: w = [], thinking: be = !1, suggestions: T = [], onSend: xe, onSuggestionSelect: Se, open: E, defaultOpen: D = !1, onOpenChange: Ce, placeholder: O, disclaimer: k, labels: A, placement: j = "fixed", className: we }) {
-	let M = {
-		...h,
-		...A
-	}, N = c(), P = c(), F = ye(), I = E !== void 0, [Te, Ee] = u(D), L = I ? E : Te, [R, z] = u(""), B = l(null), V = l(null), H = l(null), U = l(!0), W = l(!1), G = l(L), K = l(L);
-	function q(e) {
-		e !== L && (I || Ee(e), Ce?.(e));
+function Ye({ followUps: e, messages: t, thinking: n, sentAfterId: r }) {
+	let i = t[t.length - 1];
+	return e.length > 0 && !n && i?.role === "assistant" && i.id !== r;
+}
+function Xe({ message: e, isLatest: t, thinking: n, takesVotes: r }) {
+	if (e.role !== "assistant") return null;
+	let i = {
+		copy: e.copyText != null,
+		vote: r && e.feedback !== void 0,
+		meta: e.meta != null
+	};
+	return !i.copy && !i.vote && !i.meta ? null : {
+		...i,
+		ready: !(t && n)
+	};
+}
+var Ze = 2e3, Qe = 48;
+function $e() {
+	return window.innerHeight;
+}
+function et() {
+	return Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+}
+function x(e, t, n) {
+	return e === "inline" ? 32 * n : Math.max(0, Math.min(40 * n, t - 7 * n));
+}
+var S = 7, C = 12;
+function tt({ windowHeight: e, headerHeight: t, bottomInset: n, remPx: r }) {
+	let i = r + t + .75 * r + S * r + .75 * r + n;
+	return Math.round(Math.max(C * r, e - i));
+}
+function w({ title: c, subtitle: l, mark: d, greeting: b, messages: S = [], thinking: C = !1, suggestions: w = [], onSend: nt, onSuggestionSelect: rt, followUps: T = [], followUpsPlacement: it = "inline", onMessageFeedback: at, gate: ot, open: st, defaultOpen: ct = !1, onOpenChange: lt, placeholder: ut, disclaimer: E, labels: dt, placement: D = "fixed", className: ft }) {
+	let O = {
+		...Ke,
+		...dt
+	}, pt = Ie(), mt = Ie(), { reducedMotion: ht } = Fe(We), k = Ge() === !0 || ht === "always", A = ae(), gt = Le(re, $e, () => 800), j = Le(re, et, () => 16), _t = st !== void 0, [vt, yt] = h(ct), M = _t ? st : vt, [bt, xt] = h(""), [St, Ct] = h(null), [N, wt] = h(null), [Tt, Et] = h(!M);
+	M && Tt && Et(!1);
+	let P = !M && Tt, F = ot != null, I = F && M, [Dt, Ot] = h(I), [L, R] = h(!1);
+	Dt !== I && (Ot(I), R(!0));
+	let [kt, At] = h(null), [jt, Mt] = h(!I);
+	I && jt && Mt(!1);
+	let [Nt, Pt] = h(I);
+	!I && Nt && Pt(!1);
+	let z = ie(D === "fixed" && !A && !P), B = m(null), Ft = m(null), It = m(null), Lt = m(null), Rt = m(null), V = m(null), zt = m(null), Bt = m(F), H = m(I), U = m(null), Vt = m(null), Ht = m(!0), W = m(!1), Ut = m(M), Wt = m(M);
+	function G(e) {
+		e !== M && (_t || yt(e), lt?.(e));
 	}
-	function J(e) {
+	function Gt(e) {
 		let t = e.trim();
-		t !== "" && (q(!0), U.current = !0, z(""), xe(t));
+		t !== "" && (G(!0), Ht.current = !0, xt(""), Ct(S[S.length - 1]?.id ?? null), nt(t));
+	}
+	function Kt(e) {
+		rt?.(e), e.prompt != null && Gt(e.prompt);
 	}
-	function Y(e) {
-		Se?.(e), e.prompt != null && J(e.prompt);
+	function qt(e) {
+		let t = e.copyText, n = typeof navigator > "u" ? void 0 : navigator.clipboard;
+		t != null && n != null && n.writeText(t).then(() => wt({
+			id: e.id,
+			at: Date.now()
+		}), () => void 0);
 	}
-	_e(() => {
-		L && !G.current ? V.current?.focus() : !L && G.current && (K.current = !1, W.current = !0, B.current?.focus(), W.current = !1), G.current = L;
-	}, [L]), ve(() => {
-		let e = H.current;
-		e != null && U.current && (e.scrollTop = e.scrollHeight);
+	f(() => {
+		if (N == null) return;
+		let e = window.setTimeout(() => wt(null), Ze);
+		return () => window.clearTimeout(e);
+	}, [N]);
+	function Jt(e) {
+		Kt(e), U.current?.focus();
+	}
+	function Yt(e) {
+		Kt(e), e.prompt != null && U.current?.focus();
+	}
+	f(() => {
+		Wt.current = M;
+		let e = U.current;
+		if (e != null && M && !Ut.current) document.activeElement !== e && e.focus();
+		else if (e != null && !M && Ut.current) {
+			let t = document.activeElement, n = t == null || t === document.body || B.current?.contains(t) === !0;
+			t !== e && n && (W.current = !0, e.focus(), W.current = !1);
+		}
+		Ut.current = M;
+	}, [M]), f(() => {
+		F && !Bt.current && !Wt.current && G(!0), Bt.current = F;
+	}), f(() => {
+		if (I && !H.current) {
+			let e = zt.current;
+			(e?.querySelector("[data-chat-dock-gate-focus]") ?? e)?.focus({ preventScroll: !0 });
+		} else if (!I && H.current && M) {
+			let e = U.current, t = document.activeElement, n = t == null || t === document.body || B.current?.contains(t) === !0;
+			e != null && n && (W.current = !0, e.focus({ preventScroll: !0 }), W.current = !1);
+		}
+		H.current = I;
+	}, [I, M]), f(() => {
+		if (!L) return;
+		let e = (i("fast") + i("medium")) * 1e3 + 100, t = window.setTimeout(() => R(!1), e);
+		return () => window.clearTimeout(t);
+	}, [L]), p(() => {
+		let e = Rt.current;
+		if (e == null || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => At(e.offsetHeight));
+		return t.observe(e), () => {
+			t.disconnect();
+		};
+	}, []);
+	let Xt = E != null, K = D === "fixed" && !A ? "rise" : "grow";
+	p(() => {
+		let e = B.current, t = It.current, n = Lt.current;
+		if (e == null || t == null || n == null) return;
+		let r = () => {
+			let r = K === "rise" ? Math.max(0, window.innerHeight - z.bottom - e.getBoundingClientRect().bottom) : 0;
+			Ft.current?.style.setProperty("--chat-dock-composer", `${t.offsetHeight + n.offsetHeight + r}px`);
+			let i = tt({
+				windowHeight: K === "rise" ? window.innerHeight - z.top - z.bottom : x(D, window.innerHeight, j),
+				headerHeight: V.current?.offsetHeight || 4 * j,
+				bottomInset: n.offsetHeight + r,
+				remPx: j
+			});
+			e.style.setProperty("--chat-dock-gate-max", `${i}px`);
+		};
+		if (r(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(r);
+		return i.observe(t), i.observe(n), V.current != null && i.observe(V.current), () => {
+			i.disconnect();
+		};
+	}, [
+		Xt,
+		K,
+		gt,
+		z.top,
+		z.bottom,
+		D,
+		j,
+		I
+	]), p(() => {
+		let e = Vt.current;
+		e != null && Ht.current && (e.scrollTop = e.scrollHeight);
 	});
-	function De(e) {
-		e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), q(!1));
+	function Zt(e) {
+		!M || I || e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), G(!1));
 	}
-	let X = g(T), Oe = _(T, w), ke = n("medium"), Z = n("fast"), Q = F ? {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 }
+	let Qt = qe(w), $t = !I && Je(w, S), en = !I && Ye({
+		followUps: T,
+		messages: S,
+		thinking: C,
+		sentAfterId: St
+	}), q = M ? "open" : "closed", J = r("medium"), Y = r("fast"), tn = n(), nn = t(1), X = tn, Z = { duration: 0 }, Q = {
+		default: Z,
+		opacity: Y
+	}, rn = 3.25 * j, an = {
+		height: rn,
+		left: 0,
+		right: 0,
+		borderRadius: rn / 2
+	}, on = {
+		height: x(D, gt, j),
+		left: -j,
+		right: -j,
+		borderRadius: j
+	}, sn = k ? {
+		open: {
+			...K === "grow" ? on : { y: 0 },
+			opacity: 1,
+			transition: Q
+		},
+		closed: {
+			...K === "grow" ? on : { y: 0 },
+			opacity: 0,
+			transition: Q
+		}
+	} : K === "grow" ? {
+		open: {
+			...on,
+			opacity: 1,
+			transition: J
+		},
+		closed: {
+			...an,
+			opacity: 1,
+			transition: {
+				...J,
+				delay: X
+			}
+		}
 	} : {
-		initial: {
-			clipPath: y,
-			opacity: .6
+		open: {
+			y: 0,
+			opacity: 1,
+			transition: J
+		},
+		closed: {
+			y: "100%",
+			opacity: 1,
+			transition: {
+				...J,
+				delay: X
+			}
+		}
+	}, cn = {
+		variants: k ? {
+			open: {},
+			closed: {}
+		} : {
+			open: (e) => ({
+				opacity: 1,
+				y: 0,
+				transition: {
+					...Y,
+					delay: nn + e * tn
+				}
+			}),
+			closed: {
+				opacity: 0,
+				y: 8,
+				transition: Y
+			}
+		},
+		initial: !1,
+		animate: q
+	}, ln = {
+		open: {
+			width: 0,
+			opacity: 0,
+			transition: k ? Q : {
+				width: J,
+				opacity: Y
+			}
 		},
-		animate: {
-			clipPath: b,
+		closed: {
+			width: "auto",
 			opacity: 1,
-			transitionEnd: { clipPath: "none" }
+			transition: k ? Q : {
+				width: {
+					...J,
+					delay: X
+				},
+				opacity: {
+					...Y,
+					delay: nn
+				}
+			}
+		}
+	}, un = {
+		open: {
+			height: "auto",
+			opacity: 1,
+			transition: k ? Q : {
+				height: J,
+				opacity: {
+					...Y,
+					delay: nn
+				}
+			}
 		},
+		closed: {
+			height: 0,
+			opacity: 0,
+			transition: k ? Q : {
+				height: {
+					...J,
+					delay: X
+				},
+				opacity: Y
+			}
+		}
+	}, dn = {
+		initial: !k && "hidden",
+		animate: M ? "visible" : "folded",
 		exit: {
-			clipPath: [b, y],
-			opacity: [1, .6]
+			opacity: 0,
+			transition: Z
+		},
+		variants: {
+			hidden: {},
+			visible: {
+				opacity: 1,
+				transition: {
+					...Y,
+					staggerChildren: tn
+				}
+			},
+			folded: {
+				opacity: 0,
+				transition: k ? Z : Y
+			}
 		}
-	}, $ = F || K.current ? {} : {
-		initial: {
+	}, fn = {
+		hidden: {
 			opacity: 0,
-			y: 8
+			y: 6
 		},
-		animate: {
+		visible: {
 			opacity: 1,
-			y: 0
-		},
-		transition: {
-			...Z,
-			delay: t(1)
+			y: 0,
+			transition: Y
 		}
-	}, Ae = F ? 0 : ee("medium") * .6;
-	return /* @__PURE__ */ d("div", {
-		className: e(le[j], we),
-		"data-open": L ? "" : void 0,
-		children: /* @__PURE__ */ d("div", {
-			className: oe,
-			children: /* @__PURE__ */ d("div", {
+	}, $ = (e) => e.preventDefault(), pn = A ? "sm" : "md";
+	function mn(t, n) {
+		let r = N?.id === t.id, i = t.feedback ?? null, a = (e) => at?.(t, i === e ? null : e);
+		return /* @__PURE__ */ _("div", {
+			className: e(be, n.ready ? void 0 : xe),
+			"data-reply-actions": n.ready ? "ready" : "pending",
+			children: [n.copy || n.vote ? /* @__PURE__ */ _("div", {
+				className: Se,
+				children: [n.copy ? /* @__PURE__ */ g(s, {
+					size: pn,
+					icon: g(r ? Re : ze, {}),
+					"aria-label": r ? O.copied : O.copy,
+					onClick: () => qt(t)
+				}) : null, n.vote ? /* @__PURE__ */ _(Ue, { children: [/* @__PURE__ */ g(s, {
+					size: pn,
+					icon: /* @__PURE__ */ g(He, {}),
+					"aria-label": O.helpful,
+					pressed: i === "up",
+					onClick: () => a("up")
+				}), /* @__PURE__ */ g(s, {
+					size: pn,
+					icon: /* @__PURE__ */ g(Ve, {}),
+					"aria-label": O.notHelpful,
+					pressed: i === "down",
+					onClick: () => a("down")
+				})] }) : null]
+			}) : null, t.meta == null ? null : /* @__PURE__ */ _("p", {
+				className: we,
+				children: [t.meta.label, t.meta.description == null ? null : /* @__PURE__ */ _("span", {
+					className: "sr-only",
+					children: [". ", t.meta.description]
+				})]
+			})]
+		});
+	}
+	return /* @__PURE__ */ g("div", {
+		className: e(Te[D], D === "fixed" && !P ? Ee : void 0, ft),
+		"data-open": M ? "" : void 0,
+		"data-gate": I ? "" : void 0,
+		style: z.top > 0 || z.bottom > 0 ? {
+			"--chat-dock-vv-top": `${z.top}px`,
+			"--chat-dock-vv-bottom": `${z.bottom}px`
+		} : void 0,
+		children: /* @__PURE__ */ g("div", {
+			className: ge,
+			children: /* @__PURE__ */ g("div", {
 				className: "band",
-				children: /* @__PURE__ */ d(p, {
-					initial: !1,
-					mode: "popLayout",
-					children: L ? /* @__PURE__ */ f(m.section, {
-						role: "dialog",
-						"aria-modal": "false",
-						"aria-labelledby": N,
-						"aria-describedby": x == null ? void 0 : P,
-						className: ge[j],
-						initial: Q.initial,
-						animate: Q.animate,
-						exit: Q.exit,
-						transition: ke,
-						onKeyDown: De,
-						children: [
-							/* @__PURE__ */ d(ne, {
-								titleId: N,
-								descriptionId: P,
-								title: s,
-								description: x,
-								headerStart: S,
-								closeLabel: M.close,
-								onClose: () => q(!1),
-								delineated: !0
-							}),
-							/* @__PURE__ */ f("div", {
-								ref: H,
-								className: me,
-								role: "log",
-								"aria-label": M.conversation,
-								onScroll: (e) => {
-									let t = e.currentTarget;
-									U.current = t.scrollHeight - t.scrollTop - t.clientHeight <= v;
+				children: /* @__PURE__ */ _("div", {
+					ref: B,
+					className: e(de, P ? fe : void 0),
+					role: M ? "dialog" : void 0,
+					"aria-modal": M ? "false" : void 0,
+					"aria-labelledby": M ? pt : void 0,
+					"aria-describedby": M && l != null ? mt : void 0,
+					onKeyDown: Zt,
+					children: [
+						/* @__PURE__ */ g(v, {
+							initial: !1,
+							children: !M && Qt.length > 0 ? /* @__PURE__ */ g(y.div, {
+								className: ye,
+								role: "group",
+								"aria-label": O.suggestions,
+								exit: {
+									opacity: 0,
+									transition: k ? Z : Y
 								},
-								children: [C == null ? null : /* @__PURE__ */ d(m.div, {
-									className: o,
-									...$,
-									children: C
-								}), /* @__PURE__ */ f(p, {
-									initial: !1,
-									children: [w.map((e) => /* @__PURE__ */ d(m.div, {
-										"data-role": e.role,
-										className: e.role === "user" ? he : o,
-										initial: !F && {
-											opacity: 0,
-											y: 8
+								children: Qt.map((e, t) => /* @__PURE__ */ g("span", {
+									className: ve,
+									style: { "--chat-dock-pill-index": t },
+									children: /* @__PURE__ */ g(o, {
+										type: "button",
+										role: "secondary",
+										size: "md",
+										icon: e.icon,
+										onClick: () => Kt(e),
+										children: e.label
+									})
+								}, e.id))
+							}, "pills") : null
+						}),
+						/* @__PURE__ */ g(y.div, {
+							ref: Ft,
+							className: Ne[D],
+							"data-chat-dock-window": q,
+							hidden: P,
+							variants: sn,
+							initial: !1,
+							animate: q,
+							onAnimationComplete: (e) => {
+								e === "closed" && !Wt.current && Et(!0);
+							},
+							children: /* @__PURE__ */ _("div", {
+								className: Pe,
+								children: [
+									/* @__PURE__ */ g(y.div, {
+										ref: V,
+										className: "shrink-0",
+										custom: 0,
+										...cn,
+										children: /* @__PURE__ */ g(ne, {
+											titleId: pt,
+											descriptionId: mt,
+											title: c,
+											description: l,
+											headerStart: d,
+											closeLabel: O.close,
+											onClose: () => G(!1),
+											delineated: !0
+										})
+									}),
+									/* @__PURE__ */ _(y.div, {
+										ref: Vt,
+										className: je,
+										role: "log",
+										"aria-label": O.conversation,
+										tabIndex: 0,
+										custom: 1,
+										...cn,
+										onScroll: (e) => {
+											let t = e.currentTarget;
+											Ht.current = t.scrollHeight - t.scrollTop - t.clientHeight <= Qe;
 										},
-										animate: {
+										children: [b == null ? null : /* @__PURE__ */ g("div", {
+											className: u,
+											children: b
+										}), /* @__PURE__ */ _(v, {
+											initial: !1,
+											children: [
+												S.map((e, t) => {
+													let n = Xe({
+														message: e,
+														isLatest: t === S.length - 1,
+														thinking: C,
+														takesVotes: at != null
+													});
+													return /* @__PURE__ */ g(y.div, {
+														"data-role": e.role,
+														className: e.role === "user" ? Me : n == null ? u : Ce,
+														initial: !k && {
+															opacity: 0,
+															y: 8
+														},
+														animate: {
+															opacity: 1,
+															y: 0
+														},
+														transition: Y,
+														children: n == null ? e.content : /* @__PURE__ */ _(Ue, { children: [/* @__PURE__ */ g("div", {
+															className: u,
+															children: e.content
+														}), mn(e, n)] })
+													}, e.id);
+												}),
+												en && it === "inline" ? /* @__PURE__ */ g(y.div, {
+													role: "group",
+													"aria-label": O.followUps,
+													"data-follow-ups": "inline",
+													className: he,
+													...dn,
+													animate: "visible",
+													children: T.map((e) => /* @__PURE__ */ g(y.div, {
+														className: pe,
+														variants: fn,
+														children: /* @__PURE__ */ g(o, {
+															type: "button",
+															role: "ghost",
+															layout: "row",
+															onMouseDown: $,
+															onClick: () => Jt(e),
+															children: /* @__PURE__ */ _("span", {
+																className: ke,
+																children: [/* @__PURE__ */ g(a, {
+																	size: "md",
+																	children: /* @__PURE__ */ g(Be, {})
+																}), /* @__PURE__ */ g("span", {
+																	className: De,
+																	children: e.label
+																})]
+															})
+														})
+													}, e.id))
+												}, "follow-ups") : null,
+												C ? /* @__PURE__ */ _(y.div, {
+													className: Ae,
+													initial: !k && { opacity: 0 },
+													animate: { opacity: 1 },
+													exit: {
+														opacity: 0,
+														transition: Z
+													},
+													transition: Y,
+													children: [/* @__PURE__ */ g(ee, {
+														variant: "dot",
+														tone: "neutral",
+														pulsing: !0,
+														besideLabel: !0
+													}), /* @__PURE__ */ g("span", { children: O.thinking })]
+												}, "thinking") : null
+											]
+										})]
+									}),
+									$t ? /* @__PURE__ */ g(y.div, {
+										className: Oe,
+										role: "group",
+										"aria-label": O.suggestions,
+										custom: 2,
+										...cn,
+										children: w.map((e) => /* @__PURE__ */ g(o, {
+											type: "button",
+											role: "ghost",
+											layout: "row",
+											onMouseDown: e.prompt == null ? void 0 : $,
+											onClick: () => Yt(e),
+											children: /* @__PURE__ */ _("span", {
+												className: ke,
+												children: [e.icon == null ? null : /* @__PURE__ */ g(a, {
+													size: "md",
+													children: e.icon
+												}), /* @__PURE__ */ g("span", {
+													className: De,
+													children: e.label
+												})]
+											})
+										}, e.id))
+									}) : null,
+									/* @__PURE__ */ g(v, {
+										initial: !1,
+										children: en && it === "composer" ? /* @__PURE__ */ g(y.div, {
+											role: "group",
+											"aria-label": O.followUps,
+											"data-follow-ups": "composer",
+											className: me,
+											...dn,
+											children: T.map((e) => /* @__PURE__ */ g(y.span, {
+												className: "inline-flex",
+												variants: fn,
+												children: /* @__PURE__ */ g(o, {
+													type: "button",
+													role: "secondary",
+													size: "md",
+													onMouseDown: $,
+													onClick: () => Jt(e),
+													children: e.label
+												})
+											}, e.id))
+										}, "follow-ups") : null
+									})
+								]
+							})
+						}, K),
+						/* @__PURE__ */ g("span", {
+							className: "sr-only",
+							role: "status",
+							children: N == null ? "" : O.copied
+						}),
+						/* @__PURE__ */ _("div", {
+							className: se,
+							children: [/* @__PURE__ */ g(y.div, {
+								ref: It,
+								initial: !1,
+								animate: { height: kt ?? "auto" },
+								transition: L && !k ? J : Z,
+								style: L ? { overflow: "hidden" } : void 0,
+								onAnimationComplete: () => R(!1),
+								children: /* @__PURE__ */ _("div", {
+									ref: Rt,
+									className: oe,
+									children: [/* @__PURE__ */ g(v, {
+										initial: !1,
+										children: F ? /* @__PURE__ */ g(y.div, {
+											ref: zt,
+											className: e(le, I ? void 0 : "pointer-events-none"),
+											"data-chat-dock-gate": "",
+											hidden: jt,
+											initial: {
+												opacity: 0,
+												y: 12
+											},
+											animate: I ? {
+												opacity: 1,
+												y: 0,
+												transition: {
+													...Y,
+													delay: k ? 0 : Y.duration
+												}
+											} : {
+												opacity: 0,
+												y: 12,
+												transition: Y
+											},
+											exit: {
+												opacity: 0,
+												y: 12,
+												transition: Y
+											},
+											onAnimationComplete: () => {
+												I || Mt(!0);
+											},
+											children: ot
+										}, "gate") : null
+									}), /* @__PURE__ */ g(y.div, {
+										className: e(le, I ? "pointer-events-none" : void 0),
+										hidden: Nt,
+										initial: !1,
+										animate: I ? {
+											opacity: 0,
+											transition: Y
+										} : {
 											opacity: 1,
-											y: 0
+											transition: {
+												...Y,
+												delay: L && !k ? Y.duration : 0
+											}
 										},
-										transition: Z,
-										children: e.content
-									}, e.id)), be ? /* @__PURE__ */ f(m.div, {
-										className: pe,
-										initial: !F && { opacity: 0 },
-										animate: { opacity: 1 },
-										exit: {
-											opacity: 0,
-											transition: { duration: 0 }
+										onAnimationComplete: () => {
+											I && Pt(!0);
 										},
-										transition: Z,
-										children: [/* @__PURE__ */ d(te, {
-											variant: "dot",
-											tone: "neutral",
-											pulsing: !0,
-											besideLabel: !0
-										}), /* @__PURE__ */ d("span", { children: M.thinking })]
-									}, "thinking") : null]
-								})]
-							}),
-							Oe ? /* @__PURE__ */ d(m.div, {
-								className: de,
-								role: "group",
-								"aria-label": M.suggestions,
-								...$,
-								children: T.map((e) => /* @__PURE__ */ d(i, {
-									type: "button",
-									role: "ghost",
-									layout: "row",
-									onClick: () => Y(e),
-									children: /* @__PURE__ */ f("span", {
-										className: fe,
-										children: [e.icon == null ? null : /* @__PURE__ */ d(r, {
-											size: "md",
-											children: e.icon
-										}), /* @__PURE__ */ d("span", {
-											className: ue,
-											children: e.label
-										})]
-									})
-								}, e.id))
-							}) : null,
-							/* @__PURE__ */ d("div", {
-								className: re,
-								children: /* @__PURE__ */ d(a, {
-									ref: V,
-									value: R,
-									onValueChange: z,
-									onSend: J,
-									placeholder: O,
-									"aria-label": M.field,
-									sendLabel: M.send
+										children: /* @__PURE__ */ g(te, {
+											ref: U,
+											value: bt,
+											onValueChange: (e) => {
+												xt(e), G(!0);
+											},
+											onSend: Gt,
+											onFocus: () => {
+												W.current || G(!0);
+											},
+											onClick: () => G(!0),
+											start: d == null ? void 0 : /* @__PURE__ */ g(y.span, {
+												className: _e,
+												"aria-hidden": M ? !0 : void 0,
+												variants: ln,
+												initial: !1,
+												animate: q,
+												children: d
+											}),
+											placeholder: ut,
+											"aria-label": O.field,
+											sendLabel: O.send
+										})
+									})]
 								})
-							}),
-							k == null ? null : /* @__PURE__ */ d("p", {
-								className: ie,
-								children: k
-							})
-						]
-					}, "window") : /* @__PURE__ */ f(m.div, {
-						className: ae,
-						initial: { opacity: 0 },
-						animate: {
-							opacity: 1,
-							transition: {
-								...Z,
-								delay: Ae
-							}
-						},
-						exit: {
-							opacity: 0,
-							transition: { duration: 0 }
-						},
-						children: [X.length > 0 ? /* @__PURE__ */ d("div", {
-							className: ce,
-							role: "group",
-							"aria-label": M.suggestions,
-							children: X.map((e, t) => /* @__PURE__ */ d("span", {
-								className: se,
-								style: { "--chat-dock-pill-index": t },
-								children: /* @__PURE__ */ d(i, {
-									type: "button",
-									role: "secondary",
-									size: "md",
-									icon: e.icon,
-									onClick: () => Y(e),
-									children: e.label
+							}), /* @__PURE__ */ g(y.div, {
+								className: "overflow-hidden",
+								"aria-hidden": !M || void 0,
+								variants: un,
+								initial: !1,
+								animate: q,
+								children: /* @__PURE__ */ g("div", {
+									ref: Lt,
+									children: E != null && !I ? /* @__PURE__ */ g("p", {
+										className: ue[D],
+										children: E
+									}) : /* @__PURE__ */ g("div", { className: ce[D] })
 								})
-							}, e.id))
-						}) : null, /* @__PURE__ */ d(a, {
-							ref: B,
-							value: R,
-							onValueChange: (e) => {
-								z(e), q(!0);
-							},
-							onSend: J,
-							onFocus: () => {
-								W.current || q(!0);
-							},
-							onClick: () => q(!0),
-							start: S,
-							placeholder: O,
-							"aria-label": M.field,
-							sendLabel: M.send
-						})]
-					}, "rest")
+							})]
+						})
+					]
 				})
 			})
 		})
 	});
 }
+var nt = Object.assign(w, { Gate: c });
 //#endregion
-export { x as ChatDock, y as chatDockClosedClip, h as chatDockDefaultLabels, b as chatDockOpenClip, g as chatDockPillSuggestions, s as chatDockPlacements, _ as chatDockShowsSuggestionRows };
+export { nt as ChatDock, c as ChatDockGate, Ke as chatDockDefaultLabels, b as chatDockFollowUpsPlacements, l as chatDockGateDefaultLabels, tt as chatDockGateMaxHeight, x as chatDockOpenHeight, qe as chatDockPillSuggestions, d as chatDockPlacements, Xe as chatDockReplyRow, Ye as chatDockShowsFollowUps, Je as chatDockShowsSuggestionRows };