@epam/ai-dial-conversation-stages 1.0.4 → 1.0.6

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,CA+OlD,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;AACxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAUxE,gJAAgJ;AAChJ,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8OlD,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;AA8InC,+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;AAErC,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AA4InC,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}

package/index.js

@@ -4,30 +4,58 @@ import { IconAlertCircle as f, IconCheck as p, IconChevronDown as m, IconChevron
 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 = /:\s*$/, O = (e) => {
-	let t = e ?? "";
+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 = /:\s*$/, k = 1440 * 60, A = k / 2, j = (e) => {
+	let t = D.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;
-	let n, r = null, i = -1, a = 0;
-	for (; n = T.exec(t);) {
-		let e = n[0].slice(1, -1), t = E.exec(e);
-		if (t) {
-			r = t, i = n.index, a = n[0].length;
-			break;
-		}
+	let t;
+	for (; t = T.exec(e);) {
+		let e = t[0].slice(1, -1), n = E.exec(e);
+		if (n) return {
+			durationLabel: `${n[1]}s`,
+			groupIndex: t.index,
+			groupLength: t[0].length,
+			startTimeSeconds: j(e)
+		};
 	}
+}, N = (e) => {
+	let t = e ?? "", n = M(t);
 	return {
-		name: (r && i >= 0 ? t.slice(0, i) + t.slice(i + a) : t).replace(D, "").trim().replace(/ {2,}/g, " "),
-		durationLabel: r ? `${r[1]}s` : void 0
+		name: (n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).replace(O, "").trim().replace(/ {2,}/g, " "),
+		durationLabel: n?.durationLabel
 	};
-}, k = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), A = (e) => e >= 60 ? `${Math.floor(e / 60)}m ${Math.round(e % 60)}s` : `${e.toFixed(1)}s`, j = (e) => {
+}, 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) => {
 	if (!e) return;
 	let t = /^(\d+(?:\.\d+)?)s$/.exec(e);
 	return t ? parseFloat(t[1]) : void 0;
-}, M = (e) => [...e].reverse().find((e) => e.status == null), N = (e, t) => e.findIndex((e) => e.index === t.index) + 1, P = (e) => {
+}, L = (e) => {
+	let t = e.flatMap((e) => {
+		let t = M(e ?? ""), n = I(t?.durationLabel);
+		return n == null ? [] : [{
+			durationSeconds: n,
+			startTimeSeconds: t?.startTimeSeconds
+		}];
+	});
+	if (t.length === 0) return 0;
+	if (t.some(({ startTimeSeconds: e }) => e == null)) return t.reduce((e, { durationSeconds: t }) => e + t, 0);
+	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, {
+			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) => {
 	let t = [], n = 0;
 	for (; n < e.length;) {
-		let r = e[n], i = O(r.name).name, a = n + 1;
-		for (; a < e.length && O(e[a].name).name === i;) a += 1;
+		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 o = e.slice(n, a);
 		o.length > 1 ? t.push({
 			key: r.index,
@@ -39,7 +67,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 		}), n = a;
 	}
 	return t;
-}, F = {
+}, V = {
 	panel: "_panel_vd48n_1",
 	row: "_row_vd48n_5",
 	collapseButton: "_collapseButton_vd48n_9",
@@ -57,12 +85,12 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 	codeInline: "_codeInline_vd48n_62",
 	blockquote: "_blockquote_vd48n_68",
 	tableCell: "_tableCell_vd48n_73"
-}, I = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => n ? /* @__PURE__ */ C(d, {
+}, H = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => n ? /* @__PURE__ */ C(d, {
 	size: 16,
 	ariaLabel: r
 }) : e === t.Failed ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, {
 	size: a.MD,
-	className: F.iconError,
+	className: V.iconError,
 	"aria-hidden": !0,
 	stroke: o
 }), /* @__PURE__ */ C("span", {
@@ -70,10 +98,10 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 	children: i
 })] }) : /* @__PURE__ */ C(p, {
 	size: a.SM,
-	className: F.iconCompleted,
+	className: V.iconCompleted,
 	"aria-hidden": !0,
 	stroke: o
-}), L = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: c }) => {
+}), U = ({ 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);
@@ -82,12 +110,12 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 		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, F.codeBlock),
+		className: i("relative max-h-[300px] overflow-auto rounded border p-3", n, V.codeBlock),
 		children: [/* @__PURE__ */ C(l, {
 			size: s.Small,
 			icon: C(u ? p : g, {
 				size: a.SM,
-				className: F.iconSecondary,
+				className: V.iconSecondary,
 				stroke: o
 			}),
 			"aria-label": c,
@@ -98,8 +126,8 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			children: e
 		})]
 	});
