@epam/ai-dial-conversation-input 1.1.0-dev.75 → 1.1.0-dev.78

package/index.js

@@ -1,88 +1,101 @@
 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, DIAL_ICON_SIZE as u, DialCloseButton as d, DialDropdown as f, DialDropdownIcon as p, DialErrorText as m, DialGhostIconButton as h, DialInput as g, DialPopup as _, DialRadioGroup as v, DialSearch as y, DialSkeleton as b, DialSkeletonVariant as x, DialSlider as S, DialTag as C, DialTooltip as w, ElementSize as T, Highlight as E, NeutralButton as D, PopupSize as O, PrimaryButton as k, PrimaryIconButton as A, RadioGroupOrientation as ee } from "@epam/ai-dial-ui-kit";
-import { IconArrowLeft as te, IconArrowNarrowRight as ne, IconCheck as re, IconChevronDown as ie, IconChevronRight as j, IconFile as ae, IconMicrophone as oe, IconPaperclip as M, IconPlayerStopFilled as se, IconPlaystationSquare as ce, IconPlus as le, IconSettings as ue, IconTool as de, IconX as fe } from "@tabler/icons-react";
-import { createPortal as pe } from "react-dom";
-import { createElement as me, memo as N, useCallback as P, useEffect as F, useImperativeHandle as he, useLayoutEffect as I, useMemo as L, useRef as R, useState as z } from "react";
+import { BASE_ICON_SIZE as c, Button as l, DIAL_ICON_SIZE as u, DialCloseButton as d, DialDropdown as f, DialDropdownIcon as p, DialErrorText as m, DialGhostIconButton as h, DialInput as g, DialPopup as _, DialRadioGroup as v, DialSearch as y, DialSkeleton as b, DialSkeletonVariant as x, DialSlider as S, DialTag as C, DialTooltip as w, ElementSize as T, GhostIconButton as E, Highlight as D, NeutralButton as O, PopupSize as k, PrimaryButton as A, PrimaryIconButton as ee, RadioGroupOrientation as te, StaticIconButton as ne } from "@epam/ai-dial-ui-kit";
+import { IconArrowLeft as re, IconArrowNarrowRight as ie, IconCheck as j, IconChevronDown as ae, IconChevronRight as M, IconFile as oe, IconMicrophone as se, IconPaperclip as ce, IconPlayerStopFilled as le, IconPlaystationSquare as N, IconPlus as ue, IconSettings as de, IconTool as fe, IconX as pe } from "@tabler/icons-react";
+import { createPortal as me } from "react-dom";
+import { createElement as P, memo as he, useCallback as F, useEffect as I, useImperativeHandle as ge, useLayoutEffect as _e, useMemo as L, useRef as R, useState as z } from "react";
 import { Fragment as B, jsx as V, jsxs as H } from "react/jsx-runtime";
