@epam/ai-dial-conversation-stages 1.3.0-dev.59 → 1.3.0-dev.61

package/index.js

@@ -1,6 +1,6 @@
 import { AttachmentErrorReason as e, AttachmentType as t, MIME_TYPE_EXT_MAP as n, MarkdownCodeBlock as r, MarkdownRenderer as i, RequestStatus as a, StageStatus as o, buildCssVars as s, mergeClasses as c, messageAttachmentsToDisplayAttachments as l, normalizeMimeType as u } from "@epam/ai-dial-chat-shared";
 import { Accordion as d, DIAL_ICON_SIZE as f, DIAL_KIT_ICON_STROKE as p, DialItemType as m, ElementSize as h, EllipsisTooltip as g, FileIcon as _, Highlight as v, Skeleton as y, SkeletonVariant as b, Spinner as x, StaticIconButton as S } from "@epam/ai-dial-ui-kit";
-import { IconAlertCircle as C, IconCheck as w, IconClipboard as T, IconDownload as E, IconExternalLink as D, IconFile as O, IconFileTypeBmp as k, IconFileTypeCss as A, IconFileTypeCsv as j, IconFileTypeDoc as M, IconFileTypeDocx as N, IconFileTypeHtml as P, IconFileTypeJpg as F, IconFileTypeJs as I, IconFileTypeJsx as L, IconFileTypePdf as R, IconFileTypePhp as z, IconFileTypePng as B, IconFileTypePpt as V, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as ie, IconFileTypeTxt as ae, IconFileTypeVue as oe, IconFileTypeXls as H, IconFileTypeXml as se, IconFileTypeZip as ce, IconMusic as le, IconPhoto as U, IconReload as ue, IconTerminal2 as de, IconVideo as fe, IconX as pe } from "@tabler/icons-react";
+import { IconAlertCircle as C, IconCheck as w, IconClipboard as T, IconDownload as E, IconExternalLink as D, IconFile as O, IconFileTypeBmp as k, IconFileTypeCss as A, IconFileTypeCsv as j, IconFileTypeDoc as M, IconFileTypeDocx as N, IconFileTypeHtml as P, IconFileTypeJpg as F, IconFileTypeJs as I, IconFileTypeJsx as L, IconFileTypePdf as R, IconFileTypePhp as z, IconFileTypePng as B, IconFileTypePpt as V, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as ie, IconFileTypeTxt as ae, IconFileTypeVue as H, IconFileTypeXls as oe, IconFileTypeXml as se, IconFileTypeZip as ce, IconMusic as le, IconPhoto as U, IconReload as ue, IconTerminal2 as de, IconVideo as fe, IconX as pe } from "@tabler/icons-react";
 import { memo as me, useCallback as W, useEffect as G, useId as he, useMemo as K, useRef as ge, useState as q } from "react";
 import { Fragment as _e, jsx as J, jsxs as Y } from "react/jsx-runtime";
 //#region src/constants/public-class-names.ts
