@clivly/chat-widget 0.5.0 → 0.7.1

package/README.md

@@ -190,14 +190,14 @@ The `browser` and `browser-mount` outputs are built as standalone entrypoints.
 ## Host-side pairing
 
 The host-side session handler is the bridge between a backend holding
-`CLIVLY_API_KEY` and the widget's `sessionUrl`. Import it from `clivly/sdk`,
+`CLIVLY_SECRET_KEY` and the widget's `sessionUrl`. Import it from `clivly/sdk`,
 which is available from the `clivly` package `clivly init` already installs:
 
 ```ts
 import { createChatSessionHandler } from "clivly/sdk";
 
 export const POST = createChatSessionHandler({
-  apiKey: process.env.CLIVLY_API_KEY,
+  apiKey: process.env.CLIVLY_SECRET_KEY ?? process.env.CLIVLY_API_KEY,
 });
 ```
 

package/dist/browser-mount.cjs

@@ -340,6 +340,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -537,16 +544,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -561,7 +570,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -584,7 +593,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,

package/dist/browser-mount.d.cts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -41,7 +40,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];

package/dist/browser-mount.d.mts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -41,7 +40,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];

package/dist/browser-mount.mjs

@@ -339,6 +339,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -536,16 +543,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -560,7 +569,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -583,7 +592,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,

package/dist/browser.cjs

@@ -340,6 +340,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -537,16 +544,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -561,7 +570,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -584,7 +593,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,

package/dist/browser.d.cts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -41,7 +40,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];

package/dist/browser.d.mts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -41,7 +40,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];

package/dist/browser.mjs

@@ -339,6 +339,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -536,16 +543,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -560,7 +569,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -583,7 +592,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,

package/dist/index.cjs

@@ -340,6 +340,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -537,16 +544,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -561,7 +570,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -584,7 +593,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,
@@ -820,7 +829,7 @@ function createLoopbackTransport({ operatorName = "Clivly", operatorReply = (bod
 						type: "message.ack",
 						clientMessageId: message.id,
 						message: {
-							author: session.contact.name,
+							author: session.contact?.name ?? "You",
 							body: message.body,
 							createdAt,
 							id: `${message.id}:server`,

package/dist/index.d.cts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties, ReactElement } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -25,10 +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;
+declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
 //#endregion
 //#region src/types.d.ts
 type WidgetSenderType = "visitor" | "operator" | "system";
@@ -58,7 +54,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];
@@ -129,21 +125,13 @@ interface CreateWebSocketTransportOptions {
   getProtocols?: (session: WidgetSessionPayload) => string | string[] | undefined;
   resolveUrl: (session: WidgetSessionPayload) => string;
 }
-declare function createWebSocketTransport({
-  createSocket,
-  getProtocols,
-  resolveUrl
-}: CreateWebSocketTransportOptions): CreateChatTransport;
+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;
+declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
 //#endregion
 //#region src/chat-widget.d.ts
 interface ChatWidgetProps {
@@ -167,17 +155,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, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
 declare function ChatLauncher(): null;
 declare function ChatPanel(): null;
 declare function MessageComposer(): null;
@@ -228,10 +206,7 @@ interface CreateSessionFetcherOptions {
   fetchImpl?: typeof fetch;
   sessionUrl: string;
 }
-declare function createSessionFetcher({
-  fetchImpl,
-  sessionUrl
-}: CreateSessionFetcherOptions): GetSession;
+declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
 //#endregion
 //#region src/index.d.ts
 type ChatWidgetMount = ChatWidgetMount$1;

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import { Root } from "react-dom/client";
 import { CSSProperties, ReactElement } from "react";
-
 //#region src/theme.d.ts
 /**
  * Theme resolution for the widget.
@@ -25,10 +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;
+declare function resolveTheme(theme: ChatWidgetTheme, { root, view }?: ResolveThemeOptions): ResolvedTheme;
 //#endregion
 //#region src/types.d.ts
 type WidgetSenderType = "visitor" | "operator" | "system";
@@ -58,7 +54,7 @@ interface WidgetMessage {
   senderType: WidgetSenderType;
 }
 interface WidgetSessionPayload {
-  contact: WidgetContact;
+  contact: WidgetContact | null;
   conversation: WidgetConversation;
   expiresAt: string;
   messages: WidgetMessage[];
@@ -129,21 +125,13 @@ interface CreateWebSocketTransportOptions {
   getProtocols?: (session: WidgetSessionPayload) => string | string[] | undefined;
   resolveUrl: (session: WidgetSessionPayload) => string;
 }
-declare function createWebSocketTransport({
-  createSocket,
-  getProtocols,
-  resolveUrl
-}: CreateWebSocketTransportOptions): CreateChatTransport;
+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;
+declare function createLoopbackTransport({ operatorName, operatorReply, replyDelayMs }?: CreateLoopbackTransportOptions): CreateChatTransport;
 //#endregion
 //#region src/chat-widget.d.ts
 interface ChatWidgetProps {
@@ -167,17 +155,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, getSession, initiallyOpen, launcherLabel, storage, style, theme, widgetId }: ChatWidgetProps): ReactElement;
 declare function ChatLauncher(): null;
 declare function ChatPanel(): null;
 declare function MessageComposer(): null;
@@ -228,10 +206,7 @@ interface CreateSessionFetcherOptions {
   fetchImpl?: typeof fetch;
   sessionUrl: string;
 }
-declare function createSessionFetcher({
-  fetchImpl,
-  sessionUrl
-}: CreateSessionFetcherOptions): GetSession;
+declare function createSessionFetcher({ fetchImpl, sessionUrl }: CreateSessionFetcherOptions): GetSession;
 //#endregion
 //#region src/index.d.ts
 type ChatWidgetMount = ChatWidgetMount$1;

package/dist/index.mjs

@@ -339,6 +339,13 @@ const WIDGET_STYLES = `
 }
 `;
 const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
+function sessionDisplayName(session) {
+	return session.contact?.name ?? "You";
+}
+function sessionSummaryText(session, fallback) {
+	if (!session) return fallback;
+	return session.contact ? `${session.contact.name} • ${session.contact.email}` : "Verified visitor";
+}
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -536,16 +543,18 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		setError(null);
 		setIsConnecting(true);
 		try {
+			const existingVisitorToken = storage?.getItem(createStorageKey(widgetId)) ?? null;
 			const nextSession = await getSession({
 				visitor,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: existingVisitorToken,
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
-			setError((sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.")).message);
+			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
+			setError(resolved.message);
 		} finally {
 			setIsConnecting(false);
 		}
@@ -560,7 +569,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
-			author: session.contact.name,
+			author: sessionDisplayName(session),
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
@@ -583,7 +592,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	};
 	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 = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
+	const sessionSummary = sessionSummaryText(session, greeting);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-theme": resolvedTheme,
@@ -819,7 +828,7 @@ function createLoopbackTransport({ operatorName = "Clivly", operatorReply = (bod
 						type: "message.ack",
 						clientMessageId: message.id,
 						message: {
-							author: session.contact.name,
+							author: session.contact?.name ?? "You",
 							body: message.body,
 							createdAt,
 							id: `${message.id}:server`,