@flowengage/react-chatbot 6.0.18 → 6.0.19

package/dist/flowengage-react-chatbot.mjs

@@ -3357,7 +3357,10 @@ function Rr({ siteId: e, config: t, children: n, language: r = "en" }) {
 				}), await Rt({
 					...r,
 					callId: r.callId || O.callId
-				})), await k.current.acceptCall(O.callId, y), mt.current = O.callId, Je(O.callId), Xe((e) => e === "connected" || j.current ? "connected" : "connecting"), Ue(null), w(!0);
+				})), await k.current.acceptCall(O.callId, y), at.current?.emit("call:accepted", {
+					callId: O.callId,
+					chatId: y
+				}), mt.current = O.callId, Je(O.callId), Xe((e) => e === "connected" || j.current ? "connected" : "connecting"), Ue(null), w(!0);
 			} catch (e) {
 				if (ht.current = null, Pt("accept_call_failed"), e?.status === 404 || e?.status === 409 || e?.status === 422) {
 					nt(Pr(e, "This visitor call is no longer available."));
@@ -3380,9 +3383,14 @@ function Rr({ siteId: e, config: t, children: n, language: r = "en" }) {
 			Pt("reject_call_without_server_context");
 			return;
 		}
-		Mt(), jt();
+		let e = O.callId;
+		Mt(), jt(), at.current?.emit("call:rejected", {
+			callId: e,
+			chatId: y,
+			reason: "visitor_declined"
+		});
 		try {
-			await k.current.rejectCall(O.callId, y);
+			await k.current.rejectCall(e, y);
 		} catch (e) {
 			nt(Pr(e, "We couldn't decline the call cleanly."));
 		} finally {
@@ -29412,6 +29420,11 @@ function Ck(e) {
 		flowengage_highlight: async (e) => {
 			$("flowengage_highlight ▶", e);
 			let t = mk(e), n = t?.section_id || t?.sectionId, r = t?.section_text || t?.sectionText;
+			if (typeof window < "u" && window.__fe_user_nav_during_speech) {
+				let e = window.__fe_user_nav_during_speech, t = window.location.pathname;
+				if (e.toPath === t && Date.now() - e.ts < 3e4) return window.__fe_user_nav_during_speech = null, $("flowengage_highlight ✖ blocked — user navigated during speech", e), `NAV_CHANGED: The visitor navigated from "${e.fromPageName}" to "${e.toPageName}" while you were speaking. DO NOT highlight anything yet. Ask the visitor: "I see you've navigated to the ${e.toPageName} page — do you want me to continue what I was explaining, or shall I guide you through this page?" Only call flowengage_highlight after the visitor confirms they want to explore this page.`;
+				window.__fe_user_nav_during_speech = null;
+			}
 			xk();
 			let i = hr(n || null, r || null);
 			if (!i && r) {
@@ -30132,7 +30145,7 @@ function Fk({ orbColors: e, onEnterChat: t, onEndChat: n, agentId: r, siteId: i,
 				let v = {
 					clientTools: t,
 					connectionType: "websocket",
-					minSpeechDurationMs: 100,
+					minSpeechDurationMs: 50,
 					..._ ? { signedUrl: _ } : { agentId: r }
 				}, b = (p.split("/").filter(Boolean).pop() || "").replace(/[-_]/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), x = "";
 				m && m.includes("|") && (x = m.split("|").map((e) => e.trim()).filter(Boolean).reduce((e, t) => e.length <= t.length ? e : t));
@@ -30243,13 +30256,25 @@ function Fk({ orbColors: e, onEnterChat: t, onEndChat: n, agentId: r, siteId: i,
 							t = n;
 							return;
 						}
+						let r = t;
 						t = n;
-						let r = window.location.href, i = typeof document < "u" ? document.title : "", a = typeof document < "u" ? Array.from(document.querySelectorAll("h1, h2, h3, h4")).filter((e) => !e.closest("#flowengage-root, .flowengage-shell")).map((e) => ({
+						let i = window.location.href, a = typeof document < "u" ? document.title : "", o = typeof document < "u" ? Array.from(document.querySelectorAll("h1, h2, h3, h4")).filter((e) => !e.closest("#flowengage-root, .flowengage-shell")).map((e) => ({
 							tag: e.tagName,
 							text: e.textContent.trim()
 						})).filter((e) => e.text.length > 0 && e.text.length < 200).slice(0, 20) : [];
 						try {
-							S.current?.sendContextualUpdate?.(`PAGE CHANGED — visitor navigated manually. Current URL is now: ${r}. Page title: "${i}". Sections on this page: ${JSON.stringify(a)}. When the visitor asks about "this page", "current page", or "what page am I on", refer to this new URL — not any previously mentioned page.`);
+							SD();
+						} catch {}
+						let s = (e) => (e.split("/").filter(Boolean).pop() || "").replace(/[-_]/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()) || "Home", c = s(r), l = s(n);
+						typeof window < "u" && (window.__fe_user_nav_during_speech = {
+							fromPath: r,
+							toPath: n,
+							fromPageName: c,
+							toPageName: l,
+							ts: Date.now()
+						});
+						try {
+							S.current?.sendContextualUpdate?.(`IMPORTANT — VISITOR NAVIGATED WHILE YOU WERE SPEAKING. You were explaining "${c}". The visitor has now moved to "${l}" (${i}). Page title: "${a}". Sections on this page: ${JSON.stringify(o)}. STOP your current explanation immediately. Say exactly: "I see you've navigated to the ${l} page — do you want me to continue what I was explaining, or would you like to know about this page?" If the visitor says "continue": resume your explanation verbally BUT do NOT call flowengage_highlight — you are no longer on the page you were describing so highlights would be wrong. If they want to learn about this new page: proceed with flowengage_highlight on sections of "${l}". Do NOT highlight anything until the visitor answers this question.`);
 						} catch {}
 					};
 					c = window.history.pushState.bind(window.history), window.history.pushState = (...e) => {
@@ -30269,7 +30294,7 @@ function Fk({ orbColors: e, onEnterChat: t, onEndChat: n, agentId: r, siteId: i,
 			if (i) try {
 				He(i);
 			} catch {}
-			Ar(), le.current &&= (clearTimeout(le.current), null), ue.current &&= (clearTimeout(ue.current), null), ce.current = !1, de.current = !1, se.current = "idle", c && typeof window < "u" && (window.history.pushState = c), d && typeof window < "u" && window.removeEventListener("popstate", d);
+			typeof window < "u" && (window.__fe_user_nav_during_speech = null), Ar(), le.current &&= (clearTimeout(le.current), null), ue.current &&= (clearTimeout(ue.current), null), ce.current = !1, de.current = !1, se.current = "idle", c && typeof window < "u" && (window.history.pushState = c), d && typeof window < "u" && window.removeEventListener("popstate", d);
 			let t = o || S.current, n = E.current, r = ie.current;
 			if (t?.endSession?.().catch(() => {}), n && s && a) {
 				let e = r ? Math.round((Date.now() - r) / 1e3) : 0, t = JSON.stringify({
@@ -30367,97 +30392,138 @@ function Fk({ orbColors: e, onEnterChat: t, onEndChat: n, agentId: r, siteId: i,
 					gap: "12px",
 					alignItems: "center"
 				},
-				children: [/* @__PURE__ */ g("button", {
-					onClick: async () => {
-						if (S.current) try {
-							if (v) {
-								oe.current = 0, await S.current.setMicMuted?.(!1), y(!1);
-								try {
-									S.current.sendContextualUpdate?.("The visitor has unmuted. Resume normal interaction and wait for them to speak.");
-								} catch {}
-							} else {
-								oe.current = 0, await S.current.setMicMuted?.(!0), y(!0);
-								try {
-									S.current.sendContextualUpdate?.("The visitor has muted their microphone. Do NOT speak, ask if they are there, or prompt them in any way. Stay completely silent until they unmute.");
-								} catch {}
-							}
-						} catch {}
-					},
-					title: v ? "Unmute" : "Mute",
-					style: {
-						width: "24px",
-						height: "24px",
-						borderRadius: "50%",
-						background: v ? "#7f1d1d" : "#1f2937",
-						border: v ? "1.5px solid #ef4444" : "1.5px solid #4b5563",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						cursor: "pointer",
-						color: v ? "#f87171" : "white",
-						transition: "all 0.2s ease",
-						boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
-						padding: 0,
-						flexShrink: 0
-					},
-					children: v ? /* @__PURE__ */ _("svg", {
-						width: "16",
-						height: "16",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: [
-							/* @__PURE__ */ g("line", {
-								x1: "1",
-								y1: "1",
-								x2: "23",
-								y2: "23"
-							}),
-							/* @__PURE__ */ g("path", { d: "M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6" }),
-							/* @__PURE__ */ g("path", { d: "M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23" }),
-							/* @__PURE__ */ g("line", {
-								x1: "12",
-								y1: "19",
-								x2: "12",
-								y2: "23"
-							}),
-							/* @__PURE__ */ g("line", {
-								x1: "8",
-								y1: "23",
-								x2: "16",
-								y2: "23"
+				children: [
+					f === "speaking" && /* @__PURE__ */ _("button", {
+						onClick: () => {
+							if (S.current) try {
+								S.current.sendUserMessage?.("stop");
+							} catch {}
+						},
+						title: "Stop agent",
+						style: {
+							height: "24px",
+							borderRadius: "999px",
+							background: "rgba(239,68,68,0.15)",
+							border: "1.5px solid #ef4444",
+							display: "flex",
+							alignItems: "center",
+							gap: "4px",
+							padding: "0 8px",
+							cursor: "pointer",
+							color: "#f87171",
+							fontSize: "11px",
+							fontWeight: 600,
+							transition: "all 0.2s ease",
+							boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+							flexShrink: 0
+						},
+						children: [/* @__PURE__ */ g("svg", {
+							width: "10",
+							height: "10",
+							viewBox: "0 0 24 24",
+							fill: "currentColor",
+							children: /* @__PURE__ */ g("rect", {
+								x: "4",
+								y: "4",
+								width: "16",
+								height: "16",
+								rx: "2"
 							})
-						]
-					}) : /* @__PURE__ */ g(CD, {
-						size: 16,
-						color: "currentColor"
-					})
-				}), /* @__PURE__ */ g("button", {
-					onClick: () => x((e) => !e),
-					style: {
-						width: "24px",
-						height: "24px",
-						borderRadius: "50%",
-						background: "#1f2937",
-						border: "1.5px solid #4b5563",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						cursor: "pointer",
-						color: "white",
-						transition: "background 0.2s ease",
-						boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
-						padding: 0,
-						flexShrink: 0
-					},
-					children: /* @__PURE__ */ g(jD, {
-						size: 16,
-						color: "currentColor"
+						}), "Stop"]
+					}),
+					/* @__PURE__ */ g("button", {
+						onClick: async () => {
+							if (S.current) try {
+								if (v) {
+									oe.current = 0, await S.current.setMicMuted?.(!1), y(!1);
+									try {
+										S.current.sendContextualUpdate?.("The visitor has unmuted. Resume normal interaction and wait for them to speak.");
+									} catch {}
+								} else {
+									oe.current = 0, await S.current.setMicMuted?.(!0), y(!0);
+									try {
+										S.current.sendContextualUpdate?.("The visitor has muted their microphone. Do NOT speak, ask if they are there, or prompt them in any way. Stay completely silent until they unmute.");
+									} catch {}
+								}
+							} catch {}
+						},
+						title: v ? "Unmute" : "Mute",
+						style: {
+							width: "24px",
+							height: "24px",
+							borderRadius: "50%",
+							background: v ? "#7f1d1d" : "#1f2937",
+							border: v ? "1.5px solid #ef4444" : "1.5px solid #4b5563",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							cursor: "pointer",
+							color: v ? "#f87171" : "white",
+							transition: "all 0.2s ease",
+							boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+							padding: 0,
+							flexShrink: 0
+						},
+						children: v ? /* @__PURE__ */ _("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							children: [
+								/* @__PURE__ */ g("line", {
+									x1: "1",
+									y1: "1",
+									x2: "23",
+									y2: "23"
+								}),
+								/* @__PURE__ */ g("path", { d: "M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6" }),
+								/* @__PURE__ */ g("path", { d: "M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23" }),
+								/* @__PURE__ */ g("line", {
+									x1: "12",
+									y1: "19",
+									x2: "12",
+									y2: "23"
+								}),
+								/* @__PURE__ */ g("line", {
+									x1: "8",
+									y1: "23",
+									x2: "16",
+									y2: "23"
+								})
+							]
+						}) : /* @__PURE__ */ g(CD, {
+							size: 16,
+							color: "currentColor"
+						})
+					}),
+					/* @__PURE__ */ g("button", {
+						onClick: () => x((e) => !e),
+						style: {
+							width: "24px",
+							height: "24px",
+							borderRadius: "50%",
+							background: "#1f2937",
+							border: "1.5px solid #4b5563",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							cursor: "pointer",
+							color: "white",
+							transition: "background 0.2s ease",
+							boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+							padding: 0,
+							flexShrink: 0
+						},
+						children: /* @__PURE__ */ g(jD, {
+							size: 16,
+							color: "currentColor"
+						})
 					})
-				})]
+				]
 			}),
 			b && /* @__PURE__ */ _("div", {
 				style: {

package/package.json

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