@@ -136,8 +136,8 @@ var ve = {
 		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return N;
 		case "application/vnd.ms-powerpoint": return V;
 		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return V;
-		case "application/vnd.ms-excel": return H;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return H;
+		case "application/vnd.ms-excel": return oe;
+		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return oe;
 		case "application/zip":
 		case "application/vnd.rar":
 		case "application/x-7z-compressed":
@@ -156,7 +156,7 @@ var ve = {
 		case "text/css": return A;
 		case "text/x-php": return z;
 		case "text/x-rustsrc": return ee;
-		case "text/x-vue": return oe;
+		case "text/x-vue": return H;
 		default: return O;
 	}
 }, Le = (e) => {
@@ -193,7 +193,7 @@ var ve = {
 		BottomIcon: d ? null : Le(e),
 		typeLabel: d ? null : Ve(e, n)
 	};
-}, Ue = "flex size-[100px] items-center justify-center rounded-xl border", Z = {
+}, Ue = "flex size-[100px] items-center justify-center rounded-xl border", We = "outline-1 outline-offset-1 focus-visible:outline", Z = {
 	tray: "dial-ai-attachment-tray",
 	trayItem: "dial-ai-attachment-tray-item",
 	tile: "dial-ai-attachment-tile",
@@ -202,27 +202,29 @@ var ve = {
 	tileType: "dial-ai-attachment-tile-type",
 	tileAction: "dial-ai-attachment-tile-action"
 }, Q = {
-	tile: "_tile_1wxo2_12",
-	hovered: "_hovered_1wxo2_18",
-	selected: "_selected_1wxo2_28",
-	tileError: "_tileError_1wxo2_33",
-	nameText: "_nameText_1wxo2_38",
-	typeText: "_typeText_1wxo2_42",
-	placeholderIcon: "_placeholderIcon_1wxo2_46",
-	retryIcon: "_retryIcon_1wxo2_50",
-	track: "_track_1wxo2_54",
-	actionButton: "_actionButton_1wxo2_60",
-	imageActionButton: "_imageActionButton_1wxo2_64"
-}, We = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ J(S, {
+	tile: "_tile_1sjdm_12",
+	hovered: "_hovered_1sjdm_18",
+	selected: "_selected_1sjdm_28",
+	tileError: "_tileError_1sjdm_33",
+	nameText: "_nameText_1sjdm_38",
+	typeText: "_typeText_1sjdm_42",
+	placeholderIcon: "_placeholderIcon_1sjdm_46",
+	retryIcon: "_retryIcon_1sjdm_50",
+	track: "_track_1sjdm_54",
+	actionButton: "_actionButton_1sjdm_65",
+	loading: "_loading_1sjdm_86",
+	imageActionButton: "_imageActionButton_1sjdm_87",
+	proxyFocus: "_proxyFocus_1sjdm_96"
+}, Ge = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o, isAlwaysVisible: s }) => /* @__PURE__ */ J(S, {
 	icon: a,
 	size: h.Small,
-	className: c("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Q.actionButton, o, Z.tileAction),
+	className: c(s ? "opacity-100" : "opacity-0 group-hover/attachment-tile:opacity-100 group-focus-visible/attachment-tile:opacity-100 group-has-[:focus-visible]/attachment-tile:opacity-100", Q.actionButton, o, Z.tileAction),
 	"aria-label": e,
 	"aria-describedby": t ? n : void 0,
 	onClick: (e) => {
 		e.stopPropagation(), r(i);
 	}
-}), Ge = ({ ...e }) => /* @__PURE__ */ J(We, {
+}), Ke = ({ ...e }) => /* @__PURE__ */ J(Ge, {
 	icon: /* @__PURE__ */ J(ue, {
 		size: f.SM,
 		"aria-hidden": !0,
@@ -230,21 +232,21 @@ var ve = {
 	}),
 	className: Q.retryIcon,
 	...e
-}), Ke = ({ ...e }) => /* @__PURE__ */ J(We, {
+}), qe = ({ ...e }) => /* @__PURE__ */ J(Ge, {
 	icon: /* @__PURE__ */ J(E, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), qe = ({ ...e }) => /* @__PURE__ */ J(We, {
+}), Je = ({ ...e }) => /* @__PURE__ */ J(Ge, {
 	icon: /* @__PURE__ */ J(D, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), Je = ({ className: e, ...t }) => /* @__PURE__ */ J(We, {
+}), Ye = ({ className: e, ...t }) => /* @__PURE__ */ J(Ge, {
 	icon: /* @__PURE__ */ J(pe, {
 		size: f.SM,
 		"aria-hidden": !0,
@@ -252,35 +254,35 @@ var ve = {
 	}),
 	className: c("mobile:opacity-100", e),
 	...t
-}), Ye = {
+}), Xe = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type",
 	[e.FileTooLarge]: "Upload failed · file too large"
-}, Xe = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isLink: u, cssVars: d, onExpand: h, isExpandable: g, onRemove: y, isSelected: b }) => {
-	let { clickLabel: S = "Download attachment", expandLabel: C = "Expand pasted text", downloadLabel: w = "Download attachment", retryLabel: T = "Retry upload", removeLabel: E = "Remove attachment", openInNewTabLabel: D = "Open in new tab", sizeLabel: O, uploadingLabel: k = "Uploading", errorReasonLabels: A, genericErrorLabel: j = "Upload failed" } = o ?? {}, { typography: M, className: N } = s ?? {}, { id: P, name: F, status: I, errorReason: L } = t, R = I === a.Loading, z = I === a.Error, B = he(), V = z ? L && (A?.[L] ?? Ye[L]) || j : "", { BottomIcon: ee, typeLabel: te } = He(t), ne = Be(t), re = !z && !R && l && !u, ie = z && !!i && L !== e.UnsupportedType && L !== e.FileTooLarge, ae = Number(!!re) + Number(!!ie) + Number(!!u) + Number(!!y), oe = ae > 1 ? "pe-11" : ae === 1 ? "pe-5" : void 0, H = !!g && h !== void 0, se = H || r !== void 0, ce = () => {
-		H ? h(P) : r?.(P);
+}, Ze = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isLink: u, cssVars: d, onExpand: h, isExpandable: g, onRemove: y, isSelected: b }) => {
+	let { clickLabel: S = "Download attachment", expandLabel: C = "Expand pasted text", downloadLabel: w = "Download attachment", retryLabel: T = "Retry upload", removeLabel: E = "Remove attachment", openInNewTabLabel: D = "Open in new tab", sizeLabel: O, uploadingLabel: k = "Uploading", errorReasonLabels: A, genericErrorLabel: j = "Upload failed" } = o ?? {}, { typography: M, className: N } = s ?? {}, { id: P, name: F, status: I, errorReason: L } = t, R = I === a.Loading, z = I === a.Error, B = he(), V = z ? L && (A?.[L] ?? Xe[L]) || j : "", { BottomIcon: ee, typeLabel: te } = He(t), ne = Be(t), re = !z && !R && l && !u, ie = z && !!i && L !== e.UnsupportedType && L !== e.FileTooLarge, ae = !!g && h !== void 0, H = ae || r !== void 0, oe = Number(!!re) + Number(!!ie) + Number(!!u) + Number(!!y), se = !H && oe === 1, ce = () => {
+		ae ? h(P) : r?.(P);
 	}, le = (e) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ce());
 	}, U = K(() => Fe(F), [F]), ue = W(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), de = c(Ue, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-3", Q.tile, !z && Q.hovered, b && Q.selected, z && Q.tileError, Z.tile, b && Z.tileSelected), fe = /* @__PURE__ */ J("div", {
+	}, [t]), de = c(Ue, "group/attachment-tile relative flex-col justify-between items-start gap-2 overflow-hidden p-3", Q.tile, H && !z && !R && Q.hovered, R && Q.loading, b && Q.selected, z && Q.tileError, se && Q.proxyFocus, Z.tile, b && Z.tileSelected), fe = /* @__PURE__ */ J("div", {
 		title: U,
-		className: c(M?.nameClassName ?? "dial-tiny-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, !z && oe, Z.tileName),
+		className: c(M?.nameClassName ?? "dial-tiny-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, Z.tileName),
 		children: n ? /* @__PURE__ */ J(v, {
 			text: U,
 			query: n,
 			maxLines: 2
 		}) : U
 	}), pe = ee && /* @__PURE__ */ Y("div", {
-		className: c("flex w-full items-center gap-1", z && oe, Z.tileType),
+		className: c("flex w-full items-end gap-1", Z.tileType),
 		children: [ne ? /* @__PURE__ */ J(_, {
 			type: m.File,
 			name: F ?? "",
 			fileExtension: ze(t),
-			size: f.SM,
+			size: f.MD,
 			decorative: !0
 		}) : /* @__PURE__ */ J(ee, {
-			size: f.SM,
+			size: f.MD,
 			className: Q.typeText,
 			stroke: p,
 			"aria-hidden": !0
@@ -288,10 +290,10 @@ var ve = {
 			className: c(M?.metaClassName ?? "dial-tiny-text", "min-w-0 flex-1 truncate", Q.typeText),
 			children: O ? `${te} · ${O}` : te
 		})]
-	}), me = se ? {
+	}), me = H ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-label": H ? C : S,
+		"aria-label": ae ? C : S,
 		onClick: ce,
 		onKeyDown: le
 	} : {}, G = /* @__PURE__ */ Y(_e, { children: [
@@ -300,38 +302,39 @@ var ve = {
 		R && /* @__PURE__ */ J("div", {
 			role: "progressbar",
 			"aria-label": k,
-			className: c("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Q.track),
+			className: c("absolute inset-0 flex items-center justify-center rounded-[11px]", Q.track),
 			children: /* @__PURE__ */ J(x, { size: 32 })
 		}),
 		/* @__PURE__ */ Y("div", {
-			className: "absolute end-1 top-1 flex gap-1",
+			className: "absolute end-1 top-1 flex",
 			children: [
-				re && /* @__PURE__ */ J(Ke, {
+				re && /* @__PURE__ */ J(qe, {
 					ariaLabel: w,
 					errorTitle: V,
 					errorDescId: B,
 					onClick: l,
 					id: P
 				}),
-				ie && /* @__PURE__ */ J(Ge, {
+				ie && /* @__PURE__ */ J(Ke, {
 					ariaLabel: T,
 					errorTitle: V,
 					errorDescId: B,
 					onClick: i,
 					id: P
 				}),
-				u && /* @__PURE__ */ J(qe, {
+				u && /* @__PURE__ */ J(Je, {
 					ariaLabel: D,
 					errorTitle: V,
 					errorDescId: B,
 					onClick: ue
 				}),
-				y && /* @__PURE__ */ J(Je, {
+				y && /* @__PURE__ */ J(Ye, {
 					ariaLabel: E,
 					errorTitle: V,
 					errorDescId: B,
 					onClick: y,
-					id: P
+					id: P,
+					isAlwaysVisible: R
 				})
 			]
 		}),
@@ -350,13 +353,13 @@ var ve = {
 			...me,
 			"aria-busy": R,
 			style: d,
-			className: c(de, se && "cursor-pointer", "focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			className: c(de, H && "cursor-pointer", We),
 			children: G
 		})
 	});
-}, Ze = /* @__PURE__ */ function(e) {
+}, Qe = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), Qe = ({ enabled: e, src: t }) => {
+}({}), $e = ({ enabled: e, src: t }) => {
 	let n = ge(null), [r, i] = q("idle");
 	return G(() => {
 		i(e && t ? "loading" : "idle");
@@ -371,47 +374,49 @@ var ve = {
 		imageRef: n,
 		imageLoadStatus: r
 	};
-}, $e = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: l, isSelected: u }) => {
-	let { clickLabel: d = "Open attachment", expandLabel: m = "Expand pasted text", removeLabel: h = "Remove attachment", downloadLabel: g = "Download attachment" } = i ?? {}, { className: _ } = l ?? {}, { id: v, name: x } = e, S = e.previewUrl ?? e.url, C = e.type === t.Pasted && n !== void 0, { isLoading: w, isError: T, isImage: E } = K(() => He(e), [e]), D = r !== void 0 && !C && !w && !T, O = C || D, { imageRef: k, imageLoadStatus: A } = Qe({
-		enabled: E,
-		src: S
-	}), j = () => {
-		C && n ? n(v) : D && r && r(v);
-	}, M = O ? {
+}, et = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: l, isSelected: u }) => {
+	let { clickLabel: d = "Open attachment", expandLabel: m = "Expand pasted text", removeLabel: h = "Remove attachment", downloadLabel: g = "Download attachment", uploadingLabel: _ = "Uploading" } = i ?? {}, { className: v } = l ?? {}, { id: S, name: C } = e, w = e.previewUrl ?? e.url, T = e.type === t.Pasted && n !== void 0, { isLoading: E, isError: D, isImage: O } = K(() => He(e), [e]), k = r !== void 0 && !T && !E && !D, A = T || k, j = !!s && !E, M = !A && Number(!!a) + Number(j) === 1, { imageRef: N, imageLoadStatus: P } = $e({
+		enabled: O,
+		src: w
+	}), F = () => {
+		T && n ? n(S) : k && r && r(S);
+	}, I = A ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-label": C ? m : d,
-		onClick: j,
+		"aria-label": T ? m : d,
+		onClick: F,
 		onKeyDown: (e) => {
-			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j());
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
 		}
 	} : {};
 	return /* @__PURE__ */ J("div", {
-		className: c(Ue, "group/attachment-tile", O && "cursor-pointer", Q.tile, u && Q.selected, _, Z.tile, u && Z.tileSelected),
-		...M,
+		className: c(Ue, "group/attachment-tile", A && "cursor-pointer", Q.tile, u && Q.selected, E && Q.loading, M && Q.proxyFocus, We, v, Z.tile, u && Z.tileSelected),
+		...I,
+		"aria-busy": E,
 		style: o,
 		children: /* @__PURE__ */ Y("div", {
 			className: "relative h-full w-full overflow-hidden",
 			children: [
 				/* @__PURE__ */ Y("div", {
-					className: "absolute end-1 top-1 z-10 flex gap-1",
-					children: [a && /* @__PURE__ */ J(Je, {
+					className: "absolute end-1 top-1 z-10 flex",
+					children: [a && /* @__PURE__ */ J(Ye, {
 						ariaLabel: h,
 						onClick: a,
-						id: v,
-						className: Q.imageActionButton
-					}), s && /* @__PURE__ */ J(Ke, {
+						id: S,
+						className: Q.imageActionButton,
+						isAlwaysVisible: E
+					}), j && /* @__PURE__ */ J(qe, {
 						ariaLabel: g,
 						onClick: s,
-						id: v,
+						id: S,
 						className: Q.imageActionButton
 					})]
 				}),
-				A !== Ze.Loaded && /* @__PURE__ */ J(y, {
+				P !== Qe.Loaded && /* @__PURE__ */ J(y, {
 					variant: b.Rectangular,
 					width: "100%",
 					height: "100%",
-					active: A === Ze.Loading,
+					active: P === Qe.Loading,
 					overlay: /* @__PURE__ */ J(U, {
 						size: f.LG,
 						className: Q.placeholderIcon,
@@ -421,17 +426,23 @@ var ve = {
 					className: "absolute inset-0 rounded-xl"
 				}),
 				/* @__PURE__ */ J("img", {
-					ref: k,
-					src: S,
-					alt: x,
+					ref: N,
+					src: w,
+					alt: C,
 					loading: "lazy",
 					decoding: "async",
-					className: c("h-full w-full rounded-xl object-cover transition-opacity duration-200", A === Ze.Loaded ? "opacity-100" : "opacity-0")
+					className: c("h-full w-full rounded-xl object-cover transition-opacity duration-200", P === Qe.Loaded ? "opacity-100" : "opacity-0")
+				}),
+				E && /* @__PURE__ */ J("div", {
+					role: "progressbar",
+					"aria-label": _,
+					className: c("absolute inset-0 flex items-center justify-center rounded-xl", Q.track),
+					children: /* @__PURE__ */ J(x, { size: 32 })
 				})
 			]
 		})
 	});
-}, et = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: c, labels: l, styles: u, isSelected: d }) => {
+}, tt = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: c, labels: l, styles: u, isSelected: d }) => {
 	let { colors: f } = u ?? {}, p = e.type === t.Pasted && a !== void 0, m = s({
 		"--ai-tile-bg": f?.background,
 		"--ai-tile-border": f?.border,
@@ -450,7 +461,7 @@ var ve = {
 		"--ai-tile-hover-icon-color": f?.hoverIconColor,
 		"--ai-tile-progress-track": f?.trackBackground
 	}), { isImage: h, isLink: g } = K(() => He(e), [e]);
-	return h ? /* @__PURE__ */ J($e, {
+	return h ? /* @__PURE__ */ J(et, {
 		attachment: e,
 		labels: l,
 		onClick: o,
@@ -460,7 +471,7 @@ var ve = {
 		cssVars: m,
 		onDownload: c,
 		isSelected: d
-	}) : /* @__PURE__ */ J(Xe, {
+	}) : /* @__PURE__ */ J(Ze, {
 		attachment: e,
 		searchQuery: n,
 		onClick: o,
@@ -475,7 +486,7 @@ var ve = {
 		isExpandable: p,
 		isSelected: d
 	});
-}, tt = (e) => {
+}, nt = (e) => {
 	let t = l(e);
 	if (!e?.length) return t;
 	let n = /* @__PURE__ */ new Map();
@@ -490,7 +501,7 @@ var ve = {
 			contentType: t
 		} : e;
 	});
-}, nt = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => /* @__PURE__ */ J(r, {
+}, rt = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => /* @__PURE__ */ J(r, {
 	language: t?.replace(/^language-/, "") ?? "",
 	value: typeof e == "string" ? e : String(e ?? ""),
 	codeClassName: n,
@@ -498,7 +509,7 @@ var ve = {
 	copyLabel: i,
 	copiedLabel: a,
 	hideDownload: !0
-}), rt = me(({ content: e, typography: t, copyAriaLabel: n = "Copy", copiedLabel: r, tableScrollRegionAriaLabel: a, mathScrollRegionAriaLabel: o }) => {
+}), it = me(({ content: e, typography: t, copyAriaLabel: n = "Copy", copiedLabel: r, tableScrollRegionAriaLabel: a, mathScrollRegionAriaLabel: o }) => {
 	let s = "mb-1.5 last:mb-0", l = c(t?.headingClassName ?? "dial-small-semi-text", X.stageContent, s);
 	return /* @__PURE__ */ J(i, {
 		content: e,
@@ -520,7 +531,7 @@ var ve = {
 			link: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent),
 			tableCell: c(t?.contentClassName ?? "dial-tiny-text", X.tableCell)
 		},
-		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ J(nt, {
+		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ J(rt, {
 			codeClassName: i,
 			blockClassName: t?.codeBlockClassName,
 			copyAriaLabel: n,
@@ -531,7 +542,7 @@ var ve = {
 			children: e
 		}) }
 	});
-}), it = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
+}), at = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
 	let r = W((t) => {
 		let r = e.find((e) => e.id === t);
 		r && n?.(r);
@@ -541,17 +552,17 @@ var ve = {
 		className: "flex flex-wrap gap-2",
 		children: e.map((e) => /* @__PURE__ */ J("div", {
 			role: "listitem",
-			children: /* @__PURE__ */ J(et, {
+			children: /* @__PURE__ */ J(tt, {
 				attachment: e,
 				onClick: n && r,
 				labels: { clickLabel: t }
 			})
 		}, e.id))
 	});
-}, at = ({ stage: e, isLive: t, typography: n, labels: r, nameOverride: i, onAttachmentClick: a, childList: s, isExpanded: l, onToggle: u }) => {
+}, ot = ({ stage: e, isLive: t, typography: n, labels: r, nameOverride: i, onAttachmentClick: a, childList: s, isExpanded: l, onToggle: u }) => {
 	let [f, p] = q(!1), m = l ?? f, h = W((e) => {
 		l === void 0 && p(e), u?.(e);
-	}, [l, u]), { copyAriaLabel: _ = "Copy stage content", codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: y, mathScrollRegionAriaLabel: b, runningAriaLabel: x, failedAriaLabel: S, attachmentClickLabel: C = "Preview search result" } = r ?? {}, w = K(() => tt(e.attachments), [e.attachments]), { name: T, durationLabel: E } = we(e.name), D = i ?? T, O = !i && Te(T), k = e.status === o.Failed, A = !!e.content || !!e.attachments?.length, j = A || s != null, M = /* @__PURE__ */ Y(_e, { children: [
+	}, [l, u]), { copyAriaLabel: _ = "Copy stage content", codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: y, mathScrollRegionAriaLabel: b, runningAriaLabel: x, failedAriaLabel: S, attachmentClickLabel: C = "Preview search result" } = r ?? {}, w = K(() => nt(e.attachments), [e.attachments]), { name: T, durationLabel: E } = we(e.name), D = i ?? T, O = !i && Te(T), k = e.status === o.Failed, A = !!e.content || !!e.attachments?.length, j = A || s != null, M = /* @__PURE__ */ Y(_e, { children: [
 		/* @__PURE__ */ J("span", {
 			className: "flex flex-none items-center",
 			children: /* @__PURE__ */ J(Pe, {
@@ -588,7 +599,7 @@ var ve = {
 			className: "flex min-w-0 flex-col gap-3 ps-8",
 			children: [e.content && /* @__PURE__ */ J("div", {
 				className: "max-h-[300px] min-w-0 overflow-y-auto",
-				children: /* @__PURE__ */ J(rt, {
+				children: /* @__PURE__ */ J(it, {
 					content: e.content,
 					typography: n,
 					copyAriaLabel: _,
@@ -596,7 +607,7 @@ var ve = {
 					tableScrollRegionAriaLabel: y,
 					mathScrollRegionAriaLabel: b
 				})
-			}), w.length > 0 && /* @__PURE__ */ J(it, {
+			}), w.length > 0 && /* @__PURE__ */ J(at, {
 				attachments: w,
 				clickLabel: C,
 				onAttachmentClick: a
@@ -606,9 +617,9 @@ var ve = {
 		className: c("flex w-full items-center gap-2 px-2 py-1.5", X.row),
 		children: M
 	});
-}, ot = (e) => e <= 3 ? "ps-4" : "ps-0", st = (e) => e <= 3 ? "ps-6" : "ps-0", ct = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s }) => {
+}, st = (e) => e <= 3 ? "ps-4" : "ps-0", ct = (e) => e <= 3 ? "ps-6" : "ps-0", lt = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s }) => {
 	let c = ke(e.stage.index), l = t + 1;
-	return /* @__PURE__ */ J(at, {
+	return /* @__PURE__ */ J(ot, {
 		stage: e.stage,
 		nameOverride: n,
 		isLive: r && e.stage.status == null,
@@ -617,10 +628,10 @@ var ve = {
 		onAttachmentClick: s,
 		isExpanded: i.isExpanded(c),
 		onToggle: (e) => i.onToggle(c, e),
-		childList: e.children.length > 0 ? /* @__PURE__ */ J(ut, {
+		childList: e.children.length > 0 ? /* @__PURE__ */ J(dt, {
 			nodes: e.children,
 			depth: l,
-			className: ot(l),
+			className: st(l),
 			isStreaming: r,
 			expansion: i,
 			typography: a,
@@ -628,7 +639,7 @@ var ve = {
 			onAttachmentClick: s
 		}) : void 0
 	});
-}, lt = ({ row: e, depth: t, isStreaming: n, expansion: r, typography: i, labels: a, onAttachmentClick: s }) => {
+}, ut = ({ row: e, depth: t, isStreaming: n, expansion: r, typography: i, labels: a, onAttachmentClick: s }) => {
 	let { runningAriaLabel: l, failedAriaLabel: u, attemptLabel: f = (e) => `Attempt ${e}` } = a ?? {}, p = e.attempts ?? [], m = p.some((e) => e.stage.status == null), h = p.some((e) => e.stage.status === o.Failed), _ = o.Completed;
 	m ? _ = null : h && (_ = o.Failed);
 	let v = Ae(e.key), y = r.isExpanded(v), b = t + 1;
@@ -659,14 +670,14 @@ var ve = {
 		onToggle: (e) => r.onToggle(v, e),
 		className: je,
 		headerClassName: c(Me, X.collapseButton, X.row, X.stageHeader),
-		contentClassName: c("-mt-2 min-w-0 px-0", st(b), X.stageRegion),
+		contentClassName: c("-mt-2 min-w-0 px-0", ct(b), X.stageRegion),
 		children: /* @__PURE__ */ J("ul", {
 			role: "list",
 			className: "flex min-w-0 flex-col gap-0.5",
 			children: y && p.map((e, t) => /* @__PURE__ */ J("li", {
 				role: "listitem",
 				className: "min-w-0",
-				children: /* @__PURE__ */ J(ct, {
+				children: /* @__PURE__ */ J(lt, {
 					node: e,
 					depth: b,
 					nameOverride: f(t + 1),
@@ -679,23 +690,23 @@ var ve = {
 			}, e.stage.index))
 		})
 	});
-}, ut = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ J("ul", {
+}, dt = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ J("ul", {
 	role: "list",
 	className: c("flex min-w-0 flex-col gap-0.5", n),
 	children: Ne(e).map((e) => /* @__PURE__ */ J("li", {
 		role: "listitem",
 		className: "min-w-0",
-		children: e.node ? /* @__PURE__ */ J(ct, {
+		children: e.node ? /* @__PURE__ */ J(lt, {
 			node: e.node,
 			depth: t,
 			...r
-		}) : /* @__PURE__ */ J(lt, {
+		}) : /* @__PURE__ */ J(ut, {
 			row: e,
 			depth: t,
 			...r
 		})
 	}, e.key))
-}), dt = ({ stages: e, isStreaming: t, className: n, styles: r, labels: i, onAttachmentClick: a, expansion: o }) => {
+}), ft = ({ stages: e, isStreaming: t, className: n, styles: r, labels: i, onAttachmentClick: a, expansion: o }) => {
 	let { colors: l, typography: u } = r ?? {}, d = s({
 		"--cs-text": l?.text,
 		"--cs-row-hover": l?.rowHoverColor,
@@ -716,7 +727,7 @@ var ve = {
 	return /* @__PURE__ */ J("div", {
 		style: d,
 		className: c("w-full min-w-0", X.panel, n, ve.panel),
-		children: /* @__PURE__ */ J(ut, {
+		children: /* @__PURE__ */ J(dt, {
 			nodes: f,
 			depth: 0,
 			className: "w-full ps-5",
@@ -727,9 +738,9 @@ var ve = {
 			onAttachmentClick: a
 		})
 	});
-}, ft = (e) => {
+}, pt = (e) => {
 	let t = ye();
-	return /* @__PURE__ */ J(dt, {
+	return /* @__PURE__ */ J(ft, {
 		...e,
 		expansion: t
 	});
@@ -740,7 +751,7 @@ var ve = {
 	doneIcon: "_doneIcon_16fae_36",
 	failedText: "_failedText_16fae_40",
 	liveName: "_liveName_16fae_44"
-}, pt = ({ stages: e, isStreaming: t, labels: n, className: r, styles: i, onAttachmentClick: a }) => {
+}, mt = ({ stages: e, isStreaming: t, labels: n, className: r, styles: i, onAttachmentClick: a }) => {
 	let { executedLabel: l = "Executed", stepsLabel: u = () => "steps", failedCountLabel: m = (e) => `${e} failed`, runningAriaLabel: h = "Running", copyAriaLabel: _, codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: y, mathScrollRegionAriaLabel: b, failedAriaLabel: S, attemptLabel: C, attachmentClickLabel: T } = n ?? {}, [E, D] = q(t), O = ye(), { reset: k } = O, A = e.length > 1;
 	G(() => {
 		A && !E && k();
@@ -785,7 +796,7 @@ var ve = {
 		attemptLabel: C,
 		attachmentClickLabel: T
 	};
-	if (e.length === 1) return /* @__PURE__ */ J(dt, {
+	if (e.length === 1) return /* @__PURE__ */ J(ft, {
 		stages: e,
 		isStreaming: t,
 		expansion: O,
@@ -861,7 +872,7 @@ var ve = {
 			className: "overflow-visible py-0",
 			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, ve.groupToggle),
 			contentClassName: c("-mt-2 px-0", $.groupRegion),
-			children: E && /* @__PURE__ */ J(dt, {
+			children: E && /* @__PURE__ */ J(ft, {
 				stages: e,
 				isStreaming: t,
 				expansion: O,
@@ -877,4 +888,4 @@ var ve = {
 	});
 };
 //#endregion
-export { ve as CONVERSATION_STAGES_CLASS, pt as CollapsedGroup, ft as StagesPanel };
+export { ve as CONVERSATION_STAGES_CLASS, mt as CollapsedGroup, pt as StagesPanel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-stages",
   "description": "Panel for displaying agent processing stages during LLM response streaming",
-  "version": "1.3.0-dev.59",
+  "version": "1.3.0-dev.61",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-attachment-input": "1.3.0-dev.59"
+    "@epam/ai-dial-attachment-input": "1.3.0-dev.61"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.59",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.61",
     "@epam/ai-dial-ui-kit": "^0.15.4"
   },
   "repository": {