@clivly/chat-widget 0.10.8 → 0.11.0-next.0

package/dist/index.d.cts

@@ -137,6 +137,24 @@ declare function createLoopbackTransport({ operatorName, operatorReply, replyDel
 interface ChatWidgetProps {
   className?: string;
   createTransport?: CreateChatTransport;
+  /**
+   * Identity the host already knows, used to skip the pre-chat form.
+   *
+   * When both `name` and `email` are non-empty the widget opens straight into
+   * the conversation and bootstraps the session itself, instead of asking a
+   * signed-in user to retype what the host app already displays in its own
+   * header. A partial value (one field, or blanks) is treated as a prefill:
+   * the form still renders, with the known fields filled in.
+   *
+   * This seeds the *form*, and a form value is self-reported no matter who
+   * typed it. It is not, on its own, proof of identity — anyone can pass any
+   * address here. Verification is a separate, server-side mechanism: pass
+   * `resolveUser` to `createChatSessionHandler` on the host backend and it
+   * resolves the caller's real session behind the API key, which is what marks
+   * the resulting contact verified. Use both together for a signed-in user:
+   * this prop removes the typing, `resolveUser` is what makes it trustworthy.
+   */
+  defaultVisitor?: Partial<ChatWidgetVisitor>;
   getSession: GetSession;
   initiallyOpen?: boolean;
   launcherLabel?: string;
@@ -155,7 +173,7 @@ interface ChatWidgetProps {
   theme?: ChatWidgetTheme;
   widgetId: string;
 }
-declare function ChatWidget({ className, createTransport, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
+declare function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
 declare function ChatLauncher(): null;
 declare function ChatPanel(): null;
 declare function MessageComposer(): null;

package/dist/index.d.mts

@@ -137,6 +137,24 @@ declare function createLoopbackTransport({ operatorName, operatorReply, replyDel
 interface ChatWidgetProps {
   className?: string;
   createTransport?: CreateChatTransport;
+  /**
+   * Identity the host already knows, used to skip the pre-chat form.
+   *
+   * When both `name` and `email` are non-empty the widget opens straight into
+   * the conversation and bootstraps the session itself, instead of asking a
+   * signed-in user to retype what the host app already displays in its own
+   * header. A partial value (one field, or blanks) is treated as a prefill:
+   * the form still renders, with the known fields filled in.
+   *
+   * This seeds the *form*, and a form value is self-reported no matter who
+   * typed it. It is not, on its own, proof of identity — anyone can pass any
+   * address here. Verification is a separate, server-side mechanism: pass
+   * `resolveUser` to `createChatSessionHandler` on the host backend and it
+   * resolves the caller's real session behind the API key, which is what marks
+   * the resulting contact verified. Use both together for a signed-in user:
+   * this prop removes the typing, `resolveUser` is what makes it trustworthy.
+   */
+  defaultVisitor?: Partial<ChatWidgetVisitor>;
   getSession: GetSession;
   initiallyOpen?: boolean;
   launcherLabel?: string;
@@ -155,7 +173,7 @@ interface ChatWidgetProps {
   theme?: ChatWidgetTheme;
   widgetId: string;
 }
-declare function ChatWidget({ className, createTransport, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
+declare function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
 declare function ChatLauncher(): null;
 declare function ChatPanel(): null;
 declare function MessageComposer(): null;

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,9 +255,31 @@ const WIDGET_STYLES = `
   padding: 0.5rem 1rem;
   text-align: center;
 }
+/* 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 a {
-  color: inherit;
+  background-image: linear-gradient(90deg, #ff5a4a 0%, #c0231a 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: #c0231a;
   text-decoration: none;
+  -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. */
+@media (forced-colors: active) {
+  .clivly-chat-widget__powered a {
+    background-image: none;
+    color: LinkText;
+    -webkit-text-fill-color: currentColor;
+  }
 }
 .clivly-chat-widget__powered a:hover,
 .clivly-chat-widget__powered a:focus-visible {
@@ -482,7 +504,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 +533,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 +584,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 +602,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 +657,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 +725,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 +734,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"
 							})]
@@ -898,6 +966,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 +1037,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),