-}, R = _(({ content: t, typography: n, copyAriaLabel: r = "Copy" }) => {
-	let a = "mb-1.5 last:mb-0", o = i(n?.headingClassName ?? "dial-small-semi-text", F.stageContent, a);
+}, 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);
 	return /* @__PURE__ */ C(e, {
 		content: t,
 		classNames: {
@@ -109,30 +137,30 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			h4: o,
 			h5: o,
 			h6: o,
-			p: i(n?.contentClassName ?? "dial-tiny-text", F.stageContent, "mb-1.5"),
-			ul: i(n?.contentClassName ?? "dial-tiny-text", F.stageContent, a),
-			ol: i(n?.contentClassName ?? "dial-tiny-text", F.stageContent, a),
-			strong: i(n?.strongClassName ?? n?.contentClassName ?? "dial-tiny-text", F.stageContent),
-			codeInline: F.codeInline,
-			blockquote: i(n?.contentClassName ?? "dial-tiny-text", F.blockquote, a),
-			link: i(n?.contentClassName ?? "dial-tiny-text", F.stageContent),
-			tableCell: i(n?.contentClassName ?? "dial-tiny-text", F.tableCell)
+			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)
 		},
-		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(L, {
+		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(U, {
 			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", F.codeInline),
+			className: i("inline-block px-1.5 py-1", n?.codeClassName ?? "dial-code-text rounded-md", V.codeInline),
 			children: e
 		}) }
 	});
-}), z = ({ 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 } = O(e.name), y = l ?? _, b = !l && k(_), T = e.status === t.Failed, E = !!e.content, D = /* @__PURE__ */ w(S, { children: [
+}), 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: [
 		/* @__PURE__ */ C("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ C(I, {
+			children: /* @__PURE__ */ C(H, {
 				status: e.status,
 				isLive: n,
 				runningLabel: p,
@@ -140,19 +168,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			})
 		}),
 		/* @__PURE__ */ C("span", {
-			className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", F.stageName, T && F.stageNameFailed, b && F.monoName),
+			className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", V.stageName, T && V.stageNameFailed, b && V.monoName),
 			children: /* @__PURE__ */ C(c, { text: y || e.status || "" })
 		}),
 		e.tag && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", F.tag),
+			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", V.tag),
 			children: e.tag
 		}),
 		v && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", F.duration),
+			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
 			children: v
 		}),
 		E && /* @__PURE__ */ C("span", {
-			className: i("flex-none", F.iconSecondary),
+			className: i("flex-none", V.iconSecondary),
 			children: u ? /* @__PURE__ */ C(m, {
 				size: a.SM,
 				"aria-hidden": !0,
@@ -164,9 +192,9 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				stroke: o
 			})
 		})
-	] }), A = i("flex w-full items-center gap-2 px-2 py-1.5", F.row);
+	] }), O = i("flex w-full items-center gap-2 px-2 py-1.5", V.row);
 	return E ? /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("div", {
-		className: A,
+		className: O,
 		children: /* @__PURE__ */ C("button", {
 			type: "button",
 			onClick: () => d((e) => !e),
@@ -182,7 +210,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				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(R, {
+					children: /* @__PURE__ */ C(W, {
 						content: e.content,
 						typography: r,
 						copyAriaLabel: f
@@ -191,23 +219,20 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			})
 		})
 	})] }) : /* @__PURE__ */ C("div", {
-		className: A,
+		className: O,
 		children: D
 	});
