@epam/ai-dial-conversation-stages 1.0.0-dev.502 → 1.0.0-dev.503

package/index.js

@@ -1,6 +1,6 @@
 import { AttachmentErrorReason as e, AttachmentType as t, CodeBlockTheme as n, Highlight as r, MIME_TYPE_EXT_MAP as i, MarkdownRenderer as a, RequestStatus as o, ResponseFormat as s, StageStatus as c, buildCssVars as l, copyToClipboard as u, mergeClasses as d, messageAttachmentToDisplayAttachment as f } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as p, DialEllipsisTooltip as m, DialGhostIconButton as h, DialInput as g, DialLinkButton as _, DialPopup as v, DialPrimaryButton as y, DialRadioGroup as b, DialSkeleton as x, DialSkeletonVariant as S, DialSlider as C, DialSpinner as w, DialTag as T, DialTooltip as E, ElementSize as D, PopupSize as O, RadioGroupOrientation as k } from "@epam/ai-dial-ui-kit";
-import { IconAlertCircle as A, IconCheck as j, IconChevronDown as M, IconChevronRight as N, IconChevronUp as P, IconCircleCheck as F, IconClipboard as I, IconCopy as L, IconDownload as ee, IconFile as R, IconFileTypeBmp as z, IconFileTypeCss as B, IconFileTypeCsv as V, IconFileTypeDoc as te, IconFileTypeDocx as ne, IconFileTypeHtml as re, IconFileTypeJpg as ie, IconFileTypeJs as H, IconFileTypeJsx as ae, IconFileTypePdf as oe, IconFileTypePhp as U, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as W, IconFileTypeSql as le, IconFileTypeSvg as ue, IconFileTypeTs as de, IconFileTypeTsx as fe, IconFileTypeTxt as pe, IconFileTypeVue as me, IconFileTypeXls as he, IconFileTypeXml as ge, IconFileTypeZip as _e, IconMusic as ve, IconPaperclip as ye, IconPhoto as be, IconReload as xe, IconTerminal2 as Se, IconVideo as Ce, IconX as we } from "@tabler/icons-react";
+import { DIAL_ICON_SIZE as p, DialEllipsisTooltip as m, DialGhostIconButton as h, DialInput as g, DialLinkButton as _, DialPopup as v, DialPrimaryButton as y, DialRadioGroup as b, DialSkeleton as ee, DialSkeletonVariant as x, DialSlider as S, DialSpinner as C, DialTag as w, DialTooltip as T, ElementSize as E, PopupSize as D, RadioGroupOrientation as O } from "@epam/ai-dial-ui-kit";
+import { IconAlertCircle as k, IconCheck as A, IconChevronDown as j, IconChevronRight as M, IconChevronUp as N, IconCircleCheck as P, IconClipboard as F, IconCopy as I, IconDownload as te, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as ne, IconFileTypeHtml as re, IconFileTypeJpg as ie, IconFileTypeJs as H, IconFileTypeJsx as ae, IconFileTypePdf as U, IconFileTypePhp as W, IconFileTypePng as oe, IconFileTypePpt as se, IconFileTypeRs as ce, IconFileTypeSql as le, IconFileTypeSvg as ue, IconFileTypeTs as de, IconFileTypeTsx as fe, IconFileTypeTxt as pe, IconFileTypeVue as me, IconFileTypeXls as he, IconFileTypeXml as ge, IconFileTypeZip as _e, IconMusic as ve, IconPaperclip as ye, IconPhoto as be, IconReload as xe, IconTerminal2 as Se, IconVideo as Ce, IconX as we } from "@tabler/icons-react";
 import { memo as Te, useCallback as Ee, useEffect as De, useId as Oe, useMemo as ke, useRef as Ae, useState as G } from "react";
 import "react-dom";
 import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
