@clivly/chat-widget 0.10.9 → 0.11.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/theme.ts
 const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
@@ -255,10 +255,42 @@ const WIDGET_STYLES = `
   padding: 0.5rem 1rem;
   text-align: center;
 }
+/* Only the name carries the gradient. "Powered by" is ordinary running text
+   and inherits the muted colour of the line, so the mark reads as a signature
+   rather than the whole sentence being branded. */
 .clivly-chat-widget__powered a {
   color: inherit;
   text-decoration: none;
 }
+/* The attribution is Clivly's mark, not the host's, so it uses the stops from
+   the logo itself rather than --clivly-chat-accent: the accent is driven by
+   each customer's own brandColor, and a signature that changed colour per
+   customer would stop reading as a signature.
+
+   The color declaration is the fallback and must stay a real colour:
+   background-clip is painted over it, so anything that drops the background —
+   forced-colors, an older engine, a copied-out snippet — degrades to solid
+   coral rather than to invisible text. */
+.clivly-chat-widget__powered-mark {
+  background-image: linear-gradient(90deg, #ff5a4a 0%, #c0231a 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: #c0231a;
+  -webkit-text-fill-color: transparent;
+}
+/* Forced-colors mode strips background-image outright, which would leave the
+   text painted in a transparent fill. Hand the colour back to the UA so the
+   mark inherits the link colour the UA picked rather than re-pinning coral. */
+@media (forced-colors: active) {
+  .clivly-chat-widget__powered a {
+    color: LinkText;
+  }
+  .clivly-chat-widget__powered-mark {
+    background-image: none;
+    color: currentColor;
+    -webkit-text-fill-color: currentColor;
+  }
+}
 .clivly-chat-widget__powered a:hover,
 .clivly-chat-widget__powered a:focus-visible {
   text-decoration: underline;
@@ -482,7 +514,27 @@ function MessageList({ greeting, hasSession, messages }) {
 	});
 	return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)) });
 }
-function ChatWidget({ className, createTransport, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
+/**
+* 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
+* auto-starting on a half-filled identity would trade a form the visitor can
+* complete for an error they cannot.
+*/
+function isCompleteVisitor(visitor) {
+	return Boolean(visitor?.name?.trim() && visitor?.email?.trim());
+}
+/**
+* What the composer says about itself. "Connecting…" claims a socket is in
+* flight, so it is as wrong as "Conversation ready" when no transport exists —
+* the visitor is told to wait for something that will never arrive. The third
+* string keeps the status honest in all three states.
+*/
+function composerStatusText(hasTransport, isReady) {
+	if (!hasTransport) return "Chat is unavailable";
+	return isReady ? "Conversation ready" : "Connecting…";
+}
+function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
 	const [isOpen, setIsOpen] = useState(initiallyOpen);
 	const [error, setError] = useState(null);
 	const [isConnecting, setIsConnecting] = useState(false);
@@ -491,11 +543,15 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	const [messages, setMessages] = useState([]);
 	const [session, setSession] = useState(null);
 	const [visitor, setVisitor] = useState({
-		email: "",
-		name: ""
+		email: defaultVisitor?.email ?? "",
+		name: defaultVisitor?.name ?? ""
 	});
 	const transportRef = useRef(null);
 	const listRef = useRef(null);
+	useEffect(() => {
+		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 themeStyle = useThemeStyle(session, style);
 	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
@@ -538,15 +594,13 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
-	const submitVisitor = async (event) => {
-		event.preventDefault();
+	const startSession = useCallback(async (identity) => {
 		setError(null);
 		setIsConnecting(true);
 		try {
-			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
-				visitor,
-				visitorToken: existingVisitorToken,
+				visitor: identity,
+				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
@@ -558,7 +612,30 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		} finally {
 			setIsConnecting(false);
 		}
+	}, [
+		getSession,
+		storage,
+		widgetId
+	]);
+	const submitVisitor = async (event) => {
+		event.preventDefault();
+		await startSession(visitor);
 	};
+	useEffect(() => {
+		if (!(isOpen && isCompleteVisitor(defaultVisitor))) return;
+		if (session || isConnecting || error) return;
+		startSession({
+			email: defaultVisitor.email.trim(),
+			name: defaultVisitor.name.trim()
+		}).catch(() => {});
+	}, [
+		defaultVisitor,
+		error,
+		isConnecting,
+		isOpen,
+		session,
+		startSession
+	]);
 	const submitMessage = (event) => {
 		event?.preventDefault();
 		if (!(session && transportRef.current)) {
@@ -590,6 +667,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 			setError(resolved.message);
 		}
 	};
+	const canSend = Boolean(createTransport) && isReady;
 	const greeting = session?.widget.config.greeting ?? "Tell us a little about yourself and we’ll pick up the conversation from there.";
 	const panelTitle = session?.widget.name ?? "Start a conversation";
 	const sessionSummary = sessionSummaryText(session, greeting);
@@ -657,7 +735,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 								onKeyDown: (event) => {
 									if (!isSendKey(event)) return;
 									event.preventDefault();
-									if (messageDraft.trim() && isReady) submitMessage();
+									if (messageDraft.trim() && canSend) submitMessage();
 								},
 								placeholder: "Write your message",
 								value: messageDraft
@@ -666,10 +744,10 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 							className: "clivly-chat-widget__actions",
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "clivly-chat-widget__subtitle",
-								children: isReady || !createTransport ? "Conversation ready" : "Connecting…"
+								children: composerStatusText(Boolean(createTransport), isReady)
 							}), /* @__PURE__ */ jsx("button", {
 								className: "clivly-chat-widget__button",
-								disabled: !(messageDraft.trim() && isReady),
+								disabled: !(messageDraft.trim() && canSend),
 								type: "submit",
 								children: "Send"
 							})]
@@ -731,11 +809,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "clivly-chat-widget__powered",
-						children: /* @__PURE__ */ jsx("a", {
+						children: /* @__PURE__ */ jsxs("a", {
 							href: "https://clivly.com",
 							rel: "noopener",
 							target: "_blank",
-							children: "Powered by Clivly"
+							children: [
+								"Powered by",
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "clivly-chat-widget__powered-mark",
+									children: "Clivly"
+								})
+							]
 						})
 					})
 				]
@@ -898,6 +983,33 @@ function createSessionFetcher({ fetchImpl = fetch, sessionUrl }) {
 //#endregion
 //#region src/browser-mount.tsx
 const MOUNTED_DATA_ATTR = "clivlyMounted";
+/**
+* The identity a script-tag host already knows, read off the tag.
+*
+* The React component takes `defaultVisitor` as a prop; a script tag has only
+* strings, so `data-visitor-name` / `data-visitor-email` are the same seam. A
+* host that server-renders its page can template the signed-in user's details
+* straight into the tag and the visitor never sees the pre-chat form.
+*
+* Returns `undefined` rather than an empty object when neither attribute is
+* present, so the component's own "no identity" path stays untouched. Partial
+* values are passed through deliberately: `ChatWidget` treats one field as a
+* prefill and still renders the form, which is the right outcome for a host
+* that knows an email but not a name.
+*
+* This is self-reported identity — anyone can edit the attribute in devtools.
+* `resolveUser` on the host backend is what makes it trustworthy; this only
+* removes the typing.
+*/
+function readScriptVisitor(dataset) {
+	const email = dataset.visitorEmail?.trim();
+	const name = dataset.visitorName?.trim();
+	if (!(email || name)) return;
+	return {
+		...email ? { email } : {},
+		...name ? { name } : {}
+	};
+}
 function resolveSocketUrl(socketUrlTemplate, conversationId, token) {
 	return socketUrlTemplate.replaceAll("{conversationId}", encodeURIComponent(conversationId)).replaceAll("{token}", encodeURIComponent(token));
 }
@@ -942,6 +1054,7 @@ function mountChatWidgetScript$1(script = document.currentScript) {
 	shadowRoot.append(container);
 	const { root, setTheme } = createWidgetMount({
 		container,
+		defaultVisitor: readScriptVisitor(script.dataset),
 		sessionUrl,
 		socketUrlTemplate: script.dataset.socketUrlTemplate,
 		theme: parseTheme(script.dataset.theme),