@epam/ai-dial-conversation-messages 1.0.0 → 1.0.2

package/components/MessageActions/MessageActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,EAAE,EAAyB,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAKxE,kIAAkI;AAClI,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4LlD,CAAC"}
+{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,EAAE,EAAyB,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAKxE,kIAAkI;AAClI,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8LlD,CAAC"}

package/index.css

@@ -1,2 +1,2 @@
-._activeRating_ygoee_1{color:var(--ma-active-rating-text,var(--text-accent,#1d4ed8))}._userBubble_qoxdz_1{border-color:var(--cm-bubble-user-border,var(--stroke-secondary,#d1dbea));background:var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7))}._collapsibleText_qoxdz_6{max-height:var(--cm-bubble-collapsed-height);transition:max-height .2s ease-out}._expandedText_qoxdz_11{max-height:var(--cm-bubble-expanded-height)}._collapsedText_qoxdz_15:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--cm-bubble-fade-start,var(--shadow-xs-sm-2,#161b2d08)), var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7)));height:3rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){._collapsibleText_qoxdz_6{transition:none}}._startersDivider_qoxdz_26{border-color:var(--cm-starters-divider,var(--stroke-secondary,#d1dbea))}._text_qoxdz_30{color:var(--cm-bubble-text,var(--text-primary,#161b2d))}
+._activeRating_ygoee_1{color:var(--ma-active-rating-text,var(--text-accent,#1d4ed8))}._userBubble_cq829_1{border-color:var(--cm-bubble-user-border,var(--stroke-secondary,#d1dbea));background:var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7))}._collapsibleText_cq829_6{max-height:var(--cm-bubble-collapsed-height);transition:max-height .2s ease-out}._expandedText_cq829_11{max-height:var(--cm-bubble-expanded-height)}._collapsedText_cq829_15:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--cm-bubble-fade-start,var(--shadow-xs-2,#161b2d08)), var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7)));height:3rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){._collapsibleText_cq829_6{transition:none}}._startersDivider_cq829_26{border-color:var(--cm-starters-divider,var(--stroke-secondary,#d1dbea))}._text_cq829_30{color:var(--cm-bubble-text,var(--text-primary,#161b2d))}
 /*$vite$:1*/

package/index.js

@@ -1,815 +1,281 @@
-import { AttachmentErrorReason as e, AttachmentType as t, CopyIconButton as n, DeploymentIcon as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as p, DialSlider as m, ElementSize as h, GhostIconButton as g, Highlight as _, InfoMessageNotification as v, LinkButton as y, NeutralButton as b, Popup as x, PopupSize as S, PrimaryButton as C, RadioGroup as w, RadioGroupOrientation as T, Skeleton as E, SkeletonVariant as D, Spinner as O, StaticIconButton as k, Textarea as A, ToggleIconButton as j, Tooltip as M } from "@epam/ai-dial-ui-kit";
-import { IconChevronDown as N, IconChevronUp as P, IconClipboard as F, IconDownload as I, IconExternalLink as L, IconFile as R, IconFileTypeBmp as z, IconFileTypeCss as B, IconFileTypeCsv as V, IconFileTypeDoc as H, IconFileTypeDocx as ee, IconFileTypeHtml as te, IconFileTypeJpg as ne, IconFileTypeJs as U, IconFileTypeJsx as W, IconFileTypePdf as re, IconFileTypePhp as ie, IconFileTypePng as ae, IconFileTypePpt as oe, IconFileTypeRs as se, IconFileTypeSql as ce, IconFileTypeSvg as le, IconFileTypeTs as ue, IconFileTypeTsx as de, IconFileTypeTxt as fe, IconFileTypeVue as pe, IconFileTypeXls as me, IconFileTypeXml as he, IconFileTypeZip as ge, IconMarkdown as _e, IconMusic as ve, IconPaperclip as ye, IconPencilMinus as be, IconPhoto as G, IconRefresh as xe, IconReload as Se, IconTerminal2 as Ce, IconThumbDown as we, IconThumbDownFilled as Te, IconThumbUp as Ee, IconThumbUpFilled as De, IconTrashX as Oe, IconVideo as ke, IconX as Ae } from "@tabler/icons-react";
-import "react-dom";
-import { memo as je, useCallback as K, useEffect as Me, useId as Ne, useMemo as Pe, useRef as Fe, useState as q } from "react";
-import { Fragment as J, jsx as Y, jsxs as X } from "react/jsx-runtime";
-//#region ../attachment-input/dist/index.js
-var Ie = (e) => {
-	if (e == null) return "";
-	let t = e.lastIndexOf(".");
-	return t > 0 ? e.slice(0, t) : e;
-}, Le = (e) => {
-	if (!e) return R;
-	if (e.startsWith("image/")) switch (e) {
-		case "image/jpeg":
-		case "image/jpg": return ne;
-		case "image/png": return ae;
-		case "image/svg+xml": return le;
-		case "image/bmp": return z;
-		default: return G;
-	}
-	if (e.startsWith("video/")) return ke;
-	if (e.startsWith("audio/")) return ve;
-	switch (e) {
-		case "application/pdf": return re;
-		case "application/msword":
-		case "application/vnd.ms-word": return H;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ee;
-		case "application/vnd.ms-powerpoint": return oe;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return oe;
-		case "application/vnd.ms-excel": return me;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return me;
-		case "application/zip":
-		case "application/x-zip-compressed":
-		case "application/x-rar-compressed":
-		case "application/x-7z-compressed":
-		case "application/gzip":
-		case "application/x-tar": return ge;
-		case "text/csv": return V;
-		case "text/plain": return fe;
-		case "text/html":
-		case "application/xhtml+xml": return te;
-		case "text/xml":
-		case "application/xml": return he;
-		case "application/sql":
-		case "text/x-sql": return ce;
-		case "text/javascript":
-		case "application/javascript": return U;
-		case "text/jsx": return W;
-		case "application/typescript":
-		case "text/typescript": return ue;
-		case "text/tsx": return de;
-		case "text/css": return B;
-		case "text/x-php":
-		case "application/x-php": return ie;
-		case "text/x-rustsrc":
-		case "application/x-rust": return se;
-		case "text/x-vue": return pe;
-		default: return R;
-	}
-}, Re = (e) => {
-	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? Ce : n === t.Pasted ? F : n === t.Image ? G : Le(r ?? "");
-}, ze = (e) => {
-	let t = e.toLowerCase().split(";")[0].trim(), n = a[t];
-	if (n) return n;
-	let r = t.split("/")[1];
-	if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
-}, Be = (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 = ze(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;
-}, Ve = (e, n = {}) => {
-	let { type: r, status: i, previewUrl: a, url: o } = e, s = i === c.Loading, l = i === c.Error, u = r === t.Image && !!(a ?? o) && !l, d = r === t.Link && !l;
-	return {
-		isLoading: s,
-		isError: l,
-		isImage: u,
-		isLink: d,
-		BottomIcon: d ? null : Re(e),
-		typeLabel: d ? null : Be(e, n)
-	};
-}, He = "flex size-[84px] items-center justify-center rounded-xl border", Z = {
-	tile: "_tile_1whwz_1",
-	hovered: "_hovered_1whwz_5",
-	selected: "_selected_1whwz_15",
-	tileError: "_tileError_1whwz_20",
-	nameText: "_nameText_1whwz_25",
-	typeText: "_typeText_1whwz_29",
-	retryIcon: "_retryIcon_1whwz_33",
-	track: "_track_1whwz_37",
-	actionButton: "_actionButton_1whwz_43",
-	imageActionButton: "_imageActionButton_1whwz_47"
-}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(k, {
-	icon: a,
-	size: h.Small,
-	className: d("absolute end-1 top-1 opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Z.actionButton, o),
-	"aria-label": e,
-	"aria-describedby": t ? n : void 0,
-	onClick: (e) => {
-		e.stopPropagation(), r(i);
-	}
-}), Ue = ({ ...e }) => /* @__PURE__ */ Y(Q, {
-	icon: /* @__PURE__ */ Y(Se, {
-		size: p.SM,
-		"aria-hidden": !0
-	}),
-	className: Z.retryIcon,
-	...e
-}), We = ({ ...e }) => /* @__PURE__ */ Y(Q, {
-	icon: /* @__PURE__ */ Y(I, {
-		size: p.SM,
-		"aria-hidden": !0
-	}),
-	...e
-}), Ge = ({ ...e }) => /* @__PURE__ */ Y(Q, {
-	icon: /* @__PURE__ */ Y(L, {
-		size: p.SM,
-		"aria-hidden": !0
-	}),
-	...e
-}), Ke = ({ ...e }) => /* @__PURE__ */ Y(Q, {
-	icon: /* @__PURE__ */ Y(Ae, {
-		size: p.SM,
-		"aria-hidden": !0
-	}),
-	...e
-}), qe = {
-	[e.Network]: "Upload failed · network error",
-	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, Je = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: a, styles: o, onDownload: s, isPasted: l, isLink: u, cssVars: f, onExpand: p, isExpandable: m, onRemove: h, isSelected: g }) => {
-	let { clickLabel: v = "Download attachment", retryLabel: y = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: k, errorReason: A } = t, j = k === c.Loading, M = k === c.Error, N = Ne(), P = M ? A && (S?.[A] ?? qe[A]) || C : "", { BottomIcon: F, typeLabel: I } = Ve(t), L = !M && !j && s && !u, R = M && !!i && A !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
-	}, V = Pe(() => l ? D : Ie(D), [l, D]), H = K(() => {
-		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), ee = d(He, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Z.tile, !M && Z.hovered, g && Z.selected, M && Z.tileError), te = /* @__PURE__ */ Y("div", {
-		title: V,
-		className: d(w?.nameClassName ?? "dial-caption-text", "line-clamp-2 min-w-0 break-all", Z.nameText, !M && z),
-		children: n ? /* @__PURE__ */ Y(_, {
-			text: V,
-			query: n,
-			maxLines: 2
-		}) : V
-	}), ne = F && /* @__PURE__ */ X("div", {
-		className: d("flex w-full items-center gap-1", M && z),
-		children: [/* @__PURE__ */ Y(F, {
-			size: 16,
-			className: Z.typeText,
-			"aria-hidden": !0
-		}), /* @__PURE__ */ Y("span", {
-			className: d(w?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Z.typeText),
-			children: b ? `${I} · ${b}` : I
-		})]
-	}), U = () => {
-		m && p ? p(E) : r && r(E);
-	}, W = /* @__PURE__ */ X(J, { children: [
-		te,
-		ne,
-		j && /* @__PURE__ */ Y("div", {
-			"aria-label": x,
-			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
-			children: /* @__PURE__ */ Y(O, { size: 32 })
-		}),
-		/* @__PURE__ */ X("div", {
-			className: d("absolute right-0 top-0 flex gap-1"),
-			children: [
-				L && /* @__PURE__ */ Y(We, {
-					ariaLabel: v,
-					errorTitle: P,
-					errorDescId: N,
-					onClick: s,
-					id: E
-				}),
-				R && /* @__PURE__ */ Y(Ue, {
-					ariaLabel: y,
-					errorTitle: P,
-					errorDescId: N,
-					onClick: i,
-					id: E
-				}),
-				u && /* @__PURE__ */ Y(Ge, {
-					ariaLabel: y,
-					errorTitle: P,
-					errorDescId: N,
-					onClick: H
-				}),
-				h && /* @__PURE__ */ Y(Ke, {
-					ariaLabel: y,
-					errorTitle: P,
-					errorDescId: N,
-					onClick: h,
-					id: E
-				})
-			]
-		}),
-		M && /* @__PURE__ */ Y("span", {
-			id: N,
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: P
-		})
-	] });
-	return /* @__PURE__ */ Y("div", {
-		style: f,
-		className: d("inline-flex", T),
-		children: /* @__PURE__ */ Y("div", {
-			role: "button",
-			tabIndex: 0,
-			"aria-label": v,
-			onClick: U,
-			onKeyDown: B,
-			style: f,
-			className: d(ee, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: W
-		})
-	});
-}, Ye = /* @__PURE__ */ function(e) {
-	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), Xe = ({ enabled: e, src: t }) => {
-	let n = Fe(null), [r, i] = q("idle");
-	return Me(() => {
-		i(e && t ? "loading" : "idle");
-	}, [e, t]), Me(() => {
-		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
-	};
-}, Ze = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: c, isSelected: l }) => {
-	let { clickLabel: u = "Open attachment", expandLabel: f = "Expand pasted text" } = i ?? {}, { className: m } = c ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: x } = Pe(() => Ve(e), [e]), S = r !== void 0 && !v && !y && !b, { imageRef: C, imageLoadStatus: w } = Xe({
-		enabled: x,
-		src: _
-	}), T = () => {
-		v && n ? n(h) : S && r && r(h);
-	};
-	return /* @__PURE__ */ Y("div", {
-		className: d(He, "group/attachment-tile", S && "cursor-pointer", Z.tile, l && Z.selected, m),
-		onClick: T,
-		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
-		},
-		tabIndex: 0,
-		role: "button",
-		style: o,
-		"aria-label": S ? u : v ? f : void 0,
-		children: /* @__PURE__ */ X("div", {
-			className: "relative h-full w-full overflow-hidden",
-			children: [
-				a && /* @__PURE__ */ Y(Ke, {
-					onClick: a,
-					id: h,
-					className: Z.imageActionButton
-				}),
-				s && /* @__PURE__ */ Y(We, {
-					onClick: s,
-					id: h,
-					className: Z.imageActionButton
-				}),
-				w !== Ye.Loaded && /* @__PURE__ */ Y(E, {
-					variant: D.Rectangular,
-					width: "100%",
-					height: "100%",
-					active: w === Ye.Loading,
-					overlay: /* @__PURE__ */ Y(G, {
-						size: p.LG,
-						className: Z.typeText,
-						"aria-hidden": !0
-					}),
-					className: "absolute inset-0 rounded-xl"
-				}),
-				/* @__PURE__ */ Y("img", {
-					ref: C,
-					src: _,
-					alt: g,
-					loading: "lazy",
-					decoding: "async",
-					className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", w === Ye.Loaded ? "opacity-100" : "opacity-0")
-				})
-			]
-		})
-	});
-}, Qe = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: s, labels: c, styles: l, isSelected: d }) => {
-	let { colors: f } = l ?? {}, p = e.type === t.Pasted, m = p && a !== void 0, h = u({
-		"--ai-tile-bg": f?.background,
-		"--ai-tile-border": f?.border,
-		"--ai-tile-bg-hover": f?.backgroundHover,
-		"--ai-tile-border-hover": f?.borderHover,
-		"--ai-tile-bg-selected": f?.backgroundSelected,
-		"--ai-tile-border-selected": f?.borderSelected,
-		"--ai-tile-focus-outline": f?.focusOutline,
-		"--ai-tile-bg-error": f?.backgroundError,
-		"--ai-tile-border-error": f?.borderError,
-		"--ai-tile-error-text": f?.errorText,
-		"--ai-tile-name-text": f?.nameText,
-		"--ai-tile-type-text": f?.typeText,
-		"--ai-tile-hover-icon-bg": f?.hoverIconBackground,
-		"--ai-tile-hover-icon-color": f?.hoverIconColor,
-		"--ai-tile-progress-track": f?.trackBackground
-	}), { isImage: g, isLink: _ } = Pe(() => Ve(e), [e]);
-	return g ? /* @__PURE__ */ Y(Ze, {
-		attachment: e,
-		labels: c,
-		onClick: o,
-		onExpand: a,
-		styles: l,
-		onRemove: r,
-		cssVars: h,
-		onDownload: s,
-		isSelected: d
-	}) : /* @__PURE__ */ Y(Je, {
-		attachment: e,
-		searchQuery: n,
-		onClick: o,
-		onRetry: i,
-		onRemove: r,
-		onDownload: s,
-		isLink: _,
-		isPasted: p,
-		styles: l,
-		labels: c,
-		onExpand: a,
-		cssVars: h,
-		isExpandable: m,
-		isSelected: d
-	});
-}, $e = {
-	headerIcon: "_headerIcon_1dmgi_1",
-	headerLabel: "_headerLabel_1dmgi_2"
-}, et = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, tt = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, labels: a, styles: o, selectedAttachmentId: s }) => {
-	let { ariaLabel: l = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: _ = "Download all", openInNewTabLabel: v, getHeaderLabel: y = (e) => et(e, "attachment"), promptLabel: b, pastedLabel: x, imageLabel: S } = a ?? {}, { typography: C, colors: w, className: T } = o ?? {}, E = u({ "--ai-group-text": w?.text });
-	if (e.length === 0) return null;
-	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 ? G : R, M = y(e.length), N = () => {
-		let t = e.filter((e) => e.status === c.Idle);
-		r ? r(t) : t.forEach((e) => n?.(e.id));
-	}, P = (t) => {
-		let n = e.find((e) => e.id === t);
-		n && r?.([n]);
-	};
-	return /* @__PURE__ */ X("div", {
-		role: "group",
-		"aria-label": l,
-		style: E,
-		className: d("flex flex-col gap-1", A ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", $e.container, T),
-		children: [/* @__PURE__ */ X("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ X("div", {
-				className: "flex items-center gap-1",
-				children: [/* @__PURE__ */ Y(j, {
-					size: p.SM,
-					className: d("shrink-0", $e.headerIcon),
-					"aria-hidden": !0
-				}), /* @__PURE__ */ Y("span", {
-					className: d(C?.headerLabelClassName ?? "dial-tiny-semi-text", $e.headerLabel),
-					children: M
-				})]
-			}), e.length >= 2 && (r || n) && /* @__PURE__ */ Y(g, {
-				icon: /* @__PURE__ */ Y(I, {
-					size: p.SM,
-					"aria-hidden": !0
-				}),
-				size: h.Small,
-				"aria-label": _,
-				onClick: N
-			})]
-		}), /* @__PURE__ */ Y("div", {
-			role: "list",
-			"aria-label": M,
-			className: d("gap-3", A ? "grid grid-cols-[repeat(5,83px)]" : "flex flex-wrap"),
-			children: e.map((e, t) => /* @__PURE__ */ Y("div", {
-				role: "listitem",
-				children: /* @__PURE__ */ Y(Qe, {
-					attachment: e,
-					onClick: n,
-					onDownload: P,
-					onRetry: i,
-					labels: {
-						clickLabel: f,
-						retryLabel: m,
-						promptLabel: b,
-						pastedLabel: x,
-						imageLabel: S,
-						openInNewTabLabel: v
-					},
-					isSelected: e.id === s
-				})
-			}, `${e.id}-${t}`))
-		})]
-	});
-}, nt = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
-	let [s, c] = q(t), [l, u] = q(n), [d, f] = q(r), p = Fe(o);
-	Me(() => {
-		o && !p.current && (c(t), u(n), f(r)), p.current = o;
-	}, [
-		o,
-		t,
-		n,
-		r
-	]);
-	let m = !e.responseFormat || s != null;
-	return {
-		responseFormat: s,
-		systemPrompt: l,
-		temperature: d,
-		canSubmit: m,
-		setResponseFormat: c,
-		setSystemPrompt: u,
-		setTemperature: f,
-		handleSubmit: K(() => {
-			if (!m) return;
-			let t = {};
-			e.responseFormat && s != null && (t.responseFormat = s), e.systemPrompt && (t.systemPrompt = l), e.temperature && (t.temperature = d), i(t), a();
-		}, [
-			m,
-			e,
-			s,
-			l,
-			d,
-			i,
-			a
-		])
-	};
-}, rt = { label: "_label_14i7c_1" }, it = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: h = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: v = [
-	"Precise",
-	"Neutral",
-	"Creative"
-], temperatureHint: y, labelClassName: b = "!dial-small-semi-text", colors: x }) => {
-	let S = u({ "--csf-label-text": x?.labelText }), C = d(b, rt.label, "gap-1");
-	return /* @__PURE__ */ X("div", {
-		className: "flex flex-col gap-4 px-6 pb-3",
-		style: S,
-		children: [
-			e.responseFormat && /* @__PURE__ */ Y(w, {
-				id: "response-format",
-				labelProps: {
-					label: s,
-					className: C,
-					caption: c
-				},
-				optionsClassName: "mb-2",
-				orientation: T.Column,
-				value: t ?? l.Markdown,
-				items: [{
-					value: l.Markdown,
-					label: f
-				}, {
-					value: l.PlainText,
-					label: p
-				}],
-				onChange: (e) => i(e)
-			}),
-			e.systemPrompt && /* @__PURE__ */ Y(A, {
-				value: n,
-				placeholder: g,
-				resize: !0,
-				labelProps: {
-					className: C,
-					label: h
-				},
-				onChange: (e) => a(e ?? "")
-			}),
-			e.temperature && /* @__PURE__ */ Y(m, {
-				labelProps: {
-					label: _,
-					className: C,
-					caption: y
-				},
-				value: r,
-				min: 0,
-				max: 1,
-				step: .1,
-				labels: v,
-				onChange: o
-			})
-		]
-	});
-}, at = { modal: "_modal_kl0h0_1" };
-je(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: h, temperatureHint: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = at.modal }) => {
-	let { responseFormat: b, systemPrompt: w, temperature: T, canSubmit: E, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = nt({
-		features: e,
-		initialResponseFormat: t,
-		initialSystemPrompt: n,
-		initialTemperature: r,
-		onSave: i,
-		onClose: a
-	});
-	return /* @__PURE__ */ Y(x, {
-		open: !0,
-		header: o,
-		titleClassName: s,
-		size: S.Sm,
-		onClose: a,
-		className: y,
-		footer: /* @__PURE__ */ Y("div", {
-			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ Y(M, {
-				tooltip: v,
-				hideTooltip: E || !v,
-				children: /* @__PURE__ */ Y(C, {
-					label: _,
-					onClick: A,
-					disabled: !E
-				})
-			})
-		}),
-		children: /* @__PURE__ */ Y(it, {
-			features: e,
-			responseFormat: b,
-			systemPrompt: w,
-			temperature: T,
-			onResponseFormatChange: D,
-			onSystemPromptChange: O,
-			onTemperatureChange: k,
-			responseFormatLabel: c,
-			responseFormatHint: l,
-			responseFormatMarkdownLabel: u,
-			responseFormatPlainTextLabel: d,
-			systemPromptLabel: f,
-			systemPromptTooltip: p,
-			temperatureLabel: m,
-			temperatureLabels: h,
-			temperatureHint: g
-		})
-	});
-});
-var ot = { activeRating: "_activeRating_ygoee_1" }, st = 2e3, ct = ({ role: e = s.User, onEdit: t, onEditHover: r, onDelete: i, onRegenerate: a, onCopy: c, onCopyMarkdown: l, onLike: f, onDislike: m, activeRating: g, isAlwaysVisible: _, className: v, labels: y, colors: b }) => {
-	let { tooltips: x, ariaLabels: S } = y ?? {}, [C, w] = q(null), [T, E] = q(""), D = u({ "--ma-active-rating-text": b?.activeRatingText }), O = K(() => {
-		c?.(), w("copy"), E(S?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => w(null), st);
-	}, [c, S?.copiedStatus]), k = K(() => {
-		l?.(), w("markdown"), E(S?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => w(null), st);
-	}, [l, S?.copiedMarkdownStatus]);
-	return /* @__PURE__ */ X("div", {
+import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, buildCssVars as o, mergeClasses as s, useCollapsedText as c } from "@epam/ai-dial-chat-shared";
+import { AttachmentGroup as l } from "@epam/ai-dial-attachment-input";
+import { DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, ElementSize as f, InfoMessageNotification as p, LinkButton as m, NeutralButton as h, ToggleIconButton as g } from "@epam/ai-dial-ui-kit";
+import { IconChevronDown as _, IconChevronUp as v, IconMarkdown as y, IconPencilMinus as b, IconRefresh as x, IconThumbDown as S, IconThumbDownFilled as C, IconThumbUp as w, IconThumbUpFilled as T, IconTrashX as E } from "@tabler/icons-react";
+import { useCallback as D, useId as O, useState as k } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+var N = { activeRating: "_activeRating_ygoee_1" }, P = 2e3, F = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: c, onRegenerate: l, onCopy: p, onCopyMarkdown: m, onLike: h, onDislike: _, activeRating: v, isAlwaysVisible: O, className: F, labels: I, colors: L }) => {
+	let { tooltips: R, ariaLabels: z } = I ?? {}, [B, V] = k(null), [H, U] = k(""), W = o({ "--ma-active-rating-text": L?.activeRatingText }), G = D(() => {
+		p?.(), V("copy"), U(z?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => V(null), P);
+	}, [p, z?.copiedStatus]), K = D(() => {
+		m?.(), V("markdown"), U(z?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => V(null), P);
+	}, [m, z?.copiedMarkdownStatus]);
+	return /* @__PURE__ */ M("div", {
 		role: "toolbar",
-		"aria-label": S?.actionsGroup ?? "Message actions",
-		style: D,
-		className: d("flex gap-1", !_ && "opacity-0 group-hover:opacity-100", v),
-		children: [/* @__PURE__ */ Y("span", {
+		"aria-label": z?.actionsGroup ?? "Message actions",
+		style: W,
+		className: s("flex gap-1", !O && "opacity-0 group-hover:opacity-100", F),
+		children: [/* @__PURE__ */ j("span", {
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: T
-		}), e === s.User ? /* @__PURE__ */ X(J, { children: [t && /* @__PURE__ */ Y(j, {
-			icon: /* @__PURE__ */ Y(be, {
-				size: p.SM,
+			children: H
+		}), e === a.User ? /* @__PURE__ */ M(A, { children: [n && /* @__PURE__ */ j(g, {
+			icon: /* @__PURE__ */ j(b, {
+				size: u.SM,
 				"aria-hidden": !0,
-				stroke: 1.5
+				stroke: d
 			}),
-			size: h.Small,
-			"aria-label": S?.editMessage ?? "Edit message",
-			tooltipProps: { tooltip: x?.edit ?? "Edit" },
-			onClick: t,
+			size: f.Small,
+			"aria-label": z?.editMessage ?? "Edit message",
+			tooltipProps: { tooltip: R?.edit ?? "Edit" },
+			onClick: n,
 			onMouseEnter: r,
 			onFocus: r
-		}), i && /* @__PURE__ */ Y(j, {
-			icon: /* @__PURE__ */ Y(Oe, {
-				size: p.SM,
+		}), c && /* @__PURE__ */ j(g, {
+			icon: /* @__PURE__ */ j(E, {
+				size: u.SM,
 				"aria-hidden": !0,
-				stroke: 1.5
+				stroke: d
 			}),
-			size: h.Small,
-			"aria-label": S?.deleteMessage ?? "Delete message",
-			tooltipProps: { tooltip: x?.delete ?? "Delete" },
-			onClick: i
-		})] }) : /* @__PURE__ */ X(J, { children: [
-			a && /* @__PURE__ */ Y(j, {
-				icon: /* @__PURE__ */ Y(xe, {
-					size: p.SM,
+			size: f.Small,
+			"aria-label": z?.deleteMessage ?? "Delete message",
+			tooltipProps: { tooltip: R?.delete ?? "Delete" },
+			onClick: c
+		})] }) : /* @__PURE__ */ M(A, { children: [
+			l && /* @__PURE__ */ j(g, {
+				icon: /* @__PURE__ */ j(x, {
+					size: u.SM,
 					"aria-hidden": !0,
-					stroke: 1.5
+					stroke: d
 				}),
-				size: h.Small,
-				"aria-label": S?.regenerateResponse ?? "Regenerate response",
-				tooltipProps: { tooltip: x?.regenerate ?? "Regenerate" },
-				onClick: a
+				size: f.Small,
+				"aria-label": z?.regenerateResponse ?? "Regenerate response",
+				tooltipProps: { tooltip: R?.regenerate ?? "Regenerate" },
+				onClick: l
 			}),
-			c && /* @__PURE__ */ Y(n, {
-				iconSize: p.SM,
-				onClick: O,
-				size: h.Small,
-				isCopied: C === "copy",
-				copyLabel: x?.copy ?? "Copy",
-				copiedLabel: x?.copied ?? "Copied!",
-				ariaLabel: S?.copyResponse ?? "Copy response"
+			p && /* @__PURE__ */ j(t, {
+				iconSize: u.SM,
+				onClick: G,
+				size: f.Small,
+				isCopied: B === "copy",
+				copyLabel: R?.copy ?? "Copy",
+				copiedLabel: R?.copied ?? "Copied!",
+				ariaLabel: z?.copyResponse ?? "Copy response"
 			}),
-			l && /* @__PURE__ */ Y(n, {
-				iconSize: p.SM,
-				onClick: k,
-				size: h.Small,
-				isCopied: C === "markdown",
-				iconCopy: /* @__PURE__ */ Y(_e, {
-					size: p.SM,
+			m && /* @__PURE__ */ j(t, {
+				iconSize: u.SM,
+				onClick: K,
+				size: f.Small,
+				isCopied: B === "markdown",
+				iconCopy: /* @__PURE__ */ j(y, {
+					size: u.SM,
 					"aria-hidden": !0,
-					stroke: 1.5
+					stroke: d
 				}),
-				copyLabel: x?.copyMarkdown ?? "Copy as Markdown",
-				copiedLabel: x?.copiedMarkdown ?? "Copied!",
-				ariaLabel: S?.copyAsMarkdown ?? "Copy as markdown"
+				copyLabel: R?.copyMarkdown ?? "Copy as Markdown",
+				copiedLabel: R?.copiedMarkdown ?? "Copied!",
+				ariaLabel: z?.copyAsMarkdown ?? "Copy as markdown"
 			}),
-			f && /* @__PURE__ */ Y(j, {
-				icon: g === o.Like ? /* @__PURE__ */ Y(De, {
-					className: ot.activeRating,
-					size: p.SM,
-					stroke: 1.5,
+			h && /* @__PURE__ */ j(g, {
+				icon: v === i.Like ? /* @__PURE__ */ j(T, {
+					className: N.activeRating,
+					size: u.SM,
 					"aria-hidden": !0
-				}) : /* @__PURE__ */ Y(Ee, {
-					size: p.SM,
+				}) : /* @__PURE__ */ j(w, {
+					size: u.SM,
 					"aria-hidden": !0,
-					stroke: 1.5
+					stroke: d
 				}),
-				size: h.Small,
-				"aria-label": S?.likeResponse ?? "Like response",
-				"aria-pressed": g === o.Like,
-				tooltipProps: { tooltip: x?.like ?? "Like" },
-				onClick: f
+				size: f.Small,
+				"aria-label": z?.likeResponse ?? "Like response",
+				"aria-pressed": v === i.Like,
+				tooltipProps: { tooltip: R?.like ?? "Like" },
+				onClick: h
 			}),
-			m && /* @__PURE__ */ Y(j, {
-				icon: g === o.Dislike ? /* @__PURE__ */ Y(Te, {
-					className: ot.activeRating,
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: 1.5
-				}) : /* @__PURE__ */ Y(we, {
-					size: p.SM,
+			_ && /* @__PURE__ */ j(g, {
+				icon: v === i.Dislike ? /* @__PURE__ */ j(C, {
+					className: N.activeRating,
+					size: u.SM,
+					"aria-hidden": !0
+				}) : /* @__PURE__ */ j(S, {
+					size: u.SM,
 					"aria-hidden": !0,
-					stroke: 1.5
+					stroke: d
 				}),
-				size: h.Small,
-				"aria-label": S?.dislikeResponse ?? "Dislike response",
-				"aria-pressed": g === o.Dislike,
-				tooltipProps: { tooltip: x?.dislike ?? "Dislike" },
-				onClick: m
+				size: f.Small,
+				"aria-label": z?.dislikeResponse ?? "Dislike response",
+				"aria-pressed": v === i.Dislike,
+				tooltipProps: { tooltip: R?.dislike ?? "Dislike" },
+				onClick: _
 			})
 		] })]
 	});
-}, $ = {
-	userBubble: "_userBubble_qoxdz_1",
-	collapsibleText: "_collapsibleText_qoxdz_6",
-	expandedText: "_expandedText_qoxdz_11",
-	collapsedText: "_collapsedText_qoxdz_15",
-	startersDivider: "_startersDivider_qoxdz_26",
-	text: "_text_qoxdz_30"
-}, lt = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, markdownClassNames: v, onAttachmentClick: y, onDownloadAll: x, onAttachmentRetry: S, codeBlockTheme: C, labels: w, selectedAttachmentId: T }) => {
-	let { colors: E, typography: D, className: O, bubbleClassName: k } = n ?? {}, { attachmentClickLabel: A, attachmentRetryLabel: j, attachmentOpenInNewTabLabel: M, startersAriaLabel: N = "Quick reply buttons", thinkingLabel: P, codeBlockCopyLabel: F, codeBlockCopiedLabel: I, assistantMessageAriaLabel: L = "Assistant message", deploymentIconFallbackLabel: R = "AI" } = w ?? {}, z = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], B = u({
-		"--cm-bubble-text": E?.text,
-		"--cm-starters-divider": E?.startersDivider
-	}), V = d($.text, D?.fontClassName), H = !!(h || g);
-	return /* @__PURE__ */ X("div", {
+}, I = {
+	userBubble: "_userBubble_cq829_1",
+	collapsibleText: "_collapsibleText_cq829_6",
+	expandedText: "_expandedText_cq829_11",
+	collapsedText: "_collapsedText_cq829_15",
+	startersDivider: "_startersDivider_cq829_26",
+	text: "_text_cq829_30"
+}, L = ({ text: t, styles: i, actions: c, hasAlwaysVisibleActions: u, isStreaming: d, attachments: f, afterContent: p, starters: m, onSelectStarter: g, deploymentIconUrl: _, deploymentDisplayName: v, markdownComponents: y, markdownClassNames: b, onAttachmentClick: x, onDownloadAll: S, onAttachmentRetry: C, codeBlockTheme: w, labels: T, selectedAttachmentId: E }) => {
+	let { colors: D, typography: O, className: k, bubbleClassName: A } = i ?? {}, { attachmentClickLabel: N, attachmentRetryLabel: P, attachmentOpenInNewTabLabel: L, startersAriaLabel: R = "Quick reply buttons", thinkingLabel: z, codeBlockCopyLabel: B, codeBlockCopiedLabel: V, assistantMessageAriaLabel: H = "Assistant message", deploymentIconFallbackLabel: U = "AI" } = T ?? {}, W = d ? (f ?? []).filter((t) => t.type !== e.Audio) : f ?? [], G = o({
+		"--cm-bubble-text": D?.text,
+		"--cm-starters-divider": D?.startersDivider
+	}), K = s(I.text, O?.fontClassName), q = !!(_ || v);
+	return /* @__PURE__ */ M("div", {
 		role: "group",
-		"aria-label": L,
-		style: B,
-		className: d("flex w-full items-start gap-3", O),
-		children: [H && /* @__PURE__ */ Y(r, {
-			src: h,
+		"aria-label": H,
+		style: G,
+		className: s("flex w-full items-start gap-3", k),
+		children: [q && /* @__PURE__ */ j(n, {
+			src: _,
 			size: 28,
-			initialsName: g || R,
-			labels: { tooltip: g ?? R }
-		}), /* @__PURE__ */ X("div", {
+			initialsName: v || U,
+			labels: { tooltip: v ?? U }
+		}), /* @__PURE__ */ M("div", {
 			className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
-			children: [/* @__PURE__ */ X("div", {
-				className: d("flex w-full min-w-0 max-w-full flex-col items-start gap-4", k),
+			children: [/* @__PURE__ */ M("div", {
+				className: s("flex w-full min-w-0 max-w-full flex-col items-start gap-4", A),
 				children: [
-					(e || c) && /* @__PURE__ */ Y("div", {
+					(t || d) && /* @__PURE__ */ j("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: d(V, "min-w-0 max-w-full text-start"),
-						children: /* @__PURE__ */ Y(i, {
-							content: e,
-							isStreaming: c,
-							thinkingLabel: P,
-							components: _,
-							classNames: v,
-							codeBlockCopyLabel: F,
-							codeBlockCopiedLabel: I,
-							codeBlockTheme: C
+						className: s(K, "min-w-0 max-w-full text-start"),
+						children: /* @__PURE__ */ j(r, {
+							content: t,
+							isStreaming: d,
+							thinkingLabel: z,
+							components: y,
+							classNames: b,
+							codeBlockCopyLabel: B,
+							codeBlockCopiedLabel: V,
+							codeBlockTheme: w
 						})
 					}),
-					/* @__PURE__ */ Y(tt, {
-						attachments: z,
-						onAttachmentClick: (e) => y?.(l?.find((t) => t.id === e)),
-						onDownloadAll: x,
-						onRetry: S,
+					/* @__PURE__ */ j(l, {
+						attachments: W,
+						onAttachmentClick: (e) => x?.(f?.find((t) => t.id === e)),
+						onDownloadAll: S,
+						onRetry: C,
 						labels: {
-							clickLabel: A,
-							retryLabel: j,
-							openInNewTabLabel: M
+							clickLabel: N,
+							retryLabel: P,
+							openInNewTabLabel: L
 						},
-						selectedAttachmentId: T
+						selectedAttachmentId: E
 					}),
-					f,
-					/* @__PURE__ */ Y(ct, {
-						...a,
-						isAlwaysVisible: o,
-						role: s.Assistant
+					p,
+					/* @__PURE__ */ j(F, {
+						...c,
+						isAlwaysVisible: u,
+						role: a.Assistant
 					})
 				]
-			}), p && p.length > 0 && m && /* @__PURE__ */ Y("div", {
+			}), m && m.length > 0 && g && /* @__PURE__ */ j("div", {
 				role: "list",
-				"aria-label": N,
-				className: d("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
-				children: p.map((e, t) => /* @__PURE__ */ Y("div", {
+				"aria-label": R,
+				className: s("flex w-full flex-wrap gap-2 border-t pt-5", I.startersDivider),
+				children: m.map((e, t) => /* @__PURE__ */ j("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ Y(b, {
+					children: /* @__PURE__ */ j(h, {
 						label: e.title,
 						className: "min-w-[40px]",
-						onClick: () => m(e)
+						onClick: () => g(e)
 					})
 				}, t))
 			})]
 		})]
 	});
-}, ut = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ Y("div", {
+}, R = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ j("div", {
 	role: "status",
 	"aria-live": "polite",
-	children: /* @__PURE__ */ Y(v, {
+	children: /* @__PURE__ */ j(p, {
 		title: e,
 		message: t,
 		textClassName: "flex-row flex-wrap gap-1"
 	})
-}), dt = /* @__PURE__ */ function(e) {
+}), z = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
-}({}), ft = 10, pt = ({ text: e, position: t = dt.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = ft, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: g, selectedAttachmentId: _ }) => {
-	let { colors: v, typography: b, className: x, bubbleClassName: S } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: M, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
+}({}), B = 10, V = ({ text: e, position: t = z.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: d, collapsedLineCount: p = B, labels: h, onAttachmentClick: g, onDownloadAll: y, onAttachmentRetry: b, selectedAttachmentId: x }) => {
+	let { colors: S, typography: C, className: w, bubbleClassName: T } = n ?? {}, { showMoreLabel: E = "Show more", showLessLabel: D = "Show less", showMoreAriaLabel: k, showLessAriaLabel: N, attachmentClickLabel: P, attachmentRetryLabel: L, attachmentOpenInNewTabLabel: R, userMessageAriaLabel: V = "User message" } = h ?? {}, { textRef: H, isTextCollapsed: U, isOverflowing: W, collapsedMaxHeight: G, expandedMaxHeight: K, isCollapsed: q, toggleCollapsed: J } = c({
 		text: e,
-		collapsedLineCount: o
-	}), B = u({
-		"--cm-bubble-user-bg": v?.userBackground,
-		"--cm-bubble-user-border": v?.userBorder,
-		"--cm-bubble-fade-start": v?.fadeStart,
-		"--cm-bubble-text": v?.text,
-		"--cm-bubble-collapsed-height": F ? `${I}px` : void 0,
-		"--cm-bubble-expanded-height": F ? `${L}px` : void 0
-	}), V = t === dt.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", H = d($.text, b?.fontClassName), ee = T ?? C, te = E ?? w, ne = R ? C : w, U = R ? ee : te, W = R ? N : P, re = Ne();
-	return /* @__PURE__ */ Y("div", {
+		collapsedLineCount: p
+	}), Y = o({
+		"--cm-bubble-user-bg": S?.userBackground,
+		"--cm-bubble-user-border": S?.userBorder,
+		"--cm-bubble-fade-start": S?.fadeStart,
+		"--cm-bubble-text": S?.text,
+		"--cm-bubble-collapsed-height": W ? `${G}px` : void 0,
+		"--cm-bubble-expanded-height": W ? `${K}px` : void 0
+	}), X = t === z.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", Z = s(I.text, C?.fontClassName), Q = k ?? E, ee = N ?? D, te = q ? E : D, ne = q ? Q : ee, re = q ? _ : v, $ = O();
+	return /* @__PURE__ */ j("div", {
 		role: "group",
-		"aria-label": A,
-		style: B,
-		className: d("flex w-full", x),
-		children: /* @__PURE__ */ X("div", {
+		"aria-label": V,
+		style: Y,
+		className: s("flex w-full", w),
+		children: /* @__PURE__ */ M("div", {
 			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
 			children: [
-				/* @__PURE__ */ Y(tt, {
-					attachments: a ?? [],
-					onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
-					onDownloadAll: m,
-					onRetry: g,
+				/* @__PURE__ */ j(l, {
+					attachments: d ?? [],
+					onAttachmentClick: (e) => g?.(d?.find((t) => t.id === e)),
+					onDownloadAll: y,
+					onRetry: b,
 					labels: {
-						clickLabel: D,
-						retryLabel: O,
-						openInNewTabLabel: k
+						clickLabel: P,
+						retryLabel: L,
+						openInNewTabLabel: R
 					},
 					styles: { className: "max-w-[640px]" },
-					selectedAttachmentId: _
+					selectedAttachmentId: x
 				}),
-				e && /* @__PURE__ */ Y("div", {
-					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, S),
-					children: /* @__PURE__ */ X("div", {
+				e && /* @__PURE__ */ j("div", {
+					className: s(I.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", X, T),
+					children: /* @__PURE__ */ M("div", {
 						className: "flex min-w-0 flex-col items-start",
-						children: [/* @__PURE__ */ Y("div", {
-							id: re,
-							className: d("relative overflow-hidden", F && $.collapsibleText, F && !R && $.expandedText, M && $.collapsedText),
-							children: /* @__PURE__ */ Y("p", {
-								ref: j,
-								className: d(H, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+						children: [/* @__PURE__ */ j("div", {
+							id: $,
+							className: s("relative overflow-hidden", W && I.collapsibleText, W && !q && I.expandedText, U && I.collapsedText),
+							children: /* @__PURE__ */ j("p", {
+								ref: H,
+								className: s(Z, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
-						}), F && /* @__PURE__ */ Y(y, {
-							label: /* @__PURE__ */ Y(J, { children: ne }),
-							iconBefore: /* @__PURE__ */ Y(W, {
-								size: p.SM,
+						}), W && /* @__PURE__ */ j(m, {
+							label: /* @__PURE__ */ j(A, { children: te }),
+							iconBefore: /* @__PURE__ */ j(re, {
+								size: u.SM,
 								"aria-hidden": "true"
 							}),
-							"aria-label": U,
-							"aria-expanded": !R,
-							"aria-controls": re,
+							"aria-label": ne,
+							"aria-expanded": !q,
+							"aria-controls": $,
 							className: "mt-3",
-							onClick: z,
-							size: h.Small
+							onClick: J,
+							size: f.Small
 						})]
 					})
 				}),
-				/* @__PURE__ */ Y(ct, {
+				/* @__PURE__ */ j(F, {
 					...r,
 					isAlwaysVisible: i,
-					role: s.User
+					role: a.User
 				})
 			]
 		})
 	});
-}, mt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ Y(ut, { labels: {
+}, H = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === a.Status ? /* @__PURE__ */ j(R, { labels: {
 	titleText: r.labels?.statusTitleText,
 	bodyText: r.labels?.statusBodyText ?? ""
-} }) : e === s.User ? /* @__PURE__ */ Y(pt, {
+} }) : e === a.User ? /* @__PURE__ */ j(V, {
 	...r,
 	onAttachmentClick: t
-}) : /* @__PURE__ */ Y(lt, {
+}) : /* @__PURE__ */ j(L, {
 	...r,
 	markdownComponents: n,
 	onAttachmentClick: t
 });
 //#endregion
-export { lt as AssistantMessageBubble, dt as BubblePosition, ct as MessageActions, mt as MessageBubble, ut as StatusMessageBubble, pt as UserMessageBubble };
+export { L as AssistantMessageBubble, z as BubblePosition, F as MessageActions, H as MessageBubble, R as StatusMessageBubble, V as UserMessageBubble };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-messages",
   "description": "Message bubble components for rendering conversation history with actions and source citations",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,10 +19,10 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.0.0",
-    "@epam/ai-dial-conversation-input": "1.0.0",
     "react-markdown": "^10.1.0",
-    "@epam/ai-dial-ui-kit": "^0.14.0-dev.6"
+    "@epam/ai-dial-attachment-input": "1.0.2",
+    "@epam/ai-dial-chat-shared": "1.0.2",
+    "@epam/ai-dial-ui-kit": "^0.14.0-dev.15"
   },
   "repository": {
     "type": "git",