@epam/ai-dial-conversation-messages 1.1.0-dev.122 → 1.1.0-dev.125

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, DialInput as m, DialPopup as h, DialRadioGroup as g, DialSkeleton as _, DialSkeletonVariant as v, DialSlider as y, DialSpinner as b, DialTooltip as x, ElementSize as S, GhostIconButton as C, Highlight as w, InfoMessageNotification as T, LinkButton as E, NeutralButton as D, PopupSize as O, PrimaryButton as k, RadioGroupOrientation as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
+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 { 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: S.Small,
+	size: b.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: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: T, className: E } = o ?? {}, { id: D, name: O, status: k, errorReason: A } = t, j = k === c.Loading, M = k === c.Error, N = Ae(), P = M ? A && (S?.[A] ?? We[A]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && A !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
+	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) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
-	}, V = je(() => l ? O : Ne(O), [l, O]), H = K(() => {
+	}, 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(T?.nameClassName ?? "dial-caption-text", "line-clamp-2 min-w-0 break-all", Z.nameText, !M && z),
-		children: n ? /* @__PURE__ */ Y(w, {
+		className: d(w?.nameClassName ?? "dial-caption-text", "line-clamp-2 min-w-0 break-all", Z.nameText, !M && z),
+		children: n ? /* @__PURE__ */ Y(S, {
 			text: V,
 			query: n,
 			maxLines: 2
@@ -155,18 +155,18 @@ var Ne = (e) => {
 			className: Z.typeText,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ Y("span", {
-			className: d(T?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
+			className: d(w?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
 			children: y ? `${I} · ${y}` : I
 		})]
 	}), te = () => {
-		m && p ? p(D) : r && r(D);
+		m && p ? p(E) : r && r(E);
 	}, ne = /* @__PURE__ */ X(J, { children: [
 		W,
 		ee,
 		j && /* @__PURE__ */ Y("div", {
-			"aria-label": x,
+			"aria-label": b,
 			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
-			children: /* @__PURE__ */ Y(b, { size: 32 })
+			children: /* @__PURE__ */ Y(A, { size: 32 })
 		}),
 		/* @__PURE__ */ X("div", {
 			className: d("absolute right-0 top-0 flex gap-1"),
@@ -176,14 +176,14 @@ var Ne = (e) => {
 					errorTitle: P,
 					errorDescId: N,
 					onClick: s,
-					id: D
+					id: E
 				}),
 				R && /* @__PURE__ */ Y(Be, {
 					ariaLabel: v,
 					errorTitle: P,
 					errorDescId: N,
 					onClick: i,
-					id: D
+					id: E
 				}),
 				u && /* @__PURE__ */ Y(He, {
 					ariaLabel: v,
@@ -196,7 +196,7 @@ var Ne = (e) => {
 					errorTitle: P,
 					errorDescId: N,
 					onClick: h,
-					id: D
+					id: E
 				})
 			]
 		}),
@@ -210,7 +210,7 @@ var Ne = (e) => {
 	] });
 	return /* @__PURE__ */ Y("div", {
 		style: f,
-		className: d("inline-flex", E),
+		className: d("inline-flex", T),
 		children: /* @__PURE__ */ Y("div", {
 			role: "button",
 			tabIndex: 0,
@@ -240,7 +240,7 @@ 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: g } = 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({
+	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 = () => {
@@ -269,8 +269,8 @@ var Ne = (e) => {
 					id: h,
 					className: Z.imageActionButton
 				}),
-				E !== Ke.Loaded && /* @__PURE__ */ Y(_, {
-					variant: v.Rectangular,
+				E !== Ke.Loaded && /* @__PURE__ */ Y(g, {
+					variant: _.Rectangular,
 					width: "100%",
 					height: "100%",
 					active: E === Ke.Loading,
@@ -284,7 +284,7 @@ var Ne = (e) => {
 				/* @__PURE__ */ Y("img", {
 					ref: T,
 					src: y,
-					alt: g,
+					alt: v,
 					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")
@@ -340,7 +340,7 @@ 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: b } = a ?? {}, { typography: x, 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: _ = (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 });
 	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 t = e.filter((e) => e.status === c.Idle);
@@ -363,15 +363,15 @@ var Ne = (e) => {
 					className: d("shrink-0", Xe.headerIcon),
 					"aria-hidden": !0
 				}), /* @__PURE__ */ Y("span", {
-					className: d(x?.headerLabelClassName ?? "dial-tiny-semi-text", Xe.headerLabel),
+					className: d(C?.headerLabelClassName ?? "dial-tiny-semi-text", Xe.headerLabel),
 					children: M
 				})]
-			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(C, {
+			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(x, {
 				icon: /* @__PURE__ */ Y(F, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: S.Small,
+				size: b.Small,
 				"aria-label": h,
 				onClick: N
 			})]
@@ -391,7 +391,7 @@ var Ne = (e) => {
 						retryLabel: m,
 						promptLabel: v,
 						pastedLabel: y,
-						imageLabel: b,
+						imageLabel: S,
 						openInNewTabLabel: g
 					},
 					isSelected: e.id === s
@@ -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: h = "System prompt", systemPromptTooltip: _ = "Enter a prompt", temperatureLabel: v = "Temperature", temperatureLabels: b = [
+}, 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 = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: x, labelClassName: S = "!dial-small-semi-text", colors: C }) => {
-	let w = u({ "--csf-label-text": C?.labelText }), T = d(S, et.label, "gap-1");
+], 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");
 	return /* @__PURE__ */ X("div", {
 		className: "flex flex-col gap-4 px-6 py-3",
-		style: w,
+		style: C,
 		children: [
-			e.responseFormat && /* @__PURE__ */ Y(g, {
+			e.responseFormat && /* @__PURE__ */ Y(h, {
 				fieldTitle: s,
 				labelClassName: T,
 				elementId: "response-format",
-				orientation: A.Column,
+				orientation: k.Column,
 				activeRadioButton: t ?? l.Markdown,
 				labelDescription: c,
 				radioButtons: [{
@@ -458,33 +458,33 @@ var Ne = (e) => {
 				}],
 				onChange: (e) => i(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ Y(m, {
+			e.systemPrompt && /* @__PURE__ */ Y(w, {
 				value: n,
-				placeholder: _,
+				placeholder: g,
 				labelProps: {
 					className: T,
-					label: h
+					label: m
 				},
 				onChange: (e) => a(e ?? "")
 			}),
-			e.temperature && /* @__PURE__ */ Y(y, {
+			e.temperature && /* @__PURE__ */ Y(v, {
 				labelProps: {
-					label: v,
+					label: _,
 					className: T,
-					caption: x
+					caption: b
 				},
 				value: r,
 				min: 0,
 				max: 1,
 				step: .1,
-				labels: b,
+				labels: y,
 				onChange: o
 			})
 		]
 	});
 }, nt = { modal: "_modal_od073_1" };
-Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = nt.modal }) => {
-	let { responseFormat: b, systemPrompt: S, temperature: C, canSubmit: w, setResponseFormat: T, setSystemPrompt: E, setTemperature: D, 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: 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({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -492,18 +492,18 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ Y(h, {
+	return /* @__PURE__ */ Y(m, {
 		open: !0,
 		header: o,
-		size: O.Sm,
+		size: D.Sm,
 		onClose: a,
-		className: y,
+		className: b,
 		footer: /* @__PURE__ */ Y("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ Y(x, {
+			children: /* @__PURE__ */ Y(y, {
 				tooltip: v,
 				hideTooltip: w || !v,
-				children: /* @__PURE__ */ Y(k, {
+				children: /* @__PURE__ */ Y(O, {
 					label: _,
 					onClick: A,
 					disabled: !w
@@ -512,12 +512,12 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		}),
 		children: /* @__PURE__ */ Y(tt, {
 			features: e,
-			responseFormat: b,
+			responseFormat: x,
 			systemPrompt: S,
 			temperature: C,
 			onResponseFormatChange: T,
 			onSystemPromptChange: E,
-			onTemperatureChange: D,
+			onTemperatureChange: k,
 			responseFormatLabel: s,
 			responseFormatHint: c,
 			responseFormatMarkdownLabel: l,
@@ -525,20 +525,20 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 			systemPromptLabel: d,
 			systemPromptTooltip: f,
 			temperatureLabel: p,
-			temperatureLabels: m,
+			temperatureLabels: h,
 			temperatureHint: g
 		})
 	});
 });
 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: b, ariaLabels: x } = v ?? {}, [w, T] = q(null), [E, D] = q(""), O = u({ "--ma-active-rating-text": y?.activeRatingText }), k = K(() => {
-		c?.(), T("copy"), D(x?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => T(null), it);
-	}, [c, x?.copiedStatus]), A = K(() => {
-		l?.(), T("markdown"), D(x?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => T(null), it);
-	}, [l, x?.copiedMarkdownStatus]);
+	let { tooltips: S, ariaLabels: C } = v ?? {}, [w, T] = q(null), [E, D] = q(""), O = u({ "--ma-active-rating-text": y?.activeRatingText }), k = K(() => {
+		c?.(), T("copy"), D(C?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => T(null), it);
+	}, [c, C?.copiedStatus]), A = K(() => {
+		l?.(), T("markdown"), D(C?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => T(null), it);
+	}, [l, C?.copiedMarkdownStatus]);
 	return /* @__PURE__ */ X("div", {
 		role: "toolbar",
-		"aria-label": x?.actionsGroup ?? "Message actions",
+		"aria-label": C?.actionsGroup ?? "Message actions",
 		style: O,
 		className: d("flex gap-1", !g && "opacity-0 group-hover:opacity-100", _),
 		children: [/* @__PURE__ */ Y("span", {
@@ -546,81 +546,81 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 			"aria-live": "polite",
 			className: "sr-only",
 			children: E
-		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(C, {
+		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(x, {
 			icon: /* @__PURE__ */ Y(ye, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: S.Small,
-			"aria-label": x?.editMessage ?? "Edit message",
-			tooltipProps: { tooltip: b?.edit ?? "Edit" },
+			size: b.Small,
+			"aria-label": C?.editMessage ?? "Edit message",
+			tooltipProps: { tooltip: S?.edit ?? "Edit" },
 			onClick: t,
 			onMouseEnter: r,
 			onFocus: r
-		}), i && /* @__PURE__ */ Y(C, {
+		}), i && /* @__PURE__ */ Y(x, {
 			icon: /* @__PURE__ */ Y(Te, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: S.Small,
-			"aria-label": x?.deleteMessage ?? "Delete message",
-			tooltipProps: { tooltip: b?.delete ?? "Delete" },
+			size: b.Small,
+			"aria-label": C?.deleteMessage ?? "Delete message",
+			tooltipProps: { tooltip: S?.delete ?? "Delete" },
 			onClick: i
 		})] }) : /* @__PURE__ */ X(J, { children: [
-			a && /* @__PURE__ */ Y(C, {
+			a && /* @__PURE__ */ Y(x, {
 				icon: /* @__PURE__ */ Y(be, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: S.Small,
-				"aria-label": x?.regenerateResponse ?? "Regenerate response",
-				tooltipProps: { tooltip: b?.regenerate ?? "Regenerate" },
+				size: b.Small,
+				"aria-label": C?.regenerateResponse ?? "Regenerate response",
+				tooltipProps: { tooltip: S?.regenerate ?? "Regenerate" },
 				onClick: a
 			}),
 			c && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: k,
-				size: S.Small,
+				size: b.Small,
 				isCopied: w === "copy",
-				copyLabel: b?.copy ?? "Copy",
-				copiedLabel: b?.copied ?? "Copied!",
-				ariaLabel: x?.copyResponse ?? "Copy response"
+				copyLabel: S?.copy ?? "Copy",
+				copiedLabel: S?.copied ?? "Copied!",
+				ariaLabel: C?.copyResponse ?? "Copy response"
 			}),
 			l && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: A,
-				size: S.Small,
+				size: b.Small,
 				isCopied: w === "markdown",
 				iconCopy: /* @__PURE__ */ Y(ge, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				copyLabel: b?.copyMarkdown ?? "Copy as Markdown",
-				copiedLabel: b?.copiedMarkdown ?? "Copied!",
-				ariaLabel: x?.copyAsMarkdown ?? "Copy as markdown"
+				copyLabel: S?.copyMarkdown ?? "Copy as Markdown",
+				copiedLabel: S?.copiedMarkdown ?? "Copied!",
+				ariaLabel: C?.copyAsMarkdown ?? "Copy as markdown"
 			}),
-			f && /* @__PURE__ */ Y(C, {
+			f && /* @__PURE__ */ Y(x, {
 				icon: /* @__PURE__ */ Y(we, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: S.Small,
-				"aria-label": x?.likeResponse ?? "Like response",
+				size: b.Small,
+				"aria-label": C?.likeResponse ?? "Like response",
 				"aria-pressed": h === o.Like,
 				className: h === o.Like ? rt.activeRating : void 0,
-				tooltipProps: { tooltip: b?.like ?? "Like" },
+				tooltipProps: { tooltip: S?.like ?? "Like" },
 				onClick: f
 			}),
-			m && /* @__PURE__ */ Y(C, {
+			m && /* @__PURE__ */ Y(x, {
 				icon: /* @__PURE__ */ Y(Ce, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: S.Small,
-				"aria-label": x?.dislikeResponse ?? "Dislike response",
+				size: b.Small,
+				"aria-label": C?.dislikeResponse ?? "Dislike response",
 				"aria-pressed": h === o.Dislike,
 				className: h === o.Dislike ? rt.activeRating : void 0,
-				tooltipProps: { tooltip: b?.dislike ?? "Dislike" },
+				tooltipProps: { tooltip: S?.dislike ?? "Dislike" },
 				onClick: m
 			})
 		] })]
@@ -633,7 +633,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 	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: E, 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({
+	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);
@@ -641,7 +641,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 		role: "group",
 		"aria-label": I,
 		style: z,
-		className: d("flex w-full items-start gap-3", E),
+		className: d("flex w-full items-start gap-3", D),
 		children: [V && /* @__PURE__ */ Y(r, {
 			src: h,
 			size: 28,
@@ -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(D, {
+					children: /* @__PURE__ */ Y(E, {
 						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(T, {
+	children: /* @__PURE__ */ Y(C, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
@@ -712,7 +712,7 @@ 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: b } = n ?? {}, { showMoreLabel: x = "Show more", showLessLabel: C = "Show less", showMoreAriaLabel: w, showLessAriaLabel: T, 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: _, 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({
 		text: e,
 		collapsedLineCount: o
 	}), B = u({
@@ -722,7 +722,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 		"--cm-bubble-text": _?.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 ?? x, W = T ?? C, ee = R ? x : 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, v?.fontClassName), U = w ?? S, W = E ?? C, ee = R ? S : C, te = R ? U : W, ne = R ? M : N, re = Ae();
 	return /* @__PURE__ */ Y("div", {
 		role: "group",
 		"aria-label": A,
@@ -745,7 +745,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 					selectedAttachmentId: g
 				}),
 				e && /* @__PURE__ */ Y("div", {
-					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, b),
+					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, x),
 					children: /* @__PURE__ */ X("div", {
 						className: "flex min-w-0 flex-col items-start",
 						children: [/* @__PURE__ */ Y("div", {
@@ -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(E, {
+						}), F && /* @__PURE__ */ Y(T, {
 							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: S.Small
+							size: b.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.122",
+  "version": "1.1.0-dev.125",
   "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.122",
-    "@epam/ai-dial-conversation-input": "1.1.0-dev.122",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.125",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.125",
     "react-markdown": "^10.1.0",
     "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
   },