@epam/ai-dial-conversation-stages 1.2.0-dev.48 → 1.2.0-dev.58

package/components/CollapsedGroup/CollapsedGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsedGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsedGroup/CollapsedGroup.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAUxE,gJAAgJ;AAChJ,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8OlD,CAAC"}
+{"version":3,"file":"CollapsedGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsedGroup/CollapsedGroup.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAUxE,gJAAgJ;AAChJ,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqPlD,CAAC"}

package/components/StagesPanel/StagesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/StagesPanel/StagesPanel.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AA6InC,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}
+{"version":3,"file":"StagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/StagesPanel/StagesPanel.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AA6InC,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoE5C,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,9 @@
+export declare const CONVERSATION_STAGES_CLASS: {
+    /** The stages panel root, which carries the themed CSS variables. */
+    readonly panel: "dial-conversation-stages-panel";
+    /** The root of a `CollapsedGroup`, wrapping its summary line and the panel. */
+    readonly group: "dial-conversation-stages-group";
+    /** The summary line of a `CollapsedGroup`, which expands and collapses it. */
+    readonly groupToggle: "dial-conversation-stages-group-toggle";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,yBAAyB;IACpC,qEAAqE;;IAErE,+EAA+E;;IAE/E,8EAA8E;;CAEtE,CAAC"}

package/index.d.ts

@@ -2,4 +2,5 @@ export { CollapsedGroup } from './components/CollapsedGroup/CollapsedGroup';
 export { StagesPanel } from './components/StagesPanel/StagesPanel';
 export type { CollapsedGroupColors, CollapsedGroupLabels, CollapsedGroupProps, CollapsedGroupStyles, CollapsedGroupTypography, } from './models/collapsed-group';
 export type { StagesPanelColors, StagesPanelLabels, StagesPanelProps, StagesPanelStyles, StageTypography, } from './models/stages-props';
+export { CONVERSATION_STAGES_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -3,40 +3,44 @@ import { DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, ElementSize as s, Ellip
 import { IconAlertCircle as f, IconCheck as p, IconChevronDown as m, IconChevronRight as h, IconCopy as g } from "@tabler/icons-react";
 import { memo as _, useCallback as v, useEffect as y, useRef as b, useState as x } from "react";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-//#region src/utils/stage-name.ts
-var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{1,2}):([0-5]\d):([0-5]\d(?:\.\d+)?)\b/i, O = (e) => {
+//#region src/constants/public-class-names.ts
+var T = {
+	panel: "dial-conversation-stages-panel",
+	group: "dial-conversation-stages-group",
+	groupToggle: "dial-conversation-stages-group-toggle"
+}, E = /[([][^()[\]]*[)\]]/g, D = /(\d+(?:\.\d+)?)\s*s\b/, O = /\bStart:\s*(\d{1,2}):([0-5]\d):([0-5]\d(?:\.\d+)?)\b/i, k = (e) => {
 	let t = e.trimEnd();
 	return t.endsWith(":") ? t.slice(0, -1) : t;
-}, k = 1440 * 60, A = k / 2, j = (e) => {
-	let t = D.exec(e);
+}, A = 1440 * 60, j = A / 2, M = (e) => {
+	let t = O.exec(e);
 	if (!t) return;
 	let n = Number(t[1]);
 	if (!(n > 23)) return n * 60 * 60 + Number(t[2]) * 60 + Number(t[3]);
-}, M = (e) => {
-	T.lastIndex = 0;
+}, N = (e) => {
+	E.lastIndex = 0;
 	let t;
-	for (; t = T.exec(e);) {
-		let e = t[0].slice(1, -1), n = E.exec(e);
+	for (; t = E.exec(e);) {
+		let e = t[0].slice(1, -1), n = D.exec(e);
 		if (n) return {
 			durationLabel: `${n[1]}s`,
 			groupIndex: t.index,
 			groupLength: t[0].length,
-			startTimeSeconds: j(e)
+			startTimeSeconds: M(e)
 		};
 	}
-}, N = (e) => {
-	let t = e ?? "", n = M(t);
+}, P = (e) => {
+	let t = e ?? "", n = N(t);
 	return {
-		name: O(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
+		name: k(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
 		durationLabel: n?.durationLabel
 	};
-}, P = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), F = (e) => e >= 60 ? `${Math.floor(e / 60)}m ${Math.round(e % 60)}s` : `${e.toFixed(1)}s`, I = (e) => {
+}, F = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), I = (e) => e >= 60 ? `${Math.floor(e / 60)}m ${Math.round(e % 60)}s` : `${e.toFixed(1)}s`, L = (e) => {
 	if (!e) return;
 	let t = /^(\d+(?:\.\d+)?)s$/.exec(e);
 	return t ? parseFloat(t[1]) : void 0;
-}, L = (e) => {
+}, R = (e) => {
 	let t = e.flatMap((e) => {
-		let t = M(e ?? ""), n = I(t?.durationLabel);
+		let t = N(e ?? ""), n = L(t?.durationLabel);
 		return n == null ? [] : [{
 			durationSeconds: n,
 			startTimeSeconds: t?.startTimeSeconds
@@ -47,18 +51,18 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 	let n = 0, r, i = t.flatMap(({ durationSeconds: e, startTimeSeconds: t }) => {
 		if (t == null) return [];
 		let i = t + n;
-		return r != null && r - i > A && (n += k, i += k), r = i, {
+		return r != null && r - i > j && (n += A, i += A), r = i, {
 			start: i,
 			end: i + e
 		};
 	}).sort((e, t) => e.start - t.start), a = 0, o = i[0].start, s = i[0].end;
 	for (let e of i.slice(1)) e.start <= s ? s = Math.max(s, e.end) : (a += s - o, o = e.start, s = e.end);
 	return a + s - o;
-}, R = (e) => [...e].reverse().find((e) => e.status == null), z = (e, t) => e.findIndex((e) => e.index === t.index) + 1, B = (e) => {
+}, z = (e) => [...e].reverse().find((e) => e.status == null), B = (e, t) => e.findIndex((e) => e.index === t.index) + 1, V = (e) => {
 	let t = [], n = 0;
 	for (; n < e.length;) {
-		let r = e[n], i = N(r.name).name, a = n + 1;
-		for (; a < e.length && N(e[a].name).name === i;) a += 1;
+		let r = e[n], i = P(r.name).name, a = n + 1;
+		for (; a < e.length && P(e[a].name).name === i;) a += 1;
 		let o = e.slice(n, a);
 		o.length > 1 ? t.push({
 			key: r.index,
@@ -70,7 +74,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 		}), n = a;
 	}
 	return t;
-}, V = {
+}, H = {
 	panel: "_panel_vd48n_1",
 	row: "_row_vd48n_5",
 	collapseButton: "_collapseButton_vd48n_9",
@@ -88,9 +92,9 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 	codeInline: "_codeInline_vd48n_62",
 	blockquote: "_blockquote_vd48n_68",
 	tableCell: "_tableCell_vd48n_73"
-}, H = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => e === t.Failed ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, {
+}, U = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => e === t.Failed ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, {
 	size: a.MD,
-	className: V.iconError,
+	className: H.iconError,
 	"aria-hidden": !0,
 	stroke: o
 }), /* @__PURE__ */ C("span", {
@@ -98,13 +102,13 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 	children: i
 })] }) : e === t.Completed ? /* @__PURE__ */ C(p, {
 	size: a.SM,
-	className: V.iconCompleted,
+	className: H.iconCompleted,
 	"aria-hidden": !0,
 	stroke: o
 }) : n ? /* @__PURE__ */ C(d, {
 	size: 16,
 	ariaLabel: r
-}) : null, U = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: c }) => {
+}) : null, W = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: c }) => {
 	let [u, d] = x(!1), f = b(null);
 	y(() => () => {
 		f.current != null && clearTimeout(f.current);
@@ -113,12 +117,12 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 		r(typeof e == "string" ? e : String(e ?? "")), f.current && clearTimeout(f.current), d(!0), f.current = setTimeout(() => d(!1), 2e3);
 	}, [e]);
 	return /* @__PURE__ */ w("pre", {
-		className: i("relative max-h-[300px] overflow-auto rounded border p-3", n, V.codeBlock),
+		className: i("relative max-h-[300px] overflow-auto rounded border p-3", n, H.codeBlock),
 		children: [/* @__PURE__ */ C(l, {
 			size: s.Small,
 			icon: C(u ? p : g, {
 				size: a.SM,
-				className: V.iconSecondary,
+				className: H.iconSecondary,
 				stroke: o
 			}),
 			"aria-label": c,
@@ -129,8 +133,8 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 			children: e
 		})]
 	});
-}, W = _(({ content: t, typography: n, copyAriaLabel: r = "Copy" }) => {
-	let a = "mb-1.5 last:mb-0", o = i(n?.headingClassName ?? "dial-small-semi-text", V.stageContent, a);
+}, G = _(({ content: t, typography: n, copyAriaLabel: r = "Copy" }) => {
+	let a = "mb-1.5 last:mb-0", o = i(n?.headingClassName ?? "dial-small-semi-text", H.stageContent, a);
 	return /* @__PURE__ */ C(e, {
 		content: t,
 		classNames: {
@@ -140,30 +144,30 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 			h4: o,
 			h5: o,
 			h6: o,
-			p: i(n?.contentClassName ?? "dial-tiny-text", V.stageContent, "mb-1.5"),
-			ul: i(n?.contentClassName ?? "dial-tiny-text", V.stageContent, a),
-			ol: i(n?.contentClassName ?? "dial-tiny-text", V.stageContent, a),
-			strong: i(n?.strongClassName ?? n?.contentClassName ?? "dial-tiny-text", V.stageContent),
-			codeInline: V.codeInline,
-			blockquote: i(n?.contentClassName ?? "dial-tiny-text", V.blockquote, a),
-			link: i(n?.contentClassName ?? "dial-tiny-text", V.stageContent),
-			tableCell: i(n?.contentClassName ?? "dial-tiny-text", V.tableCell)
+			p: i(n?.contentClassName ?? "dial-tiny-text", H.stageContent, "mb-1.5"),
+			ul: i(n?.contentClassName ?? "dial-tiny-text", H.stageContent, a),
+			ol: i(n?.contentClassName ?? "dial-tiny-text", H.stageContent, a),
+			strong: i(n?.strongClassName ?? n?.contentClassName ?? "dial-tiny-text", H.stageContent),
+			codeInline: H.codeInline,
+			blockquote: i(n?.contentClassName ?? "dial-tiny-text", H.blockquote, a),
+			link: i(n?.contentClassName ?? "dial-tiny-text", H.stageContent),
+			tableCell: i(n?.contentClassName ?? "dial-tiny-text", H.tableCell)
 		},
-		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(U, {
+		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(W, {
 			codeClassName: t,
 			blockClassName: n?.codeBlockClassName,
 			copyAriaLabel: r,
 			children: e
 		}) : /* @__PURE__ */ C("code", {
-			className: i("inline-block px-1.5 py-1", n?.codeClassName ?? "dial-code-text rounded-md", V.codeInline),
+			className: i("inline-block px-1.5 py-1", n?.codeClassName ?? "dial-code-text rounded-md", H.codeInline),
 			children: e
 		}) }
 	});
-}), G = ({ stage: e, isLive: n, typography: r, labels: s, nameOverride: l }) => {
-	let [u, d] = x(!1), { copyAriaLabel: f = "Copy stage content", runningAriaLabel: p, failedAriaLabel: g } = s ?? {}, { name: _, durationLabel: v } = N(e.name), y = l ?? _, b = !l && P(_), T = e.status === t.Failed, E = !!e.content, D = /* @__PURE__ */ w(S, { children: [
+}), K = ({ stage: e, isLive: n, typography: r, labels: s, nameOverride: l }) => {
+	let [u, d] = x(!1), { copyAriaLabel: f = "Copy stage content", runningAriaLabel: p, failedAriaLabel: g } = s ?? {}, { name: _, durationLabel: v } = P(e.name), y = l ?? _, b = !l && F(_), T = e.status === t.Failed, E = !!e.content, D = /* @__PURE__ */ w(S, { children: [
 		/* @__PURE__ */ C("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ C(H, {
+			children: /* @__PURE__ */ C(U, {
 				status: e.status,
 				isLive: n,
 				runningLabel: p,
@@ -171,19 +175,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 			})
 		}),
 		/* @__PURE__ */ C("span", {
-			className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", V.stageName, T && V.stageNameFailed, b && V.monoName),
+			className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", H.stageName, T && H.stageNameFailed, b && H.monoName),
 			children: /* @__PURE__ */ C(c, { text: y || e.status || "" })
 		}),
 		e.tag && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", V.tag),
+			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", H.tag),
 			children: e.tag
 		}),
 		v && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
+			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", H.duration),
 			children: v
 		}),
 		E && /* @__PURE__ */ C("span", {
-			className: i("flex-none", V.iconSecondary),
+			className: i("flex-none", H.iconSecondary),
 			children: u ? /* @__PURE__ */ C(m, {
 				size: a.SM,
 				"aria-hidden": !0,
@@ -195,7 +199,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				stroke: o
 			})
 		})
-	] }), O = i("flex w-full items-center gap-2 px-2 py-1.5", V.row);
+	] }), O = i("flex w-full items-center gap-2 px-2 py-1.5", H.row);
 	return E ? /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("div", {
 		className: O,
 		children: /* @__PURE__ */ C("button", {
@@ -213,7 +217,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				className: "mt-2 flex flex-col gap-3 py-1 ps-8",
 				children: e.content && /* @__PURE__ */ C("div", {
 					className: "max-h-[300px] overflow-y-auto",
-					children: /* @__PURE__ */ C(W, {
+					children: /* @__PURE__ */ C(G, {
 						content: e.content,
 						typography: r,
 						copyAriaLabel: f
@@ -225,17 +229,17 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 		className: O,
 		children: D
 	});
-}, K = ({ row: e, isLive: n, typography: r, labels: s }) => {
-	let { runningAriaLabel: l, failedAriaLabel: u, attemptLabel: d = (e) => `Attempt ${e}` } = s ?? {}, [f, p] = x(!1), g = e.attempts?.some((e) => e.status == null) ?? !1, _ = e.attempts?.some((e) => e.status === t.Failed), v = g ? null : _ ? t.Failed : t.Completed, y = L((e.attempts || []).map((e) => e.name)), b = y > 0 ? F(y) : void 0;
+}, q = ({ row: e, isLive: n, typography: r, labels: s }) => {
+	let { runningAriaLabel: l, failedAriaLabel: u, attemptLabel: d = (e) => `Attempt ${e}` } = s ?? {}, [f, p] = x(!1), g = e.attempts?.some((e) => e.status == null) ?? !1, _ = e.attempts?.some((e) => e.status === t.Failed), v = g ? null : _ ? t.Failed : t.Completed, y = R((e.attempts || []).map((e) => e.name)), b = y > 0 ? I(y) : void 0;
 	return /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("button", {
 		type: "button",
 		onClick: () => p((e) => !e),
 		"aria-expanded": f,
-		className: i("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start", V.collapseButton, V.row),
+		className: i("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start", H.collapseButton, H.row),
 		children: [
 			/* @__PURE__ */ C("span", {
 				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ C(H, {
+				children: /* @__PURE__ */ C(U, {
 					status: v,
 					isLive: n,
 					runningLabel: l,
@@ -243,19 +247,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				})
 			}),
 			/* @__PURE__ */ C("span", {
-				className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", V.stageName, _ && V.stageNameFailed),
+				className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", H.stageName, _ && H.stageNameFailed),
 				children: /* @__PURE__ */ C(c, { text: e.name })
 			}),
 			/* @__PURE__ */ w("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.count),
+				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", H.count),
 				children: ["×", e.attempts?.length ?? 0]
 			}),
 			b && /* @__PURE__ */ C("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
+				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", H.duration),
 				children: b
 			}),
 			/* @__PURE__ */ C("span", {
-				className: i("flex-none", V.iconSecondary),
+				className: i("flex-none", H.iconSecondary),
 				children: f ? /* @__PURE__ */ C(m, {
 					size: a.SM,
 					"aria-hidden": !0,
@@ -277,7 +281,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				className: "mt-1 flex flex-col gap-0.5 ps-6",
 				children: e.attempts?.map((e, t) => /* @__PURE__ */ C("li", {
 					role: "listitem",
-					children: /* @__PURE__ */ C(G, {
+					children: /* @__PURE__ */ C(K, {
 						stage: e,
 						nameOverride: d(t + 1),
 						isLive: n && e.status == null,
@@ -288,7 +292,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 			})
 		})
 	})] });
-}, q = ({ stages: e, isStreaming: t, className: r, styles: a, labels: o }) => {
+}, J = ({ stages: e, isStreaming: t, className: r, styles: a, labels: o }) => {
 	let { colors: s, typography: c } = a ?? {}, l = n({
 		"--cs-text": s?.text,
 		"--cs-row-hover": s?.rowHoverColor,
@@ -305,16 +309,16 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 		"--cs-code-border": s?.codeBorderColor,
 		"--cs-code-text": s?.codeTextColor,
 		"--cs-border": s?.borderColor
-	}), u = B(e);
+	}), u = V(e);
 	return /* @__PURE__ */ C("div", {
 		style: l,
-		className: i("w-full", V.panel, r),
+		className: i("w-full", H.panel, r, T.panel),
 		children: /* @__PURE__ */ C("ul", {
 			role: "list",
 			className: "flex w-full flex-col gap-0.5 ps-5",
 			children: u.map((e) => e.stage ? /* @__PURE__ */ C("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(G, {
+				children: /* @__PURE__ */ C(K, {
 					stage: e.stage,
 					isLive: t && e.stage.status == null,
 					typography: c,
@@ -322,7 +326,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				})
 			}, e.key) : /* @__PURE__ */ C("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(K, {
+				children: /* @__PURE__ */ C(q, {
 					row: e,
 					isLive: t && (e.attempts?.some((e) => e.status == null) ?? !1),
 					typography: c,
@@ -331,61 +335,61 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 			}, e.key))
 		})
 	});
-}, J = {
+}, Y = {
 	toggleButton: "_toggleButton_1sa5v_1",
 	executedLabel: "_executedLabel_1sa5v_13",
 	stepsCount: "_stepsCount_1sa5v_17",
 	doneIcon: "_doneIcon_1sa5v_22",
 	failedText: "_failedText_1sa5v_26",
 	liveName: "_liveName_1sa5v_30"
-}, Y = ({ stages: e, isStreaming: r, labels: s, className: l, styles: f }) => {
-	let { executedLabel: g = "Executed", stepsLabel: _ = () => "steps", failedCountLabel: v = (e) => `${e} failed`, runningStepLabel: S = (e, t) => `Step ${e} of ${t}`, runningAriaLabel: T = "Running", copyAriaLabel: E, failedAriaLabel: D, attemptLabel: O } = s ?? {}, [k, A] = x(r), j = b(r);
+}, X = ({ stages: e, isStreaming: r, labels: s, className: l, styles: f }) => {
+	let { executedLabel: g = "Executed", stepsLabel: _ = () => "steps", failedCountLabel: v = (e) => `${e} failed`, runningStepLabel: S = (e, t) => `Step ${e} of ${t}`, runningAriaLabel: E = "Running", copyAriaLabel: D, failedAriaLabel: O, attemptLabel: k } = s ?? {}, [A, j] = x(r), M = b(r);
 	y(() => {
-		j.current && !r && A(!1), j.current = r;
+		M.current && !r && j(!1), M.current = r;
 	}, [r]);
-	let { colors: M, panel: P } = f ?? {}, I = f?.typography ?? { fontClassName: "dial-small-text" }, B = n({
-		"--cs-cg-label": M?.labelColor,
-		"--cs-cg-label-hover": M?.labelHoverColor,
-		"--cs-cg-steps-count": M?.stepsCountColor,
-		"--cs-cg-done": M?.doneColor,
-		"--cs-cg-failed": M?.failedColor,
-		"--cs-text": P?.text,
-		"--cs-row-hover": P?.rowHoverColor,
-		"--cs-button-bg": P?.collapsedButtonBg,
-		"--cs-stage-text": P?.stageTextColor,
-		"--cs-failed-text": P?.failedColor,
-		"--cs-tag-text": P?.tagTextColor,
-		"--cs-count-text": P?.countTextColor,
-		"--cs-duration-text": P?.durationTextColor,
-		"--cs-icon-secondary": P?.iconSecondaryColor,
-		"--cs-icon-completed": P?.iconCompletedColor,
-		"--cs-icon-error": P?.iconErrorColor,
-		"--cs-code-bg": P?.codeBg,
-		"--cs-code-border": P?.codeBorderColor,
-		"--cs-code-text": P?.codeTextColor,
-		"--cs-border": P?.borderColor
+	let { colors: N, panel: F } = f ?? {}, L = f?.typography ?? { fontClassName: "dial-small-text" }, V = n({
+		"--cs-cg-label": N?.labelColor,
+		"--cs-cg-label-hover": N?.labelHoverColor,
+		"--cs-cg-steps-count": N?.stepsCountColor,
+		"--cs-cg-done": N?.doneColor,
+		"--cs-cg-failed": N?.failedColor,
+		"--cs-text": F?.text,
+		"--cs-row-hover": F?.rowHoverColor,
+		"--cs-button-bg": F?.collapsedButtonBg,
+		"--cs-stage-text": F?.stageTextColor,
+		"--cs-failed-text": F?.failedColor,
+		"--cs-tag-text": F?.tagTextColor,
+		"--cs-count-text": F?.countTextColor,
+		"--cs-duration-text": F?.durationTextColor,
+		"--cs-icon-secondary": F?.iconSecondaryColor,
+		"--cs-icon-completed": F?.iconCompletedColor,
+		"--cs-icon-error": F?.iconErrorColor,
+		"--cs-code-bg": F?.codeBg,
+		"--cs-code-border": F?.codeBorderColor,
+		"--cs-code-text": F?.codeTextColor,
+		"--cs-border": F?.borderColor
 	});
 	if (e.length === 0) return null;
-	let V = {
-		copyAriaLabel: E,
-		runningAriaLabel: T,
-		failedAriaLabel: D,
-		attemptLabel: O
+	let H = {
+		copyAriaLabel: D,
+		runningAriaLabel: E,
+		failedAriaLabel: O,
+		attemptLabel: k
 	};
-	if (e.length === 1) return /* @__PURE__ */ C(q, {
+	if (e.length === 1) return /* @__PURE__ */ C(J, {
 		stages: e,
 		isStreaming: r,
 		className: l,
 		styles: {
-			colors: P,
+			colors: F,
 			typography: f?.typography
 		},
-		labels: V
+		labels: H
 	});
-	let H = e.some((e) => e.status === t.Failed), U = L(e.map((e) => e.name)), W = U > 0 ? F(U) : void 0, G = r ? R(e) : void 0, K;
+	let U = e.some((e) => e.status === t.Failed), W = R(e.map((e) => e.name)), G = W > 0 ? I(W) : void 0, K = r ? z(e) : void 0, q;
 	if (r) {
-		let t = G ? z(e, G) : e.length, n = G ? N(G.name).name : "";
-		K = /* @__PURE__ */ w("span", {
+		let t = K ? B(e, K) : e.length, n = K ? P(K.name).name : "";
+		q = /* @__PURE__ */ w("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
@@ -394,26 +398,26 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 					className: "flex flex-none items-center",
 					children: /* @__PURE__ */ C(d, {
 						size: 14,
-						ariaLabel: T
+						ariaLabel: E
 					})
 				}),
 				/* @__PURE__ */ C("span", {
-					className: i("flex-none whitespace-nowrap", I.fontClassName, J.liveName),
+					className: i("flex-none whitespace-nowrap", L.fontClassName, Y.liveName),
 					children: S(t, e.length)
 				}),
 				n && /* @__PURE__ */ C("span", {
-					className: i("min-w-0 max-w-[22rem] truncate", I.fontClassName, J.executedLabel),
+					className: i("min-w-0 max-w-[22rem] truncate", L.fontClassName, Y.executedLabel),
 					children: /* @__PURE__ */ C(c, { text: n })
 				})
 			]
 		});
-	} else if (H) {
+	} else if (U) {
 		let n = e.filter((e) => e.status === t.Failed).length;
-		K = /* @__PURE__ */ w("span", {
+		q = /* @__PURE__ */ w("span", {
 			className: "inline-flex items-center gap-1",
 			children: [
 				/* @__PURE__ */ w("span", {
-					className: i(I.fontClassName, J.executedLabel),
+					className: i(L.fontClassName, Y.executedLabel),
 					children: [
 						g,
 						" ",
@@ -423,26 +427,26 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 					]
 				}),
 				/* @__PURE__ */ C("span", {
-					className: i(I.fontClassName, J.failedText),
+					className: i(L.fontClassName, Y.failedText),
 					children: v(n)
 				}),
-				W && /* @__PURE__ */ C("span", {
-					className: i(I.fontClassName, J.stepsCount),
-					children: W
+				G && /* @__PURE__ */ C("span", {
+					className: i(L.fontClassName, Y.stepsCount),
+					children: G
 				})
 			]
 		});
-	} else K = /* @__PURE__ */ w("span", {
+	} else q = /* @__PURE__ */ w("span", {
 		className: "inline-flex items-center gap-1",
 		children: [
 			/* @__PURE__ */ C(p, {
 				size: a.SM,
-				className: J.doneIcon,
+				className: Y.doneIcon,
 				"aria-hidden": !0,
 				stroke: o
 			}),
 			/* @__PURE__ */ w("span", {
-				className: i(I.fontClassName, J.executedLabel),
+				className: i(L.fontClassName, Y.executedLabel),
 				children: [
 					g,
 					" ",
@@ -451,21 +455,21 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 					_(e.length)
 				]
 			}),
-			W && /* @__PURE__ */ C("span", {
-				className: i(I.fontClassName, J.stepsCount),
-				children: W
+			G && /* @__PURE__ */ C("span", {
+				className: i(L.fontClassName, Y.stepsCount),
+				children: G
 			})
 		]
 	});
 	return /* @__PURE__ */ w("div", {
-		style: B,
-		className: i("flex w-full flex-col gap-1", l),
+		style: V,
+		className: i("flex w-full flex-col gap-1", l, T.group),
 		children: [/* @__PURE__ */ C(u, {
-			className: J.toggleButton,
+			className: i(Y.toggleButton, T.groupToggle),
 			textClassName: "min-w-0",
-			onClick: () => A((e) => !e),
-			"aria-expanded": k,
-			iconAfter: k ? /* @__PURE__ */ C(m, {
+			onClick: () => j((e) => !e),
+			"aria-expanded": A,
+			iconAfter: A ? /* @__PURE__ */ C(m, {
 				size: 12,
 				"aria-hidden": !0,
 				stroke: o
@@ -475,19 +479,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 				"aria-hidden": !0,
 				stroke: o
 			}),
-			label: K
+			label: q
 		}), /* @__PURE__ */ C("div", {
-			className: i("grid transition-[grid-template-rows] duration-300 ease-in-out", k ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			className: i("grid transition-[grid-template-rows] duration-300 ease-in-out", A ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
 			children: /* @__PURE__ */ C("div", {
 				className: "overflow-hidden",
-				children: /* @__PURE__ */ C(q, {
+				children: /* @__PURE__ */ C(J, {
 					stages: e,
 					isStreaming: r,
 					styles: {
-						colors: P,
+						colors: F,
 						typography: f?.typography
 					},
-					labels: V,
+					labels: H,
 					className: "pt-1"
 				})
 			})
@@ -495,4 +499,4 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /\bStart:\s*(\d{
 	});
 };
 //#endregion
-export { Y as CollapsedGroup, q as StagesPanel };
+export { T as CONVERSATION_STAGES_CLASS, X as CollapsedGroup, J 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.48",
+  "version": "1.2.0-dev.58",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -21,8 +21,8 @@
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.48",
-    "@epam/ai-dial-ui-kit": "^0.15.0-dev.7"
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.58",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9"
   },
   "repository": {
     "type": "git",