@@ -40,24 +40,24 @@ var je = /* @__PURE__ */ function(e) {
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
 }, Fe = (e) => {
-	if (!e) return R;
+	if (!e) return L;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
 		case "image/jpg": return ie;
-		case "image/png": return se;
+		case "image/png": return oe;
 		case "image/svg+xml": return ue;
-		case "image/bmp": return z;
+		case "image/bmp": return R;
 		default: return be;
 	}
 	if (e.startsWith("video/")) return Ce;
 	if (e.startsWith("audio/")) return ve;
 	switch (e) {
-		case "application/pdf": return oe;
+		case "application/pdf": return U;
 		case "application/msword":
-		case "application/vnd.ms-word": return te;
+		case "application/vnd.ms-word": return V;
 		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ne;
-		case "application/vnd.ms-powerpoint": return ce;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ce;
+		case "application/vnd.ms-powerpoint": return se;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return se;
 		case "application/vnd.ms-excel": return he;
 		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return he;
 		case "application/zip":
@@ -66,7 +66,7 @@ var je = /* @__PURE__ */ function(e) {
 		case "application/x-7z-compressed":
 		case "application/gzip":
 		case "application/x-tar": return _e;
-		case "text/csv": return V;
+		case "text/csv": return B;
 		case "text/plain": return pe;
 		case "text/html":
 		case "application/xhtml+xml": return re;
@@ -80,17 +80,17 @@ var je = /* @__PURE__ */ function(e) {
 		case "application/typescript":
 		case "text/typescript": return de;
 		case "text/tsx": return fe;
-		case "text/css": return B;
+		case "text/css": return z;
 		case "text/x-php":
-		case "application/x-php": return U;
+		case "application/x-php": return W;
 		case "text/x-rustsrc":
-		case "application/x-rust": return W;
+		case "application/x-rust": return ce;
 		case "text/x-vue": return me;
-		default: return R;
+		default: return L;
 	}
 }, Ie = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? Se : n === t.Pasted ? I : n === t.Image ? be : Fe(r ?? "");
+	return n === t.Prompt ? Se : n === t.Pasted ? F : n === t.Image ? be : Fe(r ?? "");
 }, Le = (e) => {
 	let t = e.toLowerCase().split(";")[0].trim(), n = i[t];
 	if (n) return n;
@@ -133,47 +133,59 @@ var je = /* @__PURE__ */ function(e) {
 	visibleCount: 4,
 	hiddenCount: e - 4
 }, Ve = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: u, shouldAlwaysShowActions: f, labels: m, typeLabels: g, styles: _, showHoverDownloadIcon: v = !1, className: y }) => {
-	let { removeLabel: b = "Remove attachment", retryLabel: C = "Retry upload", clickLabel: T = "Open attachment", expandLabel: E = "Expand pasted text", loadingLabel: O = "Loading attachment", uploadFailedStatusLabel: k = "Upload failed" } = m ?? {}, { colors: A, typography: j, roundedClassName: M = "rounded-xl" } = _ ?? {}, { id: N, name: P } = n, F = n.previewUrl ?? n.url, I = n.type === t.Pasted, L = I && s !== void 0, R = ke(() => I ? P : Pe(P), [I, P]), z = l({
-		"--ci-card-border": A?.border,
-		"--ci-card-bg": A?.background,
-		"--ci-card-name": A?.nameText,
-		"--ci-card-meta": A?.metaText
-	}), { isLoading: B, isError: V, isImage: te, isAudio: ne, areActionsVisible: re, BottomIcon: ie, typeLabel: H, cardColorClass: ae, removeBtnClass: oe } = ke(() => ze(n, u ?? !1, f ?? !1, g), [
+	let { removeLabel: b = "Remove attachment", retryLabel: S = "Retry upload", clickLabel: w = "Open attachment", expandLabel: T = "Expand pasted text", loadingLabel: D = "Loading attachment", uploadFailedStatusLabel: O = "Upload failed" } = m ?? {}, { colors: k, typography: A, roundedClassName: j = "rounded-xl" } = _ ?? {}, { id: M, name: N } = n, P = n.previewUrl ?? n.url, F = n.type === t.Pasted, I = F && s !== void 0, L = ke(() => F ? N : Pe(N), [F, N]), R = l({
+		"--ci-card-border": k?.border,
+		"--ci-card-bg": k?.background,
+		"--ci-card-name": k?.nameText,
+		"--ci-card-meta": k?.metaText,
+		"--ci-card-border-error": k?.borderError,
+		"--ci-card-bg-selected": k?.backgroundSelected,
+		"--ci-card-border-selected": k?.borderSelected,
+		"--ci-card-bg-hover": k?.backgroundHover,
+		"--ci-loading-overlay-bg": k?.loadingOverlayBackground,
+		"--ci-card-action-color": k?.actionColor,
+		"--ci-card-remove-bg-hover": k?.actionBackgroundHover,
+		"--ci-card-focus-outline": k?.focusOutline,
+		"--ci-card-remove-bg": k?.removeBackground,
+		"--ci-card-remove-color": k?.removeColor,
+		"--ci-card-hover-icon-bg": k?.hoverIconBackground,
+		"--ci-card-hover-icon-color": k?.hoverIconColor
+	}), { isLoading: z, isError: B, isImage: V, isAudio: ne, areActionsVisible: re, BottomIcon: ie, typeLabel: H, cardColorClass: ae, removeBtnClass: U } = ke(() => ze(n, u ?? !1, f ?? !1, g), [
 		n,
 		u,
 		f,
 		g
-	]), U = c !== void 0 && !L && !B && !V, se = L || U, { imageRef: ce, imageLoadStatus: W } = Me({
-		enabled: te,
-		src: F
+	]), W = c !== void 0 && !I && !z && !B, oe = I || W, { imageRef: se, imageLoadStatus: ce } = Me({
+		enabled: V,
+		src: P
 	}), le = () => {
-		L && s ? s(N) : U && c && c(N);
+		I && s ? s(M) : W && c && c(M);
 	}, ue = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), le());
 	};
 	if (ne) return /* @__PURE__ */ J("div", {
-		style: z,
-		className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", M, ae, y),
+		style: R,
+		className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", j, ae, y),
 		children: [/* @__PURE__ */ J("div", {
 			className: "flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ q("span", {
 				title: n.name,
-				className: d(j?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.name),
+				className: d(A?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.name),
 				children: i ? /* @__PURE__ */ q(r, {
 					text: n.name,
 					query: i,
 					maxLines: 1
 				}) : n.name
 			}), c && /* @__PURE__ */ q(h, {
-				icon: /* @__PURE__ */ q(ee, {
+				icon: /* @__PURE__ */ q(te, {
 					size: p.SM,
 					"aria-hidden": !0
 				}),
-				size: D.Small,
-				className: d("h-6 w-6 shrink-0 rounded", oe),
-				"aria-label": T,
+				size: E.Small,
+				className: d("h-6 w-6 shrink-0 rounded", U),
+				"aria-label": w,
 				onClick: (e) => {
-					e.stopPropagation(), c(N);
+					e.stopPropagation(), c(M);
 				}
 			})]
 		}), n.playUrl && /* @__PURE__ */ q("audio", {
@@ -184,29 +196,29 @@ var je = /* @__PURE__ */ function(e) {
 			preload: "metadata"
 		})]
 	});
