@epam/ai-dial-conversation-stages 1.2.0-dev.99 → 1.2.0-rc.0

package/index.js

@@ -1,502 +1,866 @@
-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";
+import { AttachmentErrorReason as e, AttachmentType as t, MIME_TYPE_EXT_MAP as n, MarkdownCodeBlock as r, MarkdownRenderer as i, RequestStatus as a, StageStatus as o, buildCssVars as s, mergeClasses as c, messageAttachmentsToDisplayAttachments as l, normalizeMimeType as u } from "@epam/ai-dial-chat-shared";
+import { Accordion as d, DIAL_ICON_SIZE as f, DIAL_KIT_ICON_STROKE as p, ElementSize as m, EllipsisTooltip as h, Highlight as g, Skeleton as _, SkeletonVariant as v, Spinner as y, StaticIconButton as b } from "@epam/ai-dial-ui-kit";
+import { IconAlertCircle as x, IconCheck as S, IconClipboard as C, IconDownload as w, IconExternalLink as T, IconFile as E, IconFileTypeBmp as D, IconFileTypeCss as O, IconFileTypeCsv as k, IconFileTypeDoc as A, IconFileTypeDocx as j, IconFileTypeHtml as M, IconFileTypeJpg as N, IconFileTypeJs as P, IconFileTypeJsx as F, IconFileTypePdf as I, IconFileTypePhp as L, IconFileTypePng as R, IconFileTypePpt as z, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as B, IconFileTypeTxt as ie, IconFileTypeVue as ae, IconFileTypeXls as oe, IconFileTypeXml as se, IconFileTypeZip as ce, IconMusic as le, IconPhoto as V, IconReload as ue, IconTerminal2 as de, IconVideo as fe, IconX as pe } from "@tabler/icons-react";
+import { memo as me, useCallback as H, useEffect as U, useId as he, useMemo as W, useRef as ge, useState as G } from "react";
+import { Fragment as _e, jsx as K, jsxs as q } from "react/jsx-runtime";
 //#region src/constants/public-class-names.ts
