@epam/ai-dial-conversation-messages 1.0.0-dev.484 → 1.0.0-dev.486

package/components/MessageBubble/AssistantMessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/AssistantMessageBubble.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAI/E,gHAAgH;AAChH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA8HlE,CAAC"}
+{"version":3,"file":"AssistantMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/AssistantMessageBubble.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAI/E,gHAAgH;AAChH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAgIlE,CAAC"}

package/components/MessageBubble/UserMessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/UserMessageBubble.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAO1E,kGAAkG;AAClG,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAsIxD,CAAC"}
+{"version":3,"file":"UserMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/UserMessageBubble.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAO1E,kGAAkG;AAClG,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAwIxD,CAAC"}

package/index.js

@@ -1,6 +1,6 @@
 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 ee, IconFileTypeDocx as H, IconFileTypeHtml as U, IconFileTypeJpg as te, IconFileTypeJs as ne, IconFileTypeJsx as W, IconFileTypePdf as G, IconFileTypePhp as re, IconFileTypePng as ie, IconFileTypePpt as ae, IconFileTypeRs as oe, IconFileTypeSql as se, IconFileTypeSvg as ce, IconFileTypeTs as le, IconFileTypeTsx as ue, IconFileTypeTxt as de, IconFileTypeVue as fe, IconFileTypeXls as pe, IconFileTypeXml as me, IconFileTypeZip as he, IconMarkdown as ge, IconMusic as _e, IconPaperclip as ve, IconPencilMinus as ye, IconPhoto as be, IconRefresh as xe, IconReload as Se, IconTerminal2 as Ce, IconThumbDown as we, IconThumbUp as Te, IconTrashX as Ee, IconVideo as De, IconX as Oe } from "@tabler/icons-react";
+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 ee, IconFileTypeCsv as te, IconFileTypeDoc as ne, IconFileTypeDocx as B, IconFileTypeHtml as V, IconFileTypeJpg as H, IconFileTypeJs as U, IconFileTypeJsx as W, IconFileTypePdf as G, IconFileTypePhp as re, IconFileTypePng as ie, IconFileTypePpt as ae, IconFileTypeRs as oe, IconFileTypeSql as se, IconFileTypeSvg as ce, IconFileTypeTs as le, IconFileTypeTsx as ue, IconFileTypeTxt as de, IconFileTypeVue as fe, IconFileTypeXls as pe, IconFileTypeXml as me, IconFileTypeZip as he, IconMarkdown as ge, IconMusic as _e, IconPaperclip as ve, IconPencilMinus as ye, IconPhoto as be, IconRefresh as xe, IconReload as Se, IconTerminal2 as Ce, IconThumbDown as we, IconThumbUp as Te, IconTrashX as Ee, IconVideo as De, IconX as Oe } from "@tabler/icons-react";
 import "react-dom";
 import { memo as ke, useCallback as Ae, useEffect as je, useId as Me, useMemo as Ne, useRef as Pe, useState as K } from "react";
 import { Fragment as q, jsx as J, jsxs as Y } from "react/jsx-runtime";
