@clivly/chat-widget 0.10.9 → 0.11.0

package/dist/browser.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"
+								})
+							]
 						})
 					})
 				]
@@ -826,6 +911,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));
 }
@@ -870,6 +982,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),

package/dist/index.cjs

@@ -256,10 +256,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;
@@ -483,7 +515,27 @@ 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)) });
 }
-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] = (0, react.useState)(initiallyOpen);
 	const [error, setError] = (0, react.useState)(null);
 	const [isConnecting, setIsConnecting] = (0, react.useState)(false);
@@ -492,11 +544,15 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	const [messages, setMessages] = (0, react.useState)([]);
 	const [session, setSession] = (0, react.useState)(null);
 	const [visitor, setVisitor] = (0, react.useState)({
-		email: "",
-		name: ""
+		email: defaultVisitor?.email ?? "",
+		name: defaultVisitor?.name ?? ""
 	});
 	const transportRef = (0, react.useRef)(null);
 	const listRef = (0, react.useRef)(null);
+	(0, react.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);
 	(0, react.useEffect)(() => () => {
@@ -539,15 +595,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 = (0, react.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);
@@ -559,7 +613,30 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		} finally {
 			setIsConnecting(false);
 		}
+	}, [
+		getSession,
+		storage,
+		widgetId
+	]);
+	const submitVisitor = async (event) => {
+		event.preventDefault();
+		await startSession(visitor);
 	};
+	(0, react.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)) {
@@ -591,6 +668,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);
@@ -658,7 +736,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
@@ -667,10 +745,10 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 							className: "clivly-chat-widget__actions",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "clivly-chat-widget__subtitle",
-								children: isReady || !createTransport ? "Conversation ready" : "Connecting…"
+								children: composerStatusText(Boolean(createTransport), isReady)
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								className: "clivly-chat-widget__button",
-								disabled: !(messageDraft.trim() && isReady),
+								disabled: !(messageDraft.trim() && canSend),
 								type: "submit",
 								children: "Send"
 							})]
@@ -732,11 +810,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "clivly-chat-widget__powered",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 							href: "https://clivly.com",
 							rel: "noopener",
 							target: "_blank",
-							children: "Powered by Clivly"
+							children: [
+								"Powered by",
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clivly-chat-widget__powered-mark",
+									children: "Clivly"
+								})
+							]
 						})
 					})
 				]
@@ -899,6 +984,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));
 }
@@ -943,6 +1055,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),

package/dist/index.d.cts