-var T = {
+var J = {
 	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) => {
+}, ve = () => {
+	let [e, t] = G(() => /* @__PURE__ */ new Set()), n = H((e, n) => {
+		t((t) => {
+			if (t.has(e) === n) return t;
+			let r = new Set(t);
+			return n ? r.add(e) : r.delete(e), r;
+		});
+	}, []), r = H(() => {
+		t((e) => e.size ? /* @__PURE__ */ new Set() : e);
+	}, []);
+	return W(() => ({
+		isExpanded: (t) => e.has(t),
+		onToggle: n,
+		reset: r
+	}), [
+		e,
+		n,
+		r
+	]);
+}, ye = /[([][^()[\]]*[)\]]/g, be = /(\d+(?:\.\d+)?)\s*s\b/, xe = (e) => {
 	let t = e.trimEnd();
 	return t.endsWith(":") ? t.slice(0, -1) : t;
-}, 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]);
-}, N = (e) => {
-	E.lastIndex = 0;
+}, Se = (e) => {
+	ye.lastIndex = 0;
 	let t;
-	for (; t = E.exec(e);) {
-		let e = t[0].slice(1, -1), n = D.exec(e);
+	for (; t = ye.exec(e);) {
+		let e = t[0].slice(1, -1), n = be.exec(e);
 		if (n) return {
 			durationLabel: `${n[1]}s`,
 			groupIndex: t.index,
-			groupLength: t[0].length,
-			startTimeSeconds: M(e)
+			groupLength: t[0].length
 		};
 	}
-}, P = (e) => {
-	let t = e ?? "", n = N(t);
+}, Y = (e) => {
+	let t = e ?? "", n = Se(t);
 	return {
-		name: k(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
+		name: xe(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
 		durationLabel: n?.durationLabel
 	};
-}, 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;
-}, R = (e) => {
-	let t = e.flatMap((e) => {
-		let t = N(e ?? ""), n = L(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 > 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;
-}, z = (e) => [...e].reverse().find((e) => e.status == null), B = (e, t) => e.findIndex((e) => e.index === t.index) + 1, V = (e) => {
+}, Ce = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), we = (e) => [...e].reverse().find((e) => e.status == null), Te = (e, t) => {
+	let n = e.parent_stage_index;
+	if (!(n == null || !Number.isInteger(n) || n < 0 || n >= e.index)) return t.get(n);
+}, Ee = (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 = Te(e.stage, n);
+		t ? t.children.push(e) : r.push(e);
+	}
+	return r;
+}, De = (e) => `stage:${e}`, Oe = (e) => `group:${e}`, ke = "min-w-0 overflow-visible py-0", Ae = "min-w-0 justify-start gap-2 rounded-lg px-2 py-1.5 text-start mobile:min-h-11", je = (e) => {
 	let t = [], n = 0;
 	for (; n < e.length;) {
-		let r = e[n], i = P(r.name).name, a = n + 1;
-		for (; a < e.length && P(e[a].name).name === i;) a += 1;
+		let r = e[n], i = Y(r.stage.name).name, a = n + 1;
+		for (; a < e.length && Y(e[a].stage.name).name === i;) a += 1;
 		let o = e.slice(n, a);
 		o.length > 1 ? t.push({
-			key: r.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;
-}, H = {
-	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"
-}, 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: H.iconError,
+}, X = {
+	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"
+}, Me = ({ status: e, isLive: t, runningLabel: n = "Running", failedLabel: r = "Failed" }) => e === o.Failed ? /* @__PURE__ */ q(_e, { children: [/* @__PURE__ */ K(x, {
+	size: f.MD,
+	className: X.iconError,
 	"aria-hidden": !0,
-	stroke: o
-}), /* @__PURE__ */ C("span", {
+	stroke: p
+}), /* @__PURE__ */ K("span", {
 	className: "sr-only",
-	children: i
-})] }) : e === t.Completed ? /* @__PURE__ */ C(p, {
-	size: a.SM,
-	className: H.iconCompleted,
+	children: r
+})] }) : e === o.Completed ? /* @__PURE__ */ K(S, {
+	size: f.SM,
+	className: X.iconCompleted,
 	"aria-hidden": !0,
-	stroke: o
-}) : n ? /* @__PURE__ */ C(d, {
+	stroke: p
+}) : t ? /* @__PURE__ */ K(y, {
 	size: 16,
-	ariaLabel: r
-}) : 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);
-	}, []);
-	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, H.codeBlock),
-		children: [/* @__PURE__ */ C(l, {
-			size: s.Small,
-			icon: C(u ? p : g, {
-				size: a.SM,
-				className: H.iconSecondary,
-				stroke: o
-			}),
-			"aria-label": c,
-			onClick: m,
-			className: "absolute end-2 top-2"
-		}), /* @__PURE__ */ C("code", {
-			className: t,
-			children: e
+	ariaLabel: n
+}) : null, Ne = (e) => {
+	if (e == null) return "";
+	let t = e.lastIndexOf(".");
+	return t > 0 ? e.slice(0, t) : e;
+}, Pe = (e) => {
+	if (!e) return E;
+	let t = u(e);
+	if (t.startsWith("image/")) switch (t) {
+		case "image/jpeg": return N;
+		case "image/png": return R;
+		case "image/svg+xml": return ne;
+		case "image/bmp": return D;
+		default: return V;
+	}
+	if (t.startsWith("video/")) return fe;
+	if (t.startsWith("audio/")) return le;
+	switch (t) {
+		case "application/pdf": return I;
+		case "application/msword": return A;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return j;
+		case "application/vnd.ms-powerpoint": return z;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return z;
+		case "application/vnd.ms-excel": return 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 te;
+		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 ee;
+		case "text/x-vue": return ae;
+		default: return E;
+	}
+}, Fe = (e) => {
+	let { type: n, contentType: r } = e;
+	return n === t.Prompt ? de : n === t.Pasted ? C : n === t.Image ? V : Pe(r ?? "");
+}, Ie = (e) => {
+	let t = u(e), r = n[t];
+	if (r) return r;
+	let i = t.split("/")[1];
+	if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
+}, Le = (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 = Ie(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;
+}, Re = (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 : Fe(e),
+		typeLabel: d ? null : Le(e, n)
+	};
+}, ze = "flex size-[84px] items-center justify-center rounded-xl border", Z = {
+	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"
+}, Q = {
+	tile: "_tile_1tdbq_12",
+	hovered: "_hovered_1tdbq_18",
+	selected: "_selected_1tdbq_28",
+	tileError: "_tileError_1tdbq_33",
+	nameText: "_nameText_1tdbq_38",
+	typeText: "_typeText_1tdbq_42",
+	retryIcon: "_retryIcon_1tdbq_46",
+	track: "_track_1tdbq_50",
+	actionButton: "_actionButton_1tdbq_56",
+	imageActionButton: "_imageActionButton_1tdbq_60"
+}, Be = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ K(b, {
+	icon: a,
+	size: m.Small,
+	className: c("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Q.actionButton, o, Z.tileAction),
+	"aria-label": e,
+	"aria-describedby": t ? n : void 0,
+	onClick: (e) => {
+		e.stopPropagation(), r(i);
+	}
+}), Ve = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(ue, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	className: Q.retryIcon,
+	...e
+}), He = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(w, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), Ue = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(T, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), We = ({ ...e }) => /* @__PURE__ */ K(Be, {
+	icon: /* @__PURE__ */ K(pe, {
+		size: f.SM,
+		"aria-hidden": !0,
+		stroke: p
+	}),
+	...e
+}), Ge = {
+	[e.Network]: "Upload failed · network error",
+	[e.UnsupportedType]: "Upload failed · unsupported file type",
+	[e.FileTooLarge]: "Upload failed · file too large"
+}, Ke = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isLink: u, cssVars: d, onExpand: f, isExpandable: p, onRemove: m, isSelected: h }) => {
+	let { clickLabel: _ = "Download attachment", expandLabel: v = "Expand pasted text", downloadLabel: b = "Download attachment", retryLabel: x = "Retry upload", removeLabel: S = "Remove attachment", openInNewTabLabel: C = "Open in new tab", sizeLabel: w, uploadingLabel: T = "Uploading", errorReasonLabels: E, genericErrorLabel: D = "Upload failed" } = o ?? {}, { typography: O, className: k } = s ?? {}, { id: A, name: j, status: M, errorReason: N } = t, P = M === a.Loading, F = M === a.Error, I = he(), L = F ? N && (E?.[N] ?? Ge[N]) || D : "", { BottomIcon: R, typeLabel: z } = Re(t), ee = !F && !P && l && !u, te = F && !!i && N !== e.UnsupportedType && N !== e.FileTooLarge, ne = Number(!!ee) + Number(!!te) + Number(!!u) + Number(!!m), re = ne > 1 ? "pe-11" : ne === 1 ? "pe-5" : void 0, B = !!p && f !== void 0, ie = B || r !== void 0, ae = () => {
+		B ? f(A) : r?.(A);
+	}, oe = (e) => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ae());
+	}, se = W(() => Ne(j), [j]), ce = H(() => {
+		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
+	}, [t]), le = c(ze, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Q.tile, !F && Q.hovered, h && Q.selected, F && Q.tileError, Z.tile, h && Z.tileSelected), V = /* @__PURE__ */ K("div", {
+		title: se,
+		className: c(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, !F && re, Z.tileName),
+		children: n ? /* @__PURE__ */ K(g, {
+			text: se,
+			query: n,
+			maxLines: 2
+		}) : se
+	}), ue = R && /* @__PURE__ */ q("div", {
+		className: c("flex w-full items-center gap-1", F && re, Z.tileType),
+		children: [/* @__PURE__ */ K(R, {
+			size: 16,
+			className: Q.typeText,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ K("span", {
+			className: c(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Q.typeText),
+			children: w ? `${z} · ${w}` : z
 		})]
+	}), de = ie ? {
+		role: "button",
+		tabIndex: 0,
+		"aria-label": B ? v : _,
+		onClick: ae,
+		onKeyDown: oe
+	} : {}, fe = /* @__PURE__ */ q(_e, { children: [
+		V,
+		ue,
+		P && /* @__PURE__ */ K("div", {
+			role: "progressbar",
+			"aria-label": T,
+			className: c("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Q.track),
+			children: /* @__PURE__ */ K(y, { size: 32 })
+		}),
+		/* @__PURE__ */ q("div", {
+			className: "absolute end-1 top-1 flex gap-1",
+			children: [
+				ee && /* @__PURE__ */ K(He, {
+					ariaLabel: b,
+					errorTitle: L,
+					errorDescId: I,
+					onClick: l,
+					id: A
+				}),
+				te && /* @__PURE__ */ K(Ve, {
+					ariaLabel: x,
+					errorTitle: L,
+					errorDescId: I,
+					onClick: i,
+					id: A
+				}),
+				u && /* @__PURE__ */ K(Ue, {
+					ariaLabel: C,
+					errorTitle: L,
+					errorDescId: I,
+					onClick: ce
+				}),
+				m && /* @__PURE__ */ K(We, {
+					ariaLabel: S,
+					errorTitle: L,
+					errorDescId: I,
+					onClick: m,
+					id: A
+				})
+			]
+		}),
+		F && /* @__PURE__ */ K("span", {
+			id: I,
+			role: "status",
+			"aria-live": "polite",
+			className: "sr-only",
+			children: L
+		})
+	] });
+	return /* @__PURE__ */ K("div", {
+		style: d,
+		className: c("inline-flex", k),
+		children: /* @__PURE__ */ K("div", {
+			...de,
+			"aria-busy": P,
+			style: d,
+			className: c(le, ie && "cursor-pointer", "focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: fe
+		})
+	});
+}, qe = /* @__PURE__ */ function(e) {
+	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
+}({}), Je = ({ enabled: e, src: t }) => {
+	let n = ge(null), [r, i] = G("idle");
+	return U(() => {
+		i(e && t ? "loading" : "idle");
+	}, [e, t]), U(() => {
+		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
+	};
+}, Ye = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: l, isSelected: u }) => {
+	let { clickLabel: d = "Open attachment", expandLabel: m = "Expand pasted text", removeLabel: h = "Remove attachment", downloadLabel: g = "Download attachment" } = i ?? {}, { className: y } = l ?? {}, { id: b, name: x } = e, S = e.previewUrl ?? e.url, C = e.type === t.Pasted && n !== void 0, { isLoading: w, isError: T, isImage: E } = W(() => Re(e), [e]), D = r !== void 0 && !C && !w && !T, O = C || D, { imageRef: k, imageLoadStatus: A } = Je({
+		enabled: E,
+		src: S
+	}), j = () => {
+		C && n ? n(b) : D && r && r(b);
+	}, M = O ? {
+		role: "button",
+		tabIndex: 0,
+		"aria-label": C ? m : d,
+		onClick: j,
+		onKeyDown: (e) => {
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j());
+		}
+	} : {};
+	return /* @__PURE__ */ K("div", {
+		className: c(ze, "group/attachment-tile", O && "cursor-pointer", Q.tile, u && Q.selected, y, Z.tile, u && Z.tileSelected),
+		...M,
+		style: o,
+		children: /* @__PURE__ */ q("div", {
+			className: "relative h-full w-full overflow-hidden",
+			children: [
+				/* @__PURE__ */ q("div", {
+					className: "absolute end-1 top-1 z-10 flex gap-1",
+					children: [a && /* @__PURE__ */ K(We, {
+						ariaLabel: h,
+						onClick: a,
+						id: b,
+						className: Q.imageActionButton
+					}), s && /* @__PURE__ */ K(He, {
+						ariaLabel: g,
+						onClick: s,
+						id: b,
+						className: Q.imageActionButton
+					})]
+				}),
+				A !== qe.Loaded && /* @__PURE__ */ K(_, {
+					variant: v.Rectangular,
+					width: "100%",
+					height: "100%",
+					active: A === qe.Loading,
+					overlay: /* @__PURE__ */ K(V, {
+						size: f.LG,
+						className: Q.typeText,
+						"aria-hidden": !0,
+						stroke: p
+					}),
+					className: "absolute inset-0 rounded-xl"
+				}),
+				/* @__PURE__ */ K("img", {
+					ref: k,
+					src: S,
+					alt: x,
+					loading: "lazy",
+					decoding: "async",
+					className: c("h-full w-full rounded-xl object-cover transition-opacity duration-200", A === qe.Loaded ? "opacity-100" : "opacity-0")
+				})
+			]
+		})
+	});
+}, Xe = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: c, labels: l, styles: u, isSelected: d }) => {
+	let { colors: f } = u ?? {}, p = e.type === t.Pasted && a !== void 0, m = 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: h, isLink: g } = W(() => Re(e), [e]);
+	return h ? /* @__PURE__ */ K(Ye, {
+		attachment: e,
+		labels: l,
+		onClick: o,
+		onExpand: a,
+		styles: u,
+		onRemove: r,
+		cssVars: m,
+		onDownload: c,
+		isSelected: d
+	}) : /* @__PURE__ */ K(Ke, {
+		attachment: e,
+		searchQuery: n,
+		onClick: o,
+		onRetry: i,
+		onRemove: r,
+		onDownload: c,
+		isLink: g,
+		styles: u,
+		labels: l,
+		onExpand: a,
+		cssVars: m,
+		isExpandable: p,
+		isSelected: d
 	});