@@ -23,22 +23,27 @@ var Fe = /* @__PURE__ */ function(e) {
 		imageLoadStatus: r
 	};
 }, X = {
-	card: "_card_1wsze_1",
-	cardError: "_cardError_1wsze_6",
-	cardSelected: "_cardSelected_1wsze_10",
-	cardPrompt: "_cardPrompt_1wsze_15",
-	cardPasted: "_cardPasted_1wsze_16",
-	name: "_name_1wsze_20",
-	meta: "_meta_1wsze_24",
-	loadingOverlay: "_loadingOverlay_1wsze_28",
-	actionBtn: "_actionBtn_1wsze_32",
-	removeBtnImage: "_removeBtnImage_1wsze_43",
-	hoverDownloadIcon: "_hoverDownloadIcon_1wsze_51"
-}, Le = (e) => {
+	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"
+}, Le = /* @__PURE__ */ function(e) {
+	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
+}({}), Re = (e) => {
+	let t = e.lastIndexOf(".");
+	return t > 0 ? e.slice(0, t) : e;
+}, ze = (e) => {
 	if (!e) return R;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
-		case "image/jpg": return te;
+		case "image/jpg": return H;
 		case "image/png": return ie;
 		case "image/svg+xml": return ce;
 		case "image/bmp": return z;
@@ -49,8 +54,8 @@ var Fe = /* @__PURE__ */ function(e) {
 	switch (e) {
 		case "application/pdf": return G;
 		case "application/msword":
-		case "application/vnd.ms-word": return ee;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return H;
+		case "application/vnd.ms-word": return ne;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return B;
 		case "application/vnd.ms-powerpoint": return ae;
 		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ae;
 		case "application/vnd.ms-excel": return pe;
@@ -61,21 +66,21 @@ var Fe = /* @__PURE__ */ function(e) {
 		case "application/x-7z-compressed":
 		case "application/gzip":
 		case "application/x-tar": return he;
-		case "text/csv": return V;
+		case "text/csv": return te;
 		case "text/plain": return de;
 		case "text/html":
-		case "application/xhtml+xml": return U;
+		case "application/xhtml+xml": return V;
 		case "text/xml":
 		case "application/xml": return me;
 		case "application/sql":
 		case "text/x-sql": return se;
 		case "text/javascript":
-		case "application/javascript": return ne;
+		case "application/javascript": return U;
 		case "text/jsx": return W;
 		case "application/typescript":
 		case "text/typescript": return le;
 		case "text/tsx": return ue;
-		case "text/css": return B;
+		case "text/css": return ee;
 		case "text/x-php":
 		case "application/x-php": return re;
 		case "text/x-rustsrc":
@@ -83,26 +88,26 @@ var Fe = /* @__PURE__ */ function(e) {
 		case "text/x-vue": return fe;
 		default: return R;
 	}
-}, Re = (e) => {
+}, Be = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? Ce : n === t.Pasted ? F : n === t.Image ? be : Le(r ?? "");
-}, ze = (e) => {
+	return n === t.Prompt ? Ce : n === t.Pasted ? F : n === t.Image ? be : ze(r ?? "");
+}, Ve = (e) => {
 	let t = e.toLowerCase().split(";")[0].trim(), n = o[t];
 	if (n) return n;
 	let r = t.split("/")[1];
 	if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
-}, Be = (e) => {
+}, He = (e) => {
 	let { type: n, name: r, contentType: i } = e;
 	if (n === t.Prompt) return "Prompt";
 	if (n === t.Pasted) return "Pasted";
 	if (n === t.Image) return "Image";
 	if (i) {
-		let e = ze(i);
+		let e = Ve(i);
 		if (e) return `.${e}`;
 	}
 	let a = r.lastIndexOf(".");
 	return a > 0 && a < r.length - 1 ? `.${r.slice(a + 1).toLowerCase()}` : r;
-}, Ve = (e, n, r) => {
+}, Ue = (e, n, r) => {
 	let { type: i, status: a, previewUrl: o, url: s } = e, c = a === l.Loading, u = a === l.Error, d = i === t.Image && !!(o ?? s) && !u, p = i === t.Audio && !u, m = f(X.card, u && X.cardError, n && X.cardSelected, !u && !n && i === t.Prompt && X.cardPrompt, !u && !n && i === t.Pasted && X.cardPasted);
 	return {
 		isLoading: c,
@@ -110,40 +115,49 @@ var Fe = /* @__PURE__ */ function(e) {
 		isImage: d,
 		isAudio: p,
 		areActionsVisible: u || r,
-		BottomIcon: Re(e),
-		typeLabel: Be(e),
+		BottomIcon: Be(e),
+		typeLabel: He(e),
 		cardColorClass: m,
 		removeBtnClass: d ? X.removeBtnImage : X.actionBtn
 	};
-}, He = (e) => {
-	let t = e.lastIndexOf(".");
-	return t > 0 ? e.slice(0, t) : e;
-}, Ue = ({ attachment: n, searchQuery: r = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: l, shouldAlwaysShowActions: u, removeLabel: p = "Remove attachment", retryLabel: g = "Retry upload", clickLabel: _ = "Open attachment", colors: v, typography: y, roundedClassName: b = "rounded-xl", showHoverDownloadIcon: x = !1, className: S }) => {
-	let { id: T, name: D } = n, O = n.previewUrl ?? n.url, A = n.type === t.Pasted, j = A && s !== void 0, M = Ne(() => A ? D : He(D), [A, D]), N = d({
-		"--ci-card-border": v?.border,
-		"--ci-card-bg": v?.background,
-		"--ci-card-name": v?.nameText,
-		"--ci-card-meta": v?.metaText
-	}), { isLoading: P, isError: F, isImage: I, isAudio: R, areActionsVisible: z, BottomIcon: B, typeLabel: V, cardColorClass: ee, removeBtnClass: H } = Ne(() => Ve(n, l ?? !1, u ?? !1), [
+}, We = (e, t) => e <= 0 ? {
+	layout: Le.None,
+	visibleCount: 0,
+	hiddenCount: 0
+} : e < 5 || t ? {
+	layout: Le.AllVisible,
+	visibleCount: e,
+	hiddenCount: 0
+} : {
+	layout: Le.Collapsed,
+	visibleCount: 4,
+	hiddenCount: e - 4
+}, Ge = ({ attachment: n, searchQuery: r = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: l, shouldAlwaysShowActions: u, labels: p, styles: g, showHoverDownloadIcon: _ = !1, className: v }) => {
+	let { removeLabel: y = "Remove attachment", retryLabel: b = "Retry upload", clickLabel: x = "Open attachment" } = p ?? {}, { colors: S, typography: T, roundedClassName: D = "rounded-xl" } = g ?? {}, { id: O, name: A } = n, j = n.previewUrl ?? n.url, M = n.type === t.Pasted, N = M && s !== void 0, P = Ne(() => M ? A : Re(A), [M, A]), F = d({
+		"--ci-card-border": S?.border,
+		"--ci-card-bg": S?.background,
+		"--ci-card-name": S?.nameText,
+		"--ci-card-meta": S?.metaText
+	}), { isLoading: I, isError: R, isImage: z, isAudio: ee, areActionsVisible: te, BottomIcon: ne, typeLabel: B, cardColorClass: V, removeBtnClass: H } = Ne(() => Ue(n, l ?? !1, u ?? !1), [
 		n,
 		l,
 		u
-	]), U = c !== void 0 && !j && !P && !F, te = j || U, { imageRef: ne, imageLoadStatus: W } = Ie({
-		enabled: I,
-		src: O
-	}), G = () => {
-		j && s ? s(T) : U && c && c(T);
-	}, re = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), G());
+	]), U = c !== void 0 && !N && !I && !R, W = N || U, { imageRef: G, imageLoadStatus: re } = Ie({
+		enabled: z,
+		src: j
+	}), ie = () => {
+		N && s ? s(O) : U && c && c(O);
+	}, ae = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), ie());
 	};