-}, B = ({ 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 === t.Failed), _ = (e.attempts || []).reduce((e, t) => {
-		let { durationLabel: n } = O(t.name);
-		return e + (j(n) ?? 0);
-	}, 0), v = _ > 0 ? A(_) : void 0;
+}, 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 === t.Failed), _ = L((e.attempts || []).map((e) => e.name)), v = _ > 0 ? F(_) : 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", F.collapseButton, F.row),
+		className: i("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start", V.collapseButton, V.row),
 		children: [
 			/* @__PURE__ */ C("span", {
 				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ C(I, {
+				children: /* @__PURE__ */ C(H, {
 					status: g ? t.Failed : t.Completed,
 					isLive: n,
 					runningLabel: l,
@@ -215,19 +240,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				})
 			}),
 			/* @__PURE__ */ C("span", {
-				className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", F.stageName, g && F.stageNameFailed),
+				className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", V.stageName, g && V.stageNameFailed),
 				children: /* @__PURE__ */ C(c, { text: e.name })
 			}),
 			/* @__PURE__ */ w("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", F.count),
+				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.count),
 				children: ["×", e.attempts?.length ?? 0]
 			}),
 			v && /* @__PURE__ */ C("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", F.duration),
+				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
 				children: v
 			}),
 			/* @__PURE__ */ C("span", {
-				className: i("flex-none", F.iconSecondary),
+				className: i("flex-none", V.iconSecondary),
 				children: f ? /* @__PURE__ */ C(m, {
 					size: a.SM,
 					"aria-hidden": !0,
@@ -249,7 +274,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				className: "mt-1 flex flex-col gap-0.5 ps-6",
 				children: e.attempts?.map((t, i) => /* @__PURE__ */ C("li", {
 					role: "listitem",
-					children: /* @__PURE__ */ C(z, {
+					children: /* @__PURE__ */ C(G, {
 						stage: t,
 						nameOverride: d(i + 1),
 						isLive: n && t.index === e.attempts?.[e.attempts.length - 1]?.index,
@@ -260,7 +285,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			})
 		})
 	})] });
-}, V = ({ stages: e, isStreaming: t, className: r, styles: a, labels: o }) => {
+}, q = ({ 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,
@@ -277,16 +302,16 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 		"--cs-code-border": s?.codeBorderColor,
 		"--cs-code-text": s?.codeTextColor,
 		"--cs-border": s?.borderColor
-	}), u = t ? M(e) : void 0, d = P(e);
+	}), u = t ? R(e) : void 0, d = B(e);
 	return /* @__PURE__ */ C("div", {
 		style: l,
-		className: i("w-full", F.panel, r),
+		className: i("w-full", V.panel, r),
 		children: /* @__PURE__ */ C("ul", {
 			role: "list",
 			className: "flex w-full flex-col gap-0.5 ps-5",
 			children: d.map((e) => e.stage ? /* @__PURE__ */ C("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(z, {
+				children: /* @__PURE__ */ C(G, {
 					stage: e.stage,
 					isLive: u?.index === e.stage.index,
 					typography: c,
@@ -294,7 +319,7 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				})
 			}, e.key) : /* @__PURE__ */ C("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(B, {
+				children: /* @__PURE__ */ C(K, {
 					row: e,
 					isLive: u?.index === e.attempts?.[e.attempts.length - 1].index,
 					typography: c,
@@ -303,64 +328,61 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 			}, e.key))
 		})
 	});
-}, H = {
+}, J = {
 	toggleButton: "_toggleButton_1sa5v_1",
 	executedLabel: "_executedLabel_1sa5v_13",
 	stepsCount: "_stepsCount_1sa5v_17",
 	doneIcon: "_doneIcon_1sa5v_22",
 	failedText: "_failedText_1sa5v_26",
 	liveName: "_liveName_1sa5v_30"
-}, U = ({ 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: k } = s ?? {}, [P, F] = x(r), I = b(r);
+}, 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);
 	y(() => {
-		I.current && !r && F(!1), I.current = r;
+		j.current && !r && A(!1), j.current = r;
 	}, [r]);