-}, 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,
+}, Ze = (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;
+	});
+}, Qe = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => /* @__PURE__ */ K(r, {
+	language: t?.replace(/^language-/, "") ?? "",
+	value: typeof e == "string" ? e : String(e ?? ""),
+	codeClassName: n,
+	containerClassName: c(X.codeBlock, n),
+	copyLabel: i,
+	copiedLabel: a,
+	hideDownload: !0
+}), $e = me(({ content: e, typography: t, copyAriaLabel: n = "Copy", copiedLabel: r, tableScrollRegionAriaLabel: a, mathScrollRegionAriaLabel: o }) => {
+	let s = "mb-1.5 last:mb-0", l = c(t?.headingClassName ?? "dial-small-semi-text", X.stageContent, s);
+	return /* @__PURE__ */ K(i, {
+		content: e,
+		tableScrollRegionAriaLabel: a,
+		mathScrollRegionAriaLabel: o,
 		classNames: {
-			h1: o,
-			h2: o,
-			h3: o,
-			h4: o,
-			h5: o,
-			h6: o,
-			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)
+			h1: l,
+			h2: l,
+			h3: l,
+			h4: l,
+			h5: l,
+			h6: l,
+			p: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent, "mb-1.5"),
+			ul: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent, s),
+			ol: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent, s),
+			strong: c(t?.strongClassName ?? t?.contentClassName ?? "dial-tiny-text", X.stageContent),
+			codeInline: X.codeInline,
+			blockquote: c(t?.contentClassName ?? "dial-tiny-text", X.blockquote, s),
+			link: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent),
+			tableCell: c(t?.contentClassName ?? "dial-tiny-text", X.tableCell)
 		},
