@epam/ai-dial-conversation-messages 1.0.0-dev.514 → 1.0.0-dev.517

package/index.js

@@ -1,435 +1,377 @@
-import { AttachmentErrorReason as e, AttachmentType as t, CodeBlockTheme as n, DeploymentIcon as r, Highlight as i, MDMessageViewer as a, MIME_TYPE_EXT_MAP as o, MessageRating as s, MessageRole as c, RequestStatus as l, ResponseFormat as u, buildCssVars as d, mergeClasses as f, useCollapsedText as p } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as m, DialGhostIconButton as h, DialInput as g, DialLinkButton as _, DialNotification as v, DialPopup as y, DialPrimaryButton as b, DialRadioGroup as x, DialRoundedButton as S, DialSkeleton as C, DialSkeletonVariant as w, DialSlider as T, DialSpinner as E, DialTag as D, DialTooltip as O, ElementSize as k, PopupSize as A, RadioGroupOrientation as j } from "@epam/ai-dial-ui-kit";
-import { IconCheck as M, IconChevronDown as N, IconChevronUp as P, IconClipboard as F, IconCopy as I, IconDownload as L, IconFile as R, IconFileTypeBmp as z, IconFileTypeCss as B, IconFileTypeCsv as V, IconFileTypeDoc as H, IconFileTypeDocx as U, IconFileTypeHtml as W, IconFileTypeJpg as ee, IconFileTypeJs as G, IconFileTypeJsx as te, IconFileTypePdf as K, IconFileTypePhp as ne, IconFileTypePng as re, IconFileTypePpt as ie, IconFileTypeRs as ae, IconFileTypeSql as oe, IconFileTypeSvg as se, IconFileTypeTs as ce, IconFileTypeTsx as le, IconFileTypeTxt as ue, IconFileTypeVue as de, IconFileTypeXls as fe, IconFileTypeXml as pe, IconFileTypeZip as me, IconMarkdown as he, IconMusic as ge, IconPaperclip as _e, IconPencilMinus as ve, IconPhoto as ye, 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 { 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 ee, IconFileTypeDocx as V, 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 "react-dom";
-import { memo as Oe, useCallback as ke, useEffect as Ae, useId as je, useMemo as Me, useRef as Ne, useState as q } from "react";
-import { Fragment as J, jsx as Y, jsxs as X } from "react/jsx-runtime";
+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";
 //#region ../attachment-input/dist/index.js
-var Pe = /* @__PURE__ */ function(e) {
-	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), Fe = ({ enabled: e, src: t }) => {
-	let n = Ne(null), [r, i] = q("idle");
-	return Ae(() => {
-		i(e && t ? "loading" : "idle");
-	}, [e, t]), Ae(() => {
-		let r = n.current;
-		if (!r || !e || !t) return;
-		let a = () => i("loaded"), o = () => i("error");
-		return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
-			r.removeEventListener("load", a), r.removeEventListener("error", o);
-		};
-	}, [e, t]), {
-		imageRef: n,
-		imageLoadStatus: r
-	};
-}, Z = {
-	card: "_card_ywrb5_1",
-	cardError: "_cardError_ywrb5_6",
-	cardSelected: "_cardSelected_ywrb5_10",
-	cardPrompt: "_cardPrompt_ywrb5_15",
-	cardPasted: "_cardPasted_ywrb5_16",
-	name: "_name_ywrb5_20",
-	meta: "_meta_ywrb5_24",
-	loadingOverlay: "_loadingOverlay_ywrb5_28",
-	actionBtn: "_actionBtn_ywrb5_32",
-	removeBtnImage: "_removeBtnImage_ywrb5_43",
-	hoverDownloadIcon: "_hoverDownloadIcon_ywrb5_51"
-}, Ie = /* @__PURE__ */ function(e) {
+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;
-}({}), Le = (e) => {
+}({}), Ie = (e) => {
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
-}, Re = (e) => {
-	if (!e) return R;
+}, Le = (e) => {
+	if (!e) return L;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
-		case "image/jpg": return ee;
-		case "image/png": return re;
-		case "image/svg+xml": return se;
-		case "image/bmp": return z;
-		default: return ye;
+		case "image/jpg": return ne;
+		case "image/png": return se;
+		case "image/svg+xml": return de;
+		case "image/bmp": return R;
+		default: return H;
 	}
-	if (e.startsWith("video/")) return Ee;
-	if (e.startsWith("audio/")) return ge;
+	if (e.startsWith("video/")) return ke;
+	if (e.startsWith("audio/")) return be;
 	switch (e) {
-		case "application/pdf": return K;
+		case "application/pdf": return ae;
 		case "application/msword":
-		case "application/vnd.ms-word": return H;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return U;
-		case "application/vnd.ms-powerpoint": return ie;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ie;
-		case "application/vnd.ms-excel": return fe;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return fe;
+		case "application/vnd.ms-word": return ee;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return V;
+		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/zip":
 		case "application/x-zip-compressed":
 		case "application/x-rar-compressed":
 		case "application/x-7z-compressed":
 		case "application/gzip":
-		case "application/x-tar": return me;
-		case "text/csv": return V;
-		case "text/plain": return ue;
+		case "application/x-tar": return ve;
+		case "text/csv": return B;
+		case "text/plain": return me;
 		case "text/html":
-		case "application/xhtml+xml": return W;
+		case "application/xhtml+xml": return te;
 		case "text/xml":
-		case "application/xml": return pe;
+		case "application/xml": return _e;
 		case "application/sql":
-		case "text/x-sql": return oe;
+		case "text/x-sql": return ue;
 		case "text/javascript":
-		case "application/javascript": return G;
-		case "text/jsx": return te;
+		case "application/javascript": return re;
+		case "text/jsx": return ie;
 		case "application/typescript":
-		case "text/typescript": return ce;
-		case "text/tsx": return le;
-		case "text/css": return B;
+		case "text/typescript": return fe;
+		case "text/tsx": return pe;
+		case "text/css": return z;
 		case "text/x-php":
-		case "application/x-php": return ne;
+		case "application/x-php": return oe;
 		case "text/x-rustsrc":
-		case "application/x-rust": return ae;
-		case "text/x-vue": return de;
-		default: return R;
+		case "application/x-rust": return le;
+		case "text/x-vue": return he;
+		default: return L;
 	}
-}, ze = (e) => {
+}, Re = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? Se : n === t.Pasted ? F : n === t.Image ? ye : Re(r ?? "");
-}, Be = (e) => {
-	let t = e.toLowerCase().split(";")[0].trim(), n = o[t];
+	return n === t.Prompt ? Te : n === t.Pasted ? N : n === t.Image ? H : Le(r ?? "");
+}, ze = (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;
-}, Ve = (e, n) => {
+}, Be = (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 = Be(a);
+		let e = ze(a);
 		if (e) return `.${e}`;
 	}
 	let o = i.lastIndexOf(".");
 	return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