@@ -24,7 +24,7 @@ interface ResolveThemeOptions {
  * document, and guessing dark would flash the wrong palette on hydration for
  * the majority of pages.
  */
-declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
+export declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
 //#endregion
 //#region src/types.d.ts
 type WidgetSenderType = "visitor" | "operator" | "system";
@@ -125,18 +125,36 @@ interface CreateWebSocketTransportOptions {
   getProtocols?: (session: WidgetSessionPayload) => string | string[] | undefined;
   resolveUrl: (session: WidgetSessionPayload) => string;
 }
-declare function createWebSocketTransport({ createSocket, getProtocols, resolveUrl }: CreateWebSocketTransportOptions): CreateChatTransport;
+export declare function createWebSocketTransport({ createSocket, getProtocols, resolveUrl }: CreateWebSocketTransportOptions): CreateChatTransport;
 interface CreateLoopbackTransportOptions {
   operatorName?: string;
   operatorReply?: (body: string) => string | null;
   replyDelayMs?: number;
 }
-declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
+export declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
 //#endregion
 //#region src/chat-widget.d.ts
 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,12 +173,12 @@ interface ChatWidgetProps {
   theme?: ChatWidgetTheme;
   widgetId: string;
 }
-declare function ChatWidget({ className, createTransport, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
-declare function ChatLauncher(): null;
-declare function ChatPanel(): null;
-declare function MessageComposer(): null;
-declare function PreChatForm(): null;
-declare function ConversationView(): null;
+export declare function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
+export declare function ChatLauncher(): null;
+export declare function ChatPanel(): null;
+export declare function MessageComposer(): null;
+export declare function PreChatForm(): null;
+export declare function ConversationView(): null;
 //#endregion
 //#region src/browser-mount.d.ts
 interface MountChatWidgetOptions$1 extends Omit<ChatWidgetProps, "getSession" | "widgetId"> {
@@ -206,16 +224,16 @@ interface CreateSessionFetcherOptions {
   fetchImpl?: typeof fetch;
   sessionUrl: string;
 }
-declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
+export declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
 //#endregion
 //#region src/index.d.ts
-type ChatWidgetMount = ChatWidgetMount$1;
-type MountChatWidgetOptions = MountChatWidgetOptions$1;
-type ScriptMountResult = ScriptMountResult$1;
-declare const autoMountChatWidgetScript: typeof autoMountChatWidgetScript$1;
-type CreateClivlyTransportOptions = CreateClivlyTransportOptions$1;
-declare const createClivlyTransport: typeof createClivlyTransport$1;
-declare const mountChatWidget: typeof mountChatWidget$1;
-declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
+export type ChatWidgetMount = ChatWidgetMount$1;
+export type MountChatWidgetOptions = MountChatWidgetOptions$1;
+export type ScriptMountResult = ScriptMountResult$1;
+export declare const autoMountChatWidgetScript: typeof autoMountChatWidgetScript$1;
+export type CreateClivlyTransportOptions = CreateClivlyTransportOptions$1;
+export declare const createClivlyTransport: typeof createClivlyTransport$1;
+export declare const mountChatWidget: typeof mountChatWidget$1;
+export declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
 //#endregion
-export { ChatLauncher, ChatPanel, type ChatTransportConnection, type ChatTransportHandlers, ChatWidget, ChatWidgetMount, type ChatWidgetProps, type ChatWidgetTheme, type ChatWidgetVisitor, ConversationView, type CreateChatTransport, type CreateChatTransportOptions, CreateClivlyTransportOptions, type CreateLoopbackTransportOptions, type CreateWebSocketTransportOptions, type GetSession, type GetSessionOptions, MessageComposer, MountChatWidgetOptions, PreChatForm, type ResolvedTheme, ScriptMountResult, type WidgetClientCreateMessageEvent, type WidgetClientEvent, type WidgetConfig, type WidgetContact, type WidgetConversation, type WidgetConversationSnapshotEvent, type WidgetErrorEvent, type WidgetMessage, type WidgetMessageAckEvent, type WidgetMessageCreatedEvent, type WidgetSenderType, type WidgetServerEvent, type WidgetSessionPayload, type WidgetSessionReadyEvent, type WidgetSummary, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript, resolveTheme };
+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 };

package/dist/index.d.mts

@@ -24,7 +24,7 @@ interface ResolveThemeOptions {
  * document, and guessing dark would flash the wrong palette on hydration for
  * the majority of pages.
  */
-declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
+export declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
 //#endregion
 //#region src/types.d.ts
 type WidgetSenderType = "visitor" | "operator" | "system";
@@ -125,18 +125,36 @@ interface CreateWebSocketTransportOptions {
   getProtocols?: (session: WidgetSessionPayload) => string | string[] | undefined;
   resolveUrl: (session: WidgetSessionPayload) => string;
 }
-declare function createWebSocketTransport({ createSocket, getProtocols, resolveUrl }: CreateWebSocketTransportOptions): CreateChatTransport;
+export declare function createWebSocketTransport({ createSocket, getProtocols, resolveUrl }: CreateWebSocketTransportOptions): CreateChatTransport;
 interface CreateLoopbackTransportOptions {
   operatorName?: string;
   operatorReply?: (body: string) => string | null;
   replyDelayMs?: number;
 }
-declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
+export declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
 //#endregion
 //#region src/chat-widget.d.ts
 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,12 +173,12 @@ interface ChatWidgetProps {
   theme?: ChatWidgetTheme;
   widgetId: string;
 }
-declare function ChatWidget({ className, createTransport, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
-declare function ChatLauncher(): null;
-declare function ChatPanel(): null;
-declare function MessageComposer(): null;
-declare function PreChatForm(): null;
-declare function ConversationView(): null;
+export declare function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
+export declare function ChatLauncher(): null;
+export declare function ChatPanel(): null;
+export declare function MessageComposer(): null;
+export declare function PreChatForm(): null;
+export declare function ConversationView(): null;
 //#endregion
 //#region src/browser-mount.d.ts
 interface MountChatWidgetOptions$1 extends Omit<ChatWidgetProps, "getSession" | "widgetId"> {
@@ -206,16 +224,16 @@ interface CreateSessionFetcherOptions {
   fetchImpl?: typeof fetch;
   sessionUrl: string;
 }
-declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
+export declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
 //#endregion
 //#region src/index.d.ts
-type ChatWidgetMount = ChatWidgetMount$1;
-type MountChatWidgetOptions = MountChatWidgetOptions$1;
-type ScriptMountResult = ScriptMountResult$1;
-declare const autoMountChatWidgetScript: typeof autoMountChatWidgetScript$1;
-type CreateClivlyTransportOptions = CreateClivlyTransportOptions$1;
-declare const createClivlyTransport: typeof createClivlyTransport$1;
-declare const mountChatWidget: typeof mountChatWidget$1;
-declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
+export type ChatWidgetMount = ChatWidgetMount$1;
+export type MountChatWidgetOptions = MountChatWidgetOptions$1;
+export type ScriptMountResult = ScriptMountResult$1;
+export declare const autoMountChatWidgetScript: typeof autoMountChatWidgetScript$1;
+export type CreateClivlyTransportOptions = CreateClivlyTransportOptions$1;
+export declare const createClivlyTransport: typeof createClivlyTransport$1;
+export declare const mountChatWidget: typeof mountChatWidget$1;
+export declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
 //#endregion
-export { ChatLauncher, ChatPanel, type ChatTransportConnection, type ChatTransportHandlers, ChatWidget, ChatWidgetMount, type ChatWidgetProps, type ChatWidgetTheme, type ChatWidgetVisitor, ConversationView, type CreateChatTransport, type CreateChatTransportOptions, CreateClivlyTransportOptions, type CreateLoopbackTransportOptions, type CreateWebSocketTransportOptions, type GetSession, type GetSessionOptions, MessageComposer, MountChatWidgetOptions, PreChatForm, type ResolvedTheme, ScriptMountResult, type WidgetClientCreateMessageEvent, type WidgetClientEvent, type WidgetConfig, type WidgetContact, type WidgetConversation, type WidgetConversationSnapshotEvent, type WidgetErrorEvent, type WidgetMessage, type WidgetMessageAckEvent, type WidgetMessageCreatedEvent, type WidgetSenderType, type WidgetServerEvent, type WidgetSessionPayload, type WidgetSessionReadyEvent, type WidgetSummary, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript, resolveTheme };
+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 };