-	let { colors: L, panel: R } = f ?? {}, z = f?.typography ?? { fontClassName: "dial-small-text" }, B = n({
-		"--cs-cg-label": L?.labelColor,
-		"--cs-cg-label-hover": L?.labelHoverColor,
-		"--cs-cg-steps-count": L?.stepsCountColor,
-		"--cs-cg-done": L?.doneColor,
-		"--cs-cg-failed": L?.failedColor,
-		"--cs-text": R?.text,
-		"--cs-row-hover": R?.rowHoverColor,
-		"--cs-button-bg": R?.collapsedButtonBg,
-		"--cs-stage-text": R?.stageTextColor,
-		"--cs-failed-text": R?.failedColor,
-		"--cs-tag-text": R?.tagTextColor,
-		"--cs-count-text": R?.countTextColor,
-		"--cs-duration-text": R?.durationTextColor,
-		"--cs-icon-secondary": R?.iconSecondaryColor,
-		"--cs-icon-completed": R?.iconCompletedColor,
-		"--cs-icon-error": R?.iconErrorColor,
-		"--cs-code-bg": R?.codeBg,
-		"--cs-code-border": R?.codeBorderColor,
-		"--cs-code-text": R?.codeTextColor,
-		"--cs-border": R?.borderColor
+	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
 	});
 	if (e.length === 0) return null;
-	let U = {
+	let V = {
 		copyAriaLabel: E,
 		runningAriaLabel: T,
 		failedAriaLabel: D,
-		attemptLabel: k
+		attemptLabel: O
 	};
-	if (e.length === 1) return /* @__PURE__ */ C(V, {
+	if (e.length === 1) return /* @__PURE__ */ C(q, {
 		stages: e,
 		isStreaming: r,
 		className: l,
 		styles: {
-			colors: R,
+			colors: P,
 			typography: f?.typography
 		},
-		labels: U
+		labels: V
 	});
-	let W = e.some((e) => e.status === t.Failed), G = e.reduce((e, t) => {
-		let { durationLabel: n } = O(t.name);
-		return e + (j(n) ?? 0);
-	}, 0), K = G > 0 ? A(G) : void 0, q = r ? M(e) : void 0, J;
+	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;
 	if (r) {
-		let t = q ? N(e, q) : e.length, n = q ? O(q.name).name : "";
-		J = /* @__PURE__ */ w("span", {
+		let t = G ? z(e, G) : e.length, n = G ? N(G.name).name : "";
+		K = /* @__PURE__ */ w("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
@@ -373,22 +395,22 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 					})
 				}),
 				/* @__PURE__ */ C("span", {
-					className: i("flex-none whitespace-nowrap", z.fontClassName, H.liveName),
+					className: i("flex-none whitespace-nowrap", I.fontClassName, J.liveName),
 					children: S(t, e.length)
 				}),
 				n && /* @__PURE__ */ C("span", {
-					className: i("min-w-0 max-w-[22rem] truncate", z.fontClassName, H.executedLabel),
+					className: i("min-w-0 max-w-[22rem] truncate", I.fontClassName, J.executedLabel),
 					children: /* @__PURE__ */ C(c, { text: n })
 				})
 			]
 		});
