@epam/ai-dial-conversation-stages 1.3.0-dev.14 → 1.3.0-dev.141

package/index.js

@@ -1,24 +1,24 @@
 import { AttachmentErrorReason as e, AttachmentType as t, MIME_TYPE_EXT_MAP as n, MarkdownCodeBlock as r, MarkdownRenderer as i, RequestStatus as a, StageStatus as o, buildCssVars as s, mergeClasses as c, messageAttachmentsToDisplayAttachments as l, normalizeMimeType as u } from "@epam/ai-dial-chat-shared";
-import { Accordion as d, DIAL_ICON_SIZE as f, DIAL_KIT_ICON_STROKE as p, ElementSize as m, EllipsisTooltip as h, Highlight as g, Skeleton as _, SkeletonVariant as v, Spinner as y, StaticIconButton as b } from "@epam/ai-dial-ui-kit";
-import { IconAlertCircle as x, IconCheck as S, IconClipboard as C, IconDownload as w, IconExternalLink as T, IconFile as E, IconFileTypeBmp as D, IconFileTypeCss as O, IconFileTypeCsv as k, IconFileTypeDoc as A, IconFileTypeDocx as j, IconFileTypeHtml as M, IconFileTypeJpg as N, IconFileTypeJs as P, IconFileTypeJsx as F, IconFileTypePdf as I, IconFileTypePhp as L, IconFileTypePng as R, IconFileTypePpt as z, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as 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";
+import { Accordion as d, DIAL_ICON_SIZE as f, DIAL_KIT_ICON_STROKE as p, DialItemType as m, ElementSize as h, EllipsisTooltip as g, FileIcon as _, Highlight as v, Skeleton as y, SkeletonVariant as b, Spinner as x, StaticIconButton as S } from "@epam/ai-dial-ui-kit";
+import { IconAlertCircle as C, IconCheck as w, IconClipboard as T, IconDownload as E, IconExternalLink as D, IconFile as O, IconFileTypeBmp as k, IconFileTypeCss as A, IconFileTypeCsv as j, IconFileTypeDoc as M, IconFileTypeDocx as N, IconFileTypeHtml as P, IconFileTypeJpg as F, IconFileTypeJs as I, IconFileTypeJsx as L, IconFileTypePdf as R, IconFileTypePhp as z, IconFileTypePng as B, IconFileTypePpt as V, IconFileTypeRs as ee, IconFileTypeSql as te, IconFileTypeSvg as ne, IconFileTypeTs as re, IconFileTypeTsx as ie, IconFileTypeTxt as ae, IconFileTypeVue as H, IconFileTypeXls as oe, IconFileTypeXml as se, IconFileTypeZip as ce, IconMusic as le, IconPhoto as U, IconReload as ue, IconTerminal2 as de, IconVideo as fe, IconX as pe } from "@tabler/icons-react";
+import { memo as me, useCallback as W, useEffect as G, useId as he, useMemo as K, useRef as ge, useState as q } from "react";
+import { Fragment as _e, jsx as J, jsxs as Y } from "react/jsx-runtime";
 //#region src/constants/public-class-names.ts
-var J = {
+var ve = {
 	panel: "dial-conversation-stages-panel",
 	group: "dial-conversation-stages-group",
 	groupToggle: "dial-conversation-stages-group-toggle"
-}, ve = () => {
-	let [e, t] = G(() => /* @__PURE__ */ new Set()), n = H((e, n) => {
+}, ye = () => {
+	let [e, t] = q(() => /* @__PURE__ */ new Set()), n = W((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(() => {
+	}, []), r = W(() => {
 		t((e) => e.size ? /* @__PURE__ */ new Set() : e);
 	}, []);
-	return W(() => ({
+	return K(() => ({
 		isExpanded: (t) => e.has(t),
 		onToggle: n,
 		reset: r
@@ -27,30 +27,30 @@ var J = {
 		n,
 		r
 	]);
-}, ye = /[([][^()[\]]*[)\]]/g, be = /(\d+(?:\.\d+)?)\s*s\b/, xe = (e) => {
+}, be = /[([][^()[\]]*[)\]]/g, xe = /(\d+(?:\.\d+)?)\s*s\b/, Se = (e) => {
 	let t = e.trimEnd();
 	return t.endsWith(":") ? t.slice(0, -1) : t;
-}, Se = (e) => {
-	ye.lastIndex = 0;
+}, Ce = (e) => {
+	be.lastIndex = 0;
 	let t;
-	for (; t = ye.exec(e);) {
-		let e = t[0].slice(1, -1), n = be.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
 		};
 	}
-}, Y = (e) => {
-	let t = e ?? "", n = Se(t);
+}, we = (e) => {
+	let t = e ?? "", n = Ce(t);
 	return {
-		name: xe(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
+		name: Se(n ? t.slice(0, n.groupIndex) + t.slice(n.groupIndex + n.groupLength) : t).trim().replace(/ {2,}/g, " "),
 		durationLabel: n?.durationLabel
 	};
-}, Ce = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), we = (e) => [...e].reverse().find((e) => e.status == null), Te = (e, t) => {
+}, Te = (e) => e.length > 0 && !/\s/.test(e) && e.includes("_"), Ee = (e) => [...e].reverse().find((e) => e.status == null), De = (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) => {
+}, Oe = (e) => {
 	let t = e.map((e) => ({
 		stage: e,
 		children: []
@@ -58,15 +58,15 @@ var J = {
 	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);
+		let t = De(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) => {
+}, ke = (e) => `stage:${e}`, Ae = (e) => `group:${e}`, je = "min-w-0 overflow-visible py-0", Me = "min-w-0 justify-start gap-2 rounded-lg px-2 py-1.5 text-start mobile:min-h-11", Ne = (e) => {
 	let t = [], n = 0;
 	for (; n < e.length;) {
-		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 r = e[n], i = we(r.stage.name).name, a = n + 1;
+		for (; a < e.length && we(e[a].stage.name).name === i;) a += 1;
 		let o = e.slice(n, a);
 		o.length > 1 ? t.push({
 			key: r.stage.index,
@@ -98,44 +98,44 @@ var J = {
 	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, {
+}, Pe = ({ status: e, isLive: t, runningLabel: n = "Running", failedLabel: r = "Failed" }) => e === o.Failed ? /* @__PURE__ */ Y(_e, { children: [/* @__PURE__ */ J(C, {
 	size: f.MD,
 	className: X.iconError,
 	"aria-hidden": !0,
 	stroke: p
-}), /* @__PURE__ */ K("span", {
+}), /* @__PURE__ */ J("span", {
 	className: "sr-only",
 	children: r
-})] }) : e === o.Completed ? /* @__PURE__ */ K(S, {
+})] }) : e === o.Completed ? /* @__PURE__ */ J(w, {
 	size: f.SM,
 	className: X.iconCompleted,
 	"aria-hidden": !0,
 	stroke: p
-}) : t ? /* @__PURE__ */ K(y, {
+}) : t ? /* @__PURE__ */ J(x, {
 	size: 16,
 	ariaLabel: n
-}) : null, Ne = (e) => {
+}) : null, Fe = (e) => {
 	if (e == null) return "";
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
-}, Pe = (e) => {
-	if (!e) return E;
+}, Ie = (e) => {
+	if (!e) return O;
 	let t = u(e);
 	if (t.startsWith("image/")) switch (t) {
-		case "image/jpeg": return N;
-		case "image/png": return R;
+		case "image/jpeg": return F;
+		case "image/png": return B;
 		case "image/svg+xml": return ne;
-		case "image/bmp": return D;
-		default: return V;
+		case "image/bmp": return k;
+		default: return U;
 	}
 	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/pdf": return R;
+		case "application/msword": return M;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return N;
+		case "application/vnd.ms-powerpoint": return V;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return V;
 		case "application/vnd.ms-excel": return oe;
 		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return oe;
 		case "application/zip":
@@ -143,53 +143,57 @@ var J = {
 		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/csv": return j;
+		case "text/plain": return ae;
 		case "text/html":
-		case "application/xhtml+xml": return M;
+		case "application/xhtml+xml": return P;
 		case "application/xml": return se;
 		case "application/sql": return te;
-		case "text/javascript": return P;
-		case "text/jsx": return F;
+		case "text/javascript": return I;
+		case "text/jsx": return L;
 		case "text/typescript": return re;
-		case "text/tsx": return B;
-		case "text/css": return O;
-		case "text/x-php": return L;
+		case "text/tsx": return ie;
+		case "text/css": return A;
+		case "text/x-php": return z;
 		case "text/x-rustsrc": return ee;
-		case "text/x-vue": return ae;
-		default: return E;
+		case "text/x-vue": return H;
+		default: return O;
 	}
-}, Fe = (e) => {
+}, Le = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? de : n === t.Pasted ? C : n === t.Image ? V : Pe(r ?? "");
-}, Ie = (e) => {
+	return n === t.Prompt ? de : n === t.Pasted ? T : n === t.Image ? U : Ie(r ?? "");
+}, Re = (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;
+}, ze = (e) => {
+	let { name: t, contentType: n } = e;
+	if (n) {
+		let e = Re(n);
+		if (e) return e;
+	}
+	if (t == null) return;
+	let r = t.lastIndexOf(".");
+	if (r > 0 && r < t.length - 1) return t.slice(r + 1).toLowerCase();
+}, Be = (e) => e.type !== t.Prompt && e.type !== t.Pasted, Ve = (e, n) => {
+	let { type: r, name: i } = 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 a = ze(e);
+	return a ? `.${a}` : i ?? "";
+}, He = (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)
+		BottomIcon: d ? null : Le(e),
+		typeLabel: d ? null : Ve(e, n)
 	};
-}, ze = "flex size-[84px] items-center justify-center rounded-xl border", Z = {
+}, Ue = "flex size-[100px] items-center justify-center rounded-xl border", We = "outline-offset-1 focus-visible:outline-1", Z = {
 	tray: "dial-ai-attachment-tray",
 	trayItem: "dial-ai-attachment-tray-item",
 	tile: "dial-ai-attachment-tile",
@@ -198,156 +202,168 @@ var J = {
 	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, {
+	tile: "_tile_23kve_12",
+	hovered: "_hovered_23kve_18",
+	selected: "_selected_23kve_28",
+	tileError: "_tileError_23kve_33",
+	nameText: "_nameText_23kve_38",
+	typeText: "_typeText_23kve_42",
+	placeholderIcon: "_placeholderIcon_23kve_46",
+	retryIcon: "_retryIcon_23kve_50",
+	track: "_track_23kve_54",
+	actionButton: "_actionButton_23kve_65",
+	loading: "_loading_23kve_86",
+	imageActionButton: "_imageActionButton_23kve_87",
+	proxyFocus: "_proxyFocus_23kve_96"
+}, Ge = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o, isAlwaysVisible: s }) => /* @__PURE__ */ J(S, {
 	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),
+	size: h.Small,
+	className: c(s ? "opacity-100" : "opacity-0 group-hover/attachment-tile:opacity-100 group-focus-visible/attachment-tile:opacity-100 group-has-[:focus-visible]/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, {
+}), Ke = ({ ...e }) => /* @__PURE__ */ J(Ge, {
+	icon: /* @__PURE__ */ J(ue, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	className: Q.retryIcon,
 	...e
-}), He = ({ ...e }) => /* @__PURE__ */ K(Be, {
-	icon: /* @__PURE__ */ K(w, {
+}), qe = ({ ...e }) => /* @__PURE__ */ J(Ge, {
+	icon: /* @__PURE__ */ J(E, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), Ue = ({ ...e }) => /* @__PURE__ */ K(Be, {
-	icon: /* @__PURE__ */ K(T, {
+}), Je = ({ ...e }) => /* @__PURE__ */ J(Ge, {
+	icon: /* @__PURE__ */ J(D, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
 	...e
-}), We = ({ ...e }) => /* @__PURE__ */ K(Be, {
-	icon: /* @__PURE__ */ K(pe, {
+}), Ye = ({ className: e, ...t }) => /* @__PURE__ */ J(Ge, {
+	icon: /* @__PURE__ */ J(pe, {
 		size: f.SM,
 		"aria-hidden": !0,
 		stroke: p
 	}),
-	...e
-}), Ge = {
+	className: c("mobile:opacity-100", e),
+	...t
+}), Xe = {
 	[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(() => {
+}, Ze = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: o, styles: s, onDownload: l, isLink: u, cssVars: d, onExpand: h, isExpandable: g, onRemove: y, isSelected: b }) => {
+	let { clickLabel: S = "Download attachment", expandLabel: C = "Expand pasted text", downloadLabel: w = "Download attachment", retryLabel: T = "Retry upload", removeLabel: E = "Remove attachment", openInNewTabLabel: D = "Open in new tab", sizeLabel: O, uploadingLabel: k = "Uploading", errorReasonLabels: A, genericErrorLabel: j = "Upload failed" } = o ?? {}, { typography: M, className: N } = s ?? {}, { id: P, name: F, status: I, errorReason: L } = t, R = I === a.Loading, z = I === a.Error, B = he(), V = z ? L && (A?.[L] ?? Xe[L]) || j : "", { BottomIcon: ee, typeLabel: te } = He(t), ne = Be(t), re = !z && !R && l && !u, ie = z && !!i && L !== e.UnsupportedType && L !== e.FileTooLarge, ae = !!g && h !== void 0, H = ae || r !== void 0, oe = Number(!!re) + Number(!!ie) + Number(!!u) + Number(!!y), se = !H && oe === 1, ce = () => {
+		ae ? h(P) : r?.(P);
+	}, le = (e) => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ce());
+	}, U = K(() => Fe(F), [F]), ue = W(() => {
 		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,
+	}, [t]), de = c(Ue, "group/attachment-tile relative flex-col justify-between items-start gap-2 overflow-hidden p-3", Q.tile, H && !z && !R && Q.hovered, R && Q.loading, b && Q.selected, z && Q.tileError, se && Q.proxyFocus, Z.tile, b && Z.tileSelected), fe = /* @__PURE__ */ J("div", {
+		title: U,
+		className: c(M?.nameClassName ?? "dial-tiny-text", "line-clamp-2 w-full min-w-0 break-words", Q.nameText, Z.tileName),
+		children: n ? /* @__PURE__ */ J(v, {
+			text: U,
 			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,
+		}) : U
+	}), pe = ee && /* @__PURE__ */ Y("div", {
+		className: c("flex w-full items-end gap-1", Z.tileType),
+		children: [ne ? /* @__PURE__ */ J(_, {
+			type: m.File,
+			name: F ?? "",
+			fileExtension: ze(t),
+			size: f.MD,
+			decorative: !0
+		}) : /* @__PURE__ */ J(ee, {
+			size: f.MD,
 			className: Q.typeText,
+			stroke: p,
 			"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
+		}), /* @__PURE__ */ J("span", {
+			className: c(M?.metaClassName ?? "dial-tiny-text", "min-w-0 flex-1 truncate", Q.typeText),
+			children: O ? `${te} · ${O}` : te
 		})]
-	}), de = ie ? {
+	}), me = H ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-label": B ? v : _,
-		onClick: ae,
-		onKeyDown: oe
-	} : {}, fe = /* @__PURE__ */ q(_e, { children: [
-		V,
-		ue,
-		P && /* @__PURE__ */ K("div", {
+		"aria-label": ae ? C : S,
+		onClick: ce,
+		onKeyDown: le
+	} : {}, G = /* @__PURE__ */ Y(_e, { children: [
+		fe,
+		pe,
+		R && /* @__PURE__ */ J("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 })
+			"aria-label": k,
+			className: c("absolute inset-0 flex items-center justify-center rounded-[11px]", Q.track),
+			children: /* @__PURE__ */ J(x, { size: 32 })
 		}),
-		/* @__PURE__ */ q("div", {
-			className: "absolute end-1 top-1 flex gap-1",
+		/* @__PURE__ */ Y("div", {
+			className: "absolute inset-e-1 top-1 flex",
 			children: [
-				ee && /* @__PURE__ */ K(He, {
-					ariaLabel: b,
-					errorTitle: L,
-					errorDescId: I,
+				re && /* @__PURE__ */ J(qe, {
+					ariaLabel: w,
+					errorTitle: V,
+					errorDescId: B,
 					onClick: l,
-					id: A
+					id: P
 				}),
-				te && /* @__PURE__ */ K(Ve, {
-					ariaLabel: x,
-					errorTitle: L,
-					errorDescId: I,
+				ie && /* @__PURE__ */ J(Ke, {
+					ariaLabel: T,
+					errorTitle: V,
+					errorDescId: B,
 					onClick: i,
-					id: A
+					id: P
 				}),
-				u && /* @__PURE__ */ K(Ue, {
-					ariaLabel: C,
-					errorTitle: L,
-					errorDescId: I,
-					onClick: ce
+				u && /* @__PURE__ */ J(Je, {
+					ariaLabel: D,
+					errorTitle: V,
+					errorDescId: B,
+					onClick: ue
 				}),
-				m && /* @__PURE__ */ K(We, {
-					ariaLabel: S,
-					errorTitle: L,
-					errorDescId: I,
-					onClick: m,
-					id: A
+				y && /* @__PURE__ */ J(Ye, {
+					ariaLabel: E,
+					errorTitle: V,
+					errorDescId: B,
+					onClick: y,
+					id: P,
+					isAlwaysVisible: R
 				})
 			]
 		}),
-		F && /* @__PURE__ */ K("span", {
-			id: I,
+		z && /* @__PURE__ */ J("span", {
+			id: B,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: L
+			children: V
 		})
 	] });
-	return /* @__PURE__ */ K("div", {
+	return /* @__PURE__ */ J("div", {
 		style: d,
-		className: c("inline-flex", k),
-		children: /* @__PURE__ */ K("div", {
-			...de,
-			"aria-busy": P,
+		className: c("inline-flex", N),
+		children: /* @__PURE__ */ J("div", {
+			...me,
+			"aria-busy": R,
 			style: d,
-			className: c(le, ie && "cursor-pointer", "focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: fe
+			className: c(de, H && "cursor-pointer", We),
+			children: G
 		})
 	});
-}, qe = /* @__PURE__ */ function(e) {
+}, 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(() => {
+}({}), $e = ({ enabled: e, src: t }) => {
+	let n = ge(null), [r, i] = q("idle");
+	return G(() => {
 		i(e && t ? "loading" : "idle");
-	}, [e, t]), U(() => {
+	}, [e, t]), G(() => {
 		let r = n.current;
 		if (!r || !e || !t) return;
 		let a = () => i("loaded"), o = () => i("error");
@@ -358,67 +374,75 @@ var J = {
 		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 ? {
+}, et = ({ 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", uploadingLabel: _ = "Uploading" } = i ?? {}, { className: v } = l ?? {}, { id: S, name: C } = e, w = e.previewUrl ?? e.url, T = e.type === t.Pasted && n !== void 0, { isLoading: E, isError: D, isImage: O } = K(() => He(e), [e]), k = r !== void 0 && !T && !E && !D, A = T || k, j = !!s && !E, M = !A && Number(!!a) + Number(j) === 1, { imageRef: N, imageLoadStatus: P } = $e({
+		enabled: O,
+		src: w
+	}), F = () => {
+		T && n ? n(S) : k && r && r(S);
+	}, I = A ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-label": C ? m : d,
-		onClick: j,
+		"aria-label": T ? m : d,
+		onClick: F,
 		onKeyDown: (e) => {
-			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j());
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
 		}
-	} : {};
-	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,
+	} : {}, L = c(Ue, "group/attachment-tile", A && "cursor-pointer", Q.tile, u && Q.selected, E && Q.loading, M && Q.proxyFocus, We, v, Z.tile, u && Z.tileSelected);
+	return /* @__PURE__ */ J("div", {
+		className: L,
+		...I,
+		"aria-busy": E,
 		style: o,
-		children: /* @__PURE__ */ q("div", {
+		children: /* @__PURE__ */ Y("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, {
+				/* @__PURE__ */ Y("div", {
+					className: "absolute inset-e-1 top-1 z-10 flex",
+					children: [a && /* @__PURE__ */ J(Ye, {
 						ariaLabel: h,
 						onClick: a,
-						id: b,
-						className: Q.imageActionButton
-					}), s && /* @__PURE__ */ K(He, {
+						id: S,
+						className: Q.imageActionButton,
+						isAlwaysVisible: E
+					}), j && /* @__PURE__ */ J(qe, {
 						ariaLabel: g,
 						onClick: s,
-						id: b,
+						id: S,
 						className: Q.imageActionButton
 					})]
 				}),
-				A !== qe.Loaded && /* @__PURE__ */ K(_, {
-					variant: v.Rectangular,
+				P !== Qe.Loaded && /* @__PURE__ */ J(y, {
+					variant: b.Rectangular,
 					width: "100%",
 					height: "100%",
-					active: A === qe.Loading,
-					overlay: /* @__PURE__ */ K(V, {
+					active: P === Qe.Loading,
+					overlay: /* @__PURE__ */ J(U, {
 						size: f.LG,
-						className: Q.typeText,
+						className: Q.placeholderIcon,
 						"aria-hidden": !0,
 						stroke: p
 					}),
 					className: "absolute inset-0 rounded-xl"
 				}),
-				/* @__PURE__ */ K("img", {
-					ref: k,
-					src: S,
-					alt: x,
+				/* @__PURE__ */ J("img", {
+					ref: N,
+					src: w,
+					alt: C,
 					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")
+					className: c("h-full w-full rounded-xl object-cover transition-opacity duration-200", P === Qe.Loaded ? "opacity-100" : "opacity-0")
+				}),
+				E && /* @__PURE__ */ J("div", {
+					role: "progressbar",
+					"aria-label": _,
+					className: c("absolute inset-0 flex items-center justify-center rounded-xl", Q.track),
+					children: /* @__PURE__ */ J(x, { size: 32 })
 				})
 			]
 		})
 	});
-}, Xe = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: c, labels: l, styles: u, isSelected: d }) => {
+}, tt = ({ 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,
@@ -432,11 +456,12 @@ var J = {
 		"--ai-tile-error-text": f?.errorText,
 		"--ai-tile-name-text": f?.nameText,
 		"--ai-tile-type-text": f?.typeText,
+		"--ai-tile-placeholder-icon": f?.placeholderIcon,
 		"--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, {
+	}), { isImage: h, isLink: g } = K(() => He(e), [e]);
+	return h ? /* @__PURE__ */ J(et, {
 		attachment: e,
 		labels: l,
 		onClick: o,
@@ -446,7 +471,7 @@ var J = {
 		cssVars: m,
 		onDownload: c,
 		isSelected: d
-	}) : /* @__PURE__ */ K(Ke, {
+	}) : /* @__PURE__ */ J(Ze, {
 		attachment: e,
 		searchQuery: n,
 		onClick: o,
@@ -461,32 +486,35 @@ var J = {
 		isExpandable: p,
 		isSelected: d
 	});
-}, Ze = (e) => {
-	let t = l(e);
-	if (!e?.length) return t;
-	let n = /* @__PURE__ */ new Map();
+}, nt = (e, t) => {
+	let n = l(e, t);
+	if (!e?.length) return n;
+	let r = /* @__PURE__ */ new Map();
 	for (let t of e) {
 		let e = t.url ?? t.data ?? t.title;
-		n.has(e) || n.set(e, t.type);
+		r.has(e) || r.set(e, t.type);
 	}
-	return t.map((e) => {
-		let t = n.get(e.id);
+	return n.map((e) => {
+		let t = r.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 }) => {
+}, rt = ({ children: e, codeClassName: t, blockClassName: n = "dial-code-text", copyAriaLabel: i, copiedLabel: a }) => {
+	let o = t?.replace(/^language-/, "") ?? "";
+	return /* @__PURE__ */ J(r, {
+		language: o,
+		value: typeof e == "string" ? e : String(e ?? ""),
+		codeClassName: n,
+		containerClassName: c(X.codeBlock, n),
+		copyLabel: i,
+		copiedLabel: a,
+		hideDownload: !0
+	});
+}, it = 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, {
+	return /* @__PURE__ */ J(i, {
 		content: e,
 		tableScrollRegionAriaLabel: a,
 		mathScrollRegionAriaLabel: o,
@@ -506,216 +534,220 @@ var J = {
 			link: c(t?.contentClassName ?? "dial-tiny-text", X.stageContent),
 			tableCell: c(t?.contentClassName ?? "dial-tiny-text", X.tableCell)
 		},
-		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ K(Qe, {
+		components: { code: ({ children: e, className: i }) => i?.includes("language-") ? /* @__PURE__ */ J(rt, {
 			codeClassName: i,
 			blockClassName: t?.codeBlockClassName,
 			copyAriaLabel: n,
 			copiedLabel: r,
 			children: e
-		}) : /* @__PURE__ */ K("code", {
+		}) : /* @__PURE__ */ J("code", {
 			className: c("px-1 py-0.5", t?.codeClassName ?? "dial-tiny-text rounded-md", X.codeInline),
 			children: e
 		}) }
 	});
-}), et = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
-	let r = H((t) => {
+}), at = ({ attachments: e, clickLabel: t, onAttachmentClick: n }) => {
+	let r = W((t) => {
 		let r = e.find((e) => e.id === t);
 		r && n?.(r);
 	}, [e, n]);
-	return /* @__PURE__ */ K("div", {
+	return /* @__PURE__ */ J("div", {
 		role: "list",
-		className: "flex flex-wrap gap-3",
-		children: e.map((e) => /* @__PURE__ */ K("div", {
+		className: "flex flex-wrap gap-2",
+		children: e.map((e) => /* @__PURE__ */ J("div", {
 			role: "listitem",
-			children: /* @__PURE__ */ K(Xe, {
+			children: /* @__PURE__ */ J(tt, {
 				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", {
+}, ot = ({ stage: e, isLive: t, typography: n, labels: r, nameOverride: i, onAttachmentClick: a, attachmentDisplayResolvers: s, childList: l, isExpanded: u, onToggle: f }) => {
+	let [p, m] = q(!1), h = u ?? p, _ = W((e) => {
+		u === void 0 && m(e), f?.(e);
+	}, [u, f]), { copyAriaLabel: v = "Copy stage content", codeBlockCopiedLabel: y, tableScrollRegionAriaLabel: b, mathScrollRegionAriaLabel: x, runningAriaLabel: S, failedAriaLabel: C, attachmentClickLabel: w = "Preview search result" } = r ?? {}, T = K(() => nt(e.attachments, s), [e.attachments, s]), { name: E, durationLabel: D } = we(e.name), O = i ?? E, k = !i && Te(E), A = e.status === o.Failed, j = !!e.content || !!e.attachments?.length, M = j || l != null, N = /* @__PURE__ */ Y(_e, { children: [
+		/* @__PURE__ */ J("span", {
 			className: "flex flex-none items-center",
-			children: /* @__PURE__ */ K(Me, {
+			children: /* @__PURE__ */ J(Pe, {
 				status: e.status,
 				isLive: t,
-				runningLabel: x,
-				failedLabel: S
+				runningLabel: S,
+				failedLabel: C
 			})
 		}),
-		/* @__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 || "" })
+		/* @__PURE__ */ J("span", {
+			className: c("max-w-[22rem] min-w-0 truncate", n?.fontClassName ?? "dial-small-text", X.stageName, A && X.stageNameFailed, k && X.monoName),
+			children: /* @__PURE__ */ J(g, { text: O || e.status || "" })
 		}),
-		e.tag && /* @__PURE__ */ K("span", {
+		e.tag && /* @__PURE__ */ J("span", {
 			className: c("flex-none", n?.tagClassName ?? "dial-tiny-lead-text", X.tag),
 			children: e.tag
 		}),
-		E && /* @__PURE__ */ K("span", {
+		D && /* @__PURE__ */ J("span", {
 			className: c("flex-none", n?.countFontClassName ?? "dial-tiny-text", X.duration),
-			children: E
+			children: D
 		})
 	] });
-	return j ? /* @__PURE__ */ q(d, {
-		expanded: m,
-		onToggle: g,
-		title: /* @__PURE__ */ K("span", {
+	return M ? /* @__PURE__ */ Y(d, {
+		expanded: h,
+		onToggle: _,
+		title: /* @__PURE__ */ J("span", {
 			className: "flex min-w-0 items-center gap-2",
-			children: M
+			children: N
 		}),
-		className: ke,
-		headerClassName: c(Ae, X.row, X.stageHeader),
+		className: je,
+		headerClassName: c(Me, 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", {
+		children: [h && j && /* @__PURE__ */ Y("div", {
 			className: "flex min-w-0 flex-col gap-3 ps-8",
-			children: [e.content && /* @__PURE__ */ K("div", {
+			children: [e.content && /* @__PURE__ */ J("div", {
 				className: "max-h-[300px] min-w-0 overflow-y-auto",
-				children: /* @__PURE__ */ K($e, {
+				children: /* @__PURE__ */ J(it, {
 					content: e.content,
 					typography: n,
-					copyAriaLabel: _,
-					copiedLabel: v,
-					tableScrollRegionAriaLabel: y,
-					mathScrollRegionAriaLabel: b
+					copyAriaLabel: v,
+					copiedLabel: y,
+					tableScrollRegionAriaLabel: b,
+					mathScrollRegionAriaLabel: x
 				})
-			}), w.length > 0 && /* @__PURE__ */ K(et, {
-				attachments: w,
-				clickLabel: C,
+			}), T.length > 0 && /* @__PURE__ */ J(at, {
+				attachments: T,
+				clickLabel: w,
 				onAttachmentClick: a
 			})]
-		}), m && s]
-	}) : /* @__PURE__ */ K("div", {
+		}), h && l]
+	}) : /* @__PURE__ */ J("div", {
 		className: c("flex w-full items-center gap-2 px-2 py-1.5", X.row),
-		children: M
+		children: N
 	});
-}, 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, {
+}, st = (e) => e <= 3 ? "ps-4" : "ps-0", ct = (e) => e <= 3 ? "ps-6" : "ps-0", lt = ({ node: e, depth: t, nameOverride: n, isStreaming: r, expansion: i, typography: a, labels: o, onAttachmentClick: s, attachmentDisplayResolvers: c }) => {
+	let l = ke(e.stage.index), u = t + 1;
+	return /* @__PURE__ */ J(ot, {
 		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, {
+		attachmentDisplayResolvers: c,
+		isExpanded: i.isExpanded(l),
+		onToggle: (e) => i.onToggle(l, e),
+		childList: e.children.length > 0 ? /* @__PURE__ */ J(dt, {
 			nodes: e.children,
-			depth: l,
-			className: nt(l),
+			depth: u,
+			className: st(u),
 			isStreaming: r,
 			expansion: i,
 			typography: a,
 			labels: o,
-			onAttachmentClick: s
+			onAttachmentClick: s,
+			attachmentDisplayResolvers: c
 		}) : 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
-					})
-				}),
-				/* @__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]
+}, ut = ({ row: e, depth: t, isStreaming: n, expansion: r, typography: i, labels: a, onAttachmentClick: s, attachmentDisplayResolvers: l }) => {
+	let { runningAriaLabel: u, failedAriaLabel: f, attemptLabel: p = (e) => `Attempt ${e}` } = a ?? {}, m = e.attempts ?? [], h = m.some((e) => e.stage.status == null), _ = m.some((e) => e.stage.status === o.Failed), v = o.Completed;
+	h ? v = null : _ && (v = o.Failed);
+	let y = Ae(e.key), b = r.isExpanded(y), x = t + 1, S = /* @__PURE__ */ Y("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [
+			/* @__PURE__ */ J("span", {
+				className: "flex flex-none items-center",
+				children: /* @__PURE__ */ J(Pe, {
+					status: v,
+					isLive: n && h,
+					runningLabel: u,
+					failedLabel: f
 				})
-			]
-		}),
-		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", {
+			}),
+			/* @__PURE__ */ J("span", {
+				className: c("max-w-[22rem] min-w-0 truncate", i?.fontClassName ?? "dial-small-text", X.stageName, _ && X.stageNameFailed),
+				children: /* @__PURE__ */ J(g, { text: e.name })
+			}),
+			/* @__PURE__ */ Y("span", {
+				className: c("flex-none", i?.countFontClassName ?? "dial-tiny-text", X.count),
+				children: ["×", m.length]
+			})
+		]
+	});
+	return /* @__PURE__ */ J(d, {
+		title: S,
+		expanded: b,
+		onToggle: (e) => r.onToggle(y, e),
+		className: je,
+		headerClassName: c(Me, X.collapseButton, X.row, X.stageHeader),
+		contentClassName: c("-mt-2 min-w-0 px-0", ct(x), X.stageRegion),
+		children: /* @__PURE__ */ J("ul", {
 			role: "list",
 			className: "flex min-w-0 flex-col gap-0.5",
-			children: y && p.map((e, t) => /* @__PURE__ */ K("li", {
+			children: b && m.map((e, t) => /* @__PURE__ */ J("li", {
 				role: "listitem",
 				className: "min-w-0",
-				children: /* @__PURE__ */ K(it, {
+				children: /* @__PURE__ */ J(lt, {
 					node: e,
-					depth: b,
-					nameOverride: f(t + 1),
+					depth: x,
+					nameOverride: p(t + 1),
 					isStreaming: n,
 					expansion: r,
 					typography: i,
 					labels: a,
-					onAttachmentClick: s
+					onAttachmentClick: s,
+					attachmentDisplayResolvers: l
 				})
 			}, e.stage.index))
 		})
 	});
-}, ot = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ K("ul", {
+}, dt = ({ nodes: e, depth: t, className: n, ...r }) => /* @__PURE__ */ J("ul", {
 	role: "list",
 	className: c("flex min-w-0 flex-col gap-0.5", n),
-	children: je(e).map((e) => /* @__PURE__ */ K("li", {
+	children: Ne(e).map((e) => /* @__PURE__ */ J("li", {
 		role: "listitem",
 		className: "min-w-0",
-		children: e.node ? /* @__PURE__ */ K(it, {
+		children: e.node ? /* @__PURE__ */ J(lt, {
 			node: e.node,
 			depth: t,
 			...r
-		}) : /* @__PURE__ */ K(at, {
+		}) : /* @__PURE__ */ J(ut, {
 			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,
+}), ft = ({ stages: e, isStreaming: t, className: n, styles: r, labels: i, onAttachmentClick: a, attachmentDisplayResolvers: o, expansion: l }) => {
+	let { colors: u, typography: d } = r ?? {}, f = s({
+		"--cs-text": u?.text,
+		"--cs-row-hover": u?.rowHoverColor,
+		"--cs-button-bg": u?.collapsedButtonBg,
+		"--cs-stage-text": u?.stageTextColor,
+		"--cs-failed-text": u?.failedColor,
+		"--cs-tag-text": u?.tagTextColor,
+		"--cs-count-text": u?.countTextColor,
+		"--cs-duration-text": u?.durationTextColor,
+		"--cs-icon-secondary": u?.iconSecondaryColor,
+		"--cs-icon-completed": u?.iconCompletedColor,
+		"--cs-icon-error": u?.iconErrorColor,
+		"--cs-code-bg": u?.codeBg,
+		"--cs-code-border": u?.codeBorderColor,
+		"--cs-code-text": u?.codeTextColor,
+		"--cs-border": u?.borderColor
+	}), p = K(() => Oe(e), [e]);
+	return /* @__PURE__ */ J("div", {
+		style: f,
+		className: c("w-full min-w-0", X.panel, n, ve.panel),
+		children: /* @__PURE__ */ J(dt, {
+			nodes: p,
 			depth: 0,
 			className: "w-full ps-5",
 			isStreaming: t,
-			expansion: o,
-			typography: u,
+			expansion: l,
+			typography: d,
 			labels: i,
-			onAttachmentClick: a
+			onAttachmentClick: a,
+			attachmentDisplayResolvers: o
 		})
 	});
-}, ct = (e) => {
-	let t = ve();
-	return /* @__PURE__ */ K(st, {
+}, pt = (e) => {
+	let t = ye();
+	return /* @__PURE__ */ J(ft, {
 		...e,
 		expansion: t
 	});
@@ -726,141 +758,143 @@ var J = {
 	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();
+}, mt = ({ stages: e, isStreaming: t, labels: n, className: r, styles: i, onAttachmentClick: a, attachmentDisplayResolvers: l }) => {
+	let { executedLabel: u = "Executed", stepsLabel: m = () => "steps", failedCountLabel: h = (e) => `${e} failed`, runningAriaLabel: _ = "Running", copyAriaLabel: v, codeBlockCopiedLabel: y, tableScrollRegionAriaLabel: b, mathScrollRegionAriaLabel: S, failedAriaLabel: C, attemptLabel: T, attachmentClickLabel: E } = n ?? {}, [D, O] = q(t), k = ye(), { reset: A } = k, j = e.length > 1;
+	G(() => {
+		j && !D && A();
 	}, [
-		A,
-		E,
-		k
+		j,
+		D,
+		A
 	]);
-	let j = ge(t);
-	U(() => {
-		j.current && !t && D(!1), j.current = t;
+	let M = ge(t);
+	G(() => {
+		M.current && !t && O(!1), M.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
+	let { colors: N, panel: P } = i ?? {}, F = i?.typography ?? { fontClassName: "dial-small-text" }, I = s({
+		"--cs-cg-label": N?.labelColor,
+		"--cs-cg-label-hover": N?.labelHoverColor,
+		"--cs-cg-done": N?.doneColor,
+		"--cs-cg-failed": N?.failedColor,
+		"--cs-text": P?.text,
+		"--cs-row-hover": P?.rowHoverColor,
+		"--cs-button-bg": P?.collapsedButtonBg,
+		"--cs-stage-text": P?.stageTextColor,
+		"--cs-failed-text": P?.failedColor,
+		"--cs-tag-text": P?.tagTextColor,
+		"--cs-count-text": P?.countTextColor,
+		"--cs-duration-text": P?.durationTextColor,
+		"--cs-icon-secondary": P?.iconSecondaryColor,
+		"--cs-icon-completed": P?.iconCompletedColor,
+		"--cs-icon-error": P?.iconErrorColor,
+		"--cs-code-bg": P?.codeBg,
+		"--cs-code-border": P?.codeBorderColor,
+		"--cs-code-text": P?.codeTextColor,
+		"--cs-border": P?.borderColor
 	});
 	if (e.length === 0) return null;
-	let I = {
-		copyAriaLabel: _,
-		codeBlockCopiedLabel: v,
+	let L = {
+		copyAriaLabel: v,
+		codeBlockCopiedLabel: y,
 		tableScrollRegionAriaLabel: b,
-		mathScrollRegionAriaLabel: x,
-		runningAriaLabel: g,
+		mathScrollRegionAriaLabel: S,
+		runningAriaLabel: _,
 		failedAriaLabel: C,
-		attemptLabel: w,
-		attachmentClickLabel: T
+		attemptLabel: T,
+		attachmentClickLabel: E
 	};
-	if (e.length === 1) return /* @__PURE__ */ K(st, {
+	if (e.length === 1) return /* @__PURE__ */ J(ft, {
 		stages: e,
 		isStreaming: t,
-		expansion: O,
+		expansion: k,
 		className: r,
 		styles: {
-			colors: N,
+			colors: P,
 			typography: i?.typography
 		},
-		labels: I,
-		onAttachmentClick: a
+		labels: L,
+		onAttachmentClick: a,
+		attachmentDisplayResolvers: l
 	});
-	let L = e.some((e) => e.status === o.Failed), R;
+	let R = e.some((e) => e.status === o.Failed), z;
 	if (t) {
-		let t = Y((we(e) ?? e[e.length - 1]).name).name;
-		R = /* @__PURE__ */ q("span", {
+		let t = we((Ee(e) ?? e[e.length - 1]).name).name;
+		z = /* @__PURE__ */ Y("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ K("span", {
+			children: [/* @__PURE__ */ J("span", {
 				className: "flex flex-none items-center",
-				children: /* @__PURE__ */ K(y, {
+				children: /* @__PURE__ */ J(x, {
 					size: 14,
-					ariaLabel: g
+					ariaLabel: _
 				})
-			}), t && /* @__PURE__ */ K("span", {
-				className: c("min-w-0 max-w-[22rem] truncate", P.fontClassName, $.liveName),
-				children: /* @__PURE__ */ K(h, { text: t })
+			}), t && /* @__PURE__ */ J("span", {
+				className: c("max-w-[22rem] min-w-0 truncate", F.fontClassName, $.liveName),
+				children: /* @__PURE__ */ J(g, { text: t })
 			})]
 		});
-	} else if (L) {
+	} else if (R) {
 		let t = e.filter((e) => e.status === o.Failed).length;
-		R = /* @__PURE__ */ q("span", {
+		z = /* @__PURE__ */ Y("span", {
 			className: "inline-flex items-center gap-1",
-			children: [/* @__PURE__ */ q("span", {
-				className: c(P.fontClassName, $.executedLabel),
+			children: [/* @__PURE__ */ Y("span", {
+				className: c(F.fontClassName, $.executedLabel),
 				children: [
-					l,
+					u,
 					" ",
 					e.length,
 					" ",
-					u(e.length)
+					m(e.length)
 				]
-			}), /* @__PURE__ */ K("span", {
-				className: c(P.fontClassName, $.failedText),
-				children: m(t)
+			}), /* @__PURE__ */ J("span", {
+				className: c(F.fontClassName, $.failedText),
+				children: h(t)
 			})]
 		});
-	} else R = /* @__PURE__ */ q("span", {
+	} else z = /* @__PURE__ */ Y("span", {
 		className: "inline-flex items-center gap-1",
-		children: [/* @__PURE__ */ K(S, {
+		children: [/* @__PURE__ */ J(w, {
 			size: f.SM,
 			className: $.doneIcon,
 			"aria-hidden": !0,
 			stroke: p
-		}), /* @__PURE__ */ q("span", {
-			className: c(P.fontClassName, $.executedLabel),
+		}), /* @__PURE__ */ Y("span", {
+			className: c(F.fontClassName, $.executedLabel),
 			children: [
-				l,
+				u,
 				" ",
 				e.length,
 				" ",
-				u(e.length)
+				m(e.length)
 			]
 		})]
 	});
-	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,
+	return /* @__PURE__ */ J("div", {
+		style: I,
+		className: c("flex w-full flex-col gap-1", r, ve.group),
+		children: /* @__PURE__ */ J(d, {
+			title: z,
+			expanded: D,
+			onToggle: O,
 			className: "overflow-visible py-0",
-			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, J.groupToggle),
+			headerClassName: c("justify-start gap-1 rounded-none px-0", $.toggleButton, ve.groupToggle),
 			contentClassName: c("-mt-2 px-0", $.groupRegion),
-			children: E && /* @__PURE__ */ K(st, {
+			children: D && /* @__PURE__ */ J(ft, {
 				stages: e,
 				isStreaming: t,
-				expansion: O,
+				expansion: k,
 				styles: {
-					colors: N,
+					colors: P,
 					typography: i?.typography
 				},
-				labels: I,
+				labels: L,
 				className: "pt-1",
-				onAttachmentClick: a
+				onAttachmentClick: a,
+				attachmentDisplayResolvers: l
 			})
 		})
 	});
 };
 //#endregion
-export { J as CONVERSATION_STAGES_CLASS, lt as CollapsedGroup, ct as StagesPanel };
+export { ve as CONVERSATION_STAGES_CLASS, mt as CollapsedGroup, pt as StagesPanel };