@epam/ai-dial-conversation-stages 1.2.0-dev.28 → 1.2.0-dev.284

package/index.js

@@ -1,42 +1,65 @@
-import { MarkdownRenderer as e, StageStatus as t, buildCssVars as n, copyToClipboard as r, mergeClasses as i } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, ElementSize as s, EllipsisTooltip as c, GhostIconButton as l, LinkButton as u, Spinner as d } from "@epam/ai-dial-ui-kit";
-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) => {
+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 ee, IconFileTypePpt as R, IconFileTypeRs as te, IconFileTypeSql as z, 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 ue, IconReload as de, IconTerminal2 as fe, IconVideo as pe, IconX as me } from "@tabler/icons-react";
+import { memo as he, useCallback as V, useEffect as H, useId as ge, useMemo as U, useRef as _e, useState as W } from "react";
+import { Fragment as ve, jsx as G, jsxs as K } from "react/jsx-runtime";
+//#region src/constants/public-class-names.ts
+var q = {
+	panel: "dial-conversation-stages-panel",
+	group: "dial-conversation-stages-group",
+	groupToggle: "dial-conversation-stages-group-toggle"
+}, ye = () => {
+	let [e, t] = W(() => /* @__PURE__ */ new Set()), n = V((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 = V(() => {
+		t((e) => e.size ? /* @__PURE__ */ new Set() : e);
+	}, []);
+	return U(() => ({
+		isExpanded: (t) => e.has(t),
+		onToggle: n,
+		reset: r
+	}), [
+		e,
+		n,
+		r
+	]);
+}, be = /[([][^()[\]]*[)\]]/g, xe = /(\d+(?:\.\d+)?)\s*s\b/, Se = /\bStart:\s*(\d{1,2}):([0-5]\d):([0-5]\d(?:\.\d+)?)\b/i, Ce = (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);
+}, we = 1440 * 60, Te = we / 2, Ee = (e) => {
+	let t = Se.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;
+}, De = (e) => {
+	be.lastIndex = 0;
 	let t;
-	for (; t = T.exec(e);) {
-		let e = t[0].slice(1, -1), n = E.exec(e);
+	for (; t = be.exec(e);) {
+		let e = t[0].slice(1, -1), n = xe.exec(e);
 		if (n) return {
 			durationLabel: `${n[1]}s`,
 			groupIndex: t.index,
 			groupLength: t[0].length,
-			startTimeSeconds: j(e)
+			startTimeSeconds: Ee(e)
 		};
 	}
-}, N = (e) => {
-	let t = e ?? "", n = M(t);
+}, J = (e) => {
+	let t = e ?? "", n = De(t);
 	return {
-		name: O(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
+		name: Ce(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) => {
+}, Oe = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), ke = (e) => e >= 60 ? `${Math.floor(e / 60)}m ${Math.round(e % 60)}s` : `${e.toFixed(1)}s`, Ae = (e) => {
 	if (!e) return;
 	let t = /^(\d+(?:\.\d+)?)s$/.exec(e);
 	return t ? parseFloat(t[1]) : void 0;
-}, L = (e) => {
+}, je = (e) => {
 	let t = e.flatMap((e) => {
-		let t = M(e ?? ""), n = I(t?.durationLabel);
+		let t = De(e ?? ""), n = Ae(t?.durationLabel);
 		return n == null ? [] : [{
 			durationSeconds: n,
 			startTimeSeconds: t?.startTimeSeconds
@@ -47,452 +70,834 @@ 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 > Te && (n += we, i += we), 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) => {
+}, Me = (e) => [...e].reverse().find((e) => e.status == null), Ne = (e, t) => {
+	let n = e.parent_stage_index;
+	if (!(n == null || !Number.isInteger(n) || n < 0 || n >= e.index)) return t.get(n);
+}, Pe = (e) => {
+	let t = e.map((e) => ({
+		stage: e,
+		children: []
+	})), n = /* @__PURE__ */ new Map();
+	for (let e of t) n.has(e.stage.index) || n.set(e.stage.index, e);
+	let r = [];
+	for (let e of t) {
+		let t = Ne(e.stage, n);
+		t ? t.children.push(e) : r.push(e);
+	}
+	return r;
+}, Fe = (e) => `stage:${e}`, Ie = (e) => `group:${e}`, Le = "min-w-0 overflow-visible py-0", Re = "min-w-0 justify-start gap-2 rounded-lg px-2 py-1.5 text-start mobile:min-h-11", ze = (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 = J(r.stage.name).name, a = n + 1;
+		for (; a < e.length && J(e[a].stage.name).name === i;) a += 1;
 		let o = e.slice(n, a);
 		o.length > 1 ? t.push({
-			key: r.index,
+			key: r.stage.index,
 			name: i,
 			attempts: o
 		}) : t.push({
-			key: r.index,
-			stage: r
+			key: r.stage.index,
+			node: r
 		}), n = a;
 	}
 	return t;
-}, V = {
-	panel: "_panel_vd48n_1",
-	row: "_row_vd48n_5",
-	collapseButton: "_collapseButton_vd48n_9",
-	stageName: "_stageName_vd48n_13",
-	stageNameFailed: "_stageNameFailed_vd48n_17",
-	monoName: "_monoName_vd48n_21",
-	tag: "_tag_vd48n_25",
-	count: "_count_vd48n_29",
-	duration: "_duration_vd48n_34",
-	iconSecondary: "_iconSecondary_vd48n_39",
-	iconCompleted: "_iconCompleted_vd48n_44",
-	iconError: "_iconError_vd48n_48",
-	stageContent: "_stageContent_vd48n_52",
-	codeBlock: "_codeBlock_vd48n_56",
-	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, {
-	size: a.MD,
-	className: V.iconError,
+}, Y = {
+	panel: "_panel_w65is_2",
+	row: "_row_w65is_6",
+	collapseButton: "_collapseButton_w65is_10",
+	stageHeader: "_stageHeader_w65is_19",
+	stageRegion: "_stageRegion_w65is_28",
+	stageName: "_stageName_w65is_32",
+	stageNameFailed: "_stageNameFailed_w65is_36",
+	monoName: "_monoName_w65is_40",
+	tag: "_tag_w65is_44",
+	count: "_count_w65is_48",
+	duration: "_duration_w65is_53",
+	iconSecondary: "_iconSecondary_w65is_58",
+	iconCompleted: "_iconCompleted_w65is_63",
+	iconError: "_iconError_w65is_67",
+	stageContent: "_stageContent_w65is_71",
+	codeBlock: "_codeBlock_w65is_75",
+	codeInline: "_codeInline_w65is_84",
+	blockquote: "_blockquote_w65is_91",
+	tableCell: "_tableCell_w65is_96"
+}, Be = ({ status: e, isLive: t, runningLabel: n = "Running", failedLabel: r = "Failed" }) => e === o.Failed ? /* @__PURE__ */ K(ve, { children: [/* @__PURE__ */ G(x, {
+	size: f.MD,
+	className: Y.iconError,
 	"aria-hidden": !0,
-	stroke: o
-}), /* @__PURE__ */ C("span", {
+	stroke: p
+}), /* @__PURE__ */ G("span", {
 	className: "sr-only",
-	children: i
-})] }) : e === t.Completed ? /* @__PURE__ */ C(p, {
-	size: a.SM,
-	className: V.iconCompleted,
+	children: r
+})] }) : e === o.Completed ? /* @__PURE__ */ G(S, {
+	size: f.SM,
+	className: Y.iconCompleted,
 	"aria-hidden": !0,
-	stroke: o
-}) : n ? /* @__PURE__ */ C(d, {
+	stroke: p
+}) : t ? /* @__PURE__ */ G(y, {
 	size: 16,
-	ariaLabel: r
-}) : null, 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);
-	}, []);
-	let m = v(() => {
-		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),
-		children: [/* @__PURE__ */ C(l, {
-			size: s.Small,
-			icon: C(u ? p : g, {
-				size: a.SM,
-				className: V.iconSecondary,
-				stroke: o
-			}),
-			"aria-label": c,
-			onClick: m,
-			className: "absolute end-2 top-2"
-		}), /* @__PURE__ */ C("code", {
-			className: t,
-			children: e
+	ariaLabel: n
+}) : null, Ve = (e) => {
+	if (e == null) return "";
+	let t = e.lastIndexOf(".");
+	return t > 0 ? e.slice(0, t) : e;
+}, He = (e) => {
+	if (!e) return E;
+	let t = u(e);
+	if (t.startsWith("image/")) switch (t) {
+		case "image/jpeg": return N;
+		case "image/png": return ee;
+		case "image/svg+xml": return ne;
+		case "image/bmp": return D;
+		default: return ue;
+	}
+	if (t.startsWith("video/")) return pe;
+	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 R;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return R;
+		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 ce;
+		case "text/csv": return k;
+		case "text/plain": return ie;
+		case "text/html":
+		case "application/xhtml+xml": return M;
+		case "application/xml": return se;
+		case "application/sql": return z;
+		case "text/javascript": return P;
+		case "text/jsx": return F;
+		case "text/typescript": return re;
+		case "text/tsx": return B;
+		case "text/css": return O;
+		case "text/x-php": return L;
+		case "text/x-rustsrc": return te;
+		case "text/x-vue": return ae;
+		default: return E;
+	}
+}, Ue = (e) => {
+	let { type: n, contentType: r } = e;
+	return n === t.Prompt ? fe : n === t.Pasted ? C : n === t.Image ? ue : He(r ?? "");
+}, We = (e) => {
+	let t = u(e), r = n[t];
+	if (r) return r;
+	let i = t.split("/")[1];
+	if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
+}, Ge = (e, n) => {
+	let { type: r, name: i, contentType: a } = e;
+	if (r === t.Prompt) return n.promptLabel ?? "Prompt";
+	if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
+	if (r === t.Image) return n.imageLabel ?? "Image";
+	if (a) {
+		let e = We(a);
+		if (e) return `.${e}`;
+	}
+	if (i == null) return "";
+	let o = i.lastIndexOf(".");
+	return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
+}, Ke = (e, n = {}) => {
+	let { type: r, status: i, previewUrl: o, url: s } = e, c = i === a.Loading, l = i === a.Error, u = r === t.Image && !!(o ?? s) && !l, d = r === t.Link && !l;
+	return {
+		isLoading: c,
+		isError: l,
+		isImage: u,
+		isLink: d,
+		BottomIcon: d ? null : Ue(e),
+		typeLabel: d ? null : Ge(e, n)
+	};
+}, qe = "flex size-[84px] items-center justify-center rounded-xl border", X = {
+	tray: "dial-ai-attachment-tray",
+	trayItem: "dial-ai-attachment-tray-item",
+	tile: "dial-ai-attachment-tile",
+	tileSelected: "dial-ai-attachment-tile-selected",
+	tileName: "dial-ai-attachment-tile-name",
+	tileType: "dial-ai-attachment-tile-type",
+	tileAction: "dial-ai-attachment-tile-action"
+}, Z = {
+	tile: "_tile_s2es2_12",
+	hovered: "_hovered_s2es2_18",
+	selected: "_selected_s2es2_28",
+	tileError: "_tileError_s2es2_33",
+	nameText: "_nameText_s2es2_38",
+	typeText: "_typeText_s2es2_42",
+	retryIcon: "_retryIcon_s2es2_46",
+	track: "_track_s2es2_50",
+	actionButton: "_actionButton_s2es2_56",
+	imageActionButton: "_imageActionButton_s2es2_60"
+}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ G(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", Z.actionButton, o, X.tileAction),
+	"aria-label": e,
+	"aria-describedby": t ? n : void 0,
+	onClick: (e) => {
+		e.stopPropagation(), r(i);
+	}
+}), Je = ({ ...e }) => /* @__PURE__ */ G(Q, {
+	icon: /* @__PURE__ */ G(de, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	className: Z.retryIcon,
+	...e
+}), Ye = ({ ...e }) => /* @__PURE__ */ G(Q, {
+	icon: /* @__PURE__ */ G(w, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), Xe = ({ ...e }) => /* @__PURE__ */ G(Q, {
+	icon: /* @__PURE__ */ G(T, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), Ze = ({ ...e }) => /* @__PURE__ */ G(Q, {
+	icon: /* @__PURE__ */ G(me, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), Qe = {
+	[e.Network]: "Upload failed · network error",
+	[e.UnsupportedType]: "Upload failed · unsupported file type",
+	[e.FileTooLarge]: "Upload failed · file too large"
+}, $e = ({ 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", retryLabel: b = "Retry upload", removeLabel: x = "Remove attachment", openInNewTabLabel: S = "Open in new tab", sizeLabel: C, uploadingLabel: w = "Uploading", errorReasonLabels: T, genericErrorLabel: E = "Upload failed" } = o ?? {}, { typography: D, className: O } = s ?? {}, { id: k, name: A, status: j, errorReason: M } = t, N = j === a.Loading, P = j === a.Error, F = ge(), I = P ? M && (T?.[M] ?? Qe[M]) || E : "", { BottomIcon: L, typeLabel: ee } = Ke(t), R = !P && !N && l && !d, te = P && !!i && M !== e.UnsupportedType && M !== e.FileTooLarge, z = Number(!!R) + Number(!!te) + Number(!!d) + Number(!!h), ne = z > 1 ? "pe-11" : z === 1 ? "pe-5" : void 0, re = (e) => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
+	}, B = U(() => u ? A : Ve(A), [u, A]), ie = V(() => {
+		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
+	}, [t]), ae = c(qe, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Z.tile, !P && Z.hovered, _ && Z.selected, P && Z.tileError, X.tile, _ && X.tileSelected), oe = /* @__PURE__ */ G("div", {
+		title: B,
+		className: c(D?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", Z.nameText, !P && ne, X.tileName),
+		children: n ? /* @__PURE__ */ G(g, {
+			text: B,
+			query: n,
+			maxLines: 2
+		}) : B
+	}), se = L && /* @__PURE__ */ K("div", {
+		className: c("flex w-full items-center gap-1", P && ne, X.tileType),
+		children: [/* @__PURE__ */ G(L, {
+			size: 16,
+			className: Z.typeText,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ G("span", {
+			className: c(D?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
+			children: C ? `${ee} · ${C}` : ee
 		})]
+	}), ce = () => {
+		m && p ? p(k) : r && r(k);
+	}, le = /* @__PURE__ */ K(ve, { children: [
+		oe,
+		se,
+		N && /* @__PURE__ */ G("div", {
+			role: "progressbar",
+			"aria-label": w,
+			className: c("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
+			children: /* @__PURE__ */ G(y, { size: 32 })
+		}),
+		/* @__PURE__ */ K("div", {
+			className: "absolute end-1 top-1 flex gap-1",
+			children: [
+				R && /* @__PURE__ */ G(Ye, {
+					ariaLabel: v,
+					errorTitle: I,
+					errorDescId: F,
+					onClick: l,
+					id: k
+				}),
+				te && /* @__PURE__ */ G(Je, {
+					ariaLabel: b,
+					errorTitle: I,
+					errorDescId: F,
+					onClick: i,
+					id: k
+				}),
+				d && /* @__PURE__ */ G(Xe, {
+					ariaLabel: S,
+					errorTitle: I,
+					errorDescId: F,
+					onClick: ie
+				}),
+				h && /* @__PURE__ */ G(Ze, {
+					ariaLabel: x,
+					errorTitle: I,
+					errorDescId: F,
+					onClick: h,
+					id: k
+				})
+			]
+		}),
+		P && /* @__PURE__ */ G("span", {
+			id: F,
+			role: "status",
+			"aria-live": "polite",
+			className: "sr-only",
+			children: I
+		})
+	] });
+	return /* @__PURE__ */ G("div", {
+		style: f,
+		className: c("inline-flex", O),
+		children: /* @__PURE__ */ G("div", {
+			role: "button",
+			tabIndex: 0,
+			"aria-label": v,
+			"aria-busy": N,
+			onClick: ce,
+			onKeyDown: re,
+			style: f,
+			className: c(ae, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: le
+		})
+	});
+}, et = /* @__PURE__ */ function(e) {
+	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
+}({}), tt = ({ enabled: e, src: t }) => {
+	let n = _e(null), [r, i] = W("idle");
+	return H(() => {
+		i(e && t ? "loading" : "idle");
+	}, [e, t]), H(() => {
+		let r = n.current;
+		if (!r || !e || !t) return;
+		let a = () => i("loaded"), o = () => i("error");
+		return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
+			r.removeEventListener("load", a), r.removeEventListener("error", o);
+		};
+	}, [e, t]), {
+		imageRef: n,
+		imageLoadStatus: r
+	};
+}, nt = ({ 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 } = U(() => Ke(e), [e]), D = r !== void 0 && !C && !w && !T, { imageRef: O, imageLoadStatus: k } = tt({
+		enabled: E,
+		src: S
+	}), A = () => {
+		C && n ? n(b) : D && r && r(b);
+	};
+	return /* @__PURE__ */ G("div", {
+		className: c(qe, "group/attachment-tile", D && "cursor-pointer", Z.tile, u && Z.selected, y, X.tile, u && X.tileSelected),
+		onClick: A,
+		onKeyDown: (e) => {
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), A());
+		},
+		tabIndex: 0,
+		role: "button",
+		style: o,
+		"aria-label": D ? d : C ? m : void 0,
+		children: /* @__PURE__ */ K("div", {
+			className: "relative h-full w-full overflow-hidden",
+			children: [
+				/* @__PURE__ */ K("div", {
+					className: "absolute end-1 top-1 z-10 flex gap-1",
+					children: [a && /* @__PURE__ */ G(Ze, {
+						ariaLabel: h,
+						onClick: a,
+						id: b,
+						className: Z.imageActionButton
+					}), s && /* @__PURE__ */ G(Ye, {
+						ariaLabel: g,
+						onClick: s,
+						id: b,
+						className: Z.imageActionButton
+					})]
+				}),
+				k !== et.Loaded && /* @__PURE__ */ G(_, {
+					variant: v.Rectangular,
+					width: "100%",
+					height: "100%",
+					active: k === et.Loading,
+					overlay: /* @__PURE__ */ G(ue, {
+						size: f.LG,
+						className: Z.typeText,
+						"aria-hidden": !0,
+						stroke: p
+					}),
+					className: "absolute inset-0 rounded-xl"
+				}),
+				/* @__PURE__ */ G("img", {
+					ref: O,
+					src: S,
+					alt: x,
+					loading: "lazy",
+					decoding: "async",
+					className: c("h-full w-full rounded-xl object-cover transition-opacity duration-200", k === et.Loaded ? "opacity-100" : "opacity-0")
+				})
+			]
+		})
 	});
-}, 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,
+}, rt = ({ 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({
+		"--ai-tile-bg": f?.background,
+		"--ai-tile-border": f?.border,
+		"--ai-tile-bg-hover": f?.backgroundHover,
+		"--ai-tile-border-hover": f?.borderHover,
+		"--ai-tile-bg-selected": f?.backgroundSelected,
+		"--ai-tile-border-selected": f?.borderSelected,
+		"--ai-tile-focus-outline": f?.focusOutline,
+		"--ai-tile-bg-error": f?.backgroundError,
+		"--ai-tile-border-error": f?.borderError,
+		"--ai-tile-error-text": f?.errorText,
+		"--ai-tile-name-text": f?.nameText,
+		"--ai-tile-type-text": f?.typeText,
+		"--ai-tile-hover-icon-bg": f?.hoverIconBackground,
+		"--ai-tile-hover-icon-color": f?.hoverIconColor,
+		"--ai-tile-progress-track": f?.trackBackground
+	}), { isImage: g, isLink: _ } = U(() => Ke(e), [e]);
+	return g ? /* @__PURE__ */ G(nt, {
+		attachment: e,
+		labels: l,
+		onClick: o,
+		onExpand: a,
+		styles: u,
+		onRemove: r,
+		cssVars: h,
+		onDownload: c,
+		isSelected: d
+	}) : /* @__PURE__ */ G($e, {
+		attachment: e,
+		searchQuery: n,
+		onClick: o,
+		onRetry: i,
+		onRemove: r,
+		onDownload: c,
+		isLink: _,
+		isPasted: p,
+		styles: u,
+		labels: l,
+		onExpand: a,
+		cssVars: h,
+		isExpandable: m,
+		isSelected: d
+	});
+}, it = (e) => {
+	let t = l(e);
+	if (!e?.length) return t;
+	let n = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let e = t.url ?? t.data ?? t.title;
+		n.has(e) || n.set(e, t.type);
+	}
+	return t.map((e) => {
+		let t = n.get(e.id);
+		return t ? {
+			...e,
+			contentType: t
+		} : e;
+	});
+}, at = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i }) => /* @__PURE__ */ G(r, {
+	language: t?.replace(/^language-/, "") ?? "",
+	value: typeof e == "string" ? e : String(e ?? ""),
+	codeClassName: n,
+	containerClassName: c(Y.codeBlock, n),
+	copyLabel: i,
+	hideDownload: !0
+}), ot = he(({ content: e, typography: t, copyAriaLabel: n = "Copy" }) => {
+	let r = "mb-1.5 last:mb-0", a = c(t?.headingClassName ?? "dial-small-semi-text", Y.stageContent, r);
+	return /* @__PURE__ */ G(i, {
+		content: e,
 		classNames: {
-			h1: o,
-			h2: o,
-			h3: o,
-			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)
+			h1: a,
+			h2: a,
+			h3: a,
+			h4: a,
+			h5: a,
+			h6: a,
+			p: c(t?.contentClassName ?? "dial-tiny-text", Y.stageContent, "mb-1.5"),
+			ul: c(t?.contentClassName ?? "dial-tiny-text", Y.stageContent, r),
+			ol: c(t?.contentClassName ?? "dial-tiny-text", Y.stageContent, r),
+			strong: c(t?.strongClassName ?? t?.contentClassName ?? "dial-tiny-text", Y.stageContent),
+			codeInline: Y.codeInline,
+			blockquote: c(t?.contentClassName ?? "dial-tiny-text", Y.blockquote, r),
+			link: c(t?.contentClassName ?? "dial-tiny-text", Y.stageContent),
+			tableCell: c(t?.contentClassName ?? "dial-tiny-text", Y.tableCell)
 		},
-		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(U, {
-			codeClassName: t,
-			blockClassName: n?.codeBlockClassName,
-			copyAriaLabel: r,
+		components: { code: ({ children: e, className: r }) => r?.includes("language-") ? /* @__PURE__ */ G(at, {
+			codeClassName: r,
+			blockClassName: t?.codeBlockClassName,
+			copyAriaLabel: n,
 			children: e
-		}) : /* @__PURE__ */ C("code", {
-			className: i("inline-block px-1.5 py-1", n?.codeClassName ?? "dial-code-text rounded-md", V.codeInline),
+		}) : /* @__PURE__ */ G("code", {
+			className: c("px-1 py-0.5", t?.codeClassName ?? "dial-tiny-text rounded-md", Y.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: [
-		/* @__PURE__ */ C("span", {
+}), st = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
+	let r = V((t) => {
+		let r = e.find((e) => e.id === t);
+		r && n?.(r);
+	}, [e, n]);
+	return /* @__PURE__ */ G("div", {
+		role: "list",
+		className: "flex flex-wrap gap-3",
+		children: e.map((e) => /* @__PURE__ */ G("div", {
+			role: "listitem",
+			children: /* @__PURE__ */ G(rt, {
+				attachment: e,
+				onClick: n && r,
+				labels: { clickLabel: t }
+			})
+		}, e.id))
+	});
+}, ct = ({ stage: e, isLive: t, typography: n, labels: r, nameOverride: i, onAttachmentClick: a, childList: s, isExpanded: l, onToggle: u }) => {
+	let [f, p] = W(!1), m = l ?? f, g = V((e) => {
+		l === void 0 && p(e), u?.(e);
+	}, [l, u]), { copyAriaLabel: _ = "Copy stage content", runningAriaLabel: v, failedAriaLabel: y, attachmentClickLabel: b = "Preview search result" } = r ?? {}, x = U(() => it(e.attachments), [e.attachments]), { name: S, durationLabel: C } = J(e.name), w = i ?? S, T = !i && Oe(S), E = e.status === o.Failed, D = !!e.content || !!e.attachments?.length, O = D || s != null, k = /* @__PURE__ */ K(ve, { children: [
+		/* @__PURE__ */ G("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ C(H, {
+			children: /* @__PURE__ */ G(Be, {
 				status: e.status,
-				isLive: n,
-				runningLabel: p,
-				failedLabel: g
+				isLive: t,
+				runningLabel: v,
+				failedLabel: y
 			})
 		}),
-		/* @__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),
-			children: /* @__PURE__ */ C(c, { text: y || e.status || "" })
+		/* @__PURE__ */ G("span", {
+			className: c("min-w-0 max-w-[22rem] truncate", n?.fontClassName ?? "dial-small-text", Y.stageName, E && Y.stageNameFailed, T && Y.monoName),
+			children: /* @__PURE__ */ G(h, { text: w || e.status || "" })
 		}),
-		e.tag && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", V.tag),
+		e.tag && /* @__PURE__ */ G("span", {
+			className: c("flex-none", n?.tagClassName ?? "dial-tiny-lead-text", Y.tag),
 			children: e.tag
 		}),
-		v && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
-			children: v
-		}),
-		E && /* @__PURE__ */ C("span", {
-			className: i("flex-none", V.iconSecondary),
-			children: u ? /* @__PURE__ */ C(m, {
-				size: a.SM,
-				"aria-hidden": !0,
-				stroke: o
-			}) : /* @__PURE__ */ C(h, {
-				size: a.SM,
-				className: "rtl:scale-x-[-1]",
-				"aria-hidden": !0,
-				stroke: o
-			})
+		C && /* @__PURE__ */ G("span", {
+			className: c("flex-none", n?.countFontClassName ?? "dial-tiny-text", Y.duration),
+			children: C
 		})
-	] }), 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: O,
-		children: /* @__PURE__ */ C("button", {
-			type: "button",
-			onClick: () => d((e) => !e),
-			"aria-expanded": u,
-			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start",
-			children: D
-		})
-	}), /* @__PURE__ */ C("div", {
-		className: i("grid overflow-hidden transition-[grid-template-rows] duration-[250ms] ease-in-out", u ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
-		children: /* @__PURE__ */ C("div", {
-			className: "overflow-hidden",
-			children: /* @__PURE__ */ C("div", {
-				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, {
-						content: e.content,
-						typography: r,
-						copyAriaLabel: f
-					})
+	] });
+	return O ? /* @__PURE__ */ K(d, {
+		expanded: m,
+		onToggle: g,
+		title: /* @__PURE__ */ G("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: k
+		}),
+		className: Le,
+		headerClassName: c(Re, Y.row, Y.stageHeader),
+		contentClassName: c("-mt-1 flex min-w-0 flex-col gap-3 px-0 py-1", Y.stageRegion),
+		children: [m && D && /* @__PURE__ */ K("div", {
+			className: "flex min-w-0 flex-col gap-3 ps-8",
+			children: [e.content && /* @__PURE__ */ G("div", {
+				className: "max-h-[300px] min-w-0 overflow-y-auto",
+				children: /* @__PURE__ */ G(ot, {
+					content: e.content,
+					typography: n,
+					copyAriaLabel: _
 				})
-			})
-		})
-	})] }) : /* @__PURE__ */ C("div", {
-		className: O,
-		children: D
+			}), x.length > 0 && /* @__PURE__ */ G(st, {
+				attachments: x,
+				clickLabel: b,
+				onAttachmentClick: a
+			})]
+		}), m && s]
+	}) : /* @__PURE__ */ G("div", {
+		className: c("flex w-full items-center gap-2 px-2 py-1.5", Y.row),
+		children: k
 	});
-}, 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;
-	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),
-		children: [
-			/* @__PURE__ */ C("span", {
-				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ C(H, {
-					status: v,
-					isLive: n,
-					runningLabel: l,
-					failedLabel: u
-				})
-			}),
-			/* @__PURE__ */ C("span", {
-				className: i("min-w-0 max-w-[22rem] truncate", r?.fontClassName ?? "dial-small-text", V.stageName, _ && V.stageNameFailed),
-				children: /* @__PURE__ */ C(c, { text: e.name })
-			}),
-			/* @__PURE__ */ w("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.count),
-				children: ["×", e.attempts?.length ?? 0]
-			}),
-			b && /* @__PURE__ */ C("span", {
-				className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", V.duration),
-				children: b
-			}),
-			/* @__PURE__ */ C("span", {
-				className: i("flex-none", V.iconSecondary),
-				children: f ? /* @__PURE__ */ C(m, {
-					size: a.SM,
-					"aria-hidden": !0,
-					stroke: o
-				}) : /* @__PURE__ */ C(h, {
-					size: a.SM,
-					className: "rtl:scale-x-[-1]",
-					"aria-hidden": !0,
-					stroke: o
-				})
-			})
-		]
-	}), /* @__PURE__ */ C("div", {
-		className: i("grid overflow-hidden transition-[grid-template-rows] duration-[250ms] ease-in-out", f ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
-		children: /* @__PURE__ */ C("div", {
-			className: "overflow-hidden",
-			children: /* @__PURE__ */ C("ul", {
-				role: "list",
-				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, {
-						stage: e,
-						nameOverride: d(t + 1),
-						isLive: n && e.status == null,
-						typography: r,
-						labels: s
+}, lt = (e) => e <= 3 ? "ps-4" : "ps-0", ut = (e) => e <= 3 ? "ps-6" : "ps-0", dt = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s }) => {
+	let c = Fe(e.stage.index), l = t + 1;
+	return /* @__PURE__ */ G(ct, {
+		stage: e.stage,
+		nameOverride: n,
+		isLive: r && e.stage.status == null,
+		typography: a,
+		labels: o,
+		onAttachmentClick: s,
+		isExpanded: i.isExpanded(c),
+		onToggle: (e) => i.onToggle(c, e),
+		childList: e.children.length > 0 ? /* @__PURE__ */ G(pt, {
+			nodes: e.children,
+			depth: l,
+			className: lt(l),
+			isStreaming: r,
+			expansion: i,
+			typography: a,
+			labels: o,
+			onAttachmentClick: s
+		}) : void 0
+	});
+}, ft = ({ row: e, depth: t, isStreaming: n, expansion: r, typography: i, labels: a, onAttachmentClick: s }) => {
+	let { runningAriaLabel: l, failedAriaLabel: u, attemptLabel: f = (e) => `Attempt ${e}` } = a ?? {}, p = e.attempts ?? [], m = p.some((e) => e.stage.status == null), g = p.some((e) => e.stage.status === o.Failed), _ = o.Completed;
+	m ? _ = null : g && (_ = o.Failed);
+	let v = je(p.map((e) => e.stage.name)), y = v > 0 ? ke(v) : void 0, b = Ie(e.key), x = r.isExpanded(b), S = t + 1;
+	return /* @__PURE__ */ G(d, {
+		title: /* @__PURE__ */ K("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [
+				/* @__PURE__ */ G("span", {
+					className: "flex flex-none items-center",
+					children: /* @__PURE__ */ G(Be, {
+						status: _,
+						isLive: n && m,
+						runningLabel: l,
+						failedLabel: u
 					})
-				}, e.index))
-			})
-		})
-	})] });
-}, 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,
-		"--cs-button-bg": s?.collapsedButtonBg,
-		"--cs-stage-text": s?.stageTextColor,
-		"--cs-failed-text": s?.failedColor,
-		"--cs-tag-text": s?.tagTextColor,
-		"--cs-count-text": s?.countTextColor,
-		"--cs-duration-text": s?.durationTextColor,
-		"--cs-icon-secondary": s?.iconSecondaryColor,
-		"--cs-icon-completed": s?.iconCompletedColor,
-		"--cs-icon-error": s?.iconErrorColor,
-		"--cs-code-bg": s?.codeBg,
-		"--cs-code-border": s?.codeBorderColor,
-		"--cs-code-text": s?.codeTextColor,
-		"--cs-border": s?.borderColor
-	}), u = B(e);
-	return /* @__PURE__ */ C("div", {
-		style: l,
-		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: u.map((e) => e.stage ? /* @__PURE__ */ C("li", {
-				role: "listitem",
-				children: /* @__PURE__ */ C(G, {
-					stage: e.stage,
-					isLive: t && e.stage.status == null,
-					typography: c,
-					labels: o
+				}),
+				/* @__PURE__ */ G("span", {
+					className: c("min-w-0 max-w-[22rem] truncate", i?.fontClassName ?? "dial-small-text", Y.stageName, g && Y.stageNameFailed),
+					children: /* @__PURE__ */ G(h, { text: e.name })
+				}),
+				/* @__PURE__ */ K("span", {
+					className: c("flex-none", i?.countFontClassName ?? "dial-tiny-text", Y.count),
+					children: ["×", p.length]
+				}),
+				y && /* @__PURE__ */ G("span", {
+					className: c("flex-none", i?.countFontClassName ?? "dial-tiny-text", Y.duration),
+					children: y
 				})
-			}, e.key) : /* @__PURE__ */ C("li", {
+			]
+		}),
+		expanded: x,
+		onToggle: (e) => r.onToggle(b, e),
+		className: Le,
+		headerClassName: c(Re, Y.collapseButton, Y.row, Y.stageHeader),
+		contentClassName: c("-mt-2 min-w-0 px-0", ut(S), Y.stageRegion),
+		children: /* @__PURE__ */ G("ul", {
+			role: "list",
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: x && p.map((e, t) => /* @__PURE__ */ G("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(K, {
-					row: e,
-					isLive: t && (e.attempts?.some((e) => e.status == null) ?? !1),
-					typography: c,
-					labels: o
+				className: "min-w-0",
+				children: /* @__PURE__ */ G(dt, {
+					node: e,
+					depth: S,
+					nameOverride: f(t + 1),
+					isStreaming: n,
+					expansion: r,
+					typography: i,
+					labels: a,
+					onAttachmentClick: s
 				})
-			}, e.key))
+			}, e.stage.index))
 		})
 	});