-	let de = d("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", M, ae, !te && "flex-col gap-3 p-3", se && "cursor-pointer", y), fe = /* @__PURE__ */ J(K, { children: [
-		te ? /* @__PURE__ */ J("div", {
+	let de = d("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", j, ae, !V && "flex-col gap-3 p-3", oe && "cursor-pointer", y), fe = /* @__PURE__ */ J(K, { children: [
+		V ? /* @__PURE__ */ J("div", {
 			className: "relative h-full w-full overflow-hidden",
-			children: [W !== je.Loaded && /* @__PURE__ */ q(x, {
-				variant: S.Rectangular,
+			children: [ce !== je.Loaded && /* @__PURE__ */ q(ee, {
+				variant: x.Rectangular,
 				width: "100%",
 				height: "100%",
-				active: W === je.Loading,
+				active: ce === je.Loading,
 				overlay: /* @__PURE__ */ q(be, {
 					size: p.LG,
-					className: j?.placeholderIconClassName ?? "text-secondary",
+					className: A?.placeholderIconClassName ?? "text-secondary",
 					"aria-hidden": !0
 				}),
-				className: d("absolute inset-0", M)
+				className: d("absolute inset-0", j)
 			}), /* @__PURE__ */ q("img", {
-				ref: ce,
-				src: F,
-				alt: P,
+				ref: se,
+				src: P,
+				alt: N,
 				loading: "lazy",
 				decoding: "async",
-				className: d("h-full w-full object-cover transition-opacity duration-200", W === je.Loaded ? "opacity-100" : "opacity-0", M)
+				className: d("h-full w-full object-cover transition-opacity duration-200", ce === je.Loaded ? "opacity-100" : "opacity-0", j)
 			})]
-		}) : V ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
+		}) : B ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
 			children: [/* @__PURE__ */ q(ie, {
 				size: p.SM,
@@ -214,30 +226,30 @@ var je = /* @__PURE__ */ function(e) {
 				"aria-hidden": !0
 			}), /* @__PURE__ */ q("span", {
 				title: H,
-				className: d(j?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
+				className: d(A?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
 				children: H
 			})]
 		}), /* @__PURE__ */ q("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ q("div", {
-				title: R,
-				className: d(j?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
+				title: L,
+				className: d(A?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
 				children: i ? /* @__PURE__ */ q(r, {
-					text: R,
+					text: L,
 					query: i,
 					maxLines: 3
-				}) : R
+				}) : L
 			})
 		})] }) : /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ q("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ q("div", {
-				title: R,
-				className: d(j?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
+				title: L,
+				className: d(A?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
 				children: i ? /* @__PURE__ */ q(r, {
-					text: R,
+					text: L,
 					query: i,
 					maxLines: 3
-				}) : R
+				}) : L
 			})
 		}), /* @__PURE__ */ J("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
@@ -247,15 +259,15 @@ var je = /* @__PURE__ */ function(e) {
 				"aria-hidden": !0
 			}), /* @__PURE__ */ q("span", {
 				title: H,
-				className: d(j?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
+				className: d(A?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
 				children: H
 			})]
 		})] }),
