@clivly/chat-widget 0.12.0 → 0.14.1

package/README.md

@@ -307,6 +307,25 @@ The default browser mount behavior is:
 2. otherwise prefer `session.socketUrl`
 3. otherwise fall back to `socketUrlTemplate` when provided
 
+### Read receipts
+
+While the panel is open, connected and on screen, the widget tells the server
+the visitor has seen the thread. It sends again when new messages arrive and when
+the tab becomes visible, so a teammate's reply the visitor already read isn't also
+emailed to them. The built-in transports send this as a
+`{ type: "conversation.read" }` client event (`WidgetClientReadEvent`).
+
+A **custom transport** opts in by implementing the optional
+`ChatTransportConnection.markRead()`. Without it the widget still works; its
+visitors just receive email copies of replies they saw in the widget.
+
+### Waiting notice
+
+If the visitor's latest message has gone unanswered for two minutes, the widget
+shows a short note that the team has been
+notified, and that the reply will also go to the visitor's email when one is
+known. A failed send doesn't start the clock, because nobody was notified about it.
+
 ## Build outputs
 
 The package currently produces:

package/dist/browser-mount.cjs

@@ -364,6 +364,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -516,6 +524,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: messages.map((message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -553,6 +611,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	(0, react.useEffect)(() => () => {
@@ -595,6 +654,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	(0, react.useEffect)(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = (0, react.useCallback)(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -711,14 +787,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 						className: "clivly-chat-widget__composer",
@@ -861,6 +945,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/browser-mount.d.cts

@@ -98,6 +98,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {

package/dist/browser-mount.d.mts

@@ -98,6 +98,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {

package/dist/browser-mount.mjs

@@ -363,6 +363,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -515,6 +523,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = useState(false);
+	useEffect(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -552,6 +610,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
@@ -594,6 +653,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	useEffect(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = useCallback(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -710,14 +786,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ jsxs("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ jsx("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ jsx(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ jsx("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ jsx(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ jsx("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ jsxs("form", {
 						className: "clivly-chat-widget__composer",
@@ -860,6 +944,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/browser.cjs

@@ -364,6 +364,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -516,6 +524,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: messages.map((message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -553,6 +611,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	(0, react.useEffect)(() => () => {
@@ -595,6 +654,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	(0, react.useEffect)(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = (0, react.useCallback)(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -711,14 +787,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 						className: "clivly-chat-widget__composer",
@@ -861,6 +945,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/browser.d.cts

@@ -98,6 +98,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {

package/dist/browser.d.mts

@@ -98,6 +98,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {

package/dist/browser.mjs

@@ -363,6 +363,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -515,6 +523,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = useState(false);
+	useEffect(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -552,6 +610,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
@@ -594,6 +653,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	useEffect(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = useCallback(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -710,14 +786,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ jsxs("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ jsx("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ jsx(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ jsx("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ jsx(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ jsx("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ jsxs("form", {
 						className: "clivly-chat-widget__composer",
@@ -860,6 +944,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/index.cjs

@@ -364,6 +364,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -516,6 +524,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: messages.map((message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -553,6 +611,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	(0, react.useEffect)(() => () => {
@@ -595,6 +654,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	(0, react.useEffect)(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = (0, react.useCallback)(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -711,14 +787,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 						className: "clivly-chat-widget__composer",
@@ -876,6 +960,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/index.d.cts

@@ -79,7 +79,11 @@ interface WidgetClientCreateMessageEvent {
   id: string;
   type: "message.create";
 }
-type WidgetClientEvent = WidgetClientCreateMessageEvent;
+/** The visitor has seen the thread (see `ChatTransportConnection.markRead`). */
+interface WidgetClientReadEvent {
+  type: "conversation.read";
+}
+type WidgetClientEvent = WidgetClientCreateMessageEvent | WidgetClientReadEvent;
 interface WidgetSessionReadyEvent {
   conversationId: string;
   type: "session.ready";
@@ -113,6 +117,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {
@@ -236,4 +246,4 @@ export declare const createClivlyTransport: typeof createClivlyTransport$1;
 export declare const mountChatWidget: typeof mountChatWidget$1;
 export declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
 //#endregion
-export type { ChatTransportConnection, ChatTransportHandlers, ChatWidgetProps, ChatWidgetTheme, ChatWidgetVisitor, CreateChatTransport, CreateChatTransportOptions, CreateLoopbackTransportOptions, CreateWebSocketTransportOptions, GetSession, GetSessionOptions, ResolvedTheme, WidgetClientCreateMessageEvent, WidgetClientEvent, WidgetConfig, WidgetContact, WidgetConversation, WidgetConversationSnapshotEvent, WidgetErrorEvent, WidgetMessage, WidgetMessageAckEvent, WidgetMessageCreatedEvent, WidgetSenderType, WidgetServerEvent, WidgetSessionPayload, WidgetSessionReadyEvent, WidgetSummary };
+export type { ChatTransportConnection, ChatTransportHandlers, ChatWidgetProps, ChatWidgetTheme, ChatWidgetVisitor, CreateChatTransport, CreateChatTransportOptions, CreateLoopbackTransportOptions, CreateWebSocketTransportOptions, GetSession, GetSessionOptions, ResolvedTheme, WidgetClientCreateMessageEvent, WidgetClientEvent, WidgetClientReadEvent, WidgetConfig, WidgetContact, WidgetConversation, WidgetConversationSnapshotEvent, WidgetErrorEvent, WidgetMessage, WidgetMessageAckEvent, WidgetMessageCreatedEvent, WidgetSenderType, WidgetServerEvent, WidgetSessionPayload, WidgetSessionReadyEvent, WidgetSummary };

package/dist/index.d.mts

@@ -79,7 +79,11 @@ interface WidgetClientCreateMessageEvent {
   id: string;
   type: "message.create";
 }
-type WidgetClientEvent = WidgetClientCreateMessageEvent;
+/** The visitor has seen the thread (see `ChatTransportConnection.markRead`). */
+interface WidgetClientReadEvent {
+  type: "conversation.read";
+}
+type WidgetClientEvent = WidgetClientCreateMessageEvent | WidgetClientReadEvent;
 interface WidgetSessionReadyEvent {
   conversationId: string;
   type: "session.ready";
@@ -113,6 +117,12 @@ interface ChatTransportHandlers {
 }
 interface ChatTransportConnection {
   close: () => void;
+  /**
+   * Tell the server the visitor has seen the thread, so a teammate's reply
+   * they've read isn't also emailed to them. Optional: a custom transport
+   * without it still works, its visitors are just emailed replies they saw.
+   */
+  markRead?: () => void;
   sendMessage: (event: WidgetClientCreateMessageEvent) => void;
 }
 interface CreateChatTransportOptions {
@@ -236,4 +246,4 @@ export declare const createClivlyTransport: typeof createClivlyTransport$1;
 export declare const mountChatWidget: typeof mountChatWidget$1;
 export declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
 //#endregion
-export type { ChatTransportConnection, ChatTransportHandlers, ChatWidgetProps, ChatWidgetTheme, ChatWidgetVisitor, CreateChatTransport, CreateChatTransportOptions, CreateLoopbackTransportOptions, CreateWebSocketTransportOptions, GetSession, GetSessionOptions, ResolvedTheme, WidgetClientCreateMessageEvent, WidgetClientEvent, WidgetConfig, WidgetContact, WidgetConversation, WidgetConversationSnapshotEvent, WidgetErrorEvent, WidgetMessage, WidgetMessageAckEvent, WidgetMessageCreatedEvent, WidgetSenderType, WidgetServerEvent, WidgetSessionPayload, WidgetSessionReadyEvent, WidgetSummary };
+export type { ChatTransportConnection, ChatTransportHandlers, ChatWidgetProps, ChatWidgetTheme, ChatWidgetVisitor, CreateChatTransport, CreateChatTransportOptions, CreateLoopbackTransportOptions, CreateWebSocketTransportOptions, GetSession, GetSessionOptions, ResolvedTheme, WidgetClientCreateMessageEvent, WidgetClientEvent, WidgetClientReadEvent, WidgetConfig, WidgetContact, WidgetConversation, WidgetConversationSnapshotEvent, WidgetErrorEvent, WidgetMessage, WidgetMessageAckEvent, WidgetMessageCreatedEvent, WidgetSenderType, WidgetServerEvent, WidgetSessionPayload, WidgetSessionReadyEvent, WidgetSummary };

package/dist/index.mjs

@@ -363,6 +363,14 @@ const WIDGET_STYLES = `
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -515,6 +523,56 @@ function MessageList({ greeting, hasSession, messages }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)) });
 }
 /**
+* How often an open, visible widget re-sends its read receipt. The room drops
+* a receipt that arrives within 5 s of the last one, so a reply read in that
+* window would otherwise stay "unread" and be emailed to the visitor.
+*/
+const READ_RECEIPT_REFRESH_MS = 15e3;
+/** How long a visitor waits unanswered before the widget reassures them (D20a). */
+const WAITING_NOTICE_AFTER_MS = 12e4;
+/**
+* When the visitor's latest message was sent, if nobody has answered it yet;
+* null when the latest message is a reply or there is nothing waiting. Failed
+* sends don't count: nobody was notified about them.
+*/
+function awaitingReplySince(messages) {
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (!message || message.delivery === "failed") continue;
+		if (message.senderType !== "visitor") return null;
+		return new Date(message.createdAt).getTime();
+	}
+	return null;
+}
+/** True once the visitor has waited `WAITING_NOTICE_AFTER_MS` unanswered. */
+function useWaitingNotice(messages) {
+	const [due, setDue] = useState(false);
+	useEffect(() => {
+		const since = awaitingReplySince(messages);
+		if (since === null) {
+			setDue(false);
+			return;
+		}
+		const remaining = since + WAITING_NOTICE_AFTER_MS - Date.now();
+		if (remaining <= 0) {
+			setDue(true);
+			return;
+		}
+		setDue(false);
+		const timer = setTimeout(() => {
+			setDue(true);
+		}, remaining);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [messages]);
+	return due;
+}
+function waitingNoticeText(email) {
+	const address = email?.trim();
+	return address ? `We've notified the team — we'll reply here or by email at ${address}.` : "We've notified the team — we'll reply here as soon as we can.";
+}
+/**
 * Whether a seeded visitor is complete enough to skip the form.
 *
 * Both fields have to be present and non-blank: the server requires each, so
@@ -552,6 +610,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		if (createTransport) return;
 		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
 	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
 	const themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
@@ -594,6 +653,23 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	useEffect(() => {
+		if (!(isOpen && isReady)) return;
+		const markReadIfVisible = () => {
+			if (document.visibilityState === "visible") transportRef.current?.markRead?.();
+		};
+		markReadIfVisible();
+		const interval = window.setInterval(markReadIfVisible, READ_RECEIPT_REFRESH_MS);
+		document.addEventListener("visibilitychange", markReadIfVisible);
+		return () => {
+			window.clearInterval(interval);
+			document.removeEventListener("visibilitychange", markReadIfVisible);
+		};
+	}, [
+		isOpen,
+		isReady,
+		messages
+	]);
 	const startSession = useCallback(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
@@ -710,14 +786,22 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 					/* @__PURE__ */ jsxs("div", {
 						className: "clivly-chat-widget__body",
 						ref: listRef,
-						children: [error ? /* @__PURE__ */ jsx("div", {
-							className: "clivly-chat-widget__error",
-							children: error
-						}) : null, /* @__PURE__ */ jsx(MessageList, {
-							greeting,
-							hasSession: Boolean(session),
-							messages
-						})]
+						children: [
+							error ? /* @__PURE__ */ jsx("div", {
+								className: "clivly-chat-widget__error",
+								children: error
+							}) : null,
+							/* @__PURE__ */ jsx(MessageList, {
+								greeting,
+								hasSession: Boolean(session),
+								messages
+							}),
+							session && showWaitingNotice ? /* @__PURE__ */ jsx("p", {
+								className: "clivly-chat-widget__notice",
+								role: "status",
+								children: waitingNoticeText(session.contact?.email)
+							}) : null
+						]
 					}),
 					session ? /* @__PURE__ */ jsxs("form", {
 						className: "clivly-chat-widget__composer",
@@ -875,6 +959,9 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			close: () => {
 				socket.close();
 			},
+			markRead: () => {
+				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));

package/dist/widget.global.js

@@ -344,7 +344,7 @@ process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,f,m,f),le[f+o]=!0)}if(f=null,i!==void 0&&(r(i),f=``+i),c(n)&&(r(n.key),f=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return f&&l(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),d(e,f,i,a(),s,u)}function p(e){m(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===re&&(e._payload.status===`fulfilled`?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e==`object`&&!!e&&e.$$typeof===g}var h=o(),g=Symbol.for(`react.transitional.element`),_=Symbol.for(`react.portal`),v=Symbol.for(`react.fragment`),y=Symbol.for(`react.strict_mode`),b=Symbol.for(`react.profiler`),x=Symbol.for(`react.consumer`),ee=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),te=Symbol.for(`react.suspense_list`),ne=Symbol.for(`react.memo`),re=Symbol.for(`react.lazy`),w=Symbol.for(`react.activity`),ie=Symbol.for(`react.client.reference`),T=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ae=Object.prototype.hasOwnProperty,oe=Array.isArray,E=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var se,ce={},D=h.react_stack_bottom_frame.bind(h,s)(),O=E(i(s)),le={};e.Fragment=v,e.jsx=function(e,t,n){var r=1e4>T.recentlyCreatedOwnerStacks++;return f(e,t,n,!1,r?Error(`react-stack-top-frame`):D,r?E(i(e)):O)},e.jsxs=function(e,t,n){var r=1e4>T.recentlyCreatedOwnerStacks++;return f(e,t,n,!0,r?Error(`react-stack-top-frame`):D,r?E(i(e)):O)}})()})),w=e(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?ne():re()}))();let ie={failed:`Failed to send`,pending:`Sending…`,sent:null},T=typeof window>`u`?void 0:window.localStorage;function ae(e){return e.contact?.name??`You`}function oe(e,t){return e?e.contact?`${e.contact.name} • ${e.contact.email}`:`Verified visitor`:t}function E(e,t=`sent`){return{...e,delivery:t}}function se(e){return`clivly-chat-widget:${e}:visitor-token`}function ce(e){let t=new Date(e);return Number.isNaN(t.getTime())?``:new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`,month:`short`,day:`numeric`}).format(t)}function D(e){return e.key===`Enter`&&!(e.shiftKey||e.nativeEvent.isComposing)}function O(){return typeof crypto<`u`&&`randomUUID`in crypto?crypto.randomUUID():`msg_${Date.now().toString(36)}_${Math.random().toString(36).slice(2,10)}`}function le(e,t){let n=e.findIndex(e=>e.id===t.id);if(n===-1)return[...e,E(t)];let r=[...e];return r[n]=E(t),r}function ue(e,t,n){return e.map(e=>e.id===t?E(n):e)}function de(e,t){return e.map(e=>e.id===t?{...e,delivery:`failed`}:e)}function fe(e){return[...e].sort((e,t)=>e.createdAt.localeCompare(t.createdAt))}function pe(e,t){return(0,p.useMemo)(()=>{let n=e?.widget.config.brandColor??null;return n?{"--clivly-chat-accent":n,...t}:t},[e?.widget.config.brandColor,t])}function me(e){let[t,n]=(0,p.useState)(()=>S(e));return(0,p.useEffect)(()=>(n(S(e)),C(e,n)),[e]),t}function he(e,{setError:t,setIsReady:n,setMessages:r}){switch(e.type){case`conversation.snapshot`:r(fe(e.messages.map(e=>E(e))));return;case`error`:t(e.message);return;case`message.ack`:r(t=>fe(ue(t,e.clientMessageId,e.message)));return;case`message.created`:{let t=e.clientMessageId;r(n=>fe(t?ue(n,t,e.message):le(n,e.message)));return}case`session.ready`:n(!0);return;default:return}}function ge({message:e}){return(0,w.jsxs)(`article`,{className:`clivly-chat-widget__message`,"data-sender":e.senderType,children:[(0,w.jsxs)(`div`,{className:`clivly-chat-widget__message-meta`,children:[(0,w.jsx)(`span`,{children:e.author??`Clivly`}),(0,w.jsx)(`span`,{children:ce(e.createdAt)})]}),(0,w.jsx)(`div`,{children:e.body}),e.delivery===`sent`?null:(0,w.jsx)(`div`,{className:`clivly-chat-widget__status`,children:ie[e.delivery]})]})}function _e({greeting:e,hasSession:t,messages:n}){return t?n.length===0?(0,w.jsx)(`p`,{className:`clivly-chat-widget__empty`,children:`No messages yet. Say hello to get the conversation started.`}):(0,w.jsx)(w.Fragment,{children:n.map(e=>(0,w.jsx)(ge,{message:e},e.id))}):(0,w.jsx)(`p`,{className:`clivly-chat-widget__empty`,children:e})}function ve(e){return!!(e?.name?.trim()&&e?.email?.trim())}function ye(e,t){return e?t?`Conversation ready`:`Connecting…`:`Chat is unavailable`}function be({className:e,createTransport:t,defaultVisitor:n,getSession:r,initiallyOpen:i=!1,launcherLabel:a=`Chat with us`,storage:o=T,style:s,theme:c=`auto`,widgetId:l}){let[u,d]=(0,p.useState)(i),[f,m]=(0,p.useState)(null),[h,g]=(0,p.useState)(!1),[_,v]=(0,p.useState)(!1),[y,b]=(0,p.useState)(``),[x,ee]=(0,p.useState)([]),[S,C]=(0,p.useState)(null),[te,ne]=(0,p.useState)({email:n?.email??``,name:n?.name??``}),re=(0,p.useRef)(null),ie=(0,p.useRef)(null);(0,p.useEffect)(()=>{t||console.warn(`[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start`)},[]);let ce=pe(S,s),le=me(c);(0,p.useEffect)(()=>()=>{re.current?.close(),re.current=null},[]),(0,p.useEffect)(()=>{ie.current&&(ie.current.scrollTop=ie.current.scrollHeight)},[x]),(0,p.useEffect)(()=>{if(re.current?.close(),re.current=null,v(!1),!(S&&t))return;let e=t({handlers:{onClose:()=>{v(!1)},onError:e=>{m(e.message)},onEvent:e=>{he(e,{setError:m,setIsReady:v,setMessages:ee})},onOpen:()=>{v(!0)}},session:S});return re.current=e,()=>{e.close(),re.current===e&&(re.current=null)}},[t,S]);let ue=(0,p.useCallback)(async e=>{m(null),g(!0);try{let t=await r({visitor:e,visitorToken:o?.getItem(se(l))??null,widgetId:l});o?.setItem(se(l),t.visitorToken),C(t),ee(fe(t.messages.map(e=>E(e))))}catch(e){let t=e instanceof Error?e:Error(`Failed to start the conversation.`);m(t.message)}finally{g(!1)}},[r,o,l]),ge=async e=>{e.preventDefault(),await ue(te)};(0,p.useEffect)(()=>{u&&ve(n)&&(S||h||f||ue({email:n.email.trim(),name:n.name.trim()}).catch(()=>{}))},[n,f,h,u,S,ue]);let be=e=>{if(e?.preventDefault(),!(S&&re.current)){m(`Chat is not connected yet.`);return}let t=y.trim();if(!t)return;let n=O(),r={author:ae(S),body:t,createdAt:new Date().toISOString(),id:n,senderType:`visitor`};ee(e=>fe([...e,E(r,`pending`)])),b(``),m(null);try{re.current.sendMessage({body:t,id:n,type:`message.create`})}catch(e){let t=e instanceof Error?e:Error(`Failed to send your message.`);ee(e=>de(e,n)),m(t.message)}},xe=!!t&&_,k=S?.widget.config.greeting??`Tell us a little about yourself and we’ll pick up the conversation from there.`,Se=S?.widget.name??`Start a conversation`,Ce=oe(S,k);return(0,w.jsxs)(`div`,{className:`clivly-chat-widget ${e??``}`.trim(),"data-clivly-theme":le,style:ce,children:[(0,w.jsx)(`style`,{children:`
+  <%s key={someKey} {...props} />`,o,f,m,f),le[f+o]=!0)}if(f=null,i!==void 0&&(r(i),f=``+i),c(n)&&(r(n.key),f=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return f&&l(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),d(e,f,i,a(),s,u)}function p(e){m(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===re&&(e._payload.status===`fulfilled`?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e==`object`&&!!e&&e.$$typeof===g}var h=o(),g=Symbol.for(`react.transitional.element`),_=Symbol.for(`react.portal`),v=Symbol.for(`react.fragment`),y=Symbol.for(`react.strict_mode`),b=Symbol.for(`react.profiler`),x=Symbol.for(`react.consumer`),ee=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),te=Symbol.for(`react.suspense_list`),ne=Symbol.for(`react.memo`),re=Symbol.for(`react.lazy`),w=Symbol.for(`react.activity`),ie=Symbol.for(`react.client.reference`),T=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ae=Object.prototype.hasOwnProperty,oe=Array.isArray,E=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var se,ce={},D=h.react_stack_bottom_frame.bind(h,s)(),O=E(i(s)),le={};e.Fragment=v,e.jsx=function(e,t,n){var r=1e4>T.recentlyCreatedOwnerStacks++;return f(e,t,n,!1,r?Error(`react-stack-top-frame`):D,r?E(i(e)):O)},e.jsxs=function(e,t,n){var r=1e4>T.recentlyCreatedOwnerStacks++;return f(e,t,n,!0,r?Error(`react-stack-top-frame`):D,r?E(i(e)):O)}})()})),w=e(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?ne():re()}))();let ie={failed:`Failed to send`,pending:`Sending…`,sent:null},T=typeof window>`u`?void 0:window.localStorage;function ae(e){return e.contact?.name??`You`}function oe(e,t){return e?e.contact?`${e.contact.name} • ${e.contact.email}`:`Verified visitor`:t}function E(e,t=`sent`){return{...e,delivery:t}}function se(e){return`clivly-chat-widget:${e}:visitor-token`}function ce(e){let t=new Date(e);return Number.isNaN(t.getTime())?``:new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`,month:`short`,day:`numeric`}).format(t)}function D(e){return e.key===`Enter`&&!(e.shiftKey||e.nativeEvent.isComposing)}function O(){return typeof crypto<`u`&&`randomUUID`in crypto?crypto.randomUUID():`msg_${Date.now().toString(36)}_${Math.random().toString(36).slice(2,10)}`}function le(e,t){let n=e.findIndex(e=>e.id===t.id);if(n===-1)return[...e,E(t)];let r=[...e];return r[n]=E(t),r}function ue(e,t,n){return e.map(e=>e.id===t?E(n):e)}function de(e,t){return e.map(e=>e.id===t?{...e,delivery:`failed`}:e)}function fe(e){return[...e].sort((e,t)=>e.createdAt.localeCompare(t.createdAt))}function pe(e,t){return(0,p.useMemo)(()=>{let n=e?.widget.config.brandColor??null;return n?{"--clivly-chat-accent":n,...t}:t},[e?.widget.config.brandColor,t])}function me(e){let[t,n]=(0,p.useState)(()=>S(e));return(0,p.useEffect)(()=>(n(S(e)),C(e,n)),[e]),t}function he(e,{setError:t,setIsReady:n,setMessages:r}){switch(e.type){case`conversation.snapshot`:r(fe(e.messages.map(e=>E(e))));return;case`error`:t(e.message);return;case`message.ack`:r(t=>fe(ue(t,e.clientMessageId,e.message)));return;case`message.created`:{let t=e.clientMessageId;r(n=>fe(t?ue(n,t,e.message):le(n,e.message)));return}case`session.ready`:n(!0);return;default:return}}function ge({message:e}){return(0,w.jsxs)(`article`,{className:`clivly-chat-widget__message`,"data-sender":e.senderType,children:[(0,w.jsxs)(`div`,{className:`clivly-chat-widget__message-meta`,children:[(0,w.jsx)(`span`,{children:e.author??`Clivly`}),(0,w.jsx)(`span`,{children:ce(e.createdAt)})]}),(0,w.jsx)(`div`,{children:e.body}),e.delivery===`sent`?null:(0,w.jsx)(`div`,{className:`clivly-chat-widget__status`,children:ie[e.delivery]})]})}function _e({greeting:e,hasSession:t,messages:n}){return t?n.length===0?(0,w.jsx)(`p`,{className:`clivly-chat-widget__empty`,children:`No messages yet. Say hello to get the conversation started.`}):(0,w.jsx)(w.Fragment,{children:n.map(e=>(0,w.jsx)(ge,{message:e},e.id))}):(0,w.jsx)(`p`,{className:`clivly-chat-widget__empty`,children:e})}function ve(e){for(let t=e.length-1;t>=0;t--){let n=e[t];if(n&&n.delivery!==`failed`)return n.senderType===`visitor`?new Date(n.createdAt).getTime():null}return null}function ye(e){let[t,n]=(0,p.useState)(!1);return(0,p.useEffect)(()=>{let t=ve(e);if(t===null){n(!1);return}let r=t+12e4-Date.now();if(r<=0){n(!0);return}n(!1);let i=setTimeout(()=>{n(!0)},r);return()=>{clearTimeout(i)}},[e]),t}function be(e){let t=e?.trim();return t?`We've notified the team — we'll reply here or by email at ${t}.`:`We've notified the team — we'll reply here as soon as we can.`}function xe(e){return!!(e?.name?.trim()&&e?.email?.trim())}function k(e,t){return e?t?`Conversation ready`:`Connecting…`:`Chat is unavailable`}function Se({className:e,createTransport:t,defaultVisitor:n,getSession:r,initiallyOpen:i=!1,launcherLabel:a=`Chat with us`,storage:o=T,style:s,theme:c=`auto`,widgetId:l}){let[u,d]=(0,p.useState)(i),[f,m]=(0,p.useState)(null),[h,g]=(0,p.useState)(!1),[_,v]=(0,p.useState)(!1),[y,b]=(0,p.useState)(``),[x,ee]=(0,p.useState)([]),[S,C]=(0,p.useState)(null),[te,ne]=(0,p.useState)({email:n?.email??``,name:n?.name??``}),re=(0,p.useRef)(null),ie=(0,p.useRef)(null);(0,p.useEffect)(()=>{t||console.warn(`[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start`)},[]);let ce=ye(x),le=pe(S,s),ue=me(c);(0,p.useEffect)(()=>()=>{re.current?.close(),re.current=null},[]),(0,p.useEffect)(()=>{ie.current&&(ie.current.scrollTop=ie.current.scrollHeight)},[x]),(0,p.useEffect)(()=>{if(re.current?.close(),re.current=null,v(!1),!(S&&t))return;let e=t({handlers:{onClose:()=>{v(!1)},onError:e=>{m(e.message)},onEvent:e=>{he(e,{setError:m,setIsReady:v,setMessages:ee})},onOpen:()=>{v(!0)}},session:S});return re.current=e,()=>{e.close(),re.current===e&&(re.current=null)}},[t,S]),(0,p.useEffect)(()=>{if(!(u&&_))return;let e=()=>{document.visibilityState===`visible`&&re.current?.markRead?.()};e();let t=window.setInterval(e,15e3);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(t),document.removeEventListener(`visibilitychange`,e)}},[u,_,x]);let ge=(0,p.useCallback)(async e=>{m(null),g(!0);try{let t=await r({visitor:e,visitorToken:o?.getItem(se(l))??null,widgetId:l});o?.setItem(se(l),t.visitorToken),C(t),ee(fe(t.messages.map(e=>E(e))))}catch(e){let t=e instanceof Error?e:Error(`Failed to start the conversation.`);m(t.message)}finally{g(!1)}},[r,o,l]),ve=async e=>{e.preventDefault(),await ge(te)};(0,p.useEffect)(()=>{u&&xe(n)&&(S||h||f||ge({email:n.email.trim(),name:n.name.trim()}).catch(()=>{}))},[n,f,h,u,S,ge]);let Se=e=>{if(e?.preventDefault(),!(S&&re.current)){m(`Chat is not connected yet.`);return}let t=y.trim();if(!t)return;let n=O(),r={author:ae(S),body:t,createdAt:new Date().toISOString(),id:n,senderType:`visitor`};ee(e=>fe([...e,E(r,`pending`)])),b(``),m(null);try{re.current.sendMessage({body:t,id:n,type:`message.create`})}catch(e){let t=e instanceof Error?e:Error(`Failed to send your message.`);ee(e=>de(e,n)),m(t.message)}},Ce=!!t&&_,we=S?.widget.config.greeting??`Tell us a little about yourself and we’ll pick up the conversation from there.`,Te=S?.widget.name??`Start a conversation`,A=oe(S,we);return(0,w.jsxs)(`div`,{className:`clivly-chat-widget ${e??``}`.trim(),"data-clivly-theme":ue,style:le,children:[(0,w.jsx)(`style`,{children:`
 .clivly-chat-widget, .clivly-chat-widget * { box-sizing: border-box; }
 .clivly-chat-widget {
   --clivly-chat-accent: #185adb;
@@ -591,10 +591,18 @@ React keys must be passed directly to JSX without using spread:
   font-size: 0.875rem;
   padding: 0.75rem;
 }
+.clivly-chat-widget__notice {
+  background: var(--clivly-chat-operator);
+  border-radius: 0.8rem;
+  color: var(--clivly-chat-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
   margin: auto 0;
   text-align: center;
 }
-`}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__launcher`,onClick:()=>{d(e=>!e)},type:`button`,children:(0,w.jsx)(`span`,{children:a})}),u?(0,w.jsxs)(`section`,{"aria-label":Se,className:`clivly-chat-widget__panel`,children:[(0,w.jsxs)(`header`,{className:`clivly-chat-widget__header`,children:[(0,w.jsxs)(`div`,{children:[(0,w.jsx)(`h2`,{className:`clivly-chat-widget__title`,children:Se}),(0,w.jsx)(`p`,{className:`clivly-chat-widget__subtitle`,children:Ce})]}),(0,w.jsx)(`button`,{"aria-label":`Close chat`,className:`clivly-chat-widget__close`,onClick:()=>{d(!1)},type:`button`,children:`Close`})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__body`,ref:ie,children:[f?(0,w.jsx)(`div`,{className:`clivly-chat-widget__error`,children:f}):null,(0,w.jsx)(_e,{greeting:k,hasSession:!!S,messages:x})]}),S?(0,w.jsxs)(`form`,{className:`clivly-chat-widget__composer`,onSubmit:be,children:[(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Message`}),(0,w.jsx)(`textarea`,{className:`clivly-chat-widget__textarea`,onChange:e=>{b(e.target.value)},onKeyDown:e=>{D(e)&&(e.preventDefault(),y.trim()&&xe&&be())},placeholder:`Write your message`,value:y})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__actions`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__subtitle`,children:ye(!!t,_)}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__button`,disabled:!(y.trim()&&xe),type:`submit`,children:`Send`})]})]}):(0,w.jsxs)(`form`,{className:`clivly-chat-widget__form`,onSubmit:ge,children:[(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Name`}),(0,w.jsx)(`input`,{autoComplete:`name`,className:`clivly-chat-widget__input`,onChange:e=>{ne(t=>({...t,name:e.target.value}))},required:!0,value:te.name})]}),(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Email`}),(0,w.jsx)(`input`,{autoComplete:`email`,className:`clivly-chat-widget__input`,onChange:e=>{ne(t=>({...t,email:e.target.value}))},required:!0,type:`email`,value:te.email})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__actions`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__subtitle`,children:`We use this to start the conversation.`}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__button`,disabled:h||!te.name.trim()||!te.email.trim(),type:`submit`,children:h?`Starting…`:`Start chat`})]})]}),(0,w.jsx)(`p`,{className:`clivly-chat-widget__powered`,children:(0,w.jsxs)(`a`,{href:`https://clivly.com`,rel:`noopener`,target:`_blank`,children:[`Powered by`,` `,(0,w.jsx)(`span`,{className:`clivly-chat-widget__powered-mark`,children:`Clivly`})]})})]}):null]})}function xe(e){return typeof e!=`object`||!e?!1:typeof e.type==`string`}function k({createSocket:e=(e,t)=>new WebSocket(e,t),getProtocols:t,resolveUrl:n}){return({handlers:r,session:i})=>{let a=e(n(i),t?.(i));return a.addEventListener(`open`,()=>{r.onOpen?.()}),a.addEventListener(`close`,()=>{r.onClose()}),a.addEventListener(`error`,()=>{r.onError(Error(`Chat socket error.`))}),a.addEventListener(`message`,e=>{try{let t=JSON.parse(String(e.data));if(!xe(t))throw Error(`Chat socket event had an invalid shape.`);r.onEvent(t)}catch(e){let t=e instanceof Error?e:Error(`Chat socket event could not be parsed.`);r.onError(t)}}),{close:()=>{a.close()},sendMessage:e=>{if(a.readyState!==WebSocket.OPEN)throw Error(`Chat socket is not connected.`);a.send(JSON.stringify(e))}}}}function Se(e={}){return k({...e,resolveUrl:e=>{if(!e.socketUrl)throw Error(`Chat session response is missing socketUrl. The Clivly server is older than this widget.`);return e.socketUrl}})}function Ce(e){return typeof e==`object`&&!!e}function we({fetchImpl:e=fetch,sessionUrl:t}){return async({visitor:n,visitorToken:r,widgetId:i})=>{let a=await e(t,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({visitor:n,visitorToken:r,widgetId:i})});if(!a.ok)throw Error(`Chat session request failed with ${a.status}.`);let o=await a.json();if(!Ce(o))throw Error(`Chat session response was not an object.`);return`session`in o?o.session:o}}let Te=`clivlyMounted`;function A(e){let t=e.visitorEmail?.trim(),n=e.visitorName?.trim();if(t||n)return{...t?{email:t}:{},...n?{name:n}:{}}}function Ee(e,t,n){return e.replaceAll(`{conversationId}`,encodeURIComponent(t)).replaceAll(`{token}`,encodeURIComponent(n))}function De({container:e,createTransport:t,sessionUrl:n,socketUrlTemplate:r,theme:i=`auto`,widgetId:a,...o}){let s=t??(r?k({resolveUrl:e=>e.socketUrl??Ee(r,e.conversation.id,e.token)}):Se()),c=we({sessionUrl:n}),l=(0,m.createRoot)(e),u=e=>{l.render((0,w.jsx)(be,{...o,createTransport:s,getSession:c,theme:e,widgetId:a}))};return u(i),{root:l,setTheme:u}}function Oe(e){e.dataset[Te]=`true`}function ke(e){return e.dataset[Te]===`true`}function Ae(e=document.currentScript){if(ke(e))throw Error(`Widget script has already been mounted.`);let t=e.dataset.widgetId,n=e.dataset.sessionUrl;if(!t)throw Error(`Widget script is missing data-widget-id.`);if(!n)throw Error(`Widget script is missing data-session-url.`);let r=document.createElement(`div`);e.insertAdjacentElement(`afterend`,r);let i=r.attachShadow({mode:`open`}),a=document.createElement(`div`);i.append(a);let{root:o,setTheme:s}=De({container:a,defaultVisitor:A(e.dataset),sessionUrl:n,socketUrlTemplate:e.dataset.socketUrlTemplate,theme:te(e.dataset.theme),widgetId:t});return Oe(e),{root:o,setTheme:s,shadowRoot:i}}function je(e=document.currentScript){return!e||ke(e)?null:Ae(e)}je()})();
+`}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__launcher`,onClick:()=>{d(e=>!e)},type:`button`,children:(0,w.jsx)(`span`,{children:a})}),u?(0,w.jsxs)(`section`,{"aria-label":Te,className:`clivly-chat-widget__panel`,children:[(0,w.jsxs)(`header`,{className:`clivly-chat-widget__header`,children:[(0,w.jsxs)(`div`,{children:[(0,w.jsx)(`h2`,{className:`clivly-chat-widget__title`,children:Te}),(0,w.jsx)(`p`,{className:`clivly-chat-widget__subtitle`,children:A})]}),(0,w.jsx)(`button`,{"aria-label":`Close chat`,className:`clivly-chat-widget__close`,onClick:()=>{d(!1)},type:`button`,children:`Close`})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__body`,ref:ie,children:[f?(0,w.jsx)(`div`,{className:`clivly-chat-widget__error`,children:f}):null,(0,w.jsx)(_e,{greeting:we,hasSession:!!S,messages:x}),S&&ce?(0,w.jsx)(`p`,{className:`clivly-chat-widget__notice`,role:`status`,children:be(S.contact?.email)}):null]}),S?(0,w.jsxs)(`form`,{className:`clivly-chat-widget__composer`,onSubmit:Se,children:[(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Message`}),(0,w.jsx)(`textarea`,{className:`clivly-chat-widget__textarea`,onChange:e=>{b(e.target.value)},onKeyDown:e=>{D(e)&&(e.preventDefault(),y.trim()&&Ce&&Se())},placeholder:`Write your message`,value:y})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__actions`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__subtitle`,children:k(!!t,_)}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__button`,disabled:!(y.trim()&&Ce),type:`submit`,children:`Send`})]})]}):(0,w.jsxs)(`form`,{className:`clivly-chat-widget__form`,onSubmit:ve,children:[(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Name`}),(0,w.jsx)(`input`,{autoComplete:`name`,className:`clivly-chat-widget__input`,onChange:e=>{ne(t=>({...t,name:e.target.value}))},required:!0,value:te.name})]}),(0,w.jsxs)(`label`,{className:`clivly-chat-widget__field`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__label`,children:`Email`}),(0,w.jsx)(`input`,{autoComplete:`email`,className:`clivly-chat-widget__input`,onChange:e=>{ne(t=>({...t,email:e.target.value}))},required:!0,type:`email`,value:te.email})]}),(0,w.jsxs)(`div`,{className:`clivly-chat-widget__actions`,children:[(0,w.jsx)(`span`,{className:`clivly-chat-widget__subtitle`,children:`We use this to start the conversation.`}),(0,w.jsx)(`button`,{className:`clivly-chat-widget__button`,disabled:h||!te.name.trim()||!te.email.trim(),type:`submit`,children:h?`Starting…`:`Start chat`})]})]}),(0,w.jsx)(`p`,{className:`clivly-chat-widget__powered`,children:(0,w.jsxs)(`a`,{href:`https://clivly.com`,rel:`noopener`,target:`_blank`,children:[`Powered by`,` `,(0,w.jsx)(`span`,{className:`clivly-chat-widget__powered-mark`,children:`Clivly`})]})})]}):null]})}function Ce(e){return typeof e!=`object`||!e?!1:typeof e.type==`string`}function we({createSocket:e=(e,t)=>new WebSocket(e,t),getProtocols:t,resolveUrl:n}){return({handlers:r,session:i})=>{let a=e(n(i),t?.(i));return a.addEventListener(`open`,()=>{r.onOpen?.()}),a.addEventListener(`close`,()=>{r.onClose()}),a.addEventListener(`error`,()=>{r.onError(Error(`Chat socket error.`))}),a.addEventListener(`message`,e=>{try{let t=JSON.parse(String(e.data));if(!Ce(t))throw Error(`Chat socket event had an invalid shape.`);r.onEvent(t)}catch(e){let t=e instanceof Error?e:Error(`Chat socket event could not be parsed.`);r.onError(t)}}),{close:()=>{a.close()},markRead:()=>{a.readyState===WebSocket.OPEN&&a.send(JSON.stringify({type:`conversation.read`}))},sendMessage:e=>{if(a.readyState!==WebSocket.OPEN)throw Error(`Chat socket is not connected.`);a.send(JSON.stringify(e))}}}}function Te(e={}){return we({...e,resolveUrl:e=>{if(!e.socketUrl)throw Error(`Chat session response is missing socketUrl. The Clivly server is older than this widget.`);return e.socketUrl}})}function A(e){return typeof e==`object`&&!!e}function Ee({fetchImpl:e=fetch,sessionUrl:t}){return async({visitor:n,visitorToken:r,widgetId:i})=>{let a=await e(t,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({visitor:n,visitorToken:r,widgetId:i})});if(!a.ok)throw Error(`Chat session request failed with ${a.status}.`);let o=await a.json();if(!A(o))throw Error(`Chat session response was not an object.`);return`session`in o?o.session:o}}let De=`clivlyMounted`;function Oe(e){let t=e.visitorEmail?.trim(),n=e.visitorName?.trim();if(t||n)return{...t?{email:t}:{},...n?{name:n}:{}}}function ke(e,t,n){return e.replaceAll(`{conversationId}`,encodeURIComponent(t)).replaceAll(`{token}`,encodeURIComponent(n))}function Ae({container:e,createTransport:t,sessionUrl:n,socketUrlTemplate:r,theme:i=`auto`,widgetId:a,...o}){let s=t??(r?we({resolveUrl:e=>e.socketUrl??ke(r,e.conversation.id,e.token)}):Te()),c=Ee({sessionUrl:n}),l=(0,m.createRoot)(e),u=e=>{l.render((0,w.jsx)(Se,{...o,createTransport:s,getSession:c,theme:e,widgetId:a}))};return u(i),{root:l,setTheme:u}}function je(e){e.dataset[De]=`true`}function Me(e){return e.dataset[De]===`true`}function Ne(e=document.currentScript){if(Me(e))throw Error(`Widget script has already been mounted.`);let t=e.dataset.widgetId,n=e.dataset.sessionUrl;if(!t)throw Error(`Widget script is missing data-widget-id.`);if(!n)throw Error(`Widget script is missing data-session-url.`);let r=document.createElement(`div`);e.insertAdjacentElement(`afterend`,r);let i=r.attachShadow({mode:`open`}),a=document.createElement(`div`);i.append(a);let{root:o,setTheme:s}=Ae({container:a,defaultVisitor:Oe(e.dataset),sessionUrl:n,socketUrlTemplate:e.dataset.socketUrlTemplate,theme:te(e.dataset.theme),widgetId:t});return je(e),{root:o,setTheme:s,shadowRoot:i}}function Pe(e=document.currentScript){return!e||Me(e)?null:Ne(e)}Pe()})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clivly/chat-widget",
-  "version": "0.12.0",
+  "version": "0.14.1",
   "private": false,
   "description": "Clivly chat widget — embeddable React and script-tag entrypoints for Clivly conversations.",
   "license": "MIT",