@flowengage/react-chatbot 2.0.8 → 2.0.9

package/dist/flowengage-react-chatbot.mjs

@@ -29371,12 +29371,12 @@ function BO({ orbColors: e, ...t }) {
 		...t
 	});
 }
-function VO({ copy: e, orbColors: t, primaryColor: n, onYes: r, onLater: i, isMobile: a }) {
-	let o = n || PO.green, s = IO(o), c = a ? 72 : 94, l = /* @__PURE__ */ _("div", {
+function VO({ copy: e, orbColors: t, primaryColor: n, onYes: r, onLater: i, isMobile: a, isClosing: o }) {
+	let s = n || PO.green, c = IO(s), l = a ? 72 : 94, u = /* @__PURE__ */ _("div", {
 		style: {
 			display: "flex",
-			alignItems: "center",
-			gap: a ? "14px" : "18px"
+			alignItems: a ? "flex-end" : "center",
+			gap: a ? "7px" : "9px"
 		},
 		children: [/* @__PURE__ */ _("div", {
 			style: {
@@ -29435,14 +29435,14 @@ function VO({ copy: e, orbColors: t, primaryColor: n, onYes: r, onLater: i, isMo
 						boxSizing: "border-box",
 						padding: "0 16px",
 						borderRadius: "999px",
-						background: o,
-						color: s,
+						background: s,
+						color: c,
 						fontWeight: 400,
 						fontSize: "14px",
 						border: "none",
 						cursor: "pointer",
 						whiteSpace: "nowrap",
-						boxShadow: `0 4px 16px ${o}66`,
+						boxShadow: `0 4px 16px ${s}66`,
 						transition: "transform 0.15s ease"
 					},
 					onMouseEnter: (e) => {
@@ -29494,15 +29494,15 @@ function VO({ copy: e, orbColors: t, primaryColor: n, onYes: r, onLater: i, isMo
 			},
 			style: { flexShrink: 0 },
 			children: /* @__PURE__ */ g(BO, {
-				size: c,
+				size: l,
 				orbColors: t
 			})
 		})]
 	});
 	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(Yp.div, {
 		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		transition: { duration: .4 },
+		animate: { opacity: o ? 0 : 1 },
+		transition: { duration: .28 },
 		style: {
 			position: "fixed",
 			inset: 0,
@@ -29516,21 +29516,30 @@ function VO({ copy: e, orbColors: t, primaryColor: n, onYes: r, onLater: i, isMo
 			left: 0,
 			right: 0,
 			padding: "24px 20px 40px",
-			overflow: "hidden"
+			overflow: "hidden",
+			animation: o ? "fe-orb-slide-down 0.28s cubic-bezier(0.16,1,0.3,1) forwards" : ""
 		},
-		children: l
-	}) : l] });
+		children: u
+	}) : /* @__PURE__ */ g("div", {
+		style: { animation: o ? "fe-orb-slide-down 0.28s cubic-bezier(0.16,1,0.3,1) forwards" : "" },
+		children: u
+	})] });
 }
-function HO({ copy: e, orbColors: t, primaryColor: n, onVoice: r, onText: i, onClose: a, isMobile: o }) {
-	let s = n || PO.green, c = IO(s);
+function HO({ copy: e, orbColors: t, primaryColor: n, onVoice: r, onText: i, onClose: a, isMobile: o, isClosing: s }) {
+	let c = n || PO.green, l = IO(c);
 	return /* @__PURE__ */ _(Yp.div, {
 		initial: {
 			scale: 50 / 350,
 			borderRadius: "50%"
 		},
-		animate: {
+		animate: s ? {
+			scale: 50 / 350,
+			opacity: 0,
+			borderRadius: "50%"
+		} : {
 			scale: 1,
-			borderRadius: "16px"
+			borderRadius: "16px",
+			opacity: 1
 		},
 		transition: {
 			type: "spring",
@@ -29615,14 +29624,14 @@ function HO({ copy: e, orbColors: t, primaryColor: n, onVoice: r, onText: i, onC
 						width: "127px",
 						height: "43px",
 						borderRadius: "999px",
-						background: s,
-						color: c,
+						background: c,
+						color: l,
 						fontWeight: 400,
 						fontSize: "16px",
 						border: "none",
 						cursor: "pointer",
 						transition: "transform 0.15s ease",
-						boxShadow: `0 4px 12px ${s}55`
+						boxShadow: `0 4px 12px ${c}55`
 					},
 					onMouseEnter: (e) => {
 						e.currentTarget.style.transform = "scale(1.03)";
@@ -30064,28 +30073,28 @@ var GO = () => /* @__PURE__ */ g("div", {
 		} }, e))
 	})
 });
-function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i, quickChatOptions: a, onQuickChatSelect: o, isMobile: s, chatHistory: l, isAiTyping: u, isAgentTyping: d, activeScreen: f, agentName: v, agentHeadshot: y, fallbackAgentName: b, input: x, setInput: S, onSubmit: C, isConversationEnded: w, isLoading: T, isRateLimited: ee, rateLimitMessage: te, selectedFile: ne, onFileSelect: re, onRemoveSelectedFile: E, attachmentError: ie, isUploadingAttachment: ae, requiresEmail: oe, emailInput: se, setEmailInput: ce, emailError: le, replyContext: ue, setReplyContext: de, webRTCError: fe, micError: pe, setMicError: me, dismissCallError: he, activeCallId: ge, isCallMuted: _e, toggleCallMute: ve, endWebRTCCall: ye, formatCallDuration: be, callDurationSeconds: xe, isCallMinimized: Se, onExpand: Ce, onCollapse: we, onStartVoice: Te, onNewChat: Ee, onEndConversation: De, showPoweredBy: Oe, getVisitorChatHistory: ke, getVisitorChatThread: Ae, resumeChat: je, isSessionRestoring: Me }) {
-	let Ne = l.length > 0, Pe = T || ee || w, Fe = !!ge, [Ie, Le] = m(!1), [Re, ze] = m(!1), [Be, Ve] = m([]), [D, He] = m(!1), [Ue, We] = m(null), [Ge, Ke] = m([]), qe = p(null), Je = async () => {
-		Le(!1), ze(!0), He(!0), We(null);
+function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i, quickChatOptions: a, onQuickChatSelect: o, isMobile: s, chatHistory: l, isAiTyping: u, isAgentTyping: d, activeScreen: f, agentName: v, agentHeadshot: y, fallbackAgentName: b, input: x, setInput: S, onSubmit: C, isConversationEnded: w, isLoading: T, isRateLimited: ee, rateLimitMessage: te, selectedFile: ne, onFileSelect: re, onRemoveSelectedFile: E, attachmentError: ie, isUploadingAttachment: ae, requiresEmail: oe, emailInput: se, setEmailInput: ce, emailError: le, replyContext: ue, setReplyContext: de, webRTCError: fe, micError: pe, setMicError: me, dismissCallError: he, activeCallId: ge, isCallMuted: _e, toggleCallMute: ve, endWebRTCCall: ye, formatCallDuration: be, callDurationSeconds: xe, isCallMinimized: Se, onExpand: Ce, onCollapse: we, onStartVoice: Te, onNewChat: Ee, onEndConversation: De, showPoweredBy: Oe, getVisitorChatHistory: ke, getVisitorChatThread: Ae, resumeChat: je, isSessionRestoring: Me, isClosing: Ne }) {
+	let Pe = l.length > 0, Fe = T || ee || w, Ie = !!ge, [Le, Re] = m(!1), [ze, Be] = m(!1), [Ve, D] = m([]), [He, Ue] = m(!1), [We, Ge] = m(null), [Ke, qe] = m([]), Je = p(null), Ye = async () => {
+		Re(!1), Be(!0), Ue(!0), Ge(null);
 		try {
 			let e = await ke();
-			e?.data && Ve(e.data);
+			e?.data && D(e.data);
 		} catch (e) {
 			console.error(e);
 		} finally {
-			He(!1);
+			Ue(!1);
 		}
-	}, Ye = async (e) => {
-		ze(!1), je?.(e.chatId);
+	}, Xe = async (e) => {
+		Be(!1), je?.(e.chatId);
 	};
 	return c(() => {
-		if (!Ie) return;
+		if (!Le) return;
 		let e = (e) => {
 			let t = e.composedPath?.()?.[0] || e.target;
-			qe.current && !qe.current.contains(t) && Le(!1);
+			Je.current && !Je.current.contains(t) && Re(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [Ie]), /* @__PURE__ */ _("div", {
+	}, [Le]), /* @__PURE__ */ _("div", {
 		style: s ? {
 			"--flowengage-primary": n,
 			"--flowengage-accent": n,
@@ -30100,7 +30109,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden",
-			animation: "fe-orb-slide-up 0.28s cubic-bezier(0.16,1,0.3,1)"
+			animation: Ne ? "fe-orb-slide-down 0.28s cubic-bezier(0.16,1,0.3,1) forwards" : "fe-orb-slide-up 0.28s cubic-bezier(0.16,1,0.3,1)"
 		} : {
 			"--flowengage-primary": n,
 			"--flowengage-accent": n,
@@ -30113,7 +30122,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 			flexDirection: "column",
 			overflow: "hidden",
 			position: "relative",
-			animation: "fe-orb-slide-up 0.36s cubic-bezier(0.16,1,0.3,1)"
+			animation: Ne ? "fe-orb-slide-down 0.28s cubic-bezier(0.16,1,0.3,1) forwards" : "fe-orb-slide-up 0.36s cubic-bezier(0.16,1,0.3,1)"
 		},
 		children: [
 			/* @__PURE__ */ _("div", {
@@ -30230,10 +30239,10 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 							isolation: "isolate",
 							zIndex: 10
 						},
-						ref: qe,
+						ref: Je,
 						children: [/* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: () => Le((e) => !e),
+							onClick: () => Re((e) => !e),
 							style: {
 								width: "40px",
 								height: "40px",
@@ -30279,7 +30288,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 									})
 								]
 							})
-						}), Ie && /* @__PURE__ */ _("div", {
+						}), Le && /* @__PURE__ */ _("div", {
 							style: {
 								position: "absolute",
 								top: "34px",
@@ -30298,7 +30307,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 								/* @__PURE__ */ _("button", {
 									type: "button",
 									onClick: () => {
-										Le(!1), Te?.();
+										Re(!1), Te?.();
 									},
 									style: {
 										display: "flex",
@@ -30341,7 +30350,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 								/* @__PURE__ */ _("button", {
 									type: "button",
 									onClick: () => {
-										Le(!1), Ee?.();
+										Re(!1), Ee?.();
 									},
 									style: {
 										display: "flex",
@@ -30382,7 +30391,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 									margin: "0 14px"
 								} }), /* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: Je,
+									onClick: Ye,
 									style: {
 										display: "flex",
 										alignItems: "center",
@@ -30424,7 +30433,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 								/* @__PURE__ */ _("button", {
 									type: "button",
 									onClick: () => {
-										Le(!1), we?.();
+										Re(!1), we?.();
 									},
 									style: {
 										display: "flex",
@@ -30511,7 +30520,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 					background: "transparent",
 					position: "relative"
 				},
-				children: [Re ? /* @__PURE__ */ _("div", {
+				children: [ze ? /* @__PURE__ */ _("div", {
 					style: {
 						position: "absolute",
 						inset: 0,
@@ -30529,8 +30538,8 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 							borderBottom: "1px solid #f3f4f6",
 							flexShrink: 0
 						},
-						children: Ue ? /* @__PURE__ */ _("button", {
-							onClick: () => We(null),
+						children: We ? /* @__PURE__ */ _("button", {
+							onClick: () => Ge(null),
 							style: {
 								background: "none",
 								border: "none",
@@ -30558,7 +30567,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 								children: "Back to List"
 							})]
 						}) : /* @__PURE__ */ _("button", {
-							onClick: () => ze(!1),
+							onClick: () => Be(!1),
 							style: {
 								background: "none",
 								border: "none",
@@ -30592,7 +30601,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 							overflowY: "auto",
 							position: "relative"
 						},
-						children: D && !Ue ? /* @__PURE__ */ g("div", {
+						children: He && !We ? /* @__PURE__ */ g("div", {
 							style: {
 								padding: "40px 20px",
 								textAlign: "center",
@@ -30600,9 +30609,9 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 								fontSize: "14px"
 							},
 							children: "Loading past conversations..."
-						}) : Ue ? /* @__PURE__ */ _("div", {
+						}) : We ? /* @__PURE__ */ _("div", {
 							style: { padding: "20px 16px" },
-							children: [Ge.length === 0 ? /* @__PURE__ */ g("div", {
+							children: [Ke.length === 0 ? /* @__PURE__ */ g("div", {
 								style: {
 									color: "#9ca3af",
 									textAlign: "center",
@@ -30610,7 +30619,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 									fontSize: "14px"
 								},
 								children: "No messages"
-							}) : null, Ge.map((e, t) => /* @__PURE__ */ g("div", {
+							}) : null, Ke.map((e, t) => /* @__PURE__ */ g("div", {
 								style: {
 									marginBottom: "16px",
 									display: "flex",
@@ -30630,8 +30639,8 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 									children: e.content
 								})
 							}, e._id || t))]
-						}) : Be.length > 0 ? /* @__PURE__ */ g("div", { children: Be.map((e) => /* @__PURE__ */ _("div", {
-							onClick: () => Ye(e),
+						}) : Ve.length > 0 ? /* @__PURE__ */ g("div", { children: Ve.map((e) => /* @__PURE__ */ _("div", {
+							onClick: () => Xe(e),
 							style: {
 								padding: "16px 20px",
 								borderBottom: "1px solid #f3f4f6",
@@ -30682,7 +30691,7 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 							children: "No previous chats found."
 						})
 					})]
-				}) : null, Ne ? /* @__PURE__ */ g(dD, {
+				}) : null, Pe ? /* @__PURE__ */ g(dD, {
 					chatHistory: l,
 					isAiTyping: u,
 					isLoading: T,
@@ -30796,11 +30805,11 @@ function KO({ copy: e, orbColors: t, primaryColor: n, chatBgGradient: r, logo: i
 					setInput: S,
 					onSubmit: C,
 					isConversationEnded: w,
-					callUiActive: Fe,
+					callUiActive: Ie,
 					handleToggleVoice: Te,
 					showVoiceToggle: f === "agent",
 					activeScreen: f,
-					inputDisabled: Pe,
+					inputDisabled: Fe,
 					replyContext: ue,
 					clearReplyContext: () => de(null),
 					onFileSelect: re,
@@ -30857,7 +30866,7 @@ function qO() {
 	}, je = {
 		...De.features || {},
 		...Oe.features || {}
-	}, Me = je.voice !== !1, Ne = Array.isArray(Ae.orbColors) && Ae.orbColors.length > 0 ? Ae.orbColors : null, Pe = Ne?.[0] || Ae.primaryColor || "#3B82F6", Fe = Ae.position || "bottom-right", Ie = ke.fallbackAgentName || "Agent", Le = FO(Ne ?? Ae.chatBgColors), Re = ke.logo || ke.logoUrl || null, ze = E || "en", Be = De.recommendations?.[ze] || [], Ve = (Oe.recommendations?.[ze] ?? Be).filter((e) => String(e?.label ?? "").trim()).map((e, t) => ({
+	}, Me = je.voice !== !1, Ne = Array.isArray(Ae.orbColors) && Ae.orbColors.length > 0 ? Ae.orbColors : null, Pe = Ae.buttonColor || Ae.primaryColor || Ne?.[0] || "#3B82F6", Fe = Ae.position || "bottom-right", Ie = ke.fallbackAgentName || "Agent", Le = FO(Ne ?? Ae.chatBgColors), Re = ke.logo || ke.logoUrl || null, ze = E || "en", Be = De.recommendations?.[ze] || [], Ve = (Oe.recommendations?.[ze] ?? Be).filter((e) => String(e?.label ?? "").trim()).map((e, t) => ({
 		id: e.key || `qr-${t}`,
 		label: e.label,
 		message: e.label,
@@ -30880,10 +30889,10 @@ function qO() {
 	]), Xe = u && String(u).trim() || t?.ownerProfileImageUrl && String(t.ownerProfileImageUrl).trim() || null, Ze = r.some((e) => e.sender === "user"), Qe = f(() => {
 		let e = r.findIndex((e) => e.sender === "user");
 		return e === -1 ? !1 : r.slice(e + 1).some((e) => e.sender === "bot" || e.sender === "ai" || e.sender === "agent");
-	}, [r]), $e = !h && Ze && Qe, et = !!(Oe._dashboardLivePreview || De._dashboardLivePreview), [O, k] = m(() => et ? "text_chat" : "entry_prompt"), [A, tt] = m(""), [nt, rt] = m(null), [it, at] = m(h || ""), [ot, st] = m(""), [ct, lt] = m(0), [ut, dt] = m(null), [ft, pt] = m(null), [mt, ht] = m(""), [gt, _t] = m(!1), [vt, yt] = m(!1), bt = p(null), xt = p(!1);
+	}, [r]), $e = !h && Ze && Qe, et = !!(Oe._dashboardLivePreview || De._dashboardLivePreview), [O, k] = m(() => et ? "text_chat" : "entry_prompt"), [A, tt] = m(""), [nt, rt] = m(null), [it, at] = m(h || ""), [ot, st] = m(""), [ct, lt] = m(0), [ut, dt] = m(null), [ft, pt] = m(null), [mt, ht] = m(""), [gt, _t] = m(!1), [vt, yt] = m(!1), [bt, xt] = m(!1), St = p(null), Ct = p(!1);
 	d(() => {
-		if (!(e !== "ready" || xt.current)) {
-			if (xt.current = !0, pe(qe) || !Me) {
+		if (!(e !== "ready" || Ct.current)) {
+			if (Ct.current = !0, pe(qe) || !Me) {
 				k("minimized_orb");
 				return;
 			}
@@ -30893,16 +30902,16 @@ function qO() {
 			} catch {}
 		}
 	}, [e, r]);
-	let [St, Ct] = m(() => typeof window < "u" && window.matchMedia("(max-width: 640px)").matches);
+	let [wt, Tt] = m(() => typeof window < "u" && window.matchMedia("(max-width: 640px)").matches);
 	c(() => {
-		let e = window.matchMedia("(max-width: 640px)"), t = (e) => Ct(e.matches);
+		let e = window.matchMedia("(max-width: 640px)"), t = (e) => Tt(e.matches);
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
 	}, []), c(() => {
 		at(h || ""), h && st("");
 	}, [h]);
-	let wt = o(() => {
+	let Et = o(() => {
 		pt(null), ht("");
-	}, []), Tt = o((e) => {
+	}, []), Dt = o((e) => {
 		let t = oD(e);
 		if (t) {
 			pt(null), ht(t);
@@ -30923,35 +30932,35 @@ function qO() {
 		let t = window.setInterval(e, 1e3);
 		return () => window.clearInterval(t);
 	}, [te, ee]);
-	let Et = o(() => {
+	let Ot = o(() => {
 		k("call_screen"), yt(!1);
-	}, []), Dt = o(() => {
+	}, []), kt = o(() => {
 		k("text_chat"), yt(!0);
 	}, []);
 	c(() => {
 		let e = w?.callId || T || null;
 		if (!e) {
-			bt.current = null;
+			St.current = null;
 			return;
 		}
 		if (w?.callId || ee === "connecting" || ee === "connected") {
 			if (O === "minimized_orb" && vt && T && !w?.callId) {
-				bt.current = e;
+				St.current = e;
 				return;
 			}
-			!(!i || O === "minimized_orb" || O === "voice_mode") && bt.current === e || (console.log("[FlowEngageWidget] forcing call UI to front", {
+			!(!i || O === "minimized_orb" || O === "voice_mode") && St.current === e || (console.log("[FlowEngageWidget] forcing call UI to front", {
 				forcedKey: e,
 				isOpen: i,
 				surface: O,
 				hasIncomingCall: !!w?.callId,
 				activeCallId: T,
 				callConnectionState: ee
-			}), bt.current = e, O === "voice_mode" && ue?.(!1), ce?.(), Et());
+			}), St.current = e, O === "voice_mode" && ue?.(!1), ce?.(), Ot());
 		}
 	}, [
 		T,
 		ee,
-		Et,
+		Ot,
 		w?.callId,
 		i,
 		ce,
@@ -30989,11 +30998,11 @@ function qO() {
 		xe,
 		Se
 	]);
-	let Ot = (e) => e ? {
+	let At = (e) => e ? {
 		replyTo: e.messageId || e.id || null,
 		replyToContent: (e.replyToContent || e.message || "").replace(/<[^>]+>/g, "").trim().slice(0, 200),
 		replyToSender: e.sender || null
-	} : null, kt = async (e) => {
+	} : null, jt = async (e) => {
 		if (e.preventDefault(), C) return;
 		if ($e) {
 			let e = it.trim().toLowerCase();
@@ -31004,13 +31013,13 @@ function qO() {
 			await le(e), st("");
 			return;
 		}
-		let t = Ot(nt);
+		let t = At(nt);
 		if (!A.trim() && !ft) return;
 		if (ft) {
 			try {
 				_t(!0), ht("");
 				let e = await se(ft), n = e?.data || e, r = A.trim() || `Shared file: ${cD(ft)}`;
-				tt(""), rt(null), wt(), await oe(r, "", t, {
+				tt(""), rt(null), Et(), await oe(r, "", t, {
 					type: "file",
 					metadata: {
 						fileUrl: n?.fileUrl,
@@ -31028,10 +31037,10 @@ function qO() {
 		}
 		let n = A.trim();
 		tt(""), rt(null), await oe(n, "", t);
-	}, At = (e) => {
+	}, Mt = (e) => {
 		let t = Math.floor(e / 60);
 		return `${String(t).padStart(2, "0")}:${String(e % 60).padStart(2, "0")}`;
-	}, jt = o(async (e) => {
+	}, Nt = o(async (e) => {
 		if (C || b) return;
 		let t = e.message || e.label || e.text || "";
 		t.trim() && await oe(t.trim(), "");
@@ -31039,18 +31048,18 @@ function qO() {
 		C,
 		b,
 		oe
-	]), Mt = St && O === "entry_prompt" ? { inset: 0 } : St && O === "text_chat" ? {
+	]), Pt = wt && O === "entry_prompt" ? { inset: 0 } : wt && O === "text_chat" ? {
 		left: 0,
 		right: 0,
 		bottom: 0
-	} : St && O === "call_screen" ? {
+	} : wt && O === "call_screen" ? {
 		left: 0,
 		right: 0,
 		bottom: 0,
 		height: "90dvh",
 		overflow: "hidden",
 		borderRadius: "16px 16px 0 0"
-	} : St && O === "connection_modal" ? {
+	} : wt && O === "connection_modal" ? {
 		left: "28px",
 		right: "12px",
 		bottom: "12px"
@@ -31072,19 +31081,23 @@ function qO() {
 	} : {
 		right: "1.5rem",
 		bottom: "1.5rem"
-	}, Nt = () => k("minimized_orb"), Pt = () => k("connection_modal"), Ft = () => {
+	}, Ft = o(() => {
+		O !== "minimized_orb" && (xt(!0), setTimeout(() => {
+			k("minimized_orb"), xt(!1);
+		}, 280));
+	}, [O]), It = () => k("connection_modal"), Lt = () => {
 		ce({ notifyChatInitiated: !0 }), ue?.(!0), k("voice_mode");
-	}, It = () => {
+	}, Rt = () => {
 		ce({ notifyChatInitiated: !0 }), ue?.(!1), k("text_chat");
-	}, Lt = () => {
-		ue?.(!1), Nt();
+	}, zt = () => {
+		ue?.(!1), Ft();
 	};
 	return e !== "ready" || !Ue || je.chat === !1 ? null : /* @__PURE__ */ _("div", {
 		className: "flowengage-widget-root",
 		style: {
 			position: "fixed",
 			zIndex: 999999,
-			...Mt
+			...Pt
 		},
 		children: [
 			O === "entry_prompt" && /* @__PURE__ */ g(VO, {
@@ -31092,21 +31105,28 @@ function qO() {
 				orbColors: Ne,
 				primaryColor: Pe,
 				onYes: () => {
-					me(qe), Ft();
+					me(qe), Lt();
 				},
 				onLater: () => {
-					me(qe), Nt();
+					me(qe), Ft();
 				},
-				isMobile: St
+				isMobile: wt,
+				isClosing: bt
 			}),
 			O === "minimized_orb" && /* @__PURE__ */ _(Yp.div, {
 				layoutId: "fe-main-orb",
-				initial: { scale: 94 / 50 },
-				animate: { scale: 1 },
+				initial: {
+					scale: .4,
+					opacity: 0
+				},
+				animate: {
+					scale: 1,
+					opacity: 1
+				},
 				transition: {
 					type: "spring",
-					stiffness: 220,
-					damping: 26
+					stiffness: 280,
+					damping: 18
 				},
 				style: {
 					transformOrigin: "bottom right",
@@ -31117,9 +31137,9 @@ function qO() {
 				},
 				children: [T && vt && /* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: Et,
+					onClick: Ot,
 					style: {
-						maxWidth: St ? "220px" : "240px",
+						maxWidth: wt ? "220px" : "240px",
 						padding: "10px 14px",
 						borderRadius: "18px",
 						border: "1px solid rgba(255,255,255,0.7)",
@@ -31160,28 +31180,29 @@ function qO() {
 								marginTop: "2px",
 								whiteSpace: "nowrap"
 							},
-							children: ee === "connected" ? `${At(ct)} with ${Ye}` : `Tap to return to ${Ye}`
+							children: ee === "connected" ? `${Mt(ct)} with ${Ye}` : `Tap to return to ${Ye}`
 						})]
 					})]
 				}), /* @__PURE__ */ g(BO, {
 					size: 50,
 					orbColors: Ne,
-					onClick: T && vt ? Et : Me ? Pt : It
+					onClick: T && vt ? Ot : Me ? It : Rt
 				})]
 			}),
 			O === "connection_modal" && /* @__PURE__ */ g(HO, {
 				copy: Ge,
 				orbColors: Ne,
 				primaryColor: Pe,
-				onVoice: Ft,
-				onText: It,
-				onClose: Nt,
-				isMobile: St
+				onVoice: Lt,
+				onText: Rt,
+				onClose: Ft,
+				isMobile: wt,
+				isClosing: bt
 			}),
 			O === "voice_mode" && /* @__PURE__ */ g(UO, {
 				orbColors: Ne,
-				onEnterChat: It,
-				onEndChat: Lt,
+				onEnterChat: Rt,
+				onEndChat: zt,
 				agentId: Ke,
 				siteId: qe,
 				apiBaseUrl: Je,
@@ -31201,21 +31222,22 @@ function qO() {
 				rejectCall: ge,
 				endWebRTCCall: _e,
 				toggleCallMute: ve,
-				formatCallDuration: At,
-				onMinimize: Dt,
+				formatCallDuration: Mt,
+				onMinimize: kt,
 				primaryColor: Pe,
 				orbColors: Ne,
 				chatHistory: r
 			}),
 			O === "text_chat" && /* @__PURE__ */ g(KO, {
+				isClosing: bt,
 				copy: Ge,
 				orbColors: Ne,
 				primaryColor: Pe,
 				chatBgGradient: Le,
 				logo: Re,
 				quickChatOptions: D,
-				onQuickChatSelect: jt,
-				isMobile: St,
+				onQuickChatSelect: Nt,
+				isMobile: wt,
 				chatHistory: r,
 				isAiTyping: y,
 				isAgentTyping: v,
@@ -31225,14 +31247,14 @@ function qO() {
 				fallbackAgentName: Ie,
 				input: A,
 				setInput: tt,
-				onSubmit: kt,
+				onSubmit: jt,
 				isConversationEnded: C,
 				isLoading: b,
 				isRateLimited: x,
 				rateLimitMessage: S,
 				selectedFile: ft,
-				onFileSelect: Tt,
-				onRemoveSelectedFile: wt,
+				onFileSelect: Dt,
+				onRemoveSelectedFile: Et,
 				attachmentError: mt,
 				isUploadingAttachment: gt,
 				requiresEmail: $e,
@@ -31249,14 +31271,14 @@ function qO() {
 				isCallMuted: ne,
 				toggleCallMute: ve,
 				endWebRTCCall: _e,
-				formatCallDuration: At,
+				formatCallDuration: Mt,
 				callDurationSeconds: ct,
-				onCollapse: Nt,
-				onStartVoice: Ft,
+				onCollapse: Ft,
+				onStartVoice: Lt,
 				onNewChat: fe,
 				onEndConversation: de,
-				onMinimize: Dt,
-				onExpand: Et,
+				onMinimize: kt,
+				onExpand: Ot,
 				isCallMinimized: vt && !!T,
 				showPoweredBy: He,
 				getVisitorChatHistory: Ce,
@@ -31264,7 +31286,7 @@ function qO() {
 				resumeChat: Te,
 				isSessionRestoring: Ee
 			}),
-			/* @__PURE__ */ g("style", { children: "\n        /* Force any SVG (or img) inside LogoSlot to fill the container height\n           regardless of whether the component forwards its style prop. */\n        .fe-logo-slot svg,\n        .fe-logo-slot img { height: 100%; width: auto; display: block; }\n\n        @keyframes fe-orb-breathe        { 0%,100%{transform:scale(1)}  50%{transform:scale(1.04)} }\n        @keyframes fe-orb-breathe-subtle { 0%,100%{transform:scale(1)}  50%{transform:scale(1.025)} }\n        @keyframes fe-orb-pulse  { 0%{transform:scale(1);opacity:.65} 50%{transform:scale(1.28);opacity:.1} 100%{transform:scale(1);opacity:.65} }\n        @keyframes fe-orb-glow   { from{opacity:.35} to{opacity:.75} }\n        @keyframes fe-orb-fade-in { from{opacity:0} to{opacity:1} }\n        @keyframes fe-orb-slide-up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }\n        @keyframes fe-orb-bar-0 { from{height:6px}  to{height:18px} }\n        @keyframes fe-orb-bar-1 { from{height:10px} to{height:22px} }\n        @keyframes fe-orb-bar-2 { from{height:14px} to{height:26px} }\n        @keyframes fe-orb-bar-3 { from{height:8px}  to{height:20px} }\n        @keyframes fe-orb-bar-4 { from{height:6px}  to{height:16px} }\n        @keyframes fe-dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-5px);opacity:1} }\n      " })
+			/* @__PURE__ */ g("style", { children: "\n        /* Force any SVG (or img) inside LogoSlot to fill the container height\n           regardless of whether the component forwards its style prop. */\n        .fe-logo-slot svg,\n        .fe-logo-slot img { height: 100%; width: auto; display: block; }\n\n        @keyframes fe-orb-breathe        { 0%,100%{transform:scale(1)}  50%{transform:scale(1.04)} }\n        @keyframes fe-orb-breathe-subtle { 0%,100%{transform:scale(1)}  50%{transform:scale(1.025)} }\n        @keyframes fe-orb-pulse  { 0%{transform:scale(1);opacity:.65} 50%{transform:scale(1.28);opacity:.1} 100%{transform:scale(1);opacity:.65} }\n        @keyframes fe-orb-glow   { from{opacity:.35} to{opacity:.75} }\n        @keyframes fe-orb-fade-in { from{opacity:0} to{opacity:1} }\n        @keyframes fe-orb-slide-up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }\n        @keyframes fe-orb-slide-down { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(24px)} }\n        @keyframes fe-orb-bar-0 { from{height:6px}  to{height:18px} }\n        @keyframes fe-orb-bar-1 { from{height:10px} to{height:22px} }\n        @keyframes fe-orb-bar-2 { from{height:14px} to{height:26px} }\n        @keyframes fe-orb-bar-3 { from{height:8px}  to{height:20px} }\n        @keyframes fe-orb-bar-4 { from{height:6px}  to{height:16px} }\n        @keyframes fe-dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-5px);opacity:1} }\n      " })
 		]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowengage/react-chatbot",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "Embeddable AI chat widget for React — powered by FlowEngage. Drop it in with a single siteId.",
   "keywords": [
     "chatbot",