-}, 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"
-}, 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(() => {
-		j.current && !r && A(!1), j.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
+}, pt = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ G("ul", {
+	role: "list",
+	className: c("flex min-w-0 flex-col gap-0.5", n),
+	children: ze(e).map((e) => /* @__PURE__ */ G("li", {
+		role: "listitem",
+		className: "min-w-0",
+		children: e.node ? /* @__PURE__ */ G(dt, {
+			node: e.node,
+			depth: t,
+			...r
+		}) : /* @__PURE__ */ G(ft, {
+			row: e,
+			depth: t,
+			...r
+		})
+	}, e.key))
+}), mt = ({ stages: e, isStreaming: t, className: n, styles: r, labels: i, onAttachmentClick: a, expansion: o }) => {
+	let { colors: l, typography: u } = r ?? {}, d = s({
+		"--cs-text": l?.text,
+		"--cs-row-hover": l?.rowHoverColor,
+		"--cs-button-bg": l?.collapsedButtonBg,
+		"--cs-stage-text": l?.stageTextColor,
+		"--cs-failed-text": l?.failedColor,
+		"--cs-tag-text": l?.tagTextColor,
+		"--cs-count-text": l?.countTextColor,
+		"--cs-duration-text": l?.durationTextColor,
+		"--cs-icon-secondary": l?.iconSecondaryColor,
+		"--cs-icon-completed": l?.iconCompletedColor,
+		"--cs-icon-error": l?.iconErrorColor,
+		"--cs-code-bg": l?.codeBg,
+		"--cs-code-border": l?.codeBorderColor,
+		"--cs-code-text": l?.codeTextColor,
+		"--cs-border": l?.borderColor
+	}), f = U(() => Pe(e), [e]);
+	return /* @__PURE__ */ G("div", {
+		style: d,
+		className: c("w-full min-w-0", Y.panel, n, q.panel),
+		children: /* @__PURE__ */ G(pt, {
+			nodes: f,
+			depth: 0,
+			className: "w-full ps-5",
+			isStreaming: t,
+			expansion: o,
+			typography: u,
+			labels: i,
+			onAttachmentClick: a
+		})
+	});
+}, ht = (e) => {
+	let t = ye();
+	return /* @__PURE__ */ G(mt, {
+		...e,
+		expansion: t
+	});
+}, $ = {
+	toggleButton: "_toggleButton_1kyyc_7",
+	groupRegion: "_groupRegion_1kyyc_28",
+	executedLabel: "_executedLabel_1kyyc_32",
+	stepsCount: "_stepsCount_1kyyc_36",
+	doneIcon: "_doneIcon_1kyyc_41",
+	failedText: "_failedText_1kyyc_45",
+	liveName: "_liveName_1kyyc_49"
+}, gt = ({ 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: _, failedAriaLabel: v, attemptLabel: b, attachmentClickLabel: x } = n ?? {}, [C, w] = W(t), T = ye(), { reset: E } = T, D = e.length > 1;
+	H(() => {
+		D && !C && E();
+	}, [
+		D,
+		C,
+		E
+	]);
+	let O = _e(t);
+	H(() => {
+		O.current && !t && w(!1), O.current = t;
+	}, [t]);
+	let { colors: k, panel: A } = i ?? {}, j = i?.typography ?? { fontClassName: "dial-small-text" }, M = s({
+		"--cs-cg-label": k?.labelColor,
+		"--cs-cg-label-hover": k?.labelHoverColor,
+		"--cs-cg-steps-count": k?.stepsCountColor,
+		"--cs-cg-done": k?.doneColor,
+		"--cs-cg-failed": k?.failedColor,
+		"--cs-text": A?.text,
+		"--cs-row-hover": A?.rowHoverColor,
+		"--cs-button-bg": A?.collapsedButtonBg,
+		"--cs-stage-text": A?.stageTextColor,
+		"--cs-failed-text": A?.failedColor,
+		"--cs-tag-text": A?.tagTextColor,
+		"--cs-count-text": A?.countTextColor,
+		"--cs-duration-text": A?.durationTextColor,
+		"--cs-icon-secondary": A?.iconSecondaryColor,
+		"--cs-icon-completed": A?.iconCompletedColor,
+		"--cs-icon-error": A?.iconErrorColor,
+		"--cs-code-bg": A?.codeBg,
+		"--cs-code-border": A?.codeBorderColor,
+		"--cs-code-text": A?.codeTextColor,
+		"--cs-border": A?.borderColor
 	});
 	if (e.length === 0) return null;
-	let V = {
-		copyAriaLabel: E,
-		runningAriaLabel: T,
-		failedAriaLabel: D,
-		attemptLabel: O
+	let N = {
+		copyAriaLabel: _,
+		runningAriaLabel: g,
+		failedAriaLabel: v,
+		attemptLabel: b,
+		attachmentClickLabel: x
 	};
-	if (e.length === 1) return /* @__PURE__ */ C(q, {
+	if (e.length === 1) return /* @__PURE__ */ G(mt, {
 		stages: e,
-		isStreaming: r,
-		className: l,
+		isStreaming: t,
+		expansion: T,
+		className: r,
 		styles: {
-			colors: P,
-			typography: f?.typography
+			colors: A,
+			typography: i?.typography
 		},
-		labels: V
+		labels: N,
+		onAttachmentClick: a
 	});
-	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 = G ? z(e, G) : e.length, n = G ? N(G.name).name : "";
-		K = /* @__PURE__ */ w("span", {
+	let P = e.some((e) => e.status === o.Failed), F = je(e.map((e) => e.name)), I = F > 0 ? ke(F) : void 0, L;
+	if (t) {
+		let t = J((Me(e) ?? e[e.length - 1]).name).name;
+		L = /* @__PURE__ */ K("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
-			children: [
-				/* @__PURE__ */ C("span", {
-					className: "flex flex-none items-center",
-					children: /* @__PURE__ */ C(d, {
-						size: 14,
-						ariaLabel: T
-					})
-				}),
-				/* @__PURE__ */ C("span", {
-					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", I.fontClassName, J.executedLabel),
-					children: /* @__PURE__ */ C(c, { text: n })
+			children: [/* @__PURE__ */ G("span", {
+				className: "flex flex-none items-center",
+				children: /* @__PURE__ */ G(y, {
+					size: 14,
+					ariaLabel: g
 				})
-			]
+			}), t && /* @__PURE__ */ G("span", {
+				className: c("min-w-0 max-w-[22rem] truncate", j.fontClassName, $.liveName),
+				children: /* @__PURE__ */ G(h, { text: t })
+			})]
 		});
-	} else if (H) {
-		let n = e.filter((e) => e.status === t.Failed).length;
-		K = /* @__PURE__ */ w("span", {
+	} else if (P) {
+		let t = e.filter((e) => e.status === o.Failed).length;
+		L = /* @__PURE__ */ K("span", {
 			className: "inline-flex items-center gap-1",
 			children: [
-				/* @__PURE__ */ w("span", {
-					className: i(I.fontClassName, J.executedLabel),
+				/* @__PURE__ */ K("span", {
+					className: c(j.fontClassName, $.executedLabel),
 					children: [
-						g,
+						l,
 						" ",
 						e.length,
 						" ",
-						_(e.length)
+						u(e.length)
 					]
 				}),
-				/* @__PURE__ */ C("span", {
-					className: i(I.fontClassName, J.failedText),
-					children: v(n)
+				/* @__PURE__ */ G("span", {
+					className: c(j.fontClassName, $.failedText),
+					children: m(t)
 				}),
-				W && /* @__PURE__ */ C("span", {
-					className: i(I.fontClassName, J.stepsCount),
-					children: W
+				I && /* @__PURE__ */ G("span", {
+					className: c(j.fontClassName, $.stepsCount),
+					children: I
 				})
 			]
 		});
-	} else K = /* @__PURE__ */ w("span", {
+	} else L = /* @__PURE__ */ K("span", {
 		className: "inline-flex items-center gap-1",
 		children: [
-			/* @__PURE__ */ C(p, {
-				size: a.SM,
-				className: J.doneIcon,
+			/* @__PURE__ */ G(S, {
+				size: f.SM,
+				className: $.doneIcon,
 				"aria-hidden": !0,
-				stroke: o
+				stroke: p
 			}),
-			/* @__PURE__ */ w("span", {
-				className: i(I.fontClassName, J.executedLabel),
+			/* @__PURE__ */ K("span", {
+				className: c(j.fontClassName, $.executedLabel),
 				children: [
-					g,
+					l,
 					" ",
 					e.length,
 					" ",
-					_(e.length)
+					u(e.length)
 				]
 			}),
-			W && /* @__PURE__ */ C("span", {
-				className: i(I.fontClassName, J.stepsCount),
-				children: W
+			I && /* @__PURE__ */ G("span", {
+				className: c(j.fontClassName, $.stepsCount),
+				children: I
 			})
 		]
 	});
-	return /* @__PURE__ */ w("div", {
-		style: B,
-		className: i("flex w-full flex-col gap-1", l),
-		children: [/* @__PURE__ */ C(u, {
-			className: J.toggleButton,
-			textClassName: "min-w-0",
-			onClick: () => A((e) => !e),
-			"aria-expanded": k,
-			iconAfter: k ? /* @__PURE__ */ C(m, {
-				size: 12,
-				"aria-hidden": !0,
-				stroke: o
-			}) : /* @__PURE__ */ C(h, {
-				size: 12,
-				className: "rtl:scale-x-[-1]",
-				"aria-hidden": !0,
-				stroke: o
-			}),
-			label: K
-		}), /* @__PURE__ */ C("div", {
-			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(q, {
-					stages: e,
-					isStreaming: r,
-					styles: {
-						colors: P,
-						typography: f?.typography
-					},
-					labels: V,
-					className: "pt-1"
-				})
+	return /* @__PURE__ */ G("div", {
+		style: M,
+		className: c("flex w-full flex-col gap-1", r, q.group),
+		children: /* @__PURE__ */ G(d, {
+			title: L,
+			expanded: C,
+			onToggle: w,
+			className: "overflow-visible py-0",
+			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, q.groupToggle),
+			contentClassName: c("-mt-2 px-0", $.groupRegion),
+			children: C && /* @__PURE__ */ G(mt, {
+				stages: e,
+				isStreaming: t,
+				expansion: T,
+				styles: {
+					colors: A,
+					typography: i?.typography
+				},
+				labels: N,
+				className: "pt-1",
+				onAttachmentClick: a
 			})
-		})]
+		})
 	});
 };
 //#endregion
-export { Y as CollapsedGroup, q as StagesPanel };
+export { q as CONVERSATION_STAGES_CLASS, gt as CollapsedGroup, ht as StagesPanel };