-		components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(W, {
-			codeClassName: t,
-			blockClassName: n?.codeBlockClassName,
-			copyAriaLabel: r,
+		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ K(Qe, {
+			codeClassName: i,
+			blockClassName: t?.codeBlockClassName,
+			copyAriaLabel: n,
+			copiedLabel: r,
 			children: e
-		}) : /* @__PURE__ */ C("code", {
-			className: i("inline-block px-1.5 py-1", n?.codeClassName ?? "dial-code-text rounded-md", H.codeInline),
+		}) : /* @__PURE__ */ K("code", {
+			className: c("px-1 py-0.5", t?.codeClassName ?? "dial-tiny-text rounded-md", X.codeInline),
 			children: e
 		}) }
 	});
-}), 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", {
+}), et = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
+	let r = H((t) => {
+		let r = e.find((e) => e.id === t);
+		r && n?.(r);
+	}, [e, n]);
+	return /* @__PURE__ */ K("div", {
+		role: "list",
+		className: "flex flex-wrap gap-3",
+		children: e.map((e) => /* @__PURE__ */ K("div", {
+			role: "listitem",
+			children: /* @__PURE__ */ K(Xe, {
+				attachment: e,
+				onClick: n && r,
+				labels: { clickLabel: t }
+			})
+		}, e.id))
+	});
+}, tt = ({ stage: e, isLive: t, typography: n, labels: r, nameOverride: i, onAttachmentClick: a, childList: s, isExpanded: l, onToggle: u }) => {
+	let [f, p] = G(!1), m = l ?? f, g = H((e) => {
+		l === void 0 && p(e), u?.(e);
+	}, [l, u]), { copyAriaLabel: _ = "Copy stage content", codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: y, mathScrollRegionAriaLabel: b, runningAriaLabel: x, failedAriaLabel: S, attachmentClickLabel: C = "Preview search result" } = r ?? {}, w = W(() => Ze(e.attachments), [e.attachments]), { name: T, durationLabel: E } = Y(e.name), D = i ?? T, O = !i && Ce(T), k = e.status === o.Failed, A = !!e.content || !!e.attachments?.length, j = A || s != null, M = /* @__PURE__ */ q(_e, { children: [
+		/* @__PURE__ */ K("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ C(U, {
+			children: /* @__PURE__ */ K(Me, {
 				status: e.status,
-				isLive: n,
-				runningLabel: p,
-				failedLabel: g
+				isLive: t,
+				runningLabel: x,
+				failedLabel: S
 			})
 		}),
-		/* @__PURE__ */ C("span", {
-			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 || "" })
+		/* @__PURE__ */ K("span", {
+			className: c("min-w-0 max-w-[22rem] truncate", n?.fontClassName ?? "dial-small-text", X.stageName, k && X.stageNameFailed, O && X.monoName),
+			children: /* @__PURE__ */ K(h, { text: D || e.status || "" })
 		}),
-		e.tag && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.tagClassName ?? "dial-tiny-lead-text", H.tag),
+		e.tag && /* @__PURE__ */ K("span", {
+			className: c("flex-none", n?.tagClassName ?? "dial-tiny-lead-text", X.tag),
 			children: e.tag
 		}),
-		v && /* @__PURE__ */ C("span", {
-			className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", H.duration),
-			children: v
-		}),
-		E && /* @__PURE__ */ C("span", {
-			className: i("flex-none", H.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
-			})
+		E && /* @__PURE__ */ K("span", {
+			className: c("flex-none", n?.countFontClassName ?? "dial-tiny-text", X.duration),
+			children: E
 		})
-	] }), 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", {
-			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(G, {
-						content: e.content,
-						typography: r,
-						copyAriaLabel: f
-					})
+	] });
+	return j ? /* @__PURE__ */ q(d, {
+		expanded: m,
+		onToggle: g,
+		title: /* @__PURE__ */ K("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: M
+		}),
+		className: ke,
+		headerClassName: c(Ae, X.row, X.stageHeader),
+		contentClassName: c("-mt-1 flex min-w-0 flex-col gap-3 px-0 py-1", X.stageRegion),
+		children: [m && A && /* @__PURE__ */ q("div", {
+			className: "flex min-w-0 flex-col gap-3 ps-8",
+			children: [e.content && /* @__PURE__ */ K("div", {
+				className: "max-h-[300px] min-w-0 overflow-y-auto",
+				children: /* @__PURE__ */ K($e, {
+					content: e.content,
+					typography: n,
+					copyAriaLabel: _,
+					copiedLabel: v,
+					tableScrollRegionAriaLabel: y,
+					mathScrollRegionAriaLabel: b
 				})
-			})
-		})
-	})] }) : /* @__PURE__ */ C("div", {
-		className: O,
-		children: D
+			}), w.length > 0 && /* @__PURE__ */ K(et, {
+				attachments: w,
+				clickLabel: C,
+				onAttachmentClick: a
+			})]
+		}), m && s]
+	}) : /* @__PURE__ */ K("div", {
+		className: c("flex w-full items-center gap-2 px-2 py-1.5", X.row),
+		children: M
 	});
