@epam/ai-dial-conversation-messages 1.1.0-dev.18 → 1.1.0-dev.182

package/index.js

@@ -1,286 +1,234 @@
-import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, Highlight as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as p, DialGhostIconButton as m, DialInput as h, DialLinkButton as g, DialNotification as _, DialPopup as v, DialPrimaryButton as y, DialRadioGroup as b, DialRoundedButton as x, DialSkeleton as S, DialSkeletonVariant as C, DialSlider as w, DialTag as T, DialTooltip as E, ElementSize as D, PopupSize as O, RadioGroupOrientation as k } from "@epam/ai-dial-ui-kit";
-import { IconCheck as A, IconChevronDown as j, IconChevronUp as M, IconClipboard as N, IconCopy as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as ee, IconFileTypeHtml as te, IconFileTypeJpg as ne, IconFileTypeJs as re, IconFileTypeJsx as ie, IconFileTypePdf as ae, IconFileTypePhp as oe, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as le, IconFileTypeSql as ue, IconFileTypeSvg as de, IconFileTypeTs as fe, IconFileTypeTsx as pe, IconFileTypeTxt as me, IconFileTypeVue as he, IconFileTypeXls as ge, IconFileTypeXml as _e, IconFileTypeZip as ve, IconMarkdown as ye, IconMusic as be, IconPaperclip as xe, IconPencilMinus as Se, IconPhoto as H, IconRefresh as Ce, IconReload as we, IconTerminal2 as Te, IconThumbDown as Ee, IconThumbUp as De, IconTrashX as Oe, IconVideo as ke, IconX as Ae } from "@tabler/icons-react";
+import { AttachmentErrorReason as e, AttachmentType as t, CopyIconButton as n, DeploymentIcon as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
+import { DIAL_ICON_SIZE as p, DialRadioGroup as m, DialSlider as h, DialTooltip as g, ElementSize as _, GhostIconButton as v, Highlight as y, InfoMessageNotification as b, Input as x, LinkButton as S, NeutralButton as C, Popup as w, PopupSize as T, PrimaryButton as E, RadioGroupOrientation as D, Skeleton as O, SkeletonVariant as k, Spinner as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
+import { IconChevronDown as M, IconChevronUp as N, IconClipboard as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as H, IconFileTypeHtml as U, IconFileTypeJpg as W, IconFileTypeJs as ee, IconFileTypeJsx as te, IconFileTypePdf as ne, IconFileTypePhp as re, IconFileTypePng as ie, IconFileTypePpt as ae, IconFileTypeRs as oe, IconFileTypeSql as se, IconFileTypeSvg as ce, IconFileTypeTs as le, IconFileTypeTsx as ue, IconFileTypeTxt as de, IconFileTypeVue as fe, IconFileTypeXls as pe, IconFileTypeXml as me, IconFileTypeZip as he, IconMarkdown as ge, IconMusic as _e, IconPaperclip as ve, IconPencilMinus as ye, IconPhoto as G, IconRefresh as be, IconReload as xe, IconTerminal2 as Se, IconThumbDown as Ce, IconThumbUp as we, IconTrashX as Te, IconVideo as Ee, IconX as De } from "@tabler/icons-react";
 import "react-dom";
-import { memo as je, useCallback as U, useEffect as Me, useId as Ne, useMemo as W, useRef as Pe, useState as G } from "react";
-import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
+import { memo as Oe, useCallback as K, useEffect as ke, useId as Ae, useMemo as je, useRef as Me, useState as q } from "react";
+import { Fragment as J, jsx as Y, jsxs as X } from "react/jsx-runtime";
 //#region ../attachment-input/dist/index.js
-var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /* @__PURE__ */ function(e) {
-	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
-}({}), Ie = (e) => {
+var Ne = (e) => {
+	if (e == null) return "";
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
-}, Le = (e) => {
+}, Pe = (e) => {
 	if (!e) return L;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
-		case "image/jpg": return ne;
-		case "image/png": return se;
-		case "image/svg+xml": return de;
+		case "image/jpg": return W;
+		case "image/png": return ie;
+		case "image/svg+xml": return ce;
 		case "image/bmp": return R;
-		default: return H;
+		default: return G;
 	}
-	if (e.startsWith("video/")) return ke;
-	if (e.startsWith("audio/")) return be;
+	if (e.startsWith("video/")) return Ee;
+	if (e.startsWith("audio/")) return _e;
 	switch (e) {
-		case "application/pdf": return ae;
+		case "application/pdf": return ne;
 		case "application/msword":
 		case "application/vnd.ms-word": return V;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ee;
-		case "application/vnd.ms-powerpoint": return ce;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ce;
-		case "application/vnd.ms-excel": return ge;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return ge;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return H;
+		case "application/vnd.ms-powerpoint": return ae;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ae;
+		case "application/vnd.ms-excel": return pe;
+		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return pe;
 		case "application/zip":
 		case "application/x-zip-compressed":
 		case "application/x-rar-compressed":
 		case "application/x-7z-compressed":
 		case "application/gzip":
-		case "application/x-tar": return ve;
+		case "application/x-tar": return he;
 		case "text/csv": return B;
-		case "text/plain": return me;
+		case "text/plain": return de;
 		case "text/html":
-		case "application/xhtml+xml": return te;
+		case "application/xhtml+xml": return U;
 		case "text/xml":
-		case "application/xml": return _e;
+		case "application/xml": return me;
 		case "application/sql":
-		case "text/x-sql": return ue;
+		case "text/x-sql": return se;
 		case "text/javascript":
-		case "application/javascript": return re;
-		case "text/jsx": return ie;
+		case "application/javascript": return ee;
+		case "text/jsx": return te;
 		case "application/typescript":
-		case "text/typescript": return fe;
-		case "text/tsx": return pe;
+		case "text/typescript": return le;
+		case "text/tsx": return ue;
 		case "text/css": return z;
 		case "text/x-php":
-		case "application/x-php": return oe;
+		case "application/x-php": return re;
 		case "text/x-rustsrc":
-		case "application/x-rust": return le;
-		case "text/x-vue": return he;
+		case "application/x-rust": return oe;
+		case "text/x-vue": return fe;
 		default: return L;
 	}
-}, Re = (e) => {
+}, Fe = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? Te : n === t.Pasted ? N : n === t.Image ? H : Le(r ?? "");
-}, ze = (e) => {
+	return n === t.Prompt ? Se : n === t.Pasted ? P : n === t.Image ? G : Pe(r ?? "");
+}, Ie = (e) => {
 	let t = e.toLowerCase().split(";")[0].trim(), n = a[t];
 	if (n) return n;
 	let r = t.split("/")[1];
 	if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
-}, Be = (e, n) => {
+}, Le = (e, n) => {
 	let { type: r, name: i, contentType: a } = e;
 	if (r === t.Prompt) return n.promptLabel ?? "Prompt";
 	if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
 	if (r === t.Image) return n.imageLabel ?? "Image";
 	if (a) {
-		let e = ze(a);
+		let e = Ie(a);
 		if (e) return `.${e}`;
 	}
 	let o = i.lastIndexOf(".");
 	return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
-}, Ve = (e, n = {}) => {
-	let { type: r, status: i, previewUrl: a, url: o } = e, s = i === c.Loading, l = i === c.Error, u = r === t.Image && !!(a ?? o) && !l, d = r === t.Audio && !l, f = r === t.Link && !l;
+}, Re = (e, n = {}) => {
+	let { type: r, status: i, previewUrl: a, url: o } = e, s = i === c.Loading, l = i === c.Error, u = r === t.Image && !!(a ?? o) && !l, d = r === t.Link && !l;
 	return {
 		isLoading: s,
 		isError: l,
 		isImage: u,
-		isAudio: d,
-		isLink: f,
-		BottomIcon: f ? null : Re(e),
-		typeLabel: f ? null : Be(e, n)
+		isLink: d,
+		BottomIcon: d ? null : Fe(e),
+		typeLabel: d ? null : Le(e, n)
 	};
-}, He = (e, t) => e <= 0 ? {
-	layout: Y.None,
-	visibleCount: 0,
-	hiddenCount: 0
-} : e < 5 || t ? {
-	layout: Y.AllVisible,
-	visibleCount: e,
-	hiddenCount: 0
-} : {
-	layout: Y.Collapsed,
-	visibleCount: 4,
-	hiddenCount: e - 4
-}, X = {
-	tile: "_tile_3x6ks_1",
-	tileLight: "_tileLight_3x6ks_12",
-	tileError: "_tileError_3x6ks_16",
-	nameText: "_nameText_3x6ks_23",
-	typeText: "_typeText_3x6ks_24",
-	retryIcon: "_retryIcon_3x6ks_36",
-	hoverIcon: "_hoverIcon_3x6ks_40",
-	track: "_track_3x6ks_48",
-	indeterminateFill: "_indeterminateFill_3x6ks_52",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_3x6ks_1"
-}, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ q(m, {
+}, ze = "flex size-[84px] items-center justify-center rounded-xl border", Z = {
+	tile: "_tile_3jao2_1",
+	hovered: "_hovered_3jao2_5",
+	selected: "_selected_3jao2_15",
+	tileError: "_tileError_3jao2_20",
+	nameText: "_nameText_3jao2_25",
+	typeText: "_typeText_3jao2_29",
+	retryIcon: "_retryIcon_3jao2_33",
+	track: "_track_3jao2_37",
+	actionButton: "_actionButton_3jao2_43",
+	imageActionButton: "_imageActionButton_3jao2_47"
+}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(j, {
 	icon: a,
-	size: D.Small,
-	className: d("absolute end-1 top-1 h-6 w-6 rounded-lg", o ?? X.hoverIcon),
+	size: _.Small,
+	className: d("absolute end-1 top-1 opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Z.actionButton, o),
 	"aria-label": e,
 	"aria-describedby": t ? n : void 0,
 	onClick: (e) => {
 		e.stopPropagation(), r(i);
 	}
-}), Ue = ({ ...e }) => /* @__PURE__ */ q(Z, {
-	icon: /* @__PURE__ */ q(we, {
+}), Be = ({ ...e }) => /* @__PURE__ */ Y(Q, {
+	icon: /* @__PURE__ */ Y(xe, {
 		size: p.SM,
 		"aria-hidden": !0
 	}),
-	className: X.retryIcon,
+	className: Z.retryIcon,
 	...e
-}), We = ({ ...e }) => /* @__PURE__ */ q(Z, {
-	icon: /* @__PURE__ */ q(F, {
+}), Ve = ({ ...e }) => /* @__PURE__ */ Y(Q, {
+	icon: /* @__PURE__ */ Y(F, {
 		size: p.SM,
 		"aria-hidden": !0
 	}),
 	...e
-}), Ge = ({ ...e }) => /* @__PURE__ */ q(Z, {
-	icon: /* @__PURE__ */ q(I, {
+}), He = ({ ...e }) => /* @__PURE__ */ Y(Q, {
+	icon: /* @__PURE__ */ Y(I, {
 		size: p.SM,
 		"aria-hidden": !0
 	}),
 	...e
-}), Ke = ({ ...e }) => /* @__PURE__ */ q(Z, {
-	icon: /* @__PURE__ */ q(Ae, {
+}), Ue = ({ ...e }) => /* @__PURE__ */ Y(Q, {
+	icon: /* @__PURE__ */ Y(De, {
 		size: p.SM,
 		"aria-hidden": !0
 	}),
-	className: X.hoverIcon,
 	...e
-}), qe = ({ attachment: e, searchQuery: t = "", onClick: n, onDownload: i, onRemove: a, labels: o, styles: s, cssVars: c }) => {
-	let { clickLabel: l = "Open attachment", downloadLabel: u = "Download attachment", removeLabel: f = "Remove attachment" } = o ?? {}, { typography: p, className: m } = s ?? {}, h = () => {
-		n?.(e.id);
-	};
-	return /* @__PURE__ */ J("div", {
-		style: c,
-		...n == null ? {} : {
-			role: "button",
-			tabIndex: 0,
-			"aria-label": l,
-			onClick: h,
-			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
-			}
-		},
-		className: d("group relative flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", n && "cursor-pointer", (i || a) && "pe-8", m),
-		children: [
-			/* @__PURE__ */ q("span", {
-				title: e.name,
-				className: d(p?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
-				children: t ? /* @__PURE__ */ q(r, {
-					text: e.name,
-					query: t,
-					maxLines: 1
-				}) : e.name
-			}),
-			e.playUrl && /* @__PURE__ */ q("audio", {
-				controls: !0,
-				src: e.playUrl,
-				"aria-label": e.name,
-				className: "w-full",
-				preload: "metadata",
-				onClick: (e) => e.stopPropagation()
-			}),
-			i && /* @__PURE__ */ q(We, {
-				ariaLabel: u,
-				onClick: i,
-				id: e.id
-			}),
-			a && /* @__PURE__ */ q(Ke, {
-				ariaLabel: f,
-				onClick: a,
-				id: e.id
-			})
-		]
-	});
-}, Je = {
+}), We = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, Ye = ({ attachment: t, onClick: n, onRetry: r, labels: i, styles: a, onDownload: o, isPasted: s, isLink: l, cssVars: u, onExpand: f, isExpandable: p, onRemove: m }) => {
-	let { clickLabel: h = "Download attachment", retryLabel: g = "Retry upload", sizeLabel: _, uploadingLabel: v = "Uploading", errorReasonLabels: y, genericErrorLabel: b = "Upload failed" } = i ?? {}, { typography: { nameClassName: x = "dial-caption-text", metaClassName: S = "dial-caption-text" } = {}, className: C } = a ?? {}, { id: w, name: T, status: E, errorReason: D } = t, O = E === c.Loading, k = E === c.Error, A = Ne(), j = k ? D && (y?.[D] ?? Je[D]) || b : "", { BottomIcon: M, typeLabel: N } = Ve(t), P = !k && !O && o && !l, F = k && !!r && D !== e.UnsupportedType, I = P || F ? "pe-5" : void 0, L = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n?.(t.id));
-	}, R = W(() => s ? T : Ie(T), [s, T]), z = U(() => {
+}, Ge = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: a, styles: o, onDownload: s, isPasted: l, isLink: u, cssVars: f, onExpand: p, isExpandable: m, onRemove: h, isSelected: g }) => {
+	let { clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: k } = t, j = O === c.Loading, M = O === c.Error, N = Ae(), P = M ? k && (S?.[k] ?? We[k]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && k !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
+	}, V = je(() => l ? D : Ne(D), [l, D]), H = K(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), B = d(Fe, "group relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !k && X.tileLight, k && X.tileError), V = /* @__PURE__ */ q("div", {
-		title: R,
-		className: d(x, "line-clamp-2 min-w-0 break-all", X.nameText, !k && I),
-		children: R
-	}), ee = M && /* @__PURE__ */ J("div", {
-		className: d("flex w-full items-center gap-1", k && I),
-		children: [/* @__PURE__ */ q(M, {
+	}, [t]), U = d(ze, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Z.tile, !M && Z.hovered, g && Z.selected, M && Z.tileError), W = /* @__PURE__ */ Y("div", {
+		title: V,
+		className: d(w?.nameClassName ?? "dial-caption-text", "line-clamp-2 min-w-0 break-all", Z.nameText, !M && z),
+		children: n ? /* @__PURE__ */ Y(y, {
+			text: V,
+			query: n,
+			maxLines: 2
+		}) : V
+	}), ee = F && /* @__PURE__ */ X("div", {
+		className: d("flex w-full items-center gap-1", M && z),
+		children: [/* @__PURE__ */ Y(F, {
 			size: 16,
-			className: X.typeText,
+			className: Z.typeText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ q("span", {
-			className: d(S, "min-w-0 flex-1 truncate", X.typeText),
-			children: _ ? `${N} · ${_}` : N
+		}), /* @__PURE__ */ Y("span", {
+			className: d(w?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
+			children: b ? `${I} · ${b}` : I
 		})]
 	}), te = () => {
-		p && f ? f(w) : n && n(w);
-	}, ne = /* @__PURE__ */ J(K, { children: [
-		k ? /* @__PURE__ */ J(K, { children: [ee, V] }) : /* @__PURE__ */ J(K, { children: [V, ee] }),
-		O && /* @__PURE__ */ q("div", {
-			role: "progressbar",
-			"aria-label": v,
-			className: d("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", X.track),
-			children: /* @__PURE__ */ q("div", { className: d("h-full w-1/3 rounded-full", X.indeterminateFill) })
-		}),
-		P && /* @__PURE__ */ q(We, {
-			ariaLabel: h,
-			errorTitle: j,
-			errorDescId: A,
-			onClick: o,
-			id: w
-		}),
-		F && /* @__PURE__ */ q(Ue, {
-			ariaLabel: g,
-			errorTitle: j,
-			errorDescId: A,
-			onClick: r,
-			id: w
+		m && p ? p(E) : r && r(E);
+	}, ne = /* @__PURE__ */ X(J, { children: [
+		W,
+		ee,
+		j && /* @__PURE__ */ Y("div", {
+			"aria-label": x,
+			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
+			children: /* @__PURE__ */ Y(A, { size: 32 })
 		}),
-		l && /* @__PURE__ */ q(Ge, {
-			ariaLabel: g,
-			errorTitle: j,
-			errorDescId: A,
-			onClick: z
-		}),
-		m && /* @__PURE__ */ q(Ke, {
-			ariaLabel: g,
-			errorTitle: j,
-			errorDescId: A,
-			onClick: m,
-			id: w
+		/* @__PURE__ */ X("div", {
+			className: d("absolute right-0 top-0 flex gap-1"),
+			children: [
+				L && /* @__PURE__ */ Y(Ve, {
+					ariaLabel: _,
+					errorTitle: P,
+					errorDescId: N,
+					onClick: s,
+					id: E
+				}),
+				R && /* @__PURE__ */ Y(Be, {
+					ariaLabel: v,
+					errorTitle: P,
+					errorDescId: N,
+					onClick: i,
+					id: E
+				}),
+				u && /* @__PURE__ */ Y(He, {
+					ariaLabel: v,
+					errorTitle: P,
+					errorDescId: N,
+					onClick: H
+				}),
+				h && /* @__PURE__ */ Y(Ue, {
+					ariaLabel: v,
+					errorTitle: P,
+					errorDescId: N,
+					onClick: h,
+					id: E
+				})
+			]
 		}),
-		k && /* @__PURE__ */ q("span", {
-			id: A,
+		M && /* @__PURE__ */ Y("span", {
+			id: N,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: j
+			children: P
 		})
 	] });
-	return /* @__PURE__ */ q("div", {
-		style: u,
-		className: d("inline-flex", C),
-		children: /* @__PURE__ */ q("div", {
+	return /* @__PURE__ */ Y("div", {
+		style: f,
+		className: d("inline-flex", T),
+		children: /* @__PURE__ */ Y("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": h,
+			"aria-label": _,
 			onClick: te,
-			onKeyDown: L,
-			style: u,
-			className: d(B, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			onKeyDown: B,
+			style: f,
+			className: d(U, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
 			children: ne
 		})
 	});
-}, Xe = /* @__PURE__ */ function(e) {
+}, Ke = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), Ze = ({ enabled: e, src: t }) => {
-	let n = Pe(null), [r, i] = G("idle");
-	return Me(() => {
+}({}), qe = ({ enabled: e, src: t }) => {
+	let n = Me(null), [r, i] = q("idle");
+	return ke(() => {
 		i(e && t ? "loading" : "idle");
-	}, [e, t]), Me(() => {
+	}, [e, t]), ke(() => {
 		let r = n.current;
 		if (!r || !e || !t) return;
 		let a = () => i("loaded"), o = () => i("error");
@@ -291,240 +239,169 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 		imageRef: n,
 		imageLoadStatus: r
 	};
-}, Qe = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: c }) => {
-	let { clickLabel: l = "Open attachment", expandLabel: u = "Expand pasted text" } = i ?? {}, { typography: f, className: m } = c ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: x } = W(() => Ve(e), [e]), w = r !== void 0 && !v && !y && !b, { imageRef: T, imageLoadStatus: E } = Ze({
+}, Je = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: c, isSelected: l }) => {
+	let { clickLabel: u = "Open attachment", expandLabel: f = "Expand pasted text" } = i ?? {}, { className: m } = c ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: x } = je(() => Re(e), [e]), S = r !== void 0 && !v && !y && !b, { imageRef: C, imageLoadStatus: w } = qe({
 		enabled: x,
 		src: _
-	}), D = () => {
-		v && n ? n(h) : w && r && r(h);
+	}), T = () => {
+		v && n ? n(h) : S && r && r(h);
 	};
-	return /* @__PURE__ */ q("div", {
-		className: d(Fe, w && "cursor-pointer", X.tile, m),
-		onClick: D,
+	return /* @__PURE__ */ Y("div", {
+		className: d(ze, "group/attachment-tile", S && "cursor-pointer", Z.tile, l && Z.selected, m),
+		onClick: T,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
 		},
 		tabIndex: 0,
 		role: "button",
 		style: o,
-		"aria-label": w ? l : v ? u : void 0,
-		children: /* @__PURE__ */ J("div", {
+		"aria-label": S ? u : v ? f : void 0,
+		children: /* @__PURE__ */ X("div", {
 			className: "relative h-full w-full overflow-hidden",
 			children: [
-				a && /* @__PURE__ */ q(Ke, {
+				a && /* @__PURE__ */ Y(Ue, {
 					onClick: a,
-					id: h
+					id: h,
+					className: Z.imageActionButton
 				}),
-				s && /* @__PURE__ */ q(We, {
+				s && /* @__PURE__ */ Y(Ve, {
 					onClick: s,
-					id: h
+					id: h,
+					className: Z.imageActionButton
 				}),
-				E !== Xe.Loaded && /* @__PURE__ */ q(S, {
-					variant: C.Rectangular,
+				w !== Ke.Loaded && /* @__PURE__ */ Y(O, {
+					variant: k.Rectangular,
 					width: "100%",
 					height: "100%",
-					active: E === Xe.Loading,
-					overlay: /* @__PURE__ */ q(H, {
+					active: w === Ke.Loading,
+					overlay: /* @__PURE__ */ Y(G, {
 						size: p.LG,
-						className: f?.placeholderIconClassName ?? "text-secondary",
+						className: Z.typeText,
 						"aria-hidden": !0
 					}),
 					className: "absolute inset-0 rounded-xl"
 				}),
-				/* @__PURE__ */ q("img", {
-					ref: T,
+				/* @__PURE__ */ Y("img", {
+					ref: C,
 					src: _,
 					alt: g,
 					loading: "lazy",
 					decoding: "async",
-					className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Xe.Loaded ? "opacity-100" : "opacity-0")
+					className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", w === Ke.Loaded ? "opacity-100" : "opacity-0")
 				})
 			]
 		})
 	});
-}, $e = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: s, labels: c, styles: l }) => {
-	let { colors: d } = l ?? {}, f = e.type === t.Pasted, p = f && a !== void 0, m = u({
-		"--ci-tile-bg": d?.background,
-		"--ci-tile-border": d?.border,
-		"--ci-tile-border-hover": d?.borderHover,
-		"--ci-tile-focus-outline": d?.focusOutline,
-		"--ci-tile-bg-error": d?.backgroundError,
-		"--ci-tile-border-error": d?.borderError,
-		"--ci-tile-error-text": d?.errorText,
-		"--ci-tile-name-text": d?.nameText,
-		"--ci-tile-type-text": d?.typeText,
-		"--ci-tile-hover-icon-bg": d?.hoverIconBackground,
-		"--ci-tile-hover-icon-color": d?.hoverIconColor,
-		"--ci-tile-track-bg": d?.trackBackground,
-		"--ci-tile-fill-bg": d?.fillBackground
-	}), { isImage: h, isAudio: g, isLink: _ } = W(() => Ve(e), [e]);
-	return g ? /* @__PURE__ */ q(qe, {
-		attachment: e,
-		labels: c,
-		onClick: o,
-		onDownload: s,
-		onRemove: r,
-		searchQuery: n,
-		styles: l,
-		cssVars: m
-	}) : h ? /* @__PURE__ */ q(Qe, {
+}, Ye = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: s, labels: c, styles: l, isSelected: d }) => {
+	let { colors: f } = l ?? {}, p = e.type === t.Pasted, m = p && a !== void 0, h = u({
+		"--ai-tile-bg": f?.background,
+		"--ai-tile-border": f?.border,
+		"--ai-tile-bg-hover": f?.backgroundHover,
+		"--ai-tile-border-hover": f?.borderHover,
+		"--ai-tile-bg-selected": f?.backgroundSelected,
+		"--ai-tile-border-selected": f?.borderSelected,
+		"--ai-tile-focus-outline": f?.focusOutline,
+		"--ai-tile-bg-error": f?.backgroundError,
+		"--ai-tile-border-error": f?.borderError,
+		"--ai-tile-error-text": f?.errorText,
+		"--ai-tile-name-text": f?.nameText,
+		"--ai-tile-type-text": f?.typeText,
+		"--ai-tile-hover-icon-bg": f?.hoverIconBackground,
+		"--ai-tile-hover-icon-color": f?.hoverIconColor,
+		"--ai-tile-progress-track": f?.trackBackground
+	}), { isImage: g, isLink: _ } = je(() => Re(e), [e]);
+	return g ? /* @__PURE__ */ Y(Je, {
 		attachment: e,
 		labels: c,
 		onClick: o,
 		onExpand: a,
 		styles: l,
 		onRemove: r,
-		cssVars: m,
-		onDownload: s
-	}) : /* @__PURE__ */ q(Ye, {
+		cssVars: h,
+		onDownload: s,
+		isSelected: d
+	}) : /* @__PURE__ */ Y(Ge, {
 		attachment: e,
+		searchQuery: n,
 		onClick: o,
 		onRetry: i,
 		onRemove: r,
 		onDownload: s,
 		isLink: _,
-		isPasted: f,
+		isPasted: p,
 		styles: l,
 		labels: c,
 		onExpand: a,
-		cssVars: m,
-		isExpandable: p
+		cssVars: h,
+		isExpandable: m,
+		isSelected: d
 	});
-}, et = { tile: "_tile_nzsrz_1" }, tt = ({ count: e, onClick: t, labels: n, children: r, styles: i }) => {
-	let { ariaLabel: a } = n ?? {}, { typography: { fontClassName: o = "dial-small-semi-text" } = {}, className: s, colors: c } = i ?? {}, l = u({
-		"--ci-more-tile-bg": c?.background,
-		"--ci-more-tile-border": c?.border,
-		"--ci-more-tile-color": c?.color,
-		"--ci-more-tile-bg-hover": c?.backgroundHover,
-		"--ci-more-tile-color-hover": c?.colorHover,
-		"--ci-more-tile-border-hover": c?.borderHover,
-		"--ci-more-tile-focus-outline": c?.focusOutline
-	});
-	return /* @__PURE__ */ q("button", {
-		type: "button",
-		onClick: t,
-		"aria-label": a ?? `Show ${e} more attachments`,
-		style: l,
-		className: d(Fe, o, et.tile, s),
-		children: r ?? /* @__PURE__ */ q("bdi", {
-			dir: "ltr",
-			children: `+${e}`
-		})
-	});
-}, Q = {
-	container: "_container_7fktb_1",
-	headerIcon: "_headerIcon_7fktb_6",
-	headerLabel: "_headerLabel_7fktb_7",
-	downloadAllButton: "_downloadAllButton_7fktb_8",
-	imageTile: "_imageTile_7fktb_12"
-}, nt = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, rt = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, labels: a, styles: o }) => {
-	let { ariaLabel: s = "Attachments", clickLabel: l = "Download attachment", retryLabel: f = "Retry upload", showLessLabel: h = "Show less", downloadAllLabel: g = "Download all", openInNewTabLabel: _, getHeaderLabel: v = (e) => nt(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = a ?? {}, { typography: { headerLabelClassName: S = "dial-tiny-semi-text" } = {}, colors: C, className: w } = o ?? {}, T = u({
-		"--ci-group-bg": C?.background,
-		"--ci-group-border": C?.border,
-		"--ci-group-text": C?.text
-	}), [E, D] = G(!1), O = W(() => He(e.length, E), [e.length, E]);
+}, Xe = {
+	headerIcon: "_headerIcon_1dmgi_1",
+	headerLabel: "_headerLabel_1dmgi_2"
+}, Ze = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Qe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, labels: a, styles: o, selectedAttachmentId: s }) => {
+	let { ariaLabel: l = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: h = "Download all", openInNewTabLabel: g, getHeaderLabel: y = (e) => Ze(e, "attachment"), promptLabel: b, pastedLabel: x, imageLabel: S } = a ?? {}, { typography: C, colors: w, className: T } = o ?? {}, E = u({ "--ai-group-text": w?.text });
 	if (e.length === 0) return null;
-	let k = e.some((e) => e.type === t.Image), A = e.some((e) => e.type !== t.Image), j = k && A, N = e.length >= 5, P = j ? xe : k ? H : L, I = v(e.length), R = e.slice(0, O.visibleCount), z = () => {
+	let D = e.some((e) => e.type === t.Image), O = e.some((e) => e.type !== t.Image), k = D && O, A = e.length >= 5, j = k ? ve : D ? G : L, M = y(e.length), N = () => {
 		let t = e.filter((e) => e.status === c.Idle);
 		r ? r(t) : t.forEach((e) => n?.(e.id));
-	}, B = (t) => {
+	}, P = (t) => {
 		let n = e.find((e) => e.id === t);
 		n && r?.([n]);
 	};
-	return /* @__PURE__ */ J("div", {
+	return /* @__PURE__ */ X("div", {
 		role: "group",
-		"aria-label": s,
-		style: T,
-		className: d("rounded-2xl border p-3", N ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Q.container, w),
-		children: [/* @__PURE__ */ J("div", {
-			className: "mb-3 flex min-h-6 items-center gap-2",
-			children: [
-				/* @__PURE__ */ q(P, {
+		"aria-label": l,
+		style: E,
+		className: d("flex flex-col gap-1", A ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Xe.container, T),
+		children: [/* @__PURE__ */ X("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ X("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ Y(j, {
+					size: p.SM,
+					className: d("shrink-0", Xe.headerIcon),
+					"aria-hidden": !0
+				}), /* @__PURE__ */ Y("span", {
+					className: d(C?.headerLabelClassName ?? "dial-tiny-semi-text", Xe.headerLabel),
+					children: M
+				})]
+			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(v, {
+				icon: /* @__PURE__ */ Y(F, {
 					size: p.SM,
-					className: d("shrink-0", Q.headerIcon),
 					"aria-hidden": !0
 				}),
-				/* @__PURE__ */ q("span", {
-					className: d(S, Q.headerLabel),
-					children: I
-				}),
-				e.length >= 2 && (r || n) && /* @__PURE__ */ q(m, {
-					icon: /* @__PURE__ */ q(F, {
-						size: p.SM,
-						"aria-hidden": !0
-					}),
-					className: d("ms-auto h-6 w-6 rounded-lg", Q.downloadAllButton),
-					"aria-label": g,
-					onClick: z
-				})
-			]
-		}), /* @__PURE__ */ J("div", {
+				size: _.Small,
+				"aria-label": h,
+				onClick: N
+			})]
+		}), /* @__PURE__ */ Y("div", {
 			role: "list",
-			"aria-label": I,
-			className: d("gap-3", N ? "grid grid-cols-[repeat(5,83px)] overflow-x-auto" : "flex flex-wrap"),
-			children: [
-				R.map((e) => /* @__PURE__ */ q("div", {
-					role: "listitem",
-					children: /* @__PURE__ */ q($e, {
-						attachment: e,
-						onClick: n,
-						onDownload: B,
-						onRetry: i,
-						labels: {
-							clickLabel: l,
-							retryLabel: f,
-							promptLabel: y,
-							pastedLabel: b,
-							imageLabel: x,
-							openInNewTabLabel: _
-						}
-					})
-				}, e.id)),
-				O.layout === Y.Collapsed && /* @__PURE__ */ q("div", {
-					role: "listitem",
-					children: /* @__PURE__ */ q(tt, {
-						count: O.hiddenCount,
-						onClick: () => D(!0)
-					})
-				}),
-				N && E && /* @__PURE__ */ q("div", {
-					role: "listitem",
-					children: /* @__PURE__ */ q(tt, {
-						count: 0,
-						onClick: () => D(!1),
-						labels: { ariaLabel: h },
-						children: /* @__PURE__ */ q(M, {
-							size: p.MD,
-							"aria-hidden": !0
-						})
-					})
+			"aria-label": M,
+			className: d("gap-3", A ? "grid grid-cols-[repeat(5,83px)]" : "flex flex-wrap"),
+			children: e.map((e, t) => /* @__PURE__ */ Y("div", {
+				role: "listitem",
+				children: /* @__PURE__ */ Y(Ye, {
+					attachment: e,
+					onClick: n,
+					onDownload: P,
+					onRetry: i,
+					labels: {
+						clickLabel: f,
+						retryLabel: m,
+						promptLabel: b,
+						pastedLabel: x,
+						imageLabel: S,
+						openInNewTabLabel: g
+					},
+					isSelected: e.id === s
 				})
-			]
+			}, `${e.id}-${t}`))
 		})]
 	});
-}, it = {
-	tabContainer: "_tabContainer_rzv03_1",
-	tabActive: "_tabActive_rzv03_13"
-};
-je(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
-	let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
-	return /* @__PURE__ */ q("div", {
-		className: "flex flex-nowrap gap-1",
-		children: e.map((e) => {
-			let r = t === e.id;
-			return /* @__PURE__ */ q(T, {
-				label: e.label,
-				selected: r,
-				onClick: () => n(e.id),
-				"aria-selected": r,
-				className: d("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, it.tabContainer, r && it.tabActive)
-			}, e.id);
-		})
-	});
-});
-var at = (e) => /* @__PURE__ */ q(y, { ...e }), ot = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
-	let [s, c] = G(t), [l, u] = G(n), [d, f] = G(r), p = Pe(o);
-	Me(() => {
+}, $e = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
+	let [s, c] = q(t), [l, u] = q(n), [d, f] = q(r), p = Me(o);
+	ke(() => {
 		o && !p.current && (c(t), u(n), f(r)), p.current = o;
 	}, [
 		o,
@@ -541,7 +418,7 @@ var at = (e) => /* @__PURE__ */ q(y, { ...e }), ot = ({ features: e, initialResp
 		setResponseFormat: c,
 		setSystemPrompt: u,
 		setTemperature: f,
-		handleSubmit: U(() => {
+		handleSubmit: K(() => {
 			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();
@@ -555,55 +432,59 @@ var at = (e) => /* @__PURE__ */ q(y, { ...e }), ot = ({ features: e, initialResp
 			a
 		])
 	};
-}, st = "!dial-small-semi-text !text-primary gap-1", ct = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "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: g = [
+}, et = { label: "_label_14i7c_1" }, tt = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: g = "System prompt", systemPromptTooltip: _ = "Enter a prompt", temperatureLabel: v = "Temperature", temperatureLabels: y = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: _ }) => /* @__PURE__ */ J("div", {
-	className: "flex flex-col gap-4 px-6 py-3",
-	children: [
-		e.responseFormat && /* @__PURE__ */ q(b, {
-			fieldTitle: s,
-			labelClassName: st,
-			elementId: "response-format",
-			orientation: k.Column,
-			activeRadioButton: t ?? l.Markdown,
-			labelDescription: c,
-			radioButtons: [{
-				id: l.Markdown,
-				name: u
-			}, {
-				id: l.PlainText,
-				name: d
-			}],
-			onChange: (e) => i(e)
-		}),
-		e.systemPrompt && /* @__PURE__ */ q(h, {
-			value: n,
-			placeholder: p,
-			labelProps: {
-				className: st,
-				label: f
-			},
-			onChange: (e) => a(e ?? "")
-		}),
-		e.temperature && /* @__PURE__ */ q(w, {
-			labelProps: {
-				label: m,
-				className: st,
-				caption: _
-			},
-			value: r,
-			min: 0,
-			max: 1,
-			step: .1,
-			labels: g,
-			onChange: o
-		})
-	]
-});
-je(({ 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: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: D } = ot({
+], temperatureHint: b, labelClassName: S = "!dial-small-semi-text", colors: C }) => {
+	let w = u({ "--csf-label-text": C?.labelText }), T = d(S, et.label, "gap-1");
+	return /* @__PURE__ */ X("div", {
+		className: "flex flex-col gap-4 px-6 py-3",
+		style: w,
+		children: [
+			e.responseFormat && /* @__PURE__ */ Y(m, {
+				fieldTitle: s,
+				labelClassName: T,
+				elementId: "response-format",
+				orientation: D.Column,
+				activeRadioButton: t ?? l.Markdown,
+				labelDescription: c,
+				radioButtons: [{
+					id: l.Markdown,
+					name: f
+				}, {
+					id: l.PlainText,
+					name: p
+				}],
+				onChange: (e) => i(e)
+			}),
+			e.systemPrompt && /* @__PURE__ */ Y(x, {
+				value: n,
+				placeholder: _,
+				labelProps: {
+					className: T,
+					label: g
+				},
+				onChange: (e) => a(e ?? "")
+			}),
+			e.temperature && /* @__PURE__ */ Y(h, {
+				labelProps: {
+					label: v,
+					className: T,
+					caption: b
+				},
+				value: r,
+				min: 0,
+				max: 1,
+				step: .1,
+				labels: y,
+				onChange: o
+			})
+		]
+	});
+}, nt = { modal: "_modal_od073_1" };
+Oe(({ 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: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = nt.modal }) => {
+	let { responseFormat: b, systemPrompt: x, temperature: S, canSubmit: C, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = $e({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -611,32 +492,32 @@ je(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ q(v, {
+	return /* @__PURE__ */ Y(w, {
 		open: !0,
 		header: o,
-		size: O.Sm,
+		size: T.Sm,
 		onClose: a,
-		className: "!bg-layer-2",
-		footer: /* @__PURE__ */ q("div", {
+		className: y,
+		footer: /* @__PURE__ */ Y("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ q(E, {
-				tooltip: _,
-				hideTooltip: S || !_,
-				children: /* @__PURE__ */ q(at, {
-					label: g,
-					onClick: D,
-					disabled: !S
+			children: /* @__PURE__ */ Y(g, {
+				tooltip: v,
+				hideTooltip: C || !v,
+				children: /* @__PURE__ */ Y(E, {
+					label: _,
+					onClick: A,
+					disabled: !C
 				})
 			})
 		}),
-		children: /* @__PURE__ */ q(ct, {
+		children: /* @__PURE__ */ Y(tt, {
 			features: e,
-			responseFormat: y,
-			systemPrompt: b,
-			temperature: x,
-			onResponseFormatChange: C,
-			onSystemPromptChange: w,
-			onTemperatureChange: T,
+			responseFormat: b,
+			systemPrompt: x,
+			temperature: S,
+			onResponseFormatChange: D,
+			onSystemPromptChange: O,
+			onTemperatureChange: k,
 			responseFormatLabel: s,
 			responseFormatHint: c,
 			responseFormatMarkdownLabel: l,
@@ -649,167 +530,169 @@ je(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		})
 	});
 });
-//#endregion
-//#region src/components/MessageActions/MessageActions.tsx
-var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r, onRegenerate: i, onCopy: a, onCopyMarkdown: c, onLike: l, onDislike: u, activeRating: f, isAlwaysVisible: h, className: g, labels: _ }) => {
-	let { tooltips: v, ariaLabels: y } = _ ?? {}, [b, x] = G(null), [S, C] = G(""), w = U(() => {
-		a?.(), x("copy"), C(y?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => x(null), lt);
-	}, [a, y?.copiedStatus]), T = U(() => {
-		c?.(), x("markdown"), C(y?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => x(null), lt);
-	}, [c, y?.copiedMarkdownStatus]);
-	return /* @__PURE__ */ J("div", {
+var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e = s.User, onEdit: t, onEditHover: r, onDelete: i, onRegenerate: a, onCopy: c, onCopyMarkdown: l, onLike: f, onDislike: m, activeRating: h, isAlwaysVisible: g, className: y, labels: b, colors: x }) => {
+	let { tooltips: S, ariaLabels: C } = b ?? {}, [w, T] = q(null), [E, D] = q(""), O = u({ "--ma-active-rating-text": x?.activeRatingText }), k = K(() => {
+		c?.(), T("copy"), D(C?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => T(null), it);
+	}, [c, C?.copiedStatus]), A = K(() => {
+		l?.(), T("markdown"), D(C?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => T(null), it);
+	}, [l, C?.copiedMarkdownStatus]);
+	return /* @__PURE__ */ X("div", {
 		role: "toolbar",
-		"aria-label": y?.actionsGroup ?? "Message actions",
-		className: d("flex gap-1", !h && "opacity-0 group-hover:opacity-100", g),
-		children: [/* @__PURE__ */ q("span", {
+		"aria-label": C?.actionsGroup ?? "Message actions",
+		style: O,
+		className: d("flex gap-1", !g && "opacity-0 group-hover:opacity-100", y),
+		children: [/* @__PURE__ */ Y("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: S
-		}), e === s.User ? /* @__PURE__ */ J(K, { children: [t && /* @__PURE__ */ q(m, {
-			icon: /* @__PURE__ */ q(Se, {
+			children: E
+		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(v, {
+			icon: /* @__PURE__ */ Y(ye, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: D.Small,
-			"aria-label": y?.editMessage ?? "Edit message",
-			tooltipProps: { tooltip: v?.edit ?? "Edit" },
+			size: _.Small,
+			"aria-label": C?.editMessage ?? "Edit message",
+			tooltipProps: { tooltip: S?.edit ?? "Edit" },
 			onClick: t,
-			onMouseEnter: n,
-			onFocus: n
-		}), r && /* @__PURE__ */ q(m, {
-			icon: /* @__PURE__ */ q(Oe, {
+			onMouseEnter: r,
+			onFocus: r
+		}), i && /* @__PURE__ */ Y(v, {
+			icon: /* @__PURE__ */ Y(Te, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: D.Small,
-			"aria-label": y?.deleteMessage ?? "Delete message",
-			tooltipProps: { tooltip: v?.delete ?? "Delete" },
-			onClick: r
-		})] }) : /* @__PURE__ */ J(K, { children: [
-			i && /* @__PURE__ */ q(m, {
-				icon: /* @__PURE__ */ q(Ce, {
+			size: _.Small,
+			"aria-label": C?.deleteMessage ?? "Delete message",
+			tooltipProps: { tooltip: S?.delete ?? "Delete" },
+			onClick: i
+		})] }) : /* @__PURE__ */ X(J, { children: [
+			a && /* @__PURE__ */ Y(v, {
+				icon: /* @__PURE__ */ Y(be, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: D.Small,
-				"aria-label": y?.regenerateResponse ?? "Regenerate response",
-				tooltipProps: { tooltip: v?.regenerate ?? "Regenerate" },
-				onClick: i
+				size: _.Small,
+				"aria-label": C?.regenerateResponse ?? "Regenerate response",
+				tooltipProps: { tooltip: S?.regenerate ?? "Regenerate" },
+				onClick: a
 			}),
-			a && /* @__PURE__ */ q(m, {
-				icon: q(b === "copy" ? A : P, {
-					size: p.SM,
-					"aria-hidden": !0
-				}),
-				size: D.Small,
-				"aria-label": y?.copyResponse ?? "Copy response",
-				tooltipProps: { tooltip: b === "copy" ? v?.copied ?? "Copied!" : v?.copy ?? "Copy" },
-				onClick: w
+			c && /* @__PURE__ */ Y(n, {
+				iconSize: p.SM,
+				onClick: k,
+				size: _.Small,
+				isCopied: w === "copy",
+				copyLabel: S?.copy ?? "Copy",
+				copiedLabel: S?.copied ?? "Copied!",
+				ariaLabel: C?.copyResponse ?? "Copy response"
 			}),
-			c && /* @__PURE__ */ q(m, {
-				icon: q(b === "markdown" ? A : ye, {
+			l && /* @__PURE__ */ Y(n, {
+				iconSize: p.SM,
+				onClick: A,
+				size: _.Small,
+				isCopied: w === "markdown",
+				iconCopy: /* @__PURE__ */ Y(ge, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: D.Small,
-				"aria-label": y?.copyAsMarkdown ?? "Copy as markdown",
-				tooltipProps: { tooltip: b === "markdown" ? v?.copiedMarkdown ?? "Copied!" : v?.copyMarkdown ?? "Copy as Markdown" },
-				onClick: T
+				copyLabel: S?.copyMarkdown ?? "Copy as Markdown",
+				copiedLabel: S?.copiedMarkdown ?? "Copied!",
+				ariaLabel: C?.copyAsMarkdown ?? "Copy as markdown"
 			}),
-			l && /* @__PURE__ */ q(m, {
-				icon: /* @__PURE__ */ q(De, {
+			f && /* @__PURE__ */ Y(v, {
+				icon: /* @__PURE__ */ Y(we, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: D.Small,
-				"aria-label": y?.likeResponse ?? "Like response",
-				"aria-pressed": f === o.Like,
-				className: f === o.Like ? "!text-accent-primary" : void 0,
-				tooltipProps: { tooltip: v?.like ?? "Like" },
-				onClick: l
+				size: _.Small,
+				"aria-label": C?.likeResponse ?? "Like response",
+				"aria-pressed": h === o.Like,
+				className: h === o.Like ? rt.activeRating : void 0,
+				tooltipProps: { tooltip: S?.like ?? "Like" },
+				onClick: f
 			}),
-			u && /* @__PURE__ */ q(m, {
-				icon: /* @__PURE__ */ q(Ee, {
+			m && /* @__PURE__ */ Y(v, {
+				icon: /* @__PURE__ */ Y(Ce, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: D.Small,
-				"aria-label": y?.dislikeResponse ?? "Dislike response",
-				"aria-pressed": f === o.Dislike,
-				className: f === o.Dislike ? "!text-accent-primary" : void 0,
-				tooltipProps: { tooltip: v?.dislike ?? "Dislike" },
-				onClick: u
+				size: _.Small,
+				"aria-label": C?.dislikeResponse ?? "Dislike response",
+				"aria-pressed": h === o.Dislike,
+				className: h === o.Dislike ? rt.activeRating : void 0,
+				tooltipProps: { tooltip: S?.dislike ?? "Dislike" },
+				onClick: m
 			})
 		] })]
 	});
 }, $ = {
-	userBubble: "_userBubble_1exhl_1",
-	collapsibleText: "_collapsibleText_1exhl_6",
-	expandedText: "_expandedText_1exhl_11",
-	collapsedText: "_collapsedText_1exhl_15",
-	startersDivider: "_startersDivider_1exhl_26",
-	text: "_text_1exhl_30"
-}, dt = ({ text: e, styles: r, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: S, labels: C }) => {
-	let { colors: w, typography: T, className: E, bubbleClassName: D } = r ?? {}, { attachmentClickLabel: O, attachmentRetryLabel: k, attachmentOpenInNewTabLabel: A, startersAriaLabel: j = "Quick reply buttons", thinkingLabel: M, codeBlockCopyLabel: N, codeBlockCopiedLabel: P, assistantMessageAriaLabel: F = "Assistant message", deploymentIconFallbackLabel: I = "AI" } = C ?? {}, L = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], R = u({
-		"--cm-bubble-text": w?.text,
-		"--cm-starters-divider": w?.startersDivider
-	}), z = d($.text, T?.fontClassName), B = !!(h || g);
-	return /* @__PURE__ */ J("div", {
+	userBubble: "_userBubble_ovjc1_1",
+	collapsibleText: "_collapsibleText_ovjc1_6",
+	expandedText: "_expandedText_ovjc1_11",
+	collapsedText: "_collapsedText_ovjc1_15",
+	startersDivider: "_startersDivider_ovjc1_26",
+	text: "_text_ovjc1_30"
+}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: x, labels: S, selectedAttachmentId: w }) => {
+	let { colors: T, typography: E, className: D, bubbleClassName: O } = n ?? {}, { attachmentClickLabel: k, attachmentRetryLabel: A, attachmentOpenInNewTabLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = S ?? {}, R = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = u({
+		"--cm-bubble-text": T?.text,
+		"--cm-starters-divider": T?.startersDivider
+	}), B = d($.text, E?.fontClassName), V = !!(h || g);
+	return /* @__PURE__ */ X("div", {
 		role: "group",
-		"aria-label": F,
-		style: R,
-		className: d("flex w-full items-start gap-3", E),
-		children: [B && /* @__PURE__ */ q(n, {
+		"aria-label": I,
+		style: z,
+		className: d("flex w-full items-start gap-3", D),
+		children: [V && /* @__PURE__ */ Y(r, {
 			src: h,
 			size: 28,
-			initialsName: g || I,
-			labels: { tooltip: g ?? I }
-		}), /* @__PURE__ */ J("div", {
+			initialsName: g || L,
+			labels: { tooltip: g ?? L }
+		}), /* @__PURE__ */ X("div", {
 			className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
-			children: [/* @__PURE__ */ J("div", {
-				className: d("flex w-full min-w-0 max-w-full flex-col items-start gap-4", D),
+			children: [/* @__PURE__ */ X("div", {
+				className: d("flex w-full min-w-0 max-w-full flex-col items-start gap-4", O),
 				children: [
-					(e || c) && /* @__PURE__ */ q("div", {
+					(e || c) && /* @__PURE__ */ Y("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: d(z, "min-w-0 max-w-full text-start"),
-						children: /* @__PURE__ */ q(i, {
+						className: d(B, "min-w-0 max-w-full text-start"),
+						children: /* @__PURE__ */ Y(i, {
 							content: e,
 							isStreaming: c,
-							thinkingLabel: M,
+							thinkingLabel: N,
 							components: _,
-							codeBlockCopyLabel: N,
-							codeBlockCopiedLabel: P,
-							codeBlockTheme: S
+							codeBlockCopyLabel: P,
+							codeBlockCopiedLabel: F,
+							codeBlockTheme: x
 						})
 					}),
-					/* @__PURE__ */ q(rt, {
-						attachments: L,
+					/* @__PURE__ */ Y(Qe, {
+						attachments: R,
 						onAttachmentClick: (e) => v?.(l?.find((t) => t.id === e)),
 						onDownloadAll: y,
 						onRetry: b,
 						labels: {
-							clickLabel: O,
-							retryLabel: k,
-							openInNewTabLabel: A
-						}
+							clickLabel: k,
+							retryLabel: A,
+							openInNewTabLabel: j
+						},
+						selectedAttachmentId: w
 					}),
 					f,
-					/* @__PURE__ */ q(ut, {
+					/* @__PURE__ */ Y(at, {
 						...a,
 						isAlwaysVisible: o,
 						role: s.Assistant
 					})
 				]
-			}), p && p.length > 0 && m && /* @__PURE__ */ q("div", {
+			}), p && p.length > 0 && m && /* @__PURE__ */ Y("div", {
 				role: "list",
-				"aria-label": j,
+				"aria-label": M,
 				className: d("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
-				children: p.map((e, t) => /* @__PURE__ */ q("div", {
+				children: p.map((e, t) => /* @__PURE__ */ Y("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ q(x, {
+					children: /* @__PURE__ */ Y(C, {
 						label: e.title,
 						className: "min-w-[40px]",
 						onClick: () => m(e)
@@ -818,77 +701,77 @@ var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r,
 			})]
 		})]
 	});
-}, ft = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ q("div", {
+}, st = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ Y("div", {
 	role: "status",
 	"aria-live": "polite",
-	className: "dial-info-notification dial-notification",
-	children: /* @__PURE__ */ q(_, {
+	children: /* @__PURE__ */ Y(b, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
-}), pt = /* @__PURE__ */ function(e) {
+}), ct = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
-}({}), mt = 10, ht = ({ text: e, position: t = pt.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = mt, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: h }) => {
-	let { colors: _, typography: v, className: y, bubbleClassName: b } = n ?? {}, { showMoreLabel: x = "Show more", showLessLabel: S = "Show less", showMoreAriaLabel: C, showLessAriaLabel: w, attachmentClickLabel: T, attachmentRetryLabel: E, attachmentOpenInNewTabLabel: O, userMessageAriaLabel: k = "User message" } = c ?? {}, { textRef: A, isTextCollapsed: N, isOverflowing: P, collapsedMaxHeight: F, expandedMaxHeight: I, isCollapsed: L, toggleCollapsed: R } = f({
+}({}), lt = 10, ut = ({ text: e, position: t = ct.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = lt, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: h, selectedAttachmentId: g }) => {
+	let { colors: v, typography: y, className: b, bubbleClassName: x } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: P, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
 		text: e,
 		collapsedLineCount: o
-	}), z = u({
-		"--cm-bubble-user-bg": _?.userBackground,
-		"--cm-bubble-user-border": _?.userBorder,
-		"--cm-bubble-fade-start": _?.fadeStart,
-		"--cm-bubble-text": _?.text,
-		"--cm-bubble-collapsed-height": P ? `${F}px` : void 0,
-		"--cm-bubble-expanded-height": P ? `${I}px` : void 0
-	}), B = t === pt.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", V = d($.text, v?.fontClassName), ee = C ?? x, te = w ?? S, ne = L ? x : S, re = L ? ee : te, ie = L ? j : M, ae = Ne();
-	return /* @__PURE__ */ q("div", {
+	}), B = u({
+		"--cm-bubble-user-bg": v?.userBackground,
+		"--cm-bubble-user-border": v?.userBorder,
+		"--cm-bubble-fade-start": v?.fadeStart,
+		"--cm-bubble-text": v?.text,
+		"--cm-bubble-collapsed-height": F ? `${I}px` : void 0,
+		"--cm-bubble-expanded-height": F ? `${L}px` : void 0
+	}), V = t === ct.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", H = d($.text, y?.fontClassName), U = T ?? C, W = E ?? w, ee = R ? C : w, te = R ? U : W, ne = R ? M : N, re = Ae();
+	return /* @__PURE__ */ Y("div", {
 		role: "group",
-		"aria-label": k,
-		style: z,
-		className: d("flex w-full", y),
-		children: /* @__PURE__ */ J("div", {
+		"aria-label": A,
+		style: B,
+		className: d("flex w-full", b),
+		children: /* @__PURE__ */ X("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
-				/* @__PURE__ */ q(rt, {
+				/* @__PURE__ */ Y(Qe, {
 					attachments: a ?? [],
 					onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
 					onDownloadAll: m,
 					onRetry: h,
 					labels: {
-						clickLabel: T,
-						retryLabel: E,
-						openInNewTabLabel: O
+						clickLabel: D,
+						retryLabel: O,
+						openInNewTabLabel: k
 					},
-					styles: { className: "max-w-[640px]" }
+					styles: { className: "max-w-[640px]" },
+					selectedAttachmentId: g
 				}),
-				e && /* @__PURE__ */ q("div", {
-					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", B, b),
-					children: /* @__PURE__ */ J("div", {
+				e && /* @__PURE__ */ Y("div", {
+					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, x),
+					children: /* @__PURE__ */ X("div", {
 						className: "flex min-w-0 flex-col items-start",
-						children: [/* @__PURE__ */ q("div", {
-							id: ae,
-							className: d("relative overflow-hidden", P && $.collapsibleText, P && !L && $.expandedText, N && $.collapsedText),
-							children: /* @__PURE__ */ q("p", {
-								ref: A,
-								className: d(V, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+						children: [/* @__PURE__ */ Y("div", {
+							id: re,
+							className: d("relative overflow-hidden", F && $.collapsibleText, F && !R && $.expandedText, P && $.collapsedText),
+							children: /* @__PURE__ */ Y("p", {
+								ref: j,
+								className: d(H, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
-						}), P && /* @__PURE__ */ q(g, {
-							label: /* @__PURE__ */ q(K, { children: ne }),
-							iconBefore: /* @__PURE__ */ q(ie, {
+						}), F && /* @__PURE__ */ Y(S, {
+							label: /* @__PURE__ */ Y(J, { children: ee }),
+							iconBefore: /* @__PURE__ */ Y(ne, {
 								size: p.SM,
 								"aria-hidden": "true"
 							}),
-							"aria-label": re,
-							"aria-expanded": !L,
-							"aria-controls": ae,
+							"aria-label": te,
+							"aria-expanded": !R,
+							"aria-controls": re,
 							className: "mt-3",
-							onClick: R,
-							size: D.Small
+							onClick: z,
+							size: _.Small
 						})]
 					})
 				}),
-				/* @__PURE__ */ q(ut, {
+				/* @__PURE__ */ Y(at, {
 					...r,
 					isAlwaysVisible: i,
 					role: s.User
@@ -896,31 +779,16 @@ var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r,
 			]
 		})
 	});
-}, gt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ q(ft, { labels: {
+}, dt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ Y(st, { labels: {
 	titleText: r.labels?.statusTitleText,
 	bodyText: r.labels?.statusBodyText ?? ""
-} }) : e === s.User ? /* @__PURE__ */ q(ht, {
+} }) : e === s.User ? /* @__PURE__ */ Y(ut, {
 	...r,
 	onAttachmentClick: t
-}) : /* @__PURE__ */ q(dt, {
+}) : /* @__PURE__ */ Y(ot, {
 	...r,
 	markdownComponents: n,
 	onAttachmentClick: t
-}), _t = { button: "_button_15boc_1" }, vt = ({ labels: { label: e }, onClick: t, styles: n }) => {
-	let { colors: r, typography: i, className: a } = n ?? {};
-	return /* @__PURE__ */ q("button", {
-		type: "button",
-		onClick: t,
-		style: u({
-			"--cm-source-bg": r?.background,
-			"--cm-source-border": r?.border,
-			"--cm-source-text": r?.text,
-			"--cm-source-bg-hover": r?.backgroundHover,
-			"--cm-source-border-hover": r?.borderHover
-		}),
-		className: d(_t.button, "relative flex h-6 items-center justify-center px-2", "border border-solid", "outline-none focus-visible:outline focus-visible:outline-1", "focus-visible:outline-offset-[3px]", "cursor-pointer whitespace-nowrap", i?.fontClassName, a),
-		children: e
-	});
-};
+});
 //#endregion
-export { dt as AssistantMessageBubble, pt as BubblePosition, ut as MessageActions, gt as MessageBubble, vt as MessageSource, ft as StatusMessageBubble, ht as UserMessageBubble };
+export { ot as AssistantMessageBubble, ct as BubblePosition, at as MessageActions, dt as MessageBubble, st as StatusMessageBubble, ut as UserMessageBubble };