@epam/ai-dial-conversation-messages 1.1.0-dev.49 → 1.1.0-dev.491

package/index.js

@@ -1,915 +1,338 @@
-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, DialPopup as _, DialPrimaryButton as v, DialRadioGroup as y, DialRoundedButton as b, DialSkeleton as x, DialSkeletonVariant as S, DialSlider as C, DialTag as w, DialTooltip as T, ElementSize as E, InfoMessageNotification 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 "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";
-//#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) => {
-	let t = e.lastIndexOf(".");
-	return t > 0 ? e.slice(0, t) : e;
-}, Le = (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/bmp": return R;
-		default: return H;
-	}
-	if (e.startsWith("video/")) return ke;
-	if (e.startsWith("audio/")) return be;
-	switch (e) {
-		case "application/pdf": return ae;
-		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/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 "text/csv": return B;
-		case "text/plain": return me;
-		case "text/html":
-		case "application/xhtml+xml": return te;
-		case "text/xml":
-		case "application/xml": return _e;
-		case "application/sql":
-		case "text/x-sql": return ue;
-		case "text/javascript":
-		case "application/javascript": return re;
-		case "text/jsx": return ie;
-		case "application/typescript":
-		case "text/typescript": return fe;
-		case "text/tsx": return pe;
-		case "text/css": return z;
-		case "text/x-php":
-		case "application/x-php": return oe;
-		case "text/x-rustsrc":
-		case "application/x-rust": return le;
-		case "text/x-vue": return he;
-		default: return L;
-	}
-}, Re = (e) => {
-	let { type: n, contentType: r } = e;
-	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;
-}, 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 = ze(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;
-	return {
-		isLoading: s,
-		isError: l,
-		isImage: u,
-		isAudio: d,
-		isLink: f,
-		BottomIcon: f ? null : Re(e),
-		typeLabel: f ? null : Be(e, n)
+import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, buildCssVars as o, mergeClasses as s, useCollapsedText as c } from "@epam/ai-dial-chat-shared";
+import { AttachmentGroup as l } from "@epam/ai-dial-attachment-input";
+import { DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, ElementSize as f, InfoMessageNotification as p, LinkButton as m, NeutralButton as h, ToggleIconButton as g } from "@epam/ai-dial-ui-kit";
+import { useCallback as _, useEffect as v, useId as y, useRef as b, useState as x } from "react";
+import { IconChevronDown as S, IconChevronUp as C, IconMarkdown as w, IconPencilMinus as T, IconRefresh as E, IconThumbDown as D, IconThumbDownFilled as O, IconThumbUp as k, IconThumbUpFilled as A, IconTrashX as j } from "@tabler/icons-react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+//#region src/hooks/useInlineStartIndent/useInlineStartIndent.ts
+var F = 4, I = (e) => {
+	let t = b(null), [n, r] = x(0);
+	return v(() => {
+		if (!e) return;
+		let n = t.current;
+		if (n == null) return;
+		let i = new ResizeObserver((e) => {
+			let t = e[0];
+			t != null && r(t.contentRect.width);
+		});
+		return i.observe(n), () => i.disconnect();
+	}, [e]), {
+		slotRef: t,
+		firstLineIndent: e ? `calc(${n}px + ${F}px)` : void 0
 	};
-}, 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, {
-	icon: a,
-	size: E.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, 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 = {
-	[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(() => {
-		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, {
-			size: 16,
-			className: X.typeText,
-			"aria-hidden": !0
-		}), /* @__PURE__ */ q("span", {
-			className: d(S, "min-w-0 flex-1 truncate", X.typeText),
-			children: _ ? `${N} · ${_}` : N
-		})]
-	}), 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
-		}),
-		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
-		}),
-		k && /* @__PURE__ */ q("span", {
-			id: A,
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: j
-		})
-	] });
-	return /* @__PURE__ */ q("div", {
-		style: u,
-		className: d("inline-flex", C),
-		children: /* @__PURE__ */ q("div", {
-			role: "button",
-			tabIndex: 0,
-			"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: C } = W(() => Ve(e), [e]), w = r !== void 0 && !v && !y && !b, { imageRef: T, imageLoadStatus: E } = Ze({
-		enabled: C,
-		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(x, {
-					variant: S.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")
-				})
-			]
-		})
-	});
-}, $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, {
-		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_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]);
-	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 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": 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, {
-					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", {
-			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
-						})
-					})
-				})
-			]
-		})]
-	});
-}, 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",
-		role: "tablist",
-		children: e.map((e) => {
-			let r = t === e.id;
-			return /* @__PURE__ */ q("div", {
-				role: "tab",
-				"aria-selected": r,
-				className: "contents",
-				children: /* @__PURE__ */ q(w, {
-					label: e.label,
-					selected: r,
-					onClick: () => n(e.id),
-					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(v, { ...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,
-		t,
-		n,
-		r
-	]);
-	let m = !e.responseFormat || s != null;
-	return {
-		responseFormat: s,
-		systemPrompt: l,
-		temperature: d,
-		canSubmit: m,
-		setResponseFormat: c,
-		setSystemPrompt: u,
-		setTemperature: f,
-		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();
-		}, [
-			m,
-			e,
-			s,
-			l,
-			d,
-			i,
-			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 = [
-	"Precise",
-	"Neutral",
-	"Creative"
-], temperatureHint: _ }) => /* @__PURE__ */ J("div", {
-	className: "flex flex-col gap-4 px-6 py-3",
-	children: [
-		e.responseFormat && /* @__PURE__ */ q(y, {
-			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(C, {
-			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: v }) => {
-	let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: E, handleSubmit: D } = ot({
-		features: e,
-		initialResponseFormat: t,
-		initialSystemPrompt: n,
-		initialTemperature: r,
-		onSave: i,
-		onClose: a
-	});
-	return /* @__PURE__ */ q(_, {
-		open: !0,
-		header: o,
-		size: O.Sm,
-		onClose: a,
-		className: "!bg-layer-2",
-		footer: /* @__PURE__ */ q("div", {
-			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ q(T, {
-				tooltip: v,
-				hideTooltip: S || !v,
-				children: /* @__PURE__ */ q(at, {
-					label: g,
-					onClick: D,
-					disabled: !S
-				})
-			})
-		}),
-		children: /* @__PURE__ */ q(ct, {
-			features: e,
-			responseFormat: y,
-			systemPrompt: b,
-			temperature: x,
-			onResponseFormatChange: C,
-			onSystemPromptChange: w,
-			onTemperatureChange: E,
-			responseFormatLabel: s,
-			responseFormatHint: c,
-			responseFormatMarkdownLabel: l,
-			responseFormatPlainTextLabel: u,
-			systemPromptLabel: d,
-			systemPromptTooltip: f,
-			temperatureLabel: p,
-			temperatureLabels: m,
-			temperatureHint: h
-		})
-	});
-});
-//#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", {
+}, L = { activeRating: "_activeRating_ygoee_1" }, R = 2e3, z = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: c, onRegenerate: l, onCopy: p, onCopyMarkdown: m, onLike: h, onDislike: v, activeRating: y, isAlwaysVisible: b, isDisabled: S = !1, className: C, labels: F, colors: I }) => {
+	let { tooltips: z, ariaLabels: B } = F ?? {}, [V, H] = x(null), [U, W] = x(""), G = n != null || c != null || l != null || p != null || m != null || h != null || v != null, K = o({ "--ma-active-rating-text": I?.activeRatingText }), q = _(() => {
+		p?.(), H("copy"), W(B?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => H(null), R);
+	}, [p, B?.copiedStatus]), J = _(() => {
+		m?.(), H("markdown"), W(B?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => H(null), R);
+	}, [m, B?.copiedMarkdownStatus]);
+	return G ? /* @__PURE__ */ P("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": B?.actionsGroup ?? "Message actions",
+		style: K,
+		className: s("flex gap-1", !b && "opacity-0 group-hover:opacity-100", C),
+		children: [/* @__PURE__ */ N("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, {
-				size: p.SM,
-				"aria-hidden": !0
+			children: U
+		}), e === a.User ? /* @__PURE__ */ P(M, { children: [n && /* @__PURE__ */ N(g, {
+			icon: /* @__PURE__ */ N(T, {
+				size: u.SM,
+				"aria-hidden": !0,
+				stroke: d
 			}),
-			size: E.Small,
-			"aria-label": y?.editMessage ?? "Edit message",
-			tooltipProps: { tooltip: v?.edit ?? "Edit" },
-			onClick: t,
-			onMouseEnter: n,
-			onFocus: n
-		}), r && /* @__PURE__ */ q(m, {
-			icon: /* @__PURE__ */ q(Oe, {
-				size: p.SM,
-				"aria-hidden": !0
+			size: f.Small,
+			"aria-label": B?.editMessage ?? "Edit message",
+			tooltipProps: { tooltip: z?.edit ?? "Edit" },
+			onClick: n,
+			onMouseEnter: r,
+			onFocus: r,
+			disabled: S
+		}), c && /* @__PURE__ */ N(g, {
+			icon: /* @__PURE__ */ N(j, {
+				size: u.SM,
+				"aria-hidden": !0,
+				stroke: d
 			}),
-			size: E.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: p.SM,
-					"aria-hidden": !0
+			size: f.Small,
+			"aria-label": B?.deleteMessage ?? "Delete message",
+			tooltipProps: { tooltip: z?.delete ?? "Delete" },
+			onClick: c,
+			disabled: S
+		})] }) : /* @__PURE__ */ P(M, { children: [
+			l && /* @__PURE__ */ N(g, {
+				icon: /* @__PURE__ */ N(E, {
+					size: u.SM,
+					"aria-hidden": !0,
+					stroke: d
 				}),
-				size: E.Small,
-				"aria-label": y?.regenerateResponse ?? "Regenerate response",
-				tooltipProps: { tooltip: v?.regenerate ?? "Regenerate" },
-				onClick: i
+				size: f.Small,
+				"aria-label": B?.regenerateResponse ?? "Regenerate response",
+				tooltipProps: { tooltip: z?.regenerate ?? "Regenerate" },
+				onClick: l,
+				disabled: S
 			}),
-			a && /* @__PURE__ */ q(m, {
-				icon: q(b === "copy" ? A : P, {
-					size: p.SM,
-					"aria-hidden": !0
-				}),
-				size: E.Small,
-				"aria-label": y?.copyResponse ?? "Copy response",
-				tooltipProps: { tooltip: b === "copy" ? v?.copied ?? "Copied!" : v?.copy ?? "Copy" },
-				onClick: w
+			p && /* @__PURE__ */ N(t, {
+				iconSize: u.SM,
+				onClick: q,
+				size: f.Small,
+				isCopied: V === "copy",
+				copyLabel: z?.copy ?? "Copy",
+				copiedLabel: z?.copied ?? "Copied!",
+				ariaLabel: B?.copyResponse ?? "Copy response",
+				isDisabled: S
 			}),
-			c && /* @__PURE__ */ q(m, {
-				icon: q(b === "markdown" ? A : ye, {
-					size: p.SM,
-					"aria-hidden": !0
+			m && /* @__PURE__ */ N(t, {
+				iconSize: u.SM,
+				onClick: J,
+				size: f.Small,
+				isCopied: V === "markdown",
+				iconCopy: /* @__PURE__ */ N(w, {
+					size: u.SM,
+					"aria-hidden": !0,
+					stroke: d
 				}),
-				size: E.Small,
-				"aria-label": y?.copyAsMarkdown ?? "Copy as markdown",
-				tooltipProps: { tooltip: b === "markdown" ? v?.copiedMarkdown ?? "Copied!" : v?.copyMarkdown ?? "Copy as Markdown" },
-				onClick: T
+				copyLabel: z?.copyMarkdown ?? "Copy as Markdown",
+				copiedLabel: z?.copiedMarkdown ?? "Copied!",
+				ariaLabel: B?.copyAsMarkdown ?? "Copy as markdown",
+				isDisabled: S
 			}),
-			l && /* @__PURE__ */ q(m, {
-				icon: /* @__PURE__ */ q(De, {
-					size: p.SM,
+			h && /* @__PURE__ */ N(g, {
+				icon: y === i.Like ? /* @__PURE__ */ N(A, {
+					className: L.activeRating,
+					size: u.SM,
 					"aria-hidden": !0
+				}) : /* @__PURE__ */ N(k, {
+					size: u.SM,
+					"aria-hidden": !0,
+					stroke: d
 				}),
-				size: E.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: f.Small,
+				"aria-label": B?.likeResponse ?? "Like response",
+				"aria-pressed": y === i.Like,
+				tooltipProps: { tooltip: z?.like ?? "Like" },
+				onClick: h,
+				disabled: S
 			}),
-			u && /* @__PURE__ */ q(m, {
-				icon: /* @__PURE__ */ q(Ee, {
-					size: p.SM,
+			v && /* @__PURE__ */ N(g, {
+				icon: y === i.Dislike ? /* @__PURE__ */ N(O, {
+					className: L.activeRating,
+					size: u.SM,
 					"aria-hidden": !0
+				}) : /* @__PURE__ */ N(D, {
+					size: u.SM,
+					"aria-hidden": !0,
+					stroke: d
 				}),
-				size: E.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: f.Small,
+				"aria-label": B?.dislikeResponse ?? "Dislike response",
+				"aria-pressed": y === i.Dislike,
+				tooltipProps: { tooltip: z?.dislike ?? "Dislike" },
+				onClick: v,
+				disabled: S
 			})
 		] })]
-	});
-}, $ = {
-	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: x, 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", {
+	}) : null;
+}, B = {
+	userBubble: "_userBubble_cq829_1",
+	collapsibleText: "_collapsibleText_cq829_6",
+	expandedText: "_expandedText_cq829_11",
+	collapsedText: "_collapsedText_cq829_15",
+	startersDivider: "_startersDivider_cq829_26",
+	text: "_text_cq829_30"
+}, V = "[&>.cm-bubble-markdown>div>*:first-child]:indent-[var(--cm-bubble-first-line-indent,0px)]", H = ({ text: t, styles: i, actions: c, hasAlwaysVisibleActions: u, isStreaming: d, attachments: f, beforeContent: p, afterContent: m, starters: g, onSelectStarter: _, deploymentIconUrl: v, deploymentDisplayName: y, markdownComponents: b, markdownClassNames: x, markdownUrlTransform: S, onAttachmentClick: C, onDownloadAll: w, onAttachmentRetry: T, codeBlockTheme: E, tableOnOpenInCanvas: D, labels: O, selectedAttachmentId: k }) => {
+	let { colors: A, typography: j, className: M, bubbleClassName: F } = i ?? {}, { attachmentClickLabel: L, attachmentRetryLabel: R, attachmentOpenInNewTabLabel: H, startersAriaLabel: U = "Quick reply buttons", thinkingLabel: W, codeBlockCopyLabel: G, codeBlockCopiedLabel: K, tableCopyCsvLabel: q, tableCopyTxtLabel: J, tableCopyMarkdownLabel: Y, tableCopiedLabel: X, tableDownloadCsvLabel: Z, tableOpenInCanvasLabel: ee, tableDownloadFilename: te, tableScrollRegionAriaLabel: ne, assistantMessageAriaLabel: re = "Assistant message", deploymentIconFallbackLabel: Q = "AI" } = O ?? {}, ie = d ? (f ?? []).filter((t) => t.type !== e.Audio) : f ?? [], { slotRef: $, firstLineIndent: ae } = I(p != null && !!t), oe = o({
+		"--cm-bubble-text": A?.text,
+		"--cm-starters-divider": A?.startersDivider,
+		"--cm-bubble-first-line-indent": ae
+	}), se = s(B.text, j?.fontClassName), ce = !!(v || y);
+	return /* @__PURE__ */ P("div", {
 		role: "group",
-		"aria-label": F,
-		style: R,
-		className: d("flex w-full items-start gap-3", E),
-		children: [B && /* @__PURE__ */ q(n, {
-			src: h,
+		"aria-label": re,
+		style: oe,
+		className: s("flex w-full items-start gap-3", M),
+		children: [ce && /* @__PURE__ */ N(n, {
+			src: v,
 			size: 28,
-			initialsName: g || I,
-			labels: { tooltip: g ?? I }
-		}), /* @__PURE__ */ J("div", {
+			initialsName: y || Q,
+			labels: { tooltip: y ?? Q }
+		}), /* @__PURE__ */ P("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__ */ P("div", {
+				className: s("flex w-full min-w-0 max-w-full flex-col items-start gap-4", F),
 				children: [
-					(e || c) && /* @__PURE__ */ q("div", {
+					p != null && !t && /* @__PURE__ */ N("div", {
+						className: "min-w-0",
+						children: p
+					}),
+					(t || d) && /* @__PURE__ */ P("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: d(z, "min-w-0 max-w-full text-start"),
-						children: /* @__PURE__ */ q(i, {
-							content: e,
-							isStreaming: c,
-							thinkingLabel: M,
-							components: _,
-							codeBlockCopyLabel: N,
-							codeBlockCopiedLabel: P,
-							codeBlockTheme: S
-						})
+						className: s(se, "relative min-w-0 max-w-full text-start", p != null && t && V),
+						children: [p != null && t && /* @__PURE__ */ N("div", {
+							ref: $,
+							className: "absolute start-0 top-0",
+							children: p
+						}), /* @__PURE__ */ N("div", {
+							className: "cm-bubble-markdown min-w-0 max-w-full",
+							children: /* @__PURE__ */ N(r, {
+								content: t ?? "",
+								isStreaming: d,
+								thinkingLabel: W,
+								components: b,
+								classNames: x,
+								urlTransform: S,
+								codeBlockCopyLabel: G,
+								codeBlockCopiedLabel: K,
+								codeBlockTheme: E,
+								tableActionLabels: {
+									copyCsvLabel: q,
+									copyTxtLabel: J,
+									copyMarkdownLabel: Y,
+									copiedLabel: X,
+									downloadCsvLabel: Z,
+									openInCanvasLabel: ee
+								},
+								tableDownloadFilename: te,
+								tableOnOpenInCanvas: D,
+								tableScrollRegionAriaLabel: ne
+							})
+						})]
 					}),
-					/* @__PURE__ */ q(rt, {
-						attachments: L,
-						onAttachmentClick: (e) => v?.(l?.find((t) => t.id === e)),
-						onDownloadAll: y,
-						onRetry: x,
+					/* @__PURE__ */ N(l, {
+						attachments: ie,
+						onAttachmentClick: (e) => C?.(f?.find((t) => t.id === e)),
+						onDownloadAll: w,
+						onRetry: T,
 						labels: {
-							clickLabel: O,
-							retryLabel: k,
-							openInNewTabLabel: A
-						}
+							clickLabel: L,
+							retryLabel: R,
+							openInNewTabLabel: H
+						},
+						selectedAttachmentId: k
 					}),
-					f,
-					/* @__PURE__ */ q(ut, {
-						...a,
-						isAlwaysVisible: o,
-						role: s.Assistant
+					m,
+					/* @__PURE__ */ N(z, {
+						...c,
+						isAlwaysVisible: u,
+						role: a.Assistant
 					})
 				]
-			}), p && p.length > 0 && m && /* @__PURE__ */ q("div", {
+			}), g && g.length > 0 && _ && /* @__PURE__ */ N("div", {
 				role: "list",
-				"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", {
+				"aria-label": U,
+				className: s("flex w-full flex-wrap gap-2 border-t pt-5", B.startersDivider),
+				children: g.map((e, t) => /* @__PURE__ */ N("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ q(b, {
+					children: /* @__PURE__ */ N(h, {
 						label: e.title,
 						className: "min-w-[40px]",
-						onClick: () => m(e)
+						onClick: () => _(e)
 					})
 				}, t))
 			})]
 		})]
 	});
-}, ft = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ q("div", {
+}, U = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ N("div", {
 	role: "status",
 	"aria-live": "polite",
-	children: /* @__PURE__ */ q(D, {
+	children: /* @__PURE__ */ N(p, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
-}), pt = /* @__PURE__ */ function(e) {
+}), W = /* @__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: D, 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
-	}), 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", {
+}({}), G = 10, K = ({ text: e, position: t = W.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: d, collapsedLineCount: p = G, labels: h, beforeContent: g, onAttachmentClick: _, onDownloadAll: v, onAttachmentRetry: b, selectedAttachmentId: x }) => {
+	let { colors: w, typography: T, className: E, bubbleClassName: D } = n ?? {}, { showMoreLabel: O = "Show more", showLessLabel: k = "Show less", showMoreAriaLabel: A, showLessAriaLabel: j, attachmentClickLabel: F, attachmentRetryLabel: I, attachmentOpenInNewTabLabel: L, userMessageAriaLabel: R = "User message" } = h ?? {}, { textRef: V, isTextCollapsed: H, isOverflowing: U, collapsedMaxHeight: K, expandedMaxHeight: q, isCollapsed: J, toggleCollapsed: Y } = c({
+		text: e ?? "",
+		collapsedLineCount: p
+	}), X = o({
+		"--cm-bubble-user-bg": w?.userBackground,
+		"--cm-bubble-user-border": w?.userBorder,
+		"--cm-bubble-fade-start": w?.fadeStart,
+		"--cm-bubble-text": w?.text,
+		"--cm-bubble-collapsed-height": U ? `${K}px` : void 0,
+		"--cm-bubble-expanded-height": U ? `${q}px` : void 0
+	}), Z = t === W.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", ee = s(B.text, T?.fontClassName), te = A ?? O, ne = j ?? k, re = J ? O : k, Q = J ? te : ne, ie = J ? S : C, $ = y();
+	return /* @__PURE__ */ N("div", {
 		role: "group",
-		"aria-label": k,
-		style: z,
-		className: d("flex w-full", y),
-		children: /* @__PURE__ */ J("div", {
+		"aria-label": R,
+		style: X,
+		className: s("flex w-full", E),
+		children: /* @__PURE__ */ P("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
-				/* @__PURE__ */ q(rt, {
-					attachments: a ?? [],
-					onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
-					onDownloadAll: m,
-					onRetry: h,
+				/* @__PURE__ */ N(l, {
+					attachments: d ?? [],
+					onAttachmentClick: (e) => _?.(d?.find((t) => t.id === e)),
+					onDownloadAll: v,
+					onRetry: b,
 					labels: {
-						clickLabel: T,
-						retryLabel: D,
-						openInNewTabLabel: O
+						clickLabel: F,
+						retryLabel: I,
+						openInNewTabLabel: L
 					},
-					styles: { className: "max-w-[640px]" }
+					styles: { className: "max-w-[640px]" },
+					selectedAttachmentId: x
 				}),
-				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 || g != null) && /* @__PURE__ */ N("div", {
+					className: s(B.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", Z, D),
+					children: /* @__PURE__ */ P("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: e
-							})
-						}), P && /* @__PURE__ */ q(g, {
-							label: /* @__PURE__ */ q(K, { children: ne }),
-							iconBefore: /* @__PURE__ */ q(ie, {
-								size: p.SM,
-								"aria-hidden": "true"
+						children: [
+							e && /* @__PURE__ */ N("div", {
+								id: $,
+								className: s("relative overflow-hidden", U && B.collapsibleText, U && !J && B.expandedText, H && B.collapsedText),
+								children: /* @__PURE__ */ P("p", {
+									ref: V,
+									className: s(ee, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+									children: [g != null && /* @__PURE__ */ N("span", {
+										className: "me-1",
+										children: g
+									}), e]
+								})
 							}),
-							"aria-label": re,
-							"aria-expanded": !L,
-							"aria-controls": ae,
-							className: "mt-3",
-							onClick: R,
-							size: E.Small
-						})]
+							g != null && !e && /* @__PURE__ */ N("div", { children: g }),
+							U && /* @__PURE__ */ N(m, {
+								label: /* @__PURE__ */ N(M, { children: re }),
+								iconBefore: /* @__PURE__ */ N(ie, {
+									size: u.SM,
+									"aria-hidden": "true"
+								}),
+								"aria-label": Q,
+								"aria-expanded": !J,
+								"aria-controls": $,
+								className: "mt-3",
+								onClick: Y,
+								size: f.Small
+							})
+						]
 					})
 				}),
-				/* @__PURE__ */ q(ut, {
+				/* @__PURE__ */ N(z, {
 					...r,
 					isAlwaysVisible: i,
-					role: s.User
+					role: a.User
 				})
 			]
 		})
 	});
-}, gt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ q(ft, { labels: {
-	titleText: r.labels?.statusTitleText,
-	bodyText: r.labels?.statusBodyText ?? ""
-} }) : e === s.User ? /* @__PURE__ */ q(ht, {
-	...r,
-	onAttachmentClick: t
-}) : /* @__PURE__ */ q(dt, {
-	...r,
-	markdownComponents: n,
-	onAttachmentClick: t
+}, q = ({ role: e, beforeContent: t, onAttachmentClick: n, markdownComponents: r, markdownUrlTransform: i, ...o }) => e === a.Status ? /* @__PURE__ */ N(U, { labels: {
+	titleText: o.labels?.statusTitleText,
+	bodyText: o.labels?.statusBodyText ?? ""
+} }) : e === a.User ? /* @__PURE__ */ N(K, {
+	...o,
+	beforeContent: t,
+	onAttachmentClick: n
+}) : /* @__PURE__ */ N(H, {
+	...o,
+	beforeContent: t,
+	markdownComponents: r,
+	markdownUrlTransform: i,
+	onAttachmentClick: n
 });
 //#endregion
-export { dt as AssistantMessageBubble, pt as BubblePosition, ut as MessageActions, gt as MessageBubble, ft as StatusMessageBubble, ht as UserMessageBubble };
+export { H as AssistantMessageBubble, W as BubblePosition, z as MessageActions, q as MessageBubble, U as StatusMessageBubble, K as UserMessageBubble };