@epam/ai-dial-conversation-input 1.3.0-dev.124 → 1.3.0-dev.126

package/index.js

@@ -91,11 +91,7 @@ var U = {
 		});
 	}, []);
 	z(() => {
-		if (x.current) {
-			x.current = !1;
-			return;
-		}
-		b.current?.(g);
+		x.current ? x.current = !1 : b.current?.(g);
 	}, [g]);
 	let C = R((e) => {
 		_(e);
@@ -250,15 +246,7 @@ var U = {
 	})() : "", u = R((t, n, i) => {
 		if (e == null || i) return;
 		let { start: c, end: l } = Ne(t, n), u = t.slice(c, l);
-		if (!Pe(u, e.triggerPrefix)) {
-			r(!1), s(null), a(null);
-			return;
-		}
-		if (a(c), u === e.triggerPrefix || o !== c) {
-			r(!0), s(null);
-			return;
-		}
-		r(!1);
+		Pe(u, e.triggerPrefix) ? (a(c), u === e.triggerPrefix || o !== c ? (r(!0), s(null)) : r(!1)) : (r(!1), s(null), a(null));
 	}, [e, o]);
 	z(() => {
 		if (e == null) {
@@ -277,11 +265,7 @@ var U = {
 	}, []), p = R((n) => {
 		if (e == null) return;
 		let { start: i, end: s } = Ne(t, n);
-		if (!Pe(t.slice(i, s), e.triggerPrefix)) {
-			a(null), r(!1);
-			return;
-		}
-		a(i), r(o !== i);
+		Pe(t.slice(i, s), e.triggerPrefix) ? (a(i), r(o !== i)) : (a(null), r(!1));
 	}, [
 		e,
 		t,
@@ -441,7 +425,7 @@ var U = {
 		if (n === i.current) return;
 		i.current = n;
 		let e = r.current;
-		!t.current || !e || queueMicrotask(() => {
+		t.current && e && queueMicrotask(() => {
 			let n = t.current;
 			if (!n) return;
 			let { value: r, selectionStart: i, selectionEnd: o } = n, s = i ?? r.length, c = o ?? s;
@@ -800,49 +784,52 @@ var U = {
 }, K = {
 	icon: "_icon_1fv6z_1",
 	selectedIcon: "_selectedIcon_1fv6z_5"
-}, ft = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: s, onToolToggle: u, itemLabelClassName: d = "dial-small-text", colors: p }) => /* @__PURE__ */ I(W, {
-	isOpen: e,
-	title: o,
-	closeLabel: i,
-	onClose: r,
-	onBack: t,
-	backLabel: n,
-	style: a,
-	children: /* @__PURE__ */ I("ul", {
-		role: "menu",
-		className: "flex flex-col pb-4",
-		style: c({
-			"--tbs-icon-text": p?.iconText,
-			"--tbs-selected-icon-text": p?.selectedIconText
-		}),
-		children: s.map((e) => /* @__PURE__ */ I("li", {
-			role: "none",
-			children: /* @__PURE__ */ I(m, {
-				type: "button",
-				role: "menuitemcheckbox",
-				"aria-checked": e.isSelected,
-				className: "w-full gap-3 px-4 py-[10px] text-start",
-				iconBefore: /* @__PURE__ */ I("span", {
-					className: l("flex items-center", K.icon),
-					children: e.icon
-				}),
-				iconAfter: e.isSelected ? /* @__PURE__ */ I("span", {
-					className: l("ms-auto", K.selectedIcon),
-					children: /* @__PURE__ */ I(pe, {
-						size: f,
-						"aria-hidden": !0,
-						stroke: v
-					})
-				}) : null,
-				label: /* @__PURE__ */ I("span", {
-					className: d,
-					children: e.label
-				}),
-				onClick: () => u(e.id)
-			})
-		}, e.id))
-	})
-}), pt = {
+}, ft = ({ isOpen: e, onBack: t, backLabel: n = "Back", onClose: r, closeLabel: i = "Close", style: a, title: o = "Tools", items: s, onToolToggle: u, itemLabelClassName: d = "dial-small-text", colors: p }) => {
+	let h = c({
+		"--tbs-icon-text": p?.iconText,
+		"--tbs-selected-icon-text": p?.selectedIconText
+	});
+	return /* @__PURE__ */ I(W, {
+		isOpen: e,
+		title: o,
+		closeLabel: i,
+		onClose: r,
+		onBack: t,
+		backLabel: n,
+		style: a,
+		children: /* @__PURE__ */ I("ul", {
+			role: "menu",
+			className: "flex flex-col pb-4",
+			style: h,
+			children: s.map((e) => /* @__PURE__ */ I("li", {
+				role: "none",
+				children: /* @__PURE__ */ I(m, {
+					type: "button",
+					role: "menuitemcheckbox",
+					"aria-checked": e.isSelected,
+					className: "w-full gap-3 px-4 py-[10px] text-start",
+					iconBefore: /* @__PURE__ */ I("span", {
+						className: l("flex items-center", K.icon),
+						children: e.icon
+					}),
+					iconAfter: e.isSelected ? /* @__PURE__ */ I("span", {
+						className: l("ms-auto", K.selectedIcon),
+						children: /* @__PURE__ */ I(pe, {
+							size: f,
+							"aria-hidden": !0,
+							stroke: v
+						})
+					}) : null,
+					label: /* @__PURE__ */ I("span", {
+						className: d,
+						children: e.label
+					}),
+					onClick: () => u(e.id)
+				})
+			}, e.id))
+		})
+	});
+}, pt = {
 	toolIcon: "_toolIcon_ma5s5_1",
 	chevronIcon: "_chevronIcon_ma5s5_5"
 }, mt = ({ onAttachClick: e, onRecordVoice: t, recordVoiceLabel: n = "Record voice", attachLabel: r, addMenuTitle: i, menuTitle: a, menuCloseLabel: s, style: u, listClassName: p = "w-[240px]", isDisabled: m = !1, chatSettings: h, extraMenuItems: g, toolsMenuItems: x = [], onToolToggle: C, toolsMenuTitle: T = "Tools", toolsBackLabel: E = "Back", menuOverlays: D, getCaretPosition: ee, colors: O }) => {
@@ -1090,23 +1077,23 @@ var U = {
 	chipClose: "_chipClose_1lvv5_25"
 }, ht = (e) => `Remove ${e}`, gt = ({ items: e, onToolToggle: t, onToolDismiss: n, canRemove: r = !0, removeLabel: i = ht, stateOnLabel: a, stateOffLabel: o, typography: s, colors: u }) => {
 	if (e.length === 0) return null;
-	let d = !!(a && o);
+	let d = !!(a && o), f = c({
+		"--ci-chip-bg": u?.chipBg,
+		"--ci-chip-border": u?.chipBorder,
+		"--ci-chip-icon": u?.chipIcon,
+		"--ci-chip-text": u?.chipText,
+		"--ci-chip-hover-bg": u?.chipHoverBg,
+		"--ci-chip-selected-bg": u?.chipSelectedBg,
+		"--ci-chip-selected-border": u?.chipSelectedBorder,
+		"--ci-chip-selected-icon": u?.chipSelectedIcon,
+		"--ci-chip-selected-text": u?.chipSelectedText,
+		"--ci-chip-state-text": u?.chipStateText,
+		"--ci-chip-close": u?.chipClose,
+		"--ci-chip-close-hover": u?.chipCloseHover
+	});
 	return /* @__PURE__ */ I("div", {
 		className: "flex flex-wrap items-center gap-2",
-		style: c({
-			"--ci-chip-bg": u?.chipBg,
-			"--ci-chip-border": u?.chipBorder,
-			"--ci-chip-icon": u?.chipIcon,
-			"--ci-chip-text": u?.chipText,
-			"--ci-chip-hover-bg": u?.chipHoverBg,
-			"--ci-chip-selected-bg": u?.chipSelectedBg,
-			"--ci-chip-selected-border": u?.chipSelectedBorder,
-			"--ci-chip-selected-icon": u?.chipSelectedIcon,
-			"--ci-chip-selected-text": u?.chipSelectedText,
-			"--ci-chip-state-text": u?.chipStateText,
-			"--ci-chip-close": u?.chipClose,
-			"--ci-chip-close-hover": u?.chipCloseHover
-		}),
+		style: f,
 		children: e.map((e) => /* @__PURE__ */ L("div", {
 			className: l(q.chip, e.isSelected && q.chipSelected, "flex min-w-0 items-center gap-1.5 rounded-full border py-1 transition-colors", r ? "ps-2 pe-1" : "px-2"),
 			children: [/* @__PURE__ */ L("button", {
@@ -1170,7 +1157,7 @@ var U = {
 		e.width = e.clientWidth || 200, e.height = e.clientHeight || 32;
 		let { width: n, height: r } = e;
 		t.clearRect(0, 0, n, r), t.fillStyle = getComputedStyle(e).color;
-		let i = Math.min(Math.max(1, Math.floor(n / yt)), bt - 1), a = m.current, o = h.current;
+		let i = Math.min(Math.max(1, Math.floor(n / yt)), 199), a = m.current, o = h.current;
 		t.save(), t.beginPath(), t.rect(0, 0, n, r), t.clip(), t.translate(-o, 0);
 		for (let e = 0; e <= i; e++) {
 			let n = ((a - i + e) % bt + bt) % bt, o = p.current[n] ?? 0, s = Math.min(1, o * 6), c = Math.max(3, s * r);
@@ -1414,9 +1401,7 @@ var U = {
 function Nt(e) {
 	if (e !== void 0) switch (typeof e) {
 		case "number": return e;
-		case "string":
-			if (e.endsWith("px")) return parseFloat(e);
-			break;
+		case "string": if (e.endsWith("px")) return parseFloat(e);
 	}
 }
 function Pt({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
@@ -1477,12 +1462,10 @@ function Lt(e = !1) {
 function Y({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
 	if (t === "horizontal" && n) switch (Lt()) {
 		case "negative": return -r;
-		case "positive-descending":
-			if (e) {
-				let { clientWidth: t, scrollLeft: n, scrollWidth: r } = e;
-				return r - t - n;
-			}
-			break;
+		case "positive-descending": if (e) {
+			let { clientWidth: t, scrollLeft: n, scrollWidth: r } = e;
+			return r - t - n;
+		}
 	}
 	return r;
 }
@@ -1546,9 +1529,7 @@ function Q({ itemCount: e, itemProps: t, itemSize: n }) {
 					case "function":
 						a = n(e, t);
 						break;
-					case "number":
-						a = n;
-						break;
+					case "number": a = n;
 				}
 				if (e === 0) r.set(e, {
 					size: a,
@@ -1590,9 +1571,7 @@ function Ht({ containerSize: e, itemSize: t }) {
 		case "string":
 			X(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), X(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
 			break;
-		default:
-			n = t;
-			break;
+		default: n = t;
 	}
 	return n;
 }
@@ -1646,18 +1625,21 @@ function Ut({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		h,
 		a,
 		m
-	]), w = R((t) => Bt({
-		cachedBounds: h,
-		containerScrollOffset: Y({
+	]), w = R((t) => {
+		let n = Y({
 			containerElement: e,
 			direction: r,
 			isRtl: i,
 			scrollOffset: t
-		}),
-		containerSize: p,
-		itemCount: a,
-		overscanCount: l
-	}), [
+		});
+		return Bt({
+			cachedBounds: h,
+			containerScrollOffset: n,
+			containerSize: p,
+			itemCount: a,
+			overscanCount: l
+		});
+	}, [
 		h,
 		e,
 		p,
@@ -1667,7 +1649,8 @@ function Ut({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		l
 	]);
 	return Mt(() => {
-		v(w((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
+		let t = (r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0;
+		v(w(t));
 	}, [
 		e,
 		r,
@@ -1676,19 +1659,19 @@ function Ut({ containerElement: e, containerStyle: t, defaultContainerSize: n =
 		if (!e) return;
 		let t = () => {
 			v((t) => {
-				let { scrollLeft: n, scrollTop: o } = e, s = Bt({
+				let { scrollLeft: n, scrollTop: o } = e, s = Y({
+					containerElement: e,
+					direction: r,
+					isRtl: i,
+					scrollOffset: r === "vertical" ? o : n
+				}), c = Bt({
 					cachedBounds: h,
-					containerScrollOffset: Y({
-						containerElement: e,
-						direction: r,
-						isRtl: i,
-						scrollOffset: r === "vertical" ? o : n
-					}),
+					containerScrollOffset: s,
 					containerSize: p,
 					itemCount: a,
 					overscanCount: l
 				});
-				return Z(s, t) ? t : s;
+				return Z(c, t) ? t : c;
 			});
 		};
 		return e.addEventListener("scroll", t), () => {
@@ -2112,16 +2095,12 @@ var Yt = {
 	let Zt = () => {
 		Ut(Z.current?.selectionStart ?? Y.length);
 	}, Qt = V(!1), $t = () => {
-		if (Qt.current) {
-			Qt.current = !1;
-			return;
-		}
-		requestAnimationFrame(() => {
+		Qt.current ? Qt.current = !1 : requestAnimationFrame(() => {
 			let e = Z.current;
 			Xt.current(e?.selectionStart ?? e?.value.length ?? 0);
 		});
 	}, tn = (e) => {
-		e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End" && e.key !== "PageUp" && e.key !== "PageDown" || Ut(e.currentTarget.selectionStart ?? Y.length);
+		(e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") && Ut(e.currentTarget.selectionStart ?? Y.length);
 	}, nn = K?.emptyQueryHint != null, rn = K != null && Q != null ? Q + K.triggerPrefix.length : null, an = rn != null && Y.slice(rn).split("\n", 1)[0] !== "", on = nn && zt && Bt === "" && rn != null && !an, sn = K != null && zt ? Q ?? 0 : null, cn = V(null), ln = V(null), [un, dn] = H(null), fn = R(() => {
 		let e = cn.current, t = ln.current;
 		if (e == null || t == null) {
@@ -2163,7 +2142,7 @@ var Yt = {
 		Z
 	]), mn = V(void 0);
 	z(() => {
-		dt == null || mn.current === t || (mn.current = t, Z.current?.setSelectionRange(dt, dt), Ut(dt));
+		dt != null && mn.current !== t && (mn.current = t, Z.current?.setSelectionRange(dt, dt), Ut(dt));
 	}, [Y]);
 	let hn = V(Y);
 	hn.current = Y;
@@ -2234,20 +2213,20 @@ var Yt = {
 		Ot,
 		Ln,
 		K
-	]), zn = Y.trim().length > 0 || gn.length > 0, Bn = zn && !Cn && !Ne && !$, [Vn, Hn] = H([]);
+	]), zn = Y.trim().length > 0 || gn.length > 0, Bn = zn && !Cn && !Ne && !$, [Vn, Hn] = H([]), Un = ($e ?? []).map((e) => e.id).join("|");
 	z(() => {
 		Hn([]);
-	}, [($e ?? []).map((e) => e.id).join("|")]);
-	let Un = B(() => {
+	}, [Un]);
+	let Wn = B(() => {
 		let e = $e ?? [];
 		return it ? e.filter((e) => e.isSelected || !Vn.includes(e.id)) : e;
 	}, [
 		$e,
 		Vn,
 		it
-	]), Wn = R((e) => {
+	]), Gn = R((e) => {
 		Hn((t) => t.includes(e) ? t : [...t, e]), $e?.find((t) => t.id === e)?.isSelected && et?.(e);
-	}, [$e, et]), Gn = ye === void 0 || be != null, Kn = Pe && !s, qn = async () => {
+	}, [$e, et]), Kn = ye === void 0 || be != null, qn = Pe && !s, Jn = async () => {
 		if (Ne || $) return;
 		if (Y.length >= ve) {
 			Ot?.(Y.length, ve);
@@ -2262,15 +2241,15 @@ var Yt = {
 		} catch {
 			X(e), yn(t);
 		}
-	}, Jn = (e) => Ue === nt.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey, Yn = (e) => {
+	}, Yn = (e) => Ue === nt.MetaEnter ? (e.metaKey || e.ctrlKey) && !e.shiftKey : !e.shiftKey && !e.metaKey && !e.ctrlKey, Xn = (e) => {
 		if (!zt || e.nativeEvent.isComposing) return !1;
 		if (e.key === "Escape") return e.preventDefault(), e.stopPropagation(), Vt(), !0;
 		if (e.key === "ArrowDown" || e.key === "ArrowUp") return e.preventDefault(), Jt(e.key === "ArrowDown" ? Ie.Next : Ie.Previous), !0;
 		if (e.key !== "Enter" || e.shiftKey) return !1;
 		let t = Yt();
-		return t == null ? Jn(e) ? (e.preventDefault(), !0) : !1 : (e.preventDefault(), t.click(), !0);
-	}, Xn = (e) => {
-		if (!$ && !Rt(e) && !Yn(e)) {
+		return t == null ? Yn(e) ? (e.preventDefault(), !0) : !1 : (e.preventDefault(), t.click(), !0);
+	}, Zn = (e) => {
+		if (!$ && !Rt(e) && !Xn(e)) {
 			if (!e.nativeEvent.isComposing && !G && !s) {
 				if (e.key === "ArrowUp" || e.key === "ArrowDown") {
 					let t = e.currentTarget.selectionStart ?? 0, n = Nt.navigate(e.key === "ArrowUp" ? "up" : "down", Y, t);
@@ -2289,14 +2268,14 @@ var Yt = {
 					}
 				}
 			}
-			e.key === "Enter" && Jn(e) && (e.preventDefault(), !s && Bn && Gn && !G && qn());
+			e.key === "Enter" && Yn(e) && (e.preventDefault(), !s && Bn && Kn && !G && Jn());
 		}
-	}, Zn = (e) => {
+	}, Qn = (e) => {
 		let t = Array.from(e.target.files ?? []);
 		if (t.length === 0) return;
 		let n = _n(t);
 		e.target.value = "", vn(n);
-	}, Qn = B(() => {
+	}, $n = B(() => {
 		let e = [];
 		return sn != null && e.push({
 			offset: sn,
@@ -2319,10 +2298,10 @@ var Yt = {
 		on,
 		K,
 		rn
-	]), $n = Ft || Qn.length > 0, { mirrorRef: er, selectionRects: tr, updateSelectionRects: nr, syncMirrorToTextarea: rr } = We({
+	]), er = Ft || $n.length > 0, { mirrorRef: tr, selectionRects: nr, updateSelectionRects: rr, syncMirrorToTextarea: ir } = We({
 		textareaRef: Z,
 		message: Y,
-		isMirrorActive: $n
+		isMirrorActive: er
 	});
 	ke(() => {
 		fn();
@@ -2331,8 +2310,8 @@ var Yt = {
 		sn,
 		Y
 	]);
-	let ir = /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I("textarea", {
-		className: l(J.textarea, $n && J.textareaMentionMode, P?.fontClassName || "dial-body-paragraph-text", "relative z-0 [field-sizing:content] max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent ps-1 pe-1 outline-hidden", "disabled:cursor-not-allowed"),
+	let ar = /* @__PURE__ */ I("textarea", {
+		className: l(J.textarea, er && J.textareaMentionMode, P?.fontClassName || "dial-body-paragraph-text", "relative z-0 [field-sizing:content] max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent ps-1 pe-1 outline-hidden", "disabled:cursor-not-allowed"),
 		ref: Z,
 		autoFocus: ft,
 		value: Y,
@@ -2341,13 +2320,13 @@ var Yt = {
 			let t = e.nativeEvent instanceof InputEvent ? e.nativeEvent : void 0;
 			Wt(e.target.value, e.target.selectionStart ?? e.target.value.length, t?.isComposing ?? !1), u?.(e.target.value);
 		},
-		onSelect: nr,
+		onSelect: rr,
 		onScroll: () => {
-			rr(), sn != null && fn();
+			ir(), sn != null && fn();
 		},
 		onFocus: $t,
 		onClick: Zt,
-		onKeyDown: Xn,
+		onKeyDown: Zn,
 		onKeyUp: tn,
 		onPaste: Rn,
 		placeholder: m,
@@ -2359,7 +2338,7 @@ var Yt = {
 		disabled: G,
 		readOnly: $,
 		rows: 1
-	}), K != null && /* @__PURE__ */ I("div", {
+	}), or = /* @__PURE__ */ L(F, { children: [ar, K != null && /* @__PURE__ */ I("div", {
 		"aria-hidden": !0,
 		className: l("pointer-events-none absolute", P?.fontClassName || "dial-body-paragraph-text"),
 		style: {
@@ -2376,30 +2355,33 @@ var Yt = {
 			initialFocus: -1,
 			matchReferenceWidth: !1,
 			outsidePressIgnoreRef: Z,
-			renderOverlay: () => /* @__PURE__ */ I("div", {
-				ref: Kt,
-				role: K.menuLabel == null ? void 0 : "group",
-				"aria-label": K.menuLabel,
-				children: K.renderMenu({
-					query: Bt,
-					caretPosition: Q ?? 0,
-					close: pn,
-					listboxId: Gt,
-					activeOptionId: qt
-				})
-			}),
+			renderOverlay: () => {
+				let e = K.menuLabel != null;
+				return /* @__PURE__ */ I("div", {
+					ref: Kt,
+					role: e ? "group" : void 0,
+					"aria-label": K.menuLabel,
+					children: K.renderMenu({
+						query: Bt,
+						caretPosition: Q ?? 0,
+						close: pn,
+						listboxId: Gt,
+						activeOptionId: qt
+					})
+				});
+			},
 			children: /* @__PURE__ */ I("span", {
 				"aria-hidden": !0,
 				className: "inline-block h-lh w-0"
 			})
 		})
-	})] }), ar = /* @__PURE__ */ L("div", {
+	})] }), sr = /* @__PURE__ */ L("div", {
 		ref: ln,
 		className: "relative -ms-1 -me-1 w-[calc(100%+8px)]",
-		children: [$n && /* @__PURE__ */ L("div", {
-			ref: er,
+		children: [er && /* @__PURE__ */ L("div", {
+			ref: tr,
 			className: l(J.textarea, P?.fontClassName || "dial-body-paragraph-text", "pointer-events-none absolute inset-0 z-10 max-h-[272px] w-full overflow-hidden ps-1 pe-1 [overflow-wrap:anywhere] whitespace-pre-wrap"),
-			children: [Ve(Y, Pt, Qn, J.mentionHighlight, J.mentionHighlightUnsupported), tr.map((e, t) => /* @__PURE__ */ I("div", {
+			children: [Ve(Y, Pt, $n, J.mentionHighlight, J.mentionHighlightUnsupported), nr.map((e, t) => /* @__PURE__ */ I("div", {
 				"aria-hidden": !0,
 				className: "pointer-events-none absolute rounded-sm bg-control-accent-alpha-active",
 				style: {
@@ -2409,8 +2391,8 @@ var Yt = {
 					height: e.height
 				}
 			}, `selection-${t}`))]
-		}), ir]
-	}), or = we ? void 0 : /* @__PURE__ */ I(mt, {
+		}), or]
+	}), cr = we ? void 0 : /* @__PURE__ */ I(mt, {
 		onAttachClick: Te ? void 0 : () => Pn.current?.click(),
 		attachLabel: g,
 		addMenuTitle: C,
@@ -2428,15 +2410,15 @@ var Yt = {
 		toolsBackLabel: ot,
 		menuOverlays: ct,
 		getCaretPosition: () => Z.current?.selectionStart ?? Y.length
-	}), sr = De === rt.Inline && (!At || Ae), cr = or && /* @__PURE__ */ I("div", {
+	}), lr = De === rt.Inline && (!At || Ae), ur = cr && /* @__PURE__ */ I("div", {
 		className: l("flex", U.addCluster),
-		children: or
-	}), lr = Un.length > 0 && et != null && /* @__PURE__ */ I("div", {
+		children: cr
+	}), dr = Wn.length > 0 && et != null && /* @__PURE__ */ I("div", {
 		className: l("min-w-0 flex-1", U.toolsChips),
 		children: /* @__PURE__ */ I(gt, {
-			items: Un,
+			items: Wn,
 			onToolToggle: et,
-			onToolDismiss: Wn,
+			onToolDismiss: Gn,
 			canRemove: it,
 			removeLabel: st?.removeLabel,
 			stateOnLabel: st?.stateOnLabel,
@@ -2479,7 +2461,7 @@ var Yt = {
 				className: "sr-only",
 				"aria-hidden": !0,
 				tabIndex: -1,
-				onChange: Zn
+				onChange: Qn
 			}),
 			An && /* @__PURE__ */ I(x, {
 				text: An,
@@ -2491,31 +2473,31 @@ var Yt = {
 				analyserNodeRef: kn,
 				onStop: Mn,
 				onDiscard: Nn,
-				attachButton: or,
+				attachButton: cr,
 				stopLabel: ie,
 				discardLabel: ae,
 				processingLabel: ze
 			}),
-			!$ && Ee && ar,
-			!$ && !Ee && sr && lr && /* @__PURE__ */ I("div", {
+			!$ && Ee && sr,
+			!$ && !Ee && lr && dr && /* @__PURE__ */ I("div", {
 				className: "flex",
-				children: lr
+				children: dr
 			}),
 			!$ && !Ee && /* @__PURE__ */ L("div", {
-				className: l("flex items-center gap-2", sr ? "flex-nowrap" : "flex-wrap", U.actionRow),
+				className: l("flex items-center gap-2", lr ? "flex-nowrap" : "flex-wrap", U.actionRow),
 				children: [
-					sr && cr,
+					lr && ur,
 					/* @__PURE__ */ I("div", {
-						className: l("flex min-w-0 items-center self-stretch", sr ? "flex-1" : "w-full", U.textareaWrap),
-						children: ar
+						className: l("flex min-w-0 items-center self-stretch", lr ? "flex-1" : "w-full", U.textareaWrap),
+						children: sr
 					}),
-					!sr && cr,
-					!sr && lr,
+					!lr && ur,
+					!lr && dr,
 					/* @__PURE__ */ I("div", {
 						className: l("ms-auto flex flex-shrink-0 items-center gap-2", U.footerActions),
 						children: W ? W({
 							canSend: Bn,
-							onSend: qn
+							onSend: Jn
 						}) : /* @__PURE__ */ L(F, { children: [
 							Dt,
 							/* @__PURE__ */ I(en, {
@@ -2533,7 +2515,7 @@ var Yt = {
 								onPickerToggle: () => Mt((e) => !e),
 								onPickerOpenChange: Mt
 							}),
-							Kn && /* @__PURE__ */ I(S, {
+							qn && /* @__PURE__ */ I(S, {
 								icon: /* @__PURE__ */ I(_e, {
 									size: _.LG,
 									stroke: v,
@@ -2549,8 +2531,8 @@ var Yt = {
 								onStop: o,
 								ariaLabel: te
 							}) : !s && /* @__PURE__ */ I(St, {
-								onSend: qn,
-								isDisabled: !Gn || !Bn,
+								onSend: Jn,
+								isDisabled: !Kn || !Bn,
 								ariaLabel: A,
 								sendTooltip: zn ? j : M ?? j
 							})
@@ -2573,12 +2555,12 @@ var nn = {
 	welcome: "_welcome_1icyo_1",
 	description: "_description_1icyo_5"
 }, rn = ({ isStreaming: e = !1, placeholder: t = "Type a prompt or use \"/\" to select one", welcomeText: n, descriptionText: r, belowWelcomeSlot: i, aboveInputSlot: a, styles: o, className: s, inputClassName: u, isInputDisabled: d = !1, ...f }) => {
-	let { colors: p, typography: m, attachmentTray: h, modelMenu: g } = o ?? {};
+	let { colors: p, typography: m, attachmentTray: h, modelMenu: g } = o ?? {}, _ = c({
+		"--ci-welcome-color": p?.welcomeText,
+		"--ci-description-color": p?.descriptionText
+	});
 	return /* @__PURE__ */ L("div", {
-		style: c({
-			"--ci-welcome-color": p?.welcomeText,
-			"--ci-description-color": p?.descriptionText
-		}),
+		style: _,
 		className: l("relative flex w-full flex-col items-center gap-9 px-4 py-5 desktop:p-5", s),
 		children: [
 			n && /* @__PURE__ */ L("div", {
@@ -2624,13 +2606,7 @@ var nn = {
 	}, Ee = R((e, t) => {
 		p(e, xe, t);
 	}, [xe, p]), De = () => {
-		if (we) {
-			if (_e.length >= ue) {
-				de?.(_e.length, ue);
-				return;
-			}
-			Ee(_e, ye);
-		}
+		we && (_e.length >= ue ? de?.(_e.length, ue) : Ee(_e, ye));
 	}, Oe = R(() => he([]), []), ke = R((e) => {
 		ve(e), n?.(e);
 	}, [n]), U = R((e) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-input",
   "description": "Conversation message input with model selection, attachments, voice input, and edit mode",
-  "version": "1.3.0-dev.124",
+  "version": "1.3.0-dev.126",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,10 +19,10 @@
   "dependencies": {
     "react-window": "^2.2.7",
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-attachment-input": "1.3.0-dev.124"
+    "@epam/ai-dial-attachment-input": "1.3.0-dev.126"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.124",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.126",
     "react": "^19.2.8",
     "@epam/ai-dial-ui-kit": "^0.16.0-dev.20"
   },