@epam/ai-dial-conversation-messages 1.1.0-dev.240 → 1.1.0-dev.244

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, DialRadioGroup as m, DialSlider as h, DialTooltip as g, ElementSize as _, GhostIconButton as v, Highlight as y, InfoMessageNotification as b, LinkButton as x, NeutralButton as S, Popup as C, PopupSize as w, PrimaryButton as T, RadioGroupOrientation as E, Skeleton as D, SkeletonVariant as O, Spinner as k, StaticIconButton as A, Textarea as j } from "@epam/ai-dial-ui-kit";
+import { DIAL_ICON_SIZE as p, DialSlider as m, ElementSize as h, GhostIconButton as g, Highlight as _, InfoMessageNotification as v, LinkButton as y, NeutralButton as b, Popup as x, PopupSize as S, PrimaryButton as C, RadioGroup as w, RadioGroupOrientation as T, Skeleton as E, SkeletonVariant as D, Spinner as O, StaticIconButton as k, Textarea as A, Tooltip 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";
@@ -89,19 +89,19 @@ var Ne = (e) => {
 		typeLabel: d ? null : Le(e, n)
 	};
 }, ze = "flex size-[84px] items-center justify-center rounded-xl border", Z = {
-	tile: "_tile_3jao2_1",
-	hovered: "_hovered_3jao2_5",
-	selected: "_selected_3jao2_15",
-	tileError: "_tileError_3jao2_20",
-	nameText: "_nameText_3jao2_25",
-	typeText: "_typeText_3jao2_29",
-	retryIcon: "_retryIcon_3jao2_33",
-	track: "_track_3jao2_37",
-	actionButton: "_actionButton_3jao2_43",
-	imageActionButton: "_imageActionButton_3jao2_47"
-}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(A, {
+	tile: "_tile_11lkg_1",
+	hovered: "_hovered_11lkg_5",
+	selected: "_selected_11lkg_15",
+	tileError: "_tileError_11lkg_20",
+	nameText: "_nameText_11lkg_25",
+	typeText: "_typeText_11lkg_29",
+	retryIcon: "_retryIcon_11lkg_33",
+	track: "_track_11lkg_37",
+	actionButton: "_actionButton_11lkg_43",
+	imageActionButton: "_imageActionButton_11lkg_47"
+}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(k, {
 	icon: a,
-	size: _.Small,
+	size: h.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,
@@ -137,14 +137,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: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: A } = t, j = O === c.Loading, M = O === 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: v = "Download attachment", retryLabel: y = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, 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) => {
 		(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(y, {
+		children: n ? /* @__PURE__ */ Y(_, {
 			text: V,
 			query: n,
 			maxLines: 2
@@ -167,33 +167,33 @@ var Ne = (e) => {
 		j && /* @__PURE__ */ Y("div", {
 			"aria-label": x,
 			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
-			children: /* @__PURE__ */ Y(k, { size: 32 })
+			children: /* @__PURE__ */ Y(O, { size: 32 })
 		}),
 		/* @__PURE__ */ X("div", {
 			className: d("absolute right-0 top-0 flex gap-1"),
 			children: [
 				L && /* @__PURE__ */ Y(Ve, {
-					ariaLabel: _,
+					ariaLabel: v,
 					errorTitle: P,
 					errorDescId: N,
 					onClick: s,
 					id: E
 				}),
 				R && /* @__PURE__ */ Y(Be, {
-					ariaLabel: v,
+					ariaLabel: y,
 					errorTitle: P,
 					errorDescId: N,
 					onClick: i,
 					id: E
 				}),
 				u && /* @__PURE__ */ Y(He, {
-					ariaLabel: v,
+					ariaLabel: y,
 					errorTitle: P,
 					errorDescId: N,
 					onClick: H
 				}),
 				h && /* @__PURE__ */ Y(Ue, {
-					ariaLabel: v,
+					ariaLabel: y,
 					errorTitle: P,
 					errorDescId: N,
 					onClick: h,
@@ -215,7 +215,7 @@ var Ne = (e) => {
 		children: /* @__PURE__ */ Y("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": _,
+			"aria-label": v,
 			onClick: te,
 			onKeyDown: B,
 			style: f,
@@ -270,8 +270,8 @@ var Ne = (e) => {
 					id: h,
 					className: Z.imageActionButton
 				}),
-				w !== Ke.Loaded && /* @__PURE__ */ Y(D, {
-					variant: O.Rectangular,
+				w !== Ke.Loaded && /* @__PURE__ */ Y(E, {
+					variant: D.Rectangular,
 					width: "100%",
 					height: "100%",
 					active: w === Ke.Loading,
@@ -341,7 +341,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: 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 });
+	let { ariaLabel: l = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: _ = "Download all", openInNewTabLabel: v, 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 = y(e.length), N = () => {
 		let t = e.filter((e) => e.status === c.Idle);
@@ -367,13 +367,13 @@ var Ne = (e) => {
 					className: d(C?.headerLabelClassName ?? "dial-tiny-semi-text", Xe.headerLabel),
 					children: M
 				})]
-			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(v, {
+			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(g, {
 				icon: /* @__PURE__ */ Y(F, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: _.Small,
-				"aria-label": h,
+				size: h.Small,
+				"aria-label": _,
 				onClick: N
 			})]
 		}), /* @__PURE__ */ Y("div", {
@@ -393,7 +393,7 @@ var Ne = (e) => {
 						promptLabel: b,
 						pastedLabel: x,
 						imageLabel: S,
-						openInNewTabLabel: g
+						openInNewTabLabel: v
 					},
 					isSelected: e.id === s
 				})
@@ -433,62 +433,63 @@ 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: g = "System prompt", systemPromptTooltip: _ = "Enter a prompt", temperatureLabel: v = "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: h = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: v = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: b, labelClassName: x = "!dial-small-semi-text", colors: S }) => {
-	let C = u({ "--csf-label-text": S?.labelText }), w = d(x, et.label, "gap-1");
+], temperatureHint: y, labelClassName: b = "!dial-small-semi-text", colors: x }) => {
+	let S = u({ "--csf-label-text": x?.labelText }), C = d(b, et.label, "gap-1");
 	return /* @__PURE__ */ X("div", {
 		className: "flex flex-col gap-4 px-6 pb-3",
-		style: C,
+		style: S,
 		children: [
-			e.responseFormat && /* @__PURE__ */ Y(m, {
-				fieldTitle: s,
-				groupLabelClassName: w,
-				containerClassName: "!gap-2",
-				formItemChildrenClassName: "mb-2",
-				elementId: "response-format",
-				orientation: E.Column,
-				activeRadioButton: t ?? l.Markdown,
-				labelDescription: c,
-				radioButtons: [{
-					id: l.Markdown,
-					name: f
+			e.responseFormat && /* @__PURE__ */ Y(w, {
+				id: "response-format",
+				labelProps: {
+					label: s,
+					className: C,
+					caption: c
+				},
+				optionsClassName: "mb-2",
+				orientation: T.Column,
+				value: t ?? l.Markdown,
+				items: [{
+					value: l.Markdown,
+					label: f
 				}, {
-					id: l.PlainText,
-					name: p
+					value: l.PlainText,
+					label: p
 				}],
 				onChange: (e) => i(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ Y(j, {
+			e.systemPrompt && /* @__PURE__ */ Y(A, {
 				value: n,
-				placeholder: _,
+				placeholder: g,
 				resize: !0,
 				labelProps: {
-					className: w,
-					label: g
+					className: C,
+					label: h
 				},
 				onChange: (e) => a(e ?? "")
 			}),
-			e.temperature && /* @__PURE__ */ Y(h, {
+			e.temperature && /* @__PURE__ */ Y(m, {
 				labelProps: {
-					label: v,
-					className: w,
-					caption: b
+					label: _,
+					className: C,
+					caption: y
 				},
 				value: r,
 				min: 0,
 				max: 1,
 				step: .1,
-				labels: y,
+				labels: v,
 				onChange: o
 			})
 		]
 	});
 }, nt = { modal: "_modal_kl0h0_1" };
-Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: h, temperatureHint: _, saveLabel: v = "Apply changes", saveDisabledTooltip: y, backgroundClassName: b = nt.modal }) => {
-	let { responseFormat: x, systemPrompt: S, temperature: E, canSubmit: D, setResponseFormat: O, setSystemPrompt: k, setTemperature: A, handleSubmit: j } = $e({
+Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: h, temperatureHint: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = nt.modal }) => {
+	let { responseFormat: b, systemPrompt: w, temperature: T, canSubmit: E, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = $e({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -496,33 +497,33 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ Y(C, {
+	return /* @__PURE__ */ Y(x, {
 		open: !0,
 		header: o,
 		titleClassName: s,
-		size: w.Sm,
+		size: S.Sm,
 		onClose: a,
-		className: b,
+		className: y,
 		footer: /* @__PURE__ */ Y("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ Y(g, {
-				tooltip: y,
-				hideTooltip: D || !y,
-				children: /* @__PURE__ */ Y(T, {
-					label: v,
-					onClick: j,
-					disabled: !D
+			children: /* @__PURE__ */ Y(j, {
+				tooltip: v,
+				hideTooltip: E || !v,
+				children: /* @__PURE__ */ Y(C, {
+					label: _,
+					onClick: A,
+					disabled: !E
 				})
 			})
 		}),
 		children: /* @__PURE__ */ Y(tt, {
 			features: e,
-			responseFormat: x,
-			systemPrompt: S,
-			temperature: E,
-			onResponseFormatChange: O,
-			onSystemPromptChange: k,
-			onTemperatureChange: A,
+			responseFormat: b,
+			systemPrompt: w,
+			temperature: T,
+			onResponseFormatChange: D,
+			onSystemPromptChange: O,
+			onTemperatureChange: k,
 			responseFormatLabel: c,
 			responseFormatHint: l,
 			responseFormatMarkdownLabel: u,
@@ -531,11 +532,11 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 			systemPromptTooltip: p,
 			temperatureLabel: m,
 			temperatureLabels: h,
-			temperatureHint: _
+			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: y, labels: b, colors: x }) => {
+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: _, isAlwaysVisible: v, 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(() => {
@@ -545,39 +546,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", y),
+		className: d("flex gap-1", !v && "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(v, {
+		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(g, {
 			icon: /* @__PURE__ */ Y(ye, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: _.Small,
+			size: h.Small,
 			"aria-label": C?.editMessage ?? "Edit message",
 			tooltipProps: { tooltip: S?.edit ?? "Edit" },
 			onClick: t,
 			onMouseEnter: r,
 			onFocus: r
-		}), i && /* @__PURE__ */ Y(v, {
+		}), i && /* @__PURE__ */ Y(g, {
 			icon: /* @__PURE__ */ Y(Te, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: _.Small,
+			size: h.Small,
 			"aria-label": C?.deleteMessage ?? "Delete message",
 			tooltipProps: { tooltip: S?.delete ?? "Delete" },
 			onClick: i
 		})] }) : /* @__PURE__ */ X(J, { children: [
-			a && /* @__PURE__ */ Y(v, {
+			a && /* @__PURE__ */ Y(g, {
 				icon: /* @__PURE__ */ Y(be, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: _.Small,
+				size: h.Small,
 				"aria-label": C?.regenerateResponse ?? "Regenerate response",
 				tooltipProps: { tooltip: S?.regenerate ?? "Regenerate" },
 				onClick: a
@@ -585,7 +586,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 			c && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: k,
-				size: _.Small,
+				size: h.Small,
 				isCopied: w === "copy",
 				copyLabel: S?.copy ?? "Copy",
 				copiedLabel: S?.copied ?? "Copied!",
@@ -594,7 +595,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 			l && /* @__PURE__ */ Y(n, {
 				iconSize: p.SM,
 				onClick: A,
-				size: _.Small,
+				size: h.Small,
 				isCopied: w === "markdown",
 				iconCopy: /* @__PURE__ */ Y(ge, {
 					size: p.SM,
@@ -604,27 +605,27 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 				copiedLabel: S?.copiedMarkdown ?? "Copied!",
 				ariaLabel: C?.copyAsMarkdown ?? "Copy as markdown"
 			}),
-			f && /* @__PURE__ */ Y(v, {
+			f && /* @__PURE__ */ Y(g, {
 				icon: /* @__PURE__ */ Y(we, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: _.Small,
+				size: h.Small,
 				"aria-label": C?.likeResponse ?? "Like response",
-				"aria-pressed": h === o.Like,
-				className: h === o.Like ? rt.activeRating : void 0,
+				"aria-pressed": _ === o.Like,
+				className: _ === o.Like ? rt.activeRating : void 0,
 				tooltipProps: { tooltip: S?.like ?? "Like" },
 				onClick: f
 			}),
-			m && /* @__PURE__ */ Y(v, {
+			m && /* @__PURE__ */ Y(g, {
 				icon: /* @__PURE__ */ Y(Ce, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: _.Small,
+				size: h.Small,
 				"aria-label": C?.dislikeResponse ?? "Dislike response",
-				"aria-pressed": h === o.Dislike,
-				className: h === o.Dislike ? rt.activeRating : void 0,
+				"aria-pressed": _ === o.Dislike,
+				className: _ === o.Dislike ? rt.activeRating : void 0,
 				tooltipProps: { tooltip: S?.dislike ?? "Dislike" },
 				onClick: m
 			})
@@ -637,7 +638,7 @@ 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: _, markdownClassNames: v, onAttachmentClick: y, onDownloadAll: b, onAttachmentRetry: x, codeBlockTheme: C, labels: w, selectedAttachmentId: T }) => {
+}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, markdownClassNames: v, onAttachmentClick: y, onDownloadAll: x, onAttachmentRetry: S, codeBlockTheme: C, labels: w, selectedAttachmentId: T }) => {
 	let { colors: E, typography: D, className: O, bubbleClassName: k } = n ?? {}, { attachmentClickLabel: A, attachmentRetryLabel: j, attachmentOpenInNewTabLabel: M, startersAriaLabel: N = "Quick reply buttons", thinkingLabel: P, codeBlockCopyLabel: F, codeBlockCopiedLabel: I, assistantMessageAriaLabel: L = "Assistant message", deploymentIconFallbackLabel: R = "AI" } = w ?? {}, z = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], B = u({
 		"--cm-bubble-text": E?.text,
 		"--cm-starters-divider": E?.startersDivider
@@ -675,8 +676,8 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 					/* @__PURE__ */ Y(Qe, {
 						attachments: z,
 						onAttachmentClick: (e) => y?.(l?.find((t) => t.id === e)),
-						onDownloadAll: b,
-						onRetry: x,
+						onDownloadAll: x,
+						onRetry: S,
 						labels: {
 							clickLabel: A,
 							retryLabel: j,
@@ -698,7 +699,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(S, {
+					children: /* @__PURE__ */ Y(b, {
 						label: e.title,
 						className: "min-w-[40px]",
 						onClick: () => m(e)
@@ -710,15 +711,15 @@ 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(b, {
+	children: /* @__PURE__ */ Y(v, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
 }), 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: v, typography: y, className: b, bubbleClassName: S } = 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({
+}({}), 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: g, selectedAttachmentId: _ }) => {
+	let { colors: v, typography: b, className: x, bubbleClassName: S } = 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({
@@ -728,12 +729,12 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 		"--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, y?.fontClassName), U = T ?? C, W = E ?? w, ee = R ? C : w, 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, b?.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", b),
+		className: d("flex w-full", x),
 		children: /* @__PURE__ */ X("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
@@ -741,14 +742,14 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 					attachments: a ?? [],
 					onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
 					onDownloadAll: m,
-					onRetry: h,
+					onRetry: g,
 					labels: {
 						clickLabel: D,
 						retryLabel: O,
 						openInNewTabLabel: k
 					},
 					styles: { className: "max-w-[640px]" },
-					selectedAttachmentId: g
+					selectedAttachmentId: _
 				}),
 				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, S),
@@ -762,7 +763,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(x, {
+						}), F && /* @__PURE__ */ Y(y, {
 							label: /* @__PURE__ */ Y(J, { children: ee }),
 							iconBefore: /* @__PURE__ */ Y(ne, {
 								size: p.SM,
@@ -773,7 +774,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 							"aria-controls": re,
 							className: "mt-3",
 							onClick: z,
-							size: _.Small
+							size: h.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.240",
+  "version": "1.1.0-dev.244",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,10 +19,10 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.240",
-    "@epam/ai-dial-conversation-input": "1.1.0-dev.240",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.244",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.244",
     "react-markdown": "^10.1.0",
-    "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
+    "@epam/ai-dial-ui-kit": "^0.14.0-dev.4"
   },
   "repository": {
     "type": "git",