-}, 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", H.collapseButton, H.row),
-		children: [
-			/* @__PURE__ */ C("span", {
-				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ C(U, {
-					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", H.stageName, _ && H.stageNameFailed),
-				children: /* @__PURE__ */ C(c, { text: e.name })
-			}),
-			/* @__PURE__ */ w("span", {
-				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", H.duration),
-				children: b
-			}),
-			/* @__PURE__ */ C("span", {
-				className: i("flex-none", H.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(K, {
-						stage: e,
-						nameOverride: d(t + 1),
-						isLive: n && e.status == null,
-						typography: r,
-						labels: s
+}, nt = (e) => e <= 3 ? "ps-4" : "ps-0", rt = (e) => e <= 3 ? "ps-6" : "ps-0", it = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s }) => {
+	let c = De(e.stage.index), l = t + 1;
+	return /* @__PURE__ */ K(tt, {
+		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__ */ K(ot, {
+			nodes: e.children,
+			depth: l,
+			className: nt(l),
+			isStreaming: r,
+			expansion: i,
+			typography: a,
+			labels: o,
+			onAttachmentClick: s
+		}) : void 0
+	});
+}, at = ({ 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 = Oe(e.key), y = r.isExpanded(v), b = t + 1;
+	return /* @__PURE__ */ K(d, {
+		title: /* @__PURE__ */ q("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [
+				/* @__PURE__ */ K("span", {
+					className: "flex flex-none items-center",
+					children: /* @__PURE__ */ K(Me, {
+						status: _,
+						isLive: n && m,
+						runningLabel: l,
+						failedLabel: u
 					})
-				}, e.index))
-			})
-		})
-	})] });
-}, 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,
-		"--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 = V(e);
-	return /* @__PURE__ */ C("div", {
-		style: l,
-		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(K, {
-					stage: e.stage,
-					isLive: t && e.stage.status == null,
-					typography: c,
-					labels: o
+				}),
+				/* @__PURE__ */ K("span", {
+					className: c("min-w-0 max-w-[22rem] truncate", i?.fontClassName ?? "dial-small-text", X.stageName, g && X.stageNameFailed),
+					children: /* @__PURE__ */ K(h, { text: e.name })
+				}),
+				/* @__PURE__ */ q("span", {
+					className: c("flex-none", i?.countFontClassName ?? "dial-tiny-text", X.count),
+					children: ["×", p.length]
 				})
-			}, e.key) : /* @__PURE__ */ C("li", {
+			]
+		}),
+		expanded: y,
+		onToggle: (e) => r.onToggle(v, e),
+		className: ke,
+		headerClassName: c(Ae, X.collapseButton, X.row, X.stageHeader),
+		contentClassName: c("-mt-2 min-w-0 px-0", rt(b), X.stageRegion),
+		children: /* @__PURE__ */ K("ul", {
+			role: "list",
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: y && p.map((e, t) => /* @__PURE__ */ K("li", {
 				role: "listitem",
-				children: /* @__PURE__ */ C(q, {
-					row: e,
-					isLive: t && (e.attempts?.some((e) => e.status == null) ?? !1),
-					typography: c,
-					labels: o
+				className: "min-w-0",
+				children: /* @__PURE__ */ K(it, {
+					node: e,
+					depth: b,
+					nameOverride: f(t + 1),
+					isStreaming: n,
+					expansion: r,
+					typography: i,
+					labels: a,
+					onAttachmentClick: s
 				})
-			}, e.key))
+			}, e.stage.index))
 		})
 	});
