@epam/ai-dial-conversation-stages 1.2.0-dev.321 → 1.2.0-dev.323

package/index.js

@@ -1,24 +1,24 @@
 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, ElementSize as m, EllipsisTooltip as h, Highlight as g, Skeleton as _, SkeletonVariant as v, Spinner as y, StaticIconButton as b } from "@epam/ai-dial-ui-kit";
-import { IconAlertCircle as x, IconCheck as S, IconClipboard as C, IconDownload as w, IconExternalLink as T, IconFile as E, IconFileTypeBmp as D, IconFileTypeCss as O, IconFileTypeCsv as k, IconFileTypeDoc as A, IconFileTypeDocx as j, IconFileTypeHtml as M, IconFileTypeJpg as N, IconFileTypeJs as P, IconFileTypeJsx as F, IconFileTypePdf as I, IconFileTypePhp as L, IconFileTypePng as R, IconFileTypePpt as z, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as ie, IconFileTypeTxt as B, IconFileTypeVue as ae, IconFileTypeXls as V, IconFileTypeXml as oe, IconFileTypeZip as H, IconMusic as se, IconPhoto as U, IconReload as ce, IconTerminal2 as le, IconVideo as ue, IconX as de } from "@tabler/icons-react";
-import { memo as fe, useCallback as W, useEffect as G, useId as pe, useMemo as K, useRef as me, useState as q } from "react";
-import { Fragment as he, jsx as J, jsxs as Y } from "react/jsx-runtime";
+import { IconAlertCircle as x, IconCheck as S, IconClipboard as C, IconDownload as w, IconExternalLink as T, IconFile as E, IconFileTypeBmp as D, IconFileTypeCss as O, IconFileTypeCsv as k, IconFileTypeDoc as A, IconFileTypeDocx as j, IconFileTypeHtml as M, IconFileTypeJpg as N, IconFileTypeJs as P, IconFileTypeJsx as F, IconFileTypePdf as I, IconFileTypePhp as L, IconFileTypePng as R, IconFileTypePpt as z, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as B, IconFileTypeTxt as ie, IconFileTypeVue as ae, IconFileTypeXls as oe, IconFileTypeXml as se, IconFileTypeZip as ce, IconMusic as le, IconPhoto as V, IconReload as ue, IconTerminal2 as de, IconVideo as fe, IconX as pe } from "@tabler/icons-react";
+import { memo as me, useCallback as H, useEffect as U, useId as he, useMemo as W, useRef as ge, useState as G } from "react";
+import { Fragment as _e, jsx as K, jsxs as q } from "react/jsx-runtime";
 //#region src/constants/public-class-names.ts