-		B && /* @__PURE__ */ q("span", {
-			className: d("absolute inset-0 flex items-center justify-center", M, Y.loadingOverlay),
-			children: /* @__PURE__ */ q(w, {
+		z && /* @__PURE__ */ q("span", {
+			className: d("absolute inset-0 flex items-center justify-center", j, Y.loadingOverlay),
+			children: /* @__PURE__ */ q(C, {
 				size: 40,
-				ariaLabel: O,
+				ariaLabel: D,
 				className: "z-50"
 			})
 		}),
@@ -263,21 +275,21 @@ var je = /* @__PURE__ */ function(e) {
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: V ? k : ""
+			children: B ? O : ""
 		}),
-		!B && /* @__PURE__ */ J("div", {
+		!z && /* @__PURE__ */ J("div", {
 			className: d("absolute end-1 top-1 flex gap-1 transition-opacity", re ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
 			children: [
-				V && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(h, {
+				B && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(h, {
 					icon: /* @__PURE__ */ q(xe, {
 						size: p.SM,
 						"aria-hidden": !0
 					}),
-					size: D.Small,
-					className: d("h-6 w-6 rounded", oe),
-					"aria-label": C,
+					size: E.Small,
+					className: d("h-6 w-6 rounded", U),
+					"aria-label": S,
 					onClick: (e) => {
-						e.stopPropagation(), o(N);
+						e.stopPropagation(), o(M);
 					}
 				}),
 				a && /* @__PURE__ */ q(h, {
@@ -285,14 +297,14 @@ var je = /* @__PURE__ */ function(e) {
 						size: p.SM,
 						"aria-hidden": !0
 					}),
-					size: D.Small,
-					className: d("h-6 w-6 rounded", oe),
+					size: E.Small,
+					className: d("h-6 w-6 rounded", U),
 					"aria-label": b,
 					onClick: (e) => {
-						e.stopPropagation(), a?.(N);
+						e.stopPropagation(), a?.(M);
 					}
 				}),
-				v && !a && !V && /* @__PURE__ */ q(ee, {
+				v && !a && !B && /* @__PURE__ */ q(te, {
 					size: p.SM,
 					"aria-hidden": !0,
 					className: d("h-6 w-6 rounded-lg p-1", Y.hoverDownloadIcon)
@@ -300,148 +312,181 @@ var je = /* @__PURE__ */ function(e) {
 			]
 		})
 	] });
-	return se ? /* @__PURE__ */ q("div", {
-		style: z,
+	return oe ? /* @__PURE__ */ q("div", {
+		style: R,
 		className: de,
 		onClick: le,
 		onKeyDown: ue,
 		tabIndex: 0,
 		role: "button",
-		"aria-label": U ? T : L ? E : void 0,
+		"aria-label": W ? w : I ? T : void 0,
 		children: fe
 	}) : /* @__PURE__ */ q("div", {
-		style: z,
+		style: R,
 		className: de,
 		children: fe
 	});
 }, X = {
-	tile: "_tile_488nu_1",
-	tileLight: "_tileLight_488nu_12",
-	tileError: "_tileError_488nu_16",
-	nameText: "_nameText_488nu_23",
-	typeText: "_typeText_488nu_24",
-	retryIcon: "_retryIcon_488nu_36",
-	hoverIcon: "_hoverIcon_488nu_40",
-	track: "_track_488nu_45",
-	indeterminateFill: "_indeterminateFill_488nu_49",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_488nu_1"
+	tile: "_tile_1l1lz_1",
+	tileLight: "_tileLight_1l1lz_12",
+	tileError: "_tileError_1l1lz_16",
+	nameText: "_nameText_1l1lz_23",
+	typeText: "_typeText_1l1lz_24",
+	retryIcon: "_retryIcon_1l1lz_36",
+	hoverIcon: "_hoverIcon_1l1lz_40",
+	track: "_track_1l1lz_45",
+	indeterminateFill: "_indeterminateFill_1l1lz_49",
+	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_1l1lz_1"
 }, He = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, Ue = ({ attachment: t, onClick: r, onRetry: i, labels: a, typeLabels: s, styles: c, theme: l = n.Dark, className: u }) => {
-	let { clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", sizeLabel: g, uploadingLabel: _ = "Uploading", errorReasonLabels: v, genericErrorLabel: y = "Upload failed" } = a ?? {}, { nameClassName: b = "dial-caption-text", metaClassName: x = "dial-caption-text" } = c ?? {}, { id: S, name: C, status: w, errorReason: T } = t, E = w === o.Loading, O = w === o.Error, k = Oe(), A = O && (T && (v?.[T] ?? He[T]) || y), { BottomIcon: j, typeLabel: M } = ze(t, !1, !1, s), N = !O && !E && r !== void 0, P = O && !!i && T !== e.UnsupportedType, F = N || P ? "pe-5" : void 0, I = () => {
-		N && r?.(t);
-	}, L = (e) => {
-		(e.key === "Enter" || e.key === " ") && N && (e.preventDefault(), I());
-	}, R = d("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", X.tile, !O && l === n.Light && X.tileLight, O && X.tileError), z = /* @__PURE__ */ q("div", {
-		title: C,
-		className: d(b, "line-clamp-2 min-w-0 break-words", X.nameText, !O && F),
-		children: C
-	}), B = /* @__PURE__ */ J("div", {
-		className: d("flex items-center gap-1 overflow-hidden", O && F),
-		children: [/* @__PURE__ */ q(j, {
+}, Ue = ({ attachment: t, onClick: r, onRetry: i, labels: a, typeLabels: s, styles: c, theme: u = n.Dark, className: f }) => {
+	let { clickLabel: m = "Download attachment", retryLabel: g = "Retry upload", sizeLabel: _, uploadingLabel: v = "Uploading", errorReasonLabels: y, genericErrorLabel: b = "Upload failed" } = a ?? {}, { nameClassName: ee = "dial-caption-text", metaClassName: x = "dial-caption-text", colors: S } = c ?? {}, C = l({
+		"--ci-tile-bg": S?.background,
+		"--ci-tile-border": S?.border,
+		"--ci-tile-border-hover": S?.borderHover,
+		"--ci-tile-focus-outline": S?.focusOutline,
+		"--ci-tile-bg-error": S?.backgroundError,
+		"--ci-tile-border-error": S?.borderError,
+		"--ci-tile-error-text": S?.errorText,
+		"--ci-tile-name-text": S?.nameText,
+		"--ci-tile-type-text": S?.typeText,
+		"--ci-tile-hover-icon-bg": S?.hoverIconBackground,
+		"--ci-tile-hover-icon-color": S?.hoverIconColor,
+		"--ci-tile-track-bg": S?.trackBackground,
+		"--ci-tile-fill-bg": S?.fillBackground
+	}), { id: w, name: T, status: D, errorReason: O } = t, k = D === o.Loading, A = D === o.Error, j = Oe(), M = A && (O && (y?.[O] ?? He[O]) || b), { BottomIcon: N, typeLabel: P } = ze(t, !1, !1, s), F = !A && !k && r !== void 0, I = A && !!i && O !== e.UnsupportedType, L = F || I ? "pe-5" : void 0, R = () => {
+		F && r?.(t);
+	}, z = (e) => {
+		(e.key === "Enter" || e.key === " ") && F && (e.preventDefault(), R());
+	}, B = d("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", X.tile, !A && u === n.Light && X.tileLight, A && X.tileError), V = /* @__PURE__ */ q("div", {
+		title: T,
+		className: d(ee, "line-clamp-2 min-w-0 break-words", X.nameText, !A && L),
+		children: T
+	}), ne = /* @__PURE__ */ J("div", {
+		className: d("flex items-center gap-1 overflow-hidden", A && L),
+		children: [/* @__PURE__ */ q(N, {
 			size: 16,
 			className: X.typeText,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ q("span", {
 			className: d(x, "truncate", X.typeText),
-			children: g ? `${M} · ${g}` : M
+			children: _ ? `${P} · ${_}` : P
 		})]
-	}), V = /* @__PURE__ */ J(K, { children: [
-		O ? /* @__PURE__ */ J(K, { children: [B, z] }) : /* @__PURE__ */ J(K, { children: [z, B] }),
-		E && /* @__PURE__ */ q("div", {
+	}), re = /* @__PURE__ */ J(K, { children: [
+		A ? /* @__PURE__ */ J(K, { children: [ne, V] }) : /* @__PURE__ */ J(K, { children: [V, ne] }),
+		k && /* @__PURE__ */ q("div", {
 			role: "progressbar",
-			"aria-label": _,
+			"aria-label": v,
 			className: d("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", X.track),
 			children: /* @__PURE__ */ q("div", { className: d("h-full w-1/3 rounded-full", X.indeterminateFill) })
 		}),
-		N && /* @__PURE__ */ q(ee, {
+		F && /* @__PURE__ */ q(te, {
 			size: p.SM,
 			"aria-hidden": !0,
 			className: d("absolute end-1 top-1 h-6 w-6 rounded-lg p-1 opacity-0 transition-opacity group-hover:opacity-100 mobile:opacity-100", X.hoverIcon)
 		}),
-		P && /* @__PURE__ */ q(h, {
+		I && /* @__PURE__ */ q(h, {
 			icon: /* @__PURE__ */ q(xe, {
 				size: p.SM,
 				"aria-hidden": !0
 			}),
-			size: D.Small,
+			size: E.Small,
 			className: d("absolute end-1 top-1 h-6 w-6 rounded-lg", X.retryIcon),
-			"aria-label": m,
-			"aria-describedby": A ? k : void 0,
+			"aria-label": g,
+			"aria-describedby": M ? j : void 0,
 			onClick: (e) => {
-				e.stopPropagation(), i(S);
+				e.stopPropagation(), i(w);
 			}
 		}),
-		O && /* @__PURE__ */ q("span", {
-			id: k,
+		A && /* @__PURE__ */ q("span", {
+			id: j,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: A
+			children: M
 		})
 	] });
 	return /* @__PURE__ */ q("div", {
-		className: d("inline-flex", u),
-		children: N ? /* @__PURE__ */ q("div", {
+		className: d("inline-flex", f),
+		children: F ? /* @__PURE__ */ q("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": f,
-			onClick: I,
-			onKeyDown: L,
-			className: d(R, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: V
+			"aria-label": m,
+			onClick: R,
+			onKeyDown: z,
+			style: C,
+			className: d(B, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: re
 		}) : /* @__PURE__ */ q("div", {
-			className: R,
-			title: A || void 0,
-			role: O ? "group" : void 0,
-			"aria-describedby": O ? k : void 0,
-			tabIndex: O ? 0 : void 0,
-			children: V
+			className: B,
+			title: M || void 0,
+			role: A ? "group" : void 0,
+			"aria-describedby": A ? j : void 0,
+			tabIndex: A ? 0 : void 0,
+			style: C,
+			children: re
 		})
 	});
-}, We = { tile: "_tile_1s4d7_1" }, Ge = ({ count: e, onClick: t, ariaLabel: n, children: r, fontClassName: i = "dial-small-semi-text", className: a }) => /* @__PURE__ */ q("button", {
-	type: "button",
-	onClick: t,
-	"aria-label": n ?? `Show ${e} more attachments`,
-	className: d("flex size-[84px] items-center justify-center rounded-xl border", i, We.tile, a),
-	children: r ?? /* @__PURE__ */ q("bdi", {
-		dir: "ltr",
-		children: `+${e}`
-	})
-}), Z = {
+}, We = { tile: "_tile_1s4d7_1" }, Ge = ({ count: e, onClick: t, ariaLabel: n, children: r, fontClassName: i = "dial-small-semi-text", className: a, colors: o }) => {
+	let s = l({
+		"--ci-more-tile-bg": o?.background,
+		"--ci-more-tile-border": o?.border,
+		"--ci-more-tile-color": o?.color,
+		"--ci-more-tile-bg-hover": o?.backgroundHover,
+		"--ci-more-tile-color-hover": o?.colorHover,
+		"--ci-more-tile-border-hover": o?.borderHover,
+		"--ci-more-tile-focus-outline": o?.focusOutline
+	});
+	return /* @__PURE__ */ q("button", {
+		type: "button",
+		onClick: t,
+		"aria-label": n ?? `Show ${e} more attachments`,
+		style: s,
+		className: d("flex size-[84px] items-center justify-center rounded-xl border", i, We.tile, a),
+		children: r ?? /* @__PURE__ */ q("bdi", {
+			dir: "ltr",
+			children: `+${e}`
+		})
+	});
+}, Z = {
 	container: "_container_7fktb_1",
 	headerIcon: "_headerIcon_7fktb_6",
 	headerLabel: "_headerLabel_7fktb_7",
 	downloadAllButton: "_downloadAllButton_7fktb_8",
 	imageTile: "_imageTile_7fktb_12"
-}, Ke = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, qe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, labels: s, typeLabels: c, styles: l, theme: u, className: f }) => {
-	let { ariaLabel: m = "Attachments", clickLabel: g = "Download attachment", retryLabel: _ = "Retry upload", showLessLabel: v = "Show less", downloadAllLabel: y = "Download all", getHeaderLabel: b = (e) => Ke(e, "attachment") } = s ?? {}, { headerLabelClassName: x = "dial-tiny-semi-text" } = l ?? {}, [S, C] = G(!1), w = ke(() => Be(e.length, S), [e.length, S]);
+}, Ke = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, qe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, labels: s, typeLabels: c, styles: u, theme: f, className: m }) => {
+	let { ariaLabel: g = "Attachments", clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", showLessLabel: y = "Show less", downloadAllLabel: b = "Download all", getHeaderLabel: ee = (e) => Ke(e, "attachment") } = s ?? {}, { headerLabelClassName: x = "dial-tiny-semi-text", colors: S } = u ?? {}, C = l({
+		"--ci-group-bg": S?.background,
+		"--ci-group-border": S?.border,
+		"--ci-group-text": S?.text
+	}), [w, T] = G(!1), E = ke(() => Be(e.length, w), [e.length, w]);
 	if (e.length === 0) return null;
-	let T = e.some((e) => e.type === t.Image), E = e.some((e) => e.type !== t.Image), D = T && E, O = e.length >= 5, k = D ? ye : T ? be : R, A = b(e.length), j = e.slice(0, w.visibleCount);
+	let D = e.some((e) => e.type === t.Image), O = e.some((e) => e.type !== t.Image), k = D && O, A = e.length >= 5, j = k ? ye : D ? be : L, M = ee(e.length), P = e.slice(0, E.visibleCount);
 	return /* @__PURE__ */ J("div", {
 		role: "group",
-		"aria-label": m,
-		className: d("rounded-2xl border p-3", O ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Z.container, f),
+		"aria-label": g,
+		style: C,
+		className: d("rounded-2xl border p-3", A ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Z.container, m),
 		children: [/* @__PURE__ */ J("div", {
 			className: "mb-3 flex min-h-6 items-center gap-2",
 			children: [
-				/* @__PURE__ */ q(k, {
+				/* @__PURE__ */ q(j, {
 					size: p.SM,
 					className: d("shrink-0", Z.headerIcon),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ q("span", {
 					className: d(x, Z.headerLabel),
-					children: A
+					children: M
 				}),
 				e.length >= 2 && (r || n) && /* @__PURE__ */ q(h, {
-					icon: /* @__PURE__ */ q(ee, {
+					icon: /* @__PURE__ */ q(te, {
 						size: p.SM,
 						"aria-hidden": !0
 					}),
 					className: d("ms-auto h-6 w-6 rounded-lg", Z.downloadAllButton),
-					"aria-label": y,
+					"aria-label": b,
 					onClick: () => {
 						let t = e.filter((e) => e.status === o.Idle);
 						r ? r(t) : t.forEach((e) => n?.(e));
@@ -450,18 +495,18 @@ var je = /* @__PURE__ */ function(e) {
 			]
 		}), /* @__PURE__ */ J("div", {
 			role: "list",
-			"aria-label": A,
-			className: d("gap-3", O ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
+			"aria-label": M,
+			className: d("gap-3", A ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
 			children: [
-				j.map((e) => /* @__PURE__ */ q("div", {
+				P.map((e) => /* @__PURE__ */ q("div", {
 					role: "listitem",
 					children: e.type === t.Image ? /* @__PURE__ */ q(Ve, {
 						attachment: e,
 						onClick: n ? () => n(e) : void 0,
 						onRetry: i,
 						labels: {
-							clickLabel: g,
-							retryLabel: _
+							clickLabel: _,
+							retryLabel: v
 						},
 						typeLabels: c,
 						styles: { roundedClassName: "rounded-xl" },
@@ -472,28 +517,28 @@ var je = /* @__PURE__ */ function(e) {
 						onClick: n,
 						onRetry: i,
 						labels: {
-							clickLabel: g,
-							retryLabel: _,
+							clickLabel: _,
+							retryLabel: v,
 							sizeLabel: a?.(e)
 						},
 						typeLabels: c,
-						theme: u
+						theme: f
 					})
 				}, e.id)),
-				w.layout === Ne.Collapsed && /* @__PURE__ */ q("div", {
+				E.layout === Ne.Collapsed && /* @__PURE__ */ q("div", {
 					role: "listitem",
 					children: /* @__PURE__ */ q(Ge, {
-						count: w.hiddenCount,
-						onClick: () => C(!0)
+						count: E.hiddenCount,
+						onClick: () => T(!0)
 					})
 				}),
-				O && S && /* @__PURE__ */ q("div", {
+				A && w && /* @__PURE__ */ q("div", {
 					role: "listitem",
 					children: /* @__PURE__ */ q(Ge, {
 						count: 0,
-						onClick: () => C(!1),
-						ariaLabel: v,
-						children: /* @__PURE__ */ q(P, {
+						onClick: () => T(!1),
+						ariaLabel: y,
+						children: /* @__PURE__ */ q(N, {
 							size: p.MD,
 							"aria-hidden": !0
 						})
@@ -510,7 +555,7 @@ Te(({ tabs: e, activeTabId: t, onTabChange: n, tabClassName: r = "dial-tiny-semi
 	className: "flex flex-nowrap gap-1",
 	children: e.map((e) => {
 		let i = t === e.id;
-		return /* @__PURE__ */ q(T, {
+		return /* @__PURE__ */ q(w, {
 			label: e.label,
 			selected: i,
 			onClick: () => n(e.id),
@@ -562,7 +607,7 @@ var Ye = (e) => /* @__PURE__ */ q(y, { ...e }), Xe = ({ features: e, initialResp
 			fieldTitle: c,
 			labelClassName: Ze,
 			elementId: "response-format",
-			orientation: k.Column,
+			orientation: O.Column,
 			activeRadioButton: t ?? s.Markdown,
 			labelDescription: l,
 			radioButtons: [{
@@ -583,7 +628,7 @@ var Ye = (e) => /* @__PURE__ */ q(y, { ...e }), Xe = ({ features: e, initialResp
 			},
 			onChange: (e) => a(e ?? "")
 		}),
-		e.temperature && /* @__PURE__ */ q(C, {
+		e.temperature && /* @__PURE__ */ q(S, {
 			labelProps: {
 				label: m,
 				className: Ze,
@@ -599,7 +644,7 @@ var Ye = (e) => /* @__PURE__ */ q(y, { ...e }), Xe = ({ features: e, initialResp
 	]
 });
 Te(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: h, saveLabel: g = "Apply changes", saveDisabledTooltip: _ }) => {
-	let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: D } = Xe({
+	let { responseFormat: y, systemPrompt: b, temperature: ee, canSubmit: x, setResponseFormat: S, setSystemPrompt: C, setTemperature: w, handleSubmit: E } = Xe({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -610,18 +655,18 @@ Te(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 	return /* @__PURE__ */ q(v, {
 		open: !0,
 		header: o,
-		size: O.Sm,
+		size: D.Sm,
 		onClose: a,
 		className: "!bg-layer-2",
 		footer: /* @__PURE__ */ q("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ q(E, {
+			children: /* @__PURE__ */ q(T, {
 				tooltip: _,
-				hideTooltip: S || !_,
+				hideTooltip: x || !_,
 				children: /* @__PURE__ */ q(Ye, {
 					label: g,
-					onClick: D,
-					disabled: !S
+					onClick: E,
+					disabled: !x
 				})
 			})
 		}),
@@ -629,10 +674,10 @@ Te(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 			features: e,
 			responseFormat: y,
 			systemPrompt: b,
-			temperature: x,
-			onResponseFormatChange: C,
-			onSystemPromptChange: w,
-			onTemperatureChange: T,
+			temperature: ee,
+			onResponseFormatChange: S,
+			onSystemPromptChange: C,
+			onTemperatureChange: w,
 			responseFormatLabel: s,
 			responseFormatHint: c,
 			responseFormatMarkdownLabel: l,
@@ -656,13 +701,13 @@ var Q = {
 	blockquote: "_blockquote_1yr1w_34",
 	tableCell: "_tableCell_1yr1w_39",
 	tableHeader: "_tableHeader_1yr1w_44"
-}, $e = ({ status: e, isLive: t }) => e ? e === c.Completed ? /* @__PURE__ */ q(F, {
+}, $e = ({ status: e, isLive: t }) => e ? e === c.Completed ? /* @__PURE__ */ q(P, {
 	size: p.MD,
 	className: Q.iconSecondary
-}) : /* @__PURE__ */ q(A, {
+}) : /* @__PURE__ */ q(k, {
 	size: p.MD,
 	className: Q.iconSecondary
-}) : t ? /* @__PURE__ */ q(w, { size: 20 }) : /* @__PURE__ */ q(A, {
+}) : t ? /* @__PURE__ */ q(C, { size: 20 }) : /* @__PURE__ */ q(k, {
 	size: p.MD,
 	className: Q.iconSecondary
 }), et = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
@@ -676,8 +721,8 @@ var Q = {
 	return /* @__PURE__ */ J("pre", {
 		className: d("relative max-h-[300px] overflow-auto rounded border p-3 text-sm", Q.codeBlock),
 		children: [/* @__PURE__ */ q(h, {
-			size: D.Small,
-			icon: q(r ? j : L, {
+			size: E.Small,
+			icon: q(r ? A : I, {
 				size: p.SM,
 				className: Q.iconSecondary
 			}),
@@ -721,10 +766,10 @@ var Q = {
 		type: "button",
 		onClick: () => s((e) => !e),
 		className: d("flex w-full cursor-pointer items-center gap-2 p-0", Q.collapseButton),
-		children: [c, o ? /* @__PURE__ */ q(M, {
+		children: [c, o ? /* @__PURE__ */ q(j, {
 			size: p.MD,
 			className: Q.iconSecondary
-		}) : /* @__PURE__ */ q(N, {
+		}) : /* @__PURE__ */ q(M, {
 			size: p.MD,
 			className: d(Q.iconSecondary, "rtl:scale-x-[-1]")
 		})]
@@ -815,8 +860,8 @@ var Q = {
 		children: [v.length > 0 && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q(_, {
 			className: rt.toggleButton,
 			onClick: () => f((e) => !e),
-			iconBefore: /* @__PURE__ */ q(j, { size: p.SM }),
-			iconAfter: u ? /* @__PURE__ */ q(M, { size: 12 }) : /* @__PURE__ */ q(N, {
+			iconBefore: /* @__PURE__ */ q(A, { size: p.SM }),
+			iconAfter: u ? /* @__PURE__ */ q(j, { size: 12 }) : /* @__PURE__ */ q(M, {
 				size: 12,
 				className: "rtl:scale-x-[-1]"
 			}),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-stages",
   "description": "Panel for displaying agent processing stages during LLM response streaming",
-  "version": "1.0.0-dev.502",
+  "version": "1.0.0-dev.503",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,9 +19,9 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.0.0-dev.502",
+    "@epam/ai-dial-chat-shared": "1.0.0-dev.503",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
-    "@epam/ai-dial-conversation-input": "1.0.0-dev.502"
+    "@epam/ai-dial-conversation-input": "1.0.0-dev.503"
   },
   "repository": {
     "type": "git",