-}, 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"
-}, 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(() => {
-		M.current && !r && j(!1), M.current = r;
-	}, [r]);
-	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
+}, ot = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ K("ul", {
+	role: "list",
+	className: c("flex min-w-0 flex-col gap-0.5", n),
+	children: je(e).map((e) => /* @__PURE__ */ K("li", {
+		role: "listitem",
+		className: "min-w-0",
+		children: e.node ? /* @__PURE__ */ K(it, {
+			node: e.node,
+			depth: t,
+			...r
+		}) : /* @__PURE__ */ K(at, {
+			row: e,
+			depth: t,
+			...r
+		})
+	}, e.key))
+}), st = ({ 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 = W(() => Ee(e), [e]);
+	return /* @__PURE__ */ K("div", {
+		style: d,
+		className: c("w-full min-w-0", X.panel, n, J.panel),
+		children: /* @__PURE__ */ K(ot, {
+			nodes: f,
+			depth: 0,
+			className: "w-full ps-5",
+			isStreaming: t,
+			expansion: o,
+			typography: u,
+			labels: i,
+			onAttachmentClick: a
+		})
+	});
+}, ct = (e) => {
+	let t = ve();
+	return /* @__PURE__ */ K(st, {
+		...e,
+		expansion: t
+	});
+}, $ = {
+	toggleButton: "_toggleButton_16fae_7",
+	groupRegion: "_groupRegion_16fae_28",
+	executedLabel: "_executedLabel_16fae_32",
+	doneIcon: "_doneIcon_16fae_36",
+	failedText: "_failedText_16fae_40",
+	liveName: "_liveName_16fae_44"
+}, lt = ({ stages: e, isStreaming: t, labels: n, className: r, styles: i, onAttachmentClick: a }) => {
+	let { executedLabel: l = "Executed", stepsLabel: u = () => "steps", failedCountLabel: m = (e) => `${e} failed`, runningAriaLabel: g = "Running", copyAriaLabel: _, codeBlockCopiedLabel: v, tableScrollRegionAriaLabel: b, mathScrollRegionAriaLabel: x, failedAriaLabel: C, attemptLabel: w, attachmentClickLabel: T } = n ?? {}, [E, D] = G(t), O = ve(), { reset: k } = O, A = e.length > 1;
+	U(() => {
+		A && !E && k();
+	}, [
+		A,
+		E,
+		k
+	]);
+	let j = ge(t);
+	U(() => {
+		j.current && !t && D(!1), j.current = t;
+	}, [t]);
+	let { colors: M, panel: N } = i ?? {}, P = i?.typography ?? { fontClassName: "dial-small-text" }, F = s({
+		"--cs-cg-label": M?.labelColor,
+		"--cs-cg-label-hover": M?.labelHoverColor,
+		"--cs-cg-done": M?.doneColor,
+		"--cs-cg-failed": M?.failedColor,
+		"--cs-text": N?.text,
+		"--cs-row-hover": N?.rowHoverColor,
+		"--cs-button-bg": N?.collapsedButtonBg,
+		"--cs-stage-text": N?.stageTextColor,
+		"--cs-failed-text": N?.failedColor,
+		"--cs-tag-text": N?.tagTextColor,
+		"--cs-count-text": N?.countTextColor,
+		"--cs-duration-text": N?.durationTextColor,
+		"--cs-icon-secondary": N?.iconSecondaryColor,
+		"--cs-icon-completed": N?.iconCompletedColor,
+		"--cs-icon-error": N?.iconErrorColor,
+		"--cs-code-bg": N?.codeBg,
+		"--cs-code-border": N?.codeBorderColor,
+		"--cs-code-text": N?.codeTextColor,
+		"--cs-border": N?.borderColor
 	});
 	if (e.length === 0) return null;
-	let H = {
-		copyAriaLabel: D,
-		runningAriaLabel: E,
-		failedAriaLabel: O,
-		attemptLabel: k
+	let I = {
+		copyAriaLabel: _,
+		codeBlockCopiedLabel: v,
+		tableScrollRegionAriaLabel: b,
+		mathScrollRegionAriaLabel: x,
+		runningAriaLabel: g,
+		failedAriaLabel: C,
+		attemptLabel: w,
+		attachmentClickLabel: T
 	};
-	if (e.length === 1) return /* @__PURE__ */ C(J, {
+	if (e.length === 1) return /* @__PURE__ */ K(st, {
 		stages: e,
-		isStreaming: r,
-		className: l,
+		isStreaming: t,
+		expansion: O,
+		className: r,
 		styles: {
-			colors: F,
-			typography: f?.typography
+			colors: N,
+			typography: i?.typography
 		},
-		labels: H
+		labels: I,
+		onAttachmentClick: a
 	});
-	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 = K ? B(e, K) : e.length, n = K ? P(K.name).name : "";
-		q = /* @__PURE__ */ w("span", {
+	let L = e.some((e) => e.status === o.Failed), R;
+	if (t) {
+		let t = Y((we(e) ?? e[e.length - 1]).name).name;
+		R = /* @__PURE__ */ q("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
-			children: [
-				/* @__PURE__ */ C("span", {
-					className: "flex flex-none items-center",
-					children: /* @__PURE__ */ C(d, {
-						size: 14,
-						ariaLabel: E
-					})
-				}),
-				/* @__PURE__ */ C("span", {
-					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", L.fontClassName, Y.executedLabel),
-					children: /* @__PURE__ */ C(c, { text: n })
+			children: [/* @__PURE__ */ K("span", {
+				className: "flex flex-none items-center",
+				children: /* @__PURE__ */ K(y, {
+					size: 14,
+					ariaLabel: g
 				})
-			]
+			}), t && /* @__PURE__ */ K("span", {
+				className: c("min-w-0 max-w-[22rem] truncate", P.fontClassName, $.liveName),
+				children: /* @__PURE__ */ K(h, { text: t })
+			})]
 		});
-	} else if (U) {
-		let n = e.filter((e) => e.status === t.Failed).length;
-		q = /* @__PURE__ */ w("span", {
+	} else if (L) {
+		let t = e.filter((e) => e.status === o.Failed).length;
+		R = /* @__PURE__ */ q("span", {
 			className: "inline-flex items-center gap-1",
-			children: [
-				/* @__PURE__ */ w("span", {
-					className: i(L.fontClassName, Y.executedLabel),
-					children: [
-						g,
-						" ",
-						e.length,
-						" ",
-						_(e.length)
-					]
-				}),
-				/* @__PURE__ */ C("span", {
-					className: i(L.fontClassName, Y.failedText),
-					children: v(n)
-				}),
-				G && /* @__PURE__ */ C("span", {
-					className: i(L.fontClassName, Y.stepsCount),
-					children: G
-				})
-			]
-		});
-	} else q = /* @__PURE__ */ w("span", {
-		className: "inline-flex items-center gap-1",
-		children: [
-			/* @__PURE__ */ C(p, {
-				size: a.SM,
-				className: Y.doneIcon,
-				"aria-hidden": !0,
-				stroke: o
-			}),
-			/* @__PURE__ */ w("span", {
-				className: i(L.fontClassName, Y.executedLabel),
+			children: [/* @__PURE__ */ q("span", {
+				className: c(P.fontClassName, $.executedLabel),
 				children: [
-					g,
+					l,
 					" ",
 					e.length,
 					" ",
-					_(e.length)
+					u(e.length)
 				]
-			}),
-			G && /* @__PURE__ */ C("span", {
-				className: i(L.fontClassName, Y.stepsCount),
-				children: G
-			})
-		]
+			}), /* @__PURE__ */ K("span", {
+				className: c(P.fontClassName, $.failedText),
+				children: m(t)
+			})]
+		});
+	} else R = /* @__PURE__ */ q("span", {
+		className: "inline-flex items-center gap-1",
+		children: [/* @__PURE__ */ K(S, {
+			size: f.SM,
+			className: $.doneIcon,
+			"aria-hidden": !0,
+			stroke: p
+		}), /* @__PURE__ */ q("span", {
+			className: c(P.fontClassName, $.executedLabel),
+			children: [
+				l,
+				" ",
+				e.length,
+				" ",
+				u(e.length)
+			]
+		})]
 	});
-	return /* @__PURE__ */ w("div", {
-		style: V,
-		className: i("flex w-full flex-col gap-1", l, T.group),
-		children: [/* @__PURE__ */ C(u, {
-			className: i(Y.toggleButton, T.groupToggle),
-			textClassName: "min-w-0",
-			onClick: () => j((e) => !e),
-			"aria-expanded": A,
-			iconAfter: A ? /* @__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: q
-		}), /* @__PURE__ */ C("div", {
-			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(J, {
-					stages: e,
-					isStreaming: r,
-					styles: {
-						colors: F,
-						typography: f?.typography
-					},
-					labels: H,
-					className: "pt-1"
-				})
+	return /* @__PURE__ */ K("div", {
+		style: F,
+		className: c("flex w-full flex-col gap-1", r, J.group),
+		children: /* @__PURE__ */ K(d, {
+			title: R,
+			expanded: E,
+			onToggle: D,
+			className: "overflow-visible py-0",
+			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, J.groupToggle),
+			contentClassName: c("-mt-2 px-0", $.groupRegion),
+			children: E && /* @__PURE__ */ K(st, {
+				stages: e,
+				isStreaming: t,
+				expansion: O,
+				styles: {
+					colors: N,
+					typography: i?.typography
+				},
+				labels: I,
+				className: "pt-1",
+				onAttachmentClick: a
 			})
-		})]
+		})
 	});
 };
 //#endregion
-export { T as CONVERSATION_STAGES_CLASS, X as CollapsedGroup, J as StagesPanel };
+export { J as CONVERSATION_STAGES_CLASS, lt as CollapsedGroup, ct as StagesPanel };