-import { AttachmentCard as ge, AttachmentGroup as _e, AttachmentTray as ve, 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 { AttachmentCard as U, AttachmentGroup as ve, AttachmentTray as ye, AttachmentTray as be, FileDndOverlay as xe, MAX_UPLOADS_PER_MINUTE as Se, generateAttachmentId as Ce, getAttachmentIcon as we, useClipboardPaste as Te } from "@epam/ai-dial-attachment-input";
 //#region src/hooks/useBottomSheet.ts
-var Te = (e, t) => {
-	F(() => {
+var Ee = (e, t) => {
+	I(() => {
 		if (!e) return;
 		let n = (e) => {
 			e.key === "Escape" && t();
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
-	}, [e, t]), F(() => {
+	}, [e, t]), I(() => {
 		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"
-}, U = ({ isOpen: e, title: t, closeLabel: n, onClose: r, onBack: i, backLabel: a, "aria-label": s, style: c, titleClassName: l = "dial-body-semi-text", className: f, children: p }) => (Te(e, r), !e || typeof document > "u" ? null : pe(/* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
-	className: o(Ee.backdrop, "fixed inset-0 z-[55]"),
-	onPointerDown: r,
-	"aria-hidden": !0
-}), /* @__PURE__ */ H("div", {
-	role: "dialog",
-	"aria-modal": !0,
-	"aria-label": t ?? s,
-	style: c,
-	className: o(Ee.sheet, "fixed inset-x-0 bottom-0 z-[60] flex max-h-[85dvh] flex-col", f),
-	children: [t != null && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ H("div", {
-		className: "relative flex h-[60px] flex-shrink-0 items-center justify-center px-4",
-		children: [
-			i && /* @__PURE__ */ V("div", {
-				className: "absolute start-4",
-				children: /* @__PURE__ */ V(h, {
-					icon: /* @__PURE__ */ V(te, {
+}, De = {
+	backdrop: "_backdrop_qmzqj_9",
+	sheet: "_sheet_qmzqj_13",
+	"slide-up": "_slide-up_qmzqj_1",
+	title: "_title_qmzqj_18",
+	divider: "_divider_qmzqj_22"
+}, W = ({ 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: m, children: g }) => {
+	if (Ee(e, r), !e || typeof document > "u") return null;
+	let _ = a({
+		"--ci-backdrop": m?.backdrop,
+		"--ci-sheet-bg": m?.sheetBg,
+		"--ci-sheet-text": m?.sheetText,
+		"--ci-sheet-divider": m?.divider
+	});
+	return me(/* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
+		className: o(De.backdrop, "fixed inset-0 z-[55]"),
+		style: _,
+		onPointerDown: r,
+		"aria-hidden": !0
+	}), /* @__PURE__ */ H("div", {
+		role: "dialog",
+		"aria-modal": !0,
+		"aria-label": t ?? c,
+		style: {
+			..._,
+			...l
+		},
+		className: o(De.sheet, "fixed inset-x-0 bottom-0 z-[60] flex max-h-[85dvh] flex-col", p),
+		children: [t != null && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ H("div", {
+			className: "relative flex h-[60px] flex-shrink-0 items-center justify-center px-4",
+			children: [
+				i && /* @__PURE__ */ V("div", {
+					className: "absolute start-4",
+					children: /* @__PURE__ */ V(h, {
+						icon: /* @__PURE__ */ V(re, {
+							size: u.LG,
+							stroke: 1.5,
+							className: "rtl:scale-x-[-1]"
+						}),
+						"aria-label": s,
+						onClick: i
+					})
+				}),
+				/* @__PURE__ */ V("span", {
+					className: o(De.title, f),
+					children: t
+				}),
+				/* @__PURE__ */ V("div", {
+					className: "absolute end-4 m-2",
+					children: /* @__PURE__ */ V(d, {
+						ariaLabel: n,
 						size: u.LG,
-						stroke: 1.5,
-						className: "rtl:scale-x-[-1]"
-					}),
-					"aria-label": a,
-					onClick: i
-				})
-			}),
-			/* @__PURE__ */ V("span", {
-				className: o(Ee.title, l),
-				children: t
-			}),
-			/* @__PURE__ */ V("div", {
-				className: "absolute end-4 m-2",
-				children: /* @__PURE__ */ V(d, {
-					ariaLabel: n,
-					size: u.LG,
-					onClose: r
+						onClose: r
+					})
 				})
-			})
-		]
-	}), /* @__PURE__ */ V("div", { className: "h-px flex-shrink-0" })] }), /* @__PURE__ */ V("div", {
-		className: "overflow-y-auto",
-		children: p
-	})]
-})] }), document.body)), De = async (e, t, n) => {
+			]
+		}), /* @__PURE__ */ V("div", { className: o(De.divider, "h-px flex-shrink-0") })] }), /* @__PURE__ */ V("div", {
+			className: "overflow-y-auto",
+			children: g
+		})]
+	})] }), document.body);
+}, Oe = async (e, t, n) => {
 	let r = 6e4 / t, i = [];
 	for (let t = 0; t < e.length; t++) t > 0 && await new Promise((e) => setTimeout(e, r)), i.push(n(e[t]));
 	await Promise.allSettled(i);
-}, Oe = ({ 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 }) => {
+}, ke = ({ 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] = z(n), _ = R(h);
-	F(() => {
+	I(() => {
 		_.current = h;
-	}, [h]), F(() => () => {
+	}, [h]), I(() => () => {
 		_.current.forEach((e) => {
 			e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
 		});
 	}, []);
-	let v = P((e) => e.map((e) => {
+	let v = F((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: Ce(),
 			name: e.name,
 			contentType: e.type,
 			file: e,
@@ -92,25 +105,25 @@ var Te = (e, t) => {
 			playUrl: o
 		};
 	}), []), y = R(a);
-	F(() => {
+	I(() => {
 		y.current = a;
 	}, [a]);
-	let b = R(!0), x = P((e) => {
+	let b = R(!0), x = F((e) => {
 		g((t) => {
 			let n = e(t);
 			return n === t ? t : n;
 		});
 	}, []);
-	F(() => {
+	I(() => {
 		if (b.current) {
 			b.current = !1;
 			return;
 		}
 		y.current?.(h);
 	}, [h]);
-	let S = P((e) => {
+	let S = F((e) => {
 		g(e);
-	}, []), C = P(async (t) => {
+	}, []), C = F(async (t) => {
 		if (i) {
 			x((e) => e.map((e) => e.id === t.id ? {
 				...e,
@@ -132,7 +145,7 @@ var Te = (e, t) => {
 				} : e));
 			}
 		}
-	}, [i, x]), w = P((e, t = !0) => {
+	}, [i, x]), w = F((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)) {
@@ -153,7 +166,7 @@ var Te = (e, t) => {
 						status: r.Error,
 						errorReason: n
 					} : e));
-				}), De(e, xe, C);
+				}), Oe(e, Se, C);
 			}
 		}
 	}, [
@@ -164,20 +177,20 @@ var Te = (e, t) => {
 		C,
 		o
 	]);
-	F(() => {
+	I(() => {
 		s.length !== 0 && (w(v(s)), c?.());
 	}, [
 		w,
 		v,
 		c,
 		s
-	]), F(() => {
+	]), I(() => {
 		l.length !== 0 && (w(l, !1), u?.());
 	}, [
 		w,
 		u,
 		l
-	]), F(() => {
+	]), I(() => {
 		if (!o) return;
 		let t = !1, n = [], i = _.current.map((i) => {
 			if (i.status === r.Loading) return i;
@@ -204,7 +217,7 @@ var Te = (e, t) => {
 		x,
 		C
 	]);
-	let T = P((e) => {
+	let T = F((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);
@@ -216,11 +229,11 @@ var Te = (e, t) => {
 		addAttachments: w,
 		resetAttachments: S,
 		handleRemove: T,
-		handleRetry: P((e) => {
+		handleRetry: F((e) => {
 			let t = h.find((t) => t.id === e);
 			t && C(t);
 		}, [h, C]),
-		handleExpand: P(async (e) => {
+		handleExpand: F(async (e) => {
 			let n = h.find((t) => t.id === e);
 			if (!n || n.type !== t.Pasted) return;
 			let r = await n.file.text();
@@ -232,9 +245,9 @@ var Te = (e, t) => {
 		]),
 		hasBlockedAttachments: h.some((e) => e.status === r.Loading || e.status === r.Error)
 	};
-}, ke = (e, t) => {
+}, Ae = (e, t) => {
 	let [n, r] = z(e), [i, a] = z(!1), [o, s] = z(0);
-	return F(() => {
+	return I(() => {
 		if (e) {
 			r(!0), a(!1), s((e) => e + 1);
 			return;
@@ -250,15 +263,15 @@ 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) => {
+}, je = (e, t) => !e.slice(0, t).includes("\n"), Me = (e, t) => !e.slice(t).includes("\n"), Ne = (e) => {
 	let t = R(e);
 	t.current = e;
-	let n = R(-1), r = R(""), i = P((e, i, a) => {
+	let n = R(-1), r = R(""), i = F((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 = P(() => {
+		return !o || o.length === 0 ? null : e === "up" ? !je(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 || !Me(i, a) ? null : n.current < o.length - 1 ? (n.current += 1, o[n.current]) : (n.current = -1, r.current);
+	}, []), a = F(() => {
 		n.current = -1, r.current = "";
-	}, []), o = P(() => {
+	}, []), o = F(() => {
 		n.current = -1, r.current = "";
 	}, []);
 	return L(() => ({
@@ -270,13 +283,13 @@ var Te = (e, t) => {
 		a,
 		o
 	]);
-}, Ne = ({ messageProp: e, messageRevision: t }) => {
+}, Pe = ({ messageProp: e, messageRevision: t }) => {
 	let [n, r] = z(e), i = R(null), a = R(0), [o, s] = z(!1);
-	return F(() => {
+	return I(() => {
 		r(e);
-	}, [e, t]), F(() => {
+	}, [e, t]), I(() => {
 		i.current && (a.current = i.current.offsetHeight);
-	}, []), I(() => {
+	}, []), _e(() => {
 		if (!i.current || a.current === 0) return;
 		let e = i.current.offsetHeight > a.current;
 		s((t) => e ? !0 : n === "" ? !1 : t);
@@ -286,20 +299,20 @@ var Te = (e, t) => {
 		textareaRef: i,
 		isMultiLine: o
 	};
-}, Pe = /* @__PURE__ */ function(e) {
+}, Fe = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Recording = "recording", e.Error = "error", e;
-}({}), Fe = [
+}({}), Ie = [
 	"audio/webm;codecs=opus",
 	"audio/ogg;codecs=opus",
 	"audio/webm"
-], Ie = () => Fe.find((e) => MediaRecorder.isTypeSupported(e)) ?? "", Le = ({ onAttachAudio: e }) => {
+], Le = () => Ie.find((e) => MediaRecorder.isTypeSupported(e)) ?? "", Re = ({ onAttachAudio: e }) => {
 	let [t, n] = z("idle"), [r, i] = z(null), [a, o] = z(0), s = R(null), c = R(null), l = R(null), u = R(null), d = R([]), f = R(""), p = R(null), m = R(e);
 	m.current = e;
-	let h = P(() => {
+	let h = F(() => {
 		p.current != null && (clearInterval(p.current), p.current = null);
-	}, []), g = P(() => {
+	}, []), g = F(() => {
 		h(), s.current &&= (s.current.getTracks().forEach((e) => e.stop()), null), c.current &&= (c.current.close(), null), l.current = null, u.current = null;
-	}, [h]), _ = P(() => {
+	}, [h]), _ = F(() => {
 		(async () => {
 			try {
 				let e = await navigator.mediaDevices.getUserMedia({ audio: !0 });
@@ -308,7 +321,7 @@ var Te = (e, t) => {
 				c.current = t;
 				let r = t.createAnalyser();
 				r.fftSize = 256, l.current = r, t.createMediaStreamSource(e).connect(r);
-				let i = Ie();
+				let i = Le();
 				f.current = i, d.current = [];
 				let a = new MediaRecorder(e, i ? { mimeType: i } : void 0);
 				u.current = a, a.ondataavailable = (e) => {
@@ -320,17 +333,17 @@ var Te = (e, t) => {
 				i(e instanceof Error ? e.message : "Microphone access denied"), n("error");
 			}
 		})();
-	}, []), v = P(() => {
+	}, []), v = F(() => {
 		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");
 		}, e.stop());
-	}, [h, g]), y = P(() => {
+	}, [h, g]), y = F(() => {
 		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 F(() => () => {
+	return I(() => () => {
 		g();
 	}, [g]), {
 		state: t,
@@ -341,49 +354,56 @@ var Te = (e, t) => {
 		stopRecording: v,
 		discardRecording: y
 	};
-}, Re = /* @__PURE__ */ function(e) {
+}, ze = /* @__PURE__ */ function(e) {
 	return e.Enter = "enter", e.MetaEnter = "meta-enter", e;
-}({}), ze = {
+}({}), Be = {
 	item: "_item_l2r5m_1",
 	itemIcon: "_itemIcon_l2r5m_11"
-}, Be = ({ isOpen: e, title: t, closeLabel: n, onClose: r, style: i, items: a, className: s, titleClassName: c = "dial-body-semi-text", itemLabelClassName: u = "dial-small-text", btnTextClassName: d = "" }) => {
-	let f = (e) => {
+}, Ve = ({ 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__ */ V(U, {
+	}, 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__ */ V(W, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: r,
 		style: i,
-		className: s,
-		titleClassName: c,
+		className: c,
+		titleClassName: u,
+		colors: p?.shell,
 		children: /* @__PURE__ */ V("ul", {
 			role: "list",
 			className: "flex flex-col",
-			children: a.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ V("li", { children: /* @__PURE__ */ V(l, {
+			style: h,
+			children: s.map(({ key: e, label: t, icon: n, iconAfter: r, onClick: i }) => /* @__PURE__ */ V("li", { children: /* @__PURE__ */ V(l, {
 				type: "button",
-				className: o(ze.item, "flex w-full items-center gap-3 px-4 py-[10px] text-start"),
+				className: o(Be.item, "w-full gap-3 px-4 py-[10px] text-start"),
 				iconBefore: /* @__PURE__ */ V("span", {
-					className: ze.itemIcon,
+					className: Be.itemIcon,
 					children: n
 				}),
 				iconAfter: r ? /* @__PURE__ */ V("span", {
 					className: "ms-auto",
 					children: r
 				}) : null,
-				textClassName: d,
+				textClassName: f,
 				label: /* @__PURE__ */ V("span", {
-					className: u,
+					className: d,
 					children: t
 				}),
-				onClick: () => f(i)
+				onClick: () => m(i)
 			}) }, e))
 		})
 	});
-}, Ve = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
+}, He = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
 	let [s, c] = z(t), [l, u] = z(n), [d, f] = z(r), p = R(o);
-	F(() => {
+	I(() => {
 		o && !p.current && (c(t), u(n), f(r)), p.current = o;
 	}, [
 		o,
@@ -400,7 +420,7 @@ var Te = (e, t) => {
 		setResponseFormat: c,
 		setSystemPrompt: u,
 		setTemperature: f,
-		handleSubmit: P(() => {
+		handleSubmit: F(() => {
 			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();
@@ -414,7 +434,7 @@ var Te = (e, t) => {
 			a
 		])
 	};
-}, W = "!dial-small-semi-text !text-primary gap-1", He = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: a, 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 = [
+}, Ue = "!dial-small-semi-text !text-primary gap-1", We = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: a, 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 = [
 	"Precise",
 	"Neutral",
 	"Creative"
@@ -423,9 +443,9 @@ var Te = (e, t) => {
 	children: [
 		e.responseFormat && /* @__PURE__ */ V(v, {
 			fieldTitle: c,
-			labelClassName: W,
+			labelClassName: Ue,
 			elementId: "response-format",
-			orientation: ee.Column,
+			orientation: te.Column,
 			activeRadioButton: t ?? i.Markdown,
 			labelDescription: l,
 			radioButtons: [{
@@ -441,7 +461,7 @@ var Te = (e, t) => {
 			value: n,
 			placeholder: p,
 			labelProps: {
-				className: W,
+				className: Ue,
 				label: f
 			},
 			onChange: (e) => o(e ?? "")
@@ -449,7 +469,7 @@ var Te = (e, t) => {
 		e.temperature && /* @__PURE__ */ V(S, {
 			labelProps: {
 				label: m,
-				className: W,
+				className: Ue,
 				caption: _
 			},
 			value: r,
@@ -460,8 +480,8 @@ var Te = (e, t) => {
 			onChange: s
 		})
 	]
-}), Ue = ({ 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: x, saveLabel: S = "Apply changes", saveDisabledTooltip: C }) => {
-	let { responseFormat: T, systemPrompt: E, temperature: D, canSubmit: O, setResponseFormat: A, setSystemPrompt: ee, setTemperature: te, handleSubmit: ne } = Ve({
+}), Ge = ({ 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: x, saveLabel: S = "Apply changes", saveDisabledTooltip: C }) => {
+	let { responseFormat: T, systemPrompt: E, temperature: D, canSubmit: O, setResponseFormat: k, setSystemPrompt: ee, setTemperature: te, handleSubmit: ne } = He({
 		isOpen: e,
 		features: s,
 		initialResponseFormat: c,
@@ -470,7 +490,7 @@ var Te = (e, t) => {
 		onSave: d,
 		onClose: r
 	});
-	return /* @__PURE__ */ H(U, {
+	return /* @__PURE__ */ H(W, {
 		isOpen: e,
 		title: f,
 		closeLabel: i,
@@ -478,12 +498,12 @@ var Te = (e, t) => {
 		onBack: t,
 		backLabel: n,
 		style: a,
-		children: [/* @__PURE__ */ V(He, {
+		children: [/* @__PURE__ */ V(We, {
 			features: s,
 			responseFormat: T,
 			systemPrompt: E,
 			temperature: D,
-			onResponseFormatChange: A,
+			onResponseFormatChange: k,
 			onSystemPromptChange: ee,
 			onTemperatureChange: te,
 			responseFormatLabel: p,
@@ -501,7 +521,7 @@ var Te = (e, t) => {
 				tooltip: C,
 				hideTooltip: O || !C,
 				triggerClassName: "w-full",
-				children: /* @__PURE__ */ V(k, {
+				children: /* @__PURE__ */ V(A, {
 					label: S,
 					onClick: ne,
 					disabled: !O,
@@ -510,8 +530,8 @@ var Te = (e, t) => {
 			})
 		})]
 	});
-}, We = ({ 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: v }) => {
-	let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: T, setTemperature: E, handleSubmit: D } = Ve({
+}, Ke = ({ 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: v }) => {
+	let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: T, setTemperature: E, handleSubmit: D } = He({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -522,7 +542,7 @@ var Te = (e, t) => {
 	return /* @__PURE__ */ V(_, {
 		open: !0,
 		header: o,
-		size: O.Sm,
+		size: k.Sm,
 		onClose: a,
 		className: "!bg-layer-2",
 		footer: /* @__PURE__ */ V("div", {
@@ -530,14 +550,14 @@ var Te = (e, t) => {
 			children: /* @__PURE__ */ V(w, {
 				tooltip: v,
 				hideTooltip: S || !v,
-				children: /* @__PURE__ */ V(k, {
+				children: /* @__PURE__ */ V(A, {
 					label: g,
 					onClick: D,
 					disabled: !S
 				})
 			})
 		}),
-		children: /* @__PURE__ */ V(He, {
+		children: /* @__PURE__ */ V(We, {
 			features: e,
 			responseFormat: y,
 			systemPrompt: b,
@@ -557,10 +577,10 @@ var Te = (e, t) => {
 		})
 	});
 };
-N(We);
+he(Ke);
 //#endregion
 //#region src/components/ToolsBottomSheet/ToolsBottomSheet.tsx
-var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: s, onToolToggle: u }) => /* @__PURE__ */ V(U, {
+var qe = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: s, onToolToggle: u }) => /* @__PURE__ */ V(W, {
 	isOpen: e,
 	title: o,
 	closeLabel: i,
@@ -577,14 +597,14 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 				type: "button",
 				role: "menuitemcheckbox",
 				"aria-checked": e.isSelected,
-				className: "flex w-full items-center gap-3 px-4 py-[10px] text-start",
+				className: "w-full gap-3 px-4 py-[10px] text-start",
 				iconBefore: /* @__PURE__ */ V("span", {
 					className: "flex items-center text-secondary",
 					children: e.icon
 				}),
 				iconAfter: e.isSelected ? /* @__PURE__ */ V("span", {
 					className: "ms-auto text-accent-primary",
-					children: /* @__PURE__ */ V(re, {
+					children: /* @__PURE__ */ V(j, {
 						size: c,
 						"aria-hidden": !0
 					})
@@ -597,7 +617,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			})
 		}, e.id))
 	})
-}), Ke = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, menuCloseLabel: a, style: l, listClassName: d = "cp-dropdown-overlay !w-[240px]", isDisabled: p = !1, chatSettings: m, extraMenuItems: g, toolsMenuItems: _ = [], onToolToggle: v, toolsMenuTitle: y = "Tools", toolsBackLabel: b = "Back" }) => {
+}), Je = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, menuCloseLabel: a, style: l, listClassName: d = "cp-dropdown-overlay !w-[240px]", isDisabled: p = !1, chatSettings: m, extraMenuItems: g, toolsMenuItems: _ = [], onToolToggle: v, toolsMenuTitle: y = "Tools", toolsBackLabel: b = "Back" }) => {
 	let x = s(), [S, C] = z(!1), [w, T] = z(!1), [E, D] = z(!1), O = _.length > 0 && v != null, k = L(() => _.map((e) => ({
 		key: e.id,
 		label: /* @__PURE__ */ H("span", {
@@ -605,7 +625,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			children: [/* @__PURE__ */ V("span", {
 				className: "flex-1",
 				children: e.label
-			}), e.isSelected && /* @__PURE__ */ V(re, {
+			}), e.isSelected && /* @__PURE__ */ V(j, {
 				size: c,
 				className: "text-accent-primary",
 				"aria-hidden": !0
@@ -620,7 +640,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		...e == null ? [] : [{
 			key: "attach",
 			label: t,
-			icon: /* @__PURE__ */ V(M, {
+			icon: /* @__PURE__ */ V(ce, {
 				size: c,
 				"aria-hidden": !0
 			}),
@@ -630,14 +650,14 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		...O ? [{
 			key: "tools",
 			label: y,
-			icon: /* @__PURE__ */ V(de, {
+			icon: /* @__PURE__ */ V(fe, {
 				size: c,
 				"aria-hidden": !0
 			}),
 			onClick: x ? () => {
 				D(!0), C(!1);
 			} : () => void 0,
-			...x ? { iconAfter: /* @__PURE__ */ V(j, {
+			...x ? { iconAfter: /* @__PURE__ */ V(M, {
 				size: c,
 				stroke: 1.5,
 				className: "text-secondary rtl:scale-x-[-1]",
@@ -647,11 +667,11 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		...m == null ? [] : [{
 			key: "chat-settings",
 			label: m.menuItemLabel ?? "Chat settings",
-			icon: /* @__PURE__ */ V(ue, {
+			icon: /* @__PURE__ */ V(de, {
 				size: c,
 				"aria-hidden": !0
 			}),
-			iconAfter: x ? /* @__PURE__ */ V(j, {
+			iconAfter: x ? /* @__PURE__ */ V(M, {
 				size: c,
 				stroke: 1.5,
 				className: "text-secondary rtl:scale-x-[-1]",
@@ -671,7 +691,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 	]);
 	return A.length === 0 ? null : /* @__PURE__ */ V(B, { children: x ? /* @__PURE__ */ H(B, { children: [
 		/* @__PURE__ */ V(h, {
-			icon: /* @__PURE__ */ V(le, {
+			icon: /* @__PURE__ */ V(ue, {
 				size: u.LG,
 				"aria-hidden": !0
 			}),
@@ -680,7 +700,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			className: o("size-10 flex-shrink-0", p && "pointer-events-none opacity-50"),
 			onClick: () => C(!0)
 		}),
-		/* @__PURE__ */ V(Be, {
+		/* @__PURE__ */ V(Ve, {
 			isOpen: S,
 			title: r,
 			closeLabel: a,
@@ -690,7 +710,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			className: "pb-4",
 			btnTextClassName: "flex-1"
 		}),
-		O && /* @__PURE__ */ V(Ge, {
+		O && /* @__PURE__ */ V(qe, {
 			isOpen: E,
 			onBack: () => {
 				D(!1), C(!0);
@@ -703,7 +723,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			items: _,
 			onToolToggle: v
 		}),
-		m != null && /* @__PURE__ */ V(Ue, {
+		m != null && /* @__PURE__ */ V(Ge, {
 			isOpen: w,
 			onBack: () => {
 				T(!1), C(!0);
@@ -736,7 +756,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		listClassName: d,
 		items: A,
 		children: /* @__PURE__ */ V(h, {
-			icon: /* @__PURE__ */ V(le, {
+			icon: /* @__PURE__ */ V(ue, {
 				size: u.LG,
 				"aria-hidden": !0
 			}),
@@ -745,7 +765,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			className: "size-10 flex-shrink-0",
 			disabled: p
 		})
-	}), m != null && w && /* @__PURE__ */ V(We, {
+	}), m != null && w && /* @__PURE__ */ V(Ke, {
 		features: m.features,
 		initialResponseFormat: m.responseFormat ?? i.Markdown,
 		initialSystemPrompt: m.systemPrompt,
@@ -766,37 +786,47 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		saveDisabledTooltip: m.saveDisabledTooltip
 	})] }) });
 }, G = {
-	chip: "_chip_1y9qv_1",
-	chipIcon: "_chipIcon_1y9qv_6",
-	chipText: "_chipText_1y9qv_10",
-	chipClose: "_chipClose_1y9qv_14"
-}, qe = (e) => `${e} tool${e === 1 ? "" : "s"}`, Je = (e) => `Remove ${e}`, Ye = ({ items: e, onToolToggle: t, isMobile: n, countLabel: r = qe, removeLabel: i = Je }) => {
-	let a = e.filter((e) => e.isSelected);
-	if (a.length === 0) return null;
+	chip: "_chip_1gvzk_1",
+	chipIcon: "_chipIcon_1gvzk_6",
+	chipText: "_chipText_1gvzk_10",
+	chipClose: "_chipClose_1gvzk_14"
+}, Ye = (e) => `${e} tool${e === 1 ? "" : "s"}`, K = (e) => `Remove ${e}`, Xe = ({ items: e, onToolToggle: t, isMobile: n, countLabel: r = Ye, removeLabel: i = K, 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 = a.length === 1 ? a[0].icon : /* @__PURE__ */ V(de, {
+		let e = u.length === 1 ? u[0].icon : /* @__PURE__ */ V(fe, {
 			size: c,
 			"aria-hidden": !0
 		});
 		return /* @__PURE__ */ V("div", {
 			className: "flex flex-wrap items-center gap-2",
+			style: d,
 			children: /* @__PURE__ */ H("div", {
-				className: o(G.chip, "flex items-center gap-1.5 rounded border px-2 py-1"),
+				className: o(G.chip, "flex items-center gap-1.5 rounded-full border px-2 py-1"),
 				children: [/* @__PURE__ */ V("span", {
 					className: G.chipIcon,
 					"aria-hidden": !0,
 					children: e
 				}), /* @__PURE__ */ V("span", {
-					className: o(G.chipText, "dial-small-text"),
-					children: r(a.length)
+					className: o(G.chipText, s?.fontClassName || "dial-small-paragraph-text"),
+					children: r(u.length)
 				})]
 			})
 		});
 	}
 	return /* @__PURE__ */ V("div", {
 		className: "flex flex-wrap items-center gap-2",
-		children: a.map((e) => /* @__PURE__ */ H("div", {
-			className: o(G.chip, "flex items-center gap-1.5 rounded border py-1 pe-1 ps-2"),
+		style: d,
+		children: u.map((e) => /* @__PURE__ */ H("div", {
+			className: o(G.chip, "flex items-center gap-1.5 rounded-full border py-1 pe-1 ps-2"),
 			children: [
 				/* @__PURE__ */ V("span", {
 					className: G.chipIcon,
@@ -804,7 +834,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 					children: e.icon
 				}),
 				/* @__PURE__ */ V("span", {
-					className: o(G.chipText, "dial-small-text"),
+					className: o(G.chipText, s?.fontClassName || "dial-small-paragraph-text"),
 					children: e.label
 				}),
 				/* @__PURE__ */ V("button", {
@@ -812,7 +842,7 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 					onClick: () => t(e.id),
 					className: o(G.chipClose, "flex items-center rounded p-0.5 transition-colors"),
 					"aria-label": i(e.label),
-					children: /* @__PURE__ */ V(fe, {
+					children: /* @__PURE__ */ V(pe, {
 						size: 12,
 						"aria-hidden": !0
 					})
@@ -820,37 +850,43 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 			]
 		}, e.id))
 	});
-}, K = {
-	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"
-}, q = 3, J = 4, Y = 200, Xe = (e) => `${String(Math.floor(e / 60)).padStart(2, "0")}:${String(e % 60).padStart(2, "0")}`, Ze = ({ state: e, analyserNodeRef: t, elapsedSeconds: n, errorMessage: r, onStop: i, onDiscard: a, stopLabel: s = "Stop recording", discardLabel: c = "Discard recording", timerLabel: l = "Recording time", style: d, className: f }) => {
-	let p = R(null), g = R(new Float32Array(Y)), _ = R(0), v = R(0), y = e === Pe.Recording, b = e === Pe.Error, x = P((e) => {
+}, q = {
+	wrapper: "_wrapper_4e8i8_1",
+	wrapperDisabled: "_wrapperDisabled_4e8i8_8",
+	textarea: "_textarea_4e8i8_13",
+	modelSelectorButton: "_modelSelectorButton_4e8i8_24",
+	modelSelectorCaret: "_modelSelectorCaret_4e8i8_24",
+	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_4e8i8_33"
+}, J = {
+	wrapperError: "_wrapperError_5wiyg_1",
+	waveformCanvas: "_waveformCanvas_5wiyg_5",
+	timer: "_timer_5wiyg_9",
+	stopRecordingIcon: "_stopRecordingIcon_5wiyg_15",
+	recordingDot: "_recordingDot_5wiyg_29",
+	"recording-pulse": "_recording-pulse_5wiyg_1"
+}, Ze = 3, Qe = 4, Y = 200, $e = (e) => `${String(Math.floor(e / 60)).padStart(2, "0")}:${String(e % 60).padStart(2, "0")}`, et = ({ state: e, analyserNodeRef: t, elapsedSeconds: n, errorMessage: r, onStop: i, onDiscard: a, stopLabel: s = "Stop recording", discardLabel: c = "Discard recording", timerLabel: l = "Recording time", style: d, className: f }) => {
+	let p = R(null), h = R(new Float32Array(Y)), g = R(0), _ = R(0), v = e === Fe.Recording, y = e === Fe.Error, b = F((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 / J)), Y - 1), a = _.current, o = v.current;
+		let i = Math.min(Math.max(1, Math.floor(n / Qe)), Y - 1), a = g.current, o = _.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) % Y + Y) % Y, o = g.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
-			t.fillRect(e * J, (r - c) / 2, q, c);
+			let n = ((a - i + e) % Y + Y) % Y, o = h.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();
 	}, []);
-	F(() => {
-		if (!y) return;
+	I(() => {
+		if (!v) return;
 		let e = p.current;
 		if (!e) return;
-		g.current.fill(0), _.current = 0, v.current = 0;
+		h.current.fill(0), g.current = 0, _.current = 0;
 		let n, r = () => {
-			if (v.current += 1, v.current >= J) {
-				v.current -= J;
+			if (_.current += 1, _.current >= Qe) {
+				_.current -= Qe;
 				let e = t.current;
 				if (e) {
 					let t = new Uint8Array(e.frequencyBinCount);
@@ -860,100 +896,80 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 						let r = (t[e] - 128) / 128;
 						n += r * r;
 					}
-					g.current[_.current % Y] = Math.sqrt(n / t.length), _.current++;
+					h.current[g.current % Y] = Math.sqrt(n / t.length), g.current++;
 				}
 			}
-			x(e), n = requestAnimationFrame(r);
+			b(e), n = requestAnimationFrame(r);
 		};
 		return n = requestAnimationFrame(r), () => {
 			cancelAnimationFrame(n);
 		};
 	}, [
-		y,
+		v,
 		t,
-		x
-	]), F(() => {
+		b
+	]), I(() => {
 		let e = p.current;
 		if (!e) return;
 		let t = new ResizeObserver(() => {
-			x(e);
+			b(e);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [x]);
-	let S = /* @__PURE__ */ H("div", {
+	}, [b]);
+	let x = /* @__PURE__ */ H("div", {
 		className: "flex flex-shrink-0 items-center justify-end gap-1",
-		children: [/* @__PURE__ */ V(h, {
-			icon: /* @__PURE__ */ V(fe, {
+		children: [/* @__PURE__ */ V(E, {
+			icon: /* @__PURE__ */ V(pe, {
 				size: u.LG,
 				"aria-hidden": !0
 			}),
 			"aria-label": c,
-			className: "size-10 flex-shrink-0",
 			onClick: a
-		}), y && /* @__PURE__ */ V(h, {
-			icon: /* @__PURE__ */ V(se, {
-				size: u.LG,
-				className: K.stopRecordingIcon,
-				"aria-hidden": !0
-			}),
-			"aria-label": s,
-			className: "size-10 flex-shrink-0",
-			onClick: i
+		}), v && /* @__PURE__ */ V(ee, {
+			icon: /* @__PURE__ */ V(le, { size: u.LG }),
+			onClick: () => i?.(),
+			"aria-label": s
 		})]
 	});
 	return /* @__PURE__ */ H("div", {
 		className: f,
 		children: [/* @__PURE__ */ H("div", {
 			style: d,
-			className: o(K.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 && K.containerError),
+			className: o(q.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", y && J.wrapperError),
 			children: [/* @__PURE__ */ H("div", {
-				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [y && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("span", {
-					className: K.recordingDot,
+				className: "flex min-w-0 flex-1 items-center gap-3",
+				children: [v && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("span", {
+					className: o(J.recordingDot, "pointer-events-none block size-[8px] rounded-3xl"),
 					"aria-hidden": !0
 				}), /* @__PURE__ */ V("span", {
-					className: o(K.timer, "flex-shrink-0"),
+					className: o(J.timer, "flex-shrink-0"),
 					"aria-label": l,
-					children: Xe(n)
+					children: $e(n)
 				})] }), /* @__PURE__ */ V("canvas", {
 					ref: p,
 					height: 32,
-					className: o(K.waveformCanvas, "h-8 min-w-0 flex-1 desktop:h-6")
+					className: o(J.waveformCanvas, "h-8 min-w-0 flex-1 desktop:h-6")
 				})]
-			}), S]
-		}), b && r && /* @__PURE__ */ V(m, {
+			}), x]
+		}), y && r && /* @__PURE__ */ V(m, {
 			text: r,
 			className: "mt-1 px-1"
 		})]
 	});
-}, Qe = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", isExiting: r = !1 }) => /* @__PURE__ */ V(A, {
+}, tt = ({ onSend: e, isDisabled: t = !1, ariaLabel: n = "Send message", isExiting: r = !1 }) => /* @__PURE__ */ V(ee, {
 	"aria-label": n,
 	onClick: () => e?.(),
-	type: "button",
 	disabled: t,
 	"aria-hidden": r,
-	icon: /* @__PURE__ */ V(ne, {
+	icon: /* @__PURE__ */ V(ie, {
 		size: u.LG,
 		className: "rtl:scale-x-[-1]"
 	})
-}), X = {
-	wrapper: "_wrapper_1mg30_1",
-	wrapperDisabled: "_wrapperDisabled_1mg30_14",
-	textarea: "_textarea_1mg30_19",
-	stopIcon: "_stopIcon_1mg30_33",
-	modelSelectorButton: "_modelSelectorButton_1mg30_37",
-	modelSelectorCaret: "_modelSelectorCaret_1mg30_37",
-	modelSelectorButtonDisabled: "_modelSelectorButtonDisabled_1mg30_43"
-}, $e = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ V("button", {
-	className: o("flex cursor-pointer items-center justify-center disabled:cursor-not-allowed"),
-	"aria-label": t,
+}), nt = ({ onStop: e, ariaLabel: t = "Stop streaming" }) => /* @__PURE__ */ V(ne, {
+	icon: /* @__PURE__ */ V(N, { size: u.LG }),
 	onClick: () => e?.(),
-	type: "button",
-	children: /* @__PURE__ */ V(ce, {
-		size: u.LG,
-		className: X.stopIcon
-	})
-}), Z = ({ gradientId: e = "gradient-check-icon" }) => /* @__PURE__ */ H("svg", {
+	"aria-label": t
+}), rt = ({ gradientId: e = "gradient-check-icon" }) => /* @__PURE__ */ H("svg", {
 	width: u.SM,
 	height: u.SM,
 	viewBox: "0 0 24 24",
@@ -980,11 +996,11 @@ var Ge = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel:
 		strokeLinecap: "round",
 		strokeLinejoin: "round"
 	})]
-}), et = {
+}), it = {
 	tabContainer: "_tabContainer_153ct_1",
 	tabActive: "_tabActive_153ct_13"
 };
-N(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
+he(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
 	let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
 	return /* @__PURE__ */ V("div", {
 		className: "flex flex-nowrap gap-1",
@@ -999,18 +1015,18 @@ N(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
 					label: e.label,
 					selected: r,
 					onClick: () => n(e.id),
-					className: o("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, et.tabContainer, r && et.tabActive)
+					className: o("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, it.tabContainer, r && it.tabActive)
 				})
 			}, e.id);
 		})
 	});
 });
-var tt = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
+var at = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
 	variant: x.Circular,
 	width: e,
 	height: e,
 	active: !0
-}), nt = ({ loadingLabel: e }) => /* @__PURE__ */ H("span", {
+}), ot = ({ loadingLabel: e }) => /* @__PURE__ */ H("span", {
 	className: "flex min-w-0 flex-1 items-center",
 	children: [/* @__PURE__ */ V(b, {
 		variant: x.Text,
@@ -1021,24 +1037,24 @@ var tt = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
 		className: "sr-only",
 		children: e
 	})]
-}), rt = ({ loadingLabel: e }) => /* @__PURE__ */ V("div", {
+}), st = ({ loadingLabel: e }) => /* @__PURE__ */ V("div", {
 	role: "status",
 	"aria-label": e,
 	children: Array.from({ length: 7 }).map((e, t) => /* @__PURE__ */ H("div", {
 		className: "flex h-11 items-center gap-3 px-4",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ V(tt, {}), /* @__PURE__ */ V(nt, {})]
+		children: [/* @__PURE__ */ V(at, {}), /* @__PURE__ */ V(ot, {})]
 	}, t))
-}), it = (e) => e.displayName ?? e.id, at = (e, t) => {
+}), ct = (e) => e.displayName ?? e.id, lt = (e, t) => {
 	let n = t.trim().toLowerCase();
-	return n ? e.filter((e) => it(e).toLowerCase().includes(n)) : e;
-}, ot = (e, t, r, i = 18, a) => /* @__PURE__ */ V(n, {
+	return n ? e.filter((e) => ct(e).toLowerCase().includes(n)) : e;
+}, ut = (e, t, r, i = 18, a) => /* @__PURE__ */ V(n, {
 	src: e,
 	size: i,
 	labels: { tooltip: a },
 	initialsName: r
-}), st = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, searchHeaderClassName: i = "bg-layer-0" }) => {
-	let [a, s] = z(""), c = L(() => e?.find((e) => e.id === t), [e, t]), l = r?.loading !== void 0, d = L(() => l ? /* @__PURE__ */ V(tt, { size: u.LG }) : ot(c?.iconUrl, c?.type, c?.displayName ?? c?.id ?? "", u.LG), [l, c]), f = c?.displayName ?? c?.id;
+}), dt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, searchHeaderClassName: i = "bg-layer-0" }) => {
+	let [a, s] = z(""), c = L(() => e?.find((e) => e.id === t), [e, t]), l = r?.loading !== void 0, d = L(() => l ? /* @__PURE__ */ V(at, { size: u.LG }) : ut(c?.iconUrl, c?.type, c?.displayName ?? c?.id ?? "", u.LG), [l, c]), f = c?.displayName ?? c?.id;
 	return {
 		selectorIcon: d,
 		selectorAriaLabel: f ? `${r?.ariaLabel ?? "Select model"}: ${f}` : r?.ariaLabel ?? "Select model",
@@ -1046,8 +1062,8 @@ var tt = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
 		menuItems: L(() => {
 			if (l) return Array.from({ length: 7 }, (e, t) => ({
 				key: `__loading-${t}`,
-				icon: /* @__PURE__ */ V(tt, {}),
-				label: /* @__PURE__ */ V(nt, { loadingLabel: t === 0 ? r?.loading : void 0 }),
+				icon: /* @__PURE__ */ V(at, {}),
+				label: /* @__PURE__ */ V(ot, { loadingLabel: t === 0 ? r?.loading : void 0 }),
 				disabled: !0
 			}));
 			if (!e || e.length === 0) {
@@ -1058,19 +1074,19 @@ var tt = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
 					disabled: !0
 				}] : [];
 			}
-			return at(e, a).map((e) => {
+			return lt(e, a).map((e) => {
 				let r = e.id === t;
 				return {
 					key: e.id,
 					label: /* @__PURE__ */ H("span", {
 						className: "flex w-full items-center justify-between gap-2",
-						children: [/* @__PURE__ */ V(E, {
-							text: it(e),
+						children: [/* @__PURE__ */ V(D, {
+							text: ct(e),
 							query: a,
 							maxLines: 1
-						}), r && /* @__PURE__ */ V(Z, { gradientId: "ms-check-grad" })]
+						}), r && /* @__PURE__ */ V(rt, { gradientId: "ms-check-grad" })]
 					}),
-					icon: ot(e.iconUrl, e.type, e.displayName ?? e.id),
+					icon: ut(e.iconUrl, e.type, e.displayName ?? e.id),
 					onClick: () => n?.(e.id),
 					className: r ? "bg-accent-primary-alpha" : void 0
 				};
@@ -1103,8 +1119,8 @@ var tt = ({ size: e = 20 }) => /* @__PURE__ */ V(b, {
 			e || s("");
 		}
 	};
-}, ct = typeof window < "u" ? I : F;
-function lt(e) {
+}, ft = typeof window < "u" ? _e : I;
+function pt(e) {
 	if (e !== void 0) switch (typeof e) {
 		case "number": return e;
 		case "string":
@@ -1112,15 +1128,15 @@ function lt(e) {
 			break;
 	}
 }
-function ut({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
+function mt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
 	let { styleHeight: s, styleWidth: c } = L(() => ({
-		styleHeight: lt(o?.height),
-		styleWidth: lt(o?.width)
+		styleHeight: pt(o?.height),
+		styleWidth: pt(o?.width)
 	}), [o?.height, o?.width]), [l, u] = z({
 		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 ct(() => {
+	return ft(() => {
 		if (i === null || d) return;
 		let t = new ResizeObserver((e) => {
 			for (let t of e) {
@@ -1149,26 +1165,26 @@ function ut({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i
 		c
 	]);
 }
-function dt(e) {
+function ht(e) {
 	let t = R(() => {
 		throw Error("Cannot call during render.");
 	});
-	return ct(() => {
+	return ft(() => {
 		t.current = e;
-	}, [e]), P((e) => t.current?.(e), [t]);
+	}, [e]), F((e) => t.current?.(e), [t]);
 }
-var ft = null;
-function pt(e = !1) {
-	if (ft === null || e) {
+var X = null;
+function gt(e = !1) {
+	if (X === 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 ? ft = "positive-descending" : (e.scrollLeft = 1, ft = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), ft;
+		return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? X = "positive-descending" : (e.scrollLeft = 1, X = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), X;
 	}
-	return ft;
+	return X;
 }
-function mt({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
-	if (t === "horizontal" && n) switch (pt()) {
+function _t({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
+	if (t === "horizontal" && n) switch (gt()) {
 		case "negative": return -r;
 		case "positive-descending":
 			if (e) {
@@ -1179,26 +1195,26 @@ function mt({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
 	}
 	return r;
 }
-function Q(e, t = "Assertion error") {
+function Z(e, t = "Assertion error") {
 	if (!e) throw console.error(t), Error(t);
 }
-function ht(e, t) {
+function Q(e, t) {
 	if (e === t) return !0;
-	if (!!e != !!t || (Q(e !== void 0), Q(t !== void 0), Object.keys(e).length !== Object.keys(t).length)) return !1;
+	if (!!e != !!t || (Z(e !== void 0), Z(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 gt({ 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;
 	{
 		let n = e.get(e.size === 0 ? 0 : e.size - 1);
-		return Q(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
+		return Z(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
 	}
 }
-function _t({ 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 = gt({
+	let s = vt({
 		cachedBounds: t,
 		itemCount: r,
 		itemSize: i
@@ -1210,7 +1226,7 @@ function _t({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, co
 		default: return a >= u && a <= l ? a : a < u ? u : l;
 	}
 }
-function vt({ 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);
@@ -1229,11 +1245,11 @@ function vt({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemC
 		stopIndexOverscan: l
 	};
 }
-function yt({ itemCount: e, itemProps: t, itemSize: n }) {
+function xt({ itemCount: e, itemProps: t, itemSize: n }) {
 	let r = /* @__PURE__ */ new Map();
 	return {
 		get(i) {
-			for (Q(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
+			for (Z(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
 				let e = r.size, a;
 				switch (typeof n) {
 					case "function":
@@ -1249,14 +1265,14 @@ function yt({ itemCount: e, itemProps: t, itemSize: n }) {
 				});
 				else {
 					let t = r.get(e - 1);
-					Q(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
+					Z(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
 						scrollOffset: t.scrollOffset + t.size,
 						size: a
 					});
 				}
 			}
 			let a = r.get(i);
-			return Q(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
+			return Z(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
 		},
 		set(e, t) {
 			r.set(e, t);
@@ -1266,8 +1282,8 @@ function yt({ itemCount: e, itemProps: t, itemSize: n }) {
 		}
 	};
 }
-function bt({ itemCount: e, itemProps: t, itemSize: n }) {
-	return L(() => yt({
+function St({ itemCount: e, itemProps: t, itemSize: n }) {
+	return L(() => xt({
 		itemCount: e,
 		itemProps: t,
 		itemSize: n
@@ -1277,11 +1293,11 @@ function bt({ itemCount: e, itemProps: t, itemSize: n }) {
 		n
 	]);
 }
-function xt({ containerSize: e, itemSize: t }) {
+function $({ containerSize: e, itemSize: t }) {
 	let n;
 	switch (typeof t) {
 		case "string":
-			Q(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), Q(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
+			Z(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), Z(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
 			break;
 		default:
 			n = t;
@@ -1289,8 +1305,8 @@ function xt({ containerSize: e, itemSize: t }) {
 	}
 	return n;
 }
-function St({ 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 } = ut({
+function Ct({ containerElement: e, containerStyle: t, defaultContainerSize: n = 0, direction: r, isRtl: i = !1, itemCount: a, itemProps: o, itemSize: s, onResize: c, overscanCount: l }) {
+	let { height: u = n, width: d = n } = mt({
 		defaultHeight: r === "vertical" ? n : void 0,
 		defaultWidth: r === "horizontal" ? n : void 0,
 		element: e,
@@ -1299,11 +1315,11 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 	}), f = R({
 		height: 0,
 		width: 0
-	}), p = r === "vertical" ? u : d, m = xt({
+	}), p = r === "vertical" ? u : d, m = $({
 		containerSize: p,
 		itemSize: s
 	});
-	I(() => {
+	_e(() => {
 		if (typeof c == "function") {
 			let e = f.current;
 			(e.height !== u || e.width !== d) && (c({
@@ -1316,11 +1332,11 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		c,
 		d
 	]);
-	let h = bt({
+	let h = St({
 		itemCount: a,
 		itemProps: o,
 		itemSize: m
-	}), g = P((e) => h.get(e), [h]), [_, v] = z(() => vt({
+	}), g = F((e) => h.get(e), [h]), [_, v] = z(() => bt({
 		cachedBounds: h,
 		containerScrollOffset: 0,
 		containerSize: p,
@@ -1331,7 +1347,7 @@ function St({ 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 = P(() => gt({
+	}, C = F(() => vt({
 		cachedBounds: h,
 		itemCount: a,
 		itemSize: m
@@ -1339,9 +1355,9 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		h,
 		a,
 		m
-	]), w = P((t) => vt({
+	]), w = F((t) => bt({
 		cachedBounds: h,
-		containerScrollOffset: mt({
+		containerScrollOffset: _t({
 			containerElement: e,
 			direction: r,
 			isRtl: i,
@@ -1359,19 +1375,19 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		a,
 		l
 	]);
-	return ct(() => {
+	return ft(() => {
 		v(w((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
 	}, [
 		e,
 		r,
 		w
-	]), ct(() => {
+	]), ft(() => {
 		if (!e) return;
 		let t = () => {
 			v((t) => {
-				let { scrollLeft: n, scrollTop: o } = e, s = vt({
+				let { scrollLeft: n, scrollTop: o } = e, s = bt({
 					cachedBounds: h,
-					containerScrollOffset: mt({
+					containerScrollOffset: _t({
 						containerElement: e,
 						direction: r,
 						isRtl: i,
@@ -1381,7 +1397,7 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 					itemCount: a,
 					overscanCount: l
 				});
-				return ht(s, t) ? t : s;
+				return Q(s, t) ? t : s;
 			});
 		};
 		return e.addEventListener("scroll", t), () => {
@@ -1397,8 +1413,8 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 	]), {
 		getCellBounds: g,
 		getEstimatedSize: C,
-		scrollToIndex: dt(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
-			let s = _t({
+		scrollToIndex: ht(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
+			let s = yt({
 				align: t,
 				cachedBounds: h,
 				containerScrollOffset: n,
@@ -1408,14 +1424,14 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 				itemSize: m
 			});
 			if (e) {
-				if (s = mt({
+				if (s = _t({
 					containerElement: e,
 					direction: r,
 					isRtl: i,
 					scrollOffset: s
 				}), typeof e.scrollTo != "function") {
 					let e = w(s);
-					ht(_, e) || v(e);
+					Q(_, e) || v(e);
 				}
 				return s;
 			}
@@ -1426,19 +1442,19 @@ function St({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		stopIndexVisible: x
 	};
 }
-function $(e) {
+function wt(e) {
 	return L(() => e, Object.values(e));
 }
-function Ct(e, t) {
+function Tt(e, t) {
 	let { ariaAttributes: n, style: r, ...i } = e, { ariaAttributes: a, style: o, ...s } = t;
-	return ht(n, a) && ht(r, o) && ht(i, s);
+	return Q(n, a) && Q(r, o) && Q(i, s);
 }
-function wt(e) {
+function Et(e) {
 	return typeof e == "object" && !!e && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
 }
-var Tt = "data-react-window-index";
-function Et({ 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 = L(() => N(s, Ct), [s]), [g, _] = z(null), v = wt(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = St({
+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 = wt(u), h = L(() => he(s, Tt), [s]), [g, _] = z(null), v = Et(l), { getCellBounds: y, getEstimatedSize: b, scrollToIndex: x, startIndexOverscan: S, startIndexVisible: C, stopIndexOverscan: w, stopIndexVisible: T } = Ct({
 		containerElement: g,
 		containerStyle: f,
 		defaultContainerSize: n,
@@ -1449,7 +1465,7 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		onResize: i,
 		overscanCount: o
 	});
-	he(r, () => ({
+	ge(r, () => ({
 		get element() {
 			return g;
 		},
@@ -1464,12 +1480,12 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 				top: r
 			});
 		}
-	}), [g, x]), ct(() => {
+	}), [g, x]), ft(() => {
 		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(Tt, n), !0;
+			return e.setAttribute(Dt, n), !0;
 		});
 		if (v) return l.observeRowElements(e);
 	}, [
@@ -1478,7 +1494,7 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		l,
 		S,
 		w
-	]), F(() => {
+	]), I(() => {
 		S >= 0 && w >= 0 && a && a({
 			startIndex: C,
 			stopIndex: T
@@ -1497,7 +1513,7 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		let e = [];
 		if (c > 0) for (let t = S; t <= w; t++) {
 			let n = y(t);
-			e.push(/* @__PURE__ */ me(h, {
+			e.push(/* @__PURE__ */ P(h, {
 				...m,
 				ariaAttributes: {
 					"aria-posinset": t + 1,
@@ -1532,7 +1548,7 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 			zIndex: -1
 		}
 	});
-	return me(d, {
+	return P(d, {
 		role: "list",
 		...p,
 		className: t,
@@ -1546,123 +1562,135 @@ function Et({ children: e, className: t, defaultHeight: n = 0, listRef: r, onRes
 		}
 	}, E, e, D);
 }
-var Dt = {
+var kt = {
 	divider: "_divider_13nxz_1",
 	item: "_item_13nxz_5",
 	itemIcon: "_itemIcon_13nxz_15",
 	checkIcon: "_checkIcon_13nxz_19",
 	stateLabel: "_stateLabel_13nxz_23"
-}, Ot = 44, kt = 8, At = ({ index: e, style: t, ariaAttributes: n, items: r, selectedDeploymentId: i, labelClassName: a, query: s, onSelect: c }) => {
-	let d = r[e], f = ot(d.iconUrl, d.type, d.displayName ?? d.id, u.SM), p = d.id === i;
+}, At = 44, jt = 8, Mt = ({ index: e, style: t, ariaAttributes: n, items: r, selectedDeploymentId: i, labelClassName: a, query: s, onSelect: c }) => {
+	let d = r[e], f = ut(d.iconUrl, d.type, d.displayName ?? d.id, u.SM), p = d.id === i;
 	return /* @__PURE__ */ V("div", {
 		style: t,
 		...n,
 		children: /* @__PURE__ */ V(l, {
 			type: "button",
-			className: o(Dt.item, "flex h-full w-full items-center gap-3 px-4"),
+			className: o(kt.item, "h-full w-full gap-3 px-4"),
 			iconBefore: /* @__PURE__ */ V("span", {
-				className: Dt.itemIcon,
+				className: kt.itemIcon,
 				children: f
 			}),
 			label: /* @__PURE__ */ H("span", {
 				className: "flex flex-1 items-center justify-between gap-2",
-				children: [/* @__PURE__ */ V(E, {
+				children: [/* @__PURE__ */ V(D, {
 					text: d.displayName ?? d.id,
 					query: s,
 					maxLines: 1,
 					className: o(a, "min-w-0 flex-1 text-start")
-				}), p && /* @__PURE__ */ V(re, {
+				}), p && /* @__PURE__ */ V(j, {
 					size: u.SM,
-					className: Dt.checkIcon,
+					className: kt.checkIcon,
 					"aria-hidden": !0
 				})]
 			}),
 			onClick: () => c(d.id)
 		})
 	});
-}, jt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: a, selectedDeploymentId: s, onSelect: c, loadingLabel: l, errorLabel: u, emptyLabel: d, style: f, titleClassName: p = "dial-body-semi-text", labelClassName: m = "dial-small-text" }) => {
-	let [h, g] = z("");
-	F(() => {
-		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: m = "dial-body-semi-text", labelClassName: h = "dial-small-text", colors: g }) => {
+	let [_, v] = z("");
+	I(() => {
+		e || v("");
 	}, [e]);
-	let _ = a && a.length > 0, v = l !== void 0, b = !_ && !v ? u ?? d : void 0, x = _ ? at(a, h) : [];
-	return /* @__PURE__ */ H(U, {
+	let b = s && s.length > 0, x = u !== void 0, S = !b && !x ? d ?? f : void 0, C = b ? lt(s, _) : [], w = (e) => {
+		l(e), i();
+	}, E = a({
+		"--ci-sheet-divider": g?.divider,
+		"--ci-sheet-text": g?.itemText,
+		"--ci-sheet-item-hover": g?.itemHoverBg,
+		"--ci-sheet-item-active": g?.itemActiveBg,
+		"--ci-sheet-icon": g?.itemIcon,
+		"--ci-check-icon": g?.checkIcon
+	});
+	return /* @__PURE__ */ V(W, {
 		isOpen: e,
 		title: t,
 		closeLabel: n,
 		onClose: i,
-		style: f,
-		titleClassName: p,
+		style: p,
+		titleClassName: m,
 		className: "max-h-[80dvh]",
-		children: [_ && !v && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
-			className: "flex-shrink-0 px-4 py-[10px]",
-			children: /* @__PURE__ */ V(y, {
-				value: h,
-				placeholder: r,
-				size: T.Standard,
-				onChange: g
-			})
-		}), /* @__PURE__ */ V("div", { className: o(Dt.divider, "h-px flex-shrink-0") })] }), v ? /* @__PURE__ */ V(rt, { loadingLabel: l }) : b ? /* @__PURE__ */ V("div", {
-			role: "list",
-			className: o(Dt.stateLabel, m, "px-4 py-4"),
-			children: b
-		}) : /* @__PURE__ */ V(Et, {
-			role: "list",
-			className: "overflow-y-auto",
-			style: { height: Math.min(x.length, kt) * Ot },
-			rowComponent: At,
-			rowCount: x.length,
-			rowHeight: Ot,
-			rowProps: {
-				items: x,
-				selectedDeploymentId: s,
-				labelClassName: m,
-				query: h,
-				onSelect: (e) => {
-					c(e), i();
+		colors: g?.shell,
+		children: /* @__PURE__ */ H("div", {
+			className: "contents",
+			style: E,
+			children: [b && !x && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
+				className: "flex-shrink-0 px-4 py-[10px]",
+				children: /* @__PURE__ */ V(y, {
+					value: _,
+					placeholder: r,
+					size: T.Standard,
+					onChange: v
+				})
+			}), /* @__PURE__ */ V("div", { className: o(kt.divider, "h-px flex-shrink-0") })] }), x ? /* @__PURE__ */ V(st, { loadingLabel: u }) : S ? /* @__PURE__ */ V("div", {
+				role: "list",
+				className: o(kt.stateLabel, h, "px-4 py-4"),
+				children: S
+			}) : /* @__PURE__ */ V(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: h,
+					query: _,
+					onSelect: w
 				}
-			}
-		})]
+			})]
+		})
 	});
-}, Mt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isInputDisabled: s = !1, isDisabled: c = !1, style: l, modelPickerOverlay: d, isPickerOpen: m, onPickerToggle: g, onPickerOpenChange: _ }) => {
-	let [v, y] = z(!1), { selectorIcon: b, selectorAriaLabel: x, selectedLabel: S, menuItems: C, menuHeader: E, onOpenChange: D } = st({
+}, Pt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isInputDisabled: s = !1, isDisabled: c = !1, style: l, modelPickerOverlay: d, isPickerOpen: m, onPickerToggle: h, onPickerOpenChange: g }) => {
+	let [_, v] = z(!1), { selectorIcon: y, selectorAriaLabel: b, selectedLabel: x, menuItems: S, menuHeader: C, onOpenChange: D } = dt({
 		deployments: e,
 		selectedDeploymentId: t,
 		onDeploymentChange: n,
 		modelSelectorLabels: r
 	});
 	if (!e) return null;
-	let O = i || c ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, k = /* @__PURE__ */ V(ie, {
+	let O = i || c ? "pointer-events-none opacity-50 cursor-not-allowed" : void 0, k = /* @__PURE__ */ V(ae, {
 		size: u.SM,
-		className: X.modelSelectorCaret,
+		className: q.modelSelectorCaret,
 		"aria-hidden": !0
 	});
 	return a ? /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V(w, {
-		tooltip: S,
-		children: /* @__PURE__ */ V(h, {
+		tooltip: x,
+		children: /* @__PURE__ */ V(E, {
 			icon: /* @__PURE__ */ H("div", {
 				className: "flex items-center gap-1",
-				children: [b, k]
+				children: [y, k]
 			}),
-			"aria-label": x,
+			"aria-label": b,
 			onClick: () => {
-				c || y(!0);
+				c || v(!0);
 			},
-			className: o(X.modelSelectorButton, O)
+			className: o(q.modelSelectorButton, O)
 		})
-	}), d ? /* @__PURE__ */ V(U, {
-		isOpen: v,
+	}), d ? /* @__PURE__ */ V(W, {
+		isOpen: _,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
-		onClose: () => y(!1),
+		onClose: () => v(!1),
 		style: l,
-		children: d(() => y(!1))
-	}) : /* @__PURE__ */ V(jt, {
-		isOpen: v,
+		children: d(() => v(!1))
+	}) : /* @__PURE__ */ V(Nt, {
+		isOpen: _,
 		title: r?.ariaLabel ?? "Select model",
 		closeLabel: r?.closeLabel ?? "Close",
 		searchPlaceholder: r?.searchPlaceholder ?? "Search",
-		onClose: () => y(!1),
+		onClose: () => v(!1),
 		deployments: e,
 		selectedDeploymentId: t,
 		onSelect: (e) => n?.(e),
@@ -1674,33 +1702,33 @@ var Dt = {
 		placement: "top-end",
 		matchReferenceWidth: !1,
 		open: m,
-		onOpenChange: _,
+		onOpenChange: g,
 		trigger: [],
 		outsideClosable: !0,
-		renderOverlay: () => d(() => _?.(!1)),
+		renderOverlay: () => d(() => g?.(!1)),
 		listClassName: "cp-dropdown-overlay !w-[320px]",
 		children: /* @__PURE__ */ V(w, {
-			tooltip: S,
+			tooltip: x,
 			children: /* @__PURE__ */ H("button", {
 				type: "button",
-				"aria-label": x,
-				className: o("flex items-center justify-center gap-1 rounded-md p-2", X.modelSelectorButton, s || i || c ? O : void 0, (s || c) && X.modelSelectorButtonDisabled),
+				"aria-label": b,
+				className: o("flex items-center justify-center gap-1 rounded-full p-2", q.modelSelectorButton, s || i || c ? O : void 0, (s || c) && q.modelSelectorButtonDisabled),
 				onClick: () => {
-					!s && !i && !c && g?.();
+					!s && !i && !c && h?.();
 				},
-				children: [b, k]
+				children: [y, k]
 			})
 		})
 	}) : /* @__PURE__ */ V("div", {
 		className: o(c && O),
 		"aria-disabled": c || void 0,
 		children: /* @__PURE__ */ V(w, {
-			tooltip: S,
+			tooltip: x,
 			children: /* @__PURE__ */ V(p, {
-				icon: b,
-				ariaLabel: x,
-				items: C,
-				menuHeader: E,
+				icon: y,
+				ariaLabel: b,
+				items: S,
+				menuHeader: C,
 				placement: "bottom-end",
 				matchReferenceWidth: !1,
 				listClassName: "cp-dropdown-overlay !w-[240px] !max-h-80",
@@ -1708,242 +1736,244 @@ var Dt = {
 				size: T.Standard,
 				caretIcon: k,
 				iconClassName: s || c ? O : void 0,
-				buttonClassName: o("bg-transparent", X.modelSelectorButton, (s || c) && O && X.modelSelectorButtonDisabled)
+				buttonClassName: o("bg-transparent", q.modelSelectorButton, (s || c) && O && q.modelSelectorButtonDisabled)
 			})
 		})
 	});
-}, Nt = 160, Pt = ({ message: e = "", messageRevision: t, onSend: n, onUploadAttachment: r, onStop: i, isStreaming: l = !1, onChange: d, onAttachmentsChange: f, placeholder: p = "Type a message...", ariaLabel: m, attachLabel: g = "Attach file", fileAccept: _, addMenuTitle: v = "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: te = [], onDropFilesConsumed: ne, pendingAttachments: re = [], onPendingAttachmentsConsumed: ie, pasteTextThreshold: j = 4e3, deployments: M, selectedDeploymentId: se, onDeploymentChange: ce, modelSelectorLabels: le, initialAttachments: ue = [], isStacked: de = !1, hideAddButton: fe = !1, hideAttachFile: pe = !1, hideActionBar: me = !1, renderFooterActions: N, isInputDisabled: F = !1, isModelSelectorDisabled: he = !1, isSendDisabled: I = !1, isAudioMessageSupported: ge = !1, sendOnEnter: _e = Re.Enter, prefixAttachments: ve = [], onRemovePrefixAttachment: be, chatSettings: xe, toolsMenuItems: Se, onToolToggle: Ce, toolsMenuTitle: Te, toolsBackLabel: Ee, toolsChipLabels: U, autoFocus: De = !1, messageHistory: Ae, onDialFileSystemClick: je, dialFileSystemLabel: Pe, validateAttachment: Fe, onAttachmentClick: Ie, modelPickerOverlay: ze, maximumAttachmentsAmount: Be, onAttachmentsLimitExceeded: Ve, isAttachmentsEnabled: W = !0, usageLimitsSlot: He, onMessageTooLong: Ue }) => {
-	let We = s(), [Ge, G] = z(!1), qe = Me(Ae), Je = L(() => a({
-		"--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]), K = L(() => je ? [{
+}, Ft = 160, It = ({ message: e = "", messageRevision: t, onSend: n, onUploadAttachment: r, onStop: i, isStreaming: l = !1, onChange: d, 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, timerAriaLabel: D, colors: O, typography: k, className: A, pendingDropFiles: ee = [], onDropFilesConsumed: te, pendingAttachments: re = [], onPendingAttachmentsConsumed: ie, pasteTextThreshold: j = 4e3, deployments: ae, selectedDeploymentId: M, onDeploymentChange: ce, modelSelectorLabels: le, initialAttachments: N = [], isStacked: ue = !1, hideAddButton: de = !1, hideAttachFile: fe = !1, hideActionBar: pe = !1, renderFooterActions: me, isInputDisabled: P = !1, isModelSelectorDisabled: he = !1, isSendDisabled: I = !1, isAudioMessageSupported: ge = !1, sendOnEnter: _e = ze.Enter, prefixAttachments: U = [], onRemovePrefixAttachment: ve, chatSettings: ye, toolsMenuItems: xe, onToolToggle: Se, toolsMenuTitle: Ce, toolsBackLabel: we, toolsChipLabels: Ee, autoFocus: De = !1, messageHistory: W, onDialFileSystemClick: Oe, dialFileSystemLabel: je, validateAttachment: Me, onAttachmentClick: Fe, modelPickerOverlay: Ie, maximumAttachmentsAmount: Le, onAttachmentsLimitExceeded: Be, isAttachmentsEnabled: Ve = !0, usageLimitsSlot: He, onMessageTooLong: Ue }) => {
+	let We = s(), [Ge, Ke] = z(!1), qe = Ne(W), G = L(() => a({
+		"--ci-bg": O?.background,
+		"--ci-text": O?.text,
+		"--ci-border": O?.border,
+		"--ci-border-focus": O?.borderFocus,
+		"--ci-placeholder": O?.placeholder,
+		"--ci-text-disabled": O?.textDisabled,
+		"--ci-model-selector-caret-color": O?.modelSelectorCaret,
+		"--ci-model-selector-hover-bg": O?.modelSelectorHoverBg,
+		"--ci-model-selector-disabled-color": O?.modelSelectorDisabled,
+		"--ci-voice-error": O?.voiceError,
+		"--ci-voice-waveform": O?.voiceWaveform,
+		"--ci-voice-accent": O?.voiceAccent
+	}), [O]), Ye = L(() => Oe ? [{
 		key: "dial-fs",
-		label: Pe ?? "DIAL file system",
-		icon: /* @__PURE__ */ V(ae, {
+		label: je ?? "DIAL file system",
+		icon: /* @__PURE__ */ V(oe, {
 			size: c,
 			"aria-hidden": !0
 		}),
-		onClick: je
-	}] : [], [je, Pe]), { message: q, setMessage: J, textareaRef: Y, isMultiLine: Xe } = Ne({
+		onClick: Oe
+	}] : [], [Oe, je]), { message: K, setMessage: J, textareaRef: Ze, isMultiLine: Qe } = Pe({
 		messageProp: e,
 		messageRevision: t
-	}), { attachments: Z, buildAttachments: et, addAttachments: tt, resetAttachments: nt, handleRemove: rt, handleRetry: it, handleExpand: at, hasBlockedAttachments: ot } = Oe({
-		initialAttachments: ue,
+	}), { attachments: Y, buildAttachments: $e, addAttachments: rt, resetAttachments: it, handleRemove: at, handleRetry: ot, handleExpand: st, hasBlockedAttachments: ct } = ke({
+		initialAttachments: N,
 		onUploadAttachment: r,
 		onAttachmentsChange: f,
-		validateAttachment: Fe,
-		pendingDropFiles: te,
-		onDropFilesConsumed: ne,
+		validateAttachment: Me,
+		pendingDropFiles: ee,
+		onDropFilesConsumed: te,
 		pendingAttachments: re,
 		onPendingAttachmentsConsumed: ie,
-		onExpandPastedText: P((e) => {
+		onExpandPastedText: F((e) => {
 			J((t) => t ? `${t}\n${e}` : e);
 		}, [J]),
-		maximumAttachmentsAmount: Be,
-		baseAttachmentsAmount: ve.length,
-		onAttachmentsLimitExceeded: Ve
-	}), { state: st, analyserNodeRef: ct, elapsedSeconds: lt, errorMessage: ut, startRecording: dt, stopRecording: ft, discardRecording: pt } = Le({ onAttachAudio: P((e) => {
-		tt(et([e]));
-	}, [tt, et]) }), mt = R(null), Q = R(null), { handlePaste: ht } = we(tt, W ? j : Infinity), gt = P((e) => {
-		if (!W) {
+		maximumAttachmentsAmount: Le,
+		baseAttachmentsAmount: U.length,
+		onAttachmentsLimitExceeded: Be
+	}), { state: lt, analyserNodeRef: ut, elapsedSeconds: dt, errorMessage: ft, startRecording: pt, stopRecording: mt, discardRecording: ht } = Re({ onAttachAudio: F((e) => {
+		rt($e([e]));
+	}, [rt, $e]) }), X = R(null), gt = R(null), { handlePaste: _t } = Te(rt, Ve ? j : Infinity), Z = F((e) => {
+		if (!Ve) {
 			let t = e.clipboardData.getData("text/plain");
 			t.length >= j && Ue?.(t.length, j);
 		}
-		ht(e);
+		_t(e);
 	}, [
-		W,
+		Ve,
 		j,
 		Ue,
-		ht
-	]), _t = q.trim().length > 0 || Z.length > 0, vt = _t && !ot && !I, { shouldRender: yt, isExiting: bt, instanceKey: xt } = ke(!l && _t, Nt), St = (Se?.some((e) => e.isSelected) ?? !1) && Ce != null, $ = de || q.includes("\n") || Xe || St, Ct = M === void 0 || se != null, wt = async () => {
+		_t
+	]), Q = K.trim().length > 0 || Y.length > 0, vt = Q && !ct && !I, { shouldRender: yt, isExiting: bt, instanceKey: xt } = Ae(!l && Q, Ft), St = (xe?.some((e) => e.isSelected) ?? !1) && Se != null, $ = ue || K.includes("\n") || Qe || St, Ct = ae === void 0 || M != null, wt = L(() => ge && !bt && !l, [
+		ge,
+		bt,
+		l
+	]), Tt = async () => {
 		if (I) return;
-		if (!W && q.length >= j) {
-			Ue?.(q.length, j);
+		if (!Ve && K.length >= j) {
+			Ue?.(K.length, j);
 			return;
 		}
-		let e = q, t = Z;
+		let e = K, t = Y;
 		J(""), qe.reset();
 		try {
 			await n?.(e, t), t.forEach((e) => {
 				e.previewUrl && URL.revokeObjectURL(e.previewUrl), e.playUrl && URL.revokeObjectURL(e.playUrl);
-			}), nt([]);
+			}), it([]);
 		} catch {
-			J(e), nt(t);
+			J(e), it(t);
 		}
-	}, Tt = (e) => {
-		if (!e.nativeEvent.isComposing && !F && !l && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-			let t = e.currentTarget.selectionStart ?? 0, n = qe.navigate(e.key === "ArrowUp" ? "up" : "down", q, t);
+	}, Et = (e) => {
+		if (!e.nativeEvent.isComposing && !P && !l && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			let t = e.currentTarget.selectionStart ?? 0, n = qe.navigate(e.key === "ArrowUp" ? "up" : "down", K, t);
 			if (n !== null) {
 				e.preventDefault(), J(n);
 				return;
 			}
 		}
-		e.key === "Enter" && (_e === Re.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey) && (e.preventDefault(), !l && vt && Ct && !F && wt());
-	}, Et = (e) => {
+		e.key === "Enter" && (_e === ze.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey) && (e.preventDefault(), !l && vt && Ct && !P && Tt());
+	}, Dt = (e) => {
 		let t = Array.from(e.target.files ?? []);
 		if (t.length === 0) return;
-		let n = et(t);
-		e.target.value = "", tt(n);
+		let n = $e(t);
+		e.target.value = "", rt(n);
 	};
-	if (st !== "idle") return /* @__PURE__ */ V(Ze, {
-		state: st,
-		analyserNodeRef: ct,
-		elapsedSeconds: lt,
-		errorMessage: ut,
-		onStop: ft,
-		onDiscard: pt,
-		stopLabel: E,
-		discardLabel: D,
-		timerLabel: O,
-		style: Je,
-		className: ee
+	if (lt !== "idle") return /* @__PURE__ */ V(et, {
+		state: lt,
+		analyserNodeRef: ut,
+		elapsedSeconds: dt,
+		errorMessage: ft,
+		onStop: mt,
+		onDiscard: ht,
+		stopLabel: T,
+		discardLabel: E,
+		timerLabel: D,
+		style: G,
+		className: A
 	});
-	let Dt = /* @__PURE__ */ V("textarea", {
-		className: o(X.textarea, A?.fontClassName, "max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent outline-none [field-sizing:content]"),
-		ref: Y,
+	let Ot = /* @__PURE__ */ V("textarea", {
+		className: o(q.textarea, k?.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: Ze,
 		autoFocus: De,
-		value: q,
+		value: K,
 		onChange: (e) => {
 			J(e.target.value), qe.notifyChange(), d?.(e.target.value);
 		},
-		onKeyDown: Tt,
-		onPaste: gt,
+		onKeyDown: Et,
+		onPaste: Z,
 		placeholder: p,
 		"aria-label": m,
-		disabled: F,
+		disabled: P,
 		rows: 1
 	});
 	return /* @__PURE__ */ H("div", {
-		ref: Q,
-		style: Je,
-		className: o(X.wrapper, F && X.wrapperDisabled, "flex min-h-[56px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border", Z.length > 6 ? "py-3 ps-3" : "p-3", ee),
-		children: [(ve.length > 0 || Z.length > 0) && /* @__PURE__ */ V(ye, {
-			attachments: [...ve, ...Z],
+		ref: gt,
+		style: G,
+		className: o(q.wrapper, P && q.wrapperDisabled, "flex min-h-[64px] w-full max-w-[748px] flex-col justify-center gap-3 rounded-xl border shadow-md", Y.length > 6 ? "py-3 ps-3" : "p-3", A),
+		children: [(U.length > 0 || Y.length > 0) && /* @__PURE__ */ V(be, {
+			attachments: [...U, ...Y],
 			onRemove: (e) => {
-				ve.some((t) => t.id === e) ? be?.(e) : rt(e);
+				U.some((t) => t.id === e) ? ve?.(e) : at(e);
 			},
-			onRetry: it,
-			onExpand: at,
+			onRetry: ot,
+			onExpand: st,
 			labels: {
-				removeLabel: x,
-				retryLabel: S
+				removeLabel: b,
+				retryLabel: x
 			},
-			onAttachmentClick: Ie == null ? void 0 : (e) => {
-				let t = [...ve, ...Z].find((t) => t.id === e);
-				t != null && Ie(t);
+			onAttachmentClick: Fe == null ? void 0 : (e) => {
+				let t = [...U, ...Y].find((t) => t.id === e);
+				t != null && Fe(t);
 			}
-		}), me ? $ && Dt : /* @__PURE__ */ H("div", {
+		}), pe ? $ && Ot : /* @__PURE__ */ H("div", {
 			className: o("flex items-center gap-2", $ ? "flex-wrap" : "flex-wrap desktop:flex-nowrap"),
 			children: [
-				!fe && /* @__PURE__ */ H("div", {
+				!de && /* @__PURE__ */ H("div", {
 					className: o("flex", "order-2", !$ && "desktop:order-1"),
 					children: [/* @__PURE__ */ V("input", {
-						ref: mt,
+						ref: X,
 						type: "file",
 						multiple: !0,
-						accept: _,
+						accept: g,
 						className: "sr-only",
 						"aria-hidden": !0,
 						tabIndex: -1,
-						onChange: Et
-					}), /* @__PURE__ */ V(Ke, {
-						onAttachClick: pe ? void 0 : () => mt.current?.click(),
-						attachLabel: g,
-						addMenuTitle: v,
-						menuTitle: y,
-						menuCloseLabel: b,
-						style: Je,
-						isDisabled: F,
-						chatSettings: xe,
-						extraMenuItems: K,
-						toolsMenuItems: Se,
-						onToolToggle: Ce,
-						toolsMenuTitle: Te,
-						toolsBackLabel: Ee
+						onChange: Dt
+					}), /* @__PURE__ */ V(Je, {
+						onAttachClick: fe ? void 0 : () => X.current?.click(),
+						attachLabel: h,
+						addMenuTitle: _,
+						menuTitle: v,
+						menuCloseLabel: y,
+						style: G,
+						isDisabled: P,
+						chatSettings: ye,
+						extraMenuItems: Ye,
+						toolsMenuItems: xe,
+						onToolToggle: Se,
+						toolsMenuTitle: Ce,
+						toolsBackLabel: we
 					})]
 				}),
 				$ && St && /* @__PURE__ */ V("div", {
 					className: "order-3 min-w-0 flex-1",
-					children: /* @__PURE__ */ V(Ye, {
-						items: Se ?? [],
-						onToolToggle: Ce,
+					children: /* @__PURE__ */ V(Xe, {
+						items: xe ?? [],
+						onToolToggle: Se,
 						isMobile: We,
-						countLabel: U?.countLabel,
-						removeLabel: U?.removeLabel
+						countLabel: Ee?.countLabel,
+						removeLabel: Ee?.removeLabel
 					})
 				}),
 				/* @__PURE__ */ V("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: Dt
+					children: Ot
 				}),
 				/* @__PURE__ */ H("div", {
 					className: o("flex flex-shrink-0 items-center gap-2", $ && St ? "order-4" : "order-3", "ms-auto", !$ && "desktop:ms-0"),
-					children: [N ? N({
+					children: [me ? me({
 						canSend: vt,
-						onSend: wt
+						onSend: Tt
 					}) : /* @__PURE__ */ H(B, { children: [
 						He,
-						/* @__PURE__ */ V(Mt, {
-							deployments: M,
-							selectedDeploymentId: se,
+						/* @__PURE__ */ V(Pt, {
+							deployments: ae,
+							selectedDeploymentId: M,
 							onDeploymentChange: ce,
 							modelSelectorLabels: le,
 							isStreaming: l,
 							isMobile: We,
-							isInputDisabled: F,
+							isInputDisabled: P,
 							isDisabled: he,
-							style: Je,
-							modelPickerOverlay: ze,
+							style: G,
+							modelPickerOverlay: Ie,
 							isPickerOpen: Ge,
-							onPickerToggle: () => G((e) => !e),
-							onPickerOpenChange: G
+							onPickerToggle: () => Ke((e) => !e),
+							onPickerOpenChange: Ke
 						}),
-						l && i ? /* @__PURE__ */ V($e, {
+						l && i ? /* @__PURE__ */ V(nt, {
 							onStop: i,
-							ariaLabel: w
-						}) : !l && yt && /* @__PURE__ */ V(Qe, {
-							onSend: wt,
-							isDisabled: !Ct || ot || I,
-							ariaLabel: C,
+							ariaLabel: C
+						}) : !l && yt && /* @__PURE__ */ V(tt, {
+							onSend: Tt,
+							isDisabled: !Ct || ct || I,
+							ariaLabel: S,
 							isExiting: bt
 						}, xt)
-					] }), ge && !bt && /* @__PURE__ */ V(h, {
-						icon: /* @__PURE__ */ V(oe, {
+					] }), wt && /* @__PURE__ */ V(ne, {
+						icon: /* @__PURE__ */ V(se, {
 							size: u.LG,
 							"aria-hidden": !0
 						}),
-						"aria-label": T,
+						"aria-label": w,
 						className: "size-8 flex-shrink-0",
-						onClick: dt,
-						disabled: F || l
+						onClick: pt,
+						disabled: P || l
 					})]
 				})
 			]
 		})]
 	});
-}, Ft = { welcome: "_welcome_n2ph8_1" }, It = ({ 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 }) => {
+}, 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__ */ H("div", {
-		style: a({
-			"--ci-root-bg": u?.background,
-			"--ci-welcome-color": u?.welcomeText
-		}),
+		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__ */ V("h1", {
-			className: o(Ft.welcome, "m-0 text-center", d?.welcomeClassName),
+			className: o(Lt.welcome, "m-0 text-center", d?.welcomeClassName || "dial-display2-text"),
 			children: n
 		}), /* @__PURE__ */ V("div", {
 			className: "relative w-full max-w-[748px]",
-			children: /* @__PURE__ */ V(Pt, {
+			children: /* @__PURE__ */ V(It, {
 				placeholder: t,
 				isStreaming: e,
 				isInputDisabled: c,
@@ -1954,58 +1984,58 @@ var Dt = {
 			})
 		})]
 	});
-}, Lt = ({ 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: v, onDropFilesConsumed: y, validateAttachment: b, isAttachmentsEnabled: x, hideAttachFile: S = !1, fileAccept: C, maximumAttachmentsAmount: w, onAttachmentsLimitExceeded: T, onDialFileSystemClick: E, dialFileSystemLabel: O, pendingAttachments: A, onPendingAttachmentsConsumed: ee, onAttachmentClick: te, pasteTextThreshold: ne, onMessageTooLong: re }) => {
-	let ie = R(null), [j, oe] = z([]);
-	F(() => {
-		v?.length && (oe(v), y?.());
+}, 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: v, onDropFilesConsumed: y, validateAttachment: b, isAttachmentsEnabled: x, hideAttachFile: S = !1, fileAccept: C, maximumAttachmentsAmount: w, onAttachmentsLimitExceeded: T, onDialFileSystemClick: E, dialFileSystemLabel: D, pendingAttachments: k, onPendingAttachmentsConsumed: ee, onAttachmentClick: te, pasteTextThreshold: ne, onMessageTooLong: re }) => {
+	let ie = R(null), [j, ae] = z([]);
+	I(() => {
+		v?.length && (ae(v), y?.());
 	}, [v, y]);
-	let [M, se] = z(e ?? ""), [ce, le] = z([]), [ue, de] = z(t), fe = ce.some((e) => e.status === r.Loading || e.status === r.Error), pe = (M.trim().length > 0 || ce.length > 0 || ue.length > 0) && !fe, me = (e) => {
-		de((t) => t.filter((t) => t.id !== e));
-	}, N = P((e, t) => {
-		i(e, ue, t);
-	}, [ue, i]), he = () => {
-		if (pe) {
+	let [M, se] = z(e ?? ""), [ce, le] = z([]), [N, ue] = z(t), de = ce.some((e) => e.status === r.Loading || e.status === r.Error), fe = (M.trim().length > 0 || ce.length > 0 || N.length > 0) && !de, pe = (e) => {
+		ue((t) => t.filter((t) => t.id !== e));
+	}, me = F((e, t) => {
+		i(e, N, t);
+	}, [N, i]), P = () => {
+		if (fe) {
 			if (!x && M.length >= (ne ?? 4e3)) {
 				re?.(M.length, ne ?? 4e3);
 				return;
 			}
-			N(M, ce);
+			me(M, ce);
 		}
-	}, I = P(() => oe([]), []), ge = P((e) => {
+	}, he = F(() => ae([]), []), ge = F((e) => {
 		let t = Array.from(e.target.files ?? []);
-		t.length !== 0 && (e.target.value = "", oe(t));
+		t.length !== 0 && (e.target.value = "", ae(t));
 	}, []), _e = L(() => E ? [{
 		key: "dial-fs",
-		label: O ?? "DIAL file system",
-		icon: /* @__PURE__ */ V(ae, {
+		label: D ?? "DIAL file system",
+		icon: /* @__PURE__ */ V(oe, {
 			size: c,
 			"aria-hidden": !0
 		}),
 		onClick: E
-	}] : [], [E, O]);
+	}] : [], [E, D]);
 	return /* @__PURE__ */ H("div", {
 		className: o("flex w-full flex-col gap-2", _),
-		children: [/* @__PURE__ */ V(Pt, {
+		children: [/* @__PURE__ */ V(It, {
 			message: e,
 			ariaLabel: u,
 			isStacked: !0,
 			hideActionBar: !0,
 			pendingDropFiles: j,
-			onDropFilesConsumed: I,
-			onSend: N,
+			onDropFilesConsumed: he,
+			onSend: me,
 			onUploadAttachment: a,
 			onChange: se,
 			onAttachmentsChange: le,
 			removeLabel: d,
 			retryLabel: f,
 			className: "max-w-full",
-			prefixAttachments: ue,
-			onRemovePrefixAttachment: me,
+			prefixAttachments: N,
+			onRemovePrefixAttachment: pe,
 			validateAttachment: b,
 			isAttachmentsEnabled: x,
 			maximumAttachmentsAmount: w,
 			onAttachmentsLimitExceeded: T,
-			pendingAttachments: A,
+			pendingAttachments: k,
 			onPendingAttachmentsConsumed: ee,
 			onAttachmentClick: te,
 			pasteTextThreshold: ne,
@@ -2023,7 +2053,7 @@ var Dt = {
 					"aria-hidden": !0,
 					tabIndex: -1,
 					onChange: ge
-				}), /* @__PURE__ */ V(Ke, {
+				}), /* @__PURE__ */ V(Je, {
 					onAttachClick: () => ie.current?.click(),
 					attachLabel: m,
 					addMenuTitle: p,
@@ -2033,17 +2063,17 @@ var Dt = {
 				})] })
 			}), /* @__PURE__ */ H("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ V(D, {
+				children: [/* @__PURE__ */ V(O, {
 					label: s,
 					onClick: n
-				}), /* @__PURE__ */ V(k, {
+				}), /* @__PURE__ */ V(A, {
 					label: l,
-					onClick: he,
-					disabled: !pe
+					onClick: P,
+					disabled: !fe
 				})]
 			})]
 		})]
 	});
 };
 //#endregion
-export { ge as AttachmentCard, _e as AttachmentGroup, ve as AttachmentTray, U as BottomSheetShell, We as ChatSettingsModal, It as ConversationInput, Lt as EditMessageInput, be as FileDndOverlay, Pt as Input, Re as SendOnEnter, Ce as getAttachmentIcon };
+export { U as AttachmentCard, ve as AttachmentGroup, ye as AttachmentTray, W as BottomSheetShell, Ke as ChatSettingsModal, Rt as ConversationInput, zt as EditMessageInput, xe as FileDndOverlay, It as Input, ze as SendOnEnter, we as getAttachmentIcon };