@epam/ai-dial-conversation-messages 1.1.0-dev.127 → 1.1.0-dev.128

package/index.js

@@ -1,5 +1,5 @@
 import { AttachmentErrorReason as e, AttachmentType as t, CopyIconButton as n, DeploymentIcon as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as p, DialPopup as m, DialRadioGroup as h, DialSkeleton as g, DialSkeletonVariant as _, DialSlider as v, DialTooltip as y, ElementSize as b, GhostIconButton as x, Highlight as S, InfoMessageNotification as C, Input as w, LinkButton as T, NeutralButton as E, PopupSize as D, PrimaryButton as O, RadioGroupOrientation as k, Spinner as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
+import { DIAL_ICON_SIZE as p, DialRadioGroup as m, DialSlider as h, DialTooltip as g, ElementSize as _, GhostIconButton as v, Highlight as y, InfoMessageNotification as b, Input as x, LinkButton as S, NeutralButton as C, Popup as w, PopupSize as T, PrimaryButton as E, RadioGroupOrientation as D, Skeleton as O, SkeletonVariant as k, Spinner as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
 import { IconChevronDown as M, IconChevronUp as N, IconClipboard as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as H, IconFileTypeHtml as U, IconFileTypeJpg as W, IconFileTypeJs as ee, IconFileTypeJsx as te, IconFileTypePdf as ne, IconFileTypePhp as re, IconFileTypePng as ie, IconFileTypePpt as ae, IconFileTypeRs as oe, IconFileTypeSql as se, IconFileTypeSvg as ce, IconFileTypeTs as le, IconFileTypeTsx as ue, IconFileTypeTxt as de, IconFileTypeVue as fe, IconFileTypeXls as pe, IconFileTypeXml as me, IconFileTypeZip as he, IconMarkdown as ge, IconMusic as _e, IconPaperclip as ve, IconPencilMinus as ye, IconPhoto as G, IconRefresh as be, IconReload as xe, IconTerminal2 as Se, IconThumbDown as Ce, IconThumbUp as we, IconTrashX as Te, IconVideo as Ee, IconX as De } from "@tabler/icons-react";
 import "react-dom";
 import { memo as Oe, useCallback as K, useEffect as ke, useId as Ae, useMemo as je, useRef as Me, useState as q } from "react";
@@ -100,7 +100,7 @@ var Ne = (e) => {
 	imageActionButton: "_imageActionButton_3jao2_47"
 }, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(j, {
 	icon: a,
-	size: b.Small,
+	size: _.Small,
 	className: d("absolute end-1 top-1 opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Z.actionButton, o),
 	"aria-label": e,
 	"aria-describedby": t ? n : void 0,
@@ -136,14 +136,14 @@ var Ne = (e) => {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
 }, Ge = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: a, styles: o, onDownload: s, isPasted: l, isLink: u, cssVars: f, onExpand: p, isExpandable: m, onRemove: h, isSelected: g }) => {
-	let { clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", sizeLabel: y, uploadingLabel: b = "Uploading", errorReasonLabels: x, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: k } = t, j = O === c.Loading, M = O === c.Error, N = Ae(), P = M ? k && (x?.[k] ?? We[k]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && k !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
+	let { clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: k } = t, j = O === c.Loading, M = O === c.Error, N = Ae(), P = M ? k && (S?.[k] ?? We[k]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && k !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
 	}, V = je(() => l ? D : Ne(D), [l, D]), H = K(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
 	}, [t]), U = d(ze, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Z.tile, !M && Z.hovered, g && Z.selected, M && Z.tileError), W = /* @__PURE__ */ Y("div", {
 		title: V,
 		className: d(w?.nameClassName ?? "dial-caption-text", "line-clamp-2 min-w-0 break-all", Z.nameText, !M && z),
-		children: n ? /* @__PURE__ */ Y(S, {
+		children: n ? /* @__PURE__ */ Y(y, {
 			text: V,
 			query: n,
 			maxLines: 2
@@ -156,7 +156,7 @@ var Ne = (e) => {
 			"aria-hidden": !0
 		}), /* @__PURE__ */ Y("span", {
 			className: d(w?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
-			children: y ? `${I} · ${y}` : I
+			children: b ? `${I} · ${b}` : I
 		})]
 	}), te = () => {
 		m && p ? p(E) : r && r(E);
@@ -164,7 +164,7 @@ var Ne = (e) => {
 		W,
 		ee,
 		j && /* @__PURE__ */ Y("div", {
-			"aria-label": b,
+			"aria-label": x,
 			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
 			children: /* @__PURE__ */ Y(A, { size: 32 })
 		}),
@@ -240,22 +240,22 @@ var Ne = (e) => {
 		imageLoadStatus: r
 	};
 }, Je = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: c, isSelected: l }) => {
-	let { clickLabel: u = "Open attachment", expandLabel: f = "Expand pasted text" } = i ?? {}, { className: m } = c ?? {}, { id: h, name: v } = e, y = e.previewUrl ?? e.url, b = e.type === t.Pasted && n !== void 0, { isLoading: x, isError: S, isImage: C } = je(() => Re(e), [e]), w = r !== void 0 && !b && !x && !S, { imageRef: T, imageLoadStatus: E } = qe({
-		enabled: C,
-		src: y
-	}), D = () => {
-		b && n ? n(h) : w && r && r(h);
+	let { clickLabel: u = "Open attachment", expandLabel: f = "Expand pasted text" } = i ?? {}, { className: m } = c ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: x } = je(() => Re(e), [e]), S = r !== void 0 && !v && !y && !b, { imageRef: C, imageLoadStatus: w } = qe({
+		enabled: x,
+		src: _
+	}), T = () => {
+		v && n ? n(h) : S && r && r(h);
 	};
 	return /* @__PURE__ */ Y("div", {
-		className: d(ze, "group/attachment-tile", w && "cursor-pointer", Z.tile, l && Z.selected, m),
-		onClick: D,
+		className: d(ze, "group/attachment-tile", S && "cursor-pointer", Z.tile, l && Z.selected, m),
+		onClick: T,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
 		},
 		tabIndex: 0,
 		role: "button",
 		style: o,
-		"aria-label": w ? u : b ? f : void 0,
+		"aria-label": S ? u : v ? f : void 0,
 		children: /* @__PURE__ */ X("div", {
 			className: "relative h-full w-full overflow-hidden",
 			children: [
@@ -269,11 +269,11 @@ var Ne = (e) => {
 					id: h,
 					className: Z.imageActionButton
 				}),
-				E !== Ke.Loaded && /* @__PURE__ */ Y(g, {
-					variant: _.Rectangular,
+				w !== Ke.Loaded && /* @__PURE__ */ Y(O, {
+					variant: k.Rectangular,
 					width: "100%",
 					height: "100%",
-					active: E === Ke.Loading,
+					active: w === Ke.Loading,
 					overlay: /* @__PURE__ */ Y(G, {
 						size: p.LG,
 						className: Z.typeText,
@@ -282,12 +282,12 @@ var Ne = (e) => {
 					className: "absolute inset-0 rounded-xl"
 				}),
 				/* @__PURE__ */ Y("img", {
-					ref: T,
-					src: y,
-					alt: v,
+					ref: C,
+					src: _,
+					alt: g,
 					loading: "lazy",
 					decoding: "async",
-					className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Ke.Loaded ? "opacity-100" : "opacity-0")
+					className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", w === Ke.Loaded ? "opacity-100" : "opacity-0")
 				})
 			]
 		})
@@ -340,9 +340,9 @@ var Ne = (e) => {
 	headerIcon: "_headerIcon_1dmgi_1",
 	headerLabel: "_headerLabel_1dmgi_2"
 }, Ze = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Qe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, labels: a, styles: o, selectedAttachmentId: s }) => {
-	let { ariaLabel: l = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: h = "Download all", openInNewTabLabel: g, getHeaderLabel: _ = (e) => Ze(e, "attachment"), promptLabel: v, pastedLabel: y, imageLabel: S } = a ?? {}, { typography: C, colors: w, className: T } = o ?? {}, E = u({ "--ai-group-text": w?.text });
+	let { ariaLabel: l = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: h = "Download all", openInNewTabLabel: g, getHeaderLabel: y = (e) => Ze(e, "attachment"), promptLabel: b, pastedLabel: x, imageLabel: S } = a ?? {}, { typography: C, colors: w, className: T } = o ?? {}, E = u({ "--ai-group-text": w?.text });
 	if (e.length === 0) return null;
-	let D = e.some((e) => e.type === t.Image), O = e.some((e) => e.type !== t.Image), k = D && O, A = e.length >= 5, j = k ? ve : D ? G : L, M = _(e.length), N = () => {
+	let D = e.some((e) => e.type === t.Image), O = e.some((e) => e.type !== t.Image), k = D && O, A = e.length >= 5, j = k ? ve : D ? G : L, M = y(e.length), N = () => {
 		let t = e.filter((e) => e.status === c.Idle);
 		r ? r(t) : t.forEach((e) => n?.(e.id));
 	}, P = (t) => {
@@ -366,12 +366,12 @@ var Ne = (e) => {
 					className: d(C?.headerLabelClassName ?? "dial-tiny-semi-text", Xe.headerLabel),
 					children: M
 				})]
-			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(x, {
+			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(v, {
 				icon: /* @__PURE__ */ Y(F, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: b.Small,
+				size: _.Small,
 				"aria-label": h,
 				onClick: N
 			})]
@@ -389,8 +389,8 @@ var Ne = (e) => {
 					labels: {
 						clickLabel: f,
 						retryLabel: m,
-						promptLabel: v,
-						pastedLabel: y,
+						promptLabel: b,
+						pastedLabel: x,
 						imageLabel: S,
 						openInNewTabLabel: g
 					},
@@ -432,21 +432,21 @@ var Ne = (e) => {
 			a
 		])
 	};
-}, et = { label: "_label_14i7c_1" }, tt = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: m = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: y = [
+}, et = { label: "_label_14i7c_1" }, tt = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: g = "System prompt", systemPromptTooltip: _ = "Enter a prompt", temperatureLabel: v = "Temperature", temperatureLabels: y = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: b, labelClassName: x = "!dial-small-semi-text", colors: S }) => {
-	let C = u({ "--csf-label-text": S?.labelText }), T = d(x, et.label, "gap-1");
+], temperatureHint: b, labelClassName: S = "!dial-small-semi-text", colors: C }) => {
+	let w = u({ "--csf-label-text": C?.labelText }), T = d(S, et.label, "gap-1");
 	return /* @__PURE__ */ X("div", {
 		className: "flex flex-col gap-4 px-6 py-3",
-		style: C,
+		style: w,
 		children: [
-			e.responseFormat && /* @__PURE__ */ Y(h, {
+			e.responseFormat && /* @__PURE__ */ Y(m, {
 				fieldTitle: s,
 				labelClassName: T,
 				elementId: "response-format",
-				orientation: k.Column,
+				orientation: D.Column,
 				activeRadioButton: t ?? l.Markdown,
 				labelDescription: c,
 				radioButtons: [{
@@ -458,18 +458,18 @@ var Ne = (e) => {
 				}],
 				onChange: (e) => i(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ Y(w, {
+			e.systemPrompt && /* @__PURE__ */ Y(x, {
 				value: n,
-				placeholder: g,
+				placeholder: _,
 				labelProps: {
 					className: T,
-					label: m
+					label: g
 				},
 				onChange: (e) => a(e ?? "")
 			}),
-			e.temperature && /* @__PURE__ */ Y(v, {
+			e.temperature && /* @__PURE__ */ Y(h, {
 				labelProps: {
-					label: _,
+					label: v,
 					className: T,
 					caption: b
 				},
@@ -483,8 +483,8 @@ var Ne = (e) => {
 		]
 	});
 }, nt = { modal: "_modal_od073_1" };
-Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: h, temperatureHint: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: b = nt.modal }) => {
-	let { responseFormat: x, systemPrompt: S, temperature: C, canSubmit: w, setResponseFormat: T, setSystemPrompt: E, setTemperature: k, handleSubmit: A } = $e({
+Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: h, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = nt.modal }) => {
+	let { responseFormat: b, systemPrompt: x, temperature: S, canSubmit: C, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = $e({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -492,31 +492,31 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ Y(m, {
+	return /* @__PURE__ */ Y(w, {
 		open: !0,
 		header: o,
-		size: D.Sm,
+		size: T.Sm,
 		onClose: a,
-		className: b,
+		className: y,
 		footer: /* @__PURE__ */ Y("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ Y(y, {
+			children: /* @__PURE__ */ Y(g, {
 				tooltip: v,
-				hideTooltip: w || !v,
-				children: /* @__PURE__ */ Y(O, {
+				hideTooltip: C || !v,
+				children: /* @__PURE__ */ Y(E, {
 					label: _,
 					onClick: A,
-					disabled: !w
+					disabled: !C
 				})
 			})
 		}),
 		children: /* @__PURE__ */ Y(tt, {
 			features: e,
-			responseFormat: x,
-			systemPrompt: S,
-			temperature: C,
-			onResponseFormatChange: T,
-			onSystemPromptChange: E,
+			responseFormat: b,
+			systemPrompt: x,
+			temperature: S,
+			onResponseFormatChange: D,
+			onSystemPromptChange: O,
 			onTemperatureChange: k,
 			responseFormatLabel: s,
 			responseFormatHint: c,
@@ -525,13 +525,13 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 			systemPromptLabel: d,
 			systemPromptTooltip: f,
 			temperatureLabel: p,
-			temperatureLabels: h,
-			temperatureHint: g
+			temperatureLabels: m,
+			temperatureHint: h
 		})
 	});
 });
-var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e = s.User, onEdit: t, onEditHover: r, onDelete: i, onRegenerate: a, onCopy: c, onCopyMarkdown: l, onLike: f, onDislike: m, activeRating: h, isAlwaysVisible: g, className: _, labels: v, colors: y }) => {
-	let { tooltips: S, ariaLabels: C } = v ?? {}, [w, T] = q(null), [E, D] = q(""), O = u({ "--ma-active-rating-text": y?.activeRatingText }), k = K(() => {
+var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e = s.User, onEdit: t, onEditHover: r, onDelete: i, onRegenerate: a, onCopy: c, onCopyMarkdown: l, onLike: f, onDislike: m, activeRating: h, isAlwaysVisible: g, className: y, labels: b, colors: x }) => {
+	let { tooltips: S, ariaLabels: C } = b ?? {}, [w, T] = q(null), [E, D] = q(""), O = u({ "--ma-active-rating-text": x?.activeRatingText }), k = K(() => {
 		c?.(), T("copy"), D(C?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => T(null), it);
 	}, [c, C?.copiedStatus]), A = K(() => {
 		l?.(), T("markdown"), D(C?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => T(null), it);
@@ -540,39 +540,39 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 		role: "toolbar",
 		"aria-label": C?.actionsGroup ?? "Message actions",
 		style: O,
-		className: d("flex gap-1", !g && "opacity-0 group-hover:opacity-100", _),
+		className: d("flex gap-1", !g && "opacity-0 group-hover:opacity-100", y),
 		children: [/* @__PURE__ */ Y("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
 			children: E
-		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(x, {
+		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(v, {
 			icon: /* @__PURE__ */ Y(ye, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: b.Small,
+			size: _.Small,
 			"aria-label": C?.editMessage ?? "Edit message",
 			tooltipProps: { tooltip: S?.edit ?? "Edit" },
 			onClick: t,
 			onMouseEnter: r,
 			onFocus: r
-		}), i && /* @__PURE__ */ Y(x, {
+		}), i && /* @__PURE__ */ Y(v, {
 			icon: /* @__PURE__ */ Y(Te, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: b.Small,
+			size: _.Small,
 			"aria-label": C?.deleteMessage ?? "Delete message",
 			tooltipProps: { tooltip: S?.delete ?? "Delete" },
 			onClick: i
 		})] }) : /* @__PURE__ */ X(J, { children: [
-			a && /* @__PURE__ */ Y(x, {
+			a && /* @__PURE__ */ Y(v, {
 				icon: /* @__PURE__ */ Y(be, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: b.Small,
+				size: _.Small,
 				"aria-label": C?.regenerateResponse ?? "Regenerate response",
 				tooltipProps: { tooltip: S?.regenerate ?? "Regenerate" },
 				onClick: a
@@ -580,7 +580,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 			c && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: k,
-				size: b.Small,
+				size: _.Small,
 				isCopied: w === "copy",
 				copyLabel: S?.copy ?? "Copy",
 				copiedLabel: S?.copied ?? "Copied!",
@@ -589,7 +589,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 			l && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: A,
-				size: b.Small,
+				size: _.Small,
 				isCopied: w === "markdown",
 				iconCopy: /* @__PURE__ */ Y(ge, {
 					size: p.SM,
@@ -599,24 +599,24 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 				copiedLabel: S?.copiedMarkdown ?? "Copied!",
 				ariaLabel: C?.copyAsMarkdown ?? "Copy as markdown"
 			}),
-			f && /* @__PURE__ */ Y(x, {
+			f && /* @__PURE__ */ Y(v, {
 				icon: /* @__PURE__ */ Y(we, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: b.Small,
+				size: _.Small,
 				"aria-label": C?.likeResponse ?? "Like response",
 				"aria-pressed": h === o.Like,
 				className: h === o.Like ? rt.activeRating : void 0,
 				tooltipProps: { tooltip: S?.like ?? "Like" },
 				onClick: f
 			}),
-			m && /* @__PURE__ */ Y(x, {
+			m && /* @__PURE__ */ Y(v, {
 				icon: /* @__PURE__ */ Y(Ce, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: b.Small,
+				size: _.Small,
 				"aria-label": C?.dislikeResponse ?? "Dislike response",
 				"aria-pressed": h === o.Dislike,
 				className: h === o.Dislike ? rt.activeRating : void 0,
@@ -632,11 +632,11 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 	collapsedText: "_collapsedText_ovjc1_15",
 	startersDivider: "_startersDivider_ovjc1_26",
 	text: "_text_ovjc1_30"
-}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: x, labels: S, selectedAttachmentId: C }) => {
-	let { colors: w, typography: T, className: D, bubbleClassName: O } = n ?? {}, { attachmentClickLabel: k, attachmentRetryLabel: A, attachmentOpenInNewTabLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = S ?? {}, R = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = u({
-		"--cm-bubble-text": w?.text,
-		"--cm-starters-divider": w?.startersDivider
-	}), B = d($.text, T?.fontClassName), V = !!(h || g);
+}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: x, labels: S, selectedAttachmentId: w }) => {
+	let { colors: T, typography: E, className: D, bubbleClassName: O } = n ?? {}, { attachmentClickLabel: k, attachmentRetryLabel: A, attachmentOpenInNewTabLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = S ?? {}, R = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = u({
+		"--cm-bubble-text": T?.text,
+		"--cm-starters-divider": T?.startersDivider
+	}), B = d($.text, E?.fontClassName), V = !!(h || g);
 	return /* @__PURE__ */ X("div", {
 		role: "group",
 		"aria-label": I,
@@ -676,7 +676,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 							retryLabel: A,
 							openInNewTabLabel: j
 						},
-						selectedAttachmentId: C
+						selectedAttachmentId: w
 					}),
 					f,
 					/* @__PURE__ */ Y(at, {
@@ -692,7 +692,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 				children: p.map((e, t) => /* @__PURE__ */ Y("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ Y(E, {
+					children: /* @__PURE__ */ Y(C, {
 						label: e.title,
 						className: "min-w-[40px]",
 						onClick: () => m(e)
@@ -704,7 +704,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 }, st = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ Y("div", {
 	role: "status",
 	"aria-live": "polite",
-	children: /* @__PURE__ */ Y(C, {
+	children: /* @__PURE__ */ Y(b, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
@@ -712,22 +712,22 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 }), ct = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
 }({}), lt = 10, ut = ({ text: e, position: t = ct.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = lt, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: h, selectedAttachmentId: g }) => {
-	let { colors: _, typography: v, className: y, bubbleClassName: x } = n ?? {}, { showMoreLabel: S = "Show more", showLessLabel: C = "Show less", showMoreAriaLabel: w, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: P, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
+	let { colors: v, typography: y, className: b, bubbleClassName: x } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: P, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
 		text: e,
 		collapsedLineCount: o
 	}), B = u({
-		"--cm-bubble-user-bg": _?.userBackground,
-		"--cm-bubble-user-border": _?.userBorder,
-		"--cm-bubble-fade-start": _?.fadeStart,
-		"--cm-bubble-text": _?.text,
+		"--cm-bubble-user-bg": v?.userBackground,
+		"--cm-bubble-user-border": v?.userBorder,
+		"--cm-bubble-fade-start": v?.fadeStart,
+		"--cm-bubble-text": v?.text,
 		"--cm-bubble-collapsed-height": F ? `${I}px` : void 0,
 		"--cm-bubble-expanded-height": F ? `${L}px` : void 0
-	}), V = t === ct.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", H = d($.text, v?.fontClassName), U = w ?? S, W = E ?? C, ee = R ? S : C, te = R ? U : W, ne = R ? M : N, re = Ae();
+	}), V = t === ct.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", H = d($.text, y?.fontClassName), U = T ?? C, W = E ?? w, ee = R ? C : w, te = R ? U : W, ne = R ? M : N, re = Ae();
 	return /* @__PURE__ */ Y("div", {
 		role: "group",
 		"aria-label": A,
 		style: B,
-		className: d("flex w-full", y),
+		className: d("flex w-full", b),
 		children: /* @__PURE__ */ X("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
@@ -756,7 +756,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 								className: d(H, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
-						}), F && /* @__PURE__ */ Y(T, {
+						}), F && /* @__PURE__ */ Y(S, {
 							label: /* @__PURE__ */ Y(J, { children: ee }),
 							iconBefore: /* @__PURE__ */ Y(ne, {
 								size: p.SM,
@@ -767,7 +767,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 							"aria-controls": re,
 							className: "mt-3",
 							onClick: z,
-							size: b.Small
+							size: _.Small
 						})]
 					})
 				}),

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.1.0-dev.127",
+  "version": "1.1.0-dev.128",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,8 +19,8 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.127",
-    "@epam/ai-dial-conversation-input": "1.1.0-dev.127",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.128",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.128",
     "react-markdown": "^10.1.0",
     "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
   },