@epam/ai-dial-conversation-input 1.2.0-dev.28 → 1.2.0-dev.284

package/index.js

@@ -1,159 +1,110 @@
-import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, RESIZABLE_TEXTAREA_CLASS_NAME as r, RequestStatus as i, ResponseFormat as a, SELECT_LIST_MAX_HEIGHT_PX as o, buildCssVars as s, mergeClasses as c, useIsMobile as l } from "@epam/ai-dial-chat-shared";
-import { BASE_ICON_SIZE as u, Button as d, CloseButton as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, Dropdown as h, ElementSize as g, ErrorText as _, GhostIconButton as v, Highlight as y, MenuItemMark as b, NeutralButton as x, Popup as S, PopupSize as C, PrimaryButton as w, PrimaryIconButton as T, RadioGroup as E, RadioGroupOrientation as D, Search as O, Skeleton as k, SkeletonVariant as ee, Slider as A, Spinner as te, StaticIconButton as j, Textarea as ne, TextareaResize as M, Tooltip as N } from "@epam/ai-dial-ui-kit";
-import { IconArrowLeft as re, IconArrowNarrowRight as ie, IconCheck as P, IconChevronDown as F, IconChevronRight as ae, IconFile as oe, IconMicrophone as se, IconPaperclip as ce, IconPlayerStopFilled as I, IconPlaystationSquare as le, IconPlus as ue, IconSettings as de, IconTool as fe, IconX as pe } from "@tabler/icons-react";
-import { createElement as me, memo as he, useCallback as L, useEffect as R, useImperativeHandle as ge, useLayoutEffect as _e, useMemo as z, useRef as B, useState as V } from "react";
-import { createPortal as H } from "react-dom";
-import { Fragment as U, jsx as W, jsxs as G } from "react/jsx-runtime";
-import { AttachmentTray as ve, MAX_UPLOADS_PER_MINUTE as ye, generateAttachmentId as be, useClipboardPaste as xe } from "@epam/ai-dial-attachment-input";
-//#region src/hooks/useBottomSheet.ts
-var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", Ce = (e, t, n) => {
-	R(() => {
-		if (!e) return;
-		let n = (e) => {
-			e.key === "Escape" && t();
-		};
-		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
-	}, [e, t]), R(() => {
-		if (e) return document.body.style.overflow = "hidden", () => {
-			document.body.style.overflow = "";
-		};
-	}, [e]), R(() => {
-		if (!e || n?.current == null) return;
-		let t = n.current, r = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		(t.querySelector(Se) ?? t).focus();
-		let i = (e) => {
-			if (e.key !== "Tab") return;
-			let n = Array.from(t.querySelectorAll(Se));
-			if (n.length === 0) {
-				e.preventDefault(), t.focus();
-				return;
-			}
-			let r = n[0], i = n[n.length - 1], a = document.activeElement, o = a === t || a === null || !t.contains(a);
-			e.shiftKey ? (a === r || o) && (e.preventDefault(), i.focus()) : (a === i || o) && (e.preventDefault(), r.focus());
-		};
-		return document.addEventListener("keydown", i), () => {
-			document.removeEventListener("keydown", i), r?.focus();
-		};
-	}, [e, n]);
-}, we = {
-	backdrop: "_backdrop_1d50f_9",
-	sheet: "_sheet_1d50f_13",
-	"slide-up": "_slide-up_1d50f_1",
-	title: "_title_1d50f_18",
-	divider: "_divider_1d50f_22"
-}, Te = ({ isOpen: e, title: t, closeLabel: n, onClose: r, onBack: i, backLabel: a, "aria-label": o, style: l, titleClassName: u = "dial-body-semi-text", className: d, colors: h, children: _ }) => {
-	let y = B(null);
-	if (Ce(e, r, y), !e || typeof document > "u") return null;
-	let b = s({
-		"--ci-backdrop": h?.backdrop,
-		"--ci-sheet-bg": h?.sheetBg,
-		"--ci-sheet-text": h?.sheetText,
-		"--ci-sheet-divider": h?.divider
+import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, MIME_TYPE_EXT_MAP as r, RESIZABLE_TEXTAREA_CLASS_NAME as i, RequestStatus as a, ResponseFormat as o, SELECT_LIST_MAX_HEIGHT_PX as s, buildCssVars as c, mergeClasses as l, normalizeMimeType as u, useIsMobile as d } from "@epam/ai-dial-chat-shared";
+import { BASE_ICON_SIZE as f, BottomSheet as p, Button as m, ButtonVariant as h, DIAL_ICON_SIZE as g, DIAL_KIT_ICON_STROKE as _, Dropdown as v, ElementSize as y, ErrorText as b, GhostIconButton as x, Highlight as S, MenuItemMark as C, NeutralButton as w, NeutralIconButton as T, Popup as E, PopupSize as D, PrimaryButton as ee, PrimaryIconButton as O, RadioGroup as k, RadioGroupOrientation as te, Search as A, Skeleton as ne, SkeletonVariant as j, Slider as re, Spinner as ie, Textarea as M, TextareaResize as N, Tooltip as ae } from "@epam/ai-dial-ui-kit";
+import { Fragment as oe, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { AttachmentTray as se, MAX_UPLOADS_PER_MINUTE as I, generateAttachmentId as ce, useClipboardPaste as le } from "@epam/ai-dial-attachment-input";
+import { IconArrowNarrowRight as ue, IconCheck as L, IconChevronDown as de, IconChevronRight as fe, IconFile as pe, IconMicrophone as me, IconPaperclip as he, IconPlayerStop as ge, IconPlus as _e, IconSettings as ve, IconTool as ye, IconX as be } from "@tabler/icons-react";
+import { createElement as xe, forwardRef as Se, memo as Ce, useCallback as R, useEffect as z, useId as we, useImperativeHandle as Te, useLayoutEffect as Ee, useMemo as B, useRef as V, useState as H } from "react";
+//#region src/constants/public-class-names.ts
+var U = {
+	wrapper: "dial-ci-wrapper",
+	actionRow: "dial-ci-action-row",
+	textareaWrap: "dial-ci-textarea-wrap",
+	addCluster: "dial-ci-add-cluster",
+	toolsChips: "dial-ci-tools-chips",
+	footerActions: "dial-ci-footer-actions",
+	modelSelectorButton: "dial-ci-model-selector-button",
+	modelSelectorIcon: "dial-ci-model-selector-icon",
+	modelSelectorCaret: "dial-ci-model-selector-caret",
+	modelMenu: "dial-ci-model-menu",
+	modelMenuSearch: "dial-ci-model-menu-search",
+	modelMenuItem: "dial-ci-model-menu-item",
+	modelMenuItemSelected: "dial-ci-model-menu-item-selected"
+}, De = {
+	backdrop: "_backdrop_1ym62_8",
+	sheet: "_sheet_1ym62_12",
+	title: "_title_1ym62_16",
+	divider: "_divider_1ym62_20"
+}, W = ({ isOpen: e, title: t, closeLabel: n, onClose: r, onBack: i, backLabel: a, "aria-label": o, style: s, titleClassName: u = "dial-body-semi-text", className: d, colors: f, children: m }) => {
+	let h = c({
+		"--ci-backdrop": f?.backdrop,
+		"--ci-sheet-bg": f?.sheetBg,
+		"--ci-sheet-text": f?.sheetText,
+		"--ci-sheet-divider": f?.divider
 	});
-	return H(/* @__PURE__ */ G(U, { children: [/* @__PURE__ */ W("div", {
-		className: c(we.backdrop, "fixed inset-0 z-[55]"),
-		style: b,
-		onPointerDown: r,
-		"aria-hidden": !0
-	}), /* @__PURE__ */ G("div", {
-		ref: y,
-		role: "dialog",
-		"aria-modal": !0,
-		"aria-label": t ?? o,
-		tabIndex: -1,
+	return /* @__PURE__ */ P(p, {
+		open: e,
+		onClose: r,
+		title: t,
+		ariaLabel: o,
+		onBack: i,
+		backAriaLabel: a,
+		closeAriaLabel: n,
 		style: {
-			...b,
-			...l
+			...h,
+			...s
 		},
-		className: c(we.sheet, "fixed inset-x-0 bottom-0 z-[60] flex max-h-[85dvh] flex-col rounded-t-lg", d),
-		children: [t != null && /* @__PURE__ */ G(U, { children: [/* @__PURE__ */ G("div", {
-			className: "relative flex h-[60px] flex-shrink-0 items-center justify-center px-4",
-			children: [
-				i && /* @__PURE__ */ W("div", {
-					className: "absolute start-4",
-					children: /* @__PURE__ */ W(v, {
-						icon: /* @__PURE__ */ W(re, {
-							size: p.LG,
-							stroke: m,
-							className: "rtl:scale-x-[-1]"
-						}),
-						"aria-label": a,
-						onClick: i
-					})
-				}),
-				/* @__PURE__ */ W("span", {
-					className: c(we.title, u),
-					children: t
-				}),
-				/* @__PURE__ */ W("div", {
-					className: "absolute end-4 m-2",
-					children: /* @__PURE__ */ W(f, {
-						ariaLabel: n,
-						onClose: r,
-						size: g.Standard
-					})
-				})
-			]
-		}), /* @__PURE__ */ W("div", { className: c(we.divider, "h-px flex-shrink-0") })] }), /* @__PURE__ */ W("div", {
-			className: "overflow-y-auto",
-			children: _
-		})]
-	})] }), document.body);
-}, Ee = async (e, t, n) => {
+		overlayStyle: h,
+		className: l(De.sheet, d),
+		overlayClassName: De.backdrop,
+		headerClassName: De.divider,
+		titleClassName: l(De.title, u),
+		children: m
+	});
+}, Oe = async (e, t, n) => {
 	let r = 6e4 / t, i = [];
 	for (let t = 0; t < e.length; t++) t > 0 && await new Promise((e) => setTimeout(e, r)), i.push(n(e[t]));
 	await Promise.allSettled(i);
-}, De = ({ initialAttachments: n, onUploadAttachment: r, onAttachmentsChange: a, validateAttachment: o, pendingDropFiles: s, onDropFilesConsumed: c, pendingAttachments: l, onPendingAttachmentsConsumed: u, onExpandPastedText: d, maximumAttachmentsAmount: f, baseAttachmentsAmount: p = 0, onAttachmentsLimitExceeded: m }) => {
-	let [h, g] = V(n), _ = B(h);
-	R(() => {
+}, ke = ({ initialAttachments: n, onUploadAttachment: r, onAttachmentsChange: i, validateAttachment: o, pendingDropFiles: s, onDropFilesConsumed: c, pendingAttachments: l, onPendingAttachmentsConsumed: u, onExpandPastedText: d, maximumAttachmentsAmount: f, baseAttachmentsAmount: p = 0, onAttachmentsLimitExceeded: m }) => {
+	let [h, g] = H(n), _ = V(h);
+	z(() => {
 		_.current = h;
-	}, [h]), R(() => () => {
+	}, [h]), z(() => () => {
 		_.current.forEach((e) => {
 			e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
 		});
 	}, []);
-	let v = L((e) => e.map((e) => {
-		let n = e.type.startsWith("image/"), r = e.type.startsWith("audio/"), a = n ? URL.createObjectURL(e) : void 0, o = r ? URL.createObjectURL(e) : void 0;
+	let v = R((e) => e.map((e) => {
+		let n = e.type.startsWith("image/"), r = e.type.startsWith("audio/"), i = n ? URL.createObjectURL(e) : void 0, o = r ? URL.createObjectURL(e) : void 0;
 		return {
-			id: be(),
+			id: ce(),
 			name: e.name,
 			contentType: e.type,
 			file: e,
 			type: n ? t.Image : r ? t.Audio : t.File,
-			status: i.Idle,
-			previewUrl: a,
+			status: a.Idle,
+			previewUrl: i,
 			playUrl: o
 		};
-	}), []), y = B(a);
-	R(() => {
-		y.current = a;
-	}, [a]);
-	let b = B(!0), x = L((e) => {
+	}), []), y = V(i);
+	z(() => {
+		y.current = i;
+	}, [i]);
+	let b = V(!0), x = R((e) => {
 		g((t) => {
 			let n = e(t);
 			return n === t ? t : n;
 		});
 	}, []);
-	R(() => {
+	z(() => {
 		if (b.current) {
 			b.current = !1;
 			return;
 		}
 		y.current?.(h);
 	}, [h]);
-	let S = L((e) => {
+	let S = R((e) => {
 		g(e);
-	}, []), C = L(async (t) => {
+	}, []), C = R(async (t) => {
 		if (r) {
 			x((e) => e.map((e) => e.id === t.id ? {
 				...e,
-				status: i.Loading
+				status: a.Loading
 			} : e));
 			try {
 				let { url: e, name: n } = await r(t);
 				x((r) => r.map((r) => r.id === t.id ? {
 					...r,
-					status: i.Idle,
+					status: a.Idle,
 					url: e,
 					name: n
 				} : r));
@@ -161,12 +112,12 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 				let r = typeof n == "object" && n && "errorReason" in n && Object.values(e).includes(n.errorReason) ? n.errorReason : void 0;
 				x((e) => e.map((e) => e.id === t.id ? {
 					...e,
-					status: i.Error,
+					status: a.Error,
 					...r != null && { errorReason: r }
 				} : e));
 			}
 		}
-	}, [r, x]), w = L((e, t = !0) => {
+	}, [r, x]), w = R((e, t = !0) => {
 		let n = new Set(_.current.map((e) => e.id)), r = e.filter((e) => !n.has(e.id));
 		if (r.length !== 0) {
 			if (f != null && f > 0 && Number.isFinite(f)) {
@@ -184,10 +135,10 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 					let n = o?.(t);
 					n == null ? e.push(t) : x((e) => e.map((e) => e.id === t.id ? {
 						...e,
-						status: i.Error,
+						status: a.Error,
 						errorReason: n
 					} : e));
-				}), Ee(e, ye, C);
+				}), Oe(e, I, C);
 			}
 		}
 	}, [
@@ -197,35 +148,40 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		x,
 		C,
 		o
-	]);
-	R(() => {
-		s.length !== 0 && (w(v(s)), c?.());
+	]), T = V(/* @__PURE__ */ new WeakSet());
+	z(() => {
+		if (s.length === 0) {
+			T.current = /* @__PURE__ */ new WeakSet();
+			return;
+		}
+		let e = s.filter((e) => !T.current.has(e));
+		e.length !== 0 && (e.forEach((e) => T.current.add(e)), w(v(e)), c?.());
 	}, [
 		w,
 		v,
 		c,
 		s
-	]), R(() => {
+	]), z(() => {
 		l.length !== 0 && (w(l, !1), u?.());
 	}, [
 		w,
 		u,
 		l
-	]), R(() => {
+	]), z(() => {
 		if (!o) return;
 		let t = !1, n = [], r = _.current.map((r) => {
-			if (r.status === i.Loading) return r;
-			let a = o(r);
-			if (a != null) return r.status === i.Error && r.errorReason === a ? r : (t = !0, {
+			if (r.status === a.Loading) return r;
+			let i = o(r);
+			if (i != null) return r.status === a.Error && r.errorReason === i ? r : (t = !0, {
 				...r,
-				status: i.Error,
-				errorReason: a
+				status: a.Error,
+				errorReason: i
 			});
-			if (r.errorReason === e.UnsupportedType) {
+			if (r.errorReason === e.UnsupportedType || r.errorReason === e.FileTooLarge) {
 				t = !0;
 				let e = {
 					...r,
-					status: i.Idle,
+					status: a.Idle,
 					errorReason: void 0
 				};
 				return e.url ?? n.push(e), e;
@@ -238,7 +194,7 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		x,
 		C
 	]);
-	let T = L((e) => {
+	let E = R((e) => {
 		x((t) => {
 			let n = t.find((t) => t.id === e);
 			return n?.previewUrl && URL.revokeObjectURL(n.previewUrl), n?.playUrl && URL.revokeObjectURL(n.playUrl), t.filter((t) => t.id !== e);
@@ -249,63 +205,120 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		buildAttachments: v,
 		addAttachments: w,
 		resetAttachments: S,
-		handleRemove: T,
-		handleRetry: L((e) => {
+		handleRemove: E,
+		handleRetry: R((e) => {
 			let t = h.find((t) => t.id === e);
 			t && C(t);
 		}, [h, C]),
-		handleExpand: L(async (e) => {
+		handleExpand: R(async (e) => {
 			let n = h.find((t) => t.id === e);
 			if (!n || n.type !== t.Pasted) return;
 			let r = await n.file.text();
-			d?.(r), T(e);
+			d?.(r), E(e);
 		}, [
 			h,
-			T,
+			E,
 			d
 		]),
-		hasBlockedAttachments: h.some((e) => e.status === i.Loading || e.status === i.Error)
+		hasBlockedAttachments: h.some((e) => e.status === a.Loading || e.status === a.Error)
+	};
+}, G = (e, t) => {
+	let n = t;
+	for (; n < e.length && !/\s/.test(e[n]);) n++;
+	return n;
+}, Ae = (e, t) => {
+	let n = t;
+	for (; n > 0 && !/\s/.test(e[n - 1]);) n--;
+	return {
+		start: n,
+		end: G(e, n)
 	};
-}, Oe = (e, t) => {
-	if (!e.startsWith(t)) return !1;
-	let n = e.slice(t.length);
-	return !/\s/.test(n) && !n.includes(t);
-}, ke = ({ config: e, message: t }) => {
-	let [n, r] = V(!1), [i, a] = V(!1), o = e != null && Oe(t, e.triggerPrefix) ? t.slice(e.triggerPrefix.length) : "", s = L((n, a, o) => {
-		if (e == null || a || t !== "" || i) return;
-		let s = n === e.triggerPrefix, c = o === "insertFromPaste" && Oe(n, e.triggerPrefix);
-		(s || c) && r(!0);
+}, je = (e, t) => e.startsWith(t) && !e.slice(t.length).includes(t), Me = "[role=\"option\"]:not([aria-disabled=\"true\"])", Ne = /* @__PURE__ */ function(e) {
+	return e.Next = "next", e.Previous = "previous", e;
+}({}), Pe = ({ config: e, message: t }) => {
+	let [n, r] = H(!1), [i, a] = H(null), [o, s] = H(null), c = V(null);
+	c.current = i;
+	let l = e != null && i != null && i <= t.length ? (() => {
+		let n = t.slice(i, G(t, i));
+		return je(n, e.triggerPrefix) ? n.slice(e.triggerPrefix.length) : "";
+	})() : "", u = R((t, n, i) => {
+		if (e == null || i) return;
+		let { start: c, end: l } = Ae(t, n), u = t.slice(c, l);
+		if (!je(u, e.triggerPrefix)) {
+			r(!1), s(null), a(null);
+			return;
+		}
+		if (a(c), u === e.triggerPrefix || o !== c) {
+			r(!0), s(null);
+			return;
+		}
+		r(!1);
+	}, [e, o]);
+	z(() => {
+		if (e == null) {
+			r(!1), s(null), a(null);
+			return;
+		}
+		let n = c.current;
+		if (n == null) return;
+		let i = Math.min(n, t.length);
+		je(t.slice(i, G(t, i)), e.triggerPrefix) || (r(!1), s(null), a(null));
+	}, [e, t]);
+	let d = R(() => {
+		r(!1), s(i);
+	}, [i]), f = R(() => {
+		r(!1);
+	}, []), p = R((n) => {
+		if (e == null) return;
+		let { start: i, end: s } = Ae(t, n);
+		if (!je(t.slice(i, s), e.triggerPrefix)) {
+			a(null), r(!1);
+			return;
+		}
+		a(i), r(o !== i);
 	}, [
 		e,
 		t,
-		i
-	]);
-	return R(() => {
-		if (e == null) {
-			r(!1), a(!1);
+		o
+	]), m = we(), h = V(null), [g, _] = H(null);
+	z(() => {
+		_(null);
+	}, [n, l]);
+	let v = R(() => Array.from(h.current?.querySelectorAll(Me) ?? []), []), y = R((e) => {
+		let t = v();
+		if (t.length === 0) {
+			_(null);
 			return;
 		}
-		Oe(t, e.triggerPrefix) || (r(!1), a(!1));
-	}, [e, t]), {
+		let n = t.findIndex((e) => e.id === g), r = t[e === "next" ? (n + 1) % t.length : (n <= 0 ? t.length : n) - 1];
+		_(r.id), r.scrollIntoView?.({ block: "nearest" });
+	}, [v, g]), b = R(() => v().find((e) => e.id === g) ?? null, [v, g]);
+	return {
 		isMenuOpen: n,
-		query: o,
-		dismiss: L(() => {
-			r(!1), a(!0);
-		}, []),
-		handleValueChange: s
+		query: l,
+		activeWordStart: i,
+		dismiss: d,
+		closeOnOutsidePress: f,
+		handleCaretMove: p,
+		handleValueChange: u,
+		listboxId: m,
+		overlayRef: h,
+		activeOptionId: n ? g : null,
+		moveActiveOption: y,
+		getActiveOption: b
 	};
-}, Ae = (e, t) => !e.slice(0, t).includes("\n"), je = (e, t) => !e.slice(t).includes("\n"), Me = (e) => {
-	let t = B(e);
+}, Fe = (e, t) => !e.slice(0, t).includes("\n"), Ie = (e, t) => !e.slice(t).includes("\n"), Le = (e) => {
+	let t = V(e);
 	t.current = e;
-	let n = B(-1), r = B(""), i = L((e, i, a) => {
+	let n = V(-1), r = V(""), i = R((e, i, a) => {
 		let o = t.current;
-		return !o || o.length === 0 ? null : e === "up" ? !Ae(i, a) || n.current === 0 ? null : (n.current === -1 ? (r.current = i, n.current = o.length - 1) : --n.current, o[n.current]) : n.current === -1 || !je(i, a) ? null : n.current < o.length - 1 ? (n.current += 1, o[n.current]) : (n.current = -1, r.current);
-	}, []), a = L(() => {
+		return !o || o.length === 0 ? null : e === "up" ? !Fe(i, a) || n.current === 0 ? null : (n.current === -1 ? (r.current = i, n.current = o.length - 1) : --n.current, o[n.current]) : n.current === -1 || !Ie(i, a) ? null : n.current < o.length - 1 ? (n.current += 1, o[n.current]) : (n.current = -1, r.current);
+	}, []), a = R(() => {
 		n.current = -1, r.current = "";
-	}, []), o = L(() => {
+	}, []), o = R(() => {
 		n.current = -1, r.current = "";
 	}, []);
-	return z(() => ({
+	return B(() => ({
 		navigate: i,
 		notifyChange: a,
 		reset: o
@@ -314,185 +327,274 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		a,
 		o
 	]);
-}, Ne = ({ messageProp: e, messageRevision: t }) => {
-	let [n, r] = V(e), i = B(null);
-	return R(() => {
+}, Re = (e, t, n, r, i) => {
+	let a = [...t].sort((e, t) => e.start - t.start), o = [...n].sort((e, t) => e.offset - t.offset), s = [], c = 0, l = 0, u = (t, n) => {
+		if (n <= t) return;
+		let r = t;
+		o.filter((e) => e.offset >= t && e.offset <= n).forEach((t) => {
+			t.offset > r && s.push(/* @__PURE__ */ P("span", {
+				"aria-hidden": !0,
+				children: e.slice(r, t.offset)
+			}, `text-${l++}`)), s.push(t.node), r = t.offset;
+		}), r < n && s.push(/* @__PURE__ */ P("span", {
+			"aria-hidden": !0,
+			children: e.slice(r, n)
+		}, `text-${l++}`));
+	};
+	return a.forEach((t, n) => {
+		if (u(c, t.start), t.start + t.length <= c) return;
+		let a = e.slice(t.start, t.start + t.length);
+		s.push(t.render ? /* @__PURE__ */ P("span", {
+			className: "pointer-events-auto",
+			children: t.render()
+		}, `range-${n}`) : /* @__PURE__ */ P("span", {
+			"aria-hidden": !0,
+			className: t.isUnsupported ? i : r,
+			children: a
+		}, `range-${n}`)), c = Math.max(c, t.start + t.length);
+	}), u(c, e.length), s;
+}, ze = (e, t) => {
+	let n = document.createTreeWalker(e, NodeFilter.SHOW_TEXT, { acceptNode: (e) => e.parentElement?.closest("[data-mirror-synthetic]") == null ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }), r = 0;
+	for (let e = n.nextNode(); e != null; e = n.nextNode()) {
+		let n = e.textContent?.length ?? 0;
+		if (t <= r + n) return {
+			node: e,
+			offset: t - r
+		};
+		r += n;
+	}
+	return null;
+}, Be = (e, t, n) => {
+	let r = ze(e, t), i = ze(e, n);
+	if (r == null || i == null) return null;
+	let a = document.createRange();
+	return a.setStart(r.node, r.offset), a.setEnd(i.node, i.offset), a;
+}, Ve = ({ textareaRef: e, message: t, isMirrorActive: n }) => {
+	let r = V(null), [i, a] = H([]), o = R(() => {
+		let t = e.current, i = r.current, o = t?.selectionStart, s = t?.selectionEnd;
+		if (!n || t == null || i == null || o == null || s == null || o === s) {
+			a((e) => e.length === 0 ? e : []);
+			return;
+		}
+		let c = Be(i, o, s);
+		if (c == null) {
+			a((e) => e.length === 0 ? e : []);
+			return;
+		}
+		let l = i.getBoundingClientRect();
+		a(Array.from(c.getClientRects()).map((e) => new DOMRect(e.left - l.left, e.top - l.top, e.width, e.height)));
+	}, [n, e]);
+	return Ee(() => {
+		o();
+	}, [o, t]), z(() => {
+		if (!n) return;
+		let t = e.current;
+		if (t == null || typeof ResizeObserver > "u") return;
+		let r = new ResizeObserver(o);
+		return r.observe(t), () => r.disconnect();
+	}, [
+		n,
+		e,
+		o
+	]), {
+		mirrorRef: r,
+		selectionRects: i,
+		updateSelectionRects: o
+	};
+}, He = ({ messageProp: e, messageRevision: t }) => {
+	let [n, r] = H(e), i = V(null);
+	return z(() => {
 		r(e);
 	}, [e, t]), {
 		message: n,
 		setMessage: r,
 		textareaRef: i
 	};
-}, Pe = (e, t, n) => {
-	let r = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
-	r ? r.call(e, t) : e.value = t, e.setSelectionRange(n, n), e.dispatchEvent(new Event("input", { bubbles: !0 }));
-}, Fe = ({ insertion: e, textareaRef: t }) => {
-	let n = e?.revision, r = B(e?.text);
+}, Ue = (e, t, n, r = n) => {
+	let i = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+	i ? i.call(e, t) : e.value = t, e.setSelectionRange(n, r), e.dispatchEvent(new Event("input", { bubbles: !0 }));
+}, We = (e) => e.key.toLowerCase() === "z" && (e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey, Ge = ({ insertion: e, textareaRef: t }) => {
+	let n = e?.revision, r = V(e?.text);
 	r.current = e?.text;
-	let i = B(n);
-	R(() => {
+	let i = V(n), a = V(null);
+	return z(() => {
 		if (n === i.current) return;
 		i.current = n;
-		let e = t.current, a = r.current;
-		if (!e || !a) return;
-		let { value: o, selectionStart: s, selectionEnd: c } = e, l = s ?? o.length, u = c ?? l;
-		e.focus(), !(typeof document.execCommand == "function" && document.execCommand("insertText", !1, a)) && Pe(e, `${o.slice(0, l)}${a}${o.slice(u)}`, l + a.length);
-	}, [n, t]);
-}, Ie = /* @__PURE__ */ function(e) {
+		let e = r.current;
+		!t.current || !e || queueMicrotask(() => {
+			let n = t.current;
+			if (!n) return;
+			let { value: r, selectionStart: i, selectionEnd: o } = n, s = i ?? r.length, c = o ?? s;
+			if (n.focus(), a.current = null, typeof document.execCommand == "function" && document.execCommand("insertText", !1, e)) return;
+			let l = `${r.slice(0, s)}${e}${r.slice(c)}`;
+			Ue(n, l, s + e.length), a.current = {
+				insertedValue: l,
+				previousValue: r,
+				previousSelectionStart: s,
+				previousSelectionEnd: c
+			};
+		});
+	}, [n, t]), { handleUndoKeyDown: (e) => {
+		let n = a.current, r = t.current;
+		return n == null || r == null || !We(e) || (a.current = null, r.value !== n.insertedValue) ? !1 : (e.preventDefault(), Ue(r, n.previousValue, n.previousSelectionStart, n.previousSelectionEnd), !0);
+	} };
+}, Ke = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Recording = "recording", e.Processing = "processing", e.Error = "error", e;
-}({}), Le = /* @__PURE__ */ function(e) {
+}({}), qe = /* @__PURE__ */ function(e) {
 	return e.Dictation = "dictation", e.Attachment = "attachment", e;
-}({}), Re = [
+}({}), Je = [
 	"audio/webm;codecs=opus",
 	"audio/ogg;codecs=opus",
 	"audio/webm"
-], ze = 100, Be = 100, Ve = .01, He = ({ onAttachAudio: e, onTranscribeAudio: t, onTranscript: n, errorLabel: r = "Voice input failed" }) => {
-	let [i, a] = V("idle"), [o, s] = V(null), c = B(null), l = B(null), u = B({
+], Ye = 100, Xe = 100, Ze = .01, Qe = ({ onAttachAudio: e, onTranscribeAudio: t, onTranscript: n, errorLabel: i = "Voice input failed" }) => {
+	let [a, o] = H("idle"), [s, c] = H(null), l = V(null), d = V(null), f = V({
 		onAttachAudio: e,
 		onTranscribeAudio: t,
 		onTranscript: n,
-		errorLabel: r
+		errorLabel: i
 	});
-	u.current = {
+	f.current = {
 		onAttachAudio: e,
 		onTranscribeAudio: t,
 		onTranscript: n,
-		errorLabel: r
+		errorLabel: i
 	};
-	let d = L((e = "dictation") => {
-		if (l.current) return;
+	let p = R((e = "dictation") => {
+		if (d.current) return;
 		let t = { controller: new AbortController() };
-		l.current = t, s(null), a("recording");
-		let { signal: n } = t.controller, r = e === "dictation" ? u.current.onTranscribeAudio : void 0, i, o, d, f, p = !1, m = !1, h = [], g = () => {
-			clearInterval(f), f = void 0;
-		}, _ = () => {
-			g(), d &&= (d.ondataavailable = null, d.onstop = null, d.onerror = null, d.state !== "inactive" && d.stop(), void 0), i?.getTracks().forEach((e) => e.stop()), i = void 0, o &&= (o.close(), void 0), l.current === t && (c.current = null);
+		d.current = t, c(null), o("recording");
+		let { signal: n } = t.controller, i = e === "dictation" ? f.current.onTranscribeAudio : void 0, a, s, p, m, h = !1, g = !1, _ = [], v = () => {
+			clearInterval(m), m = void 0;
+		}, y = () => {
+			v(), p &&= (p.ondataavailable = null, p.onstop = null, p.onerror = null, p.state !== "inactive" && p.stop(), void 0), a?.getTracks().forEach((e) => e.stop()), a = void 0, s &&= (s.close(), void 0), d.current === t && (l.current = null);
 		};
 		n.addEventListener("abort", () => {
-			h.length = 0, _();
+			_.length = 0, y();
 		}, { once: !0 });
-		let v = () => {
-			n.aborted || (_(), l.current = null, s(null), a("idle"));
-		}, y = (e) => {
-			n.aborted || (t.controller.abort(), l.current = null, s(e instanceof Error ? e.message : u.current.errorLabel), a("error"));
-		}, b = () => {
-			if (!i || n.aborted) return;
-			let e = Re.find((e) => MediaRecorder.isTypeSupported(e)), t = new MediaRecorder(i, e ? { mimeType: e } : void 0);
-			d = t;
-			let o = Date.now(), s = !1, l = !1, b = new Uint8Array(c.current?.fftSize ?? 256), x = async () => {
-				if (!(m || n.aborted)) {
-					m = !0, p = !0;
+		let b = () => {
+			n.aborted || (y(), d.current = null, c(null), o("idle"));
+		}, x = (e) => {
+			n.aborted || (t.controller.abort(), d.current = null, c(e instanceof Error ? e.message : f.current.errorLabel), o("error"));
+		}, S = () => {
+			if (!a || n.aborted) return;
+			let e = Je.find((e) => MediaRecorder.isTypeSupported(e)), t = new MediaRecorder(a, e ? { mimeType: e } : void 0);
+			p = t;
+			let s = Date.now(), c = !1, d = !1, S = new Uint8Array(l.current?.fftSize ?? 256), C = async () => {
+				if (!(g || n.aborted)) {
+					g = !0, h = !0;
 					try {
-						let i = t.mimeType || e || "audio/webm", c = new Blob(h, { type: i });
-						h.length = 0, _();
-						let d = Date.now() - o >= Be;
-						if (c.size && (!r || d && (!s || l))) {
-							let e = i.split(";")[0].split("/")[1] ?? "webm", t = new File([c], "voice-" + crypto.randomUUID() + "." + e, { type: i });
-							if (r) {
-								a("processing");
-								let e = await r(t, n);
+						let a = t.mimeType || e || "audio/webm", l = new Blob(_, { type: a });
+						_.length = 0, y();
+						let p = Date.now() - s >= Xe;
+						if (l.size && (!i || p && (!c || d))) {
+							let e = u(a), t = r[e] ?? e.split("/")[1] ?? "webm", s = new File([l], "voice-" + crypto.randomUUID() + "." + t, { type: a });
+							if (i) {
+								o("processing");
+								let e = await i(s, n);
 								if (n.aborted) return;
-								u.current.onTranscript?.(e);
-							} else u.current.onAttachAudio(t);
-						} else r && u.current.onTranscript?.("");
-						v();
+								f.current.onTranscript?.(e);
+							} else f.current.onAttachAudio(s);
+						} else i && f.current.onTranscript?.("");
+						b();
 					} catch (e) {
-						y(e);
+						x(e);
 					}
 				}
 			};
 			t.ondataavailable = (e) => {
-				e.data.size && h.push(e.data);
-			}, t.onerror = () => y(Error(u.current.errorLabel)), t.onstop = () => {
-				x();
-			}, t.start(), r && (f = setInterval(() => {
-				let e = c.current;
+				e.data.size && _.push(e.data);
+			}, t.onerror = () => x(Error(f.current.errorLabel)), t.onstop = () => {
+				C();
+			}, t.start(), i && (m = setInterval(() => {
+				let e = l.current;
 				if (!e) return;
-				e.getByteTimeDomainData(b), s = !0;
+				e.getByteTimeDomainData(S), c = !0;
 				let t = 0;
-				for (let e of b) t += ((e - 128) / 128) ** 2;
-				Math.sqrt(t / b.length) >= Ve && (l = !0, g());
-			}, ze));
+				for (let e of S) t += ((e - 128) / 128) ** 2;
+				Math.sqrt(t / S.length) >= Ze && (d = !0, v());
+			}, Ye));
 		};
 		t.stop = () => {
-			p || n.aborted || (p = !0, g(), a("processing"), d?.state === "recording" && d.stop());
+			h || n.aborted || (h = !0, v(), o("processing"), p?.state === "recording" && p.stop());
 		}, (async () => {
 			try {
 				let e = await navigator.mediaDevices.getUserMedia({ audio: !0 });
-				if (n.aborted || p) {
-					e.getTracks().forEach((e) => e.stop()), v();
+				if (n.aborted || h) {
+					e.getTracks().forEach((e) => e.stop()), b();
 					return;
 				}
-				i = e, o = new AudioContext();
-				let t = o.createAnalyser();
-				t.fftSize = 256, c.current = t, o.createMediaStreamSource(i).connect(t), b(), a("recording");
+				a = e, s = new AudioContext();
+				let t = s.createAnalyser();
+				t.fftSize = 256, l.current = t, s.createMediaStreamSource(a).connect(t), S(), o("recording");
 			} catch (e) {
-				y(e);
+				x(e);
 			}
 		})();
-	}, []), f = L(() => l.current?.stop?.(), []), p = L(() => {
-		l.current?.controller.abort(), l.current = null, s(null), a("idle");
+	}, []), m = R(() => d.current?.stop?.(), []), h = R(() => {
+		d.current?.controller.abort(), d.current = null, c(null), o("idle");
 	}, []);
-	return R(() => () => {
-		l.current?.controller.abort(), l.current = null;
+	return z(() => () => {
+		d.current?.controller.abort(), d.current = null;
 	}, []), {
-		state: i,
-		analyserNodeRef: c,
-		errorMessage: o,
-		startRecording: d,
-		stopRecording: f,
-		discardRecording: p
+		state: a,
+		analyserNodeRef: l,
+		errorMessage: s,
+		startRecording: p,
+		stopRecording: m,
+		discardRecording: h
 	};
-}, Ue = /* @__PURE__ */ function(e) {
+}, $e = /* @__PURE__ */ function(e) {
 	return e.Enter = "enter", e.MetaEnter = "meta-enter", e;
-}({}), We = {
+}({}), et = /* @__PURE__ */ function(e) {
+	return e.Stacked = "stacked", e.Inline = "inline", e;
+}({}), tt = {
 	item: "_item_1sr2n_1",
 	itemIcon: "_itemIcon_1sr2n_11"
-}, Ge = ({ isOpen: e, title: t, closeLabel: n, onClose: r, style: i, items: a, className: o, titleClassName: l = "dial-body-semi-text", itemLabelClassName: u = "dial-small-text", btnTextClassName: f = "", colors: p }) => {
-	let m = (e) => {
+}, nt = ({ isOpen: e, title: t, closeLabel: n, onClose: r, style: i, items: a, className: o, titleClassName: s = "dial-body-semi-text", itemLabelClassName: u = "dial-small-text", btnTextClassName: d = "", colors: f }) => {
+	let p = (e) => {
 		e(), r();
-	}, h = s({
-		"--ci-sheet-text": p?.itemText,
-		"--ci-sheet-item-hover": p?.itemHoverBg,
-		"--ci-sheet-item-active": p?.itemActiveBg,
-		"--ci-sheet-icon": p?.itemIcon
+	}, h = c({
+		"--ci-sheet-text": f?.itemText,
+		"--ci-sheet-item-hover": f?.itemHoverBg,
+		"--ci-sheet-item-active": f?.itemActiveBg,
+		"--ci-sheet-icon": f?.itemIcon
 	});
-	return /* @__PURE__ */ W(Te, {
+	return /* @__PURE__ */ P(W, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: r,
 		style: i,
 		className: o,
-		titleClassName: l,
-		colors: p?.shell,
-		children: /* @__PURE__ */ W("ul", {
+		titleClassName: s,
+		colors: f?.shell,
+		children: /* @__PURE__ */ P("ul", {
 			role: "list",
 			className: "flex flex-col",
 			style: h,
-			children: a.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ W("li", { children: /* @__PURE__ */ W(d, {
+			children: a.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ P("li", { children: /* @__PURE__ */ P(m, {
 				type: "button",
-				className: c(We.item, "w-full gap-3 px-4 py-[10px] text-start"),
-				iconBefore: /* @__PURE__ */ W("span", {
-					className: We.itemIcon,
+				className: l(tt.item, "w-full gap-3 px-4 py-[10px] text-start"),
+				iconBefore: /* @__PURE__ */ P("span", {
+					className: tt.itemIcon,
 					children: n
 				}),
-				iconAfter: r ? /* @__PURE__ */ W("span", {
+				iconAfter: r ? /* @__PURE__ */ P("span", {
 					className: "ms-auto",
 					children: r
 				}) : null,
-				textClassName: f,
-				label: /* @__PURE__ */ W("span", {
+				textClassName: d,
+				label: /* @__PURE__ */ P("span", {
 					className: u,
 					children: t
 				}),
-				onClick: () => m(i)
+				onClick: () => p(i)
 			}) }, e))
 		})
 	});
-}, Ke = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
-	let [s, c] = V(t), [l, u] = V(n), [d, f] = V(r), p = B(o);
-	R(() => {
+}, rt = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
+	let [s, c] = H(t), [l, u] = H(n), [d, f] = H(r), p = V(o);
+	z(() => {
 		o && !p.current && (c(t), u(n), f(r)), p.current = o;
 	}, [
 		o,
@@ -509,7 +611,7 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		setResponseFormat: c,
 		setSystemPrompt: u,
 		setTemperature: f,
-		handleSubmit: L(() => {
+		handleSubmit: R(() => {
 			if (!m) return;
 			let t = {};
 			e.responseFormat && s != null && (t.responseFormat = s), e.systemPrompt && (t.systemPrompt = l), e.temperature && (t.temperature = d), i(t), a();
@@ -523,17 +625,17 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 			a
 		])
 	};
-}, qe = { label: "_label_14i7c_1" }, Je = ({ features: e, responseFormat: t, systemPrompt: n, temperature: i, onResponseFormatChange: o, onSystemPromptChange: l, onTemperatureChange: u, responseFormatLabel: d = "Response format", responseFormatHint: f = "Applies to new and existing messages", responseFormatMarkdownLabel: p = "Markdown", responseFormatPlainTextLabel: m = "Plain text", systemPromptLabel: h = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: v = [
+}, it = { label: "_label_14i7c_1" }, at = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: a, onSystemPromptChange: s, onTemperatureChange: u, responseFormatLabel: d = "Response format", responseFormatHint: f = "Applies to new and existing messages", responseFormatMarkdownLabel: p = "Markdown", responseFormatPlainTextLabel: m = "Plain text", systemPromptLabel: h = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: v = [
 	"Precise",
 	"Neutral",
 	"Creative"
 ], temperatureHint: y, labelClassName: b = "!dial-small-semi-text", colors: x }) => {
-	let S = s({ "--csf-label-text": x?.labelText }), C = c(b, qe.label, "gap-1");
-	return /* @__PURE__ */ G("div", {
+	let S = c({ "--csf-label-text": x?.labelText }), C = l(b, it.label, "gap-1");
+	return /* @__PURE__ */ F("div", {
 		className: "flex flex-col gap-4 px-6 pb-3",
 		style: S,
 		children: [
-			e.responseFormat && /* @__PURE__ */ W(E, {
+			e.responseFormat && /* @__PURE__ */ P(k, {
 				id: "response-format",
 				labelProps: {
 					label: d,
@@ -541,35 +643,35 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 					caption: f
 				},
 				optionsClassName: "mb-2",
-				orientation: D.Column,
-				value: t ?? a.Markdown,
+				orientation: te.Column,
+				value: t ?? o.Markdown,
 				items: [{
-					value: a.Markdown,
+					value: o.Markdown,
 					label: p
 				}, {
-					value: a.PlainText,
+					value: o.PlainText,
 					label: m
 				}],
-				onChange: (e) => o(e)
+				onChange: (e) => a(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ W(ne, {
+			e.systemPrompt && /* @__PURE__ */ P(M, {
 				value: n,
 				placeholder: g,
-				className: r,
-				resize: M.Vertical,
+				className: i,
+				resize: N.Vertical,
 				labelProps: {
 					className: C,
 					label: h
 				},
-				onChange: (e) => l(e ?? "")
+				onChange: (e) => s(e ?? "")
 			}),
-			e.temperature && /* @__PURE__ */ W(A, {
+			e.temperature && /* @__PURE__ */ P(re, {
 				labelProps: {
 					label: _,
 					className: C,
 					caption: y
 				},
-				value: i,
+				value: r,
 				min: 0,
 				max: 1,
 				step: .1,
@@ -579,17 +681,17 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 			})
 		]
 	});
-}, K = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: o, initialResponseFormat: s, initialSystemPrompt: l, initialTemperature: u, onSave: d, title: f = "Chat settings", responseFormatLabel: p, responseFormatHint: m, responseFormatMarkdownLabel: h, responseFormatPlainTextLabel: g, systemPromptLabel: _, systemPromptTooltip: v, temperatureLabel: y, temperatureLabels: b, temperatureHint: x, saveLabel: S = "Apply changes", saveDisabledTooltip: C }) => {
-	let { responseFormat: T, systemPrompt: E, temperature: D, canSubmit: O, setResponseFormat: k, setSystemPrompt: ee, setTemperature: A, handleSubmit: te } = Ke({
+}, ot = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: o, initialResponseFormat: s, initialSystemPrompt: c, initialTemperature: u, onSave: d, title: f = "Chat settings", responseFormatLabel: p, responseFormatHint: m, responseFormatMarkdownLabel: h, responseFormatPlainTextLabel: g, systemPromptLabel: _, systemPromptTooltip: v, temperatureLabel: y, temperatureLabels: b, temperatureHint: x, saveLabel: S = "Apply changes", saveDisabledTooltip: C }) => {
+	let { responseFormat: w, systemPrompt: T, temperature: E, canSubmit: D, setResponseFormat: O, setSystemPrompt: k, setTemperature: te, handleSubmit: A } = rt({
 		isOpen: e,
 		features: o,
 		initialResponseFormat: s,
-		initialSystemPrompt: l,
+		initialSystemPrompt: c,
 		initialTemperature: u,
 		onSave: d,
 		onClose: r
 	});
-	return /* @__PURE__ */ G(Te, {
+	return /* @__PURE__ */ F(W, {
 		isOpen: e,
 		title: f,
 		closeLabel: i,
@@ -597,14 +699,14 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		onBack: t,
 		backLabel: n,
 		style: a,
-		children: [/* @__PURE__ */ W(Je, {
+		children: [/* @__PURE__ */ P(at, {
 			features: o,
-			responseFormat: T,
-			systemPrompt: E,
-			temperature: D,
-			onResponseFormatChange: k,
-			onSystemPromptChange: ee,
-			onTemperatureChange: A,
+			responseFormat: w,
+			systemPrompt: T,
+			temperature: E,
+			onResponseFormatChange: O,
+			onSystemPromptChange: k,
+			onTemperatureChange: te,
 			responseFormatLabel: p,
 			responseFormatHint: m,
 			responseFormatMarkdownLabel: h,
@@ -614,23 +716,23 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 			temperatureLabel: y,
 			temperatureLabels: b,
 			temperatureHint: x
-		}), /* @__PURE__ */ W("div", {
-			className: c("px-6 py-4 mobile:pb-8"),
-			children: /* @__PURE__ */ W(N, {
+		}), /* @__PURE__ */ P("div", {
+			className: l("px-6 py-4 mobile:pb-8"),
+			children: /* @__PURE__ */ P(ae, {
 				tooltip: C,
-				hideTooltip: O || !C,
+				hideTooltip: D || !C,
 				triggerClassName: "w-full",
-				children: /* @__PURE__ */ W(w, {
+				children: /* @__PURE__ */ P(ee, {
 					label: S,
-					onClick: te,
-					disabled: !O,
+					onClick: A,
+					disabled: !D,
 					className: "w-full"
 				})
 			})
 		})]
 	});
-}, Ye = { modal: "_modal_kl0h0_1" }, Xe = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: h, temperatureHint: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = Ye.modal }) => {
-	let { responseFormat: b, systemPrompt: x, temperature: T, canSubmit: E, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: ee } = Ke({
+}, st = { modal: "_modal_kl0h0_1" }, ct = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: g, temperatureHint: _, saveLabel: v = "Apply changes", saveDisabledTooltip: y, backgroundClassName: b = st.modal }) => {
+	let { responseFormat: x, systemPrompt: S, temperature: C, canSubmit: w, setResponseFormat: T, setSystemPrompt: ee, setTemperature: O, handleSubmit: k } = rt({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -638,33 +740,31 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ W(S, {
+	return /* @__PURE__ */ P(E, {
 		open: !0,
 		header: o,
 		titleClassName: s,
-		size: C.Sm,
+		size: D.Sm,
 		onClose: a,
-		className: y,
-		footer: /* @__PURE__ */ W("div", {
-			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ W(N, {
-				tooltip: v,
-				hideTooltip: E || !v,
-				children: /* @__PURE__ */ W(w, {
-					label: _,
-					onClick: ee,
-					disabled: !E
-				})
-			})
-		}),
-		children: /* @__PURE__ */ W(Je, {
+		className: b,
+		mainButtons: [{
+			label: v,
+			variant: h.Primary,
+			onClick: k,
+			disabled: !w,
+			tooltipProps: y ? {
+				tooltip: y,
+				hideTooltip: w
+			} : void 0
+		}],
+		children: /* @__PURE__ */ P(at, {
 			features: e,
-			responseFormat: b,
-			systemPrompt: x,
-			temperature: T,
-			onResponseFormatChange: D,
-			onSystemPromptChange: O,
-			onTemperatureChange: k,
+			responseFormat: x,
+			systemPrompt: S,
+			temperature: C,
+			onResponseFormatChange: T,
+			onSystemPromptChange: ee,
+			onTemperatureChange: O,
 			responseFormatLabel: c,
 			responseFormatHint: l,
 			responseFormatMarkdownLabel: u,
@@ -672,14 +772,14 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 			systemPromptLabel: f,
 			systemPromptTooltip: p,
 			temperatureLabel: m,
-			temperatureLabels: h,
-			temperatureHint: g
+			temperatureLabels: g,
+			temperatureHint: _
 		})
 	});
-}, Ze = {
+}, lt = {
 	icon: "_icon_1fv6z_1",
 	selectedIcon: "_selectedIcon_1fv6z_5"
-}, Qe = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: l, onToolToggle: f, itemLabelClassName: p = "dial-small-text", colors: h }) => /* @__PURE__ */ W(Te, {
+}, K = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: s, onToolToggle: u, itemLabelClassName: d = "dial-small-text", colors: p }) => /* @__PURE__ */ P(W, {
 	isOpen: e,
 	title: o,
 	closeLabel: i,
@@ -687,140 +787,140 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 	onBack: t,
 	backLabel: n,
 	style: a,
-	children: /* @__PURE__ */ W("ul", {
+	children: /* @__PURE__ */ P("ul", {
 		role: "menu",
 		className: "flex flex-col pb-4",
-		style: s({
-			"--tbs-icon-text": h?.iconText,
-			"--tbs-selected-icon-text": h?.selectedIconText
+		style: c({
+			"--tbs-icon-text": p?.iconText,
+			"--tbs-selected-icon-text": p?.selectedIconText
 		}),
-		children: l.map((e) => /* @__PURE__ */ W("li", {
+		children: s.map((e) => /* @__PURE__ */ P("li", {
 			role: "none",
-			children: /* @__PURE__ */ W(d, {
+			children: /* @__PURE__ */ P(m, {
 				type: "button",
 				role: "menuitemcheckbox",
 				"aria-checked": e.isSelected,
 				className: "w-full gap-3 px-4 py-[10px] text-start",
-				iconBefore: /* @__PURE__ */ W("span", {
-					className: c("flex items-center", Ze.icon),
+				iconBefore: /* @__PURE__ */ P("span", {
+					className: l("flex items-center", lt.icon),
 					children: e.icon
 				}),
-				iconAfter: e.isSelected ? /* @__PURE__ */ W("span", {
-					className: c("ms-auto", Ze.selectedIcon),
-					children: /* @__PURE__ */ W(P, {
-						size: u,
+				iconAfter: e.isSelected ? /* @__PURE__ */ P("span", {
+					className: l("ms-auto", lt.selectedIcon),
+					children: /* @__PURE__ */ P(L, {
+						size: f,
 						"aria-hidden": !0,
-						stroke: m
+						stroke: _
 					})
 				}) : null,
-				label: /* @__PURE__ */ W("span", {
-					className: p,
+				label: /* @__PURE__ */ P("span", {
+					className: d,
 					children: e.label
 				}),
-				onClick: () => f(e.id)
+				onClick: () => u(e.id)
 			})
 		}, e.id))
 	})
-}), $e = {
+}), ut = {
 	toolIcon: "_toolIcon_ma5s5_1",
 	chevronIcon: "_chevronIcon_ma5s5_5"
-}, et = ({ onAttachClick: e, onRecordVoice: t, recordVoiceLabel: n = "Record voice", attachLabel: r, addMenuTitle: i, menuTitle: o, menuCloseLabel: d, style: f, listClassName: _ = "w-[240px]", isDisabled: y = !1, chatSettings: x, extraMenuItems: S, toolsMenuItems: C = [], onToolToggle: w, toolsMenuTitle: T = "Tools", toolsBackLabel: E = "Back", menuOverlays: D, colors: O }) => {
-	let k = l(), [ee, A] = V(!1), [te, j] = V(!1), [ne, M] = V(!1), [N, re] = V(null), [ie, P] = V(!1), F = z(() => s({
+}, dt = ({ onAttachClick: e, onRecordVoice: t, recordVoiceLabel: n = "Record voice", attachLabel: r, addMenuTitle: i, menuTitle: a, menuCloseLabel: s, style: u, listClassName: p = "w-[240px]", isDisabled: m = !1, chatSettings: h, extraMenuItems: b, toolsMenuItems: S = [], onToolToggle: w, toolsMenuTitle: T = "Tools", toolsBackLabel: E = "Back", menuOverlays: D, getCaretPosition: ee, colors: O }) => {
+	let k = d(), [te, A] = H(!1), [ne, j] = H(!1), [re, ie] = H(!1), [M, N] = H(null), [ae, se] = H(!1), I = B(() => c({
 		"--aab-tool-icon": O?.toolIcon,
 		"--aab-chevron-icon": O?.chevronIcon
-	}), [O?.toolIcon, O?.chevronIcon]), oe = C.length > 0 && w != null, I = D != null && D.length > 0, le = z(() => C.map((e) => ({
+	}), [O?.toolIcon, O?.chevronIcon]), ce = S.length > 0 && w != null, le = D != null && D.length > 0, ue = B(() => S.map((e) => ({
 		key: e.id,
 		label: e.label,
-		icon: /* @__PURE__ */ W("span", {
-			style: F,
-			className: c("flex items-center", $e.toolIcon),
+		icon: /* @__PURE__ */ P("span", {
+			style: I,
+			className: l("flex items-center", ut.toolIcon),
 			children: e.icon
 		}),
 		selectable: !0,
-		mark: b.Check,
+		mark: C.Check,
 		checked: e.isSelected,
 		onClick: () => w?.(e.id)
 	})), [
-		C,
+		S,
 		w,
-		F
-	]), pe = z(() => [
+		I
+	]), L = B(() => [
 		...e == null ? [] : [{
 			key: "attach",
 			label: r,
-			icon: /* @__PURE__ */ W(ce, {
-				size: u,
+			icon: /* @__PURE__ */ P(he, {
+				size: f,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
 			onClick: e
 		}],
-		...S ?? [],
-		...oe ? [{
+		...b ?? [],
+		...ce ? [{
 			key: "tools",
 			label: T,
-			icon: /* @__PURE__ */ W(fe, {
-				size: u,
+			icon: /* @__PURE__ */ P(ye, {
+				size: f,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
 			onClick: k ? () => {
-				M(!0), A(!1);
+				ie(!0), A(!1);
 			} : () => void 0,
-			...k ? { iconAfter: /* @__PURE__ */ W(ae, {
-				size: u,
-				stroke: m,
-				style: F,
-				className: c("rtl:scale-x-[-1]", $e.chevronIcon),
+			...k ? { iconAfter: /* @__PURE__ */ P(fe, {
+				size: f,
+				stroke: _,
+				style: I,
+				className: l("rtl:scale-x-[-1]", ut.chevronIcon),
 				"aria-hidden": !0
-			}) } : { children: le }
+			}) } : { children: ue }
 		}] : [],
 		...(D ?? []).map((e) => ({
 			key: e.key,
 			label: e.title,
 			icon: e.icon,
 			onClick: k ? () => {
-				re(e.key), A(!1);
+				N(e.key), A(!1);
 			} : () => void 0,
-			...k ? { iconAfter: /* @__PURE__ */ W(ae, {
-				size: u,
-				stroke: m,
-				style: F,
-				className: c("rtl:scale-x-[-1]", $e.chevronIcon),
+			...k ? { iconAfter: /* @__PURE__ */ P(fe, {
+				size: f,
+				stroke: _,
+				style: I,
+				className: l("rtl:scale-x-[-1]", ut.chevronIcon),
 				"aria-hidden": !0
 			}) } : {
 				children: [{
 					key: `${e.key}-panel`,
 					label: ""
 				}],
-				renderSubMenu: () => e.renderOverlay(() => P(!1))
+				renderSubMenu: () => e.renderOverlay(() => se(!1), ee?.() ?? 0)
 			}
 		})),
 		...t == null ? [] : [{
 			key: "record-voice",
 			label: n,
-			icon: /* @__PURE__ */ W(se, {
-				size: u,
+			icon: /* @__PURE__ */ P(me, {
+				size: f,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
 			onClick: () => {
-				A(!1), P(!1), t();
+				A(!1), se(!1), t();
 			}
 		}],
-		...x == null ? [] : [{
+		...h == null ? [] : [{
 			key: "chat-settings",
-			label: x.menuItemLabel ?? "Chat settings",
-			icon: /* @__PURE__ */ W(de, {
-				size: u,
+			label: h.menuItemLabel ?? "Chat settings",
+			icon: /* @__PURE__ */ P(ve, {
+				size: f,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
-			iconAfter: k ? /* @__PURE__ */ W(ae, {
-				size: u,
-				stroke: m,
-				style: F,
-				className: c("rtl:scale-x-[-1]", $e.chevronIcon),
+			iconAfter: k ? /* @__PURE__ */ P(fe, {
+				size: f,
+				stroke: _,
+				style: I,
+				className: l("rtl:scale-x-[-1]", ut.chevronIcon),
 				"aria-hidden": !0
 			}) : null,
 			onClick: () => j(!0)
@@ -830,216 +930,240 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 		e,
 		t,
 		n,
-		x,
-		S,
+		h,
+		b,
 		k,
-		oe,
+		ce,
 		T,
-		le,
+		ue,
 		D,
-		F
+		ee,
+		I
 	]);
-	if (pe.length === 0) return null;
-	let me = /* @__PURE__ */ W(h, {
+	if (L.length === 0) return null;
+	let de = /* @__PURE__ */ P(v, {
 		matchReferenceWidth: !1,
 		placement: "bottom-start",
-		listClassName: _,
-		items: pe,
-		open: I ? ie : void 0,
-		onOpenChange: I ? P : void 0,
-		children: /* @__PURE__ */ W(v, {
-			icon: /* @__PURE__ */ W(ue, {
-				size: p.LG,
+		listClassName: p,
+		overlayContentClassName: "flex flex-col gap-1",
+		items: L,
+		open: le ? ae : void 0,
+		onOpenChange: le ? se : void 0,
+		children: /* @__PURE__ */ P(x, {
+			icon: /* @__PURE__ */ P(_e, {
+				size: g.LG,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
 			"aria-label": i,
 			tooltipProps: { tooltip: i },
-			disabled: y
+			disabled: m
 		})
 	});
-	return /* @__PURE__ */ W(U, { children: k ? /* @__PURE__ */ G(U, { children: [
-		/* @__PURE__ */ W(v, {
-			icon: /* @__PURE__ */ W(ue, {
-				size: p.LG,
+	return /* @__PURE__ */ P(oe, { children: k ? /* @__PURE__ */ F(oe, { children: [
+		/* @__PURE__ */ P(x, {
+			icon: /* @__PURE__ */ P(_e, {
+				size: g.LG,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
 			"aria-label": i,
-			size: g.Large,
+			size: y.Large,
 			tooltipProps: { tooltip: i },
-			disabled: y,
+			disabled: m,
 			onClick: () => A(!0)
 		}),
-		/* @__PURE__ */ W(Ge, {
-			isOpen: ee,
-			title: o,
-			closeLabel: d,
+		/* @__PURE__ */ P(nt, {
+			isOpen: te,
+			title: a,
+			closeLabel: s,
 			onClose: () => A(!1),
-			style: f,
-			items: pe,
+			style: u,
+			items: L,
 			className: "pb-4",
 			btnTextClassName: "flex-1"
 		}),
-		oe && /* @__PURE__ */ W(Qe, {
-			isOpen: ne,
+		ce && /* @__PURE__ */ P(K, {
+			isOpen: re,
 			onBack: () => {
-				M(!1), A(!0);
+				ie(!1), A(!0);
 			},
 			backLabel: E,
-			onClose: () => M(!1),
-			closeLabel: d,
-			style: f,
+			onClose: () => ie(!1),
+			closeLabel: s,
+			style: u,
 			title: T,
-			items: C,
+			items: S,
 			onToolToggle: w
 		}),
-		D?.map((e) => /* @__PURE__ */ W(Te, {
-			isOpen: N === e.key,
+		D?.map((e) => /* @__PURE__ */ P(W, {
+			isOpen: M === e.key,
 			title: e.title,
-			closeLabel: d,
+			closeLabel: s,
 			onBack: () => {
-				re(null), A(!0);
+				N(null), A(!0);
 			},
 			backLabel: e.backLabel ?? "Back",
-			onClose: () => re(null),
-			style: f,
-			children: e.renderOverlay(() => re(null))
+			onClose: () => N(null),
+			style: u,
+			children: /* @__PURE__ */ P("div", {
+				role: "menu",
+				"aria-label": e.title,
+				children: e.renderOverlay(() => N(null), ee?.() ?? 0)
+			})
 		}, e.key)),
-		x != null && /* @__PURE__ */ W(K, {
-			isOpen: te,
+		h != null && /* @__PURE__ */ P(ot, {
+			isOpen: ne,
 			onBack: () => {
 				j(!1), A(!0);
 			},
-			backLabel: x.backLabel ?? "Back",
+			backLabel: h.backLabel ?? "Back",
 			onClose: () => j(!1),
-			closeLabel: d,
-			style: f,
-			features: x.features,
-			initialResponseFormat: x.responseFormat ?? a.Markdown,
-			initialSystemPrompt: x.systemPrompt,
-			initialTemperature: x.temperature,
-			onSave: x.onSave,
-			title: x.title,
-			responseFormatLabel: x.responseFormatLabel,
-			responseFormatHint: x.responseFormatHint,
-			responseFormatMarkdownLabel: x.responseFormatMarkdownLabel,
-			responseFormatPlainTextLabel: x.responseFormatPlainTextLabel,
-			systemPromptLabel: x.systemPromptLabel,
-			systemPromptTooltip: x.systemPromptTooltip,
-			temperatureLabel: x.temperatureLabel,
-			temperatureLabels: x.temperatureLabels,
-			temperatureHint: x.temperatureHint,
-			saveLabel: x.saveLabel,
-			saveDisabledTooltip: x.saveDisabledTooltip
+			closeLabel: s,
+			style: u,
+			features: h.features,
+			initialResponseFormat: h.responseFormat ?? o.Markdown,
+			initialSystemPrompt: h.systemPrompt,
+			initialTemperature: h.temperature,
+			onSave: h.onSave,
+			title: h.title,
+			responseFormatLabel: h.responseFormatLabel,
+			responseFormatHint: h.responseFormatHint,
+			responseFormatMarkdownLabel: h.responseFormatMarkdownLabel,
+			responseFormatPlainTextLabel: h.responseFormatPlainTextLabel,
+			systemPromptLabel: h.systemPromptLabel,
+			systemPromptTooltip: h.systemPromptTooltip,
+			temperatureLabel: h.temperatureLabel,
+			temperatureLabels: h.temperatureLabels,
+			temperatureHint: h.temperatureHint,
+			saveLabel: h.saveLabel,
+			saveDisabledTooltip: h.saveDisabledTooltip
 		})
-	] }) : /* @__PURE__ */ G(U, { children: [me, x != null && te && /* @__PURE__ */ W(Xe, {
-		features: x.features,
-		initialResponseFormat: x.responseFormat ?? a.Markdown,
-		initialSystemPrompt: x.systemPrompt,
-		initialTemperature: x.temperature,
-		onSave: x.onSave,
+	] }) : /* @__PURE__ */ F(oe, { children: [de, h != null && ne && /* @__PURE__ */ P(ct, {
+		features: h.features,
+		initialResponseFormat: h.responseFormat ?? o.Markdown,
+		initialSystemPrompt: h.systemPrompt,
+		initialTemperature: h.temperature,
+		onSave: h.onSave,
 		onClose: () => j(!1),
-		title: x.title,
-		responseFormatLabel: x.responseFormatLabel,
-		responseFormatHint: x.responseFormatHint,
-		responseFormatMarkdownLabel: x.responseFormatMarkdownLabel,
-		responseFormatPlainTextLabel: x.responseFormatPlainTextLabel,
-		systemPromptLabel: x.systemPromptLabel,
-		systemPromptTooltip: x.systemPromptTooltip,
-		temperatureLabel: x.temperatureLabel,
-		temperatureLabels: x.temperatureLabels,
-		temperatureHint: x.temperatureHint,
-		saveLabel: x.saveLabel,
-		saveDisabledTooltip: x.saveDisabledTooltip
+		title: h.title,
+		responseFormatLabel: h.responseFormatLabel,
+		responseFormatHint: h.responseFormatHint,
+		responseFormatMarkdownLabel: h.responseFormatMarkdownLabel,
+		responseFormatPlainTextLabel: h.responseFormatPlainTextLabel,
+		systemPromptLabel: h.systemPromptLabel,
+		systemPromptTooltip: h.systemPromptTooltip,
+		temperatureLabel: h.temperatureLabel,
+		temperatureLabels: h.temperatureLabels,
+		temperatureHint: h.temperatureHint,
+		saveLabel: h.saveLabel,
+		saveDisabledTooltip: h.saveDisabledTooltip
 	})] }) });
-}, tt = {
-	chip: "_chip_ydmd8_1",
-	chipSelected: "_chipSelected_ydmd8_9",
-	chipIcon: "_chipIcon_ydmd8_16",
-	chipText: "_chipText_ydmd8_19",
-	chipClose: "_chipClose_ydmd8_22"
-}, nt = (e) => `Remove ${e}`, rt = ({ items: e, onToolToggle: t, onToolDismiss: n, canRemove: r = !0, removeLabel: i = nt, typography: a, colors: o }) => e.length === 0 ? null : /* @__PURE__ */ W("div", {
-	className: "flex flex-wrap items-center gap-2",
-	style: s({
-		"--ci-chip-bg": o?.chipBg,
-		"--ci-chip-border": o?.chipBorder,
-		"--ci-chip-icon": o?.chipIcon,
-		"--ci-chip-text": o?.chipText,
-		"--ci-chip-hover-bg": o?.chipHoverBg,
-		"--ci-chip-selected-bg": o?.chipSelectedBg,
-		"--ci-chip-selected-border": o?.chipSelectedBorder,
-		"--ci-chip-selected-icon": o?.chipSelectedIcon,
-		"--ci-chip-selected-text": o?.chipSelectedText,
-		"--ci-chip-close": o?.chipClose,
-		"--ci-chip-close-hover": o?.chipCloseHover
-	}),
-	children: e.map((e) => /* @__PURE__ */ G("div", {
-		className: c(tt.chip, e.isSelected && tt.chipSelected, "flex min-w-0 items-center gap-1.5 rounded-full border py-1 transition-colors", r ? "pe-1 ps-2" : "px-2"),
-		children: [/* @__PURE__ */ G("button", {
-			type: "button",
-			onClick: () => t(e.id),
-			"aria-pressed": e.isSelected,
-			className: "flex min-w-0 items-center gap-1.5",
-			children: [/* @__PURE__ */ W("span", {
-				className: c(tt.chipIcon, "shrink-0"),
-				"aria-hidden": !0,
-				children: e.icon
-			}), /* @__PURE__ */ W("span", {
-				className: c(tt.chipText, a?.fontClassName || "dial-small-paragraph-text", "truncate"),
-				children: e.label
+}, ft = {
+	chip: "_chip_1lvv5_1",
+	chipSelected: "_chipSelected_1lvv5_9",
+	chipIcon: "_chipIcon_1lvv5_16",
+	chipText: "_chipText_1lvv5_19",
+	chipState: "_chipState_1lvv5_22",
+	chipClose: "_chipClose_1lvv5_25"
+}, pt = (e) => `Remove ${e}`, mt = ({ items: e, onToolToggle: t, onToolDismiss: n, canRemove: r = !0, removeLabel: i = pt, stateOnLabel: a, stateOffLabel: o, typography: s, colors: u }) => {
+	if (e.length === 0) return null;
+	let d = !!(a && o);
+	return /* @__PURE__ */ P("div", {
+		className: "flex flex-wrap items-center gap-2",
+		style: c({
+			"--ci-chip-bg": u?.chipBg,
+			"--ci-chip-border": u?.chipBorder,
+			"--ci-chip-icon": u?.chipIcon,
+			"--ci-chip-text": u?.chipText,
+			"--ci-chip-hover-bg": u?.chipHoverBg,
+			"--ci-chip-selected-bg": u?.chipSelectedBg,
+			"--ci-chip-selected-border": u?.chipSelectedBorder,
+			"--ci-chip-selected-icon": u?.chipSelectedIcon,
+			"--ci-chip-selected-text": u?.chipSelectedText,
+			"--ci-chip-state-text": u?.chipStateText,
+			"--ci-chip-close": u?.chipClose,
+			"--ci-chip-close-hover": u?.chipCloseHover
+		}),
+		children: e.map((e) => /* @__PURE__ */ F("div", {
+			className: l(ft.chip, e.isSelected && ft.chipSelected, "flex min-w-0 items-center gap-1.5 rounded-full border py-1 transition-colors", r ? "pe-1 ps-2" : "px-2"),
+			children: [/* @__PURE__ */ F("button", {
+				type: "button",
+				onClick: () => t(e.id),
+				"aria-pressed": e.isSelected,
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ P("span", {
+						className: l(ft.chipIcon, "shrink-0"),
+						"aria-hidden": !0,
+						children: e.icon
+					}),
+					/* @__PURE__ */ F("span", {
+						className: l(ft.chipText, s?.fontClassName || "dial-small-paragraph-text", "truncate"),
+						children: [e.label, d && /* @__PURE__ */ P("span", {
+							"aria-hidden": !0,
+							children: ":"
+						})]
+					}),
+					d && /* @__PURE__ */ P("span", {
+						className: l(ft.chipState, s?.fontClassName || "dial-small-paragraph-text", "ms-1 shrink-0 uppercase tracking-wider"),
+						"aria-hidden": !0,
+						children: e.isSelected ? a : o
+					})
+				]
+			}), r && /* @__PURE__ */ P("button", {
+				type: "button",
+				onClick: () => n(e.id),
+				"aria-label": i(e.label),
+				className: l(ft.chipClose, "flex shrink-0 items-center rounded p-0.5 transition-colors"),
+				children: /* @__PURE__ */ P(be, {
+					size: 12,
+					"aria-hidden": !0,
+					stroke: _
+				})
 			})]
-		}), r && /* @__PURE__ */ W("button", {
-			type: "button",
-			onClick: () => n(e.id),
-			"aria-label": i(e.label),
-			className: c(tt.chipClose, "flex shrink-0 items-center rounded p-0.5 transition-colors"),
-			children: /* @__PURE__ */ W(pe, {
-				size: 12,
-				"aria-hidden": !0,
-				stroke: m
-			})
-		})]
-	}, e.id))
-}), q = {
-	wrapper: "_wrapper_q1jcl_2",
-	wrapperDisabled: "_wrapperDisabled_q1jcl_9",
-	textarea: "_textarea_q1jcl_13",
-	textareaIndented: "_textareaIndented_q1jcl_19",
-	commandHint: "_commandHint_q1jcl_43",
-	modelSelectorButton: "_modelSelectorButton_q1jcl_47",
-	modelSelectorCaret: "_modelSelectorCaret_q1jcl_47",
-	modelSelectorName: "_modelSelectorName_q1jcl_50",
-	modelSelectorVersion: "_modelSelectorVersion_q1jcl_53",
-	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_q1jcl_62"
-}, it = {
-	wrapperError: "_wrapperError_129ri_1",
-	waveformCanvas: "_waveformCanvas_129ri_5",
-	recordingDot: "_recordingDot_129ri_19",
-	"recording-pulse": "_recording-pulse_129ri_1"
-}, at = 3, ot = 4, st = 200, ct = ({ state: e, analyserNodeRef: t, errorMessage: n, onStop: r, onDiscard: i, attachButton: a, stopLabel: o = "Stop recording", discardLabel: s = "Discard recording", processingLabel: l = "Transcribing audio…", style: u, className: d, embedded: f = !1 }) => {
-	let h = B(null), g = B(new Float32Array(st)), y = B(0), b = B(0), x = e === Ie.Recording, S = e === Ie.Error, C = e === Ie.Processing, w = L((e) => {
+		}, e.id))
+	});
+}, q = {
+	wrapper: "_wrapper_19a9k_2",
+	wrapperDisabled: "_wrapperDisabled_19a9k_9",
+	textarea: "_textarea_19a9k_13",
+	textareaMentionMode: "_textareaMentionMode_19a9k_19",
+	commandHint: "_commandHint_19a9k_53",
+	mentionHighlight: "_mentionHighlight_19a9k_57",
+	mentionHighlightUnsupported: "_mentionHighlightUnsupported_19a9k_63",
+	modelSelectorButton: "_modelSelectorButton_19a9k_69",
+	modelSelectorCaret: "_modelSelectorCaret_19a9k_69",
+	modelSelectorName: "_modelSelectorName_19a9k_72",
+	modelSelectorVersion: "_modelSelectorVersion_19a9k_75",
+	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_19a9k_84"
+}, ht = {
+	waveformCanvas: "_waveformCanvas_18zb5_1",
+	recordingDot: "_recordingDot_18zb5_15",
+	"recording-pulse": "_recording-pulse_18zb5_1"
+}, gt = 3, _t = 4, vt = 200, yt = ({ state: e, analyserNodeRef: t, onStop: n, onDiscard: r, attachButton: i, stopLabel: a = "Stop recording", discardLabel: o = "Discard recording", processingLabel: s = "Transcribing audio…", style: c, className: u, embedded: d = !1 }) => {
+	let f = V(null), p = V(new Float32Array(vt)), m = V(0), h = V(0), v = e === Ke.Recording, y = e === Ke.Processing, b = R((e) => {
 		let t = e.getContext("2d");
 		if (!t) return;
 		e.width = e.clientWidth || 200, e.height = e.clientHeight || 32;
 		let { width: n, height: r } = e;
 		t.clearRect(0, 0, n, r), t.fillStyle = getComputedStyle(e).color;
-		let i = Math.min(Math.max(1, Math.floor(n / ot)), st - 1), a = y.current, o = b.current;
+		let i = Math.min(Math.max(1, Math.floor(n / _t)), vt - 1), a = m.current, o = h.current;
 		t.save(), t.beginPath(), t.rect(0, 0, n, r), t.clip(), t.translate(-o, 0);
 		for (let e = 0; e <= i; e++) {
-			let n = ((a - i + e) % st + st) % st, o = g.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
-			t.fillRect(e * ot, (r - c) / 2, at, c);
+			let n = ((a - i + e) % vt + vt) % vt, o = p.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
+			t.fillRect(e * _t, (r - c) / 2, gt, c);
 		}
 		t.restore();
 	}, []);
-	R(() => {
-		if (!x) return;
-		let e = h.current;
+	z(() => {
+		if (!v) return;
+		let e = f.current;
 		if (!e) return;
-		g.current.fill(0), y.current = 0, b.current = 0;
+		p.current.fill(0), m.current = 0, h.current = 0;
 		let n, r = () => {
-			if (b.current += 1, b.current >= ot) {
-				b.current -= ot;
+			if (h.current += 1, h.current >= _t) {
+				h.current -= _t;
 				let e = t.current;
 				if (e) {
 					let t = new Uint8Array(e.frequencyBinCount);
@@ -1049,206 +1173,223 @@ var Se = "a[href], button:not([disabled]), input:not([disabled]), select:not([di
 						let r = (t[e] - 128) / 128;
 						n += r * r;
 					}
-					g.current[y.current % st] = Math.sqrt(n / t.length), y.current++;
+					p.current[m.current % vt] = Math.sqrt(n / t.length), m.current++;
 				}
 			}
-			w(e), n = requestAnimationFrame(r);
+			b(e), n = requestAnimationFrame(r);
 		};
 		return n = requestAnimationFrame(r), () => {
 			cancelAnimationFrame(n);
 		};
 	}, [
-		x,
+		v,
 		t,
-		w
-	]), R(() => {
-		let e = h.current;
+		b
+	]), z(() => {
+		let e = f.current;
 		if (!e) return;
 		let t = new ResizeObserver(() => {
-			w(e);
+			b(e);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [w]);
-	let E = /* @__PURE__ */ G("div", {
+	}, [b]);
+	let x = /* @__PURE__ */ F("div", {
 		className: "flex flex-shrink-0 items-center justify-end gap-1",
 		children: [
-			/* @__PURE__ */ W(v, {
-				icon: /* @__PURE__ */ W(pe, {
-					size: p.LG,
+			/* @__PURE__ */ P(T, {
+				icon: /* @__PURE__ */ P(be, {
+					size: g.LG,
 					"aria-hidden": !0,
-					stroke: m
+					stroke: _
 				}),
-				"aria-label": s,
+				"aria-label": o,
 				className: "mobile:min-h-11 mobile:min-w-11",
-				onClick: i
+				onClick: r
 			}),
-			x && /* @__PURE__ */ W(T, {
-				icon: /* @__PURE__ */ W(I, {
-					size: p.LG,
-					"aria-hidden": !0
+			v && /* @__PURE__ */ P(O, {
+				icon: /* @__PURE__ */ P(L, {
+					size: g.LG,
+					"aria-hidden": !0,
+					stroke: _
 				}),
-				onClick: () => r?.(),
+				onClick: () => n?.(),
 				autoFocus: !0,
-				"aria-label": o,
+				"aria-label": a,
 				className: "mobile:min-h-11 mobile:min-w-11"
 			}),
-			C && /* @__PURE__ */ W("span", {
+			y && /* @__PURE__ */ P("span", {
 				className: "flex size-[40px] flex-shrink-0 items-center justify-center mobile:min-h-11 mobile:min-w-11",
-				children: /* @__PURE__ */ W(te, {
+				children: /* @__PURE__ */ P(ie, {
 					size: 20,
-					ariaLabel: l
+					ariaLabel: s
 				})
 			})
 		]
 	});
-	return /* @__PURE__ */ G("div", {
-		className: d,
-		children: [/* @__PURE__ */ G("div", {
-			style: u,
-			className: c("flex w-full min-w-0 flex-col justify-center gap-2", !f && q.wrapper, !f && "min-h-[64px] max-w-[748px] rounded-xl border px-3 shadow-md", S && it.wrapperError),
-			children: [/* @__PURE__ */ G("div", {
+	return /* @__PURE__ */ P("div", {
+		className: u,
+		children: /* @__PURE__ */ F("div", {
+			style: c,
+			className: l("flex w-full min-w-0 flex-col justify-center gap-2", !d && q.wrapper, !d && "min-h-[64px] max-w-[748px] rounded-xl border px-3 shadow-md"),
+			children: [/* @__PURE__ */ F("div", {
 				className: "flex min-w-0 flex-1 items-center gap-3",
-				children: [x && /* @__PURE__ */ W("span", {
-					className: c(it.recordingDot, "pointer-events-none block size-[8px] rounded-3xl"),
+				children: [v && /* @__PURE__ */ P("span", {
+					className: l(ht.recordingDot, "pointer-events-none block size-[8px] rounded-3xl"),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ W("canvas", {
-					ref: h,
+				}), /* @__PURE__ */ P("canvas", {
+					ref: f,
 					height: 26,
 					"aria-hidden": !0,
-					className: c(it.waveformCanvas, "h-[26px] min-w-0 flex-1")
+					className: l(ht.waveformCanvas, "h-[26px] min-w-0 flex-1")
 				})]
-			}), /* @__PURE__ */ G("div", {
+			}), /* @__PURE__ */ F("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [a ?? /* @__PURE__ */ W("span", { "aria-hidden": !0 }), E]
+				children: [i ?? /* @__PURE__ */ P("span", { "aria-hidden": !0 }), x]
 			})]
-		}), S && n && /* @__PURE__ */ W("div", {
-			role: "alert",
-			children: /* @__PURE__ */ W(_, {
-				text: n,
-				className: "mt-1 px-1"
-			})
-		})]
+		})
 	});
-}, lt = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", sendTooltip: r }) => /* @__PURE__ */ W(T, {
+}, bt = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", sendTooltip: r }) => /* @__PURE__ */ P(O, {
 	"aria-label": n,
 	onClick: () => e?.(),
 	disabled: t,
 	tooltipProps: r ? { tooltip: r } : void 0,
-	icon: /* @__PURE__ */ W(ie, {
-		size: p.LG,
+	icon: /* @__PURE__ */ P(ue, {
+		size: g.LG,
 		className: "rtl:scale-x-[-1]",
-		stroke: m
+		stroke: _
 	})
-}), ut = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ W(j, {
-	icon: /* @__PURE__ */ W(le, {
-		size: p.LG,
-		stroke: m
+}), xt = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ P(T, {
+	icon: /* @__PURE__ */ P(ge, {
+		size: g.LG,
+		stroke: _
 	}),
 	onClick: () => e?.(),
 	"aria-label": t
-}), dt = ({ size: e = 20 }) => /* @__PURE__ */ W(k, {
-	variant: ee.Circular,
+}), St = ({ size: e = 20 }) => /* @__PURE__ */ P(ne, {
+	variant: j.Circular,
 	width: e,
 	height: e,
 	active: !0
-}), ft = ({ loadingLabel: e }) => /* @__PURE__ */ G("span", {
+}), Ct = ({ loadingLabel: e }) => /* @__PURE__ */ F("span", {
 	className: "flex min-w-0 flex-1 items-center",
-	children: [/* @__PURE__ */ W(k, {
-		variant: ee.Text,
+	children: [/* @__PURE__ */ P(ne, {
+		variant: j.Text,
 		width: "100%",
 		height: 16,
 		active: !0
-	}), e && /* @__PURE__ */ W("span", {
+	}), e && /* @__PURE__ */ P("span", {
 		className: "sr-only",
 		children: e
 	})]
-}), pt = ({ loadingLabel: e }) => /* @__PURE__ */ W("div", {
+}), wt = ({ loadingLabel: e }) => /* @__PURE__ */ P("div", {
 	role: "status",
 	"aria-label": e,
-	children: Array.from({ length: 7 }).map((e, t) => /* @__PURE__ */ G("div", {
+	children: Array.from({ length: 7 }).map((e, t) => /* @__PURE__ */ F("div", {
 		className: "flex h-11 items-center gap-3 px-4",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ W(dt, {}), /* @__PURE__ */ W(ft, {})]
+		children: [/* @__PURE__ */ P(St, {}), /* @__PURE__ */ P(Ct, {})]
 	}, t))
-}), mt = (e) => e.displayName ?? e.id, ht = (e, t) => {
+}), Tt = (e) => e.displayName ?? e.id, Et = (e, t) => {
 	let n = t.trim().toLowerCase();
-	return n ? e.filter((e) => mt(e).toLowerCase().includes(n)) : e;
-}, J = (e, t, r, i = 18, a) => /* @__PURE__ */ W(n, {
+	return n ? e.filter((e) => Tt(e).toLowerCase().includes(n)) : e;
+}, Dt = (e, t, r, i = 18, a) => /* @__PURE__ */ P(n, {
 	src: e,
 	size: i,
 	labels: { tooltip: a },
 	initialsName: r
-}), Y = { searchHeader: "_searchHeader_1728o_1" }, gt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, searchHeaderClassName: i = Y.searchHeader, colors: a }) => {
-	let [o, l] = V(""), u = z(() => e?.find((e) => e.id === t), [e, t]), d = r?.loading !== void 0, f = !d && !u && !!t, m = z(() => d ? /* @__PURE__ */ W(dt, { size: p.LG }) : J(u?.iconUrl, u?.type, u?.displayName ?? u?.id ?? "", p.LG, f ? r?.unavailableTooltip ?? "This deployment is no longer available" : void 0), [
-		d,
+}), Ot = {
+	searchHeader: "_searchHeader_1u7db_1",
+	itemText: "_itemText_1u7db_13",
+	itemHover: "_itemHover_1u7db_17",
+	selectedItemBackground: "_selectedItemBackground_1u7db_22",
+	selectedItemText: "_selectedItemText_1u7db_26",
+	checkIcon: "_checkIcon_1u7db_30"
+}, kt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, styles: i }) => {
+	let [a, o] = H(""), s = B(() => e?.find((e) => e.id === t), [e, t]), u = r?.loading !== void 0, d = !u && !s && !!t, f = B(() => u ? /* @__PURE__ */ P(St, { size: g.LG }) : Dt(s?.iconUrl, s?.type, s?.displayName ?? s?.id ?? "", g.LG, d ? r?.unavailableTooltip ?? "This deployment is no longer available" : void 0), [
 		u,
-		f,
+		s,
+		d,
 		r?.unavailableTooltip
-	]), h = u?.displayName ?? u?.id, _ = u?.displayVersion;
-	return {
-		selectorIcon: m,
-		selectorAriaLabel: h ? `${r?.ariaLabel ?? "Select model"}: ${h}` : r?.ariaLabel ?? "Select model",
-		selectedLabel: h,
-		selectedVersion: _,
-		menuItems: z(() => {
-			if (d) return Array.from({ length: 7 }, (e, t) => ({
-				key: `__loading-${t}`,
-				icon: /* @__PURE__ */ W(dt, {}),
-				label: /* @__PURE__ */ W(ft, { loadingLabel: t === 0 ? r?.loading : void 0 }),
+	]), p = s?.displayName ?? s?.id, m = s?.displayVersion, h = p ? `${r?.ariaLabel ?? "Select model"}: ${p}` : r?.ariaLabel ?? "Select model", _ = B(() => {
+		if (u) return Array.from({ length: 7 }, (e, t) => ({
+			key: `__loading-${t}`,
+			icon: /* @__PURE__ */ P(St, {}),
+			label: /* @__PURE__ */ P(Ct, { loadingLabel: t === 0 ? r?.loading : void 0 }),
+			disabled: !0
+		}));
+		if (!e || e.length === 0) {
+			let e = r?.error ?? r?.empty;
+			return e ? [{
+				key: "__state",
+				label: e,
 				disabled: !0
-			}));
-			if (!e || e.length === 0) {
-				let e = r?.error ?? r?.empty;
-				return e ? [{
-					key: "__state",
-					label: e,
-					disabled: !0
-				}] : [];
-			}
-			return ht(e, o).map((e) => ({
+			}] : [];
+		}
+		let o = i?.colors;
+		return Et(e, a).map((e) => {
+			let r = e.id === t;
+			return {
 				key: e.id,
-				label: /* @__PURE__ */ W(y, {
-					text: mt(e),
-					query: o,
+				label: /* @__PURE__ */ P(S, {
+					text: Tt(e),
+					query: a,
 					maxLines: 1
 				}),
-				icon: J(e.iconUrl, e.type, e.displayName ?? e.id),
-				mark: b.Check,
-				checked: e.id === t,
+				icon: Dt(e.iconUrl, e.type, e.displayName ?? e.id),
+				mark: C.Check,
+				checked: r,
+				className: l(o?.itemText && Ot.itemText, o?.itemHoverBackground && Ot.itemHover, r && o?.selectedItemBackground && Ot.selectedItemBackground, r && o?.selectedItemText && Ot.selectedItemText, r && o?.checkIcon && Ot.checkIcon, i?.itemClassName, r && i?.selectedItemClassName, U.modelMenuItem, r && U.modelMenuItemSelected),
 				onClick: () => n?.(e.id)
-			}));
-		}, [
-			e,
-			d,
-			o,
-			t,
-			r,
-			n
-		]),
-		menuHeader: z(() => !d && e && e.length > 0 ? /* @__PURE__ */ W("div", {
-			style: s({ "--ms-search-header-bg": a?.searchHeaderBackground }),
-			className: c("sticky top-0 z-10 pb-1 pe-2 pt-2", i),
-			children: /* @__PURE__ */ W(O, {
-				value: o,
+			};
+		});
+	}, [
+		e,
+		u,
+		a,
+		t,
+		r,
+		n,
+		i?.itemClassName,
+		i?.selectedItemClassName,
+		i?.colors
+	]), v = B(() => c({
+		"--ms-item-text": i?.colors?.itemText,
+		"--ms-item-hover-bg": i?.colors?.itemHoverBackground,
+		"--ms-selected-item-bg": i?.colors?.selectedItemBackground,
+		"--ms-selected-item-text": i?.colors?.selectedItemText,
+		"--ms-check-icon": i?.colors?.checkIcon
+	}), [i?.colors]);
+	return {
+		selectorIcon: f,
+		selectorAriaLabel: h,
+		selectedLabel: p,
+		selectedVersion: m,
+		menuItems: _,
+		menuHeader: B(() => !u && e && e.length > 0 ? /* @__PURE__ */ P("div", {
+			style: c({ "--ms-search-header-bg": i?.colors?.searchHeaderBackground }),
+			className: l("sticky top-0 z-10 pb-1 pe-2 pt-2", Ot.searchHeader, i?.searchHeaderClassName, U.modelMenuSearch),
+			children: /* @__PURE__ */ P(A, {
+				value: a,
 				placeholder: r?.searchPlaceholder ?? "Search",
-				size: g.Small,
+				size: y.Small,
 				wrapperClassName: "border-0",
-				onChange: (e) => l(e ?? "")
+				onChange: (e) => o(e ?? "")
 			})
 		}) : void 0, [
 			e,
-			d,
-			o,
+			u,
+			a,
 			r,
-			i,
-			a?.searchHeaderBackground
+			i?.searchHeaderClassName,
+			i?.colors?.searchHeaderBackground
 		]),
+		menuStyle: v,
 		onOpenChange: (e) => {
-			e || l("");
+			e || o("");
 		}
 	};
-}, _t = typeof window < "u" ? _e : R;
-function vt(e) {
+}, At = typeof window < "u" ? Ee : z;
+function jt(e) {
 	if (e !== void 0) switch (typeof e) {
 		case "number": return e;
 		case "string":
@@ -1256,15 +1397,15 @@ function vt(e) {
 			break;
 	}
 }
-function yt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
-	let { styleHeight: s, styleWidth: c } = z(() => ({
-		styleHeight: vt(o?.height),
-		styleWidth: vt(o?.width)
-	}), [o?.height, o?.width]), [l, u] = V({
+function Mt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
+	let { styleHeight: s, styleWidth: c } = B(() => ({
+		styleHeight: jt(o?.height),
+		styleWidth: jt(o?.width)
+	}), [o?.height, o?.width]), [l, u] = H({
 		height: t,
 		width: n
 	}), d = r || a === "only-height" && s !== void 0 || a === "only-width" && c !== void 0 || s !== void 0 && c !== void 0;
-	return _t(() => {
+	return At(() => {
 		if (i === null || d) return;
 		let t = new ResizeObserver((e) => {
 			for (let t of e) {
@@ -1284,7 +1425,7 @@ function yt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i
 		i,
 		s,
 		c
-	]), z(() => ({
+	]), B(() => ({
 		height: s ?? l.height,
 		width: c ?? l.width
 	}), [
@@ -1293,26 +1434,26 @@ function yt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i
 		c
 	]);
 }
-function bt(e) {
-	let t = B(() => {
+function Nt(e) {
+	let t = V(() => {
 		throw Error("Cannot call during render.");
 	});
-	return _t(() => {
+	return At(() => {
 		t.current = e;
-	}, [e]), L((e) => t.current?.(e), [t]);
+	}, [e]), R((e) => t.current?.(e), [t]);
 }
-var xt = null;
-function X(e = !1) {
-	if (xt === null || e) {
+var Pt = null;
+function Ft(e = !1) {
+	if (Pt === null || e) {
 		let e = document.createElement("div"), t = e.style;
 		t.width = "50px", t.height = "50px", t.overflow = "scroll", t.direction = "rtl";
 		let n = document.createElement("div"), r = n.style;
-		return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? xt = "positive-descending" : (e.scrollLeft = 1, xt = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), xt;
+		return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? Pt = "positive-descending" : (e.scrollLeft = 1, Pt = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), Pt;
 	}
-	return xt;
+	return Pt;
 }
-function Z({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
-	if (t === "horizontal" && n) switch (X()) {
+function It({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
+	if (t === "horizontal" && n) switch (Ft()) {
 		case "negative": return -r;
 		case "positive-descending":
 			if (e) {
@@ -1323,26 +1464,26 @@ function Z({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
 	}
 	return r;
 }
-function Q(e, t = "Assertion error") {
+function J(e, t = "Assertion error") {
 	if (!e) throw console.error(t), Error(t);
 }
-function St(e, t) {
+function Y(e, t) {
 	if (e === t) return !0;
-	if (!!e != !!t || (Q(e !== void 0), Q(t !== void 0), Object.keys(e).length !== Object.keys(t).length)) return !1;
+	if (!!e != !!t || (J(e !== void 0), J(t !== void 0), Object.keys(e).length !== Object.keys(t).length)) return !1;
 	for (let n in e) if (!Object.is(t[n], e[n])) return !1;
 	return !0;
 }
-function Ct({ cachedBounds: e, itemCount: t, itemSize: n }) {
+function X({ cachedBounds: e, itemCount: t, itemSize: n }) {
 	if (t === 0) return 0;
 	if (typeof n == "number") return t * n;
 	{
 		let n = e.get(e.size === 0 ? 0 : e.size - 1);
-		return Q(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
+		return J(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
 	}
 }
-function wt({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, containerScrollOffset: a, containerSize: o }) {
+function Lt({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, containerScrollOffset: a, containerSize: o }) {
 	if (n < 0 || n >= r) throw RangeError(`Invalid index specified: ${n}`, { cause: `Index ${n} is not within the range of 0 - ${r - 1}` });
-	let s = Ct({
+	let s = X({
 		cachedBounds: t,
 		itemCount: r,
 		itemSize: i
@@ -1354,7 +1495,7 @@ function wt({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, co
 		default: return a >= u && a <= l ? a : a < u ? u : l;
 	}
 }
-function Tt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCount: r, overscanCount: i }) {
+function Rt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCount: r, overscanCount: i }) {
 	let a = r - 1, o = 0, s = -1, c = 0, l = -1, u = 0;
 	for (; u < a;) {
 		let n = e.get(u);
@@ -1373,11 +1514,11 @@ function Tt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemC
 		stopIndexOverscan: l
 	};
 }
-function Et({ itemCount: e, itemProps: t, itemSize: n }) {
+function zt({ itemCount: e, itemProps: t, itemSize: n }) {
 	let r = /* @__PURE__ */ new Map();
 	return {
 		get(i) {
-			for (Q(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
+			for (J(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
 				let e = r.size, a;
 				switch (typeof n) {
 					case "function":
@@ -1393,14 +1534,14 @@ function Et({ itemCount: e, itemProps: t, itemSize: n }) {
 				});
 				else {
 					let t = r.get(e - 1);
-					Q(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
+					J(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
 						scrollOffset: t.scrollOffset + t.size,
 						size: a
 					});
 				}
 			}
 			let a = r.get(i);
-			return Q(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
+			return J(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
 		},
 		set(e, t) {
 			r.set(e, t);
@@ -1410,8 +1551,8 @@ function Et({ itemCount: e, itemProps: t, itemSize: n }) {
 		}
 	};
 }
-function Dt({ itemCount: e, itemProps: t, itemSize: n }) {
-	return z(() => Et({
+function Z({ itemCount: e, itemProps: t, itemSize: n }) {
+	return B(() => zt({
 		itemCount: e,
 		itemProps: t,
 		itemSize: n
@@ -1421,11 +1562,11 @@ function Dt({ itemCount: e, itemProps: t, itemSize: n }) {
 		n
 	]);
 }
-function Ot({ containerSize: e, itemSize: t }) {
+function Bt({ containerSize: e, itemSize: t }) {
 	let n;
 	switch (typeof t) {
 		case "string":
-			Q(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), Q(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
+			J(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), J(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
 			break;
 		default:
 			n = t;
@@ -1433,21 +1574,21 @@ function Ot({ containerSize: e, itemSize: t }) {
 	}
 	return n;
 }
-function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n = 0, direction: r, isRtl: i = !1, itemCount: a, itemProps: o, itemSize: s, onResize: c, overscanCount: l }) {
-	let { height: u = n, width: d = n } = yt({
+function Vt({ containerElement: e, containerStyle: t, defaultContainerSize: n = 0, direction: r, isRtl: i = !1, itemCount: a, itemProps: o, itemSize: s, onResize: c, overscanCount: l }) {
+	let { height: u = n, width: d = n } = Mt({
 		defaultHeight: r === "vertical" ? n : void 0,
 		defaultWidth: r === "horizontal" ? n : void 0,
 		element: e,
 		mode: r === "vertical" ? "only-height" : "only-width",
 		style: t
-	}), f = B({
+	}), f = V({
 		height: 0,
 		width: 0
-	}), p = r === "vertical" ? u : d, m = Ot({
+	}), p = r === "vertical" ? u : d, m = Bt({
 		containerSize: p,
 		itemSize: s
 	});
-	_e(() => {
+	Ee(() => {
 		if (typeof c == "function") {
 			let e = f.current;
 			(e.height !== u || e.width !== d) && (c({
@@ -1460,11 +1601,11 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		c,
 		d
 	]);
-	let h = Dt({
+	let h = Z({
 		itemCount: a,
 		itemProps: o,
 		itemSize: m
-	}), g = L((e) => h.get(e), [h]), [_, v] = V(() => Tt({
+	}), g = R((e) => h.get(e), [h]), [_, v] = H(() => Rt({
 		cachedBounds: h,
 		containerScrollOffset: 0,
 		containerSize: p,
@@ -1475,7 +1616,7 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		startIndexOverscan: Math.min(a - 1, _.startIndexOverscan),
 		stopIndexVisible: Math.min(a - 1, _.stopIndexVisible),
 		stopIndexOverscan: Math.min(a - 1, _.stopIndexOverscan)
-	}, C = L(() => Ct({
+	}, C = R(() => X({
 		cachedBounds: h,
 		itemCount: a,
 		itemSize: m
@@ -1483,9 +1624,9 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		h,
 		a,
 		m
-	]), w = L((t) => Tt({
+	]), w = R((t) => Rt({
 		cachedBounds: h,
-		containerScrollOffset: Z({
+		containerScrollOffset: It({
 			containerElement: e,
 			direction: r,
 			isRtl: i,
@@ -1503,19 +1644,19 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		a,
 		l
 	]);
-	return _t(() => {
+	return At(() => {
 		v(w((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
 	}, [
 		e,
 		r,
 		w
-	]), _t(() => {
+	]), At(() => {
 		if (!e) return;
 		let t = () => {
 			v((t) => {
-				let { scrollLeft: n, scrollTop: o } = e, s = Tt({
+				let { scrollLeft: n, scrollTop: o } = e, s = Rt({
 					cachedBounds: h,
-					containerScrollOffset: Z({
+					containerScrollOffset: It({
 						containerElement: e,
 						direction: r,
 						isRtl: i,
@@ -1525,7 +1666,7 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 					itemCount: a,
 					overscanCount: l
 				});
-				return St(s, t) ? t : s;
+				return Y(s, t) ? t : s;
 			});
 		};
 		return e.addEventListener("scroll", t), () => {
@@ -1541,8 +1682,8 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 	]), {
 		getCellBounds: g,
 		getEstimatedSize: C,
-		scrollToIndex: bt(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
-			let s = wt({
+		scrollToIndex: Nt(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
+			let s = Lt({
 				align: t,
 				cachedBounds: h,
 				containerScrollOffset: n,
@@ -1552,14 +1693,14 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 				itemSize: m
 			});
 			if (e) {
-				if (s = Z({
+				if (s = It({
 					containerElement: e,
 					direction: r,
 					isRtl: i,
 					scrollOffset: s
 				}), typeof e.scrollTo != "function") {
 					let e = w(s);
-					St(_, e) || v(e);
+					Y(_, e) || v(e);
 				}
 				return s;
 			}
@@ -1570,30 +1711,30 @@ function kt({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		stopIndexVisible: x
 	};
 }
-function At(e) {
-	return z(() => e, Object.values(e));
+function Ht(e) {
+	return B(() => e, Object.values(e));
 }
-function jt(e, t) {
+function Ut(e, t) {
 	let { ariaAttributes: n, style: r, ...i } = e, { ariaAttributes: a, style: o, ...s } = t;
-	return St(n, a) && St(r, o) && St(i, s);
+	return Y(n, a) && Y(r, o) && Y(i, s);
 }
-function Mt(e) {
+function Wt(e) {
 	return typeof e == "object" && !!e && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
 }
-var Nt = "data-react-window-index";
-function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onResize: i, onRowsRendered: a, overscanCount: o = 3, rowComponent: s, rowCount: c, rowHeight: l, rowProps: u, tagName: d = "div", style: f, ...p }) {
-	let m = At(u), h = z(() => he(s, jt), [s]), [g, _] = V(null), v = Mt(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = kt({
+var Gt = "data-react-window-index";
+function Kt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onResize: i, onRowsRendered: a, overscanCount: o = 3, rowComponent: s, rowCount: c, rowHeight: l, rowProps: u, tagName: d = "div", style: f, ...p }) {
+	let m = Ht(u), h = B(() => Ce(s, Ut), [s]), [g, _] = H(null), v = Wt(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = Vt({
 		containerElement: g,
 		containerStyle: f,
 		defaultContainerSize: n,
 		direction: "vertical",
 		itemCount: c,
 		itemProps: m,
-		itemSize: z(() => v ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [v, l]),
+		itemSize: B(() => v ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [v, l]),
 		onResize: i,
 		overscanCount: o
 	});
-	ge(r, () => ({
+	Te(r, () => ({
 		get element() {
 			return g;
 		},
@@ -1608,12 +1749,12 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 				top: r
 			});
 		}
-	}), [g, x]), _t(() => {
+	}), [g, x]), At(() => {
 		if (!g) return;
 		let e = Array.from(g.children).filter((e, t) => {
 			if (e.hasAttribute("aria-hidden")) return !1;
 			let n = `${S + t}`;
-			return e.setAttribute(Nt, n), !0;
+			return e.setAttribute(Gt, n), !0;
 		});
 		if (v) return l.observeRowElements(e);
 	}, [
@@ -1622,7 +1763,7 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		l,
 		S,
 		w
-	]), R(() => {
+	]), z(() => {
 		S >= 0 && w >= 0 && a && a({
 			startIndex: C,
 			stopIndex: T
@@ -1637,11 +1778,11 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		w,
 		T
 	]);
-	let E = z(() => {
+	let E = B(() => {
 		let e = [];
 		if (c > 0) for (let t = S; t <= w; t++) {
 			let n = y(t);
-			e.push(/* @__PURE__ */ me(h, {
+			e.push(/* @__PURE__ */ xe(h, {
 				...m,
 				ariaAttributes: {
 					"aria-posinset": t + 1,
@@ -1668,7 +1809,7 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		m,
 		S,
 		w
-	]), D = /* @__PURE__ */ W("div", {
+	]), D = /* @__PURE__ */ P("div", {
 		"aria-hidden": !0,
 		style: {
 			height: b(),
@@ -1676,7 +1817,7 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 			zIndex: -1
 		}
 	});
-	return me(d, {
+	return xe(d, {
 		role: "list",
 		...p,
 		className: t,
@@ -1690,206 +1831,220 @@ function Pt({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		}
 	}, E, e, D);
 }
-var Ft = {
-	divider: "_divider_1tiyp_1",
-	item: "_item_1tiyp_5",
-	itemIcon: "_itemIcon_1tiyp_15",
-	checkIcon: "_checkIcon_1tiyp_19",
-	stateLabel: "_stateLabel_1tiyp_23"
-}, It = 44, Lt = 8, Rt = ({ index: e, style: t, ariaAttributes: n, items: r, selectedDeploymentId: i, labelClassName: a, query: o, onSelect: s }) => {
-	let l = r[e], u = J(l.iconUrl, l.type, l.displayName ?? l.id, p.SM), f = l.id === i;
-	return /* @__PURE__ */ W("div", {
+var Q = {
+	search: "_search_5skzl_1",
+	divider: "_divider_5skzl_5",
+	item: "_item_5skzl_9",
+	itemIcon: "_itemIcon_5skzl_19",
+	checkIcon: "_checkIcon_5skzl_23",
+	stateLabel: "_stateLabel_5skzl_27",
+	itemSelectedBackground: "_itemSelectedBackground_5skzl_37",
+	itemSelectedText: "_itemSelectedText_5skzl_41"
+}, qt = 44, Jt = 8, Yt = ({ index: e, style: t, ariaAttributes: n, items: r, selectedDeploymentId: i, labelClassName: a, query: o, itemClassName: s, selectedItemClassName: c, hasSelectedBackground: u, hasSelectedText: d, onSelect: f }) => {
+	let p = r[e], h = Dt(p.iconUrl, p.type, p.displayName ?? p.id, g.SM), v = p.id === i;
+	return /* @__PURE__ */ P("div", {
 		style: t,
 		...n,
-		children: /* @__PURE__ */ W(d, {
+		children: /* @__PURE__ */ P(m, {
 			type: "button",
-			"aria-current": f ? "true" : void 0,
-			className: c(Ft.item, "h-full w-full gap-3 px-4"),
-			iconBefore: /* @__PURE__ */ W("span", {
-				className: Ft.itemIcon,
-				children: u
+			"aria-current": v ? "true" : void 0,
+			className: l(Q.item, "h-full w-full gap-3 px-4", v && u && Q.itemSelectedBackground, v && d && Q.itemSelectedText, s, v && c, U.modelMenuItem, v && U.modelMenuItemSelected),
+			iconBefore: /* @__PURE__ */ P("span", {
+				className: Q.itemIcon,
+				children: h
 			}),
-			label: /* @__PURE__ */ G("span", {
+			label: /* @__PURE__ */ F("span", {
 				className: "flex flex-1 items-center justify-between gap-2",
-				children: [/* @__PURE__ */ W(y, {
-					text: l.displayName ?? l.id,
+				children: [/* @__PURE__ */ P(S, {
+					text: p.displayName ?? p.id,
 					query: o,
 					maxLines: 1,
-					className: c(a, "min-w-0 flex-1 text-start")
-				}), f && /* @__PURE__ */ W(P, {
-					size: p.SM,
-					className: Ft.checkIcon,
+					className: l(a, "min-w-0 flex-1 text-start")
+				}), v && /* @__PURE__ */ P(L, {
+					size: g.SM,
+					className: Q.checkIcon,
 					"aria-hidden": !0,
-					stroke: m
+					stroke: _
 				})]
 			}),
-			onClick: () => s(l.id)
+			onClick: () => f(p.id)
 		})
 	});
-}, zt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: a, selectedDeploymentId: o, onSelect: l, loadingLabel: u, errorLabel: d, emptyLabel: f, style: p, titleClassName: m = "dial-body-semi-text", labelClassName: h = "dial-small-text", colors: _ }) => {
-	let [v, y] = V("");
-	R(() => {
-		e || y("");
+}, Xt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: a, selectedDeploymentId: o, onSelect: s, loadingLabel: u, errorLabel: d, emptyLabel: f, style: p, titleClassName: m = "dial-body-semi-text", labelClassName: h = "dial-small-text", colors: g, menuStyles: _ }) => {
+	let [v, b] = H("");
+	z(() => {
+		e || b("");
 	}, [e]);
-	let b = a && a.length > 0, x = u !== void 0, S = !b && !x ? d ?? f : void 0, C = b ? ht(a, v) : [], w = (e) => {
-		l(e), i();
-	}, T = s({
-		"--ci-sheet-divider": _?.divider,
-		"--ci-sheet-text": _?.itemText,
-		"--ci-sheet-item-hover": _?.itemHoverBg,
-		"--ci-sheet-item-active": _?.itemActiveBg,
-		"--ci-sheet-icon": _?.itemIcon,
-		"--ci-check-icon": _?.checkIcon
+	let x = a && a.length > 0, S = u !== void 0, C = !x && !S ? d ?? f : void 0, w = x ? Et(a, v) : [], T = (e) => {
+		s(e), i();
+	}, E = _?.colors, D = c({
+		"--ci-sheet-divider": g?.divider,
+		"--ci-sheet-text": E?.itemText ?? g?.itemText,
+		"--ci-sheet-item-hover": E?.itemHoverBackground ?? g?.itemHoverBg,
+		"--ci-sheet-item-active": g?.itemActiveBg,
+		"--ci-sheet-icon": E?.itemText ?? g?.itemIcon,
+		"--ci-check-icon": E?.checkIcon ?? g?.checkIcon,
+		"--ci-sheet-selected-bg": E?.selectedItemBackground,
+		"--ci-sheet-selected-text": E?.selectedItemText
 	});
-	return /* @__PURE__ */ W(Te, {
+	return /* @__PURE__ */ P(W, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: i,
 		style: p,
 		titleClassName: m,
-		className: "max-h-[80dvh]",
-		colors: _?.shell,
-		children: /* @__PURE__ */ G("div", {
+		className: l("max-h-[80dvh]", _?.className, U.modelMenu),
+		colors: g?.shell,
+		children: /* @__PURE__ */ F("div", {
 			className: "contents",
-			style: T,
-			children: [b && !x && /* @__PURE__ */ G(U, { children: [/* @__PURE__ */ W("div", {
-				className: "flex-shrink-0 px-4 py-[10px]",
-				children: /* @__PURE__ */ W(O, {
+			style: D,
+			children: [x && !S && /* @__PURE__ */ F(oe, { children: [/* @__PURE__ */ P("div", {
+				style: c({ "--ci-sheet-search-bg": _?.colors?.searchHeaderBackground }),
+				className: l("flex-shrink-0 px-4 py-[10px]", Q.search, _?.searchHeaderClassName, U.modelMenuSearch),
+				children: /* @__PURE__ */ P(A, {
 					value: v,
 					placeholder: r,
-					size: g.Standard,
-					onChange: (e) => y(e ?? "")
+					size: y.Standard,
+					onChange: (e) => b(e ?? "")
 				})
-			}), /* @__PURE__ */ W("div", { className: c(Ft.divider, "h-px flex-shrink-0") })] }), x ? /* @__PURE__ */ W(pt, { loadingLabel: u }) : S ? /* @__PURE__ */ W("div", {
+			}), /* @__PURE__ */ P("div", { className: l(Q.divider, "h-px flex-shrink-0") })] }), S ? /* @__PURE__ */ P(wt, { loadingLabel: u }) : C ? /* @__PURE__ */ P("div", {
 				role: "list",
-				className: c(Ft.stateLabel, h, "px-4 py-4"),
-				children: S
-			}) : /* @__PURE__ */ W(Pt, {
+				className: l(Q.stateLabel, h, "px-4 py-4"),
+				children: C
+			}) : /* @__PURE__ */ P(Kt, {
 				role: "list",
 				className: "overflow-y-auto",
-				style: { height: Math.min(C.length, Lt) * It },
-				rowComponent: Rt,
-				rowCount: C.length,
-				rowHeight: It,
+				style: { height: Math.min(w.length, Jt) * qt },
+				rowComponent: Yt,
+				rowCount: w.length,
+				rowHeight: qt,
 				rowProps: {
-					items: C,
+					items: w,
 					selectedDeploymentId: o,
 					labelClassName: h,
 					query: v,
-					onSelect: w
+					itemClassName: _?.itemClassName,
+					selectedItemClassName: _?.selectedItemClassName,
+					hasSelectedBackground: !!E?.selectedItemBackground,
+					hasSelectedText: !!E?.selectedItemText,
+					onSelect: T
 				}
 			})]
 		})
 	});
-}, Bt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isDisabled: s = !1, style: l, modelPickerOverlay: u, isPickerOpen: d, onPickerToggle: f, onPickerOpenChange: g }) => {
-	let [_, y] = V(!1), { selectorIcon: b, selectorAriaLabel: x, selectedLabel: S, selectedVersion: C, menuItems: w, menuHeader: T, onOpenChange: E } = gt({
+}, Zt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, menuStyles: i, isStreaming: a, isMobile: o, isDisabled: c = !1, style: u, modelPickerOverlay: d, isPickerOpen: f, onPickerToggle: p, onPickerOpenChange: h }) => {
+	let [y, b] = H(!1), { selectorIcon: S, selectorAriaLabel: C, selectedLabel: w, selectedVersion: T, menuItems: E, menuHeader: D, menuStyle: ee, onOpenChange: O } = kt({
 		deployments: e,
 		selectedDeploymentId: t,
 		onDeploymentChange: n,
-		modelSelectorLabels: r
+		modelSelectorLabels: r,
+		styles: i
 	});
 	if (!e) return null;
-	let D = i || s ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, O = /* @__PURE__ */ W(F, {
-		size: p.SM,
-		className: q.modelSelectorCaret,
+	let k = a || c ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, te = /* @__PURE__ */ P(de, {
+		size: g.SM,
+		className: l(q.modelSelectorCaret, U.modelSelectorCaret),
 		"aria-hidden": !0,
-		stroke: m
+		stroke: _
+	}), A = /* @__PURE__ */ P("span", {
+		className: l("flex shrink-0 items-center", U.modelSelectorIcon),
+		children: S
 	});
-	return a ? /* @__PURE__ */ G(U, { children: [/* @__PURE__ */ W(N, {
-		tooltip: S,
-		children: /* @__PURE__ */ W(v, {
-			icon: /* @__PURE__ */ G("div", {
-				className: "flex items-center gap-1",
-				children: [b, O]
-			}),
-			"aria-label": x,
-			onClick: () => {
-				s || y(!0);
-			},
-			className: c("w-[50px]", q.modelSelectorButton, D)
-		})
-	}), u ? /* @__PURE__ */ W(Te, {
-		isOpen: _,
+	if (o) return /* @__PURE__ */ F(oe, { children: [/* @__PURE__ */ P(x, {
+		tooltipProps: { tooltip: w },
+		icon: /* @__PURE__ */ F("div", {
+			className: "flex items-center gap-1",
+			children: [A, te]
+		}),
+		"aria-label": C,
+		onClick: () => {
+			c || b(!0);
+		},
+		className: l("w-[50px]", q.modelSelectorButton, k, U.modelSelectorButton)
+	}), d ? /* @__PURE__ */ P(W, {
+		isOpen: y,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
-		onClose: () => y(!1),
-		style: l,
-		children: u(() => y(!1))
-	}) : /* @__PURE__ */ W(zt, {
-		isOpen: _,
+		onClose: () => b(!1),
+		style: u,
+		className: l(i?.className, U.modelMenu),
+		children: d(() => b(!1))
+	}) : /* @__PURE__ */ P(Xt, {
+		isOpen: y,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
 		searchPlaceholder: r?.searchPlaceholder ?? "Search",
-		onClose: () => y(!1),
+		onClose: () => b(!1),
 		deployments: e,
 		selectedDeploymentId: t,
 		onSelect: (e) => n?.(e),
 		loadingLabel: r?.loading,
 		errorLabel: r?.error,
 		emptyLabel: r?.empty,
-		style: l
-	})] }) : u ? /* @__PURE__ */ W(h, {
-		placement: "top-end",
-		matchReferenceWidth: !1,
-		open: d,
-		onOpenChange: g,
-		trigger: [],
-		outsideClosable: !0,
-		renderOverlay: () => u(() => g?.(!1)),
-		listClassName: "!w-[368px] !bg-layer-raised",
-		children: /* @__PURE__ */ W(N, {
-			tooltip: C ? `${S} · ${C}` : S,
-			children: /* @__PURE__ */ G("button", {
-				type: "button",
-				"aria-label": x,
-				"aria-disabled": s || void 0,
-				className: c("flex min-w-0 items-center gap-1.5 rounded-full py-1.5 pe-2 ps-1.5", q.modelSelectorButton, D, s && q.modelSelectorButtonDisabled),
+		style: u,
+		menuStyles: i
+	})] });
+	if (d) {
+		let e = T ? `${w} · ${T}` : w;
+		return /* @__PURE__ */ P(v, {
+			placement: "top-end",
+			matchReferenceWidth: !1,
+			open: f,
+			onOpenChange: h,
+			trigger: [],
+			outsideClosable: !0,
+			renderOverlay: () => d(() => h?.(!1)),
+			listClassName: l("!w-[368px] !bg-layer-raised", i?.className, U.modelMenu),
+			children: /* @__PURE__ */ P(m, {
+				"aria-label": C,
+				"aria-disabled": c || void 0,
+				tooltipProps: { tooltip: e },
+				className: l("h-auto min-w-0 gap-1.5 !rounded-full !border-0 px-0 py-1.5 pe-2 ps-1.5", q.modelSelectorButton, k, c && q.modelSelectorButtonDisabled, U.modelSelectorButton),
 				onClick: () => {
-					!i && !s && f?.();
+					!a && !c && p?.();
 				},
-				children: [
-					b,
-					/* @__PURE__ */ G("span", {
-						className: "flex min-w-0 max-w-[180px] items-baseline gap-1",
-						children: [/* @__PURE__ */ W("span", {
-							className: c("dial-small-text max-w-[180px] shrink-0 truncate", q.modelSelectorName),
-							children: S
-						}), C && /* @__PURE__ */ W("span", {
-							className: c("dial-tiny-text min-w-0 truncate", q.modelSelectorVersion),
-							children: C
-						})]
-					}),
-					O
-				]
+				iconBefore: A,
+				iconAfter: te,
+				textClassName: "min-w-0",
+				label: /* @__PURE__ */ F("span", {
+					className: "flex min-w-0 max-w-[180px] items-baseline gap-1",
+					children: [/* @__PURE__ */ P("span", {
+						className: l("dial-small-text max-w-[180px] shrink-0 truncate", q.modelSelectorName),
+						children: w
+					}), T && /* @__PURE__ */ P("span", {
+						className: l("dial-tiny-text min-w-0 truncate", q.modelSelectorVersion),
+						children: T
+					})]
+				})
 			})
-		})
-	}) : /* @__PURE__ */ W("div", {
-		className: c(s && D),
-		"aria-disabled": s || void 0,
-		children: /* @__PURE__ */ W(h, {
-			items: w,
-			menuHeader: T,
+		});
+	}
+	return /* @__PURE__ */ P("div", {
+		className: l(c && k),
+		"aria-disabled": c || void 0,
+		children: /* @__PURE__ */ P(v, {
+			items: E,
+			menuHeader: D,
 			placement: "bottom-end",
 			matchReferenceWidth: !1,
-			maxDropdownHeight: o,
-			listClassName: "!w-[240px]",
-			disabled: s,
-			onOpenChange: s ? void 0 : E,
-			children: /* @__PURE__ */ W(N, {
-				tooltip: S,
-				children: /* @__PURE__ */ G("button", {
-					type: "button",
-					"aria-label": x,
-					"aria-disabled": s || void 0,
-					className: c("flex items-center gap-1 rounded-full p-1.5", q.modelSelectorButton, s && q.modelSelectorButtonDisabled),
-					children: [b, O]
-				})
+			maxDropdownHeight: s,
+			listClassName: l("!w-[240px]", i?.className, U.modelMenu),
+			listStyle: ee,
+			disabled: c,
+			onOpenChange: c ? void 0 : O,
+			children: /* @__PURE__ */ P(m, {
+				"aria-label": C,
+				"aria-disabled": c || void 0,
+				tooltipProps: { tooltip: w },
+				iconBefore: A,
+				iconAfter: te,
+				className: l("h-auto gap-1 !rounded-full !border-0 p-1.5", q.modelSelectorButton, c && q.modelSelectorButtonDisabled, U.modelSelectorButton)
 			})
 		})
 	});
-}, Vt = ({ message: e = "", messageRevision: t, textInsertion: n, onSend: r, onUploadAttachment: i, onStop: a, isStreaming: o = !1, onChange: d, onAttachmentsChange: f, placeholder: g = "Type a message...", ariaLabel: y, attachLabel: b = "Attach file", fileAccept: x, addMenuTitle: S = "Add", menuTitle: C = "Menu", menuCloseLabel: w = "Close", removeLabel: T, retryLabel: E, uploadingLabel: D, sendLabel: O, sendTooltip: k, stopLabel: ee, micLabel: A = "Dictate", recordVoiceLabel: te = "Record voice", stopRecordingLabel: j, discardRecordingLabel: ne, colors: M, typography: N, className: re, pendingDropFiles: ie = [], onDropFilesConsumed: P, pendingAttachments: F = [], onPendingAttachmentsConsumed: ae, pasteTextThreshold: ce = 4e3, maxMessageLength: I = 5e4, deployments: le, selectedDeploymentId: ue, onDeploymentChange: de, modelSelectorLabels: fe, initialAttachments: pe = [], hideAddButton: me = !1, hideAttachFile: he = !1, hideActionBar: ge = !1, renderFooterActions: _e, isInputDisabled: H = !1, isModelSelectorDisabled: ye = !1, isSendDisabled: be = !1, isAudioMessageSupported: Se = !1, isVoiceRecordingSupported: Ce = Se, onTranscribeAudio: we, transcribingLabel: Te, voiceErrorLabel: Ee, sendOnEnter: Oe = Ue.Enter, prefixAttachments: Ae = [], onRemovePrefixAttachment: je, chatSettings: Pe, toolsMenuItems: Re, onToolToggle: ze, canRemoveTools: Be = !0, toolsMenuTitle: Ve, toolsBackLabel: We, toolsChipLabels: Ge, menuOverlays: Ke, inlineStartSlot: qe, onInlineStartRemove: Je, commandMenu: K, autoFocus: Ye = !1, messageHistory: Xe, onDialFileSystemClick: Ze, dialFileSystemLabel: Qe, validateAttachment: $e, onAttachmentClick: tt, modelPickerOverlay: nt, maximumAttachmentsAmount: it, onAttachmentsLimitExceeded: at, isAttachmentsEnabled: ot = !0, isTextAttachmentsAllowed: st = !0, usageLimitsSlot: dt, onMessageTooLong: ft }) => {
-	let pt = l(), [mt, ht] = V(!1), J = Me(Xe), Y = qe != null, [gt, _t] = V(null), [vt, yt] = V(0), bt = z(() => s({
+}, Qt = Se(({ message: e = "", messageRevision: t, focusRequestId: n, textInsertion: r, onSend: i, onUploadAttachment: a, onStop: o, isStreaming: s = !1, onChange: u, onAttachmentsChange: p, placeholder: m = "Type a message...", ariaLabel: h, attachLabel: y = "Attach file", fileAccept: S, addMenuTitle: C = "Add", menuTitle: w = "Menu", menuCloseLabel: T = "Close", removeLabel: E, retryLabel: D, uploadingLabel: ee, sendLabel: O, sendTooltip: k, emptyMessageTooltip: te, stopLabel: A, micLabel: ne = "Dictate", recordVoiceLabel: j = "Record voice", stopRecordingLabel: re, discardRecordingLabel: ie, colors: M, typography: N, attachmentTray: ae, modelMenu: I, className: ce, pendingDropFiles: ue = [], onDropFilesConsumed: L, pendingAttachments: de = [], onPendingAttachmentsConsumed: fe, pasteTextThreshold: he = 4e3, maxMessageLength: ge = 5e4, deployments: _e, selectedDeploymentId: ve, onDeploymentChange: ye, modelSelectorLabels: be, initialAttachments: xe = [], hideAddButton: Se = !1, hideAttachFile: Ce = !1, hideActionBar: we = !1, actionRowLayout: De = et.Stacked, isInlineActionRowAllowedBelowDesktop: W = !1, renderFooterActions: Oe, isInputDisabled: G = !1, isModelSelectorDisabled: Ae = !1, isSendDisabled: je = !1, isAudioMessageSupported: Me = !1, isVoiceRecordingSupported: Fe = Me, onTranscribeAudio: Ie, transcribingLabel: ze, voiceErrorLabel: Be, sendOnEnter: We = $e.Enter, prefixAttachments: Je = [], onRemovePrefixAttachment: Ye, chatSettings: Xe, toolsMenuItems: Ze, onToolToggle: tt, canRemoveTools: nt = !0, toolsMenuTitle: rt, toolsBackLabel: it, toolsChipLabels: at, menuOverlays: ot, activeMentions: st, onBackspaceAtCaret: ct, caretPositionOverride: lt, commandMenu: K, autoFocus: ut = !1, messageHistory: ft, onDialFileSystemClick: pt, dialFileSystemLabel: ht, validateAttachment: gt, onAttachmentClick: _t, modelPickerOverlay: vt, maximumAttachmentsAmount: St, onAttachmentsLimitExceeded: Ct, isAttachmentsEnabled: wt = !0, isTextAttachmentsAllowed: Tt = !0, usageLimitsSlot: Et, onMessageTooLong: Dt }, Ot) => {
+	let kt = d(), [At, jt] = H(!1), Mt = Le(ft), Nt = st ?? [], Pt = Nt.length > 0, Ft = B(() => c({
 		"--ci-bg": M?.background,
 		"--ci-text": M?.text,
 		"--ci-border": M?.border,
@@ -1901,494 +2056,631 @@ var Ft = {
 		"--ci-model-selector-disabled-color": M?.modelSelectorDisabled,
 		"--ci-model-selector-name-color": M?.modelSelectorName,
 		"--ci-model-selector-version-color": M?.modelSelectorVersion,
-		"--ci-voice-error": M?.voiceError,
 		"--ci-voice-waveform": M?.voiceWaveform,
 		"--ci-voice-accent": M?.voiceAccent,
-		"--ci-first-line-indent": Y ? `calc(${vt}px + 4px)` : void 0
-	}), [
-		M,
-		Y,
-		vt
-	]), xt = z(() => Ze ? [{
+		"--ci-mention-highlight-bg": M?.mentionHighlightBg,
+		"--ci-mention-highlight-text": M?.mentionHighlightText,
+		"--ci-mention-highlight-unsupported-bg": M?.mentionHighlightUnsupportedBg,
+		"--ci-mention-highlight-unsupported-text": M?.mentionHighlightUnsupportedText
+	}), [M]), It = B(() => pt ? [{
 		key: "dial-fs",
-		label: Qe ?? "DIAL file system",
-		icon: /* @__PURE__ */ W(oe, {
-			size: u,
+		label: ht ?? "DIAL file system",
+		icon: /* @__PURE__ */ P(pe, {
+			size: f,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: _
 		}),
-		onClick: Ze
-	}] : [], [Ze, Qe]), { message: X, setMessage: Z, textareaRef: Q } = Ne({
+		onClick: pt
+	}] : [], [pt, ht]), { message: J, setMessage: Y, textareaRef: X } = He({
 		messageProp: e,
 		messageRevision: t
 	});
-	Fe({
-		insertion: n,
-		textareaRef: Q
-	});
-	let { isMenuOpen: St, query: Ct, dismiss: wt, handleValueChange: Tt } = ke({
+	z(() => {
+		n !== void 0 && X.current?.focus();
+	}, [n, X]), Te(Ot, () => ({ getCaretPosition: () => X.current?.selectionStart ?? J.length }), [J, X]);
+	let { handleUndoKeyDown: Lt } = Ge({
+		insertion: r,
+		textareaRef: X
+	}), { isMenuOpen: Rt, query: zt, activeWordStart: Z, dismiss: Bt, closeOnOutsidePress: Vt, handleCaretMove: Ht, handleValueChange: Ut, listboxId: Wt, overlayRef: Gt, activeOptionId: Kt, moveActiveOption: Q, getActiveOption: qt } = Pe({
 		config: K,
-		message: X
-	}), Et = K?.emptyQueryHint != null, Dt = Et && St && Ct === "", Ot = L((e) => {
-		if (K == null || (wt(), !e?.consumeQuery)) return;
-		Q.current?.focus();
-		let t = `${K.triggerPrefix}${Ct}`;
-		if (!X.startsWith(t)) return;
-		let n = X.slice(t.length);
-		Z(n), J.notifyChange(), d?.(n);
+		message: J
+	}), Jt = () => {
+		Ht(X.current?.selectionStart ?? J.length);
+	}, Yt = () => {
+		requestAnimationFrame(() => {
+			Ht(X.current?.selectionStart ?? J.length);
+		});
+	}, Xt = (e) => {
+		e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End" && e.key !== "PageUp" && e.key !== "PageDown" || Ht(e.currentTarget.selectionStart ?? J.length);
+	}, Qt = K?.emptyQueryHint != null, $t = K != null && Z != null ? Z + K.triggerPrefix.length : null, en = $t != null && J.slice($t).split("\n", 1)[0] !== "", tn = Qt && Rt && zt === "" && $t != null && !en, nn = K != null && Rt ? Z ?? 0 : null, rn = V(null), an = V(null), [on, sn] = H(null), cn = R(() => {
+		let e = rn.current, t = an.current;
+		if (e == null || t == null) {
+			sn(null);
+			return;
+		}
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		sn({
+			left: n.left - r.left,
+			top: n.top - r.top
+		});
+	}, []);
+	Ee(() => {
+		cn();
 	}, [
-		K,
-		wt,
-		Ct,
+		cn,
+		nn,
+		J
+	]), z(() => {
+		if (nn == null) return;
+		let e = X.current;
+		if (e == null || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(cn);
+		return t.observe(e), () => t.disconnect();
+	}, [
+		nn,
 		X,
-		Z,
-		J,
-		d,
-		Q
+		cn
 	]);
-	R(() => {
-		if (gt == null) return;
-		let e = new ResizeObserver((e) => {
-			let t = e[0];
-			t != null && yt(t.contentRect.width);
-		});
-		return e.observe(gt), () => e.disconnect();
-	}, [gt]);
-	let { attachments: kt, buildAttachments: At, addAttachments: jt, resetAttachments: Mt, handleRemove: Nt, handleRetry: Pt, handleExpand: Ft, hasBlockedAttachments: It } = De({
-		initialAttachments: pe,
-		onUploadAttachment: i,
-		onAttachmentsChange: f,
-		validateAttachment: $e,
-		pendingDropFiles: ie,
-		onDropFilesConsumed: P,
-		pendingAttachments: F,
-		onPendingAttachmentsConsumed: ae,
-		onExpandPastedText: L((e) => {
-			Z((t) => t ? `${t}\n${e}` : e);
-		}, [Z]),
-		maximumAttachmentsAmount: it,
-		baseAttachmentsAmount: Ae.length,
-		onAttachmentsLimitExceeded: at
-	}), Lt = L((e) => {
-		jt(At([e]));
-	}, [jt, At]), Rt = B(!1), zt = B(X);
-	zt.current = X;
-	let [Vt, Ht] = V({
+	let ln = R((e) => {
+		if (K == null || (Bt(), !e?.consumeQuery) || (e.returnFocus !== !1 && X.current?.focus(), Z == null)) return;
+		let t = `${K.triggerPrefix}${zt}`, n = Z + t.length;
+		if (J.slice(Z, n) !== t) return;
+		let r = J.slice(0, Z) + J.slice(n);
+		Y(r), Mt.notifyChange(), u?.(r);
+	}, [
+		K,
+		Bt,
+		zt,
+		J,
+		Z,
+		Y,
+		Mt,
+		u,
+		X
+	]), un = V(void 0);
+	z(() => {
+		lt == null || un.current === t || (un.current = t, X.current?.setSelectionRange(lt, lt), Ht(lt));
+	}, [J]);
+	let { attachments: dn, buildAttachments: fn, addAttachments: pn, resetAttachments: mn, handleRemove: hn, handleRetry: gn, handleExpand: _n, hasBlockedAttachments: vn } = ke({
+		initialAttachments: xe,
+		onUploadAttachment: a,
+		onAttachmentsChange: p,
+		validateAttachment: gt,
+		pendingDropFiles: ue,
+		onDropFilesConsumed: L,
+		pendingAttachments: de,
+		onPendingAttachmentsConsumed: fe,
+		onExpandPastedText: R((e) => {
+			Y((t) => t ? `${t}\n${e}` : e);
+		}, [Y]),
+		maximumAttachmentsAmount: St,
+		baseAttachmentsAmount: Je.length,
+		onAttachmentsLimitExceeded: Ct
+	}), yn = R((e) => {
+		pn(fn([e]));
+	}, [pn, fn]), bn = V(!1), xn = V(J);
+	xn.current = J;
+	let [Sn, Cn] = H({
 		text: "",
 		revision: 0
-	}), { state: Ut, analyserNodeRef: Wt, errorMessage: Gt, startRecording: Kt, stopRecording: qt, discardRecording: Jt } = He({
-		onAttachAudio: Lt,
-		onTranscribeAudio: we,
-		onTranscript: L((e) => {
+	}), { state: wn, analyserNodeRef: Tn, errorMessage: En, startRecording: Dn, stopRecording: On, discardRecording: kn } = Qe({
+		onAttachAudio: yn,
+		onTranscribeAudio: Ie,
+		onTranscript: R((e) => {
 			let t = e.trim();
 			if (t) {
-				let e = zt.current, n = `${e}${e && !/\s$/.test(e) ? " " : ""}${t}`;
-				zt.current = n, Z(n), Ht((e) => ({
+				let e = xn.current, n = `${e}${e && !/\s$/.test(e) ? " " : ""}${t}`;
+				xn.current = n, Y(n), Cn((e) => ({
 					text: t,
 					revision: e.revision + 1
-				})), J.notifyChange(), d?.(n);
+				})), Mt.notifyChange(), u?.(n);
 			}
-			Rt.current = !0;
+			bn.current = !0;
 		}, [
-			Z,
-			J,
-			d
+			Y,
+			Mt,
+			u
 		]),
-		errorLabel: Ee
-	}), $ = Ut === Ie.Recording || Ut === Ie.Processing;
-	R(() => {
-		(Ut === Ie.Error || Ut === Ie.Idle && Rt.current) && (Rt.current = !1, Q.current?.focus());
-	}, [Ut, Q]);
-	let Yt = B(null), Xt = B(null), Zt = ot && st, { handlePaste: Qt } = xe(jt, Zt ? ce : Infinity), $t = L((e) => {
-		if (!Zt) {
+		errorLabel: Be
+	}), $ = wn === Ke.Recording || wn === Ke.Processing;
+	z(() => {
+		(wn === Ke.Error || wn === Ke.Idle && bn.current) && (bn.current = !1, X.current?.focus());
+	}, [wn, X]);
+	let An = V(null), jn = V(null), Mn = wt && Tt, { handlePaste: Nn } = le(pn, Mn ? he : Infinity), Pn = R((e) => {
+		if (!Mn) {
 			let t = e.clipboardData.getData("text/plain");
-			t.length >= I && ft?.(t.length, I);
+			t.length >= ge && Dt?.(t.length, ge);
 		}
-		Qt(e);
+		Nn(e);
 	}, [
-		Zt,
-		I,
-		ft,
-		Qt
-	]), en = (X.trim().length > 0 || kt.length > 0 || Y) && !It && !be && !$, [tn, nn] = V([]);
-	R(() => {
-		nn([]);
-	}, [(Re ?? []).map((e) => e.id).join("|")]);
-	let rn = z(() => {
-		let e = Re ?? [];
-		return Be ? e.filter((e) => e.isSelected || !tn.includes(e.id)) : e;
+		Mn,
+		ge,
+		Dt,
+		Nn
+	]), Fn = J.trim().length > 0 || dn.length > 0, In = Fn && !vn && !je && !$, [Ln, Rn] = H([]);
+	z(() => {
+		Rn([]);
+	}, [(Ze ?? []).map((e) => e.id).join("|")]);
+	let zn = B(() => {
+		let e = Ze ?? [];
+		return nt ? e.filter((e) => e.isSelected || !Ln.includes(e.id)) : e;
 	}, [
-		Re,
-		tn,
-		Be
-	]), an = L((e) => {
-		nn((t) => t.includes(e) ? t : [...t, e]), Re?.find((t) => t.id === e)?.isSelected && ze?.(e);
-	}, [Re, ze]), on = le === void 0 || ue != null, sn = Se && !o, cn = async () => {
-		if (be || $) return;
-		if (X.length >= I) {
-			ft?.(X.length, I);
+		Ze,
+		Ln,
+		nt
+	]), Bn = R((e) => {
+		Rn((t) => t.includes(e) ? t : [...t, e]), Ze?.find((t) => t.id === e)?.isSelected && tt?.(e);
+	}, [Ze, tt]), Vn = _e === void 0 || ve != null, Hn = Me && !s, Un = async () => {
+		if (je || $) return;
+		if (J.length >= ge) {
+			Dt?.(J.length, ge);
 			return;
 		}
-		let e = X, t = kt;
-		Z(""), J.reset();
+		let e = J, t = dn;
+		Y(""), Mt.reset();
 		try {
-			await r?.(e, t), t.forEach((e) => {
+			await i?.(e, t), t.forEach((e) => {
 				e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
-			}), Mt([]);
+			}), mn([]);
 		} catch {
-			Z(e), Mt(t);
+			Y(e), mn(t);
 		}
-	}, ln = (e) => {
-		if (!$) {
-			if (!e.nativeEvent.isComposing && !H && !o) {
+	}, Wn = (e) => We === $e.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey, Gn = (e) => {
+		if (!Rt || e.nativeEvent.isComposing) return !1;
+		if (e.key === "Escape") return e.preventDefault(), e.stopPropagation(), Bt(), !0;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") return e.preventDefault(), Q(e.key === "ArrowDown" ? Ne.Next : Ne.Previous), !0;
+		if (e.key !== "Enter" || e.shiftKey) return !1;
+		let t = qt();
+		return t == null ? Wn(e) ? (e.preventDefault(), !0) : !1 : (e.preventDefault(), t.click(), !0);
+	}, Kn = (e) => {
+		if (!$ && !Lt(e) && !Gn(e)) {
+			if (!e.nativeEvent.isComposing && !G && !s) {
 				if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-					let t = e.currentTarget.selectionStart ?? 0, n = J.navigate(e.key === "ArrowUp" ? "up" : "down", X, t);
+					let t = e.currentTarget.selectionStart ?? 0, n = Mt.navigate(e.key === "ArrowUp" ? "up" : "down", J, t);
 					if (n !== null) {
-						e.preventDefault(), Z(n);
+						e.preventDefault(), Y(n);
 						return;
 					}
 				}
-				if (e.key === "Backspace" && Y && Je != null && e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0) {
-					e.preventDefault(), Je();
-					return;
+				if (e.key === "Backspace" && ct != null && e.currentTarget.selectionStart === e.currentTarget.selectionEnd && e.currentTarget.selectionStart != null) {
+					let t = ct(e.currentTarget.selectionStart);
+					if (t != null) {
+						e.preventDefault();
+						let n = e.currentTarget;
+						n.setSelectionRange(t.start, t.start + t.length), typeof document.execCommand == "function" && document.execCommand("delete", !1) || Ue(n, J.slice(0, t.start) + J.slice(t.start + t.length), t.start);
+						return;
+					}
 				}
 			}
-			e.key === "Enter" && (Oe === Ue.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey) && (e.preventDefault(), !o && en && on && !H && cn());
+			e.key === "Enter" && Wn(e) && (e.preventDefault(), !s && In && Vn && !G && Un());
 		}
-	}, un = (e) => {
+	}, qn = (e) => {
 		let t = Array.from(e.target.files ?? []);
 		if (t.length === 0) return;
-		let n = At(t);
-		e.target.value = "", jt(n);
-	}, dn = /* @__PURE__ */ W("textarea", {
-		className: c(q.textarea, Y && q.textareaIndented, N?.fontClassName || "dial-body-paragraph-text", "max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent outline-none [field-sizing:content]", "disabled:cursor-not-allowed"),
-		ref: Q,
-		autoFocus: Ye,
-		value: X,
+		let n = fn(t);
+		e.target.value = "", pn(n);
+	}, Jn = B(() => {
+		let e = [];
+		return nn != null && e.push({
+			offset: nn,
+			node: /* @__PURE__ */ P("span", {
+				ref: rn,
+				"aria-hidden": !0,
+				className: "inline-block h-[1lh] w-0 align-text-top"
+			}, "caret-marker")
+		}), tn && K != null && $t != null && e.push({
+			offset: $t,
+			node: /* @__PURE__ */ P("span", {
+				className: q.commandHint,
+				"aria-hidden": !0,
+				"data-mirror-synthetic": !0,
+				children: K.emptyQueryHint
+			}, "command-hint")
+		}), e;
+	}, [
+		nn,
+		tn,
+		K,
+		$t
+	]), Yn = Pt || Jn.length > 0, { mirrorRef: Xn, selectionRects: Zn, updateSelectionRects: Qn } = Ve({
+		textareaRef: X,
+		message: J,
+		isMirrorActive: Yn
+	}), $n = /* @__PURE__ */ P("textarea", {
+		className: l(q.textarea, Yn && q.textareaMentionMode, N?.fontClassName || "dial-body-paragraph-text", "relative z-0 max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent pe-1 ps-1 outline-none [field-sizing:content]", "disabled:cursor-not-allowed"),
+		ref: X,
+		autoFocus: ut,
+		value: J,
 		onChange: (e) => {
-			Z(e.target.value), J.notifyChange();
+			Y(e.target.value), Mt.notifyChange();
 			let t = e.nativeEvent instanceof InputEvent ? e.nativeEvent : void 0;
-			Tt(e.target.value, t?.isComposing ?? !1, t?.inputType), d?.(e.target.value);
+			Ut(e.target.value, e.target.selectionStart ?? e.target.value.length, t?.isComposing ?? !1), u?.(e.target.value);
 		},
-		onKeyDown: ln,
-		onPaste: $t,
-		placeholder: Y ? void 0 : g,
-		"aria-label": y,
-		disabled: H,
+		onSelect: Qn,
+		onFocus: Yt,
+		onClick: Jt,
+		onKeyDown: Kn,
+		onKeyUp: Xt,
+		onPaste: Pn,
+		placeholder: m,
+		"aria-label": h,
+		"aria-autocomplete": K == null ? void 0 : "list",
+		"aria-controls": Rt ? Wt : void 0,
+		"aria-activedescendant": Kt ?? void 0,
+		"aria-hidden": Pt ? !0 : void 0,
+		disabled: G,
 		readOnly: $,
 		rows: 1
-	}), fn = K == null ? dn : /* @__PURE__ */ W(h, {
-		className: "w-full",
-		open: St,
-		onOpenChange: (e) => {
-			e || wt();
+	}), er = K == null ? $n : /* @__PURE__ */ F(oe, { children: [$n, /* @__PURE__ */ P("div", {
+		"aria-hidden": !0,
+		className: l("pointer-events-none absolute", N?.fontClassName || "dial-body-paragraph-text"),
+		style: {
+			left: on?.left ?? 0,
+			top: on?.top ?? 0
 		},
-		placement: "top-start",
-		trigger: [],
-		initialFocus: -1,
-		matchReferenceWidth: !1,
-		outsidePressIgnoreRef: Q,
-		renderOverlay: () => {
-			let e = K.renderMenu({
-				query: Ct,
-				close: Ot
-			});
-			return K.menuLabel == null ? e : /* @__PURE__ */ W("div", {
-				role: "group",
+		children: /* @__PURE__ */ P(v, {
+			open: Rt,
+			onOpenChange: (e) => {
+				e || Vt();
+			},
+			placement: "top-start",
+			trigger: [],
+			initialFocus: -1,
+			matchReferenceWidth: !1,
+			outsidePressIgnoreRef: X,
+			renderOverlay: () => /* @__PURE__ */ P("div", {
+				ref: Gt,
+				role: K.menuLabel == null ? void 0 : "group",
 				"aria-label": K.menuLabel,
-				children: e
-			});
-		},
-		children: dn
-	}), pn = Y || Et ? /* @__PURE__ */ G("div", {
-		className: "relative w-full",
-		children: [
-			Y && /* @__PURE__ */ W("div", {
-				ref: _t,
-				className: "absolute start-0 top-0",
-				children: qe
+				children: K.renderMenu({
+					query: zt,
+					caretPosition: Z ?? 0,
+					close: ln,
+					listboxId: Wt,
+					activeOptionId: Kt
+				})
 			}),
-			Dt && K != null && /* @__PURE__ */ G("span", {
-				className: c(q.commandHint, "pointer-events-none absolute start-[var(--ci-first-line-indent,0px)] top-0", N?.fontClassName || "dial-body-paragraph-text"),
+			children: /* @__PURE__ */ P("span", {
 				"aria-hidden": !0,
-				children: [/* @__PURE__ */ W("span", {
-					className: "invisible",
-					children: K.triggerPrefix
-				}), K.emptyQueryHint]
-			}),
-			fn
-		]
-	}) : fn, mn = me ? void 0 : /* @__PURE__ */ W(et, {
-		onAttachClick: he ? void 0 : () => Yt.current?.click(),
-		attachLabel: b,
-		addMenuTitle: S,
-		menuTitle: C,
-		menuCloseLabel: w,
-		style: bt,
-		isDisabled: H || $,
-		chatSettings: Pe,
-		extraMenuItems: xt,
-		onRecordVoice: Ce && ot && !o && !$ ? () => Kt(Le.Attachment) : void 0,
-		recordVoiceLabel: te,
-		toolsMenuItems: Be ? Re : void 0,
-		onToolToggle: ze,
-		toolsMenuTitle: Ve,
-		toolsBackLabel: We,
-		menuOverlays: Ke
+				className: "inline-block h-[1lh] w-0"
+			})
+		})
+	})] }), tr = /* @__PURE__ */ F("div", {
+		ref: an,
+		className: "relative -me-1 -ms-1 w-[calc(100%+8px)]",
+		children: [Yn && /* @__PURE__ */ F("div", {
+			ref: Xn,
+			className: l(q.textarea, N?.fontClassName || "dial-body-paragraph-text", "pointer-events-none absolute inset-0 z-10 max-h-[272px] w-full overflow-hidden whitespace-pre-wrap pe-1 ps-1 [overflow-wrap:anywhere]"),
+			children: [Re(J, Nt, Jn, q.mentionHighlight, q.mentionHighlightUnsupported), Zn.map((e, t) => /* @__PURE__ */ P("div", {
+				"aria-hidden": !0,
+				className: "pointer-events-none absolute rounded-sm bg-control-accent-alpha-active",
+				style: {
+					left: e.left,
+					top: e.top,
+					width: e.width,
+					height: e.height
+				}
+			}, `selection-${t}`))]
+		}), er]
+	}), nr = Se ? void 0 : /* @__PURE__ */ P(dt, {
+		onAttachClick: Ce ? void 0 : () => An.current?.click(),
+		attachLabel: y,
+		addMenuTitle: C,
+		menuTitle: w,
+		menuCloseLabel: T,
+		style: Ft,
+		isDisabled: G || $,
+		chatSettings: Xe,
+		extraMenuItems: It,
+		onRecordVoice: Fe && wt && !s && !$ ? () => Dn(qe.Attachment) : void 0,
+		recordVoiceLabel: j,
+		toolsMenuItems: nt ? Ze : void 0,
+		onToolToggle: tt,
+		toolsMenuTitle: rt,
+		toolsBackLabel: it,
+		menuOverlays: ot,
+		getCaretPosition: () => X.current?.selectionStart ?? J.length
+	}), rr = De === et.Inline && (!kt || W), ir = nr && /* @__PURE__ */ P("div", {
+		className: l("flex", U.addCluster),
+		children: nr
+	}), ar = zn.length > 0 && tt != null && /* @__PURE__ */ P("div", {
+		className: l("min-w-0 flex-1", U.toolsChips),
+		children: /* @__PURE__ */ P(mt, {
+			items: zn,
+			onToolToggle: tt,
+			onToolDismiss: Bn,
+			canRemove: nt,
+			removeLabel: at?.removeLabel,
+			stateOnLabel: at?.stateOnLabel,
+			stateOffLabel: at?.stateOffLabel
+		})
 	});
-	return /* @__PURE__ */ G("div", {
-		ref: Xt,
-		style: bt,
-		className: c(q.wrapper, H && q.wrapperDisabled, H && "cursor-not-allowed", "flex w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border", "focus-within:outline focus-within:-outline-offset-1 active:outline active:-outline-offset-1", kt.length > 6 ? "py-4 ps-4" : "p-4", re),
+	return /* @__PURE__ */ F("div", {
+		ref: jn,
+		style: Ft,
+		className: l(q.wrapper, G && q.wrapperDisabled, G && "cursor-not-allowed", "flex w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border", "focus-within:outline focus-within:-outline-offset-1 active:outline active:-outline-offset-1", dn.length > 6 ? "py-4 ps-4" : "p-4", ce, U.wrapper),
 		children: [
-			(Ae.length > 0 || kt.length > 0) && /* @__PURE__ */ W(ve, {
-				attachments: [...Ae, ...kt],
+			(Je.length > 0 || dn.length > 0) && /* @__PURE__ */ P(se, {
+				attachments: [...Je, ...dn],
 				onRemove: (e) => {
-					Ae.some((t) => t.id === e) ? je?.(e) : Nt(e);
+					Je.some((t) => t.id === e) ? Ye?.(e) : hn(e);
 				},
-				onRetry: Pt,
-				onExpand: Ft,
+				onRetry: gn,
+				onExpand: _n,
 				labels: {
-					removeLabel: T,
-					retryLabel: E,
-					uploadingLabel: D
+					removeLabel: E,
+					retryLabel: D,
+					uploadingLabel: ee
 				},
-				onAttachmentClick: tt == null ? void 0 : (e) => {
-					let t = [...Ae, ...kt].find((t) => t.id === e);
-					t != null && tt(t);
+				styles: ae,
+				onAttachmentClick: _t == null ? void 0 : (e) => {
+					let t = [...Je, ...dn].find((t) => t.id === e);
+					t != null && _t(t);
 				}
 			}),
-			!me && /* @__PURE__ */ W("input", {
-				ref: Yt,
+			!Se && /* @__PURE__ */ P("input", {
+				ref: An,
 				type: "file",
 				multiple: !0,
-				accept: x,
+				accept: S,
 				className: "sr-only",
 				"aria-hidden": !0,
 				tabIndex: -1,
-				onChange: un
+				onChange: qn
 			}),
-			Gt && /* @__PURE__ */ W(_, {
-				text: Gt,
+			En && /* @__PURE__ */ P(b, {
+				text: En,
 				className: "min-w-0 break-words px-1"
 			}),
-			$ && /* @__PURE__ */ W(ct, {
+			$ && /* @__PURE__ */ P(yt, {
 				embedded: !0,
-				state: Ut,
-				analyserNodeRef: Wt,
-				errorMessage: Gt,
-				onStop: qt,
-				onDiscard: Jt,
-				attachButton: mn,
-				stopLabel: j,
-				discardLabel: ne,
-				processingLabel: Te
+				state: wn,
+				analyserNodeRef: Tn,
+				onStop: On,
+				onDiscard: kn,
+				attachButton: nr,
+				stopLabel: re,
+				discardLabel: ie,
+				processingLabel: ze
+			}),
+			!$ && we && tr,
+			!$ && !we && rr && ar && /* @__PURE__ */ P("div", {
+				className: "flex",
+				children: ar
 			}),
-			!$ && ge && pn,
-			!$ && !ge && /* @__PURE__ */ G("div", {
-				className: "flex flex-wrap items-center gap-2",
+			!$ && !we && /* @__PURE__ */ F("div", {
+				className: l("flex items-center gap-2", rr ? "flex-nowrap" : "flex-wrap", U.actionRow),
 				children: [
-					/* @__PURE__ */ W("div", {
-						className: "flex w-full min-w-0 items-center self-stretch",
-						children: pn
-					}),
-					mn && /* @__PURE__ */ W("div", {
-						className: "flex",
-						children: mn
+					rr && ir,
+					/* @__PURE__ */ P("div", {
+						className: l("flex min-w-0 items-center self-stretch", rr ? "flex-1" : "w-full", U.textareaWrap),
+						children: tr
 					}),
-					rn.length > 0 && ze != null && /* @__PURE__ */ W("div", {
-						className: "min-w-0 flex-1",
-						children: /* @__PURE__ */ W(rt, {
-							items: rn,
-							onToolToggle: ze,
-							onToolDismiss: an,
-							canRemove: Be,
-							removeLabel: Ge?.removeLabel
-						})
-					}),
-					/* @__PURE__ */ W("div", {
-						className: "ms-auto flex flex-shrink-0 items-center gap-2",
-						children: _e ? _e({
-							canSend: en,
-							onSend: cn
-						}) : /* @__PURE__ */ G(U, { children: [
-							dt,
-							/* @__PURE__ */ W(Bt, {
-								deployments: le,
-								selectedDeploymentId: ue,
-								onDeploymentChange: de,
-								modelSelectorLabels: fe,
-								isStreaming: o,
-								isMobile: pt,
-								isDisabled: ye,
-								style: bt,
-								modelPickerOverlay: nt,
-								isPickerOpen: mt,
-								onPickerToggle: () => ht((e) => !e),
-								onPickerOpenChange: ht
+					!rr && ir,
+					!rr && ar,
+					/* @__PURE__ */ P("div", {
+						className: l("ms-auto flex flex-shrink-0 items-center gap-2", U.footerActions),
+						children: Oe ? Oe({
+							canSend: In,
+							onSend: Un
+						}) : /* @__PURE__ */ F(oe, { children: [
+							Et,
+							/* @__PURE__ */ P(Zt, {
+								deployments: _e,
+								selectedDeploymentId: ve,
+								onDeploymentChange: ye,
+								modelSelectorLabels: be,
+								menuStyles: I,
+								isStreaming: s,
+								isMobile: kt,
+								isDisabled: Ae,
+								style: Ft,
+								modelPickerOverlay: vt,
+								isPickerOpen: At,
+								onPickerToggle: () => jt((e) => !e),
+								onPickerOpenChange: jt
 							}),
-							sn && /* @__PURE__ */ W(v, {
-								icon: /* @__PURE__ */ W(se, {
-									size: p.LG,
-									stroke: m,
+							Hn && /* @__PURE__ */ P(x, {
+								icon: /* @__PURE__ */ P(me, {
+									size: g.LG,
+									stroke: _,
 									"aria-hidden": !0
 								}),
-								"aria-label": A,
-								tooltipProps: { tooltip: A },
+								"aria-label": ne,
+								tooltipProps: { tooltip: ne },
 								className: "size-[40px] flex-shrink-0 mobile:min-h-11 mobile:min-w-11",
-								onClick: () => Kt(Le.Dictation),
-								disabled: H || o
+								onClick: () => Dn(qe.Dictation),
+								disabled: G || s
 							}),
-							o && a ? /* @__PURE__ */ W(ut, {
-								onStop: a,
-								ariaLabel: ee
-							}) : !o && /* @__PURE__ */ W(lt, {
-								onSend: cn,
-								isDisabled: !on || !en,
+							s && o ? /* @__PURE__ */ P(xt, {
+								onStop: o,
+								ariaLabel: A
+							}) : !s && /* @__PURE__ */ P(bt, {
+								onSend: Un,
+								isDisabled: !Vn || !In,
 								ariaLabel: O,
-								sendTooltip: k
+								sendTooltip: Fn ? k : te ?? k
 							})
 						] })
 					})
 				]
 			}),
-			/* @__PURE__ */ W("span", {
+			/* @__PURE__ */ P("span", {
 				className: "sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: /* @__PURE__ */ W("span", { children: Vt.text }, Vt.revision)
+				children: /* @__PURE__ */ P("span", { children: Sn.text }, Sn.revision)
 			})
 		]
 	});
-}, Ht = {
+});
+Qt.displayName = "Input";
+var $t = {
 	welcome: "_welcome_1icyo_1",
 	description: "_description_1icyo_5"
-}, Ut = ({ isStreaming: e = !1, placeholder: t = "Type a prompt or use \"/\" to select one", welcomeText: n, descriptionText: r, styles: i, className: a, inputClassName: o, isInputDisabled: l = !1, ...u }) => {
-	let { colors: d, typography: f } = i ?? {};
-	return /* @__PURE__ */ G("div", {
-		style: s({
-			"--ci-welcome-color": d?.welcomeText,
-			"--ci-description-color": d?.descriptionText
+}, en = ({ isStreaming: e = !1, placeholder: t = "Type a prompt or use \"/\" to select one", welcomeText: n, descriptionText: r, belowWelcomeSlot: i, styles: a, className: o, inputClassName: s, isInputDisabled: u = !1, ...d }) => {
+	let { colors: f, typography: p, attachmentTray: m, modelMenu: h } = a ?? {};
+	return /* @__PURE__ */ F("div", {
+		style: c({
+			"--ci-welcome-color": f?.welcomeText,
+			"--ci-description-color": f?.descriptionText
 		}),
-		className: c("relative flex w-full flex-col items-center gap-9 px-4 py-5 desktop:p-5", a),
-		children: [n && /* @__PURE__ */ G("div", {
-			className: "flex flex-col items-center gap-4 text-center",
-			children: [/* @__PURE__ */ W("h1", {
-				className: c(Ht.welcome, "m-0", f?.welcomeClassName || "dial-display2-text"),
-				children: n
-			}), r && /* @__PURE__ */ W("p", {
-				className: c(Ht.description, "m-0 max-w-[540px]", f?.descriptionClassName || "dial-body-paragraph-text"),
-				children: r
-			})]
-		}), /* @__PURE__ */ W("div", {
-			className: c("relative w-full", n ? "max-w-[700px]" : "max-w-[748px]"),
-			children: /* @__PURE__ */ W(Vt, {
-				placeholder: t,
-				isStreaming: e,
-				isInputDisabled: l,
-				...u,
-				className: o,
-				colors: d?.input,
-				typography: f?.input
+		className: l("relative flex w-full flex-col items-center gap-9 px-4 py-5 desktop:p-5", o),
+		children: [
+			n && /* @__PURE__ */ F("div", {
+				className: "flex flex-col items-center gap-4 text-center",
+				children: [/* @__PURE__ */ P("h1", {
+					className: l($t.welcome, "m-0", p?.welcomeClassName || "dial-display2-text"),
+					children: n
+				}), r && /* @__PURE__ */ P("p", {
+					className: l($t.description, "m-0 max-w-[540px]", p?.descriptionClassName || "dial-body-paragraph-text"),
+					children: r
+				})]
+			}),
+			i != null && /* @__PURE__ */ P("div", {
+				className: "flex w-full max-w-[700px] flex-col items-center empty:hidden",
+				children: i
+			}),
+			/* @__PURE__ */ P("div", {
+				className: l("relative w-full", n ? "max-w-[700px]" : "max-w-[748px]"),
+				children: /* @__PURE__ */ P(Qt, {
+					placeholder: t,
+					isStreaming: e,
+					isInputDisabled: u,
+					...d,
+					className: s,
+					colors: f?.input,
+					typography: p?.input,
+					attachmentTray: m,
+					modelMenu: h
+				})
 			})
-		})]
+		]
 	});
-}, Wt = ({ message: e, inlineStartSlot: t, onInlineStartRemove: n, initialAttachments: r = [], onCancel: a, onSave: o, onUploadAttachment: s, cancelLabel: l = "Cancel", saveLabel: d = "Save & Submit", ariaLabel: f, removeLabel: p, retryLabel: h, uploadingLabel: g, addMenuTitle: _ = "Add", attachLabel: v = "Attach file", menuTitle: y = "Menu", menuCloseLabel: b = "Close", className: S, pendingDropFiles: C, onDropFilesConsumed: T, validateAttachment: E, isAttachmentsEnabled: D, isTextAttachmentsAllowed: O, hideAttachFile: k = !1, fileAccept: ee, maximumAttachmentsAmount: A, onAttachmentsLimitExceeded: te, onDialFileSystemClick: j, dialFileSystemLabel: ne, pendingAttachments: M, onPendingAttachmentsConsumed: N, onAttachmentClick: re, pasteTextThreshold: ie, maxMessageLength: P = 5e4, onMessageTooLong: F }) => {
-	let ae = B(null), [se, ce] = V([]);
-	R(() => {
-		C?.length && (ce(C), T?.());
-	}, [C, T]);
-	let [I, le] = V(e ?? ""), [ue, de] = V([]), [fe, pe] = V(r), me = ue.some((e) => e.status === i.Loading || e.status === i.Error), he = (I.trim().length > 0 || ue.length > 0 || fe.length > 0) && !me, ge = (e) => {
-		pe((t) => t.filter((t) => t.id !== e));
-	}, _e = L((e, t) => {
-		o(e, fe, t);
-	}, [fe, o]), H = () => {
-		if (he) {
-			if (I.length >= P) {
-				F?.(I.length, P);
+}, tn = ({ message: e, messageRevision: t, onChange: n, activeMentions: r, onBackspaceAtCaret: i, caretPositionOverride: o, commandMenu: s, menuOverlays: c, initialAttachments: u = [], onCancel: d, onSave: p, onUploadAttachment: m, cancelLabel: h = "Cancel", saveLabel: g = "Save & Submit", ariaLabel: v, removeLabel: y, retryLabel: b, uploadingLabel: x, addMenuTitle: S = "Add", attachLabel: C = "Attach file", menuTitle: T = "Menu", menuCloseLabel: E = "Close", className: D, pendingDropFiles: O, onDropFilesConsumed: k, validateAttachment: te, isAttachmentsEnabled: A, isTextAttachmentsAllowed: ne, hideAttachFile: j = !1, fileAccept: re, maximumAttachmentsAmount: ie, onAttachmentsLimitExceeded: M, onDialFileSystemClick: N, dialFileSystemLabel: ae, pendingAttachments: oe, onPendingAttachmentsConsumed: se, onAttachmentClick: I, pasteTextThreshold: ce, maxMessageLength: le = 5e4, onMessageTooLong: ue }) => {
+	let L = V(null), de = V(null), [fe, me] = H([]);
+	z(() => {
+		O?.length && (me(O), k?.());
+	}, [O, k]);
+	let [he, ge] = H(e ?? ""), [_e, ve] = H([]), [ye, be] = H(u), xe = _e.some((e) => e.status === a.Loading || e.status === a.Error), Se = (he.trim().length > 0 || _e.length > 0 || ye.length > 0) && !xe, Ce = (e) => {
+		be((t) => t.filter((t) => t.id !== e));
+	}, we = R((e, t) => {
+		p(e, ye, t);
+	}, [ye, p]), Te = () => {
+		if (Se) {
+			if (he.length >= le) {
+				ue?.(he.length, le);
 				return;
 			}
-			_e(I, ue);
+			we(he, _e);
 		}
-	}, ve = L(() => ce([]), []), ye = L((e) => {
+	}, Ee = R(() => me([]), []), U = R((e) => {
+		ge(e), n?.(e);
+	}, [n]), De = R((e) => {
 		let t = Array.from(e.target.files ?? []);
-		t.length !== 0 && (e.target.value = "", ce(t));
-	}, []), be = z(() => j ? [{
+		t.length !== 0 && (e.target.value = "", me(t));
+	}, []), W = B(() => N ? [{
 		key: "dial-fs",
-		label: ne ?? "DIAL file system",
-		icon: /* @__PURE__ */ W(oe, {
-			size: u,
+		label: ae ?? "DIAL file system",
+		icon: /* @__PURE__ */ P(pe, {
+			size: f,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: _
 		}),
-		onClick: j
-	}] : [], [j, ne]);
-	return /* @__PURE__ */ G("div", {
-		className: c("flex w-full flex-col gap-2", S),
-		children: [/* @__PURE__ */ W(Vt, {
+		onClick: N
+	}] : [], [N, ae]);
+	return /* @__PURE__ */ F("div", {
+		className: l("flex w-full flex-col gap-2", D),
+		children: [/* @__PURE__ */ P(Qt, {
+			ref: de,
 			message: e,
-			inlineStartSlot: t,
-			onInlineStartRemove: n,
-			ariaLabel: f,
+			messageRevision: t,
+			activeMentions: r,
+			onBackspaceAtCaret: i,
+			caretPositionOverride: o,
+			commandMenu: s,
+			ariaLabel: v,
 			hideActionBar: !0,
-			pendingDropFiles: se,
-			onDropFilesConsumed: ve,
-			onSend: _e,
-			onUploadAttachment: s,
-			onChange: le,
-			onAttachmentsChange: de,
-			removeLabel: p,
-			retryLabel: h,
-			uploadingLabel: g,
+			pendingDropFiles: fe,
+			onDropFilesConsumed: Ee,
+			onSend: we,
+			onUploadAttachment: m,
+			onChange: U,
+			onAttachmentsChange: ve,
+			removeLabel: y,
+			retryLabel: b,
+			uploadingLabel: x,
 			className: "max-w-full",
-			prefixAttachments: fe,
-			onRemovePrefixAttachment: ge,
-			validateAttachment: E,
-			isAttachmentsEnabled: D,
-			isTextAttachmentsAllowed: O,
-			maximumAttachmentsAmount: A,
-			onAttachmentsLimitExceeded: te,
-			pendingAttachments: M,
-			onPendingAttachmentsConsumed: N,
-			onAttachmentClick: re,
-			pasteTextThreshold: ie,
-			maxMessageLength: P,
-			onMessageTooLong: F
-		}), /* @__PURE__ */ G("div", {
+			prefixAttachments: ye,
+			onRemovePrefixAttachment: Ce,
+			validateAttachment: te,
+			isAttachmentsEnabled: A,
+			isTextAttachmentsAllowed: ne,
+			maximumAttachmentsAmount: ie,
+			onAttachmentsLimitExceeded: M,
+			pendingAttachments: oe,
+			onPendingAttachmentsConsumed: se,
+			onAttachmentClick: I,
+			pasteTextThreshold: ce,
+			maxMessageLength: le,
+			onMessageTooLong: ue
+		}), /* @__PURE__ */ F("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ W("div", {
+			children: [/* @__PURE__ */ F("div", {
 				className: "flex",
-				children: !k && /* @__PURE__ */ G(U, { children: [/* @__PURE__ */ W("input", {
-					ref: ae,
+				children: [!j && /* @__PURE__ */ P("input", {
+					ref: L,
 					type: "file",
 					multiple: !0,
-					accept: ee,
+					accept: re,
 					className: "sr-only",
 					"aria-hidden": !0,
 					tabIndex: -1,
-					onChange: ye
-				}), /* @__PURE__ */ W(et, {
-					onAttachClick: () => ae.current?.click(),
-					attachLabel: v,
-					addMenuTitle: _,
-					menuTitle: y,
-					menuCloseLabel: b,
-					extraMenuItems: be
-				})] })
-			}), /* @__PURE__ */ G("div", {
+					onChange: De
+				}), (!j || (c?.length ?? 0) > 0) && /* @__PURE__ */ P(dt, {
+					onAttachClick: j ? void 0 : () => L.current?.click(),
+					attachLabel: C,
+					addMenuTitle: S,
+					menuTitle: T,
+					menuCloseLabel: E,
+					extraMenuItems: W,
+					menuOverlays: c,
+					getCaretPosition: () => de.current?.getCaretPosition() ?? 0
+				})]
+			}), /* @__PURE__ */ F("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ W(x, {
-					label: l,
-					onClick: a
-				}), /* @__PURE__ */ W(w, {
-					label: d,
-					onClick: H,
-					disabled: !he
+				children: [/* @__PURE__ */ P(w, {
+					label: h,
+					onClick: d
+				}), /* @__PURE__ */ P(ee, {
+					label: g,
+					onClick: Te,
+					disabled: !Se
 				})]
 			})]
 		})]
 	});
+}, nn = (e) => {
+	let [t, n] = H({
+		text: e?.text,
+		revision: e?.revision ?? 0
+	}), r = R((e) => {
+		n((t) => ({
+			text: e,
+			revision: t.revision + 1
+		}));
+	}, []);
+	return {
+		message: t.text,
+		messageRevision: t.revision,
+		seedMessage: r
+	};
+}, rn = (e, t) => {
+	let n = V(e), r = V(t);
+	r.current = t, z(() => {
+		e !== n.current && (n.current = e, r.current());
+	}, [e]);
 };
 //#endregion
-export { Te as BottomSheetShell, Xe as ChatSettingsModal, Ut as ConversationInput, Wt as EditMessageInput, Vt as Input, Ue as SendOnEnter };
+export { et as ActionRowLayout, W as BottomSheetShell, U as CONVERSATION_INPUT_CLASS, ct as ChatSettingsModal, en as ConversationInput, tn as EditMessageInput, Qt as Input, $e as SendOnEnter, nn as useComposerSeed, rn as useComposerSeedSource };