-	} else if (W) {
+	} else if (H) {
 		let n = e.filter((e) => e.status === t.Failed).length;
-		J = /* @__PURE__ */ w("span", {
+		K = /* @__PURE__ */ w("span", {
 			className: "inline-flex items-center gap-1",
 			children: [
 				/* @__PURE__ */ w("span", {
-					className: i(z.fontClassName, H.executedLabel),
+					className: i(I.fontClassName, J.executedLabel),
 					children: [
 						g,
 						" ",
@@ -398,26 +420,26 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 					]
 				}),
 				/* @__PURE__ */ C("span", {
-					className: i(z.fontClassName, H.failedText),
+					className: i(I.fontClassName, J.failedText),
 					children: v(n)
 				}),
-				K && /* @__PURE__ */ C("span", {
-					className: i(z.fontClassName, H.stepsCount),
-					children: K
+				W && /* @__PURE__ */ C("span", {
+					className: i(I.fontClassName, J.stepsCount),
+					children: W
 				})
 			]
 		});
-	} else J = /* @__PURE__ */ w("span", {
+	} else K = /* @__PURE__ */ w("span", {
 		className: "inline-flex items-center gap-1",
 		children: [
 			/* @__PURE__ */ C(p, {
 				size: a.SM,
-				className: H.doneIcon,
+				className: J.doneIcon,
 				"aria-hidden": !0,
 				stroke: o
 			}),
 			/* @__PURE__ */ w("span", {
-				className: i(z.fontClassName, H.executedLabel),
+				className: i(I.fontClassName, J.executedLabel),
 				children: [
 					g,
 					" ",
@@ -426,9 +448,9 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 					_(e.length)
 				]
 			}),
-			K && /* @__PURE__ */ C("span", {
-				className: i(z.fontClassName, H.stepsCount),
-				children: K
+			W && /* @__PURE__ */ C("span", {
+				className: i(I.fontClassName, J.stepsCount),
+				children: W
 			})
 		]
 	});
@@ -436,11 +458,11 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 		style: B,
 		className: i("flex w-full flex-col gap-1", l),
 		children: [/* @__PURE__ */ C(u, {
-			className: H.toggleButton,
+			className: J.toggleButton,
 			textClassName: "min-w-0",
-			onClick: () => F((e) => !e),
-			"aria-expanded": P,
-			iconAfter: P ? /* @__PURE__ */ C(m, {
+			onClick: () => A((e) => !e),
+			"aria-expanded": k,
+			iconAfter: k ? /* @__PURE__ */ C(m, {
 				size: 12,
 				"aria-hidden": !0,
 				stroke: o
@@ -450,19 +472,19 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 				"aria-hidden": !0,
 				stroke: o
 			}),
-			label: J
+			label: K
 		}), /* @__PURE__ */ C("div", {
-			className: i("grid transition-[grid-template-rows] duration-300 ease-in-out", P ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			className: i("grid transition-[grid-template-rows] duration-300 ease-in-out", k ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
 			children: /* @__PURE__ */ C("div", {
 				className: "overflow-hidden",
-				children: /* @__PURE__ */ C(V, {
+				children: /* @__PURE__ */ C(q, {
 					stages: e,
 					isStreaming: r,
 					styles: {
-						colors: R,
+						colors: P,
 						typography: f?.typography
 					},
-					labels: U,
+					labels: V,
 					className: "pt-1"
 				})
 			})
@@ -470,4 +492,4 @@ var T = /[([][^()[\]]*[)\]]/g, E = /(\d+(?:\.\d+)?)\s*s\b/, D = /:\s*$/, O = (e)
 	});
 };
 //#endregion
-export { U as CollapsedGroup, V as StagesPanel };
+export { Y as CollapsedGroup, q 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.0.4",
+  "version": "1.0.6",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.0.4",
+    "@epam/ai-dial-chat-shared": "1.0.6",
     "@epam/ai-dial-ui-kit": "^0.14.0-dev.15"
   },
   "repository": {

package/utils/stage-name.d.ts

@@ -13,5 +13,7 @@ export declare const isIdentifierLike: (name: string) => boolean;
 export declare const formatTotalDuration: (totalSeconds: number) => string;
 /** Parses a duration label produced by {@link cleanStageName} (e.g. `'3.99s'`) back into seconds. */
 export declare const parseDurationSeconds: (durationLabel: string | undefined) => number | undefined;
+/** Returns the elapsed duration represented by stage names, without double-counting overlapping timed stages. */
+export declare const calculateStagesDurationSeconds: (stageNames: string[]) => number;
 export {};
 //# sourceMappingURL=stage-name.d.ts.map

package/utils/stage-name.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stage-name.d.ts","sourceRoot":"","sources":["../../src/utils/stage-name.ts"],"names":[],"mappings":"AAeA,+DAA+D;AAC/D,UAAU,gBAAgB;IACxB,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,0HAA0H;AAC1H,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,gBAkChD,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,OACW,CAAC;AAE5D,wFAAwF;AACxF,eAAO,MAAM,mBAAmB,GAAI,cAAc,MAAM,KAAG,MAO1D,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,GAC/B,eAAe,MAAM,GAAG,SAAS,KAChC,MAAM,GAAG,SAIX,CAAC"}
+{"version":3,"file":"stage-name.d.ts","sourceRoot":"","sources":["../../src/utils/stage-name.ts"],"names":[],"mappings":"AA6BA,+DAA+D;AAC/D,UAAU,gBAAgB;IACxB,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkCD,0HAA0H;AAC1H,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,gBAkBhD,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,OACW,CAAC;AAE5D,wFAAwF;AACxF,eAAO,MAAM,mBAAmB,GAAI,cAAc,MAAM,KAAG,MAO1D,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,GAC/B,eAAe,MAAM,GAAG,SAAS,KAChC,MAAM,GAAG,SAIX,CAAC;AAEF,iHAAiH;AACjH,eAAO,MAAM,8BAA8B,GACzC,YAAY,MAAM,EAAE,KACnB,MA2DF,CAAC"}