@clivly/chat-widget 0.16.0 → 0.17.1

package/dist/browser.mjs

@@ -1,7 +1,7 @@
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/theme.ts
+// src/theme.ts
 const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 /** The attribute set by next-themes, daisyUI, and most `data-*` theme setups. */
 const THEME_ATTRIBUTE = "data-theme";
@@ -109,8 +109,88 @@ function parseTheme(value) {
 	if (value === "auto" || value === "dark" || value === "light") return value;
 	return "auto";
 }
-//#endregion
-//#region src/chat-widget.tsx
+// src/visitor-token-storage.ts
+/** Normalised the way the server matches contacts: trimmed, lower-case. */
+function normalizeVisitorEmail(email) {
+	return email.trim().toLowerCase();
+}
+const HASH_MODULUS = 4294967291;
+/**
+* A polynomial string hash, reduced mod a prime below 2^32: stable,
+* synchronous, and exact in doubles (every intermediate stays under 2^53).
+* Not a security primitive.
+*/
+function shortHash(value) {
+	let hash = 5381;
+	for (const char of value) hash = (hash * 33 + (char.codePointAt(0) ?? 0)) % HASH_MODULUS;
+	return hash.toString(16).padStart(8, "0");
+}
+function visitorTokenKey(widgetId, email) {
+	return `clivly-chat-widget:${widgetId}:visitor-token:${shortHash(normalizeVisitorEmail(email))}`;
+}
+/** The single per-widget key every widget before this change wrote. */
+function legacyVisitorTokenKey(widgetId) {
+	return `clivly-chat-widget:${widgetId}:visitor-token`;
+}
+/**
+* The token to offer for this person. Falls back to the legacy per-widget
+* token once, so visitors who chatted before this change still resume — the
+* server only honours it if they are the identity that thread belongs to.
+*/
+function readVisitorToken(storage, widgetId, email) {
+	if (!storage) return null;
+	try {
+		return storage.getItem(visitorTokenKey(widgetId, email)) ?? storage.getItem(legacyVisitorTokenKey(widgetId));
+	} catch {
+		return null;
+	}
+}
+/** Store this person's token and retire the legacy shared one. */
+function writeVisitorToken(storage, widgetId, email, token) {
+	if (!storage) return;
+	try {
+		storage.setItem(visitorTokenKey(widgetId, email), token);
+		storage.removeItem?.(legacyVisitorTokenKey(widgetId));
+	} catch {}
+}
+// src/widget-presentation-cache.ts
+function presentationKey(widgetId) {
+	return `clivly-chat-widget:${widgetId}:presentation`;
+}
+function isPresentation(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const candidate = value;
+	return typeof candidate.name === "string" && typeof candidate.config === "object" && candidate.config !== null && Array.isArray(candidate.topics);
+}
+function readPresentation(storage, widgetId) {
+	if (!storage) return null;
+	try {
+		const raw = storage.getItem(presentationKey(widgetId));
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		return isPresentation(parsed) ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+function presentationOf(session) {
+	return {
+		config: {
+			brandColor: session.widget.config.brandColor ?? null,
+			greeting: session.widget.config.greeting ?? null
+		},
+		name: session.widget.name,
+		supportState: session.support?.state ?? null,
+		topics: session.support?.topics ?? []
+	};
+}
+function writePresentation(storage, widgetId, presentation) {
+	if (!storage) return;
+	try {
+		storage.setItem(presentationKey(widgetId), JSON.stringify(presentation));
+	} catch {}
+}
+// src/chat-widget.tsx
 const DELIVERY_LABELS = {
 	failed: "Failed to send",
 	pending: "Sending…",
@@ -264,9 +344,9 @@ const WIDGET_STYLES = `
   border: 1px solid var(--clivly-chat-border);
   border-radius: 1rem;
   box-shadow: 0 24px 80px var(--clivly-chat-shadow);
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  height: min(44rem, 75vh);
+  display: flex;
+  flex-direction: column;
+  height: min(40rem, 75vh);
   overflow: hidden;
   position: absolute;
   right: 0;
@@ -283,20 +363,56 @@ const WIDGET_STYLES = `
 @media (width < 48rem) {
   .clivly-chat-widget__panel {
     bottom: 4rem;
-    height: min(44rem, calc(100dvh - 6.5rem));
+    height: min(40rem, calc(100dvh - 6.5rem));
+  }
+}
+/* On a phone a floating card leaves a strip of page above it and puts the
+   launcher over its own composer, so the panel becomes a full-screen sheet
+   instead — the close button in its header takes over from the launcher,
+   which is hidden while it is open. */
+@media (width < 30rem) {
+  .clivly-chat-widget__panel {
+    border: 0;
+    border-radius: 0;
+    bottom: 0;
+    height: 100dvh;
+    left: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-top: env(safe-area-inset-top);
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100vw;
+  }
+  .clivly-chat-widget[data-clivly-open] .clivly-chat-widget__launcher {
+    display: none;
   }
 }
 .clivly-chat-widget__header {
+  align-items: center;
   border-bottom: 1px solid var(--clivly-chat-border);
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 0.75rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
+}
+.clivly-chat-widget__heading {
+  min-width: 0;
 }
 .clivly-chat-widget__title {
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.clivly-chat-widget__header .clivly-chat-widget__subtitle {
+  margin-top: 0.125rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .clivly-chat-widget__subtitle {
   color: var(--clivly-chat-muted);
@@ -304,19 +420,50 @@ const WIDGET_STYLES = `
   margin: 0.25rem 0 0;
 }
 .clivly-chat-widget__close {
+  align-items: center;
   background: transparent;
   border: 0;
+  border-radius: 999px;
   color: var(--clivly-chat-muted);
   cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 2.25rem;
+  justify-content: center;
   padding: 0;
+  width: 2.25rem;
+}
+.clivly-chat-widget__close:hover,
+.clivly-chat-widget__close:focus-visible {
+  background: var(--clivly-chat-operator);
+  color: var(--clivly-chat-text);
+}
+.clivly-chat-widget__close:focus-visible {
+  outline: 2px solid var(--clivly-chat-accent);
+  outline-offset: 2px;
+}
+.clivly-chat-widget__close svg {
+  height: 1.25rem;
+  width: 1.25rem;
 }
 .clivly-chat-widget__body {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: 0.75rem;
+  min-height: 0;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 1rem;
 }
+.clivly-chat-widget__visually-hidden {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 .clivly-chat-widget__message {
   border-radius: 1rem;
   max-width: 85%;
@@ -394,6 +541,11 @@ const WIDGET_STYLES = `
 .clivly-chat-widget__powered a:focus-visible {
   text-decoration: underline;
 }
+.clivly-chat-widget__powered,
+.clivly-chat-widget__composer,
+.clivly-chat-widget__form {
+  flex: 0 0 auto;
+}
 .clivly-chat-widget__composer,
 .clivly-chat-widget__form {
   border-top: 1px solid var(--clivly-chat-border);
@@ -401,6 +553,62 @@ const WIDGET_STYLES = `
   gap: 0.75rem;
   padding: 1rem;
 }
+.clivly-chat-widget__composer {
+  gap: 0.375rem;
+  padding: 0.75rem;
+}
+/* With topics docked above it, the composer has no border of its own: the
+   strip and the field read as one input area. */
+.clivly-chat-widget__topics + .clivly-chat-widget__composer {
+  border-top: 0;
+}
+.clivly-chat-widget__composer-row {
+  align-items: flex-end;
+  display: flex;
+  gap: 0.5rem;
+}
+.clivly-chat-widget__composer-field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.clivly-chat-widget__composer .clivly-chat-widget__textarea {
+  line-height: 1.4;
+  max-height: 8rem;
+  min-height: 2.75rem;
+  overflow-y: auto;
+  padding: 0.625rem 0.75rem;
+  resize: none;
+}
+.clivly-chat-widget__send {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  height: 2.75rem;
+  justify-content: center;
+  padding: 0;
+  width: 2.75rem;
+}
+.clivly-chat-widget__send svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.clivly-chat-widget__composer .clivly-chat-widget__actions {
+  padding: 0 0.25rem;
+}
+.clivly-chat-widget__composer .clivly-chat-widget__subtitle {
+  font-size: 0.75rem;
+  margin: 0;
+}
+/* Once the conversation is ready the status has nothing to say to a sighted
+   visitor; it stays in the accessibility tree so the change is announced. */
+.clivly-chat-widget__actions[data-ready] {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 .clivly-chat-widget__field {
   display: grid;
   gap: 0.35rem;
@@ -481,13 +689,42 @@ const WIDGET_STYLES = `
   font-size: 0.6875rem;
   padding: 0 0.4rem;
 }
+/* Docked above the composer. Wide screens wrap up to about two rows and
+   scroll beyond that; narrow or touch screens get one sideways-scrolling row
+   whose right edge fades to show there is more. */
 .clivly-chat-widget__topics {
+  border-top: 1px solid var(--clivly-chat-border);
   display: flex;
+  flex: 0 0 auto;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
+  gap: 0.375rem;
   list-style: none;
+  margin: 0;
+  max-height: 5.25rem;
+  overflow-y: auto;
+  padding: 0.625rem 0.75rem 0;
+  scrollbar-width: thin;
+}
+.clivly-chat-widget__topics > li {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+@media (width < 48rem), (any-pointer: coarse) {
+  .clivly-chat-widget__topics {
+    flex-wrap: nowrap;
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
+    max-height: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-right: 1.5rem;
+    scroll-padding-left: 0.75rem;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+  }
+  .clivly-chat-widget__topics::-webkit-scrollbar {
+    display: none;
+  }
 }
 .clivly-chat-widget__topic {
   background: var(--clivly-chat-panel);
@@ -495,9 +732,11 @@ const WIDGET_STYLES = `
   border-radius: 999px;
   color: var(--clivly-chat-text);
   cursor: pointer;
-  font-size: 0.875rem;
-  min-height: 2.25rem;
-  padding: 0.4rem 0.85rem;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  min-height: 2rem;
+  padding: 0.375rem 0.75rem;
+  white-space: nowrap;
 }
 .clivly-chat-widget__topic:hover,
 .clivly-chat-widget__topic:focus-visible {
@@ -532,9 +771,6 @@ function createLocalMessage(message, delivery = "sent") {
 		delivery
 	};
 }
-function createStorageKey(widgetId) {
-	return `clivly-chat-widget:${widgetId}:visitor-token`;
-}
 function formatTimestamp(value) {
 	const date = new Date(value);
 	if (Number.isNaN(date.getTime())) return "";
@@ -576,15 +812,44 @@ function markMessageFailed(messages, clientMessageId) {
 function sortMessages(messages) {
 	return [...messages].sort((left, right) => left.createdAt.localeCompare(right.createdAt));
 }
-function useThemeStyle(session, style) {
+const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+/** Relative luminance above which white text stops being readable. */
+const LIGHT_ACCENT_LUMINANCE = .45;
+/**
+* Text colour for a button filled with `hex`: white on dark brands, near-black
+* on light ones, so a yellow or pastel brand colour does not leave the
+* launcher's icon and the Send label white-on-white. Null for anything that is
+* not a plain hex colour, which keeps the stylesheet's own contrast colour.
+*/
+function accentContrastFor(hex) {
+	if (!HEX_COLOR.test(hex)) return null;
+	const digits = hex.length === 4 ? [...hex.slice(1)].map((digit) => digit + digit).join("") : hex.slice(1);
+	const [red = 0, green = 0, blue = 0] = [
+		0,
+		2,
+		4
+	].map((offset) => {
+		const value = Number.parseInt(digits.slice(offset, offset + 2), 16) / 255;
+		return value <= .03928 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * red + .7152 * green + .0722 * blue > LIGHT_ACCENT_LUMINANCE ? "#111827" : "#ffffff";
+}
+/** The session's brand colour, or the remembered one until a session lands. */
+function brandColorOf(session, cached) {
+	if (session) return session.widget.config.brandColor ?? null;
+	return cached?.config.brandColor ?? null;
+}
+function useThemeStyle(brandColor, style) {
 	return useMemo(() => {
-		const brandColor = session?.widget.config.brandColor ?? null;
-		if (!brandColor) return style;
+		const hostSetsAccent = Boolean(style && "--clivly-chat-accent" in style);
+		if (!brandColor || hostSetsAccent) return style;
+		const contrast = accentContrastFor(brandColor);
 		return {
 			["--clivly-chat-accent"]: brandColor,
+			...contrast ? { ["--clivly-chat-accent-contrast"]: contrast } : {},
 			...style
 		};
-	}, [session?.widget.config.brandColor, style]);
+	}, [brandColor, style]);
 }
 /**
 * Track the theme the widget should paint.
@@ -658,12 +923,21 @@ function automationBadge(message) {
 * root's `data-clivly-launcher` (see WIDGET_STYLES); the label is always its
 * accessible name, and `aria-controls` names the panel only while it exists.
 */
-function Launcher({ label, onToggle, open, panelId }) {
+function Launcher({ label, onIntent, onToggle, open, panelId }) {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-controls": open ? panelId : void 0,
 		"aria-expanded": open,
 		className: "clivly-chat-widget__launcher",
 		onClick: onToggle,
+		onFocus: () => {
+			onIntent("likely");
+		},
+		onPointerDown: () => {
+			onIntent("certain");
+		},
+		onPointerEnter: (event) => {
+			if (event.pointerType === "mouse") onIntent("likely");
+		},
 		type: "button",
 		children: [/* @__PURE__ */ jsx(LauncherIcon, { open }), /* @__PURE__ */ jsx("span", {
 			className: "clivly-chat-widget__launcher-label",
@@ -808,9 +1082,14 @@ function composerStatusText(hasTransport, isReady, reconnecting) {
 	return reconnecting ? "Reconnecting…" : "Connecting…";
 }
 /**
-* Guided options under the greeting. Native buttons in a labelled group, so
-* they are reachable with Tab and operable with Enter/Space; free text stays
-* available beside them the whole time.
+* Guided options, docked above the composer rather than inside the transcript.
+* In the transcript they sat below the greeting and the scroll-to-newest
+* pinned them there, so on a phone six wrapped chips pushed the greeting and
+* the answer above the fold. Docked, they are one compact strip (scrolling
+* sideways on narrow screens) and the conversation keeps the space.
+*
+* Native buttons in a labelled group, so they are reachable with Tab and
+* operable with Enter/Space; free text stays available beside them.
 */
 function SupportTopics({ disabled, onSelect, topics }) {
 	return /* @__PURE__ */ jsx("ul", {
@@ -827,9 +1106,64 @@ function SupportTopics({ disabled, onSelect, topics }) {
 		}) }, topic.id))
 	});
 }
-/** Topics are offered only while automation is answering this conversation. */
-function visibleTopics(session, state) {
-	return state === "automated" ? session?.support?.topics ?? [] : [];
+/**
+* Topics are offered only while automation is answering this conversation.
+* Before the session lands, the remembered presentation stands in so the
+* strip is there on the first frame; it shows only if this browser last saw
+* them offered, so a visitor already talking to a person does not see them
+* flash up and vanish.
+*/
+function visibleTopics(session, state, cached) {
+	if (session) return state === "automated" ? session.support?.topics ?? [] : [];
+	return cached?.supportState === "automated" ? cached.topics : [];
+}
+/**
+* What the open panel shows, derived from the session or — before it lands —
+* from the host's identity and the remembered presentation.
+*
+* A host-identified visitor never sees the form: while their session loads the
+* panel already shows the conversation shell — title, topics and a composer
+* they can type into — so opening the widget is not a blank wait. A failed
+* bootstrap sets `error` and falls back to the form, the recoverable state.
+*/
+function panelView({ cachedPresentation, defaultVisitor, error, session, supportState }) {
+	const awaitingHostSession = !session && isCompleteVisitor(defaultVisitor) && !error;
+	const showComposer = Boolean(session) || awaitingHostSession;
+	const greeting = session?.widget.config.greeting ?? cachedPresentation?.config.greeting ?? "Tell us a little about yourself and we’ll pick up the conversation from there.";
+	return {
+		awaitingHostSession,
+		greeting,
+		panelTitle: session?.widget.name ?? cachedPresentation?.name ?? "Start a conversation",
+		sessionSummary: awaitingHostSession && defaultVisitor ? `${defaultVisitor.name?.trim()} • ${defaultVisitor.email?.trim()}` : sessionSummaryText(session, greeting),
+		showComposer,
+		topics: showComposer ? visibleTopics(session, supportState, cachedPresentation) : []
+	};
+}
+/**
+* Who to start a session for ahead of the click, or null to wait for it. Only
+* a host-identified visitor; and on a mere hover or focus only one with a
+* stored thread to resume.
+*/
+function prefetchIdentity(intent, { defaultVisitor, settled }, storedToken) {
+	if (settled || !isCompleteVisitor(defaultVisitor)) return null;
+	const identity = {
+		email: defaultVisitor.email.trim(),
+		name: defaultVisitor.name.trim()
+	};
+	if (intent === "likely" && !storedToken(identity.email)) return null;
+	return identity;
+}
+function startSessionQuietly(startSession, identity) {
+	if (!identity) return;
+	startSession(identity, "host").catch(() => {});
+}
+/** The composer grows with its text up to this height, then scrolls. */
+const COMPOSER_MAX_HEIGHT_PX = 128;
+/** Size a textarea to its content, between its CSS min-height and the cap. */
+function fitTextarea(textarea) {
+	if (!textarea) return;
+	textarea.style.height = "auto";
+	textarea.style.height = `${Math.min(textarea.scrollHeight, COMPOSER_MAX_HEIGHT_PX)}px`;
 }
 function composerPlaceholder(hasTopics) {
 	return hasTopics ? "Or type your question" : "Write your message";
@@ -960,6 +1294,33 @@ function useLiveConnection({ actions, createTransport, refreshSession, session,
 	}, [createTransport, session]);
 	return reconnecting;
 }
+/** Who the host says is signed in: their normalised email, or null. */
+function hostIdentityOf(defaultVisitor) {
+	return isCompleteVisitor(defaultVisitor) ? normalizeVisitorEmail(defaultVisitor.email) : null;
+}
+/**
+* The host's signed-in visitor changed under an open session — a sign-out, or
+* a different account signing in without a page reload. The session on
+* screen is the previous person's: drop it, its transcript and its socket, so
+* the next open starts as whoever is signed in now (chat widget session
+* review 2026-10-28, S1). A session the visitor started from the pre-chat
+* form is theirs and is left alone.
+*/
+function useResetOnHostIdentityChange({ generationRef, hostIdentity, identityRef, reset, sessionSourceRef }) {
+	const resetRef = useRef(reset);
+	useEffect(() => {
+		resetRef.current = reset;
+	});
+	useEffect(() => {
+		const current = identityRef.current;
+		if (!(current && sessionSourceRef.current === "host")) return;
+		if (hostIdentity === normalizeVisitorEmail(current.email)) return;
+		generationRef.current += 1;
+		identityRef.current = null;
+		sessionSourceRef.current = null;
+		resetRef.current();
+	}, [hostIdentity]);
+}
 function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen = false, launcher = "auto", launcherLabel = "Chat with us", placement = "bottom-right", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
 	const [isOpen, setIsOpen] = useState(initiallyOpen);
 	const panelId = useId();
@@ -971,19 +1332,32 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 	const [session, setSession] = useState(null);
 	const [supportState, setSupportState] = useState(null);
 	const [assistantThinking, setAssistantThinking] = useState(false);
+	const [cachedPresentation, setCachedPresentation] = useState(null);
+	useEffect(() => {
+		setCachedPresentation(readPresentation(storage, widgetId));
+	}, [storage, widgetId]);
 	const [visitor, setVisitor] = useState({
 		email: defaultVisitor?.email ?? "",
 		name: defaultVisitor?.name ?? ""
 	});
 	const transportRef = useRef(null);
 	const listRef = useRef(null);
+	const composerRef = useRef(null);
+	useEffect(() => {
+		fitTextarea(composerRef.current);
+	}, [messageDraft]);
 	const identityRef = useRef(null);
+	const sessionSourceRef = useRef(null);
+	const generationRef = useRef(0);
+	const hostIdentity = hostIdentityOf(defaultVisitor);
+	const latestHostIdentityRef = useRef(hostIdentity);
+	latestHostIdentityRef.current = hostIdentity;
 	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 showWaitingNotice = useWaitingNotice(messages);
-	const themeStyle = useThemeStyle(session, style);
+	const themeStyle = useThemeStyle(brandColorOf(session, cachedPresentation), style);
 	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
 		transportRef.current?.close();
@@ -1004,12 +1378,15 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		refreshSession: async (current) => {
 			const identity = identityRef.current;
 			if (!identity) throw new Error("No visitor to reconnect as.");
+			const generation = generationRef.current;
 			const next = await getSession({
 				visitor: identity,
 				visitorToken: current.visitorToken,
 				widgetId
 			});
-			storage?.setItem(createStorageKey(widgetId), next.visitorToken);
+			if (generation !== generationRef.current) return;
+			writeVisitorToken(storage, widgetId, identity.email, next.visitorToken);
+			writePresentation(storage, widgetId, presentationOf(next));
 			setSupportState(next.support?.state ?? null);
 			setSession(next);
 		},
@@ -1034,31 +1411,54 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		isReady,
 		messages
 	]);
-	const startSession = useCallback(async (identity) => {
+	const startSession = useCallback(async (identity, source = "form") => {
 		setError(null);
 		setIsConnecting(true);
+		const generation = generationRef.current;
+		const isStale = () => generation !== generationRef.current || source === "host" && normalizeVisitorEmail(identity.email) !== latestHostIdentityRef.current;
 		try {
 			const nextSession = await getSession({
 				visitor: identity,
-				visitorToken: storage?.getItem(createStorageKey(widgetId)) ?? null,
+				visitorToken: readVisitorToken(storage, widgetId, identity.email),
 				widgetId
 			});
-			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
+			if (isStale()) return;
+			writeVisitorToken(storage, widgetId, identity.email, nextSession.visitorToken);
+			writePresentation(storage, widgetId, presentationOf(nextSession));
 			identityRef.current = identity;
+			sessionSourceRef.current = source;
 			setSupportState(nextSession.support?.state ?? null);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
+			if (isStale()) return;
 			const resolved = sessionError instanceof Error ? sessionError : /* @__PURE__ */ new Error("Failed to start the conversation.");
 			setError(resolved.message);
 		} finally {
-			setIsConnecting(false);
+			if (generation === generationRef.current) setIsConnecting(false);
 		}
 	}, [
 		getSession,
 		storage,
 		widgetId
 	]);
+	useResetOnHostIdentityChange({
+		generationRef,
+		hostIdentity,
+		identityRef,
+		reset: () => {
+			setSession(null);
+			setMessages([]);
+			setSupportState(null);
+			setError(null);
+			setIsConnecting(false);
+			setVisitor({
+				email: defaultVisitor?.email ?? "",
+				name: defaultVisitor?.name ?? ""
+			});
+		},
+		sessionSourceRef
+	});
 	const submitVisitor = async (event) => {
 		event.preventDefault();
 		await startSession(visitor);
@@ -1069,7 +1469,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		startSession({
 			email: defaultVisitor.email.trim(),
 			name: defaultVisitor.name.trim()
-		}).catch(() => {});
+		}, "host").catch(() => {});
 	}, [
 		defaultVisitor,
 		error,
@@ -1078,6 +1478,13 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		session,
 		startSession
 	]);
+	const prefetchSession = (intent) => {
+		const identity = prefetchIdentity(intent, {
+			defaultVisitor,
+			settled: isOpen || Boolean(session) || isConnecting || Boolean(error)
+		}, (email) => readVisitorToken(storage, widgetId, email));
+		startSessionQuietly(startSession, identity);
+	};
 	/**
 	* Show the visitor's message at once and hand it to the transport. A topic
 	* click goes as `topic.select` when the transport supports it, so the
@@ -1116,13 +1523,17 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		sendVisitorMessage(body);
 	};
 	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);
-	const topics = visibleTopics(session, supportState);
+	const { awaitingHostSession, greeting, panelTitle, sessionSummary, showComposer, topics } = panelView({
+		cachedPresentation,
+		defaultVisitor,
+		error,
+		session,
+		supportState
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
 		"data-clivly-launcher": launcher,
+		"data-clivly-open": isOpen || void 0,
 		"data-clivly-placement": placement,
 		"data-clivly-theme": resolvedTheme,
 		style: themeStyle,
@@ -1130,6 +1541,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 			/* @__PURE__ */ jsx("style", { children: WIDGET_STYLES }),
 			/* @__PURE__ */ jsx(Launcher, {
 				label: launcherLabel,
+				onIntent: prefetchSession,
 				onToggle: () => {
 					setIsOpen((open) => !open);
 				},
@@ -1143,23 +1555,36 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 				children: [
 					/* @__PURE__ */ jsxs("header", {
 						className: "clivly-chat-widget__header",
-						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
-							className: "clivly-chat-widget__title",
-							children: panelTitle
-						}), /* @__PURE__ */ jsx("p", {
-							className: "clivly-chat-widget__subtitle",
-							children: sessionSummary
-						})] }), /* @__PURE__ */ jsx("button", {
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "clivly-chat-widget__heading",
+							children: [/* @__PURE__ */ jsx("h2", {
+								className: "clivly-chat-widget__title",
+								children: panelTitle
+							}), /* @__PURE__ */ jsx("p", {
+								className: "clivly-chat-widget__subtitle",
+								children: sessionSummary
+							})]
+						}), /* @__PURE__ */ jsx("button", {
 							"aria-label": "Close chat",
 							className: "clivly-chat-widget__close",
 							onClick: () => {
 								setIsOpen(false);
 							},
 							type: "button",
-							children: "Close"
+							children: /* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								fill: "none",
+								focusable: "false",
+								stroke: "currentColor",
+								strokeLinecap: "round",
+								strokeWidth: 2,
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+							})
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
+						"aria-busy": awaitingHostSession,
 						"aria-label": "Conversation",
 						className: "clivly-chat-widget__body",
 						ref: listRef,
@@ -1174,13 +1599,6 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 								hasSession: Boolean(session),
 								messages
 							}),
-							topics.length > 0 ? /* @__PURE__ */ jsx(SupportTopics, {
-								disabled: !canSend,
-								onSelect: (topic) => {
-									sendVisitorMessage(topic.label, topic);
-								},
-								topics
-							}) : null,
 							session ? /* @__PURE__ */ jsx(StatusNotice, {
 								assistantThinking,
 								email: session.contact?.email,
@@ -1188,39 +1606,63 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 							}) : null
 						]
 					}),
-					session ? /* @__PURE__ */ jsxs("form", {
+					topics.length > 0 ? /* @__PURE__ */ jsx(SupportTopics, {
+						disabled: !canSend,
+						onSelect: (topic) => {
+							sendVisitorMessage(topic.label, topic);
+						},
+						topics
+					}) : null,
+					showComposer ? /* @__PURE__ */ jsxs("form", {
 						className: "clivly-chat-widget__composer",
 						onSubmit: submitMessage,
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "clivly-chat-widget__field",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "clivly-chat-widget__label",
-								children: "Message"
-							}), /* @__PURE__ */ jsx("textarea", {
-								className: "clivly-chat-widget__textarea",
-								onChange: (event) => {
-									setMessageDraft(event.target.value);
-								},
-								onKeyDown: (event) => {
-									if (!isSendKey(event)) return;
-									event.preventDefault();
-									if (messageDraft.trim() && canSend) submitMessage();
-								},
-								placeholder: composerPlaceholder(topics.length > 0),
-								value: messageDraft
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "clivly-chat-widget__composer-row",
+							children: [/* @__PURE__ */ jsxs("label", {
+								className: "clivly-chat-widget__field clivly-chat-widget__composer-field",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "clivly-chat-widget__label clivly-chat-widget__visually-hidden",
+									children: "Message"
+								}), /* @__PURE__ */ jsx("textarea", {
+									className: "clivly-chat-widget__textarea",
+									onChange: (event) => {
+										setMessageDraft(event.target.value);
+									},
+									onKeyDown: (event) => {
+										if (!isSendKey(event)) return;
+										event.preventDefault();
+										if (messageDraft.trim() && canSend) submitMessage();
+									},
+									placeholder: composerPlaceholder(topics.length > 0),
+									ref: composerRef,
+									rows: 1,
+									value: messageDraft
+								})]
+							}), /* @__PURE__ */ jsx("button", {
+								"aria-label": "Send",
+								className: "clivly-chat-widget__button clivly-chat-widget__send",
+								disabled: !(messageDraft.trim() && canSend),
+								type: "submit",
+								children: /* @__PURE__ */ jsx("svg", {
+									"aria-hidden": "true",
+									fill: "none",
+									focusable: "false",
+									stroke: "currentColor",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })
+								})
 							})]
-						}), /* @__PURE__ */ jsxs("div", {
+						}), /* @__PURE__ */ jsx("div", {
 							className: "clivly-chat-widget__actions",
-							children: [/* @__PURE__ */ jsx("span", {
+							"data-ready": canSend || void 0,
+							children: /* @__PURE__ */ jsx("span", {
 								"aria-live": "polite",
 								className: "clivly-chat-widget__subtitle",
 								children: composerStatusText(Boolean(createTransport), isReady, reconnecting)
-							}), /* @__PURE__ */ jsx("button", {
-								className: "clivly-chat-widget__button",
-								disabled: !(messageDraft.trim() && canSend),
-								type: "submit",
-								children: "Send"
-							})]
+							})
 						})]
 					}) : /* @__PURE__ */ jsxs("form", {
 						className: "clivly-chat-widget__form",
@@ -1298,8 +1740,7 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		]
 	});
 }
-//#endregion
-//#region src/transport.ts
+// src/transport.ts
 function isServerEvent(value) {
 	if (typeof value !== "object" || value === null) return false;
 	return typeof value.type === "string";
@@ -1344,8 +1785,7 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 		};
 	};
 }
-//#endregion
-//#region src/clivly-transport.ts
+// src/clivly-transport.ts
 /**
 * The transport a host app should use against a real Clivly backend.
 *
@@ -1362,8 +1802,7 @@ function createClivlyTransport(options = {}) {
 		}
 	});
 }
-//#endregion
-//#region src/layout.ts
+// src/layout.ts
 const PLACEMENTS = [
 	"bottom-left",
 	"bottom-right",
@@ -1382,8 +1821,7 @@ function parsePlacement(value) {
 function parseLauncher(value) {
 	return LAUNCHERS.find((launcher) => launcher === value) ?? "auto";
 }
-//#endregion
-//#region src/session.ts
+// src/session.ts
 function isWidgetSessionPayload(value) {
 	return typeof value === "object" && value !== null;
 }
@@ -1405,8 +1843,7 @@ function createSessionFetcher({ fetchImpl = fetch, sessionUrl }) {
 		return data;
 	};
 }
-//#endregion
-//#region src/browser-mount.tsx
+// src/browser-mount.tsx
 const MOUNTED_DATA_ATTR = "clivlyMounted";
 /**
 * The identity a script-tag host already knows, read off the tag.
@@ -1498,11 +1935,9 @@ function autoMountChatWidgetScript$1(script = document.currentScript) {
 	if (!script || scriptAlreadyMounted(script)) return null;
 	return mountChatWidgetScript$1(script);
 }
-//#endregion
-//#region src/browser.tsx
+// src/browser.tsx
 const mountChatWidget = mountChatWidget$1;
 const mountChatWidgetScript = mountChatWidgetScript$1;
 const autoMountChatWidgetScript = autoMountChatWidgetScript$1;
 if (typeof document !== "undefined") autoMountChatWidgetScript();
-//#endregion
 export { autoMountChatWidgetScript, mountChatWidget, mountChatWidgetScript };