-}, He = (e, n, r, i = {}) => {
-	let { type: a, status: o, previewUrl: s, url: c } = e, u = o === l.Loading, d = o === l.Error, p = a === t.Image && !!(s ?? c) && !d, m = a === t.Audio && !d, h = f(Z.card, d && Z.cardError, n && Z.cardSelected, !d && !n && a === t.Prompt && Z.cardPrompt, !d && !n && a === t.Pasted && Z.cardPasted);
+}, 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;
 	return {
-		isLoading: u,
-		isError: d,
-		isImage: p,
-		isAudio: m,
-		areActionsVisible: d || r,
-		BottomIcon: ze(e),
-		typeLabel: Ve(e, i),
-		cardColorClass: h,
-		removeBtnClass: p ? Z.removeBtnImage : Z.actionBtn
+		isLoading: s,
+		isError: l,
+		isImage: u,
+		isAudio: d,
+		isLink: f,
+		BottomIcon: f ? null : Re(e),
+		typeLabel: f ? null : Be(e, n)
 	};
-}, Ue = (e, t) => e <= 0 ? {
-	layout: Ie.None,
+}, He = (e, t) => e <= 0 ? {
+	layout: Y.None,
 	visibleCount: 0,
 	hiddenCount: 0
 } : e < 5 || t ? {
-	layout: Ie.AllVisible,
+	layout: Y.AllVisible,
 	visibleCount: e,
 	hiddenCount: 0
 } : {
-	layout: Ie.Collapsed,
+	layout: Y.Collapsed,
 	visibleCount: 4,
 	hiddenCount: e - 4
-}, We = ({ attachment: n, searchQuery: r = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: l, shouldAlwaysShowActions: u, labels: p, styles: g, showHoverDownloadIcon: _ = !1 }) => {
-	let { removeLabel: v = "Remove attachment", retryLabel: y = "Retry upload", clickLabel: b = "Open attachment", expandLabel: x = "Expand pasted text", loadingLabel: S = "Loading attachment", uploadFailedStatusLabel: T = "Upload failed" } = p ?? {}, { colors: D, typography: O, roundedClassName: A = "rounded-xl", className: j } = g ?? {}, { id: M, name: N } = n, P = n.previewUrl ?? n.url, F = n.type === t.Pasted, I = F && s !== void 0, R = Me(() => F ? N : Le(N), [F, N]), z = d({
-		"--ci-card-border": D?.border,
-		"--ci-card-bg": D?.background,
-		"--ci-card-name": D?.nameText,
-		"--ci-card-meta": D?.metaText,
-		"--ci-card-border-error": D?.borderError,
-		"--ci-card-bg-selected": D?.backgroundSelected,
-		"--ci-card-border-selected": D?.borderSelected,
-		"--ci-card-bg-hover": D?.backgroundHover,
-		"--ci-loading-overlay-bg": D?.loadingOverlayBackground,
-		"--ci-card-action-color": D?.actionColor,
-		"--ci-card-remove-bg-hover": D?.actionBackgroundHover,
-		"--ci-card-focus-outline": D?.focusOutline,
-		"--ci-card-remove-bg": D?.removeBackground,
-		"--ci-card-remove-color": D?.removeColor,
-		"--ci-card-hover-icon-bg": D?.hoverIconBackground,
-		"--ci-card-hover-icon-color": D?.hoverIconColor
-	}), { isLoading: B, isError: V, isImage: H, isAudio: U, areActionsVisible: W, BottomIcon: ee, typeLabel: G, cardColorClass: te, removeBtnClass: K } = Me(() => He(n, l ?? !1, u ?? !1, p), [
-		n,
-		l,
-		u,
-		p
-	]), ne = c !== void 0 && !I && !B && !V, re = I || ne, { imageRef: ie, imageLoadStatus: ae } = Fe({
-		enabled: H,
-		src: P
-	}), oe = () => {
-		I && s ? s(M) : ne && c && c(M);
-	}, se = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), oe());
-	};
-	if (U) return /* @__PURE__ */ X("div", {
-		style: z,
-		className: f("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", A, te, j),
-		children: [/* @__PURE__ */ X("div", {
+}, 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, {
+	icon: a,
+	size: D.Small,
+	className: d("absolute end-1 top-1 h-6 w-6 rounded-lg", o ?? X.hoverIcon),
+	"aria-label": e,
+	"aria-describedby": t ? n : void 0,
+	onClick: (e) => {
+		e.stopPropagation(), r(i);
+	}
+}), Ue = ({ ...e }) => /* @__PURE__ */ q(Z, {
+	icon: /* @__PURE__ */ q(we, {
+		size: p.SM,
+		"aria-hidden": !0
+	}),
+	className: X.retryIcon,
+	...e
+}), We = ({ ...e }) => /* @__PURE__ */ q(Z, {
+	icon: /* @__PURE__ */ q(F, {
+		size: p.SM,
+		"aria-hidden": !0
+	}),
+	...e
+}), Ge = ({ ...e }) => /* @__PURE__ */ q(Z, {
+	icon: /* @__PURE__ */ q(I, {
+		size: p.SM,
+		"aria-hidden": !0
+	}),
+	...e
+}), Ke = ({ ...e }) => /* @__PURE__ */ q(Z, {
+	icon: /* @__PURE__ */ q(Ae, {
+		size: p.SM,
+		"aria-hidden": !0
+	}),
+	className: X.hoverIcon,
+	...e
+}), qe = ({ attachment: e, searchQuery: t = "", onClick: n, labels: i, styles: a, cssVars: o }) => {
+	let { clickLabel: s = "Open attachment" } = i ?? {}, { typography: c, className: l } = a ?? {};
+	return /* @__PURE__ */ J("div", {
+		style: o,
+		className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", l),
+		children: [/* @__PURE__ */ J("div", {
 			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ Y("span", {
-				title: n.name,
-				className: f(O?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Z.name),
-				children: r ? /* @__PURE__ */ Y(i, {
-					text: n.name,
-					query: r,
+			children: [/* @__PURE__ */ q("span", {
+				title: e.name,
+				className: d(c?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
+				children: t ? /* @__PURE__ */ q(r, {
+					text: e.name,
+					query: t,
 					maxLines: 1
-				}) : n.name
-			}), c && /* @__PURE__ */ Y(h, {
-				icon: /* @__PURE__ */ Y(L, {
-					size: m.SM,
-					"aria-hidden": !0
-				}),
-				size: k.Small,
-				className: f("h-6 w-6 shrink-0 rounded", K),
-				"aria-label": b,
-				onClick: (e) => {
-					e.stopPropagation(), c(M);
-				}
+				}) : e.name
+			}), n && /* @__PURE__ */ q(We, {
+				ariaLabel: s,
+				onClick: n,
+				id: e.id
 			})]
-		}), n.playUrl && /* @__PURE__ */ Y("audio", {
+		}), e.playUrl && /* @__PURE__ */ q("audio", {
 			controls: !0,
-			src: n.playUrl,
-			"aria-label": n.name,
+			src: e.playUrl,
+			"aria-label": e.name,
 			className: "w-full",
 			preload: "metadata"
 		})]
 	});
-	let ce = f("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", A, te, !H && "flex-col gap-3 p-3", re && "cursor-pointer", j), le = /* @__PURE__ */ X(J, { children: [
-		H ? /* @__PURE__ */ X("div", {
-			className: "relative h-full w-full overflow-hidden",
-			children: [ae !== Pe.Loaded && /* @__PURE__ */ Y(C, {
-				variant: w.Rectangular,
-				width: "100%",
-				height: "100%",
-				active: ae === Pe.Loading,
-				overlay: /* @__PURE__ */ Y(ye, {
-					size: m.LG,
-					className: O?.placeholderIconClassName ?? "text-secondary",
-					"aria-hidden": !0
-				}),
-				className: f("absolute inset-0", A)
-			}), /* @__PURE__ */ Y("img", {
-				ref: ie,
-				src: P,
-				alt: N,
-				loading: "lazy",
-				decoding: "async",
-				className: f("h-full w-full object-cover transition-opacity duration-200", ae === Pe.Loaded ? "opacity-100" : "opacity-0", A)
-			})]
-		}) : V ? /* @__PURE__ */ X(J, { children: [/* @__PURE__ */ X("div", {
-			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ Y(ee, {
-				size: m.SM,
-				className: f("shrink-0", Z.meta),
-				"aria-hidden": !0
-			}), /* @__PURE__ */ Y("span", {
-				title: G,
-				className: f(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Z.meta),
-				children: G
-			})]
-		}), /* @__PURE__ */ Y("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ Y("div", {
-				title: R,
-				className: f(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Z.name),
-				children: r ? /* @__PURE__ */ Y(i, {
-					text: R,
-					query: r,
-					maxLines: 3
-				}) : R
-			})
-		})] }) : /* @__PURE__ */ X(J, { children: [/* @__PURE__ */ Y("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ Y("div", {
-				title: R,
-				className: f(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Z.name),
-				children: r ? /* @__PURE__ */ Y(i, {
-					text: R,
-					query: r,
-					maxLines: 3
-				}) : R
-			})
-		}), /* @__PURE__ */ X("div", {
-			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ Y(ee, {
-				size: m.SM,
-				className: f("shrink-0", Z.meta),
-				"aria-hidden": !0
-			}), /* @__PURE__ */ Y("span", {
-				title: G,
-				className: f(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Z.meta),
-				children: G
-			})]
-		})] }),
-		B && /* @__PURE__ */ Y("span", {
-			className: f("absolute inset-0 flex items-center justify-center", A, Z.loadingOverlay),
-			children: /* @__PURE__ */ Y(E, {
-				size: 40,
-				ariaLabel: S,
-				className: "z-50"
-			})
-		}),
-		/* @__PURE__ */ Y("span", {
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: V ? T : ""
-		}),
-		!B && /* @__PURE__ */ X("div", {
-			className: f("absolute end-1 top-1 flex gap-1 transition-opacity", W ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
-			children: [
-				V && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ Y(h, {
-					icon: /* @__PURE__ */ Y(xe, {
-						size: m.SM,
-						"aria-hidden": !0
-					}),
-					size: k.Small,
-					className: f("h-6 w-6 rounded", K),
-					"aria-label": y,
-					onClick: (e) => {
-						e.stopPropagation(), o(M);
-					}
-				}),
-				a && /* @__PURE__ */ Y(h, {
-					icon: /* @__PURE__ */ Y(De, {
-						size: m.SM,
-						"aria-hidden": !0
-					}),
-					size: k.Small,
-					className: f("h-6 w-6 rounded", K),
-					"aria-label": v,
-					onClick: (e) => {
-						e.stopPropagation(), a?.(M);
-					}
-				}),
-				_ && !a && !V && /* @__PURE__ */ Y(L, {
-					size: m.SM,
-					"aria-hidden": !0,
-					className: f("h-6 w-6 rounded-lg p-1", Z.hoverDownloadIcon)
-				})
-			]
-		})
-	] });
-	return re ? /* @__PURE__ */ Y("div", {
-		style: z,
-		className: ce,
-		onClick: oe,
-		onKeyDown: se,
-		tabIndex: 0,
-		role: "button",
-		"aria-label": ne ? b : I ? x : void 0,
-		children: le
-	}) : /* @__PURE__ */ Y("div", {
-		style: z,
-		className: ce,
-		children: le
-	});
-}, Q = {
-	tile: "_tile_1l1lz_1",
-	tileLight: "_tileLight_1l1lz_12",
-	tileError: "_tileError_1l1lz_16",
-	nameText: "_nameText_1l1lz_23",
-	typeText: "_typeText_1l1lz_24",
-	retryIcon: "_retryIcon_1l1lz_36",
-	hoverIcon: "_hoverIcon_1l1lz_40",
-	track: "_track_1l1lz_45",
-	indeterminateFill: "_indeterminateFill_1l1lz_49",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_1l1lz_1"
-}, Ge = {
+}, Je = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, Ke = ({ attachment: t, onClick: r, onRetry: i, labels: a, styles: o, theme: s = n.Dark }) => {
-	let { clickLabel: c = "Download attachment", retryLabel: u = "Retry upload", sizeLabel: p, uploadingLabel: g = "Uploading", errorReasonLabels: _, genericErrorLabel: v = "Upload failed" } = a ?? {}, { typography: { nameClassName: y = "dial-caption-text", metaClassName: b = "dial-caption-text" } = {}, colors: x, className: S } = o ?? {}, C = d({
-		"--ci-tile-bg": x?.background,
-		"--ci-tile-border": x?.border,
-		"--ci-tile-border-hover": x?.borderHover,
-		"--ci-tile-focus-outline": x?.focusOutline,
-		"--ci-tile-bg-error": x?.backgroundError,
-		"--ci-tile-border-error": x?.borderError,
-		"--ci-tile-error-text": x?.errorText,
-		"--ci-tile-name-text": x?.nameText,
-		"--ci-tile-type-text": x?.typeText,
-		"--ci-tile-hover-icon-bg": x?.hoverIconBackground,
-		"--ci-tile-hover-icon-color": x?.hoverIconColor,
-		"--ci-tile-track-bg": x?.trackBackground,
-		"--ci-tile-fill-bg": x?.fillBackground
-	}), { id: w, name: T, status: E, errorReason: D } = t, O = E === l.Loading, A = E === l.Error, j = je(), M = A && (D && (_?.[D] ?? Ge[D]) || v), { BottomIcon: N, typeLabel: P } = He(t, !1, !1, a), F = !A && !O && r !== void 0, I = A && !!i && D !== e.UnsupportedType, R = F || I ? "pe-5" : void 0, z = () => {
-		F && r?.(t);
-	}, B = (e) => {
-		(e.key === "Enter" || e.key === " ") && F && (e.preventDefault(), z());
-	}, V = f("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Q.tile, !A && s === n.Light && Q.tileLight, A && Q.tileError), H = /* @__PURE__ */ Y("div", {
-		title: T,
-		className: f(y, "line-clamp-2 min-w-0 break-words", Q.nameText, !A && R),
-		children: T
-	}), U = /* @__PURE__ */ X("div", {
-		className: f("flex items-center gap-1 overflow-hidden", A && R),
-		children: [/* @__PURE__ */ Y(N, {
+}, 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(() => {
+		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), ee = /* @__PURE__ */ q("div", {
+		title: R,
+		className: d(x, "line-clamp-2 min-w-0 break-all", X.nameText, !k && I),
+		children: R
+	}), V = M && /* @__PURE__ */ J("div", {
+		className: d("flex items-center gap-1 overflow-hidden", k && I),
+		children: [/* @__PURE__ */ q(M, {
 			size: 16,
-			className: Q.typeText,
+			className: X.typeText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ Y("span", {
-			className: f(b, "truncate", Q.typeText),
-			children: p ? `${P} · ${p}` : P
+		}), /* @__PURE__ */ q("span", {
+			className: d(S, "truncate", X.typeText),
+			children: _ ? `${N} · ${_}` : N
 		})]
-	}), W = /* @__PURE__ */ X(J, { children: [
-		A ? /* @__PURE__ */ X(J, { children: [U, H] }) : /* @__PURE__ */ X(J, { children: [H, U] }),
-		O && /* @__PURE__ */ Y("div", {
+	}), te = () => {
+		p && f ? f(w) : n && n(w);
+	}, ne = /* @__PURE__ */ J(K, { children: [
+		k ? /* @__PURE__ */ J(K, { children: [V, ee] }) : /* @__PURE__ */ J(K, { children: [ee, V] }),
+		O && /* @__PURE__ */ q("div", {
 			role: "progressbar",
-			"aria-label": g,
-			className: f("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", Q.track),
-			children: /* @__PURE__ */ Y("div", { className: f("h-full w-1/3 rounded-full", Q.indeterminateFill) })
+			"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) })
 		}),
-		F && /* @__PURE__ */ Y(L, {
-			size: m.SM,
-			"aria-hidden": !0,
-			className: f("absolute end-1 top-1 h-6 w-6 rounded-lg p-1 opacity-0 transition-opacity group-hover:opacity-100 mobile:opacity-100", Q.hoverIcon)
+		P && /* @__PURE__ */ q(We, {
+			ariaLabel: h,
+			errorTitle: j,
+			errorDescId: A,
+			onClick: o,
+			id: w
 		}),
-		I && /* @__PURE__ */ Y(h, {
-			icon: /* @__PURE__ */ Y(xe, {
-				size: m.SM,
-				"aria-hidden": !0
-			}),
-			size: k.Small,
-			className: f("absolute end-1 top-1 h-6 w-6 rounded-lg", Q.retryIcon),
-			"aria-label": u,
-			"aria-describedby": M ? j : void 0,
-			onClick: (e) => {
-				e.stopPropagation(), i(w);
-			}
+		F && /* @__PURE__ */ q(Ue, {
+			ariaLabel: g,
+			errorTitle: j,
+			errorDescId: A,
+			onClick: r,
+			id: w
+		}),
+		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
 		}),
-		A && /* @__PURE__ */ Y("span", {
-			id: j,
+		k && /* @__PURE__ */ q("span", {
+			id: A,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: M
+			children: j
 		})
 	] });
-	return /* @__PURE__ */ Y("div", {
-		className: f("inline-flex", S),
-		children: F ? /* @__PURE__ */ Y("div", {
+	return /* @__PURE__ */ q("div", {
+		style: u,
+		className: d("inline-flex", C),
+		children: /* @__PURE__ */ q("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": c,
-			onClick: z,
-			onKeyDown: B,
-			style: C,
-			className: f(V, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: W
-		}) : /* @__PURE__ */ Y("div", {
-			className: V,
-			title: M || void 0,
-			role: A ? "group" : void 0,
-			"aria-describedby": A ? j : void 0,
-			tabIndex: A ? 0 : void 0,
-			style: C,
-			children: W
+			"aria-label": h,
+			onClick: te,
+			onKeyDown: L,
+			style: u,
+			className: d(B, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: ne
+		})
+	});
+}, Xe = /* @__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(() => {
+		i(e && t ? "loading" : "idle");
+	}, [e, t]), Me(() => {
+		let r = n.current;
+		if (!r || !e || !t) return;
+		let a = () => i("loaded"), o = () => i("error");
+		return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
+			r.removeEventListener("load", a), r.removeEventListener("error", o);
+		};
+	}, [e, t]), {
+		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({
+		enabled: x,
+		src: _
+	}), D = () => {
+		v && n ? n(h) : w && r && r(h);
+	};
+	return /* @__PURE__ */ q("div", {
+		className: d(Fe, w && "cursor-pointer", X.tile, m),
+		onClick: D,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+		},
+		tabIndex: 0,
+		role: "button",
+		style: o,
+		"aria-label": w ? l : v ? u : void 0,
+		children: /* @__PURE__ */ J("div", {
+			className: "relative h-full w-full overflow-hidden",
+			children: [
+				a && /* @__PURE__ */ q(Ke, {
+					onClick: a,
+					id: h
+				}),
+				s && /* @__PURE__ */ q(We, {
+					onClick: s,
+					id: h
+				}),
+				E !== Xe.Loaded && /* @__PURE__ */ q(S, {
+					variant: C.Rectangular,
+					width: "100%",
+					height: "100%",
+					active: E === Xe.Loading,
+					overlay: /* @__PURE__ */ q(H, {
+						size: p.LG,
+						className: f?.placeholderIconClassName ?? "text-secondary",
+						"aria-hidden": !0
+					}),
+					className: "absolute inset-0 rounded-xl"
+				}),
+				/* @__PURE__ */ q("img", {
+					ref: T,
+					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")
+				})
+			]
 		})
 	});
-}, qe = { tile: "_tile_1s4d7_1" }, Je = ({ 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 = d({
+}, $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,
+		searchQuery: n,
+		styles: l,
+		cssVars: m
+	}) : h ? /* @__PURE__ */ q(Qe, {
+		attachment: e,
+		labels: c,
+		onClick: o,
+		onExpand: a,
+		styles: l,
+		onRemove: r,
+		cssVars: m,
+		onDownload: s
+	}) : /* @__PURE__ */ q(Ye, {
+		attachment: e,
+		onClick: o,
+		onRetry: i,
+		onRemove: r,
+		onDownload: s,
+		isLink: _,
+		isPasted: f,
+		styles: l,
+		labels: c,
+		onExpand: a,
+		cssVars: m,
+		isExpandable: p
+	});
+}, et = { tile: "_tile_1s4d7_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,
@@ -438,114 +380,101 @@ var Pe = /* @__PURE__ */ function(e) {
 		"--ci-more-tile-border-hover": c?.borderHover,
 		"--ci-more-tile-focus-outline": c?.focusOutline
 	});
-	return /* @__PURE__ */ Y("button", {
+	return /* @__PURE__ */ q("button", {
 		type: "button",
 		onClick: t,
 		"aria-label": a ?? `Show ${e} more attachments`,
 		style: l,
-		className: f("flex size-[84px] items-center justify-center rounded-xl border", o, qe.tile, s),
-		children: r ?? /* @__PURE__ */ Y("bdi", {
+		className: d(Fe, o, et.tile, s),
+		children: r ?? /* @__PURE__ */ q("bdi", {
 			dir: "ltr",
 			children: `+${e}`
 		})
 	});
-}, Ye = {
+}, Q = {
 	container: "_container_7fktb_1",
 	headerIcon: "_headerIcon_7fktb_6",
 	headerLabel: "_headerLabel_7fktb_7",
 	downloadAllButton: "_downloadAllButton_7fktb_8",
 	imageTile: "_imageTile_7fktb_12"
-}, Xe = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ze = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, labels: o, styles: s, theme: c }) => {
-	let { ariaLabel: u = "Attachments", clickLabel: p = "Download attachment", retryLabel: g = "Retry upload", showLessLabel: _ = "Show less", downloadAllLabel: v = "Download all", getHeaderLabel: y = (e) => Xe(e, "attachment"), promptLabel: b, pastedLabel: x, imageLabel: S } = o ?? {}, { typography: { headerLabelClassName: C = "dial-tiny-semi-text" } = {}, colors: w, className: T } = s ?? {}, E = d({
-		"--ci-group-bg": w?.background,
-		"--ci-group-border": w?.border,
-		"--ci-group-text": w?.text
-	}), [D, O] = q(!1), k = Me(() => Ue(e.length, D), [e.length, D]);
+}, 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]);
 	if (e.length === 0) return null;
-	let A = e.some((e) => e.type === t.Image), j = e.some((e) => e.type !== t.Image), M = A && j, N = e.length >= 5, F = M ? _e : A ? ye : R, I = y(e.length), z = e.slice(0, k.visibleCount);
-	return /* @__PURE__ */ X("div", {
+	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 t = e.filter((e) => e.status === c.Idle);
+		r ? r(t) : t.forEach((e) => n?.(e.id));
+	}, B = (t) => {
+		let n = e.find((e) => e.id === t);
+		n && r?.([n]);
+	};
+	return /* @__PURE__ */ J("div", {
 		role: "group",
-		"aria-label": u,
-		style: E,
-		className: f("rounded-2xl border p-3", N ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Ye.container, T),
-		children: [/* @__PURE__ */ X("div", {
+		"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__ */ Y(F, {
-					size: m.SM,
-					className: f("shrink-0", Ye.headerIcon),
+				/* @__PURE__ */ q(P, {
+					size: p.SM,
+					className: d("shrink-0", Q.headerIcon),
 					"aria-hidden": !0
 				}),
-				/* @__PURE__ */ Y("span", {
-					className: f(C, Ye.headerLabel),
+				/* @__PURE__ */ q("span", {
+					className: d(S, Q.headerLabel),
 					children: I
 				}),
-				e.length >= 2 && (r || n) && /* @__PURE__ */ Y(h, {
-					icon: /* @__PURE__ */ Y(L, {
-						size: m.SM,
+				e.length >= 2 && (r || n) && /* @__PURE__ */ q(m, {
+					icon: /* @__PURE__ */ q(F, {
+						size: p.SM,
 						"aria-hidden": !0
 					}),
-					className: f("ms-auto h-6 w-6 rounded-lg", Ye.downloadAllButton),
-					"aria-label": v,
-					onClick: () => {
-						let t = e.filter((e) => e.status === l.Idle);
-						r ? r(t) : t.forEach((e) => n?.(e));
-					}
+					className: d("ms-auto h-6 w-6 rounded-lg", Q.downloadAllButton),
+					"aria-label": g,
+					onClick: z
 				})
 			]
-		}), /* @__PURE__ */ X("div", {
+		}), /* @__PURE__ */ J("div", {
 			role: "list",
 			"aria-label": I,
-			className: f("gap-3", N ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
+			className: d("gap-3", N ? "grid grid-cols-[repeat(5,83px)] overflow-x-auto" : "flex flex-wrap"),
 			children: [
-				z.map((e) => /* @__PURE__ */ Y("div", {
+				R.map((e) => /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: e.type === t.Image ? /* @__PURE__ */ Y(We, {
-						attachment: e,
-						onClick: n ? () => n(e) : void 0,
-						onRetry: i,
-						labels: {
-							clickLabel: p,
-							retryLabel: g,
-							promptLabel: b,
-							pastedLabel: x,
-							imageLabel: S
-						},
-						styles: {
-							roundedClassName: "rounded-xl",
-							className: f("size-[84px]", Ye.imageTile)
-						},
-						showHoverDownloadIcon: !0
-					}) : /* @__PURE__ */ Y(Ke, {
+					children: /* @__PURE__ */ q($e, {
 						attachment: e,
 						onClick: n,
+						onDownload: B,
 						onRetry: i,
 						labels: {
-							clickLabel: p,
-							retryLabel: g,
-							sizeLabel: a?.(e),
-							promptLabel: b,
-							pastedLabel: x,
-							imageLabel: S
-						},
-						theme: c
+							clickLabel: l,
+							retryLabel: f,
+							promptLabel: y,
+							pastedLabel: b,
+							imageLabel: x,
+							openInNewTabLabel: _
+						}
 					})
 				}, e.id)),
-				k.layout === Ie.Collapsed && /* @__PURE__ */ Y("div", {
+				O.layout === Y.Collapsed && /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ Y(Je, {
-						count: k.hiddenCount,
-						onClick: () => O(!0)
+					children: /* @__PURE__ */ q(tt, {
+						count: O.hiddenCount,
+						onClick: () => D(!0)
 					})
 				}),
-				N && D && /* @__PURE__ */ Y("div", {
+				N && E && /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ Y(Je, {
+					children: /* @__PURE__ */ q(tt, {
 						count: 0,
-						onClick: () => O(!1),
-						labels: { ariaLabel: _ },
-						children: /* @__PURE__ */ Y(P, {
-							size: m.MD,
+						onClick: () => D(!1),
+						labels: { ariaLabel: h },
+						children: /* @__PURE__ */ q(M, {
+							size: p.MD,
 							"aria-hidden": !0
 						})
 					})
@@ -553,28 +482,28 @@ var Pe = /* @__PURE__ */ function(e) {
 			]
 		})]
 	});
-}, Qe = {
+}, it = {
 	tabContainer: "_tabContainer_rzv03_1",
 	tabActive: "_tabActive_rzv03_13"
 };
-Oe(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
+je(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
 	let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
-	return /* @__PURE__ */ Y("div", {
+	return /* @__PURE__ */ q("div", {
 		className: "flex flex-nowrap gap-1",
 		children: e.map((e) => {
 			let r = t === e.id;
-			return /* @__PURE__ */ Y(D, {
+			return /* @__PURE__ */ q(T, {
 				label: e.label,
 				selected: r,
 				onClick: () => n(e.id),
-				className: f("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, Qe.tabContainer, r && Qe.tabActive)
+				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 $e = (e) => /* @__PURE__ */ Y(b, { ...e }), et = ({ 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 = Ne(o);
-	Ae(() => {
+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(() => {
 		o && !p.current && (c(t), u(n), f(r)), p.current = o;
 	}, [
 		o,
@@ -591,7 +520,7 @@ var $e = (e) => /* @__PURE__ */ Y(b, { ...e }), et = ({ features: e, initialResp
 		setResponseFormat: c,
 		setSystemPrompt: u,
 		setTemperature: f,
-		handleSubmit: ke(() => {
+		handleSubmit: U(() => {
 			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();
@@ -605,55 +534,55 @@ var $e = (e) => /* @__PURE__ */ Y(b, { ...e }), et = ({ features: e, initialResp
 			a
 		])
 	};
-}, tt = "!text-[14px] !leading-[20px] font-semibold !text-primary gap-1", nt = ({ 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: l = "Markdown", responseFormatPlainTextLabel: d = "Plain text", systemPromptLabel: f = "System prompt", systemPromptTooltip: p = "Enter a prompt", temperatureLabel: m = "Temperature", temperatureLabels: h = [
+}, st = "!text-[14px] !leading-[20px] font-semibold !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 = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: _ }) => /* @__PURE__ */ X("div", {
+], temperatureHint: _ }) => /* @__PURE__ */ J("div", {
 	className: "flex flex-col gap-4 px-6 py-3",
 	children: [
-		e.responseFormat && /* @__PURE__ */ Y(x, {
+		e.responseFormat && /* @__PURE__ */ q(b, {
 			fieldTitle: s,
-			labelClassName: tt,
+			labelClassName: st,
 			elementId: "response-format",
-			orientation: j.Column,
-			activeRadioButton: t ?? u.Markdown,
+			orientation: k.Column,
+			activeRadioButton: t ?? l.Markdown,
 			labelDescription: c,
 			radioButtons: [{
-				id: u.Markdown,
-				name: l
+				id: l.Markdown,
+				name: u
 			}, {
-				id: u.PlainText,
+				id: l.PlainText,
 				name: d
 			}],
 			onChange: (e) => i(e)
 		}),
-		e.systemPrompt && /* @__PURE__ */ Y(g, {
+		e.systemPrompt && /* @__PURE__ */ q(h, {
 			value: n,
 			placeholder: p,
 			labelProps: {
-				className: tt,
+				className: st,
 				label: f
 			},
 			onChange: (e) => a(e ?? "")
 		}),
-		e.temperature && /* @__PURE__ */ Y(T, {
+		e.temperature && /* @__PURE__ */ q(w, {
 			labelProps: {
 				label: m,
-				className: tt,
+				className: st,
 				caption: _
 			},
 			value: r,
 			min: 0,
 			max: 1,
 			step: .1,
-			labels: h,
+			labels: g,
 			onChange: o
 		})
 	]
 });
-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: g = "Apply changes", saveDisabledTooltip: _ }) => {
-	let { responseFormat: v, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: E } = et({
+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({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -661,27 +590,27 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ Y(y, {
+	return /* @__PURE__ */ q(v, {
 		open: !0,
 		header: o,
-		size: A.Sm,
+		size: O.Sm,
 		onClose: a,
 		className: "!bg-layer-2",
-		footer: /* @__PURE__ */ Y("div", {
+		footer: /* @__PURE__ */ q("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ Y(O, {
+			children: /* @__PURE__ */ q(E, {
 				tooltip: _,
 				hideTooltip: S || !_,
-				children: /* @__PURE__ */ Y($e, {
+				children: /* @__PURE__ */ q(at, {
 					label: g,
-					onClick: E,
+					onClick: D,
 					disabled: !S
 				})
 			})
 		}),
-		children: /* @__PURE__ */ Y(nt, {
+		children: /* @__PURE__ */ q(ct, {
 			features: e,
-			responseFormat: v,
+			responseFormat: y,
 			systemPrompt: b,
 			temperature: x,
 			onResponseFormatChange: C,
@@ -701,93 +630,93 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 });
 //#endregion
 //#region src/components/MessageActions/MessageActions.tsx
-var rt = 2e3, it = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r, onRegenerate: i, onCopy: a, onCopyMarkdown: o, onLike: l, onDislike: u, activeRating: d, isAlwaysVisible: p, className: g, labels: _ }) => {
-	let { tooltips: v, ariaLabels: y } = _ ?? {}, [b, x] = q(null), [S, C] = q(""), w = ke(() => {
-		a?.(), x("copy"), C(y?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => x(null), rt);
-	}, [a, y?.copiedStatus]), T = ke(() => {
-		o?.(), x("markdown"), C(y?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => x(null), rt);
-	}, [o, y?.copiedMarkdownStatus]);
-	return /* @__PURE__ */ X("div", {
+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", {
 		role: "toolbar",
 		"aria-label": y?.actionsGroup ?? "Message actions",
-		className: f("flex gap-1", !p && "opacity-0 group-hover:opacity-100", g),
-		children: [/* @__PURE__ */ Y("span", {
+		className: d("flex gap-1", !h && "opacity-0 group-hover:opacity-100", g),
+		children: [/* @__PURE__ */ q("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
 			children: S
-		}), e === c.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(h, {
-			icon: /* @__PURE__ */ Y(ve, {
-				size: m.SM,
+		}), e === s.User ? /* @__PURE__ */ J(K, { children: [t && /* @__PURE__ */ q(m, {
+			icon: /* @__PURE__ */ q(Se, {
+				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: k.Small,
+			size: D.Small,
 			"aria-label": y?.editMessage ?? "Edit message",
 			tooltipProps: { tooltip: v?.edit ?? "Edit" },
 			onClick: t,
 			onMouseEnter: n,
 			onFocus: n
-		}), r && /* @__PURE__ */ Y(h, {
-			icon: /* @__PURE__ */ Y(Te, {
-				size: m.SM,
+		}), r && /* @__PURE__ */ q(m, {
+			icon: /* @__PURE__ */ q(Oe, {
+				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: k.Small,
+			size: D.Small,
 			"aria-label": y?.deleteMessage ?? "Delete message",
 			tooltipProps: { tooltip: v?.delete ?? "Delete" },
 			onClick: r
-		})] }) : /* @__PURE__ */ X(J, { children: [
-			i && /* @__PURE__ */ Y(h, {
-				icon: /* @__PURE__ */ Y(be, {
-					size: m.SM,
+		})] }) : /* @__PURE__ */ J(K, { children: [
+			i && /* @__PURE__ */ q(m, {
+				icon: /* @__PURE__ */ q(Ce, {
+					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: k.Small,
+				size: D.Small,
 				"aria-label": y?.regenerateResponse ?? "Regenerate response",
 				tooltipProps: { tooltip: v?.regenerate ?? "Regenerate" },
 				onClick: i
 			}),
-			a && /* @__PURE__ */ Y(h, {
-				icon: Y(b === "copy" ? M : I, {
-					size: m.SM,
+			a && /* @__PURE__ */ q(m, {
+				icon: q(b === "copy" ? A : P, {
+					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: k.Small,
+				size: D.Small,
 				"aria-label": y?.copyResponse ?? "Copy response",
 				tooltipProps: { tooltip: b === "copy" ? v?.copied ?? "Copied!" : v?.copy ?? "Copy" },
 				onClick: w
 			}),
-			o && /* @__PURE__ */ Y(h, {
-				icon: Y(b === "markdown" ? M : he, {
-					size: m.SM,
+			c && /* @__PURE__ */ q(m, {
+				icon: q(b === "markdown" ? A : ye, {
+					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: k.Small,
+				size: D.Small,
 				"aria-label": y?.copyAsMarkdown ?? "Copy as markdown",
 				tooltipProps: { tooltip: b === "markdown" ? v?.copiedMarkdown ?? "Copied!" : v?.copyMarkdown ?? "Copy as Markdown" },
 				onClick: T
 			}),
-			l && /* @__PURE__ */ Y(h, {
-				icon: /* @__PURE__ */ Y(we, {
-					size: m.SM,
+			l && /* @__PURE__ */ q(m, {
+				icon: /* @__PURE__ */ q(De, {
+					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: k.Small,
+				size: D.Small,
 				"aria-label": y?.likeResponse ?? "Like response",
-				"aria-pressed": d === s.Like,
-				className: d === s.Like ? "!text-accent-primary" : void 0,
+				"aria-pressed": f === o.Like,
+				className: f === o.Like ? "!text-accent-primary" : void 0,
 				tooltipProps: { tooltip: v?.like ?? "Like" },
 				onClick: l
 			}),
-			u && /* @__PURE__ */ Y(h, {
-				icon: /* @__PURE__ */ Y(Ce, {
-					size: m.SM,
+			u && /* @__PURE__ */ q(m, {
+				icon: /* @__PURE__ */ q(Ee, {
+					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: k.Small,
+				size: D.Small,
 				"aria-label": y?.dislikeResponse ?? "Dislike response",
-				"aria-pressed": d === s.Dislike,
-				className: d === s.Dislike ? "!text-accent-primary" : void 0,
+				"aria-pressed": f === o.Dislike,
+				className: f === o.Dislike ? "!text-accent-primary" : void 0,
 				tooltipProps: { tooltip: v?.dislike ?? "Dislike" },
 				onClick: u
 			})
@@ -800,67 +729,66 @@ var rt = 2e3, it = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 	collapsedText: "_collapsedText_1exhl_15",
 	startersDivider: "_startersDivider_1exhl_26",
 	text: "_text_1exhl_30"
-}, at = ({ text: e, styles: n, actions: i, hasAlwaysVisibleActions: o, isStreaming: s, attachments: l, afterContent: u, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, getAttachmentSizeLabel: x, attachmentTheme: C, codeBlockTheme: w, labels: T }) => {
-	let { colors: E, typography: D, className: O, bubbleClassName: k } = n ?? {}, { attachmentClickLabel: A, attachmentRetryLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = T ?? {}, R = s ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = d({
-		"--cm-bubble-text": E?.text,
-		"--cm-starters-divider": E?.startersDivider
-	}), B = f($.text, D?.fontClassName), V = !!(h || g);
-	return /* @__PURE__ */ X("div", {
+}, 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", {
 		role: "group",
-		"aria-label": I,
-		style: z,
-		className: f("flex w-full items-start gap-3", O),
-		children: [V && /* @__PURE__ */ Y(r, {
+		"aria-label": F,
+		style: R,
+		className: d("flex w-full items-start gap-3", E),
+		children: [B && /* @__PURE__ */ q(n, {
 			src: h,
 			size: 28,
-			initialsName: g || L,
-			labels: { tooltip: g ?? L }
-		}), /* @__PURE__ */ X("div", {
+			initialsName: g || I,
+			labels: { tooltip: g ?? I }
+		}), /* @__PURE__ */ J("div", {
 			className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
-			children: [/* @__PURE__ */ X("div", {
-				className: f("flex w-full min-w-0 max-w-full flex-col items-start gap-4", k),
+			children: [/* @__PURE__ */ J("div", {
+				className: d("flex w-full min-w-0 max-w-full flex-col items-start gap-4", D),
 				children: [
-					(e || s) && /* @__PURE__ */ Y("div", {
+					(e || c) && /* @__PURE__ */ q("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: f(B, "min-w-0 max-w-full text-start"),
-						children: /* @__PURE__ */ Y(a, {
+						className: d(z, "min-w-0 max-w-full text-start"),
+						children: /* @__PURE__ */ q(i, {
 							content: e,
-							isStreaming: s,
-							thinkingLabel: N,
+							isStreaming: c,
+							thinkingLabel: M,
 							components: _,
-							codeBlockCopyLabel: P,
-							codeBlockCopiedLabel: F,
-							codeBlockTheme: w
+							codeBlockCopyLabel: N,
+							codeBlockCopiedLabel: P,
+							codeBlockTheme: S
 						})
 					}),
-					/* @__PURE__ */ Y(Ze, {
-						attachments: R,
-						onAttachmentClick: v,
+					/* @__PURE__ */ q(rt, {
+						attachments: L,
+						onAttachmentClick: (e) => v?.(l?.find((t) => t.id === e)),
 						onDownloadAll: y,
 						onRetry: b,
 						labels: {
-							clickLabel: A,
-							retryLabel: j
-						},
-						getSizeLabel: x,
-						theme: C
+							clickLabel: O,
+							retryLabel: k,
+							openInNewTabLabel: A
+						}
 					}),
-					u,
-					/* @__PURE__ */ Y(it, {
-						...i,
+					f,
+					/* @__PURE__ */ q(ut, {
+						...a,
 						isAlwaysVisible: o,
-						role: c.Assistant
+						role: s.Assistant
 					})
 				]
-			}), p && p.length > 0 && m && /* @__PURE__ */ Y("div", {
+			}), p && p.length > 0 && m && /* @__PURE__ */ q("div", {
 				role: "list",
-				"aria-label": M,
-				className: f("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
-				children: p.map((e, t) => /* @__PURE__ */ Y("div", {
+				"aria-label": j,
+				className: d("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
+				children: p.map((e, t) => /* @__PURE__ */ q("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ Y(S, {
+					children: /* @__PURE__ */ q(x, {
 						label: e.title,
 						className: "min-w-[40px]",
 						onClick: () => m(e)
@@ -869,110 +797,109 @@ var rt = 2e3, it = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 			})]
 		})]
 	});
-}, ot = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ Y("div", {
+}, ft = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ q("div", {
 	role: "status",
 	"aria-live": "polite",
 	className: "dial-info-notification dial-notification",
-	children: /* @__PURE__ */ Y(v, {
+	children: /* @__PURE__ */ q(_, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
-}), st = /* @__PURE__ */ function(e) {
+}), pt = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
-}({}), ct = 10, lt = ({ text: e, position: t = st.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = ct, labels: s, onAttachmentClick: l, onDownloadAll: u, onAttachmentRetry: h, getAttachmentSizeLabel: g, attachmentTheme: v }) => {
-	let { colors: y, typography: b, className: x, bubbleClassName: S } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, userMessageAriaLabel: A = "User message" } = s ?? {}, { textRef: j, isTextCollapsed: M, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = p({
+}({}), 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({
 		text: e,
 		collapsedLineCount: o
-	}), B = d({
-		"--cm-bubble-user-bg": y?.userBackground,
-		"--cm-bubble-user-border": y?.userBorder,
-		"--cm-bubble-fade-start": y?.fadeStart,
-		"--cm-bubble-text": y?.text,
-		"--cm-bubble-collapsed-height": F ? `${I}px` : void 0,
-		"--cm-bubble-expanded-height": F ? `${L}px` : void 0
-	}), V = t === st.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", H = f($.text, b?.fontClassName), U = T ?? C, W = E ?? w, ee = R ? C : w, G = R ? U : W, te = R ? N : P, K = je();
-	return /* @__PURE__ */ Y("div", {
+	}), 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]", ee = d($.text, v?.fontClassName), V = C ?? x, te = w ?? S, ne = L ? x : S, re = L ? V : te, ie = L ? j : M, ae = Ne();
+	return /* @__PURE__ */ q("div", {
 		role: "group",
-		"aria-label": A,
-		style: B,
-		className: f("flex w-full", x),
-		children: /* @__PURE__ */ X("div", {
+		"aria-label": k,
+		style: z,
+		className: d("flex w-full", y),
+		children: /* @__PURE__ */ J("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
-				/* @__PURE__ */ Y(Ze, {
+				/* @__PURE__ */ q(rt, {
 					attachments: a ?? [],
-					onAttachmentClick: l,
-					onDownloadAll: u,
+					onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
+					onDownloadAll: m,
 					onRetry: h,
 					labels: {
-						clickLabel: D,
-						retryLabel: O
+						clickLabel: T,
+						retryLabel: E,
+						openInNewTabLabel: O
 					},
-					getSizeLabel: g,
-					theme: v,
 					styles: { className: "max-w-[640px]" }
 				}),
-				e && /* @__PURE__ */ Y("div", {
-					className: f($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, S),
-					children: /* @__PURE__ */ X("div", {
+				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", {
 						className: "flex min-w-0 flex-col items-start",
-						children: [/* @__PURE__ */ Y("div", {
-							id: K,
-							className: f("relative overflow-hidden", F && $.collapsibleText, F && !R && $.expandedText, M && $.collapsedText),
-							children: /* @__PURE__ */ Y("p", {
-								ref: j,
-								className: f(H, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+						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(ee, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
-						}), F && /* @__PURE__ */ Y(_, {
-							label: /* @__PURE__ */ Y(J, { children: ee }),
-							iconBefore: /* @__PURE__ */ Y(te, {
-								size: m.SM,
+						}), P && /* @__PURE__ */ q(g, {
+							label: /* @__PURE__ */ q(K, { children: ne }),
+							iconBefore: /* @__PURE__ */ q(ie, {
+								size: p.SM,
 								"aria-hidden": "true"
 							}),
-							"aria-label": G,
-							"aria-expanded": !R,
-							"aria-controls": K,
+							"aria-label": re,
+							"aria-expanded": !L,
+							"aria-controls": ae,
 							className: "mt-3",
-							onClick: z,
-							size: k.Small
+							onClick: R,
+							size: D.Small
 						})]
 					})
 				}),
-				/* @__PURE__ */ Y(it, {
+				/* @__PURE__ */ q(ut, {
 					...r,
 					isAlwaysVisible: i,
-					role: c.User
+					role: s.User
 				})
 			]
 		})
 	});
-}, ut = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === c.Status ? /* @__PURE__ */ Y(ot, { labels: {
+}, gt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ q(ft, { labels: {
 	titleText: r.labels?.statusTitleText,
 	bodyText: r.labels?.statusBodyText ?? ""
-} }) : e === c.User ? /* @__PURE__ */ Y(lt, {
+} }) : e === s.User ? /* @__PURE__ */ q(ht, {
 	...r,
 	onAttachmentClick: t
-}) : /* @__PURE__ */ Y(at, {
+}) : /* @__PURE__ */ q(dt, {
 	...r,
 	markdownComponents: n,
 	onAttachmentClick: t
-}), dt = { button: "_button_15boc_1" }, ft = ({ labels: { label: e }, onClick: t, styles: n }) => {
+}), _t = { button: "_button_15boc_1" }, vt = ({ labels: { label: e }, onClick: t, styles: n }) => {
 	let { colors: r, typography: i, className: a } = n ?? {};
-	return /* @__PURE__ */ Y("button", {
+	return /* @__PURE__ */ q("button", {
 		type: "button",
 		onClick: t,
-		style: d({
+		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: f(dt.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),
+		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 { at as AssistantMessageBubble, st as BubblePosition, it as MessageActions, ut as MessageBubble, ft as MessageSource, ot as StatusMessageBubble, lt as UserMessageBubble };
+export { dt as AssistantMessageBubble, pt as BubblePosition, ut as MessageActions, gt as MessageBubble, vt as MessageSource, ft as StatusMessageBubble, ht as UserMessageBubble };