@epam/ai-dial-conversation-input 1.1.0-dev.29 → 1.1.0-dev.293

package/index.js

@@ -1,228 +1,253 @@
-import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, Highlight as r, RequestStatus as i, ResponseFormat as a, buildCssVars as o, mergeClasses as s, useIsMobile as c } from "@epam/ai-dial-chat-shared";
-import { BASE_ICON_SIZE as l, ButtonAppearance as u, ButtonVariant as d, DIAL_ICON_SIZE as f, DialButton as p, DialCloseButton as m, DialDropdown as h, DialDropdownIcon as g, DialErrorText as _, DialGhostIconButton as v, DialInput as y, DialPopup as b, DialPrimaryButton as x, DialRadioGroup as S, DialSearch as C, DialSkeleton as w, DialSkeletonVariant as T, DialSlider as E, DialTag as D, DialTooltip as O, ElementSize as k, PopupSize as A, RadioGroupOrientation as ee } from "@epam/ai-dial-ui-kit";
-import { IconArrowLeft as j, IconArrowNarrowRight as te, IconCheck as ne, IconChevronDown as re, IconChevronRight as ie, IconFile as ae, IconMicrophone as oe, IconPaperclip as se, IconPlayerStopFilled as ce, IconPlaystationSquare as le, IconPlus as ue, IconSettings as de, IconX as fe } from "@tabler/icons-react";
-import { createPortal as pe } from "react-dom";
-import { createElement as me, memo as he, useCallback as M, useEffect as N, useImperativeHandle as P, useLayoutEffect as ge, useMemo as F, useRef as I, useState as L } from "react";
-import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
-import { AttachmentCard as _e, AttachmentGroup as ve, AttachmentTray as V, AttachmentTray as ye, FileDndOverlay as be, MAX_UPLOADS_PER_MINUTE as xe, generateAttachmentId as Se, getAttachmentIcon as Ce, useClipboardPaste as we } from "@epam/ai-dial-attachment-input";
+import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, RequestStatus as r, ResponseFormat as i, buildCssVars as a, mergeClasses as o, useIsMobile as s } from "@epam/ai-dial-chat-shared";
+import { BASE_ICON_SIZE as c, Button as l, CloseButton as u, DIAL_ICON_SIZE as d, DialDropdownIcon as f, Dropdown as p, ElementSize as m, ErrorText as h, GhostIconButton as g, Highlight as _, NeutralButton as v, Popup as y, PopupSize as b, PrimaryButton as x, PrimaryIconButton as S, RadioGroup as C, RadioGroupOrientation as w, Search as T, Skeleton as E, SkeletonVariant as D, Slider as O, StaticIconButton as k, Textarea as A, Tooltip as j } from "@epam/ai-dial-ui-kit";
+import { IconArrowLeft as ee, IconArrowNarrowRight as te, IconCheck as M, IconChevronDown as ne, IconChevronRight as N, IconFile as re, IconMicrophone as ie, IconPaperclip as ae, IconPlayerStopFilled as P, IconPlaystationSquare as F, IconPlus as oe, IconPrompt as se, IconSettings as ce, IconTool as le, IconX as I } from "@tabler/icons-react";
+import { createPortal as ue } from "react-dom";
+import { createElement as L, memo as R, useCallback as z, useEffect as B, useImperativeHandle as de, useLayoutEffect as fe, useMemo as V, useRef as H, useState as U } from "react";
+import { Fragment as W, jsx as G, jsxs as K } from "react/jsx-runtime";
+import { AttachmentCard as pe, AttachmentGroup as me, AttachmentTray as he, AttachmentTray as ge, FileDndOverlay as _e, MAX_UPLOADS_PER_MINUTE as ve, generateAttachmentId as ye, getAttachmentIcon as be, useClipboardPaste as xe } from "@epam/ai-dial-attachment-input";
 //#region src/hooks/useBottomSheet.ts