-	if (R) return /* @__PURE__ */ Y("div", {
-		style: N,
-		className: f("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", b, ee, S),
+	if (ee) return /* @__PURE__ */ Y("div", {
+		style: F,
+		className: f("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", D, V, v),
 		children: [/* @__PURE__ */ Y("div", {
 			className: "flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ J("span", {
 				title: n.name,
-				className: f(y?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.name),
+				className: f(T?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.name),
 				children: r ? /* @__PURE__ */ J(i, {
 					text: n.name,
 					query: r,
@@ -156,9 +170,9 @@ var Fe = /* @__PURE__ */ function(e) {
 				}),
 				size: k.Small,
 				className: f("h-6 w-6 shrink-0 rounded", H),
-				"aria-label": _,
+				"aria-label": x,
 				onClick: (e) => {
-					e.stopPropagation(), c(T);
+					e.stopPropagation(), c(O);
 				}
 			})]
 		}), n.playUrl && /* @__PURE__ */ J("audio", {
@@ -168,94 +182,94 @@ var Fe = /* @__PURE__ */ function(e) {
 			preload: "metadata"
 		})]
 	});
-	let ie = f("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", b, ee, !I && "flex-col gap-3 p-3", te && "cursor-pointer", S), ae = /* @__PURE__ */ Y(q, { children: [
-		I ? /* @__PURE__ */ Y("div", {
+	let oe = f("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", D, V, !z && "flex-col gap-3 p-3", W && "cursor-pointer", v), se = /* @__PURE__ */ Y(q, { children: [
+		z ? /* @__PURE__ */ Y("div", {
 			className: "relative h-full w-full overflow-hidden",
-			children: [W !== Fe.Loaded && /* @__PURE__ */ J(C, {
+			children: [re !== Fe.Loaded && /* @__PURE__ */ J(C, {
 				variant: w.Rectangular,
 				width: "100%",
 				height: "100%",
-				active: W === Fe.Loading,
+				active: re === Fe.Loading,
 				overlay: /* @__PURE__ */ J(be, {
 					size: m.LG,
-					className: y?.placeholderIconClassName ?? "text-secondary",
+					className: T?.placeholderIconClassName ?? "text-secondary",
 					"aria-hidden": !0
 				}),
-				className: f("absolute inset-0", b)
+				className: f("absolute inset-0", D)
 			}), /* @__PURE__ */ J("img", {
-				ref: ne,
-				src: O,
-				alt: D,
+				ref: G,
+				src: j,
+				alt: A,
 				loading: "lazy",
 				decoding: "async",
-				className: f("h-full w-full object-cover transition-opacity duration-200", W === Fe.Loaded ? "opacity-100" : "opacity-0", b)
+				className: f("h-full w-full object-cover transition-opacity duration-200", re === Fe.Loaded ? "opacity-100" : "opacity-0", D)
 			})]
-		}) : F ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ Y("div", {
+		}) : R ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ Y("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ J(B, {
+			children: [/* @__PURE__ */ J(ne, {
 				size: m.SM,
 				className: f("shrink-0", X.meta),
 				"aria-hidden": !0
 			}), /* @__PURE__ */ J("span", {
-				title: V,
-				className: f(y?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
-				children: V
+				title: B,
+				className: f(T?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
+				children: B
 			})]
 		}), /* @__PURE__ */ J("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ J("div", {
-				title: M,
-				className: f(y?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
+				title: P,
+				className: f(T?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
 				children: r ? /* @__PURE__ */ J(i, {
-					text: M,
+					text: P,
 					query: r,
 					maxLines: 3
-				}) : M
+				}) : P
 			})
 		})] }) : /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ J("div", {
-				title: M,
-				className: f(y?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
+				title: P,
+				className: f(T?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
 				children: r ? /* @__PURE__ */ J(i, {
-					text: M,
+					text: P,
 					query: r,
 					maxLines: 3
-				}) : M
+				}) : P
 			})
 		}), /* @__PURE__ */ Y("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ J(B, {
+			children: [/* @__PURE__ */ J(ne, {
 				size: m.SM,
 				className: f("shrink-0", X.meta),
 				"aria-hidden": !0
 			}), /* @__PURE__ */ J("span", {
-				title: V,
-				className: f(y?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
-				children: V
+				title: B,
+				className: f(T?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
+				children: B
 			})]
 		})] }),
-		P && /* @__PURE__ */ J("span", {
-			className: f("absolute inset-0 flex items-center justify-center", b, X.loadingOverlay),
+		I && /* @__PURE__ */ J("span", {
+			className: f("absolute inset-0 flex items-center justify-center", D, X.loadingOverlay),
 			children: /* @__PURE__ */ J(E, {
 				size: 40,
 				ariaLabel: "Loading attachment",
 				className: "z-50"
 			})
 		}),
-		!P && /* @__PURE__ */ Y("div", {
-			className: f("absolute end-1 top-1 flex gap-1 transition-opacity", z ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
+		!I && /* @__PURE__ */ Y("div", {
+			className: f("absolute end-1 top-1 flex gap-1 transition-opacity", te ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
 			children: [
-				F && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ J(h, {
+				R && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ J(h, {
 					icon: /* @__PURE__ */ J(Se, {
 						size: m.SM,
 						"aria-hidden": !0
 					}),
 					size: k.Small,
 					className: f("h-6 w-6 rounded", H),
-					"aria-label": g,
+					"aria-label": b,
 					onClick: (e) => {
-						e.stopPropagation(), o(T);
+						e.stopPropagation(), o(O);
 					}
 				}),
 				a && /* @__PURE__ */ J(h, {
@@ -265,12 +279,12 @@ var Fe = /* @__PURE__ */ function(e) {
 					}),
 					size: k.Small,
 					className: f("h-6 w-6 rounded", H),
-					"aria-label": p,
+					"aria-label": y,
 					onClick: (e) => {
-						e.stopPropagation(), a?.(T);
+						e.stopPropagation(), a?.(O);
 					}
 				}),
-				x && !a && !F && /* @__PURE__ */ J(L, {
+				_ && !a && !R && /* @__PURE__ */ J(L, {
 					size: m.SM,
 					"aria-hidden": !0,
 					className: f("h-6 w-6 rounded-lg p-1", X.hoverDownloadIcon)
@@ -278,143 +292,129 @@ var Fe = /* @__PURE__ */ function(e) {
 			]
 		})
 	] });
-	return te ? /* @__PURE__ */ J("div", {
-		style: N,
-		className: ie,
-		onClick: G,
-		onKeyDown: re,
+	return W ? /* @__PURE__ */ J("div", {
+		style: F,
+		className: oe,
+		onClick: ie,
+		onKeyDown: ae,
 		tabIndex: 0,
 		role: "button",
-		"aria-label": U ? _ : void 0,
-		children: ae
+		"aria-label": U ? x : void 0,
+		children: se
 	}) : /* @__PURE__ */ J("div", {
-		style: N,
-		className: ie,
-		children: ae
+		style: F,
+		className: oe,
+		children: se
 	});
-}, We = /* @__PURE__ */ function(e) {
-	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
-}({}), Ge = (e, t) => e <= 0 ? {
-	layout: "none",
-	visibleCount: 0,
-	hiddenCount: 0
-} : e < 5 || t ? {
-	layout: "all-visible",
-	visibleCount: e,
-	hiddenCount: 0
-} : {
-	layout: "collapsed",
-	visibleCount: 4,
-	hiddenCount: e - 4
 }, Z = {
-	tile: "_tile_1x7ag_2",
-	tileLight: "_tileLight_1x7ag_27",
-	tileError: "_tileError_1x7ag_31",
-	nameText: "_nameText_1x7ag_38",
-	typeText: "_typeText_1x7ag_39",
-	retryIcon: "_retryIcon_1x7ag_51",
-	hoverIcon: "_hoverIcon_1x7ag_55",
-	track: "_track_1x7ag_60",
-	indeterminateFill: "_indeterminateFill_1x7ag_64",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_1x7ag_1"
+	tile: "_tile_488nu_1",
+	tileLight: "_tileLight_488nu_12",
+	tileError: "_tileError_488nu_16",
+	nameText: "_nameText_488nu_23",
+	typeText: "_typeText_488nu_24",
+	retryIcon: "_retryIcon_488nu_36",
+	hoverIcon: "_hoverIcon_488nu_40",
+	track: "_track_488nu_45",
+	indeterminateFill: "_indeterminateFill_488nu_49",
+	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_488nu_1"
 }, Ke = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, qe = ({ attachment: t, onClick: r, onRetry: i, clickLabel: a = "Download attachment", retryLabel: o = "Retry upload", theme: s = n.Dark, className: c }) => {
-	let { id: u, name: d, status: p, errorReason: g } = t, _ = p === l.Loading, v = p === l.Error, y = v && (g && Ke[g] || "Upload failed"), { BottomIcon: b, typeLabel: x } = Ve(t, !1, !1), S = !v && !_ && r !== void 0, C = v && !!i && g !== e.UnsupportedType, w = S || C ? "pe-5" : void 0, T = () => {
-		S && r?.(t);
-	}, E = (e) => {
-		(e.key === "Enter" || e.key === " ") && S && (e.preventDefault(), T());
-	}, D = f("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Z.tile, !v && s === n.Light && Z.tileLight, v && Z.tileError), O = /* @__PURE__ */ J("div", {
-		title: d,
-		className: f("dial-caption-text line-clamp-2 min-w-0 break-words", Z.nameText, !v && w),
-		children: d
-	}), A = /* @__PURE__ */ Y("div", {
-		className: f("flex items-center gap-1 overflow-hidden", v && w),
-		children: [/* @__PURE__ */ J(b, {
+}, qe = ({ attachment: t, onClick: r, onRetry: i, labels: a, styles: o, theme: s = n.Dark, className: c }) => {
+	let { clickLabel: u = "Download attachment", retryLabel: d = "Retry upload", sizeLabel: p } = a ?? {}, { nameClassName: g = "dial-caption-text", metaClassName: _ = "dial-caption-text" } = o ?? {}, { id: v, name: y, status: b, errorReason: x } = t, S = b === l.Loading, C = b === l.Error, w = C && (x && Ke[x] || "Upload failed"), { BottomIcon: T, typeLabel: E } = Ue(t, !1, !1), D = !C && !S && r !== void 0, O = C && !!i && x !== e.UnsupportedType, A = D || O ? "pe-5" : void 0, j = () => {
+		D && r?.(t);
+	}, M = (e) => {
+		(e.key === "Enter" || e.key === " ") && D && (e.preventDefault(), j());
+	}, N = f("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Z.tile, !C && s === n.Light && Z.tileLight, C && Z.tileError), P = /* @__PURE__ */ J("div", {
+		title: y,
+		className: f(g, "line-clamp-2 min-w-0 break-words", Z.nameText, !C && A),
+		children: y
+	}), F = /* @__PURE__ */ Y("div", {
+		className: f("flex items-center gap-1 overflow-hidden", C && A),
+		children: [/* @__PURE__ */ J(T, {
 			size: 16,
 			className: Z.typeText,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ J("span", {
-			className: f("dial-caption-text truncate", Z.typeText),
-			children: x
+			className: f(_, "truncate", Z.typeText),
+			children: p ? `${E} · ${p}` : E
 		})]
-	}), j = /* @__PURE__ */ Y(q, { children: [
-		v ? /* @__PURE__ */ Y(q, { children: [A, O] }) : /* @__PURE__ */ Y(q, { children: [O, A] }),
-		_ && /* @__PURE__ */ J("div", {
+	}), I = /* @__PURE__ */ Y(q, { children: [
+		C ? /* @__PURE__ */ Y(q, { children: [F, P] }) : /* @__PURE__ */ Y(q, { children: [P, F] }),
+		S && /* @__PURE__ */ J("div", {
 			role: "progressbar",
 			"aria-label": "Uploading",
 			className: f("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", Z.track),
 			children: /* @__PURE__ */ J("div", { className: f("h-full w-1/3 rounded-full", Z.indeterminateFill) })
 		}),
-		S && /* @__PURE__ */ J(L, {
+		D && /* @__PURE__ */ J(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", Z.hoverIcon)
 		}),
-		C && /* @__PURE__ */ J(h, {
+		O && /* @__PURE__ */ J(h, {
 			icon: /* @__PURE__ */ J(Se, {
 				size: m.SM,
 				"aria-hidden": !0
 			}),
 			size: k.Small,
 			className: f("absolute end-1 top-1 h-6 w-6 rounded-lg", Z.retryIcon),
-			"aria-label": o,
+			"aria-label": d,
 			onClick: (e) => {
-				e.stopPropagation(), i(u);
+				e.stopPropagation(), i(v);
 			}
 		})
 	] });
 	return /* @__PURE__ */ J("div", {
 		className: f("inline-flex", c),
-		children: S ? /* @__PURE__ */ J("div", {
+		children: D ? /* @__PURE__ */ J("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": a,
-			onClick: T,
-			onKeyDown: E,
-			className: f(D, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: j
+			"aria-label": u,
+			onClick: j,
+			onKeyDown: M,
+			className: f(N, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: I
 		}) : /* @__PURE__ */ J("div", {
-			className: D,
-			title: y || void 0,
-			children: j
+			className: N,
+			title: w || void 0,
+			children: I
 		})
 	});
-}, Je = { tile: "_tile_kvom5_1" }, Ye = ({ count: e, onClick: t, ariaLabel: n, children: r, className: i }) => /* @__PURE__ */ J("button", {
+}, Je = { tile: "_tile_1s4d7_1" }, Ye = ({ count: e, onClick: t, ariaLabel: n, children: r, fontClassName: i = "dial-small-semi-text", className: a }) => /* @__PURE__ */ J("button", {
 	type: "button",
 	onClick: t,
 	"aria-label": n ?? `Show ${e} more attachments`,
-	className: f("dial-small-semi-text flex size-[84px] items-center justify-center rounded-xl border", Je.tile, i),
+	className: f("flex size-[84px] items-center justify-center rounded-xl border", i, Je.tile, a),
 	children: r ?? /* @__PURE__ */ J("bdi", {
 		dir: "ltr",
 		children: `+${e}`
 	})
 }), Q = {
-	container: "_container_4zxg9_1",
-	headerIcon: "_headerIcon_4zxg9_6",
-	headerLabel: "_headerLabel_4zxg9_7",
-	downloadAllButton: "_downloadAllButton_4zxg9_8",
-	imageTile: "_imageTile_4zxg9_12"
-}, Xe = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ze = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, ariaLabel: o = "Attachments", clickLabel: s = "Download attachment", retryLabel: c = "Retry upload", showLessLabel: u = "Show less", downloadAllLabel: d = "Download all", theme: p, className: g }) => {
-	let [_, v] = K(!1), y = Ne(() => Ge(e.length, _), [e.length, _]);
+	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, className: u }) => {
+	let { ariaLabel: d = "Attachments", clickLabel: p = "Download attachment", retryLabel: g = "Retry upload", showLessLabel: _ = "Show less", downloadAllLabel: v = "Download all" } = o ?? {}, { headerLabelClassName: y = "dial-tiny-semi-text" } = s ?? {}, [b, x] = K(!1), S = Ne(() => We(e.length, b), [e.length, b]);
 	if (e.length === 0) return null;
-	let b = e.some((e) => e.type === t.Image), x = e.some((e) => e.type !== t.Image), S = b && x, C = e.length >= 5, w = S ? ve : b ? be : R, T = Xe(e.length, "attachment"), E = e.slice(0, y.visibleCount);
+	let C = e.some((e) => e.type === t.Image), w = e.some((e) => e.type !== t.Image), T = C && w, E = e.length >= 5, D = T ? ve : C ? be : R, O = Xe(e.length, "attachment"), k = e.slice(0, S.visibleCount);
 	return /* @__PURE__ */ Y("div", {
 		role: "group",
-		"aria-label": o,
-		className: f("rounded-2xl border p-3", C ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Q.container, g),
+		"aria-label": d,
+		className: f("rounded-2xl border p-3", E ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Q.container, u),
 		children: [/* @__PURE__ */ Y("div", {
 			className: "mb-3 flex min-h-6 items-center gap-2",
 			children: [
-				/* @__PURE__ */ J(w, {
+				/* @__PURE__ */ J(D, {
 					size: m.SM,
 					className: f("shrink-0", Q.headerIcon),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ J("span", {
-					className: f("dial-tiny-semi-text", Q.headerLabel),
-					children: T
+					className: f(y, Q.headerLabel),
+					children: O
 				}),
 				e.length >= 2 && (r || n) && /* @__PURE__ */ J(h, {
 					icon: /* @__PURE__ */ J(L, {
@@ -422,7 +422,7 @@ var Fe = /* @__PURE__ */ function(e) {
 						"aria-hidden": !0
 					}),
 					className: f("ms-auto h-6 w-6 rounded-lg", Q.downloadAllButton),
-					"aria-label": d,
+					"aria-label": v,
 					onClick: () => {
 						let t = e.filter((e) => e.status === l.Idle);
 						r ? r(t) : t.forEach((e) => n?.(e));
@@ -431,43 +431,47 @@ var Fe = /* @__PURE__ */ function(e) {
 			]
 		}), /* @__PURE__ */ Y("div", {
 			role: "list",
-			"aria-label": T,
-			className: f("gap-3", C ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
+			"aria-label": O,
+			className: f("gap-3", E ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
 			children: [
-				E.map((e) => /* @__PURE__ */ J("div", {
+				k.map((e) => /* @__PURE__ */ J("div", {
 					role: "listitem",
-					children: e.type === t.Image ? /* @__PURE__ */ J(Ue, {
+					children: e.type === t.Image ? /* @__PURE__ */ J(Ge, {
 						attachment: e,
 						onClick: n ? () => n(e) : void 0,
 						onRetry: i,
-						clickLabel: s,
-						retryLabel: c,
-						roundedClassName: "rounded-xl",
+						labels: {
+							clickLabel: p,
+							retryLabel: g
+						},
+						styles: { roundedClassName: "rounded-xl" },
 						showHoverDownloadIcon: !0,
 						className: f("size-[84px]", Q.imageTile)
 					}) : /* @__PURE__ */ J(qe, {
 						attachment: e,
-						sizeLabel: a?.(e),
 						onClick: n,
 						onRetry: i,
-						clickLabel: s,
-						retryLabel: c,
-						theme: p
+						labels: {
+							clickLabel: p,
+							retryLabel: g,
+							sizeLabel: a?.(e)
+						},
+						theme: c
 					})
 				}, e.id)),
-				y.layout === We.Collapsed && /* @__PURE__ */ J("div", {
+				S.layout === Le.Collapsed && /* @__PURE__ */ J("div", {
 					role: "listitem",
 					children: /* @__PURE__ */ J(Ye, {
-						count: y.hiddenCount,
-						onClick: () => v(!0)
+						count: S.hiddenCount,
+						onClick: () => x(!0)
 					})
 				}),
-				C && _ && /* @__PURE__ */ J("div", {
+				E && b && /* @__PURE__ */ J("div", {
 					role: "listitem",
 					children: /* @__PURE__ */ J(Ye, {
 						count: 0,
-						onClick: () => v(!1),
-						ariaLabel: u,
+						onClick: () => x(!1),
+						ariaLabel: _,
 						children: /* @__PURE__ */ J(P, {
 							size: m.MD,
 							"aria-hidden": !0
@@ -526,7 +530,7 @@ var $e = (e) => /* @__PURE__ */ J(b, { ...e }), et = ({ features: e, initialResp
 			a
 		])
 	};
-}, tt = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: l = "Markdown", responseFormatPlainTextLabel: d = "Plain text", systemPromptLabel: f = "System prompt", systemPromptTooltip: p = "Enter a prompt", temperatureLabel: m = "Temperature", temperatureLabels: h = [
+}, 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 = [
 	"Precise",
 	"Neutral",
 	"Creative"
@@ -535,6 +539,7 @@ var $e = (e) => /* @__PURE__ */ J(b, { ...e }), et = ({ features: e, initialResp
 	children: [
 		e.responseFormat && /* @__PURE__ */ J(x, {
 			fieldTitle: s,
+			labelClassName: tt,
 			elementId: "response-format",
 			orientation: j.Column,
 			activeRadioButton: t ?? u.Markdown,
@@ -551,12 +556,16 @@ var $e = (e) => /* @__PURE__ */ J(b, { ...e }), et = ({ features: e, initialResp
 		e.systemPrompt && /* @__PURE__ */ J(g, {
 			value: n,
 			placeholder: p,
-			labelProps: { label: f },
+			labelProps: {
+				className: tt,
+				label: f
+			},
 			onChange: (e) => a(e ?? "")
 		}),
 		e.temperature && /* @__PURE__ */ J(T, {
 			labelProps: {
 				label: m,
+				className: tt,
 				caption: _
 			},
 			value: r,
@@ -595,7 +604,7 @@ ke(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 				})
 			})
 		}),
-		children: /* @__PURE__ */ J(tt, {
+		children: /* @__PURE__ */ J(nt, {
 			features: e,
 			responseFormat: v,
 			systemPrompt: b,
@@ -617,11 +626,11 @@ ke(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 });
 //#endregion
 //#region src/components/MessageActions/MessageActions.tsx
-var nt = 2e3, rt = ({ 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: _ }) => {
+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] = K(null), [S, C] = K(""), w = Ae(() => {
-		a?.(), x("copy"), C(y?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => x(null), nt);
+		a?.(), x("copy"), C(y?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => x(null), rt);
 	}, [a, y?.copiedStatus]), T = Ae(() => {
-		o?.(), x("markdown"), C(y?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => x(null), nt);
+		o?.(), x("markdown"), C(y?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => x(null), rt);
 	}, [o, y?.copiedMarkdownStatus]);
 	return /* @__PURE__ */ Y("div", {
 		role: "toolbar",
@@ -716,17 +725,17 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 	collapsedText: "_collapsedText_1exhl_15",
 	startersDivider: "_startersDivider_1exhl_26",
 	text: "_text_1exhl_30"
-}, it = ({ 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 }) => {
+}, 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);
+	}), ee = f($.text, D?.fontClassName), te = !!(h || g);
 	return /* @__PURE__ */ Y("div", {
 		role: "group",
 		"aria-label": I,
 		style: z,
 		className: f("flex w-full items-start gap-3", O),
-		children: [V && /* @__PURE__ */ J(r, {
+		children: [te && /* @__PURE__ */ J(r, {
 			src: h,
 			size: 28,
 			initialsName: g || L,
@@ -739,7 +748,7 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 					(e || s) && /* @__PURE__ */ J("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: f(B, "min-w-0 max-w-full text-start"),
+						className: f(ee, "min-w-0 max-w-full text-start"),
 						children: /* @__PURE__ */ J(a, {
 							content: e,
 							isStreaming: s,
@@ -755,13 +764,15 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 						onAttachmentClick: v,
 						onDownloadAll: y,
 						onRetry: b,
-						clickLabel: A,
-						retryLabel: j,
+						labels: {
+							clickLabel: A,
+							retryLabel: j
+						},
 						getSizeLabel: x,
 						theme: C
 					}),
 					u,
-					/* @__PURE__ */ J(rt, {
+					/* @__PURE__ */ J(it, {
 						...i,
 						isAlwaysVisible: o,
 						role: c.Assistant
@@ -783,7 +794,7 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 			})]
 		})]
 	});
-}, at = ({ titleText: e = "Model switched.", bodyText: t }) => /* @__PURE__ */ J("div", {
+}, ot = ({ titleText: e = "Model switched.", bodyText: t }) => /* @__PURE__ */ J("div", {
 	role: "status",
 	"aria-live": "polite",
 	children: /* @__PURE__ */ J(v, {
@@ -791,24 +802,24 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
-}), ot = /* @__PURE__ */ function(e) {
+}), st = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
-}({}), st = 10, ct = ({ text: e, position: t = ot.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = st, labels: s, onAttachmentClick: l, onDownloadAll: u, onAttachmentRetry: h, getAttachmentSizeLabel: g, attachmentTheme: v }) => {
+}({}), 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({
 		text: e,
 		collapsedLineCount: o
-	}), B = d({
+	}), ee = 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 === ot.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", ee = f($.text, b?.fontClassName), H = T ?? C, U = E ?? w, te = R ? C : w, ne = R ? H : U, W = R ? N : P, G = Me();
+	}), te = t === st.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", ne = f($.text, b?.fontClassName), B = T ?? C, V = E ?? w, H = R ? C : w, U = R ? B : V, W = R ? N : P, G = Me();
 	return /* @__PURE__ */ J("div", {
 		role: "group",
 		"aria-label": A,
-		style: B,
+		style: ee,
 		className: f("flex w-full", x),
 		children: /* @__PURE__ */ Y("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
@@ -818,14 +829,16 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 					onAttachmentClick: l,
 					onDownloadAll: u,
 					onRetry: h,
-					clickLabel: D,
-					retryLabel: O,
+					labels: {
+						clickLabel: D,
+						retryLabel: O
+					},
 					getSizeLabel: g,
 					theme: v,
 					className: "max-w-[640px]"
 				}),
 				e && /* @__PURE__ */ J("div", {
-					className: f($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, S),
+					className: f($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", te, S),
 					children: /* @__PURE__ */ Y("div", {
 						className: "flex min-w-0 flex-col items-start",
 						children: [/* @__PURE__ */ J("div", {
@@ -833,16 +846,16 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 							className: f("relative overflow-hidden", F && $.collapsibleText, F && !R && $.expandedText, M && $.collapsedText),
 							children: /* @__PURE__ */ J("p", {
 								ref: j,
-								className: f(ee, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+								className: f(ne, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
 						}), F && /* @__PURE__ */ J(_, {
-							label: /* @__PURE__ */ J(q, { children: te }),
+							label: /* @__PURE__ */ J(q, { children: H }),
 							iconBefore: /* @__PURE__ */ J(W, {
 								size: m.SM,
 								"aria-hidden": "true"
 							}),
-							"aria-label": ne,
+							"aria-label": U,
 							"aria-expanded": !R,
 							"aria-controls": G,
 							className: "mt-3",
@@ -851,7 +864,7 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 						})]
 					})
 				}),
-				/* @__PURE__ */ J(rt, {
+				/* @__PURE__ */ J(it, {
 					...r,
 					isAlwaysVisible: i,
 					role: c.User
@@ -859,17 +872,17 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 			]
 		})
 	});
-}, lt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === c.Status ? /* @__PURE__ */ J(at, {
+}, ut = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === c.Status ? /* @__PURE__ */ J(ot, {
 	titleText: r.labels?.statusTitleText,
 	bodyText: r.labels?.statusBodyText ?? ""
-}) : e === c.User ? /* @__PURE__ */ J(ct, {
+}) : e === c.User ? /* @__PURE__ */ J(lt, {
 	...r,
 	onAttachmentClick: t
-}) : /* @__PURE__ */ J(it, {
+}) : /* @__PURE__ */ J(at, {
 	...r,
 	markdownComponents: n,
 	onAttachmentClick: t
-}), ut = { button: "_button_15boc_1" }, dt = ({ label: e, onClick: t, styles: n }) => {
+}), dt = { button: "_button_15boc_1" }, ft = ({ label: e, onClick: t, styles: n }) => {
 	let { colors: r, typography: i, className: a } = n ?? {};
 	return /* @__PURE__ */ J("button", {
 		type: "button",
@@ -881,9 +894,9 @@ var nt = 2e3, rt = ({ role: e = c.User, onEdit: t, onEditHover: n, onDelete: r,
 			"--cm-source-bg-hover": r?.backgroundHover,
 			"--cm-source-border-hover": r?.borderHover
 		}),
-		className: f(ut.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: 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),
 		children: e
 	});
 };
 //#endregion
-export { it as AssistantMessageBubble, ot as BubblePosition, rt as MessageActions, lt as MessageBubble, dt as MessageSource, at as StatusMessageBubble, ct as UserMessageBubble };
+export { at as AssistantMessageBubble, st as BubblePosition, it as MessageActions, ut as MessageBubble, ft as MessageSource, ot as StatusMessageBubble, lt as UserMessageBubble };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-messages",
   "description": "Message bubble components for rendering conversation history with actions and source citations",
-  "version": "1.0.0-dev.484",
+  "version": "1.0.0-dev.486",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,8 +20,8 @@
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
-    "@epam/ai-dial-chat-shared": "1.0.0-dev.484",
-    "@epam/ai-dial-conversation-input": "1.0.0-dev.484",
+    "@epam/ai-dial-chat-shared": "1.0.0-dev.486",
+    "@epam/ai-dial-conversation-input": "1.0.0-dev.486",
     "react-markdown": "^10.1.0"
   },
   "repository": {