-var ge = {
+var J = {
 	panel: "dial-conversation-stages-panel",
 	group: "dial-conversation-stages-group",
 	groupToggle: "dial-conversation-stages-group-toggle"
-}, _e = () => {
-	let [e, t] = q(() => /* @__PURE__ */ new Set()), n = W((e, n) => {
+}, ve = () => {
+	let [e, t] = G(() => /* @__PURE__ */ new Set()), n = H((e, n) => {
 		t((t) => {
 			if (t.has(e) === n) return t;
 			let r = new Set(t);
 			return n ? r.add(e) : r.delete(e), r;
 		});
-	}, []), r = W(() => {
+	}, []), r = H(() => {
 		t((e) => e.size ? /* @__PURE__ */ new Set() : e);
 	}, []);
-	return K(() => ({
+	return W(() => ({
 		isExpanded: (t) => e.has(t),
 		onToggle: n,
 		reset: r
@@ -27,24 +27,24 @@ var ge = {
 		n,
 		r
 	]);
-}, ve = /[([][^()[\]]*[)\]]/g, ye = /(\d+(?:\.\d+)?)\s*s\b/, be = (e) => {
+}, ye = /[([][^()[\]]*[)\]]/g, be = /(\d+(?:\.\d+)?)\s*s\b/, xe = (e) => {
 	let t = e.trimEnd();
 	return t.endsWith(":") ? t.slice(0, -1) : t;
-}, xe = (e) => {
-	ve.lastIndex = 0;
+}, Se = (e) => {
+	ye.lastIndex = 0;
 	let t;
-	for (; t = ve.exec(e);) {
-		let e = t[0].slice(1, -1), n = ye.exec(e);
+	for (; t = ye.exec(e);) {
+		let e = t[0].slice(1, -1), n = be.exec(e);
 		if (n) return {
 			durationLabel: `${n[1]}s`,
 			groupIndex: t.index,
 			groupLength: t[0].length
 		};
 	}
-}, Se = (e) => {
-	let t = e ?? "", n = xe(t);
+}, Y = (e) => {
+	let t = e ?? "", n = Se(t);
 	return {
-		name: be(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
+		name: xe(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
 		durationLabel: n?.durationLabel
 	};
 }, Ce = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), we = (e) => [...e].reverse().find((e) => e.status == null), Te = (e, t) => {
@@ -65,8 +65,8 @@ var ge = {
 }, De = (e) => `stage:${e}`, Oe = (e) => `group:${e}`, ke = "min-w-0 overflow-visible py-0", Ae = "min-w-0 justify-start gap-2 rounded-lg px-2 py-1.5 text-start mobile:min-h-11", je = (e) => {
 	let t = [], n = 0;
 	for (; n < e.length;) {
-		let r = e[n], i = Se(r.stage.name).name, a = n + 1;
-		for (; a < e.length && Se(e[a].stage.name).name === i;) a += 1;
+		let r = e[n], i = Y(r.stage.name).name, a = n + 1;
+		for (; a < e.length && Y(e[a].stage.name).name === i;) a += 1;
 		let o = e.slice(n, a);
 		o.length > 1 ? t.push({
 			key: r.stage.index,
@@ -98,20 +98,20 @@ var ge = {
 	codeInline: "_codeInline_w65is_84",
 	blockquote: "_blockquote_w65is_91",
 	tableCell: "_tableCell_w65is_96"
-}, Me = ({ status: e, isLive: t, runningLabel: n = "Running", failedLabel: r = "Failed" }) => e === o.Failed ? /* @__PURE__ */ Y(he, { children: [/* @__PURE__ */ J(x, {
+}, Me = ({ status: e, isLive: t, runningLabel: n = "Running", failedLabel: r = "Failed" }) => e === o.Failed ? /* @__PURE__ */ q(_e, { children: [/* @__PURE__ */ K(x, {
 	size: f.MD,
 	className: X.iconError,
 	"aria-hidden": !0,
 	stroke: p
-}), /* @__PURE__ */ J("span", {
+}), /* @__PURE__ */ K("span", {
 	className: "sr-only",
 	children: r
-})] }) : e === o.Completed ? /* @__PURE__ */ J(S, {
+})] }) : e === o.Completed ? /* @__PURE__ */ K(S, {
 	size: f.SM,
 	className: X.iconCompleted,
 	"aria-hidden": !0,
 	stroke: p
-}) : t ? /* @__PURE__ */ J(y, {
+}) : t ? /* @__PURE__ */ K(y, {
 	size: 16,
 	ariaLabel: n
 }) : null, Ne = (e) => {
@@ -126,33 +126,33 @@ var ge = {
 		case "image/png": return R;
 		case "image/svg+xml": return ne;
 		case "image/bmp": return D;
-		default: return U;
+		default: return V;
 	}
-	if (t.startsWith("video/")) return ue;
-	if (t.startsWith("audio/")) return se;
+	if (t.startsWith("video/")) return fe;
+	if (t.startsWith("audio/")) return le;
 	switch (t) {
 		case "application/pdf": return I;
 		case "application/msword": return A;
 		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return j;
 		case "application/vnd.ms-powerpoint": return z;
 		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return z;
-		case "application/vnd.ms-excel": return V;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return V;
+		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":
 		case "application/gzip":
-		case "application/x-tar": return H;
+		case "application/x-tar": return ce;
 		case "text/csv": return k;
-		case "text/plain": return B;
+		case "text/plain": return ie;
 		case "text/html":
 		case "application/xhtml+xml": return M;
-		case "application/xml": return oe;
+		case "application/xml": return se;
 		case "application/sql": return te;
 		case "text/javascript": return P;
 		case "text/jsx": return F;
 		case "text/typescript": return re;
-		case "text/tsx": return ie;
+		case "text/tsx": return B;
 		case "text/css": return O;
 		case "text/x-php": return L;
 		case "text/x-rustsrc": return ee;
@@ -161,7 +161,7 @@ var ge = {
 	}
 }, Fe = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? le : n === t.Pasted ? C : n === t.Image ? U : Pe(r ?? "");
+	return n === t.Prompt ? de : n === t.Pasted ? C : n === t.Image ? V : Pe(r ?? "");
 }, Ie = (e) => {
 	let t = u(e), r = n[t];
 	if (r) return r;
@@ -208,7 +208,7 @@ var ge = {
 	track: "_track_1tdbq_50",
 	actionButton: "_actionButton_1tdbq_56",
 	imageActionButton: "_imageActionButton_1tdbq_60"
-}, Be = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ J(b, {
+}, Be = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ K(b, {
 	icon: a,
 	size: m.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),
@@ -217,30 +217,30 @@ var ge = {
 	onClick: (e) => {
 		e.stopPropagation(), r(i);
 	}
-}), Ve = ({ ...e }) => /* @__PURE__ */ J(Be, {
-	icon: /* @__PURE__ */ J(ce, {
+}), Ve = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(ue, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	className: Q.retryIcon,
 	...e
-}), He = ({ ...e }) => /* @__PURE__ */ J(Be, {
-	icon: /* @__PURE__ */ J(w, {
+}), He = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(w, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), Ue = ({ ...e }) => /* @__PURE__ */ J(Be, {
-	icon: /* @__PURE__ */ J(T, {
+}), Ue = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(T, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), We = ({ ...e }) => /* @__PURE__ */ J(Be, {
-	icon: /* @__PURE__ */ J(de, {
+}), We = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(pe, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
@@ -250,104 +250,104 @@ var ge = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type",
 	[e.FileTooLarge]: "Upload failed · file too large"
-}, Ke = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isPasted: u, isLink: d, cssVars: f, onExpand: p, isExpandable: m, onRemove: h, isSelected: _ }) => {
-	let { clickLabel: v = "Download attachment", expandLabel: b = "Expand pasted text", downloadLabel: x = "Download attachment", retryLabel: S = "Retry upload", removeLabel: C = "Remove attachment", openInNewTabLabel: w = "Open in new tab", sizeLabel: T, uploadingLabel: E = "Uploading", errorReasonLabels: D, genericErrorLabel: O = "Upload failed" } = o ?? {}, { typography: k, className: A } = s ?? {}, { id: j, name: M, status: N, errorReason: P } = t, F = N === a.Loading, I = N === a.Error, L = pe(), R = I ? P && (D?.[P] ?? Ge[P]) || O : "", { BottomIcon: z, typeLabel: ee } = Re(t), te = !I && !F && l && !d, ne = I && !!i && P !== e.UnsupportedType && P !== e.FileTooLarge, re = Number(!!te) + Number(!!ne) + Number(!!d) + Number(!!h), ie = re > 1 ? "pe-11" : re === 1 ? "pe-5" : void 0, B = !!m && p !== void 0, ae = B || r !== void 0, V = () => {
-		B ? p(j) : r?.(j);
+}, Ke = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isLink: u, cssVars: d, onExpand: f, isExpandable: p, onRemove: m, isSelected: h }) => {
+	let { clickLabel: _ = "Download attachment", expandLabel: v = "Expand pasted text", downloadLabel: b = "Download attachment", retryLabel: x = "Retry upload", removeLabel: S = "Remove attachment", openInNewTabLabel: C = "Open in new tab", sizeLabel: w, uploadingLabel: T = "Uploading", errorReasonLabels: E, genericErrorLabel: D = "Upload failed" } = o ?? {}, { typography: O, className: k } = s ?? {}, { id: A, name: j, status: M, errorReason: N } = t, P = M === a.Loading, F = M === a.Error, I = he(), L = F ? N && (E?.[N] ?? Ge[N]) || D : "", { BottomIcon: R, typeLabel: z } = Re(t), ee = !F && !P && l && !u, te = F && !!i && N !== e.UnsupportedType && N !== e.FileTooLarge, ne = Number(!!ee) + Number(!!te) + Number(!!u) + Number(!!m), re = ne > 1 ? "pe-11" : ne === 1 ? "pe-5" : void 0, B = !!p && f !== void 0, ie = B || r !== void 0, ae = () => {
+		B ? f(A) : r?.(A);
 	}, oe = (e) => {
-		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), V());
-	}, H = K(() => u ? M : Ne(M), [u, M]), se = W(() => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ae());
+	}, se = W(() => Ne(j), [j]), ce = H(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), U = c(ze, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Q.tile, !I && Q.hovered, _ && Q.selected, I && Q.tileError, Z.tile, _ && Z.tileSelected), ce = /* @__PURE__ */ J("div", {
-		title: H,
-		className: c(k?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, !I && ie, Z.tileName),
-		children: n ? /* @__PURE__ */ J(g, {
-			text: H,
+	}, [t]), le = c(ze, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Q.tile, !F && Q.hovered, h && Q.selected, F && Q.tileError, Z.tile, h && Z.tileSelected), V = /* @__PURE__ */ K("div", {
+		title: se,
+		className: c(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, !F && re, Z.tileName),
+		children: n ? /* @__PURE__ */ K(g, {
+			text: se,
 			query: n,
 			maxLines: 2
-		}) : H
-	}), le = z && /* @__PURE__ */ Y("div", {
-		className: c("flex w-full items-center gap-1", I && ie, Z.tileType),
-		children: [/* @__PURE__ */ J(z, {
+		}) : se
+	}), ue = R && /* @__PURE__ */ q("div", {
+		className: c("flex w-full items-center gap-1", F && re, Z.tileType),
+		children: [/* @__PURE__ */ K(R, {
 			size: 16,
 			className: Q.typeText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ J("span", {
-			className: c(k?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Q.typeText),
-			children: T ? `${ee} · ${T}` : ee
+		}), /* @__PURE__ */ K("span", {
+			className: c(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Q.typeText),
+			children: w ? `${z} · ${w}` : z
 		})]
-	}), ue = ae ? {
+	}), de = ie ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-label": B ? b : v,
-		onClick: V,
+		"aria-label": B ? v : _,
+		onClick: ae,
 		onKeyDown: oe
-	} : {}, de = /* @__PURE__ */ Y(he, { children: [
-		ce,
-		le,
-		F && /* @__PURE__ */ J("div", {
+	} : {}, fe = /* @__PURE__ */ q(_e, { children: [
+		V,
+		ue,
+		P && /* @__PURE__ */ K("div", {
 			role: "progressbar",
-			"aria-label": E,
+			"aria-label": T,
 			className: c("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Q.track),
-			children: /* @__PURE__ */ J(y, { size: 32 })
+			children: /* @__PURE__ */ K(y, { size: 32 })
 		}),
-		/* @__PURE__ */ Y("div", {
+		/* @__PURE__ */ q("div", {
 			className: "absolute end-1 top-1 flex gap-1",
 			children: [
-				te && /* @__PURE__ */ J(He, {
-					ariaLabel: x,
-					errorTitle: R,
-					errorDescId: L,
+				ee && /* @__PURE__ */ K(He, {
+					ariaLabel: b,
+					errorTitle: L,
+					errorDescId: I,
 					onClick: l,
-					id: j
+					id: A
 				}),
-				ne && /* @__PURE__ */ J(Ve, {
-					ariaLabel: S,
-					errorTitle: R,
-					errorDescId: L,
+				te && /* @__PURE__ */ K(Ve, {
+					ariaLabel: x,
+					errorTitle: L,
+					errorDescId: I,
 					onClick: i,
-					id: j
+					id: A
 				}),
-				d && /* @__PURE__ */ J(Ue, {
-					ariaLabel: w,
-					errorTitle: R,
-					errorDescId: L,
-					onClick: se
-				}),
-				h && /* @__PURE__ */ J(We, {
+				u && /* @__PURE__ */ K(Ue, {
 					ariaLabel: C,
-					errorTitle: R,
-					errorDescId: L,
-					onClick: h,
-					id: j
+					errorTitle: L,
+					errorDescId: I,
+					onClick: ce
+				}),
+				m && /* @__PURE__ */ K(We, {
+					ariaLabel: S,
+					errorTitle: L,
+					errorDescId: I,
+					onClick: m,
+					id: A
 				})
 			]
 		}),
-		I && /* @__PURE__ */ J("span", {
-			id: L,
+		F && /* @__PURE__ */ K("span", {
+			id: I,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: R
+			children: L
 		})
 	] });
-	return /* @__PURE__ */ J("div", {
-		style: f,
-		className: c("inline-flex", A),
-		children: /* @__PURE__ */ J("div", {
-			...ue,
-			"aria-busy": F,
-			style: f,
-			className: c(U, ae && "cursor-pointer", "focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: de
+	return /* @__PURE__ */ K("div", {
+		style: d,
+		className: c("inline-flex", k),
+		children: /* @__PURE__ */ K("div", {
+			...de,
+			"aria-busy": P,
+			style: d,
+			className: c(le, ie && "cursor-pointer", "focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: fe
 		})
 	});
 }, qe = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
 }({}), Je = ({ enabled: e, src: t }) => {
-	let n = me(null), [r, i] = q("idle");
-	return G(() => {
+	let n = ge(null), [r, i] = G("idle");
+	return U(() => {
 		i(e && t ? "loading" : "idle");
-	}, [e, t]), G(() => {
+	}, [e, t]), U(() => {
 		let r = n.current;
 		if (!r || !e || !t) return;
 		let a = () => i("loaded"), o = () => i("error");
@@ -359,7 +359,7 @@ var ge = {
 		imageLoadStatus: r
 	};
 }, Ye = ({ 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: y } = l ?? {}, { id: b, name: x } = e, S = e.previewUrl ?? e.url, C = e.type === t.Pasted && n !== void 0, { isLoading: w, isError: T, isImage: E } = K(() => Re(e), [e]), D = r !== void 0 && !C && !w && !T, O = C || D, { imageRef: k, imageLoadStatus: A } = Je({
+	let { clickLabel: d = "Open attachment", expandLabel: m = "Expand pasted text", removeLabel: h = "Remove attachment", downloadLabel: g = "Download attachment" } = i ?? {}, { className: y } = l ?? {}, { id: b, name: x } = e, S = e.previewUrl ?? e.url, C = e.type === t.Pasted && n !== void 0, { isLoading: w, isError: T, isImage: E } = W(() => Re(e), [e]), D = r !== void 0 && !C && !w && !T, O = C || D, { imageRef: k, imageLoadStatus: A } = Je({
 		enabled: E,
 		src: S
 	}), j = () => {
@@ -373,33 +373,33 @@ var ge = {
 			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j());
 		}
 	} : {};
-	return /* @__PURE__ */ J("div", {
+	return /* @__PURE__ */ K("div", {
 		className: c(ze, "group/attachment-tile", O && "cursor-pointer", Q.tile, u && Q.selected, y, Z.tile, u && Z.tileSelected),
 		...M,
 		style: o,
-		children: /* @__PURE__ */ Y("div", {
+		children: /* @__PURE__ */ q("div", {
 			className: "relative h-full w-full overflow-hidden",
 			children: [
-				/* @__PURE__ */ Y("div", {
+				/* @__PURE__ */ q("div", {
 					className: "absolute end-1 top-1 z-10 flex gap-1",
-					children: [a && /* @__PURE__ */ J(We, {
+					children: [a && /* @__PURE__ */ K(We, {
 						ariaLabel: h,
 						onClick: a,
 						id: b,
 						className: Q.imageActionButton
-					}), s && /* @__PURE__ */ J(He, {
+					}), s && /* @__PURE__ */ K(He, {
 						ariaLabel: g,
 						onClick: s,
 						id: b,
 						className: Q.imageActionButton
 					})]
 				}),
-				A !== qe.Loaded && /* @__PURE__ */ J(_, {
+				A !== qe.Loaded && /* @__PURE__ */ K(_, {
 					variant: v.Rectangular,
 					width: "100%",
 					height: "100%",
 					active: A === qe.Loading,
-					overlay: /* @__PURE__ */ J(U, {
+					overlay: /* @__PURE__ */ K(V, {
 						size: f.LG,
 						className: Q.typeText,
 						"aria-hidden": !0,
@@ -407,7 +407,7 @@ var ge = {
 					}),
 					className: "absolute inset-0 rounded-xl"
 				}),
-				/* @__PURE__ */ J("img", {
+				/* @__PURE__ */ K("img", {
 					ref: k,
 					src: S,
 					alt: x,
@@ -419,7 +419,7 @@ var ge = {
 		})
 	});
 }, Xe = ({ 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, m = p && a !== void 0, h = s({
+	let { colors: f } = u ?? {}, p = e.type === t.Pasted && a !== void 0, m = s({
 		"--ai-tile-bg": f?.background,
 		"--ai-tile-border": f?.border,
 		"--ai-tile-bg-hover": f?.backgroundHover,
@@ -435,31 +435,30 @@ var ge = {
 		"--ai-tile-hover-icon-bg": f?.hoverIconBackground,
 		"--ai-tile-hover-icon-color": f?.hoverIconColor,
 		"--ai-tile-progress-track": f?.trackBackground
-	}), { isImage: g, isLink: _ } = K(() => Re(e), [e]);
-	return g ? /* @__PURE__ */ J(Ye, {
+	}), { isImage: h, isLink: g } = W(() => Re(e), [e]);
+	return h ? /* @__PURE__ */ K(Ye, {
 		attachment: e,
 		labels: l,
 		onClick: o,
 		onExpand: a,
 		styles: u,
 		onRemove: r,
-		cssVars: h,
+		cssVars: m,
 		onDownload: c,
 		isSelected: d
-	}) : /* @__PURE__ */ J(Ke, {
+	}) : /* @__PURE__ */ K(Ke, {
 		attachment: e,
 		searchQuery: n,
 		onClick: o,
 		onRetry: i,
 		onRemove: r,
 		onDownload: c,
-		isLink: _,
-		isPasted: p,
+		isLink: g,
 		styles: u,
 		labels: l,
 		onExpand: a,
-		cssVars: h,
-		isExpandable: m,
+		cssVars: m,
+		isExpandable: p,
 		isSelected: d
 	});
 }, Ze = (e) => {
@@ -477,7 +476,7 @@ var ge = {
 			contentType: t
 		} : e;
 	});
-}, Qe = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => /* @__PURE__ */ J(r, {
+}, Qe = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => /* @__PURE__ */ K(r, {
 	language: t?.replace(/^language-/, "") ?? "",
 	value: typeof e == "string" ? e : String(e ?? ""),
 	codeClassName: n,
@@ -485,9 +484,9 @@ var ge = {
 	copyLabel: i,
 	copiedLabel: a,
 	hideDownload: !0
-}), $e = fe(({ content: e, typography: t, copyAriaLabel: n = "Copy", copiedLabel: r, tableScrollRegionAriaLabel: a, mathScrollRegionAriaLabel: o }) => {
+}), $e = 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, {
+	return /* @__PURE__ */ K(i, {
 		content: e,
 		tableScrollRegionAriaLabel: a,
 		mathScrollRegionAriaLabel: o,
@@ -507,28 +506,28 @@ var ge = {
 			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(Qe, {
+		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ K(Qe, {
 			codeClassName: i,
 			blockClassName: t?.codeBlockClassName,
 			copyAriaLabel: n,
 			copiedLabel: r,
 			children: e
-		}) : /* @__PURE__ */ J("code", {
+		}) : /* @__PURE__ */ K("code", {
 			className: c("px-1 py-0.5", t?.codeClassName ?? "dial-tiny-text rounded-md", X.codeInline),
 			children: e
 		}) }
 	});
 }), et = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
-	let r = W((t) => {
+	let r = H((t) => {
 		let r = e.find((e) => e.id === t);
 		r && n?.(r);
 	}, [e, n]);
-	return /* @__PURE__ */ J("div", {
+	return /* @__PURE__ */ K("div", {
 		role: "list",
 		className: "flex flex-wrap gap-3",
-		children: e.map((e) => /* @__PURE__ */ J("div", {
+		children: e.map((e) => /* @__PURE__ */ K("div", {
 			role: "listitem",
-			children: /* @__PURE__ */ J(Xe, {
+			children: /* @__PURE__ */ K(Xe, {
 				attachment: e,
 				onClick: n && r,
 				labels: { clickLabel: t }
@@ -536,46 +535,46 @@ var ge = {
 		}, e.id))
 	});
 }, tt = ({ 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, g = W((e) => {
+	let [f, p] = G(!1), m = l ?? f, g = H((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(() => Ze(e.attachments), [e.attachments]), { name: T, durationLabel: E } = Se(e.name), D = i ?? T, O = !i && Ce(T), k = e.status === o.Failed, A = !!e.content || !!e.attachments?.length, j = A || s != null, M = /* @__PURE__ */ Y(he, { children: [
-		/* @__PURE__ */ J("span", {
+	}, [l, u]), { copyAriaLabel: _ = "Copy stage content", codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: y, mathScrollRegionAriaLabel: b, runningAriaLabel: x, failedAriaLabel: S, attachmentClickLabel: C = "Preview search result" } = r ?? {}, w = W(() => Ze(e.attachments), [e.attachments]), { name: T, durationLabel: E } = Y(e.name), D = i ?? T, O = !i && Ce(T), k = e.status === o.Failed, A = !!e.content || !!e.attachments?.length, j = A || s != null, M = /* @__PURE__ */ q(_e, { children: [
+		/* @__PURE__ */ K("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ J(Me, {
+			children: /* @__PURE__ */ K(Me, {
 				status: e.status,
 				isLive: t,
 				runningLabel: x,
 				failedLabel: S
 			})
 		}),
-		/* @__PURE__ */ J("span", {
+		/* @__PURE__ */ K("span", {
 			className: c("min-w-0 max-w-[22rem] truncate", n?.fontClassName ?? "dial-small-text", X.stageName, k && X.stageNameFailed, O && X.monoName),
-			children: /* @__PURE__ */ J(h, { text: D || e.status || "" })
+			children: /* @__PURE__ */ K(h, { text: D || e.status || "" })
 		}),
-		e.tag && /* @__PURE__ */ J("span", {
+		e.tag && /* @__PURE__ */ K("span", {
 			className: c("flex-none", n?.tagClassName ?? "dial-tiny-lead-text", X.tag),
 			children: e.tag
 		}),
-		E && /* @__PURE__ */ J("span", {
+		E && /* @__PURE__ */ K("span", {
 			className: c("flex-none", n?.countFontClassName ?? "dial-tiny-text", X.duration),
 			children: E
 		})
 	] });
-	return j ? /* @__PURE__ */ Y(d, {
+	return j ? /* @__PURE__ */ q(d, {
 		expanded: m,
 		onToggle: g,
-		title: /* @__PURE__ */ J("span", {
+		title: /* @__PURE__ */ K("span", {
 			className: "flex min-w-0 items-center gap-2",
 			children: M
 		}),
 		className: ke,
 		headerClassName: c(Ae, X.row, X.stageHeader),
 		contentClassName: c("-mt-1 flex min-w-0 flex-col gap-3 px-0 py-1", X.stageRegion),
-		children: [m && A && /* @__PURE__ */ Y("div", {
+		children: [m && A && /* @__PURE__ */ q("div", {
 			className: "flex min-w-0 flex-col gap-3 ps-8",
-			children: [e.content && /* @__PURE__ */ J("div", {
+			children: [e.content && /* @__PURE__ */ K("div", {
 				className: "max-h-[300px] min-w-0 overflow-y-auto",
-				children: /* @__PURE__ */ J($e, {
+				children: /* @__PURE__ */ K($e, {
 					content: e.content,
 					typography: n,
 					copyAriaLabel: _,
@@ -583,19 +582,19 @@ var ge = {
 					tableScrollRegionAriaLabel: y,
 					mathScrollRegionAriaLabel: b
 				})
-			}), w.length > 0 && /* @__PURE__ */ J(et, {
+			}), w.length > 0 && /* @__PURE__ */ K(et, {
 				attachments: w,
 				clickLabel: C,
 				onAttachmentClick: a
 			})]
 		}), m && s]
-	}) : /* @__PURE__ */ J("div", {
+	}) : /* @__PURE__ */ K("div", {
 		className: c("flex w-full items-center gap-2 px-2 py-1.5", X.row),
 		children: M
 	});
 }, nt = (e) => e <= 3 ? "ps-4" : "ps-0", rt = (e) => e <= 3 ? "ps-6" : "ps-0", it = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s }) => {
 	let c = De(e.stage.index), l = t + 1;
-	return /* @__PURE__ */ J(tt, {
+	return /* @__PURE__ */ K(tt, {
 		stage: e.stage,
 		nameOverride: n,
 		isLive: r && e.stage.status == null,
@@ -604,7 +603,7 @@ var ge = {
 		onAttachmentClick: s,
 		isExpanded: i.isExpanded(c),
 		onToggle: (e) => i.onToggle(c, e),
-		childList: e.children.length > 0 ? /* @__PURE__ */ J(ot, {
+		childList: e.children.length > 0 ? /* @__PURE__ */ K(ot, {
 			nodes: e.children,
 			depth: l,
 			className: nt(l),
@@ -619,24 +618,24 @@ var ge = {
 	let { runningAriaLabel: l, failedAriaLabel: u, attemptLabel: f = (e) => `Attempt ${e}` } = a ?? {}, p = e.attempts ?? [], m = p.some((e) => e.stage.status == null), g = p.some((e) => e.stage.status === o.Failed), _ = o.Completed;
 	m ? _ = null : g && (_ = o.Failed);
 	let v = Oe(e.key), y = r.isExpanded(v), b = t + 1;
-	return /* @__PURE__ */ J(d, {
-		title: /* @__PURE__ */ Y("span", {
+	return /* @__PURE__ */ K(d, {
+		title: /* @__PURE__ */ q("span", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [
-				/* @__PURE__ */ J("span", {
+				/* @__PURE__ */ K("span", {
 					className: "flex flex-none items-center",
-					children: /* @__PURE__ */ J(Me, {
+					children: /* @__PURE__ */ K(Me, {
 						status: _,
 						isLive: n && m,
 						runningLabel: l,
 						failedLabel: u
 					})
 				}),
-				/* @__PURE__ */ J("span", {
+				/* @__PURE__ */ K("span", {
 					className: c("min-w-0 max-w-[22rem] truncate", i?.fontClassName ?? "dial-small-text", X.stageName, g && X.stageNameFailed),
-					children: /* @__PURE__ */ J(h, { text: e.name })
+					children: /* @__PURE__ */ K(h, { text: e.name })
 				}),
-				/* @__PURE__ */ Y("span", {
+				/* @__PURE__ */ q("span", {
 					className: c("flex-none", i?.countFontClassName ?? "dial-tiny-text", X.count),
 					children: ["×", p.length]
 				})
@@ -647,13 +646,13 @@ var ge = {
 		className: ke,
 		headerClassName: c(Ae, X.collapseButton, X.row, X.stageHeader),
 		contentClassName: c("-mt-2 min-w-0 px-0", rt(b), X.stageRegion),
-		children: /* @__PURE__ */ J("ul", {
+		children: /* @__PURE__ */ K("ul", {
 			role: "list",
 			className: "flex min-w-0 flex-col gap-0.5",
-			children: y && p.map((e, t) => /* @__PURE__ */ J("li", {
+			children: y && p.map((e, t) => /* @__PURE__ */ K("li", {
 				role: "listitem",
 				className: "min-w-0",
-				children: /* @__PURE__ */ J(it, {
+				children: /* @__PURE__ */ K(it, {
 					node: e,
 					depth: b,
 					nameOverride: f(t + 1),
@@ -666,17 +665,17 @@ var ge = {
 			}, e.stage.index))
 		})
 	});
-}, ot = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ J("ul", {
+}, ot = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ K("ul", {
 	role: "list",
 	className: c("flex min-w-0 flex-col gap-0.5", n),
-	children: je(e).map((e) => /* @__PURE__ */ J("li", {
+	children: je(e).map((e) => /* @__PURE__ */ K("li", {
 		role: "listitem",
 		className: "min-w-0",
-		children: e.node ? /* @__PURE__ */ J(it, {
+		children: e.node ? /* @__PURE__ */ K(it, {
 			node: e.node,
 			depth: t,
 			...r
-		}) : /* @__PURE__ */ J(at, {
+		}) : /* @__PURE__ */ K(at, {
 			row: e,
 			depth: t,
 			...r
@@ -699,11 +698,11 @@ var ge = {
 		"--cs-code-border": l?.codeBorderColor,
 		"--cs-code-text": l?.codeTextColor,
 		"--cs-border": l?.borderColor
-	}), f = K(() => Ee(e), [e]);
-	return /* @__PURE__ */ J("div", {
+	}), f = W(() => Ee(e), [e]);
+	return /* @__PURE__ */ K("div", {
 		style: d,
-		className: c("w-full min-w-0", X.panel, n, ge.panel),
-		children: /* @__PURE__ */ J(ot, {
+		className: c("w-full min-w-0", X.panel, n, J.panel),
+		children: /* @__PURE__ */ K(ot, {
 			nodes: f,
 			depth: 0,
 			className: "w-full ps-5",
@@ -715,8 +714,8 @@ var ge = {
 		})
 	});
 }, ct = (e) => {
-	let t = _e();
-	return /* @__PURE__ */ J(st, {
+	let t = ve();
+	return /* @__PURE__ */ K(st, {
 		...e,
 		expansion: t
 	});
@@ -728,16 +727,16 @@ var ge = {
 	failedText: "_failedText_16fae_40",
 	liveName: "_liveName_16fae_44"
 }, lt = ({ 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: g = "Running", copyAriaLabel: _, codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: b, mathScrollRegionAriaLabel: x, failedAriaLabel: C, attemptLabel: w, attachmentClickLabel: T } = n ?? {}, [E, D] = q(t), O = _e(), { reset: k } = O, A = e.length > 1;
-	G(() => {
+	let { executedLabel: l = "Executed", stepsLabel: u = () => "steps", failedCountLabel: m = (e) => `${e} failed`, runningAriaLabel: g = "Running", copyAriaLabel: _, codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: b, mathScrollRegionAriaLabel: x, failedAriaLabel: C, attemptLabel: w, attachmentClickLabel: T } = n ?? {}, [E, D] = G(t), O = ve(), { reset: k } = O, A = e.length > 1;
+	U(() => {
 		A && !E && k();
 	}, [
 		A,
 		E,
 		k
 	]);
-	let j = me(t);
-	G(() => {
+	let j = ge(t);
+	U(() => {
 		j.current && !t && D(!1), j.current = t;
 	}, [t]);
 	let { colors: M, panel: N } = i ?? {}, P = i?.typography ?? { fontClassName: "dial-small-text" }, F = s({
@@ -772,7 +771,7 @@ var ge = {
 		attemptLabel: w,
 		attachmentClickLabel: T
 	};
-	if (e.length === 1) return /* @__PURE__ */ J(st, {
+	if (e.length === 1) return /* @__PURE__ */ K(st, {
 		stages: e,
 		isStreaming: t,
 		expansion: O,
@@ -786,27 +785,27 @@ var ge = {
 	});
 	let L = e.some((e) => e.status === o.Failed), R;
 	if (t) {
-		let t = Se((we(e) ?? e[e.length - 1]).name).name;
-		R = /* @__PURE__ */ Y("span", {
+		let t = Y((we(e) ?? e[e.length - 1]).name).name;
+		R = /* @__PURE__ */ q("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ J("span", {
+			children: [/* @__PURE__ */ K("span", {
 				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ J(y, {
+				children: /* @__PURE__ */ K(y, {
 					size: 14,
 					ariaLabel: g
 				})
-			}), t && /* @__PURE__ */ J("span", {
+			}), t && /* @__PURE__ */ K("span", {
 				className: c("min-w-0 max-w-[22rem] truncate", P.fontClassName, $.liveName),
-				children: /* @__PURE__ */ J(h, { text: t })
+				children: /* @__PURE__ */ K(h, { text: t })
 			})]
 		});
 	} else if (L) {
 		let t = e.filter((e) => e.status === o.Failed).length;
-		R = /* @__PURE__ */ Y("span", {
+		R = /* @__PURE__ */ q("span", {
 			className: "inline-flex items-center gap-1",
-			children: [/* @__PURE__ */ Y("span", {
+			children: [/* @__PURE__ */ q("span", {
 				className: c(P.fontClassName, $.executedLabel),
 				children: [
 					l,
@@ -815,19 +814,19 @@ var ge = {
 					" ",
 					u(e.length)
 				]
-			}), /* @__PURE__ */ J("span", {
+			}), /* @__PURE__ */ K("span", {
 				className: c(P.fontClassName, $.failedText),
 				children: m(t)
 			})]
 		});
-	} else R = /* @__PURE__ */ Y("span", {
+	} else R = /* @__PURE__ */ q("span", {
 		className: "inline-flex items-center gap-1",
-		children: [/* @__PURE__ */ J(S, {
+		children: [/* @__PURE__ */ K(S, {
 			size: f.SM,
 			className: $.doneIcon,
 			"aria-hidden": !0,
 			stroke: p
-		}), /* @__PURE__ */ Y("span", {
+		}), /* @__PURE__ */ q("span", {
 			className: c(P.fontClassName, $.executedLabel),
 			children: [
 				l,
@@ -838,17 +837,17 @@ var ge = {
 			]
 		})]
 	});
-	return /* @__PURE__ */ J("div", {
+	return /* @__PURE__ */ K("div", {
 		style: F,
-		className: c("flex w-full flex-col gap-1", r, ge.group),
-		children: /* @__PURE__ */ J(d, {
+		className: c("flex w-full flex-col gap-1", r, J.group),
+		children: /* @__PURE__ */ K(d, {
 			title: R,
 			expanded: E,
 			onToggle: D,
 			className: "overflow-visible py-0",
-			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, ge.groupToggle),
+			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, J.groupToggle),
 			contentClassName: c("-mt-2 px-0", $.groupRegion),
-			children: E && /* @__PURE__ */ J(st, {
+			children: E && /* @__PURE__ */ K(st, {
 				stages: e,
 				isStreaming: t,
 				expansion: O,
@@ -864,4 +863,4 @@ var ge = {
 	});
 };
 //#endregion
-export { ge as CONVERSATION_STAGES_CLASS, lt as CollapsedGroup, ct as StagesPanel };
+export { J as CONVERSATION_STAGES_CLASS, lt as CollapsedGroup, ct 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.2.0-dev.321",
+  "version": "1.2.0-dev.323",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-attachment-input": "1.2.0-dev.321"
+    "@epam/ai-dial-attachment-input": "1.2.0-dev.323"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.321",
-    "@epam/ai-dial-ui-kit": "^0.15.0-dev.50"
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.323",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.51"
   },
   "repository": {
     "type": "git",