-var Te = (e, t) => {
-	N(() => {
+var Se = (e, t) => {
+	B(() => {
 		if (!e) return;
 		let n = (e) => {
 			e.key === "Escape" && t();
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
-	}, [e, t]), N(() => {
+	}, [e, t]), B(() => {
 		if (e) return document.body.style.overflow = "hidden", () => {
 			document.body.style.overflow = "";
 		};
 	}, [e]);
-}, Ee = {
-	backdrop: "_backdrop_3xrn0_9",
-	sheet: "_sheet_3xrn0_13",
-	"slide-up": "_slide-up_3xrn0_1",
-	title: "_title_3xrn0_18",
-	divider: "_divider_3xrn0_22"
-}, H = ({ isOpen: e, title: t, closeLabel: n, onClose: r, onBack: i, backLabel: a, "aria-label": o, style: c, titleClassName: l = "dial-body-semi-text", className: u, children: d }) => (Te(e, r), !e || typeof document > "u" ? null : pe(/* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z("div", {
-	className: s(Ee.backdrop, "fixed inset-0 z-[55]"),
-	onPointerDown: r,
-	"aria-hidden": !0
-}), /* @__PURE__ */ B("div", {
-	role: "dialog",
-	"aria-modal": !0,
-	"aria-label": t ?? o,
-	style: c,
-	className: s(Ee.sheet, "fixed inset-x-0 bottom-0 z-[60] flex max-h-[85dvh] flex-col", u),
-	children: [t != null && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ B("div", {
-		className: "relative flex h-[60px] flex-shrink-0 items-center justify-center px-4",
-		children: [
-			i && /* @__PURE__ */ z("div", {
-				className: "absolute start-4",
-				children: /* @__PURE__ */ z(v, {
-					icon: /* @__PURE__ */ z(j, {
-						size: f.LG,
-						stroke: 1.5,
-						className: "rtl:scale-x-[-1]"
-					}),
-					"aria-label": a,
-					onClick: i
-				})
-			}),
-			/* @__PURE__ */ z("span", {
-				className: s(Ee.title, l),
-				children: t
-			}),
-			/* @__PURE__ */ z("div", {
-				className: "absolute end-4 m-2",
-				children: /* @__PURE__ */ z(m, {
-					ariaLabel: n,
-					size: f.LG,
-					onClose: r
+}, Ce = {
+	backdrop: "_backdrop_1d50f_9",
+	sheet: "_sheet_1d50f_13",
+	"slide-up": "_slide-up_1d50f_1",
+	title: "_title_1d50f_18",
+	divider: "_divider_1d50f_22"
+}, q = ({ isOpen: e, title: t, closeLabel: n, onClose: r, onBack: i, backLabel: s, "aria-label": c, style: l, titleClassName: f = "dial-body-semi-text", className: p, colors: h, children: _ }) => {
+	if (Se(e, r), !e || typeof document > "u") return null;
+	let v = a({
+		"--ci-backdrop": h?.backdrop,
+		"--ci-sheet-bg": h?.sheetBg,
+		"--ci-sheet-text": h?.sheetText,
+		"--ci-sheet-divider": h?.divider
+	});
+	return ue(/* @__PURE__ */ K(W, { children: [/* @__PURE__ */ G("div", {
+		className: o(Ce.backdrop, "fixed inset-0 z-[55]"),
+		style: v,
+		onPointerDown: r,
+		"aria-hidden": !0
+	}), /* @__PURE__ */ K("div", {
+		role: "dialog",
+		"aria-modal": !0,
+		"aria-label": t ?? c,
+		style: {
+			...v,
+			...l
+		},
+		className: o(Ce.sheet, "fixed inset-x-0 bottom-0 z-[60] flex max-h-[85dvh] flex-col rounded-t-lg", p),
+		children: [t != null && /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ K("div", {
+			className: "relative flex h-[60px] flex-shrink-0 items-center justify-center px-4",
+			children: [
+				i && /* @__PURE__ */ G("div", {
+					className: "absolute start-4",
+					children: /* @__PURE__ */ G(g, {
+						icon: /* @__PURE__ */ G(ee, {
+							size: d.LG,
+							stroke: 1.5,
+							className: "rtl:scale-x-[-1]"
+						}),
+						"aria-label": s,
+						onClick: i
+					})
+				}),
+				/* @__PURE__ */ G("span", {
+					className: o(Ce.title, f),
+					children: t
+				}),
+				/* @__PURE__ */ G("div", {
+					className: "absolute end-4 m-2",
+					children: /* @__PURE__ */ G(u, {
+						ariaLabel: n,
+						onClose: r,
+						size: m.Standard
+					})
 				})
-			})
-		]
-	}), /* @__PURE__ */ z("div", { className: "h-px flex-shrink-0" })] }), /* @__PURE__ */ z("div", {
-		className: "overflow-y-auto",
-		children: d
-	})]
-})] }), document.body)), De = async (e, t, n) => {
+			]
+		}), /* @__PURE__ */ G("div", { className: o(Ce.divider, "h-px flex-shrink-0") })] }), /* @__PURE__ */ G("div", {
+			className: "overflow-y-auto",
+			children: _
+		})]
+	})] }), document.body);
+}, we = 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);
-}, Oe = ({ 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] = L(n), _ = I(h);
-	N(() => {
+}, Te = ({ initialAttachments: n, onUploadAttachment: i, onAttachmentsChange: a, validateAttachment: o, pendingDropFiles: s, onDropFilesConsumed: c, pendingAttachments: l, onPendingAttachmentsConsumed: u, onExpandPastedText: d, maximumAttachmentsAmount: f, baseAttachmentsAmount: p = 0, onAttachmentsLimitExceeded: m }) => {
+	let [h, g] = U(n), _ = H(h);
+	B(() => {
 		_.current = h;
-	}, [h]), N(() => () => {
+	}, [h]), B(() => () => {
 		_.current.forEach((e) => {
 			e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
 		});
 	}, []);
-	let v = M((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 = z((e) => e.map((e) => {
+		let n = e.type.startsWith("image/"), i = e.type.startsWith("audio/"), a = n ? URL.createObjectURL(e) : void 0, o = i ? URL.createObjectURL(e) : void 0;
 		return {
-			id: Se(),
+			id: ye(),
 			name: e.name,
 			contentType: e.type,
 			file: e,
-			type: n ? t.Image : r ? t.Audio : t.File,
-			status: i.Idle,
+			type: n ? t.Image : i ? t.Audio : t.File,
+			status: r.Idle,
 			previewUrl: a,
 			playUrl: o
 		};
-	}), []), y = M((e) => {
+	}), []), y = H(a);
+	B(() => {
+		y.current = a;
+	}, [a]);
+	let b = H(!0), x = z((e) => {
 		g((t) => {
 			let n = e(t);
-			return n !== t && a?.(n), n;
+			return n === t ? t : n;
 		});
-	}, [a]), b = M((e) => {
-		g(e), a?.(e);
-	}, [a]), x = M(async (t) => {
-		if (r) {
-			y((e) => e.map((e) => e.id === t.id ? {
+	}, []);
+	B(() => {
+		if (b.current) {
+			b.current = !1;
+			return;
+		}
+		y.current?.(h);
+	}, [h]);
+	let S = z((e) => {
+		g(e);
+	}, []), C = z(async (t) => {
+		if (i) {
+			x((e) => e.map((e) => e.id === t.id ? {
 				...e,
-				status: i.Loading
+				status: r.Loading
 			} : e));
 			try {
-				let e = await r(t);
-				y((n) => n.map((n) => n.id === t.id ? {
+				let e = await i(t);
+				x((n) => n.map((n) => n.id === t.id ? {
 					...n,
-					status: i.Idle,
+					status: r.Idle,
 					url: e
 				} : n));
 			} catch (n) {
-				let r = typeof n == "object" && n && "errorReason" in n && Object.values(e).includes(n.errorReason) ? n.errorReason : void 0;
-				y((e) => e.map((e) => e.id === t.id ? {
+				let i = 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,
-					...r != null && { errorReason: r }
+					status: r.Error,
+					...i != null && { errorReason: i }
 				} : e));
 			}
 		}
-	}, [r, y]), S = M((e, t = !0) => {
-		let n = new Set(_.current.map((e) => e.id)), r = e.filter((e) => !n.has(e.id));
-		if (r.length !== 0) {
+	}, [i, x]), w = z((e, t = !0) => {
+		let n = new Set(_.current.map((e) => e.id)), i = e.filter((e) => !n.has(e.id));
+		if (i.length !== 0) {
 			if (f != null && f > 0 && Number.isFinite(f)) {
-				let e = p + _.current.length + r.length;
+				let e = p + _.current.length + i.length;
 				if (e > f) {
-					r.forEach((e) => {
-						e.previewUrl && URL.revokeObjectURL(e.previewUrl);
+					i.forEach((e) => {
+						e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
 					}), m?.(e, f);
 					return;
 				}
 			}
-			if (y((e) => [...e, ...r]), t) {
+			if (x((e) => [...e, ...i]), t) {
 				let e = [];
-				r.forEach((t) => {
+				i.forEach((t) => {
 					let n = o?.(t);
-					n == null ? e.push(t) : y((e) => e.map((e) => e.id === t.id ? {
+					n == null ? e.push(t) : x((e) => e.map((e) => e.id === t.id ? {
 						...e,
-						status: i.Error,
+						status: r.Error,
 						errorReason: n
 					} : e));
-				}), De(e, xe, x);
+				}), we(e, ve, C);
 			}
 		}
 	}, [
 		p,
 		f,
 		m,
-		y,
 		x,
+		C,
 		o
 	]);
-	N(() => {
-		s.length !== 0 && (S(v(s)), c?.());
+	B(() => {
+		s.length !== 0 && (w(v(s)), c?.());
 	}, [
-		S,
+		w,
 		v,
 		c,
 		s
-	]), N(() => {
-		l.length !== 0 && (S(l, !1), u?.());
+	]), B(() => {
+		l.length !== 0 && (w(l, !1), u?.());
 	}, [
-		S,
+		w,
 		u,
 		l
-	]), N(() => {
+	]), B(() => {
 		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, {
-				...r,
-				status: i.Error,
+		let t = !1, n = [], i = _.current.map((i) => {
+			if (i.status === r.Loading) return i;
+			let a = o(i);
+			if (a != null) return i.status === r.Error && i.errorReason === a ? i : (t = !0, {
+				...i,
+				status: r.Error,
 				errorReason: a
 			});
-			if (r.errorReason === e.UnsupportedType) {
+			if (i.errorReason === e.UnsupportedType) {
 				t = !0;
 				let e = {
-					...r,
-					status: i.Idle,
+					...i,
+					status: r.Idle,
 					errorReason: void 0
 				};
 				return e.url ?? n.push(e), e;
 			}
-			return r;
+			return i;
 		});
-		t && y(() => r), n.forEach((e) => void x(e));
+		t && x(() => i), n.forEach((e) => void C(e));
 	}, [
 		o,
-		y,
-		x
+		x,
+		C
 	]);
-	let C = M((e) => {
-		y((t) => {
+	let T = z((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);
 		});
-	}, [y]);
+	}, [x]);
 	return {
 		attachments: h,
 		buildAttachments: v,
-		addAttachments: S,
-		resetAttachments: b,
-		handleRemove: C,
-		handleRetry: M((e) => {
+		addAttachments: w,
+		resetAttachments: S,
+		handleRemove: T,
+		handleRetry: z((e) => {
 			let t = h.find((t) => t.id === e);
-			t && x(t);
-		}, [h, x]),
-		handleExpand: M(async (e) => {
+			t && C(t);
+		}, [h, C]),
+		handleExpand: z(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), C(e);
+			d?.(r), T(e);
 		}, [
 			h,
-			C,
+			T,
 			d
 		]),
-		hasBlockedAttachments: h.some((e) => e.status === i.Loading || e.status === i.Error)
+		hasBlockedAttachments: h.some((e) => e.status === r.Loading || e.status === r.Error)
 	};
-}, ke = (e, t) => {
-	let [n, r] = L(e), [i, a] = L(!1), [o, s] = L(0);
-	return N(() => {
+}, Ee = (e, t) => {
+	let [n, r] = U(e), [i, a] = U(!1), [o, s] = U(0);
+	return B(() => {
 		if (e) {
 			r(!0), a(!1), s((e) => e + 1);
 			return;
@@ -238,18 +263,18 @@ var Te = (e, t) => {
 		isExiting: i,
 		instanceKey: o
 	};
-}, Ae = (e, t) => !e.slice(0, t).includes("\n"), je = (e, t) => !e.slice(t).includes("\n"), Me = (e) => {
-	let t = I(e);
+}, De = (e, t) => !e.slice(0, t).includes("\n"), Oe = (e, t) => !e.slice(t).includes("\n"), ke = (e) => {
+	let t = H(e);
 	t.current = e;
-	let n = I(-1), r = I(""), i = M((e, i, a) => {
+	let n = H(-1), r = H(""), i = z((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 = M(() => {
+		return !o || o.length === 0 ? null : e === "up" ? !De(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 || !Oe(i, a) ? null : n.current < o.length - 1 ? (n.current += 1, o[n.current]) : (n.current = -1, r.current);
+	}, []), a = z(() => {
 		n.current = -1, r.current = "";
-	}, []), o = M(() => {
+	}, []), o = z(() => {
 		n.current = -1, r.current = "";
 	}, []);
-	return F(() => ({
+	return V(() => ({
 		navigate: i,
 		notifyChange: a,
 		reset: o
@@ -258,13 +283,13 @@ var Te = (e, t) => {
 		a,
 		o
 	]);
-}, Ne = ({ messageProp: e, messageRevision: t }) => {
-	let [n, r] = L(e), i = I(null), a = I(0), [o, s] = L(!1);
-	return N(() => {
+}, Ae = ({ messageProp: e, messageRevision: t }) => {
+	let [n, r] = U(e), i = H(null), a = H(0), [o, s] = U(!1);
+	return B(() => {
 		r(e);
-	}, [e, t]), N(() => {
+	}, [e, t]), B(() => {
 		i.current && (a.current = i.current.offsetHeight);
-	}, []), ge(() => {
+	}, []), fe(() => {
 		if (!i.current || a.current === 0) return;
 		let e = i.current.offsetHeight > a.current;
 		s((t) => e ? !0 : n === "" ? !1 : t);
@@ -274,157 +299,106 @@ var Te = (e, t) => {
 		textareaRef: i,
 		isMultiLine: o
 	};
-}, Pe = /* @__PURE__ */ function(e) {
+}, je = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Recording = "recording", e.Error = "error", e;
-}({}), Fe = [
+}({}), Me = [
 	"audio/webm;codecs=opus",
 	"audio/ogg;codecs=opus",
 	"audio/webm"
-], Ie = () => Fe.find((e) => MediaRecorder.isTypeSupported(e)) ?? "", Le = ({ onAttachAudio: e }) => {
-	let [t, n] = L("idle"), [r, i] = L(null), [a, o] = L(0), s = I(null), c = I(null), l = I(null), u = I(null), d = I([]), f = I(""), p = I(null), m = I(e);
-	m.current = e;
-	let h = M(() => {
-		p.current != null && (clearInterval(p.current), p.current = null);
-	}, []), g = M(() => {
-		h(), s.current &&= (s.current.getTracks().forEach((e) => e.stop()), null), c.current &&= (c.current.close(), null), l.current = null, u.current = null;
-	}, [h]), _ = M(() => {
+], Ne = () => Me.find((e) => MediaRecorder.isTypeSupported(e)) ?? "", Pe = ({ onAttachAudio: e }) => {
+	let [t, n] = U("idle"), [r, i] = U(null), a = H(null), o = H(null), s = H(null), c = H(null), l = H([]), u = H(""), d = H(e);
+	d.current = e;
+	let f = z(() => {
+		a.current &&= (a.current.getTracks().forEach((e) => e.stop()), null), o.current &&= (o.current.close(), null), s.current = null, c.current = null;
+	}, []), p = z(() => {
 		(async () => {
 			try {
 				let e = await navigator.mediaDevices.getUserMedia({ audio: !0 });
-				s.current = e;
+				a.current = e;
 				let t = new AudioContext();
-				c.current = t;
+				o.current = t;
 				let r = t.createAnalyser();
-				r.fftSize = 256, l.current = r, t.createMediaStreamSource(e).connect(r);
-				let i = Ie();
-				f.current = i, d.current = [];
-				let a = new MediaRecorder(e, i ? { mimeType: i } : void 0);
-				u.current = a, a.ondataavailable = (e) => {
-					e.data.size > 0 && d.current.push(e.data);
-				}, a.start(), n("recording"), p.current = setInterval(() => {
-					o((e) => e + 1);
-				}, 1e3);
+				r.fftSize = 256, s.current = r, t.createMediaStreamSource(e).connect(r);
+				let i = Ne();
+				u.current = i, l.current = [];
+				let d = new MediaRecorder(e, i ? { mimeType: i } : void 0);
+				c.current = d, d.ondataavailable = (e) => {
+					e.data.size > 0 && l.current.push(e.data);
+				}, d.start(), n("recording");
 			} catch (e) {
 				i(e instanceof Error ? e.message : "Microphone access denied"), n("error");
 			}
 		})();
-	}, []), v = M(() => {
-		let e = u.current;
-		!e || e.state !== "recording" || (h(), e.onstop = () => {
-			let e = f.current || "audio/webm", t = new Blob(d.current, { type: e }), r = e.split(";")[0], a = r.split("/")[1] ?? "webm", s = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -1), c = new File([t], `voice-${s}.${a}`, { type: r });
-			m.current(c), g(), o(0), i(null), n("idle");
+	}, []), m = z(() => {
+		let e = c.current;
+		!e || e.state !== "recording" || (e.onstop = () => {
+			let e = u.current || "audio/webm", t = new Blob(l.current, { type: e }), r = e.split(";")[0].split("/")[1] ?? "webm", a = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -1), o = new File([t], `voice-${a}.${r}`, { type: e });
+			d.current(o), f(), i(null), n("idle");
 		}, e.stop());
-	}, [h, g]), y = M(() => {
-		let e = u.current;
-		e && e.state === "recording" && (e.ondataavailable = null, e.onstop = null, e.stop()), g(), o(0), i(null), n("idle");
-	}, [g]);
-	return N(() => () => {
-		g();
-	}, [g]), {
+	}, [f]), h = z(() => {
+		let e = c.current;
+		e && e.state === "recording" && (e.ondataavailable = null, e.onstop = null, e.stop()), f(), i(null), n("idle");
+	}, [f]);
+	return B(() => () => {
+		f();
+	}, [f]), {
 		state: t,
-		analyserNodeRef: l,
-		elapsedSeconds: a,
+		analyserNodeRef: s,
 		errorMessage: r,
-		startRecording: _,
-		stopRecording: v,
-		discardRecording: y
+		startRecording: p,
+		stopRecording: m,
+		discardRecording: h
 	};
-}, Re = /* @__PURE__ */ function(e) {
+}, Fe = /* @__PURE__ */ function(e) {
 	return e.Enter = "enter", e.MetaEnter = "meta-enter", e;
-}({}), ze = {
-	item: "_item_vou13_1",
-	itemIcon: "_itemIcon_vou13_11"
-}, Be = ({ isOpen: e, title: t, closeLabel: n, onClose: r, style: i, items: a, className: o, titleClassName: c = "dial-body-semi-text", itemLabelClassName: l = "dial-small-text", btnTextClassName: u = "" }) => {
-	let d = (e) => {
+}({}), Ie = {
+	item: "_item_1sr2n_1",
+	itemIcon: "_itemIcon_1sr2n_11"
+}, Le = ({ isOpen: e, title: t, closeLabel: n, onClose: r, style: i, items: s, className: c, titleClassName: u = "dial-body-semi-text", itemLabelClassName: d = "dial-small-text", btnTextClassName: f = "", colors: p }) => {
+	let m = (e) => {
 		e(), r();
-	};
-	return /* @__PURE__ */ z(H, {
+	}, h = a({
+		"--ci-sheet-text": p?.itemText,
+		"--ci-sheet-item-hover": p?.itemHoverBg,
+		"--ci-sheet-item-active": p?.itemActiveBg,
+		"--ci-sheet-icon": p?.itemIcon
+	});
+	return /* @__PURE__ */ G(q, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: r,
 		style: i,
-		className: o,
-		titleClassName: c,
-		children: /* @__PURE__ */ z("ul", {
+		className: c,
+		titleClassName: u,
+		colors: p?.shell,
+		children: /* @__PURE__ */ G("ul", {
 			role: "list",
 			className: "flex flex-col",
-			children: a.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ z("li", { children: /* @__PURE__ */ z(p, {
+			style: h,
+			children: s.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ G("li", { children: /* @__PURE__ */ G(l, {
 				type: "button",
-				className: s(ze.item, "flex w-full items-center gap-3 px-4 py-[10px] text-start"),
-				iconBefore: /* @__PURE__ */ z("span", {
-					className: ze.itemIcon,
+				className: o(Ie.item, "w-full gap-3 px-4 py-[10px] text-start"),
+				iconBefore: /* @__PURE__ */ G("span", {
+					className: Ie.itemIcon,
 					children: n
 				}),
-				iconAfter: r ? /* @__PURE__ */ z("span", {
+				iconAfter: r ? /* @__PURE__ */ G("span", {
 					className: "ms-auto",
 					children: r
 				}) : null,
-				textClassName: u,
-				label: /* @__PURE__ */ z("span", {
-					className: l,
+				textClassName: f,
+				label: /* @__PURE__ */ G("span", {
+					className: d,
 					children: t
 				}),
-				onClick: () => d(i)
+				onClick: () => m(i)
 			}) }, e))
 		})
 	});
-}, Ve = ({ gradientId: e = "gradient-check-icon" }) => /* @__PURE__ */ B("svg", {
-	width: f.SM,
-	height: f.SM,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	"aria-hidden": !0,
-	children: [/* @__PURE__ */ z("defs", { children: /* @__PURE__ */ B("linearGradient", {
-		id: e,
-		x1: "0",
-		y1: "0",
-		x2: "24",
-		y2: "24",
-		gradientUnits: "userSpaceOnUse",
-		children: [/* @__PURE__ */ z("stop", {
-			offset: "0%",
-			stopColor: "#4b7be6"
-		}), /* @__PURE__ */ z("stop", {
-			offset: "100%",
-			stopColor: "#9355f4"
-		})]
-	}) }), /* @__PURE__ */ z("path", {
-		d: "M5 12l5 5L20 7",
-		stroke: `url(#${e})`,
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})]
-}), He = {
-	tabContainer: "_tabContainer_rzv03_1",
-	tabActive: "_tabActive_rzv03_13"
-};
-he(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
-	let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
-	return /* @__PURE__ */ z("div", {
-		className: "flex flex-nowrap gap-1",
-		children: e.map((e) => {
-			let r = t === e.id;
-			return /* @__PURE__ */ z(D, {
-				label: e.label,
-				selected: r,
-				onClick: () => n(e.id),
-				"aria-selected": r,
-				className: s("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, He.tabContainer, r && He.tabActive)
-			}, e.id);
-		})
-	});
-});
-//#endregion
-//#region ../ai-dial-kit/src/components/Button/Buttons.tsx
-var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
-	...e,
-	variant: d.Neutral,
-	appearance: u.Outlined
-}), Ue = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
-	let [s, c] = L(t), [l, u] = L(n), [d, f] = L(r), p = I(o);
-	N(() => {
+}, Re = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
+	let [s, c] = U(t), [l, u] = U(n), [d, f] = U(r), p = H(o);
+	B(() => {
 		o && !p.current && (c(t), u(n), f(r)), p.current = o;
 	}, [
 		o,
@@ -441,7 +415,7 @@ var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
 		setResponseFormat: c,
 		setSystemPrompt: u,
 		setTemperature: f,
-		handleSubmit: M(() => {
+		handleSubmit: z(() => {
 			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();
@@ -455,63 +429,72 @@ var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
 			a
 		])
 	};
-}, We = "!dial-small-semi-text !text-primary gap-1", G = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: o, onTemperatureChange: s, responseFormatLabel: c = "Response format", responseFormatHint: l = "Applies to new and existing messages", responseFormatMarkdownLabel: u = "Markdown", responseFormatPlainTextLabel: d = "Plain text", systemPromptLabel: f = "System prompt", systemPromptTooltip: p = "Enter a prompt", temperatureLabel: m = "Temperature", temperatureLabels: h = [
+}, ze = { label: "_label_14i7c_1" }, Be = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: s, onSystemPromptChange: c, onTemperatureChange: l, responseFormatLabel: u = "Response format", responseFormatHint: d = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: m = "System prompt", systemPromptTooltip: h = "Enter a prompt", temperatureLabel: g = "Temperature", temperatureLabels: _ = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: g }) => /* @__PURE__ */ B("div", {
-	className: "flex flex-col gap-4 px-6 py-3",
-	children: [
-		e.responseFormat && /* @__PURE__ */ z(S, {
-			fieldTitle: c,
-			labelClassName: We,
-			elementId: "response-format",
-			orientation: ee.Column,
-			activeRadioButton: t ?? a.Markdown,
-			labelDescription: l,
-			radioButtons: [{
-				id: a.Markdown,
-				name: u
-			}, {
-				id: a.PlainText,
-				name: d
-			}],
-			onChange: (e) => i(e)
-		}),
-		e.systemPrompt && /* @__PURE__ */ z(y, {
-			value: n,
-			placeholder: p,
-			labelProps: {
-				className: We,
-				label: f
-			},
-			onChange: (e) => o(e ?? "")
-		}),
-		e.temperature && /* @__PURE__ */ z(E, {
-			labelProps: {
-				label: m,
-				className: We,
-				caption: g
-			},
-			value: r,
-			min: 0,
-			max: 1,
-			step: .1,
-			labels: h,
-			onChange: s
-		})
-	]
-}), Ge = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: o, initialResponseFormat: c, 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: w, systemPrompt: T, temperature: E, canSubmit: D, setResponseFormat: k, setSystemPrompt: A, setTemperature: ee, handleSubmit: j } = Ue({
+], temperatureHint: v, labelClassName: y = "!dial-small-semi-text", colors: b }) => {
+	let x = a({ "--csf-label-text": b?.labelText }), S = o(y, ze.label, "gap-1");
+	return /* @__PURE__ */ K("div", {
+		className: "flex flex-col gap-4 px-6 pb-3",
+		style: x,
+		children: [
+			e.responseFormat && /* @__PURE__ */ G(C, {
+				id: "response-format",
+				labelProps: {
+					label: u,
+					className: S,
+					caption: d
+				},
+				optionsClassName: "mb-2",
+				orientation: w.Column,
+				value: t ?? i.Markdown,
+				items: [{
+					value: i.Markdown,
+					label: f
+				}, {
+					value: i.PlainText,
+					label: p
+				}],
+				onChange: (e) => s(e)
+			}),
+			e.systemPrompt && /* @__PURE__ */ G(A, {
+				value: n,
+				placeholder: h,
+				resize: !0,
+				labelProps: {
+					className: S,
+					label: m
+				},
+				onChange: (e) => c(e ?? "")
+			}),
+			e.temperature && /* @__PURE__ */ G(O, {
+				labelProps: {
+					label: g,
+					className: S,
+					caption: v
+				},
+				value: r,
+				min: 0,
+				max: 1,
+				step: .1,
+				labels: _,
+				showValue: !0,
+				onChange: l
+			})
+		]
+	});
+}, Ve = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: s, initialResponseFormat: c, 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: S, saveLabel: C = "Apply changes", saveDisabledTooltip: w }) => {
+	let { responseFormat: T, systemPrompt: E, temperature: D, canSubmit: O, setResponseFormat: k, setSystemPrompt: A, setTemperature: ee, handleSubmit: te } = Re({
 		isOpen: e,
-		features: o,
+		features: s,
 		initialResponseFormat: c,
 		initialSystemPrompt: l,
 		initialTemperature: u,
 		onSave: d,
 		onClose: r
 	});
-	return /* @__PURE__ */ B(H, {
+	return /* @__PURE__ */ K(q, {
 		isOpen: e,
 		title: f,
 		closeLabel: i,
@@ -519,11 +502,11 @@ var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
 		onBack: t,
 		backLabel: n,
 		style: a,
-		children: [/* @__PURE__ */ z(G, {
-			features: o,
-			responseFormat: w,
-			systemPrompt: T,
-			temperature: E,
+		children: [/* @__PURE__ */ G(Be, {
+			features: s,
+			responseFormat: T,
+			systemPrompt: E,
+			temperature: D,
 			onResponseFormatChange: k,
 			onSystemPromptChange: A,
 			onTemperatureChange: ee,
@@ -535,24 +518,24 @@ var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
 			systemPromptTooltip: v,
 			temperatureLabel: y,
 			temperatureLabels: b,
-			temperatureHint: x
-		}), /* @__PURE__ */ z("div", {
-			className: s("px-6 py-4 mobile:pb-8"),
-			children: /* @__PURE__ */ z(O, {
-				tooltip: C,
-				hideTooltip: D || !C,
+			temperatureHint: S
+		}), /* @__PURE__ */ G("div", {
+			className: o("px-6 py-4 mobile:pb-8"),
+			children: /* @__PURE__ */ G(j, {
+				tooltip: w,
+				hideTooltip: O || !w,
 				triggerClassName: "w-full",
-				children: /* @__PURE__ */ z(U, {
-					label: S,
-					onClick: j,
-					disabled: !D,
+				children: /* @__PURE__ */ G(x, {
+					label: C,
+					onClick: te,
+					disabled: !O,
 					className: "w-full"
 				})
 			})
 		})]
 	});
-}, K = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: h, saveLabel: g = "Apply changes", saveDisabledTooltip: _ }) => {
-	let { responseFormat: v, systemPrompt: y, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: E } = Ue({
+}, He = { modal: "_modal_kl0h0_1" }, Ue = ({ 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: S = He.modal }) => {
+	let { responseFormat: C, systemPrompt: w, temperature: T, canSubmit: E, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = Re({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -560,195 +543,421 @@ var U = (e) => /* @__PURE__ */ z(x, { ...e }), W = (e) => /* @__PURE__ */ z(p, {
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ z(b, {
+	return /* @__PURE__ */ G(y, {
 		open: !0,
 		header: o,
-		size: A.Sm,
+		titleClassName: s,
+		size: b.Sm,
 		onClose: a,
-		className: "!bg-layer-2",
-		footer: /* @__PURE__ */ z("div", {
+		className: S,
+		footer: /* @__PURE__ */ G("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ z(O, {
-				tooltip: _,
-				hideTooltip: S || !_,
-				children: /* @__PURE__ */ z(U, {
-					label: g,
-					onClick: E,
-					disabled: !S
+			children: /* @__PURE__ */ G(j, {
+				tooltip: v,
+				hideTooltip: E || !v,
+				children: /* @__PURE__ */ G(x, {
+					label: _,
+					onClick: A,
+					disabled: !E
 				})
 			})
 		}),
-		children: /* @__PURE__ */ z(G, {
+		children: /* @__PURE__ */ G(Be, {
 			features: e,
-			responseFormat: v,
-			systemPrompt: y,
-			temperature: x,
-			onResponseFormatChange: C,
-			onSystemPromptChange: w,
-			onTemperatureChange: T,
-			responseFormatLabel: s,
-			responseFormatHint: c,
-			responseFormatMarkdownLabel: l,
-			responseFormatPlainTextLabel: u,
-			systemPromptLabel: d,
-			systemPromptTooltip: f,
-			temperatureLabel: p,
-			temperatureLabels: m,
-			temperatureHint: h
+			responseFormat: C,
+			systemPrompt: w,
+			temperature: T,
+			onResponseFormatChange: D,
+			onSystemPromptChange: O,
+			onTemperatureChange: k,
+			responseFormatLabel: c,
+			responseFormatHint: l,
+			responseFormatMarkdownLabel: u,
+			responseFormatPlainTextLabel: d,
+			systemPromptLabel: f,
+			systemPromptTooltip: p,
+			temperatureLabel: m,
+			temperatureLabels: h,
+			temperatureHint: g
 		})
 	});
 };
-he(K);
-//#endregion
-//#region src/components/AddAttachmentButton/AddAttachmentButton.tsx
-var Ke = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, menuCloseLabel: i, style: o, listClassName: u = "cp-dropdown-overlay !w-[240px]", isDisabled: d = !1, chatSettings: p, extraMenuItems: m }) => {
-	let g = c(), [_, y] = L(!1), [b, x] = L(!1), S = F(() => [
+R(Ue);
+var We = {
+	icon: "_icon_1fv6z_1",
+	selectedIcon: "_selectedIcon_1fv6z_5"
+}, Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: s, title: u = "Tools", items: d, onToolToggle: f, itemLabelClassName: p = "dial-small-text", colors: m }) => /* @__PURE__ */ G(q, {
+	isOpen: e,
+	title: u,
+	closeLabel: i,
+	onClose: r,
+	onBack: t,
+	backLabel: n,
+	style: s,
+	children: /* @__PURE__ */ G("ul", {
+		role: "menu",
+		className: "flex flex-col pb-4",
+		style: a({
+			"--tbs-icon-text": m?.iconText,
+			"--tbs-selected-icon-text": m?.selectedIconText
+		}),
+		children: d.map((e) => /* @__PURE__ */ G("li", {
+			role: "none",
+			children: /* @__PURE__ */ G(l, {
+				type: "button",
+				role: "menuitemcheckbox",
+				"aria-checked": e.isSelected,
+				className: "w-full gap-3 px-4 py-[10px] text-start",
+				iconBefore: /* @__PURE__ */ G("span", {
+					className: o("flex items-center", We.icon),
+					children: e.icon
+				}),
+				iconAfter: e.isSelected ? /* @__PURE__ */ G("span", {
+					className: o("ms-auto", We.selectedIcon),
+					children: /* @__PURE__ */ G(M, {
+						size: c,
+						"aria-hidden": !0
+					})
+				}) : null,
+				label: /* @__PURE__ */ G("span", {
+					className: p,
+					children: e.label
+				}),
+				onClick: () => f(e.id)
+			})
+		}, e.id))
+	})
+}), Ke = {
+	selectedToolIcon: "_selectedToolIcon_r268y_1",
+	toolIcon: "_toolIcon_r268y_5",
+	chevronIcon: "_chevronIcon_r268y_9"
+}, qe = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, menuCloseLabel: l, style: u, listClassName: f = "w-[240px]", isDisabled: h = !1, chatSettings: _, extraMenuItems: v, toolsMenuItems: y = [], onToolToggle: b, toolsMenuTitle: x = "Tools", toolsBackLabel: S = "Back", promptsMenuOverlay: C, promptsMenuTitle: w = "Prompts", promptsBackLabel: T = "Back", colors: E }) => {
+	let D = s(), [O, k] = U(!1), [A, j] = U(!1), [ee, te] = U(!1), [ne, re] = U(!1), [ie, P] = U(!1), F = V(() => a({
+		"--aab-selected-tool-icon": E?.selectedToolIcon,
+		"--aab-tool-icon": E?.toolIcon,
+		"--aab-chevron-icon": E?.chevronIcon
+	}), [
+		E?.selectedToolIcon,
+		E?.toolIcon,
+		E?.chevronIcon
+	]), I = y.length > 0 && b != null, ue = V(() => y.map((e) => ({
+		key: e.id,
+		label: /* @__PURE__ */ K("span", {
+			className: "flex flex-1 items-center gap-2",
+			children: [/* @__PURE__ */ G("span", {
+				className: "flex-1",
+				children: e.label
+			}), e.isSelected && /* @__PURE__ */ G(M, {
+				size: c,
+				style: F,
+				className: Ke.selectedToolIcon,
+				"aria-hidden": !0
+			})]
+		}),
+		icon: /* @__PURE__ */ G("span", {
+			style: F,
+			className: o("flex items-center", Ke.toolIcon),
+			children: e.icon
+		}),
+		onClick: () => b?.(e.id)
+	})), [
+		y,
+		b,
+		F
+	]), L = V(() => [
 		...e == null ? [] : [{
 			key: "attach",
 			label: t,
-			icon: /* @__PURE__ */ z(se, {
-				size: l,
+			icon: /* @__PURE__ */ G(ae, {
+				size: c,
 				"aria-hidden": !0
 			}),
 			onClick: e
 		}],
-		...m ?? [],
-		...p == null ? [] : [{
+		...v ?? [],
+		...I ? [{
+			key: "tools",
+			label: x,
+			icon: /* @__PURE__ */ G(le, {
+				size: c,
+				"aria-hidden": !0
+			}),
+			onClick: D ? () => {
+				te(!0), k(!1);
+			} : () => void 0,
+			...D ? { iconAfter: /* @__PURE__ */ G(N, {
+				size: c,
+				stroke: 1.5,
+				style: F,
+				className: o("rtl:scale-x-[-1]", Ke.chevronIcon),
+				"aria-hidden": !0
+			}) } : { children: ue }
+		}] : [],
+		...C == null ? [] : [{
+			key: "prompts",
+			label: w,
+			icon: /* @__PURE__ */ G(se, {
+				size: c,
+				"aria-hidden": !0
+			}),
+			onClick: D ? () => {
+				re(!0), k(!1);
+			} : () => void 0,
+			...D ? { iconAfter: /* @__PURE__ */ G(N, {
+				size: c,
+				stroke: 1.5,
+				style: F,
+				className: o("rtl:scale-x-[-1]", Ke.chevronIcon),
+				"aria-hidden": !0
+			}) } : {
+				children: [{
+					key: "prompts-panel",
+					label: ""
+				}],
+				renderSubMenu: () => C(() => P(!1))
+			}
+		}],
+		..._ == null ? [] : [{
 			key: "chat-settings",
-			label: p.menuItemLabel ?? "Chat settings",
-			icon: /* @__PURE__ */ z(de, {
-				size: l,
+			label: _.menuItemLabel ?? "Chat settings",
+			icon: /* @__PURE__ */ G(ce, {
+				size: c,
 				"aria-hidden": !0
 			}),
-			iconAfter: g ? /* @__PURE__ */ z(ie, {
-				size: l,
+			iconAfter: D ? /* @__PURE__ */ G(N, {
+				size: c,
 				stroke: 1.5,
-				className: "text-secondary rtl:scale-x-[-1]",
+				style: F,
+				className: o("rtl:scale-x-[-1]", Ke.chevronIcon),
 				"aria-hidden": !0
 			}) : null,
-			onClick: () => x(!0)
+			onClick: () => j(!0)
 		}]
 	], [
 		t,
 		e,
-		p,
-		m,
-		g
+		_,
+		v,
+		D,
+		I,
+		x,
+		ue,
+		C,
+		w,
+		F
 	]);
-	return S.length === 0 ? null : /* @__PURE__ */ z(R, { children: g ? /* @__PURE__ */ B(R, { children: [
-		/* @__PURE__ */ z(v, {
-			icon: /* @__PURE__ */ z(ue, {
-				size: f.LG,
+	if (L.length === 0) return null;
+	let R = /* @__PURE__ */ G(p, {
+		matchReferenceWidth: !1,
+		placement: "bottom-start",
+		listClassName: f,
+		items: L,
+		open: C == null ? void 0 : ie,
+		onOpenChange: C == null ? void 0 : P,
+		children: /* @__PURE__ */ G(g, {
+			icon: /* @__PURE__ */ G(oe, {
+				size: d.LG,
 				"aria-hidden": !0
 			}),
 			"aria-label": n,
 			tooltipProps: { tooltip: n },
-			className: s("size-10 flex-shrink-0", d && "pointer-events-none opacity-50"),
-			onClick: () => y(!0)
+			disabled: h
+		})
+	});
+	return /* @__PURE__ */ G(W, { children: D ? /* @__PURE__ */ K(W, { children: [
+		/* @__PURE__ */ G(g, {
+			icon: /* @__PURE__ */ G(oe, {
+				size: d.LG,
+				"aria-hidden": !0
+			}),
+			"aria-label": n,
+			size: m.Large,
+			tooltipProps: { tooltip: n },
+			disabled: h,
+			onClick: () => k(!0)
 		}),
-		/* @__PURE__ */ z(Be, {
-			isOpen: _,
+		/* @__PURE__ */ G(Le, {
+			isOpen: O,
 			title: r,
-			closeLabel: i,
-			onClose: () => y(!1),
-			style: o,
-			items: S,
+			closeLabel: l,
+			onClose: () => k(!1),
+			style: u,
+			items: L,
 			className: "pb-4",
 			btnTextClassName: "flex-1"
 		}),
-		p != null && /* @__PURE__ */ z(Ge, {
-			isOpen: b,
+		I && /* @__PURE__ */ G(Ge, {
+			isOpen: ee,
 			onBack: () => {
-				x(!1), y(!0);
+				te(!1), k(!0);
 			},
-			backLabel: p.backLabel ?? "Back",
-			onClose: () => x(!1),
-			closeLabel: i,
-			style: o,
-			features: p.features,
-			initialResponseFormat: p.responseFormat ?? a.Markdown,
-			initialSystemPrompt: p.systemPrompt,
-			initialTemperature: p.temperature,
-			onSave: p.onSave,
-			title: p.title,
-			responseFormatLabel: p.responseFormatLabel,
-			responseFormatHint: p.responseFormatHint,
-			responseFormatMarkdownLabel: p.responseFormatMarkdownLabel,
-			responseFormatPlainTextLabel: p.responseFormatPlainTextLabel,
-			systemPromptLabel: p.systemPromptLabel,
-			systemPromptTooltip: p.systemPromptTooltip,
-			temperatureLabel: p.temperatureLabel,
-			temperatureLabels: p.temperatureLabels,
-			temperatureHint: p.temperatureHint,
-			saveLabel: p.saveLabel,
-			saveDisabledTooltip: p.saveDisabledTooltip
-		})
-	] }) : /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(h, {
-		matchReferenceWidth: !1,
-		placement: "bottom-start",
-		listClassName: u,
-		items: S,
-		children: /* @__PURE__ */ z(v, {
-			icon: /* @__PURE__ */ z(ue, {
-				size: f.LG,
-				"aria-hidden": !0
-			}),
-			"aria-label": n,
-			tooltipProps: { tooltip: n },
-			className: "size-10 flex-shrink-0",
-			disabled: d
+			backLabel: S,
+			onClose: () => te(!1),
+			closeLabel: l,
+			style: u,
+			title: x,
+			items: y,
+			onToolToggle: b
+		}),
+		C != null && /* @__PURE__ */ G(q, {
+			isOpen: ne,
+			title: w,
+			closeLabel: l,
+			onBack: () => {
+				re(!1), k(!0);
+			},
+			backLabel: T,
+			onClose: () => re(!1),
+			style: u,
+			children: C(() => re(!1))
+		}),
+		_ != null && /* @__PURE__ */ G(Ve, {
+			isOpen: A,
+			onBack: () => {
+				j(!1), k(!0);
+			},
+			backLabel: _.backLabel ?? "Back",
+			onClose: () => j(!1),
+			closeLabel: l,
+			style: u,
+			features: _.features,
+			initialResponseFormat: _.responseFormat ?? i.Markdown,
+			initialSystemPrompt: _.systemPrompt,
+			initialTemperature: _.temperature,
+			onSave: _.onSave,
+			title: _.title,
+			responseFormatLabel: _.responseFormatLabel,
+			responseFormatHint: _.responseFormatHint,
+			responseFormatMarkdownLabel: _.responseFormatMarkdownLabel,
+			responseFormatPlainTextLabel: _.responseFormatPlainTextLabel,
+			systemPromptLabel: _.systemPromptLabel,
+			systemPromptTooltip: _.systemPromptTooltip,
+			temperatureLabel: _.temperatureLabel,
+			temperatureLabels: _.temperatureLabels,
+			temperatureHint: _.temperatureHint,
+			saveLabel: _.saveLabel,
+			saveDisabledTooltip: _.saveDisabledTooltip
 		})
-	}), p != null && b && /* @__PURE__ */ z(K, {
-		features: p.features,
-		initialResponseFormat: p.responseFormat ?? a.Markdown,
-		initialSystemPrompt: p.systemPrompt,
-		initialTemperature: p.temperature,
-		onSave: p.onSave,
-		onClose: () => x(!1),
-		title: p.title,
-		responseFormatLabel: p.responseFormatLabel,
-		responseFormatHint: p.responseFormatHint,
-		responseFormatMarkdownLabel: p.responseFormatMarkdownLabel,
-		responseFormatPlainTextLabel: p.responseFormatPlainTextLabel,
-		systemPromptLabel: p.systemPromptLabel,
-		systemPromptTooltip: p.systemPromptTooltip,
-		temperatureLabel: p.temperatureLabel,
-		temperatureLabels: p.temperatureLabels,
-		temperatureHint: p.temperatureHint,
-		saveLabel: p.saveLabel,
-		saveDisabledTooltip: p.saveDisabledTooltip
+	] }) : /* @__PURE__ */ K(W, { children: [R, _ != null && A && /* @__PURE__ */ G(Ue, {
+		features: _.features,
+		initialResponseFormat: _.responseFormat ?? i.Markdown,
+		initialSystemPrompt: _.systemPrompt,
+		initialTemperature: _.temperature,
+		onSave: _.onSave,
+		onClose: () => j(!1),
+		title: _.title,
+		responseFormatLabel: _.responseFormatLabel,
+		responseFormatHint: _.responseFormatHint,
+		responseFormatMarkdownLabel: _.responseFormatMarkdownLabel,
+		responseFormatPlainTextLabel: _.responseFormatPlainTextLabel,
+		systemPromptLabel: _.systemPromptLabel,
+		systemPromptTooltip: _.systemPromptTooltip,
+		temperatureLabel: _.temperatureLabel,
+		temperatureLabels: _.temperatureLabels,
+		temperatureHint: _.temperatureHint,
+		saveLabel: _.saveLabel,
+		saveDisabledTooltip: _.saveDisabledTooltip
 	})] }) });
-}, q = {
-	container: "_container_8j81i_1",
-	containerError: "_containerError_8j81i_14",
-	waveformCanvas: "_waveformCanvas_8j81i_18",
-	timer: "_timer_8j81i_22",
-	stopRecordingIcon: "_stopRecordingIcon_8j81i_28",
-	recordingDot: "_recordingDot_8j81i_42",
-	"recording-pulse": "_recording-pulse_8j81i_1"
-}, qe = 3, Je = 4, J = 200, Ye = (e) => `${String(Math.floor(e / 60)).padStart(2, "0")}:${String(e % 60).padStart(2, "0")}`, Xe = ({ state: e, analyserNodeRef: t, elapsedSeconds: n, errorMessage: r, onStop: i, onDiscard: a, stopLabel: o = "Stop recording", discardLabel: c = "Discard recording", timerLabel: l = "Recording time", style: u, className: d }) => {
-	let p = I(null), m = I(new Float32Array(J)), h = I(0), g = I(0), y = e === Pe.Recording, b = e === Pe.Error, x = M((e) => {
+}, J = {
+	chip: "_chip_1gu87_1",
+	chipIcon: "_chipIcon_1gu87_6",
+	chipText: "_chipText_1gu87_10",
+	chipClose: "_chipClose_1gu87_14"
+}, Je = (e) => `${e} tool${e === 1 ? "" : "s"}`, Ye = (e) => `Remove ${e}`, Xe = ({ items: e, onToolToggle: t, isMobile: n, countLabel: r = Je, removeLabel: i = Ye, typography: s, colors: l }) => {
+	let u = e.filter((e) => e.isSelected);
+	if (u.length === 0) return null;
+	let d = a({
+		"--ci-chip-bg": l?.chipBg,
+		"--ci-chip-border": l?.chipBorder,
+		"--ci-chip-icon": l?.chipIcon,
+		"--ci-chip-text": l?.chipText,
+		"--ci-chip-close": l?.chipClose,
+		"--ci-chip-close-hover": l?.chipCloseHover
+	});
+	if (n) {
+		let e = u.length === 1, t = e ? u[0].icon : /* @__PURE__ */ G(le, {
+			size: c,
+			"aria-hidden": !0
+		}), n = e ? u[0].label : r(u.length);
+		return /* @__PURE__ */ G("div", {
+			className: "flex flex-wrap items-center gap-2",
+			style: d,
+			children: /* @__PURE__ */ K("div", {
+				className: o(J.chip, "flex min-w-0 items-center gap-1.5 rounded-full border px-2 py-1"),
+				children: [/* @__PURE__ */ G("span", {
+					className: o(J.chipIcon, "shrink-0"),
+					"aria-hidden": !0,
+					children: t
+				}), /* @__PURE__ */ G("span", {
+					className: o(J.chipText, s?.fontClassName || "dial-small-paragraph-text", "truncate"),
+					children: n
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ G("div", {
+		className: "flex flex-wrap items-center gap-2",
+		style: d,
+		children: u.map((e) => /* @__PURE__ */ K("div", {
+			className: o(J.chip, "flex items-center gap-1.5 rounded-full border py-1 pe-1 ps-2"),
+			children: [
+				/* @__PURE__ */ G("span", {
+					className: J.chipIcon,
+					"aria-hidden": !0,
+					children: e.icon
+				}),
+				/* @__PURE__ */ G("span", {
+					className: o(J.chipText, s?.fontClassName || "dial-small-paragraph-text"),
+					children: e.label
+				}),
+				/* @__PURE__ */ G("button", {
+					type: "button",
+					onClick: () => t(e.id),
+					className: o(J.chipClose, "flex items-center rounded p-0.5 transition-colors"),
+					"aria-label": i(e.label),
+					children: /* @__PURE__ */ G(I, {
+						size: 12,
+						"aria-hidden": !0
+					})
+				})
+			]
+		}, e.id))
+	});
+}, Y = {
+	wrapper: "_wrapper_10e5r_1",
+	wrapperDisabled: "_wrapperDisabled_10e5r_8",
+	textarea: "_textarea_10e5r_13",
+	modelSelectorButton: "_modelSelectorButton_10e5r_24",
+	modelSelectorCaret: "_modelSelectorCaret_10e5r_24",
+	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_10e5r_33"
+}, X = {
+	wrapperError: "_wrapperError_129ri_1",
+	waveformCanvas: "_waveformCanvas_129ri_5",
+	recordingDot: "_recordingDot_129ri_19",
+	"recording-pulse": "_recording-pulse_129ri_1"
+}, Ze = 3, Qe = 4, $e = 200, et = ({ state: e, analyserNodeRef: t, errorMessage: n, onStop: r, onDiscard: i, stopLabel: a = "Stop recording", discardLabel: s = "Discard recording", style: c, className: l }) => {
+	let u = H(null), f = H(new Float32Array($e)), p = H(0), m = H(0), _ = e === je.Recording, v = e === je.Error, y = z((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 / Je)), J - 1), a = h.current, o = g.current;
+		let i = Math.min(Math.max(1, Math.floor(n / Qe)), $e - 1), a = p.current, o = m.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) % J + J) % J, o = m.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
-			t.fillRect(e * Je, (r - c) / 2, qe, c);
+			let n = ((a - i + e) % $e + $e) % $e, o = f.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
+			t.fillRect(e * Qe, (r - c) / 2, Ze, c);
 		}
 		t.restore();
 	}, []);
-	N(() => {
-		if (!y) return;
-		let e = p.current;
+	B(() => {
+		if (!_) return;
+		let e = u.current;
 		if (!e) return;
-		m.current.fill(0), h.current = 0, g.current = 0;
+		f.current.fill(0), p.current = 0, m.current = 0;
 		let n, r = () => {
-			if (g.current += 1, g.current >= Je) {
-				g.current -= Je;
+			if (m.current += 1, m.current >= Qe) {
+				m.current -= Qe;
 				let e = t.current;
 				if (e) {
 					let t = new Uint8Array(e.frequencyBinCount);
@@ -758,208 +967,198 @@ var Ke = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, men
 						let r = (t[e] - 128) / 128;
 						n += r * r;
 					}
-					m.current[h.current % J] = Math.sqrt(n / t.length), h.current++;
+					f.current[p.current % $e] = Math.sqrt(n / t.length), p.current++;
 				}
 			}
-			x(e), n = requestAnimationFrame(r);
+			y(e), n = requestAnimationFrame(r);
 		};
 		return n = requestAnimationFrame(r), () => {
 			cancelAnimationFrame(n);
 		};
 	}, [
-		y,
+		_,
 		t,
-		x
-	]), N(() => {
-		let e = p.current;
+		y
+	]), B(() => {
+		let e = u.current;
 		if (!e) return;
 		let t = new ResizeObserver(() => {
-			x(e);
+			y(e);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [x]);
-	let S = /* @__PURE__ */ B("div", {
+	}, [y]);
+	let b = /* @__PURE__ */ K("div", {
 		className: "flex flex-shrink-0 items-center justify-end gap-1",
-		children: [/* @__PURE__ */ z(v, {
-			icon: /* @__PURE__ */ z(fe, {
-				size: f.LG,
+		children: [/* @__PURE__ */ G(g, {
+			icon: /* @__PURE__ */ G(I, {
+				size: d.LG,
 				"aria-hidden": !0
 			}),
-			"aria-label": c,
-			className: "size-10 flex-shrink-0",
-			onClick: a
-		}), y && /* @__PURE__ */ z(v, {
-			icon: /* @__PURE__ */ z(ce, {
-				size: f.LG,
-				className: q.stopRecordingIcon,
+			"aria-label": s,
+			onClick: i
+		}), _ && /* @__PURE__ */ G(S, {
+			icon: /* @__PURE__ */ G(P, {
+				size: d.LG,
 				"aria-hidden": !0
 			}),
-			"aria-label": o,
-			className: "size-10 flex-shrink-0",
-			onClick: i
+			onClick: () => r?.(),
+			"aria-label": a
 		})]
 	});
-	return /* @__PURE__ */ B("div", {
-		className: d,
-		children: [/* @__PURE__ */ B("div", {
-			style: u,
-			className: s(q.container, "flex min-h-[56px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border px-3 desktop:flex-row desktop:items-center desktop:gap-2 desktop:py-2", b && q.containerError),
-			children: [/* @__PURE__ */ B("div", {
-				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [y && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z("span", {
-					className: q.recordingDot,
+	return /* @__PURE__ */ K("div", {
+		className: l,
+		children: [/* @__PURE__ */ K("div", {
+			style: c,
+			className: o(Y.wrapper, "flex min-h-[64px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border px-3 shadow-md desktop:flex-row desktop:items-center desktop:gap-2 desktop:py-2", v && X.wrapperError),
+			children: [/* @__PURE__ */ K("div", {
+				className: "flex min-w-0 flex-1 items-center gap-3",
+				children: [_ && /* @__PURE__ */ G("span", {
+					className: o(X.recordingDot, "pointer-events-none block size-[8px] rounded-3xl"),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ z("span", {
-					className: s(q.timer, "flex-shrink-0"),
-					"aria-label": l,
-					children: Ye(n)
-				})] }), /* @__PURE__ */ z("canvas", {
-					ref: p,
+				}), /* @__PURE__ */ G("canvas", {
+					ref: u,
 					height: 32,
-					className: s(q.waveformCanvas, "h-8 min-w-0 flex-1 desktop:h-6")
+					className: o(X.waveformCanvas, "h-8 min-w-0 flex-1 desktop:h-6")
 				})]
-			}), S]
-		}), b && r && /* @__PURE__ */ z(_, {
-			text: r,
+			}), b]
+		}), v && n && /* @__PURE__ */ G(h, {
+			text: n,
 			className: "mt-1 px-1"
 		})]
 	});
-}, Y = {
-	wrapper: "_wrapper_1q2nu_2",
-	wrapperDisabled: "_wrapperDisabled_1q2nu_15",
-	textarea: "_textarea_1q2nu_20",
-	stopIcon: "_stopIcon_1q2nu_34",
-	modelSelectorButton: "_modelSelectorButton_1q2nu_38",
-	modelSelectorCaret: "_modelSelectorCaret_1q2nu_38",
-	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_1q2nu_44",
-	sendButton: "_sendButton_1q2nu_55",
-	sendButtonEnter: "_sendButtonEnter_1q2nu_1",
-	sendButtonExiting: "_sendButtonExiting_1q2nu_55",
-	sendButtonExit: "_sendButtonExit_1q2nu_55"
-}, Ze = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", title: r, isExiting: i = !1 }) => /* @__PURE__ */ z(O, {
-	tooltip: r,
-	hideTooltip: !r,
-	children: /* @__PURE__ */ z("button", {
-		className: s("flex size-[32px] cursor-pointer items-center justify-center rounded-full disabled:cursor-not-allowed", Y.sendButton, i && Y.sendButtonExiting),
-		"aria-label": n,
-		onClick: () => e?.(),
-		type: "button",
-		disabled: t,
-		"aria-hidden": i,
-		children: /* @__PURE__ */ z(te, {
-			size: f.LG,
-			className: "rtl:scale-x-[-1]"
-		})
-	})
-}), Qe = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ z("button", {
-	className: s("flex cursor-pointer items-center justify-center disabled:cursor-not-allowed"),
-	"aria-label": t,
+}, tt = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", isExiting: r = !1 }) => /* @__PURE__ */ G(S, {
+	"aria-label": n,
 	onClick: () => e?.(),
-	type: "button",
-	children: /* @__PURE__ */ z(le, {
-		size: f.LG,
-		className: Y.stopIcon
+	disabled: t,
+	"aria-hidden": r,
+	icon: /* @__PURE__ */ G(te, {
+		size: d.LG,
+		className: "rtl:scale-x-[-1]"
 	})
-}), $e = ({ size: e = 20 }) => /* @__PURE__ */ z(w, {
-	variant: T.Circular,
+}), nt = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ G(k, {
+	icon: /* @__PURE__ */ G(F, { size: d.LG }),
+	onClick: () => e?.(),
+	"aria-label": t
+}), Z = ({ size: e = 20 }) => /* @__PURE__ */ G(E, {
+	variant: D.Circular,
 	width: e,
 	height: e,
 	active: !0
-}), et = ({ loadingLabel: e }) => /* @__PURE__ */ B("span", {
+}), rt = ({ loadingLabel: e }) => /* @__PURE__ */ K("span", {
 	className: "flex min-w-0 flex-1 items-center",
-	children: [/* @__PURE__ */ z(w, {
-		variant: T.Text,
+	children: [/* @__PURE__ */ G(E, {
+		variant: D.Text,
 		width: "100%",
 		height: 16,
 		active: !0
-	}), e && /* @__PURE__ */ z("span", {
+	}), e && /* @__PURE__ */ G("span", {
 		className: "sr-only",
 		children: e
 	})]
-}), tt = ({ loadingLabel: e }) => /* @__PURE__ */ z("div", {
+}), it = ({ loadingLabel: e }) => /* @__PURE__ */ G("div", {
 	role: "status",
 	"aria-label": e,
-	children: Array.from({ length: 7 }).map((e, t) => /* @__PURE__ */ B("div", {
+	children: Array.from({ length: 7 }).map((e, t) => /* @__PURE__ */ K("div", {
 		className: "flex h-11 items-center gap-3 px-4",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ z($e, {}), /* @__PURE__ */ z(et, {})]
+		children: [/* @__PURE__ */ G(Z, {}), /* @__PURE__ */ G(rt, {})]
 	}, t))
-}), nt = (e) => e.displayName ?? e.id, rt = (e, t) => {
+}), at = (e) => e.displayName ?? e.id, ot = (e, t) => {
 	let n = t.trim().toLowerCase();
-	return n ? e.filter((e) => nt(e).toLowerCase().includes(n)) : e;
-}, it = (e, t, r, i = 18, a) => /* @__PURE__ */ z(n, {
+	return n ? e.filter((e) => at(e).toLowerCase().includes(n)) : e;
+}, st = (e, t, r, i = 18, a) => /* @__PURE__ */ G(n, {
 	src: e,
 	size: i,
 	labels: { tooltip: a },
 	initialsName: r
-}), at = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: i, searchHeaderClassName: a = "bg-layer-0" }) => {
-	let [o, c] = L(""), l = F(() => e?.find((e) => e.id === t), [e, t]), u = i?.loading !== void 0, d = F(() => u ? /* @__PURE__ */ z($e, { size: f.LG }) : it(l?.iconUrl, l?.type, l?.displayName ?? l?.id ?? "", f.LG), [u, l]), p = l?.displayName ?? l?.id;
+}), ct = {
+	searchHeader: "_searchHeader_1tt5t_1",
+	selectedItem: "_selectedItem_1tt5t_5",
+	selectedItemCheck: "_selectedItemCheck_1tt5t_9"
+}, lt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, searchHeaderClassName: i = ct.searchHeader, selectedItemClassName: s = ct.selectedItem, selectedItemCheckClassName: c = ct.selectedItemCheck, colors: l }) => {
+	let [u, f] = U(""), p = V(() => e?.find((e) => e.id === t), [e, t]), h = r?.loading !== void 0, g = !h && !p && !!t, v = V(() => h ? /* @__PURE__ */ G(Z, { size: d.LG }) : st(p?.iconUrl, p?.type, p?.displayName ?? p?.id ?? "", d.LG, g ? r?.unavailableTooltip ?? "This deployment is no longer available" : void 0), [
+		h,
+		p,
+		g,
+		r?.unavailableTooltip
+	]), y = p?.displayName ?? p?.id;
 	return {
-		selectorIcon: d,
-		selectorAriaLabel: p ? `${i?.ariaLabel ?? "Select model"}: ${p}` : i?.ariaLabel ?? "Select model",
-		selectedLabel: p,
-		menuItems: F(() => {
-			if (u) return Array.from({ length: 7 }, (e, t) => ({
+		selectorIcon: v,
+		selectorAriaLabel: y ? `${r?.ariaLabel ?? "Select model"}: ${y}` : r?.ariaLabel ?? "Select model",
+		selectedLabel: y,
+		menuItems: V(() => {
+			if (h) return Array.from({ length: 7 }, (e, t) => ({
 				key: `__loading-${t}`,
-				icon: /* @__PURE__ */ z($e, {}),
-				label: /* @__PURE__ */ z(et, { loadingLabel: t === 0 ? i?.loading : void 0 }),
+				icon: /* @__PURE__ */ G(Z, {}),
+				label: /* @__PURE__ */ G(rt, { loadingLabel: t === 0 ? r?.loading : void 0 }),
 				disabled: !0
 			}));
 			if (!e || e.length === 0) {
-				let e = i?.error ?? i?.empty;
+				let e = r?.error ?? r?.empty;
 				return e ? [{
 					key: "__state",
 					label: e,
 					disabled: !0
 				}] : [];
 			}
-			return rt(e, o).map((e) => {
-				let i = e.id === t;
+			return ot(e, u).map((e) => {
+				let r = e.id === t;
 				return {
 					key: e.id,
-					label: /* @__PURE__ */ B("span", {
+					label: /* @__PURE__ */ K("span", {
 						className: "flex w-full items-center justify-between gap-2",
-						children: [/* @__PURE__ */ z(r, {
-							text: nt(e),
-							query: o,
+						style: a({ "--ms-selected-item-check": l?.selectedItemCheck }),
+						children: [/* @__PURE__ */ G(_, {
+							text: at(e),
+							query: u,
 							maxLines: 1
-						}), i && /* @__PURE__ */ z(Ve, { gradientId: "ms-check-grad" })]
+						}), r && /* @__PURE__ */ G(M, {
+							size: d.SM,
+							stroke: 2,
+							className: c,
+							"aria-hidden": !0
+						})]
 					}),
-					icon: it(e.iconUrl, e.type, e.displayName ?? e.id),
+					icon: st(e.iconUrl, e.type, e.displayName ?? e.id),
 					onClick: () => n?.(e.id),
-					className: i ? "bg-accent-primary-alpha" : void 0
+					className: r ? s : void 0
 				};
 			});
 		}, [
 			e,
+			h,
 			u,
-			o,
 			t,
-			i,
-			n
+			r,
+			n,
+			s,
+			c,
+			l?.selectedItemCheck
 		]),
-		menuHeader: F(() => !u && e && e.length > 0 ? /* @__PURE__ */ z("div", {
-			className: s("sticky top-0 z-10 pb-1 pe-2 pt-2", a),
-			children: /* @__PURE__ */ z(C, {
-				value: o,
-				placeholder: i?.searchPlaceholder ?? "Search",
-				size: k.Small,
+		menuHeader: V(() => !h && e && e.length > 0 ? /* @__PURE__ */ G("div", {
+			style: a({ "--ms-search-header-bg": l?.searchHeaderBackground }),
+			className: o("sticky top-0 z-10 pb-1 pe-2 pt-2", i),
+			children: /* @__PURE__ */ G(T, {
+				value: u,
+				placeholder: r?.searchPlaceholder ?? "Search",
+				size: m.Small,
 				wrapperClassName: "border-0",
-				onChange: c
+				onChange: (e) => f(e ?? "")
 			})
 		}) : void 0, [
 			e,
+			h,
 			u,
-			o,
+			r,
 			i,
-			a
+			l?.searchHeaderBackground
 		]),
 		onOpenChange: (e) => {
-			e || c("");
+			e || f("");
 		}
 	};
-}, X = typeof window < "u" ? ge : N;
-function ot(e) {
+}, ut = typeof window < "u" ? fe : B;
+function dt(e) {
 	if (e !== void 0) switch (typeof e) {
 		case "number": return e;
 		case "string":
@@ -967,15 +1166,15 @@ function ot(e) {
 			break;
 	}
 }
-function st({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
-	let { styleHeight: s, styleWidth: c } = F(() => ({
-		styleHeight: ot(o?.height),
-		styleWidth: ot(o?.width)
-	}), [o?.height, o?.width]), [l, u] = L({
+function ft({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
+	let { styleHeight: s, styleWidth: c } = V(() => ({
+		styleHeight: dt(o?.height),
+		styleWidth: dt(o?.width)
+	}), [o?.height, o?.width]), [l, u] = U({
 		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 X(() => {
+	return ut(() => {
 		if (i === null || d) return;
 		let t = new ResizeObserver((e) => {
 			for (let t of e) {
@@ -995,7 +1194,7 @@ function st({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i
 		i,
 		s,
 		c
-	]), F(() => ({
+	]), V(() => ({
 		height: s ?? l.height,
 		width: c ?? l.width
 	}), [
@@ -1004,26 +1203,26 @@ function st({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i
 		c
 	]);
 }
-function ct(e) {
-	let t = I(() => {
+function pt(e) {
+	let t = H(() => {
 		throw Error("Cannot call during render.");
 	});
-	return X(() => {
+	return ut(() => {
 		t.current = e;
-	}, [e]), M((e) => t.current?.(e), [t]);
+	}, [e]), z((e) => t.current?.(e), [t]);
 }
-var Z = null;
-function lt(e = !1) {
-	if (Z === null || e) {
+var mt = null;
+function ht(e = !1) {
+	if (mt === 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 ? Z = "positive-descending" : (e.scrollLeft = 1, Z = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), Z;
+		return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? mt = "positive-descending" : (e.scrollLeft = 1, mt = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), mt;
 	}
-	return Z;
+	return mt;
 }
-function ut({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
-	if (t === "horizontal" && n) switch (lt()) {
+function gt({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
+	if (t === "horizontal" && n) switch (ht()) {
 		case "negative": return -r;
 		case "positive-descending":
 			if (e) {
@@ -1037,13 +1236,13 @@ function ut({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
 function Q(e, t = "Assertion error") {
 	if (!e) throw console.error(t), Error(t);
 }
-function $(e, t) {
+function _t(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;
 	for (let n in e) if (!Object.is(t[n], e[n])) return !1;
 	return !0;
 }
-function dt({ cachedBounds: e, itemCount: t, itemSize: n }) {
+function vt({ cachedBounds: e, itemCount: t, itemSize: n }) {
 	if (t === 0) return 0;
 	if (typeof n == "number") return t * n;
 	{
@@ -1051,9 +1250,9 @@ function dt({ cachedBounds: e, itemCount: t, itemSize: n }) {
 		return Q(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
 	}
 }
-function ft({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, containerScrollOffset: a, containerSize: o }) {
+function yt({ 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 = dt({
+	let s = vt({
 		cachedBounds: t,
 		itemCount: r,
 		itemSize: i
@@ -1065,7 +1264,7 @@ function ft({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, co
 		default: return a >= u && a <= l ? a : a < u ? u : l;
 	}
 }
-function pt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCount: r, overscanCount: i }) {
+function bt({ 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);
@@ -1084,7 +1283,7 @@ function pt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemC
 		stopIndexOverscan: l
 	};
 }
-function mt({ itemCount: e, itemProps: t, itemSize: n }) {
+function xt({ itemCount: e, itemProps: t, itemSize: n }) {
 	let r = /* @__PURE__ */ new Map();
 	return {
 		get(i) {
@@ -1121,8 +1320,8 @@ function mt({ itemCount: e, itemProps: t, itemSize: n }) {
 		}
 	};
 }
-function ht({ itemCount: e, itemProps: t, itemSize: n }) {
-	return F(() => mt({
+function St({ itemCount: e, itemProps: t, itemSize: n }) {
+	return V(() => xt({
 		itemCount: e,
 		itemProps: t,
 		itemSize: n
@@ -1132,7 +1331,7 @@ function ht({ itemCount: e, itemProps: t, itemSize: n }) {
 		n
 	]);
 }
-function gt({ containerSize: e, itemSize: t }) {
+function Ct({ containerSize: e, itemSize: t }) {
 	let n;
 	switch (typeof t) {
 		case "string":
@@ -1144,21 +1343,21 @@ function gt({ containerSize: e, itemSize: t }) {
 	}
 	return n;
 }
-function _t({ 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 } = st({
+function wt({ 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 } = ft({
 		defaultHeight: r === "vertical" ? n : void 0,
 		defaultWidth: r === "horizontal" ? n : void 0,
 		element: e,
 		mode: r === "vertical" ? "only-height" : "only-width",
 		style: t
-	}), f = I({
+	}), f = H({
 		height: 0,
 		width: 0
-	}), p = r === "vertical" ? u : d, m = gt({
+	}), p = r === "vertical" ? u : d, m = Ct({
 		containerSize: p,
 		itemSize: s
 	});
-	ge(() => {
+	fe(() => {
 		if (typeof c == "function") {
 			let e = f.current;
 			(e.height !== u || e.width !== d) && (c({
@@ -1171,11 +1370,11 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		c,
 		d
 	]);
-	let h = ht({
+	let h = St({
 		itemCount: a,
 		itemProps: o,
 		itemSize: m
-	}), g = M((e) => h.get(e), [h]), [_, v] = L(() => pt({
+	}), g = z((e) => h.get(e), [h]), [_, v] = U(() => bt({
 		cachedBounds: h,
 		containerScrollOffset: 0,
 		containerSize: p,
@@ -1186,7 +1385,7 @@ function _t({ 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 = M(() => dt({
+	}, C = z(() => vt({
 		cachedBounds: h,
 		itemCount: a,
 		itemSize: m
@@ -1194,9 +1393,9 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		h,
 		a,
 		m
-	]), w = M((t) => pt({
+	]), w = z((t) => bt({
 		cachedBounds: h,
-		containerScrollOffset: ut({
+		containerScrollOffset: gt({
 			containerElement: e,
 			direction: r,
 			isRtl: i,
@@ -1214,19 +1413,19 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		a,
 		l
 	]);
-	return X(() => {
+	return ut(() => {
 		v(w((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
 	}, [
 		e,
 		r,
 		w
-	]), X(() => {
+	]), ut(() => {
 		if (!e) return;
 		let t = () => {
 			v((t) => {
-				let { scrollLeft: n, scrollTop: o } = e, s = pt({
+				let { scrollLeft: n, scrollTop: o } = e, s = bt({
 					cachedBounds: h,
-					containerScrollOffset: ut({
+					containerScrollOffset: gt({
 						containerElement: e,
 						direction: r,
 						isRtl: i,
@@ -1236,7 +1435,7 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 					itemCount: a,
 					overscanCount: l
 				});
-				return $(s, t) ? t : s;
+				return _t(s, t) ? t : s;
 			});
 		};
 		return e.addEventListener("scroll", t), () => {
@@ -1252,8 +1451,8 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 	]), {
 		getCellBounds: g,
 		getEstimatedSize: C,
-		scrollToIndex: ct(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
-			let s = ft({
+		scrollToIndex: pt(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
+			let s = yt({
 				align: t,
 				cachedBounds: h,
 				containerScrollOffset: n,
@@ -1263,14 +1462,14 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 				itemSize: m
 			});
 			if (e) {
-				if (s = ut({
+				if (s = gt({
 					containerElement: e,
 					direction: r,
 					isRtl: i,
 					scrollOffset: s
 				}), typeof e.scrollTo != "function") {
 					let e = w(s);
-					$(_, e) || v(e);
+					_t(_, e) || v(e);
 				}
 				return s;
 			}
@@ -1281,30 +1480,30 @@ function _t({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		stopIndexVisible: x
 	};
 }
-function vt(e) {
-	return F(() => e, Object.values(e));
+function $(e) {
+	return V(() => e, Object.values(e));
 }
-function yt(e, t) {
+function Tt(e, t) {
 	let { ariaAttributes: n, style: r, ...i } = e, { ariaAttributes: a, style: o, ...s } = t;
-	return $(n, a) && $(r, o) && $(i, s);
+	return _t(n, a) && _t(r, o) && _t(i, s);
 }
-function bt(e) {
+function Et(e) {
 	return typeof e == "object" && !!e && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
 }
-var xt = "data-react-window-index";
-function St({ 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 = vt(u), h = F(() => he(s, yt), [s]), [g, _] = L(null), v = bt(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = _t({
+var Dt = "data-react-window-index";
+function Ot({ 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 = $(u), h = V(() => R(s, Tt), [s]), [g, _] = U(null), v = Et(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = wt({
 		containerElement: g,
 		containerStyle: f,
 		defaultContainerSize: n,
 		direction: "vertical",
 		itemCount: c,
 		itemProps: m,
-		itemSize: F(() => v ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [v, l]),
+		itemSize: V(() => v ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [v, l]),
 		onResize: i,
 		overscanCount: o
 	});
-	P(r, () => ({
+	de(r, () => ({
 		get element() {
 			return g;
 		},
@@ -1319,12 +1518,12 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 				top: r
 			});
 		}
-	}), [g, x]), X(() => {
+	}), [g, x]), ut(() => {
 		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(xt, n), !0;
+			return e.setAttribute(Dt, n), !0;
 		});
 		if (v) return l.observeRowElements(e);
 	}, [
@@ -1333,7 +1532,7 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		l,
 		S,
 		w
-	]), N(() => {
+	]), B(() => {
 		S >= 0 && w >= 0 && a && a({
 			startIndex: C,
 			stopIndex: T
@@ -1348,11 +1547,11 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		w,
 		T
 	]);
-	let E = F(() => {
+	let E = V(() => {
 		let e = [];
 		if (c > 0) for (let t = S; t <= w; t++) {
 			let n = y(t);
-			e.push(/* @__PURE__ */ me(h, {
+			e.push(/* @__PURE__ */ L(h, {
 				...m,
 				ariaAttributes: {
 					"aria-posinset": t + 1,
@@ -1379,7 +1578,7 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		m,
 		S,
 		w
-	]), D = /* @__PURE__ */ z("div", {
+	]), D = /* @__PURE__ */ G("div", {
 		"aria-hidden": !0,
 		style: {
 			height: b(),
@@ -1387,7 +1586,7 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 			zIndex: -1
 		}
 	});
-	return me(d, {
+	return L(d, {
 		role: "list",
 		...p,
 		className: t,
@@ -1401,119 +1600,131 @@ function St({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		}
 	}, E, e, D);
 }
-var Ct = {
-	divider: "_divider_3wv6u_1",
-	item: "_item_3wv6u_5",
-	itemIcon: "_itemIcon_3wv6u_15",
-	checkIcon: "_checkIcon_3wv6u_19",
-	stateLabel: "_stateLabel_3wv6u_23"
-}, wt = 44, Tt = 8, Et = ({ index: e, style: t, ariaAttributes: n, items: i, selectedDeploymentId: a, labelClassName: o, query: c, onSelect: l }) => {
-	let u = i[e], d = it(u.iconUrl, u.type, u.displayName ?? u.id, f.SM), m = u.id === a;
-	return /* @__PURE__ */ z("div", {
+var kt = {
+	divider: "_divider_1tiyp_1",
+	item: "_item_1tiyp_5",
+	itemIcon: "_itemIcon_1tiyp_15",
+	checkIcon: "_checkIcon_1tiyp_19",
+	stateLabel: "_stateLabel_1tiyp_23"
+}, At = 44, jt = 8, Mt = ({ index: e, style: t, ariaAttributes: n, items: r, selectedDeploymentId: i, labelClassName: a, query: s, onSelect: c }) => {
+	let u = r[e], f = st(u.iconUrl, u.type, u.displayName ?? u.id, d.SM), p = u.id === i;
+	return /* @__PURE__ */ G("div", {
 		style: t,
 		...n,
-		children: /* @__PURE__ */ z(p, {
+		children: /* @__PURE__ */ G(l, {
 			type: "button",
-			className: s(Ct.item, "flex h-full w-full items-center gap-3 px-4"),
-			iconBefore: /* @__PURE__ */ z("span", {
-				className: Ct.itemIcon,
-				children: d
+			className: o(kt.item, "h-full w-full gap-3 px-4"),
+			iconBefore: /* @__PURE__ */ G("span", {
+				className: kt.itemIcon,
+				children: f
 			}),
-			label: /* @__PURE__ */ B("span", {
+			label: /* @__PURE__ */ K("span", {
 				className: "flex flex-1 items-center justify-between gap-2",
-				children: [/* @__PURE__ */ z(r, {
+				children: [/* @__PURE__ */ G(_, {
 					text: u.displayName ?? u.id,
-					query: c,
+					query: s,
 					maxLines: 1,
-					className: s(o, "min-w-0 flex-1 text-start")
-				}), m && /* @__PURE__ */ z(ne, {
-					size: f.SM,
-					className: Ct.checkIcon,
+					className: o(a, "min-w-0 flex-1 text-start")
+				}), p && /* @__PURE__ */ G(M, {
+					size: d.SM,
+					className: kt.checkIcon,
 					"aria-hidden": !0
 				})]
 			}),
-			onClick: () => l(u.id)
+			onClick: () => c(u.id)
 		})
 	});
-}, Dt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: a, selectedDeploymentId: o, onSelect: c, loadingLabel: l, errorLabel: u, emptyLabel: d, style: f, titleClassName: p = "dial-body-semi-text", labelClassName: m = "dial-small-text" }) => {
-	let [h, g] = L("");
-	N(() => {
-		e || g("");
+}, Nt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: s, selectedDeploymentId: c, onSelect: l, loadingLabel: u, errorLabel: d, emptyLabel: f, style: p, titleClassName: h = "dial-body-semi-text", labelClassName: g = "dial-small-text", colors: _ }) => {
+	let [v, y] = U("");
+	B(() => {
+		e || y("");
 	}, [e]);
-	let _ = a && a.length > 0, v = l !== void 0, y = !_ && !v ? u ?? d : void 0, b = _ ? rt(a, h) : [];
-	return /* @__PURE__ */ B(H, {
+	let b = s && s.length > 0, x = u !== void 0, S = !b && !x ? d ?? f : void 0, C = b ? ot(s, v) : [], w = (e) => {
+		l(e), i();
+	}, E = a({
+		"--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
+	});
+	return /* @__PURE__ */ G(q, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: i,
-		style: f,
-		titleClassName: p,
+		style: p,
+		titleClassName: h,
 		className: "max-h-[80dvh]",
-		children: [_ && !v && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z("div", {
-			className: "flex-shrink-0 px-4 py-[10px]",
-			children: /* @__PURE__ */ z(C, {
-				value: h,
-				placeholder: r,
-				size: k.Standard,
-				onChange: g
-			})
-		}), /* @__PURE__ */ z("div", { className: s(Ct.divider, "h-px flex-shrink-0") })] }), v ? /* @__PURE__ */ z(tt, { loadingLabel: l }) : y ? /* @__PURE__ */ z("div", {
-			role: "list",
-			className: s(Ct.stateLabel, m, "px-4 py-4"),
-			children: y
-		}) : /* @__PURE__ */ z(St, {
-			role: "list",
-			className: "overflow-y-auto",
-			style: { height: Math.min(b.length, Tt) * wt },
-			rowComponent: Et,
-			rowCount: b.length,
-			rowHeight: wt,
-			rowProps: {
-				items: b,
-				selectedDeploymentId: o,
-				labelClassName: m,
-				query: h,
-				onSelect: (e) => {
-					c(e), i();
+		colors: _?.shell,
+		children: /* @__PURE__ */ K("div", {
+			className: "contents",
+			style: E,
+			children: [b && !x && /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ G("div", {
+				className: "flex-shrink-0 px-4 py-[10px]",
+				children: /* @__PURE__ */ G(T, {
+					value: v,
+					placeholder: r,
+					size: m.Standard,
+					onChange: (e) => y(e ?? "")
+				})
+			}), /* @__PURE__ */ G("div", { className: o(kt.divider, "h-px flex-shrink-0") })] }), x ? /* @__PURE__ */ G(it, { loadingLabel: u }) : S ? /* @__PURE__ */ G("div", {
+				role: "list",
+				className: o(kt.stateLabel, g, "px-4 py-4"),
+				children: S
+			}) : /* @__PURE__ */ G(Ot, {
+				role: "list",
+				className: "overflow-y-auto",
+				style: { height: Math.min(C.length, jt) * At },
+				rowComponent: Mt,
+				rowCount: C.length,
+				rowHeight: At,
+				rowProps: {
+					items: C,
+					selectedDeploymentId: c,
+					labelClassName: g,
+					query: v,
+					onSelect: w
 				}
-			}
-		})]
+			})]
+		})
 	});
-}, Ot = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isInputDisabled: o = !1, isDisabled: c = !1, style: l, modelPickerOverlay: u, isPickerOpen: d, onPickerToggle: p, onPickerOpenChange: m }) => {
-	let [_, y] = L(!1), { selectorIcon: b, selectorAriaLabel: x, selectedLabel: S, menuItems: C, menuHeader: w, onOpenChange: T } = at({
+}, Pt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isDisabled: s = !1, style: c, modelPickerOverlay: l, isPickerOpen: u, onPickerToggle: h, onPickerOpenChange: _ }) => {
+	let [v, y] = U(!1), { selectorIcon: b, selectorAriaLabel: x, selectedLabel: S, menuItems: C, menuHeader: w, onOpenChange: T } = lt({
 		deployments: e,
 		selectedDeploymentId: t,
 		onDeploymentChange: n,
 		modelSelectorLabels: r
 	});
 	if (!e) return null;
-	let E = i || c ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, D = /* @__PURE__ */ z(re, {
-		size: f.SM,
+	let E = i || s ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, D = /* @__PURE__ */ G(ne, {
+		size: d.SM,
 		className: Y.modelSelectorCaret,
 		"aria-hidden": !0
 	});
-	return a ? /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(O, {
+	return a ? /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ G(j, {
 		tooltip: S,
-		children: /* @__PURE__ */ z(v, {
-			icon: /* @__PURE__ */ B("div", {
+		children: /* @__PURE__ */ G(g, {
+			icon: /* @__PURE__ */ K("div", {
 				className: "flex items-center gap-1",
 				children: [b, D]
 			}),
 			"aria-label": x,
 			onClick: () => {
-				c || y(!0);
+				s || y(!0);
 			},
-			className: s(Y.modelSelectorButton, E)
+			className: o("w-[50px]", Y.modelSelectorButton, E)
 		})
-	}), u ? /* @__PURE__ */ z(H, {
-		isOpen: _,
+	}), l ? /* @__PURE__ */ G(q, {
+		isOpen: v,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
 		onClose: () => y(!1),
-		style: l,
-		children: u(() => y(!1))
-	}) : /* @__PURE__ */ z(Dt, {
-		isOpen: _,
+		style: c,
+		children: l(() => y(!1))
+	}) : /* @__PURE__ */ G(Nt, {
+		isOpen: v,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
 		searchPlaceholder: r?.searchPlaceholder ?? "Search",
@@ -1524,337 +1735,385 @@ var Ct = {
 		loadingLabel: r?.loading,
 		errorLabel: r?.error,
 		emptyLabel: r?.empty,
-		style: l
-	})] }) : u ? /* @__PURE__ */ z(h, {
+		style: c
+	})] }) : l ? /* @__PURE__ */ G(p, {
 		placement: "top-end",
 		matchReferenceWidth: !1,
-		open: d,
-		onOpenChange: m,
+		open: u,
+		onOpenChange: _,
 		trigger: [],
 		outsideClosable: !0,
-		renderOverlay: () => u(() => m?.(!1)),
-		listClassName: "cp-dropdown-overlay !w-[320px]",
-		children: /* @__PURE__ */ z(O, {
+		renderOverlay: () => l(() => _?.(!1)),
+		listClassName: "!w-[368px] !bg-layer-raised",
+		children: /* @__PURE__ */ G(j, {
 			tooltip: S,
-			children: /* @__PURE__ */ B("button", {
+			children: /* @__PURE__ */ K("button", {
 				type: "button",
 				"aria-label": x,
-				className: s("flex items-center justify-center gap-1 rounded-md p-2", Y.modelSelectorButton, o || i || c ? E : void 0, (o || c) && Y.modelSelectorButtonDisabled),
+				"aria-disabled": s || void 0,
+				className: o("flex items-center justify-center gap-1 rounded-full p-2", Y.modelSelectorButton, E, s && Y.modelSelectorButtonDisabled),
 				onClick: () => {
-					!o && !i && !c && p?.();
+					!i && !s && h?.();
 				},
 				children: [b, D]
 			})
 		})
-	}) : /* @__PURE__ */ z("div", {
-		className: s(c && E),
-		"aria-disabled": c || void 0,
-		children: /* @__PURE__ */ z(O, {
+	}) : /* @__PURE__ */ G("div", {
+		className: o(s && E),
+		"aria-disabled": s || void 0,
+		children: /* @__PURE__ */ G(j, {
 			tooltip: S,
-			children: /* @__PURE__ */ z(g, {
+			children: /* @__PURE__ */ G(f, {
 				icon: b,
 				ariaLabel: x,
 				items: C,
 				menuHeader: w,
 				placement: "bottom-end",
 				matchReferenceWidth: !1,
-				listClassName: "cp-dropdown-overlay !w-[240px] !max-h-80",
-				onOpenChange: c ? void 0 : T,
-				size: k.Standard,
+				listClassName: "!w-[240px] !max-h-80",
+				onOpenChange: s ? void 0 : T,
+				size: m.Standard,
 				caretIcon: D,
-				iconClassName: o || c ? E : void 0,
-				buttonClassName: s("bg-transparent", Y.modelSelectorButton, (o || c) && E && Y.modelSelectorButtonDisabled)
+				iconClassName: s ? E : void 0,
+				buttonClassName: o("bg-transparent", Y.modelSelectorButton, s && Y.modelSelectorButtonDisabled)
 			})
 		})
 	});
-}, kt = 160, At = ({ message: e = "", messageRevision: t, onSend: n, onUploadAttachment: r, onStop: i, isStreaming: a = !1, onChange: u, onAttachmentsChange: d, placeholder: p = "Type a message...", ariaLabel: m, attachLabel: h = "Attach file", fileAccept: g, addMenuTitle: _ = "Add", menuTitle: y = "Menu", menuCloseLabel: b = "Close", removeLabel: x, retryLabel: S, sendLabel: C, stopLabel: w, micLabel: T = "Record voice message", stopRecordingLabel: E, discardRecordingLabel: D, timerAriaLabel: O, colors: k, typography: A, className: ee, pendingDropFiles: j = [], onDropFilesConsumed: te, pendingAttachments: ne = [], onPendingAttachmentsConsumed: re, pasteTextThreshold: ie = 4e3, deployments: se, selectedDeploymentId: ce, onDeploymentChange: le, modelSelectorLabels: ue, initialAttachments: de = [], isStacked: fe = !1, hideAddButton: pe = !1, hideAttachFile: me = !1, hideActionBar: he = !1, renderFooterActions: N, isInputDisabled: P = !1, isModelSelectorDisabled: ge = !1, isAudioMessageSupported: _e = !1, sendOnEnter: ve = Re.Enter, prefixAttachments: V = [], onRemovePrefixAttachment: be, chatSettings: xe, autoFocus: Se = !1, messageHistory: Ce, onDialFileSystemClick: Te, dialFileSystemLabel: Ee, validateAttachment: H, onAttachmentClick: De, modelPickerOverlay: Ae, maximumAttachmentsAmount: je, onAttachmentsLimitExceeded: Pe }) => {
-	let Fe = c(), [Ie, ze] = L(!1), Be = Me(Ce), Ve = F(() => o({
-		"--ci-bg": k?.background,
-		"--ci-text": k?.text,
-		"--ci-border": k?.border,
-		"--ci-border-hover": k?.borderHover,
-		"--ci-border-focus": k?.borderFocus,
-		"--ci-placeholder": k?.placeholder,
-		"--ci-shadow": k?.shadow,
-		"--ci-shadow-focus": k?.shadowFocus,
-		"--ci-send-bg": k?.sendBackground,
-		"--ci-send-text": k?.sendText,
-		"--ci-stop-color": k?.stopColor
-	}), [k]), He = F(() => Te ? [{
+}, Ft = 160, It = ({ message: e = "", messageRevision: t, onSend: n, onUploadAttachment: r, onStop: i, isStreaming: l = !1, onChange: u, onAttachmentsChange: f, placeholder: p = "Type a message...", ariaLabel: m, attachLabel: h = "Attach file", fileAccept: g, addMenuTitle: _ = "Add", menuTitle: v = "Menu", menuCloseLabel: y = "Close", removeLabel: b, retryLabel: x, sendLabel: S, stopLabel: C, micLabel: w = "Record voice message", stopRecordingLabel: T, discardRecordingLabel: E, colors: D, typography: O, className: A, pendingDropFiles: j = [], onDropFilesConsumed: ee, pendingAttachments: te = [], onPendingAttachmentsConsumed: M, pasteTextThreshold: ne = 4e3, maxMessageLength: N = 5e4, deployments: ae, selectedDeploymentId: P, onDeploymentChange: F, modelSelectorLabels: oe, initialAttachments: se = [], isStacked: ce = !1, hideAddButton: le = !1, hideAttachFile: I = !1, hideActionBar: ue = !1, renderFooterActions: L, isInputDisabled: R = !1, isModelSelectorDisabled: B = !1, isSendDisabled: de = !1, isAudioMessageSupported: fe = !1, sendOnEnter: pe = Fe.Enter, prefixAttachments: me = [], onRemovePrefixAttachment: he, chatSettings: _e, toolsMenuItems: ve, onToolToggle: ye, toolsMenuTitle: be, toolsBackLabel: Se, toolsChipLabels: Ce, promptsMenuOverlay: q, promptsMenuTitle: we, promptsBackLabel: De, autoFocus: Oe = !1, messageHistory: je, onDialFileSystemClick: Me, dialFileSystemLabel: Ne, validateAttachment: Ie, onAttachmentClick: Le, modelPickerOverlay: Re, maximumAttachmentsAmount: ze, onAttachmentsLimitExceeded: Be, isAttachmentsEnabled: Ve = !0, usageLimitsSlot: He, onMessageTooLong: Ue }) => {
+	let We = s(), [Ge, Ke] = U(!1), J = ke(je), Je = V(() => a({
+		"--ci-bg": D?.background,
+		"--ci-text": D?.text,
+		"--ci-border": D?.border,
+		"--ci-border-focus": D?.borderFocus,
+		"--ci-placeholder": D?.placeholder,
+		"--ci-text-disabled": D?.textDisabled,
+		"--ci-model-selector-caret-color": D?.modelSelectorCaret,
+		"--ci-model-selector-hover-bg": D?.modelSelectorHoverBg,
+		"--ci-model-selector-disabled-color": D?.modelSelectorDisabled,
+		"--ci-voice-error": D?.voiceError,
+		"--ci-voice-waveform": D?.voiceWaveform,
+		"--ci-voice-accent": D?.voiceAccent
+	}), [D]), Ye = V(() => Me ? [{
 		key: "dial-fs",
-		label: Ee ?? "DIAL file system",
-		icon: /* @__PURE__ */ z(ae, {
-			size: l,
+		label: Ne ?? "DIAL file system",
+		icon: /* @__PURE__ */ G(re, {
+			size: c,
 			"aria-hidden": !0
 		}),
-		onClick: Te
-	}] : [], [Te, Ee]), { message: U, setMessage: W, textareaRef: Ue, isMultiLine: We } = Ne({
+		onClick: Me
+	}] : [], [Me, Ne]), { message: X, setMessage: Ze, textareaRef: Qe, isMultiLine: $e } = Ae({
 		messageProp: e,
 		messageRevision: t
-	}), { attachments: G, buildAttachments: Ge, addAttachments: K, resetAttachments: q, handleRemove: qe, handleRetry: Je, handleExpand: J, hasBlockedAttachments: Ye } = Oe({
-		initialAttachments: de,
+	}), { attachments: Z, buildAttachments: rt, addAttachments: it, resetAttachments: at, handleRemove: ot, handleRetry: st, handleExpand: ct, hasBlockedAttachments: lt } = Te({
+		initialAttachments: se,
 		onUploadAttachment: r,
-		onAttachmentsChange: d,
-		validateAttachment: H,
+		onAttachmentsChange: f,
+		validateAttachment: Ie,
 		pendingDropFiles: j,
-		onDropFilesConsumed: te,
-		pendingAttachments: ne,
-		onPendingAttachmentsConsumed: re,
-		onExpandPastedText: M((e) => {
-			W((t) => t ? `${t}\n${e}` : e);
-		}, [W]),
-		maximumAttachmentsAmount: je,
-		baseAttachmentsAmount: V.length,
-		onAttachmentsLimitExceeded: Pe
-	}), { state: $e, analyserNodeRef: et, elapsedSeconds: tt, errorMessage: nt, startRecording: rt, stopRecording: it, discardRecording: at } = Le({ onAttachAudio: M((e) => {
-		K(Ge([e]));
-	}, [K, Ge]) }), X = I(null), ot = I(null), { handlePaste: st } = we(K, ie), ct = U.trim().length > 0 || G.length > 0, Z = ct && !Ye, { shouldRender: lt, isExiting: ut, instanceKey: Q } = ke(!a && ct, kt), $ = fe || G.length > 0 || U.includes("\n") || We, dt = se === void 0 || ce != null, ft = async () => {
-		let e = U, t = G;
-		W(""), Be.reset();
+		onDropFilesConsumed: ee,
+		pendingAttachments: te,
+		onPendingAttachmentsConsumed: M,
+		onExpandPastedText: z((e) => {
+			Ze((t) => t ? `${t}\n${e}` : e);
+		}, [Ze]),
+		maximumAttachmentsAmount: ze,
+		baseAttachmentsAmount: me.length,
+		onAttachmentsLimitExceeded: Be
+	}), { state: ut, analyserNodeRef: dt, errorMessage: ft, startRecording: pt, stopRecording: mt, discardRecording: ht } = Pe({ onAttachAudio: z((e) => {
+		it(rt([e]));
+	}, [it, rt]) }), gt = H(null), Q = H(null), { handlePaste: _t } = xe(it, Ve ? ne : Infinity), vt = z((e) => {
+		if (!Ve) {
+			let t = e.clipboardData.getData("text/plain");
+			t.length >= N && Ue?.(t.length, N);
+		}
+		_t(e);
+	}, [
+		Ve,
+		N,
+		Ue,
+		_t
+	]), yt = X.trim().length > 0 || Z.length > 0, bt = yt && !lt && !de, { shouldRender: xt, isExiting: St, instanceKey: Ct } = Ee(!l && yt, Ft), wt = (ve?.some((e) => e.isSelected) ?? !1) && ye != null, $ = ce || X.includes("\n") || $e || wt, Tt = ae === void 0 || P != null, Et = V(() => fe && !St && !l, [
+		fe,
+		St,
+		l
+	]), Dt = async () => {
+		if (de) return;
+		if (!Ve && X.length >= N) {
+			Ue?.(X.length, N);
+			return;
+		}
+		let e = X, t = Z;
+		Ze(""), J.reset();
 		try {
 			await n?.(e, t), t.forEach((e) => {
-				e.previewUrl && URL.revokeObjectURL(e.previewUrl);
-			}), q([]);
+				e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
+			}), at([]);
 		} catch {
-			W(e), q(t);
+			Ze(e), at(t);
 		}
-	}, pt = (e) => {
-		if (!e.nativeEvent.isComposing && !P && !a && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-			let t = e.currentTarget.selectionStart ?? 0, n = Be.navigate(e.key === "ArrowUp" ? "up" : "down", U, t);
+	}, Ot = (e) => {
+		if (!e.nativeEvent.isComposing && !R && !l && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			let t = e.currentTarget.selectionStart ?? 0, n = J.navigate(e.key === "ArrowUp" ? "up" : "down", X, t);
 			if (n !== null) {
-				e.preventDefault(), W(n);
+				e.preventDefault(), Ze(n);
 				return;
 			}
 		}
-		e.key === "Enter" && (ve === Re.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey) && (e.preventDefault(), !a && Z && dt && !P && ft());
-	}, mt = (e) => {
+		e.key === "Enter" && (pe === Fe.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey) && (e.preventDefault(), !l && bt && Tt && !R && Dt());
+	}, kt = (e) => {
 		let t = Array.from(e.target.files ?? []);
 		if (t.length === 0) return;
-		let n = Ge(t);
-		e.target.value = "", K(n);
+		let n = rt(t);
+		e.target.value = "", it(n);
 	};
-	if ($e !== "idle") return /* @__PURE__ */ z(Xe, {
-		state: $e,
-		analyserNodeRef: et,
-		elapsedSeconds: tt,
-		errorMessage: nt,
-		onStop: it,
-		onDiscard: at,
-		stopLabel: E,
-		discardLabel: D,
-		timerLabel: O,
-		style: Ve,
-		className: ee
+	if (ut !== "idle") return /* @__PURE__ */ G(et, {
+		state: ut,
+		analyserNodeRef: dt,
+		errorMessage: ft,
+		onStop: mt,
+		onDiscard: ht,
+		stopLabel: T,
+		discardLabel: E,
+		style: Je,
+		className: A
 	});
-	let ht = /* @__PURE__ */ z("textarea", {
-		className: s(Y.textarea, A?.fontClassName, "max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent outline-none [field-sizing:content]"),
-		ref: Ue,
-		autoFocus: Se,
-		value: U,
+	let At = /* @__PURE__ */ G("textarea", {
+		className: o(Y.textarea, O?.fontClassName || "dial-body-paragraph-text", "max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent outline-none [field-sizing:content]"),
+		ref: Qe,
+		autoFocus: Oe,
+		value: X,
 		onChange: (e) => {
-			W(e.target.value), Be.notifyChange(), u?.(e.target.value);
+			Ze(e.target.value), J.notifyChange(), u?.(e.target.value);
 		},
-		onKeyDown: pt,
-		onPaste: st,
+		onKeyDown: Ot,
+		onPaste: vt,
 		placeholder: p,
 		"aria-label": m,
-		disabled: P,
+		disabled: R,
 		rows: 1
 	});
-	return /* @__PURE__ */ B("div", {
-		ref: ot,
-		style: Ve,
-		className: s(Y.wrapper, P && Y.wrapperDisabled, "flex min-h-[56px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border", G.length > 6 ? "py-3 ps-3" : "p-3", ee),
-		children: [(V.length > 0 || G.length > 0) && /* @__PURE__ */ z(ye, {
-			attachments: [...V, ...G],
+	return /* @__PURE__ */ K("div", {
+		ref: Q,
+		style: Je,
+		className: o(Y.wrapper, R && Y.wrapperDisabled, "flex min-h-[64px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border shadow-md", "focus-within:outline focus-within:-outline-offset-1 active:outline active:-outline-offset-1", Z.length > 6 ? "py-3 ps-3" : "p-3", A),
+		children: [(me.length > 0 || Z.length > 0) && /* @__PURE__ */ G(ge, {
+			attachments: [...me, ...Z],
 			onRemove: (e) => {
-				V.some((t) => t.id === e) ? be?.(e) : qe(e);
+				me.some((t) => t.id === e) ? he?.(e) : ot(e);
 			},
-			onRetry: Je,
-			onExpand: J,
+			onRetry: st,
+			onExpand: ct,
 			labels: {
-				removeLabel: x,
-				retryLabel: S
+				removeLabel: b,
+				retryLabel: x
 			},
-			onAttachmentClick: De == null ? void 0 : (e) => {
-				let t = [...V, ...G].find((t) => t.id === e);
-				t != null && De(t);
+			onAttachmentClick: Le == null ? void 0 : (e) => {
+				let t = [...me, ...Z].find((t) => t.id === e);
+				t != null && Le(t);
 			}
-		}), he ? $ && ht : /* @__PURE__ */ B("div", {
-			className: s("flex items-center gap-2", $ ? "flex-wrap" : "flex-wrap desktop:flex-nowrap"),
+		}), ue ? $ && At : /* @__PURE__ */ K("div", {
+			className: o("flex items-center gap-2", $ ? "flex-wrap" : "flex-wrap desktop:flex-nowrap"),
 			children: [
-				!pe && /* @__PURE__ */ B("div", {
-					className: s("order-2 flex", !$ && "desktop:order-1"),
-					children: [/* @__PURE__ */ z("input", {
-						ref: X,
+				!le && /* @__PURE__ */ K("div", {
+					className: o("flex", "order-2", !$ && "desktop:order-1"),
+					children: [/* @__PURE__ */ G("input", {
+						ref: gt,
 						type: "file",
 						multiple: !0,
 						accept: g,
 						className: "sr-only",
 						"aria-hidden": !0,
 						tabIndex: -1,
-						onChange: mt
-					}), /* @__PURE__ */ z(Ke, {
-						onAttachClick: me ? void 0 : () => X.current?.click(),
+						onChange: kt
+					}), /* @__PURE__ */ G(qe, {
+						onAttachClick: I ? void 0 : () => gt.current?.click(),
 						attachLabel: h,
 						addMenuTitle: _,
-						menuTitle: y,
-						menuCloseLabel: b,
-						style: Ve,
-						isDisabled: P,
-						chatSettings: xe,
-						extraMenuItems: He
+						menuTitle: v,
+						menuCloseLabel: y,
+						style: Je,
+						isDisabled: R,
+						chatSettings: _e,
+						extraMenuItems: Ye,
+						toolsMenuItems: ve,
+						onToolToggle: ye,
+						toolsMenuTitle: be,
+						toolsBackLabel: Se,
+						promptsMenuOverlay: q,
+						promptsMenuTitle: we,
+						promptsBackLabel: De
 					})]
 				}),
-				/* @__PURE__ */ z("div", {
-					className: s("order-1 flex w-full min-w-0 items-center self-stretch", !$ && "desktop:order-2 desktop:w-auto desktop:flex-1"),
-					children: ht
+				$ && wt && /* @__PURE__ */ G("div", {
+					className: "order-3 min-w-0 flex-1",
+					children: /* @__PURE__ */ G(Xe, {
+						items: ve ?? [],
+						onToolToggle: ye,
+						isMobile: We,
+						countLabel: Ce?.countLabel,
+						removeLabel: Ce?.removeLabel
+					})
+				}),
+				/* @__PURE__ */ G("div", {
+					className: o("order-1 flex w-full min-w-0 items-center self-stretch", !$ && "desktop:order-2 desktop:w-auto desktop:flex-1"),
+					children: At
 				}),
-				/* @__PURE__ */ B("div", {
-					className: s("flex flex-shrink-0 items-center gap-2", "order-3 ms-auto", !$ && "desktop:ms-0"),
-					children: [N ? N({
-						canSend: Z,
-						onSend: ft
-					}) : /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(Ot, {
-						deployments: se,
-						selectedDeploymentId: ce,
-						onDeploymentChange: le,
-						modelSelectorLabels: ue,
-						isStreaming: a,
-						isMobile: Fe,
-						isInputDisabled: P,
-						isDisabled: ge,
-						style: Ve,
-						modelPickerOverlay: Ae,
-						isPickerOpen: Ie,
-						onPickerToggle: () => ze((e) => !e),
-						onPickerOpenChange: ze
-					}), a && i ? /* @__PURE__ */ z(Qe, {
-						onStop: i,
-						ariaLabel: w
-					}) : !a && lt && /* @__PURE__ */ z(Ze, {
-						onSend: ft,
-						isDisabled: !dt || Ye,
-						ariaLabel: C,
-						isExiting: ut
-					}, Q)] }), _e && !ut && /* @__PURE__ */ z(v, {
-						icon: /* @__PURE__ */ z(oe, {
-							size: f.LG,
+				/* @__PURE__ */ K("div", {
+					className: o("flex flex-shrink-0 items-center gap-2", $ && wt ? "order-4" : "order-3", "ms-auto", !$ && "desktop:ms-0"),
+					children: [L ? L({
+						canSend: bt,
+						onSend: Dt
+					}) : /* @__PURE__ */ K(W, { children: [
+						He,
+						/* @__PURE__ */ G(Pt, {
+							deployments: ae,
+							selectedDeploymentId: P,
+							onDeploymentChange: F,
+							modelSelectorLabels: oe,
+							isStreaming: l,
+							isMobile: We,
+							isDisabled: B,
+							style: Je,
+							modelPickerOverlay: Re,
+							isPickerOpen: Ge,
+							onPickerToggle: () => Ke((e) => !e),
+							onPickerOpenChange: Ke
+						}),
+						l && i ? /* @__PURE__ */ G(nt, {
+							onStop: i,
+							ariaLabel: C
+						}) : !l && xt && /* @__PURE__ */ G(tt, {
+							onSend: Dt,
+							isDisabled: !Tt || lt || de,
+							ariaLabel: S,
+							isExiting: St
+						}, Ct)
+					] }), Et && /* @__PURE__ */ G(k, {
+						icon: /* @__PURE__ */ G(ie, {
+							size: d.LG,
 							"aria-hidden": !0
 						}),
-						"aria-label": T,
+						"aria-label": w,
 						className: "size-8 flex-shrink-0",
-						onClick: rt,
-						disabled: P || a
+						onClick: pt,
+						disabled: R || l
 					})]
 				})
 			]
 		})]
 	});
-}, jt = { welcome: "_welcome_n2ph8_1" }, Mt = ({ isStreaming: e = !1, placeholder: t = "Type a prompt or use \"/\" to select one", welcomeText: n, styles: r, className: i, isInputDisabled: a = !1, ...c }) => {
-	let { colors: l, typography: u } = r ?? {};
-	return /* @__PURE__ */ B("div", {
-		style: o({
-			"--ci-root-bg": l?.background,
-			"--ci-welcome-color": l?.welcomeText
-		}),
-		className: s("relative flex w-full flex-col items-center gap-6 px-4 py-5 desktop:p-5", i),
-		children: [n && /* @__PURE__ */ z("h1", {
-			className: s(jt.welcome, "m-0 text-center", u?.welcomeClassName),
+}, Lt = { welcome: "_welcome_n2ph8_1" }, Rt = ({ isStreaming: e = !1, placeholder: t = "Type a prompt or use \"/\" to select one", welcomeText: n, styles: r, className: i, inputClassName: s, isInputDisabled: c = !1, ...l }) => {
+	let { colors: u, typography: d } = r ?? {};
+	return /* @__PURE__ */ K("div", {
+		style: a({ "--ci-welcome-color": u?.welcomeText }),
+		className: o("relative flex w-full flex-col items-center gap-6 px-4 py-5 desktop:p-5", i),
+		children: [n && /* @__PURE__ */ G("h1", {
+			className: o(Lt.welcome, "m-0 text-center", d?.welcomeClassName || "dial-display2-text"),
 			children: n
-		}), /* @__PURE__ */ z("div", {
+		}), /* @__PURE__ */ G("div", {
 			className: "relative w-full max-w-[748px]",
-			children: /* @__PURE__ */ z(At, {
+			children: /* @__PURE__ */ G(It, {
 				placeholder: t,
 				isStreaming: e,
-				isInputDisabled: a,
-				...c,
-				colors: l?.input,
-				typography: u?.input
+				isInputDisabled: c,
+				...l,
+				className: s,
+				colors: u?.input,
+				typography: d?.input
 			})
 		})]
 	});
-}, Nt = ({ message: e, initialAttachments: t = [], onCancel: n, onSave: r, onUploadAttachment: a, cancelLabel: o = "Cancel", saveLabel: c = "Save & Submit", ariaLabel: u, removeLabel: d, retryLabel: f, addMenuTitle: p = "Add", attachLabel: m = "Attach file", menuTitle: h = "Menu", menuCloseLabel: g = "Close", className: _, pendingDropFiles: v, onDropFilesConsumed: y, validateAttachment: b, hideAttachFile: x = !1, fileAccept: S, maximumAttachmentsAmount: C, onAttachmentsLimitExceeded: w, onDialFileSystemClick: T, dialFileSystemLabel: E, pendingAttachments: D, onPendingAttachmentsConsumed: O, onAttachmentClick: k }) => {
-	let A = I(null), [ee, j] = L([]);
-	N(() => {
-		v?.length && (j(v), y?.());
-	}, [v, y]);
-	let [te, ne] = L(e ?? ""), [re, ie] = L([]), [oe, se] = L(t), ce = re.some((e) => e.status === i.Loading || e.status === i.Error), le = (te.trim().length > 0 || re.length > 0 || oe.length > 0) && !ce, ue = (e) => {
-		se((t) => t.filter((t) => t.id !== e));
-	}, de = M((e, t) => {
-		r(e, oe, t);
-	}, [oe, r]), fe = () => {
-		le && de(te, re);
-	}, pe = M(() => j([]), []), me = M((e) => {
+}, zt = ({ message: e, initialAttachments: t = [], onCancel: n, onSave: i, onUploadAttachment: a, cancelLabel: s = "Cancel", saveLabel: l = "Save & Submit", ariaLabel: u, removeLabel: d, retryLabel: f, addMenuTitle: p = "Add", attachLabel: m = "Attach file", menuTitle: h = "Menu", menuCloseLabel: g = "Close", className: _, pendingDropFiles: y, onDropFilesConsumed: b, validateAttachment: S, isAttachmentsEnabled: C, hideAttachFile: w = !1, fileAccept: T, maximumAttachmentsAmount: E, onAttachmentsLimitExceeded: D, onDialFileSystemClick: O, dialFileSystemLabel: k, pendingAttachments: A, onPendingAttachmentsConsumed: j, onAttachmentClick: ee, pasteTextThreshold: te, maxMessageLength: M = 5e4, onMessageTooLong: ne }) => {
+	let N = H(null), [ie, ae] = U([]);
+	B(() => {
+		y?.length && (ae(y), b?.());
+	}, [y, b]);
+	let [P, F] = U(e ?? ""), [oe, se] = U([]), [ce, le] = U(t), I = oe.some((e) => e.status === r.Loading || e.status === r.Error), ue = (P.trim().length > 0 || oe.length > 0 || ce.length > 0) && !I, L = (e) => {
+		le((t) => t.filter((t) => t.id !== e));
+	}, R = z((e, t) => {
+		i(e, ce, t);
+	}, [ce, i]), de = () => {
+		if (ue) {
+			if (!C && P.length >= M) {
+				ne?.(P.length, M);
+				return;
+			}
+			R(P, oe);
+		}
+	}, fe = z(() => ae([]), []), pe = z((e) => {
 		let t = Array.from(e.target.files ?? []);
-		t.length !== 0 && (e.target.value = "", j(t));
-	}, []), he = F(() => T ? [{
+		t.length !== 0 && (e.target.value = "", ae(t));
+	}, []), me = V(() => O ? [{
 		key: "dial-fs",
-		label: E ?? "DIAL file system",
-		icon: /* @__PURE__ */ z(ae, {
-			size: l,
+		label: k ?? "DIAL file system",
+		icon: /* @__PURE__ */ G(re, {
+			size: c,
 			"aria-hidden": !0
 		}),
-		onClick: T
-	}] : [], [T, E]);
-	return /* @__PURE__ */ B("div", {
-		className: s("flex w-full flex-col gap-2", _),
-		children: [/* @__PURE__ */ z(At, {
+		onClick: O
+	}] : [], [O, k]);
+	return /* @__PURE__ */ K("div", {
+		className: o("flex w-full flex-col gap-2", _),
+		children: [/* @__PURE__ */ G(It, {
 			message: e,
 			ariaLabel: u,
 			isStacked: !0,
 			hideActionBar: !0,
-			pendingDropFiles: ee,
-			onDropFilesConsumed: pe,
-			onSend: de,
+			pendingDropFiles: ie,
+			onDropFilesConsumed: fe,
+			onSend: R,
 			onUploadAttachment: a,
-			onChange: ne,
-			onAttachmentsChange: ie,
+			onChange: F,
+			onAttachmentsChange: se,
 			removeLabel: d,
 			retryLabel: f,
 			className: "max-w-full",
-			prefixAttachments: oe,
-			onRemovePrefixAttachment: ue,
-			validateAttachment: b,
-			maximumAttachmentsAmount: C,
-			onAttachmentsLimitExceeded: w,
-			pendingAttachments: D,
-			onPendingAttachmentsConsumed: O,
-			onAttachmentClick: k
-		}), /* @__PURE__ */ B("div", {
+			prefixAttachments: ce,
+			onRemovePrefixAttachment: L,
+			validateAttachment: S,
+			isAttachmentsEnabled: C,
+			maximumAttachmentsAmount: E,
+			onAttachmentsLimitExceeded: D,
+			pendingAttachments: A,
+			onPendingAttachmentsConsumed: j,
+			onAttachmentClick: ee,
+			pasteTextThreshold: te,
+			maxMessageLength: M,
+			onMessageTooLong: ne
+		}), /* @__PURE__ */ K("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ z("div", {
+			children: [/* @__PURE__ */ G("div", {
 				className: "flex",
-				children: !x && /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z("input", {
-					ref: A,
+				children: !w && /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ G("input", {
+					ref: N,
 					type: "file",
 					multiple: !0,
-					accept: S,
+					accept: T,
 					className: "sr-only",
 					"aria-hidden": !0,
 					tabIndex: -1,
-					onChange: me
-				}), /* @__PURE__ */ z(Ke, {
-					onAttachClick: () => A.current?.click(),
+					onChange: pe
+				}), /* @__PURE__ */ G(qe, {
+					onAttachClick: () => N.current?.click(),
 					attachLabel: m,
 					addMenuTitle: p,
 					menuTitle: h,
 					menuCloseLabel: g,
-					extraMenuItems: he
+					extraMenuItems: me
 				})] })
-			}), /* @__PURE__ */ B("div", {
+			}), /* @__PURE__ */ K("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ z(W, {
-					label: o,
+				children: [/* @__PURE__ */ G(v, {
+					label: s,
 					onClick: n
-				}), /* @__PURE__ */ z(U, {
-					label: c,
-					onClick: fe,
-					disabled: !le
+				}), /* @__PURE__ */ G(x, {
+					label: l,
+					onClick: de,
+					disabled: !ue
 				})]
 			})]
 		})]
 	});
 };
 //#endregion
-export { _e as AttachmentCard, ve as AttachmentGroup, V as AttachmentTray, H as BottomSheetShell, K as ChatSettingsModal, Mt as ConversationInput, Nt as EditMessageInput, be as FileDndOverlay, At as Input, Re as SendOnEnter, Ce as getAttachmentIcon };
+export { pe as AttachmentCard, me as AttachmentGroup, he as AttachmentTray, q as BottomSheetShell, Ue as ChatSettingsModal, Rt as ConversationInput, zt as EditMessageInput, _e as FileDndOverlay, It as Input, Fe as SendOnEnter, be as getAttachmentIcon };