@sunboard/react 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -3,7 +3,6 @@
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
-import { flushSync } from "react-dom";
 //#region src/debug.ts
 const noLog = () => {};
 function consoleLogger() {
@@ -194,7 +193,9 @@ const defaultTheme = createTheme("Default", {
 const defaultComponentSettings = {
 	launcher: {
 		showBranding: true,
-		supportUrl: null
+		supportUrl: null,
+		talkToPerson: false,
+		replyTime: "We reply within a few hours."
 	},
 	tour: {
 		showStepCount: true,
@@ -220,7 +221,6 @@ const enLabels = {
 		cancel: "Cancel",
 		send: "Send",
 		latest: "Latest",
-		sourcesCount: (count) => `${count} ${count === 1 ? "source" : "sources"}`,
 		greeting: (name) => name ? `Hey ${name},` : "Hey there,",
 		guideClosing: "I put together a guide for you that walks you through it.",
 		tourFinishedAsk: "Tour finished, how was your experience?",
@@ -228,7 +228,7 @@ const enLabels = {
 		rateTour: "Rate this tour",
 		stars: (count) => `${count} ${count === 1 ? "star" : "stars"}`,
 		ratingThanks: "Thanks for the feedback.",
-		conversation: "Conversation",
+		thread: "Conversation",
 		writingStatus: "Writing an answer",
 		stages: {
 			searching: (product) => `Searching the ${product} help docs`,
@@ -236,7 +236,6 @@ const enLabels = {
 			checking: "Checking it against the docs",
 			slow: "Taking a little longer than usual"
 		},
-		sources: "Sources",
 		commonQuestions: "Common questions",
 		showMeHow: "Show me how",
 		newTab: "(opens in a new tab)",
@@ -249,11 +248,39 @@ const enLabels = {
 		lostBody: "Check your connection and try again.",
 		tryAgain: "Try again",
 		notCovered: (product) => `The ${product} help docs don't cover this yet.`,
-		coveredBy: (article, heading) => heading ? `The section "${heading}" of the article "${article}" covers this.` : `The article "${article}" covers this.`,
-		guideFound: "There is a guide for this.",
 		closeAria: "Close help",
 		poweredBy: "Powered by"
 	},
+	support: {
+		talkToPerson: "Talk to a person",
+		title: (company) => `${company} support`,
+		back: "Back",
+		talking: (company) => `Talking to ${company} support`,
+		greeting: (name) => `Hey ${name ?? "there"}, what can we help you with?`,
+		from: (company) => `${company} support`,
+		boxLabel: (company) => `Write to ${company} support`,
+		placeholder: (company) => `Write to ${company} support…`,
+		teamMessage: (who, company, time) => [
+			who,
+			`${company} support`,
+			time
+		].filter(Boolean).join(" · "),
+		asked: (question) => `Asked the assistant: ${question}`,
+		closed: (company) => `${company} support closed this conversation`,
+		reopen: "Write again to reopen it.",
+		conversationWith: (company) => `Conversation with ${company} support`,
+		replied: (who) => `${who} replied`,
+		waiting: "Waiting for a reply",
+		newReply: "New reply",
+		openAriaNewReply: "Open help, new reply",
+		past: "Past conversations",
+		closedWhen: (when, who) => who ? `Closed ${when} · ${who}` : `Closed ${when}`,
+		ago: (days) => days < 1 ? "today" : days < 2 ? "yesterday" : days < 14 ? `${days} days ago` : days < 60 ? `${Math.round(days / 7)} weeks ago` : `${Math.round(days / 30)} months ago`,
+		tooMany: "Too many messages this hour",
+		writeAgainIn: (minutes) => `You can write again in about ${minutes} ${minutes === 1 ? "minute" : "minutes"}.`,
+		lost: "Could not send your message",
+		lostBody: "Check your connection and try again."
+	},
 	tour: {
 		back: "Back",
 		next: "Next",
@@ -283,6 +310,10 @@ function withLabels(overrides) {
 			...enLabels.launcher,
 			...overrides.launcher
 		},
+		support: {
+			...enLabels.support,
+			...overrides.support
+		},
 		tour: {
 			...enLabels.tour,
 			...overrides.tour
@@ -382,6 +413,8 @@ const TOUR_RATINGS = [
 	4,
 	5
 ];
+/** One home for the cap, so the composer and the route agree on it. */
+const CONVERSATION_MESSAGE_MAX_LENGTH = 4e3;
 //#endregion
 //#region src/active-tour.ts
 const STORAGE_KEY = "sunboard:active-tour";
@@ -418,7 +451,7 @@ function stepInRange(guides, key, stepIndex) {
 const PREFIX = "sunboard:bootstrap:";
 /** Past this, content the server has since changed is likelier than not. */
 const MAX_AGE_MS = 6048e5;
-const VERSION = 4;
+const VERSION = 5;
 function readCachedBootstrap(key) {
 	if (typeof window === "undefined") return null;
 	try {
@@ -1355,15 +1388,221 @@ function useThemeMode(setting) {
 	return setting === "auto" ? detected : setting;
 }
 //#endregion
+//#region src/memory-support.ts
+let counter = 0;
+const nextId = (kind) => `memory-${kind}-${++counter}`;
+var MemorySupport = class {
+	script;
+	starts = [];
+	sent = [];
+	reads = [];
+	polls = 0;
+	views = 0;
+	conversations;
+	constructor(script) {
+		this.script = script;
+		this.conversations = (script.conversations ?? []).map(stored);
+	}
+	conversationPoll() {
+		this.polls += 1;
+		const open = this.open();
+		return Promise.resolve({
+			open: open ? summary(open) : null,
+			hasPast: this.conversations.some((conversation) => conversation.view.closed)
+		});
+	}
+	conversation(id, after) {
+		this.views += 1;
+		const found = this.find(id);
+		if (!found) return Promise.resolve(null);
+		const view = structuredClone(found.view);
+		const at = after === void 0 ? -1 : view.messages.findIndex((message) => message.id === after);
+		return Promise.resolve({
+			...view,
+			messages: view.messages.slice(at + 1)
+		});
+	}
+	startConversation(start) {
+		this.starts.push(start);
+		if (this.script.refuse) return Promise.resolve({ refused: this.script.refuse });
+		let conversation = this.open();
+		if (!conversation) {
+			conversation = stored({ messages: [] });
+			this.conversations.unshift(conversation);
+		}
+		return Promise.resolve(this.write(conversation, start.text));
+	}
+	sendMessage(id, text) {
+		this.sent.push({
+			id,
+			text
+		});
+		if (this.script.refuse) return Promise.resolve({ refused: this.script.refuse });
+		const conversation = this.find(id);
+		if (!conversation) return Promise.resolve({ refused: "lost" });
+		return Promise.resolve(this.write(conversation, text));
+	}
+	markRead(id) {
+		this.reads.push(id);
+		const conversation = this.find(id);
+		if (conversation) conversation.unread = false;
+		return Promise.resolve();
+	}
+	pastConversations() {
+		const closed = this.conversations.filter((conversation) => conversation.view.closed).sort((a, b) => (b.view.closedAt ?? "").localeCompare(a.view.closedAt ?? ""));
+		return Promise.resolve(closed.map((conversation) => ({
+			id: conversation.view.id,
+			title: conversation.view.messages.find((message) => message.by === "END_USER")?.text ?? "",
+			closedAt: conversation.view.closedAt,
+			closedBy: conversation.closedBy
+		})));
+	}
+	/** The team writes into the open conversation. */
+	teamReplies(text, who) {
+		const conversation = this.open();
+		if (!conversation) return;
+		conversation.view.messages.push(message("TEAM", text, who));
+		conversation.view.status = "PENDING";
+		conversation.unread = true;
+	}
+	/** The team closes the open conversation. */
+	teamCloses(who) {
+		const conversation = this.open();
+		if (!conversation) return;
+		conversation.view.status = "CLOSED";
+		conversation.view.closed = true;
+		conversation.view.closedAt = (/* @__PURE__ */ new Date()).toISOString();
+		conversation.closedBy = who;
+	}
+	write(conversation, text) {
+		const sent = message("END_USER", text);
+		const first = conversation.view.messages.length === 0;
+		conversation.view.messages.push(sent);
+		conversation.view.status = "OPEN";
+		conversation.view.closed = false;
+		conversation.view.closedAt = null;
+		conversation.closedBy = null;
+		const { reply } = this.script;
+		if (first && reply) setTimeout(() => this.teamReplies(reply.text, reply.who), reply.afterMs);
+		return {
+			summary: {
+				...summary(conversation),
+				unread: false
+			},
+			message: sent
+		};
+	}
+	open() {
+		return this.conversations.find((conversation) => !conversation.view.closed);
+	}
+	find(id) {
+		return this.conversations.find((conversation) => conversation.view.id === id);
+	}
+};
+function message(by, text, who) {
+	return {
+		id: nextId("message"),
+		by,
+		who: who ?? null,
+		text,
+		sentAt: (/* @__PURE__ */ new Date()).toISOString()
+	};
+}
+function folded(questions) {
+	return (questions ?? []).map((question) => ({
+		...question,
+		id: nextId("question"),
+		outcome: "ANSWERED"
+	}));
+}
+function stored(script) {
+	const messages = script.messages.map((scripted) => ({
+		id: nextId("message"),
+		by: scripted.by,
+		who: scripted.who ?? null,
+		text: scripted.text,
+		sentAt: scripted.sentAt
+	}));
+	const closed = script.closedAt !== void 0;
+	return {
+		view: {
+			id: nextId("conversation"),
+			status: closed ? "CLOSED" : messages.at(-1)?.by === "TEAM" ? "PENDING" : "OPEN",
+			startedAt: messages[0]?.sentAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+			closedAt: script.closedAt ?? null,
+			closed,
+			messages,
+			before: folded(script.before),
+			during: folded(script.during)
+		},
+		unread: script.unread ?? false,
+		closedBy: script.closedBy ?? null
+	};
+}
+function summary({ view, unread }) {
+	const last = view.messages.at(-1);
+	return {
+		id: view.id,
+		status: view.status,
+		lastMessageAt: last?.sentAt ?? view.startedAt,
+		lastMessageBy: last?.by ?? "END_USER",
+		lastMessageText: last?.text ?? "",
+		lastMessageWho: last?.by === "TEAM" ? last.who ?? null : null,
+		unread
+	};
+}
+//#endregion
+//#region src/user-token.ts
+const NOT_A_TOKEN = "Sunboard: userToken is not a user token. Make it on your server with your project's identity secret.";
+function decodeSegment(segment) {
+	const base64 = segment.replace(/-/g, "+").replace(/_/g, "/");
+	const bytes = Uint8Array.from(atob(base64), (char) => char.charCodeAt(0));
+	return JSON.parse(new TextDecoder().decode(bytes));
+}
+/**
+* Reads the token's claims without checking its signature, which only the runtime can do. Throws
+* on anything that is not a token with a subject.
+*/
+function readUserToken(token) {
+	const [, body, signature, extra] = token.split(".");
+	if (body === void 0 || signature === void 0 || extra !== void 0) throw new Error(NOT_A_TOKEN);
+	let payload;
+	try {
+		payload = decodeSegment(body);
+	} catch {
+		throw new Error(NOT_A_TOKEN);
+	}
+	if (typeof payload !== "object" || payload === null) throw new Error(NOT_A_TOKEN);
+	const sub = "sub" in payload ? payload.sub : void 0;
+	const name = "name" in payload ? payload.name : void 0;
+	if (typeof sub !== "string" || sub === "") throw new Error(NOT_A_TOKEN);
+	return typeof name === "string" ? {
+		sub,
+		name
+	} : { sub };
+}
+//#endregion
 //#region src/transport.ts
 /** Long enough for a slow model, short enough that nobody stares at nothing. */
 const ASK_TIMEOUT_MS = 3e4;
-let memoryConversations = 0;
+let memoryThreads = 0;
 const STAGES$1 = [
 	"searching",
 	"writing",
 	"checking"
 ];
+/** Sunboard switched off: what a connection whose token cannot be read gets, so the host's page stays up. */
+function offTransport() {
+	const nothing = () => Promise.resolve();
+	return {
+		bootstrap: () => Promise.resolve({ off: true }),
+		mutate: nothing,
+		reportAnchorMiss: nothing,
+		reportAnchorFound: nothing,
+		stepCheck: nothing,
+		recordEvents: nothing
+	};
+}
 var MemoryTransport = class {
 	data;
 	misses = [];
@@ -1377,10 +1616,12 @@ var MemoryTransport = class {
 	user;
 	ask;
 	reportPage;
+	support;
 	constructor(data, options) {
 		this.data = data;
 		this.cacheKey = options?.cacheKey;
 		this.user = options?.user;
+		if (options?.support) this.support = new MemorySupport(options.support);
 		if (options?.census) this.reportPage = (report) => {
 			this.pages.push(report);
 			return Promise.resolve();
@@ -1388,7 +1629,7 @@ var MemoryTransport = class {
 		const script = options?.ask;
 		if (!script) return;
 		const gapMs = options?.gapMs ?? 0;
-		const conversationId = `memory-conversation-${++memoryConversations}`;
+		const threadId = `memory-thread-${++memoryThreads}`;
 		this.ask = async (asked, signal, onStage) => {
 			this.questions.push(asked);
 			const scripted = script(asked);
@@ -1409,8 +1650,8 @@ var MemoryTransport = class {
 				kind: "answer",
 				reply: {
 					...scripted.reply,
-					conversationId: scripted.reply.conversationId ?? conversationId,
-					firstTurn: scripted.reply.firstTurn ?? asked.conversationId === void 0
+					threadId: scripted.reply.threadId ?? threadId,
+					firstTurn: scripted.reply.firstTurn ?? asked.threadId === void 0
 				}
 			};
 		};
@@ -1521,89 +1762,114 @@ var HttpTransport = class {
 	previewKey;
 	cacheKey;
 	user;
+	support;
 	constructor(config) {
 		this.config = config;
+		const { sub, name } = readUserToken(config.userToken);
 		this.baseUrl = config.baseUrl ?? "https://api.sunboardhq.com";
-		this.user = config.user;
+		this.user = name === void 0 ? {} : { firstName: name };
 		this.previewKey = config.previewKey ?? storedPreviewKey();
-		this.cacheKey = this.previewKey ? void 0 : `${config.publishableKey}:${config.userId}`;
+		this.cacheKey = this.previewKey ? void 0 : `${config.publishableKey}:${sub}`;
+		this.support = {
+			conversationPoll: () => this.getJson("/runtime/conversation"),
+			conversation: async (id, after) => {
+				const response = await this.send(`/runtime/conversation/${encodeURIComponent(id)}?${this.identity(after ? { after } : {})}`);
+				if (response.status === 404) return null;
+				return await ok(response, "/runtime/conversation/:id").json();
+			},
+			startConversation: ({ threadId, path, text }) => this.write("/runtime/conversation", {
+				threadId,
+				path,
+				text
+			}),
+			sendMessage: (id, text) => this.write(`/runtime/conversation/${encodeURIComponent(id)}/messages`, { text }),
+			markRead: async (id) => {
+				await this.post(`/runtime/conversation/${encodeURIComponent(id)}/read`, {});
+			},
+			pastConversations: () => this.getJson("/runtime/conversations")
+		};
 	}
-	headers() {
+	identity(extra = {}) {
+		return new URLSearchParams({
+			userToken: this.config.userToken,
+			...extra
+		}).toString();
+	}
+	signed(body) {
 		return {
-			"content-type": "application/json",
-			"x-sunboard-key": this.config.publishableKey,
-			...this.previewKey ? { "x-sunboard-preview-key": this.previewKey } : {}
+			...body,
+			userToken: this.config.userToken
 		};
 	}
-	async request(path, init) {
-		const response = await fetch(`${this.baseUrl}${path}`, {
+	send(path, init) {
+		return fetch(`${this.baseUrl}${path}`, {
 			...init,
 			headers: {
 				...this.headers(),
 				...init?.headers
 			}
 		});
-		if (!response.ok) throw new Error(`sunboard runtime request failed: ${response.status} for ${path}`);
-		return response;
 	}
-	async bootstrap() {
-		return await (await this.request(`/runtime/bootstrap?user=${encodeURIComponent(this.config.userId)}`)).json();
+	async getJson(path) {
+		return await (await this.request(`${path}?${this.identity()}`)).json();
 	}
-	async mutate(action) {
-		await this.request("/runtime/state", {
+	post(path, body, init) {
+		return this.request(path, {
+			...init,
 			method: "POST",
-			body: JSON.stringify({
-				user: this.config.userId,
-				...action
-			})
+			body: JSON.stringify(this.signed(body))
 		});
 	}
-	async reportAnchorMiss(report) {
-		await this.request("/runtime/anchor-miss", {
+	async write(path, body) {
+		const response = await this.send(path, {
 			method: "POST",
-			body: JSON.stringify({
-				user: this.config.userId,
-				...report
-			})
+			body: JSON.stringify(this.signed(body))
 		});
+		if (response.status === 429) return {
+			refused: "too-many",
+			retryAt: refusalIn(await response.text())?.retryAt
+		};
+		if (response.status === 409) return { refused: "another-open" };
+		if (response.status === 404) return { refused: "lost" };
+		return await ok(response, path).json();
+	}
+	headers() {
+		return {
+			"content-type": "application/json",
+			"x-sunboard-key": this.config.publishableKey,
+			...this.previewKey ? { "x-sunboard-preview-key": this.previewKey } : {}
+		};
+	}
+	async request(path, init) {
+		return ok(await this.send(path, init), path);
+	}
+	async bootstrap() {
+		return await (await this.request(`/runtime/bootstrap?${this.identity()}`)).json();
+	}
+	async mutate(action) {
+		await this.post("/runtime/state", action);
+	}
+	async reportAnchorMiss(report) {
+		await this.post("/runtime/anchor-miss", report);
 	}
 	async reportAnchorFound(report) {
-		await this.request("/runtime/anchor-found", {
-			method: "POST",
-			body: JSON.stringify(report)
-		});
+		await this.post("/runtime/anchor-found", report);
 	}
 	async stepCheck(report) {
-		await this.request("/runtime/step-check", {
-			method: "POST",
-			body: JSON.stringify(report)
-		});
+		await this.post("/runtime/step-check", report);
 	}
 	async recordEvents(events) {
 		if (events.length === 0) return;
-		await this.request("/runtime/events", {
-			method: "POST",
-			body: JSON.stringify({
-				user: this.config.userId,
-				events
-			}),
-			keepalive: true
-		});
+		await this.post("/runtime/events", { events }, { keepalive: true });
 	}
 	async reportPage(report) {
-		await this.request("/runtime/page", {
-			method: "POST",
-			body: JSON.stringify(report)
-		});
+		await this.post("/runtime/page", report);
 	}
 	async ask(asked, signal, onStage) {
 		const response = await fetch(`${this.baseUrl}/runtime/ask`, {
 			method: "POST",
 			headers: this.headers(),
-			body: JSON.stringify({
-				user: this.config.userId,
-				...asked
-			}),
+			body: JSON.stringify(this.signed(asked)),
 			signal: AbortSignal.any([signal, AbortSignal.timeout(ASK_TIMEOUT_MS)])
 		});
 		if (response.status === 400 || response.status === 429) {
@@ -1620,6 +1886,10 @@ var HttpTransport = class {
 		};
 	}
 };
+function ok(response, path) {
+	if (!response.ok) throw new Error(`sunboard runtime request failed: ${response.status} for ${path}`);
+	return response;
+}
 /**
 * The sentence a 400 or a 429 carries, and the time the cap lifts. Read as
 * text and parsed loosely: a proxy in front of the API answers those codes
@@ -1654,39 +1924,20 @@ function stringOrUndefined(value) {
 function optionalString(value) {
 	return value === void 0 || typeof value === "string";
 }
-function parseSource(value) {
-	if (!isRecord$1(value)) return void 0;
-	const { id, title, url, heading } = value;
-	if (typeof id !== "string" || typeof title !== "string") return void 0;
-	if (!optionalString(url) || !optionalString(heading)) return void 0;
-	return {
-		id,
-		title,
-		...url === void 0 ? {} : { url },
-		...heading === void 0 ? {} : { heading }
-	};
-}
 /** A reply as the server sends it, or as the thread kept it in session storage. */
 function parseReply(value) {
 	if (!isRecord$1(value)) return void 0;
-	const { id, conversationId, firstTurn, outcome, answer, sources, guideKey, supportUrl } = value;
-	if (typeof id !== "string" || typeof conversationId !== "string") return void 0;
+	const { id, threadId, firstTurn, outcome, answer, guideKey, supportUrl } = value;
+	if (typeof id !== "string" || typeof threadId !== "string") return void 0;
 	if (typeof firstTurn !== "boolean") return void 0;
 	if (!isAskOutcome(outcome) || typeof answer !== "string") return void 0;
-	if (!Array.isArray(sources) || !optionalString(guideKey) || !optionalString(supportUrl)) return;
-	const parsed = [];
-	for (const source of sources) {
-		const article = parseSource(source);
-		if (!article) return void 0;
-		parsed.push(article);
-	}
+	if (!optionalString(guideKey) || !optionalString(supportUrl)) return void 0;
 	return {
 		id,
-		conversationId,
+		threadId,
 		firstTurn,
 		outcome,
 		answer,
-		sources: parsed,
 		...guideKey === void 0 ? {} : { guideKey },
 		...supportUrl === void 0 ? {} : { supportUrl }
 	};
@@ -1750,8 +2001,13 @@ function SunboardProvider(props) {
 	const connectionKey = connection ? JSON.stringify(connection) : null;
 	const resolvedTransport = useMemo(() => {
 		if (transport) return transport;
-		if (connectionKey) return new HttpTransport(JSON.parse(connectionKey));
-		return null;
+		if (!connectionKey) return null;
+		try {
+			return new HttpTransport(JSON.parse(connectionKey));
+		} catch (error) {
+			console.error(error instanceof Error ? error.message : String(error));
+			return offTransport();
+		}
 	}, [transport, connectionKey]);
 	if (!resolvedTransport) throw new Error("SunboardProvider needs either a connection or a transport");
 	const [answer, setAnswer] = useState(null);
@@ -1985,6 +2241,7 @@ function SunboardProvider(props) {
 				if (!transport.ask) throw new Error("this transport cannot ask questions");
 				return transport.ask(asked, signal, onStage);
 			},
+			support: off ? void 0 : resolvedTransport.support,
 			track,
 			navigate
 		};
@@ -2123,7 +2380,7 @@ function threadReducer(thread, action) {
 			} : response);
 			return next === thread ? thread : {
 				...next,
-				conversationId: action.reply.conversationId
+				threadId: action.reply.threadId
 			};
 		}
 		case "failed": return replaceResponse(thread, action.questionId, (response) => response.kind === "waiting" ? {
@@ -2303,14 +2560,14 @@ function parseThread(value) {
 		if (!message) return null;
 		messages.push(message);
 	}
-	const conversationId = typeof value.conversationId === "string" ? value.conversationId : void 0;
+	const threadId = typeof value.threadId === "string" ? value.threadId : void 0;
 	const handoff = parseHandoff(value.handoff);
-	return conversationId === void 0 ? {
+	return threadId === void 0 ? {
 		messages,
 		handoff
 	} : {
 		messages,
-		conversationId,
+		threadId,
 		handoff
 	};
 }
@@ -2399,6 +2656,162 @@ function parseFailure(value) {
 	return null;
 }
 //#endregion
+//#region src/support.ts
+const emptySupport = {
+	off: false,
+	open: null,
+	hasPast: false,
+	view: "assistant",
+	conversation: null,
+	readOnly: false,
+	past: null,
+	sending: false,
+	failure: null
+};
+function supportReducer(state, action) {
+	switch (action.type) {
+		case "off": return {
+			...emptySupport,
+			off: true
+		};
+		case "polled": return {
+			...state,
+			open: action.poll.open,
+			hasPast: action.poll.hasPast
+		};
+		case "talk": {
+			const keep = state.conversation !== null && state.conversation.id === state.open?.id;
+			return {
+				...state,
+				view: "conversation",
+				readOnly: false,
+				failure: null,
+				conversation: keep ? state.conversation : null
+			};
+		}
+		case "loaded": {
+			const loaded = action.conversation;
+			if (!canWrite(state)) return state;
+			if (state.conversation !== null && state.conversation.id !== loaded.id) return state;
+			const conversation = merged(state.conversation, loaded);
+			return {
+				...state,
+				conversation,
+				...state.open?.id === loaded.id ? summarized(state, conversation) : {}
+			};
+		}
+		case "sending": return {
+			...state,
+			sending: true,
+			failure: null
+		};
+		case "sent": {
+			const { summary, message } = action.sent;
+			const current = state.conversation?.id === summary.id ? state.conversation : null;
+			const conversation = current ? {
+				...current,
+				status: summary.status,
+				closed: false,
+				closedAt: null,
+				messages: withMessages(current.messages, [message])
+			} : {
+				id: summary.id,
+				status: summary.status,
+				startedAt: message.sentAt,
+				closedAt: null,
+				closed: false,
+				messages: [message],
+				before: [],
+				during: []
+			};
+			return {
+				...state,
+				sending: false,
+				open: summary,
+				conversation
+			};
+		}
+		case "refused": return {
+			...state,
+			sending: false,
+			failure: action.refused
+		};
+		case "read": return state.open?.id === action.id && state.open.unread ? {
+			...state,
+			open: {
+				...state.open,
+				unread: false
+			}
+		} : state;
+		case "showPast": return {
+			...state,
+			view: "past",
+			readOnly: false,
+			failure: null
+		};
+		case "pastLoaded": return {
+			...state,
+			past: action.past,
+			hasPast: state.hasPast || action.past.length > 0
+		};
+		case "openPast": return {
+			...state,
+			view: "conversation",
+			readOnly: true,
+			conversation: action.conversation,
+			failure: null
+		};
+		case "back": return {
+			...state,
+			view: state.view === "conversation" && state.readOnly ? "past" : "assistant",
+			readOnly: false,
+			failure: null
+		};
+	}
+}
+/** What the bar and the start screen row say, brought up to the messages on screen. */
+function summarized({ open, hasPast }, conversation) {
+	if (conversation.closed) return {
+		open: null,
+		hasPast: true
+	};
+	const last = conversation.messages.at(-1);
+	if (!open || !last) return {
+		open,
+		hasPast
+	};
+	return {
+		open: {
+			...open,
+			status: conversation.status,
+			lastMessageAt: last.sentAt,
+			lastMessageBy: last.by,
+			lastMessageText: last.text
+		},
+		hasPast
+	};
+}
+/** Talk to a person is offered: the project's switch is on and the runtime has not said off. */
+function offersTalk(switchOn, hasTransport, support) {
+	return switchOn && hasTransport && !support.off;
+}
+/** A full view replaces what is held; a view fetched with `after` adds its messages. */
+function merged(current, next) {
+	if (current === null || current.id !== next.id) return next;
+	return {
+		...next,
+		messages: withMessages(current.messages, next.messages)
+	};
+}
+function withMessages(current, next) {
+	const seen = new Set(current.map((message) => message.id));
+	return [...current, ...next.filter((message) => !seen.has(message.id))];
+}
+/** The conversation on screen can take a message: not one opened from the past list. */
+function canWrite(support) {
+	return support.view === "conversation" && !support.readOnly;
+}
+//#endregion
 //#region src/hooks.ts
 function useGuidesApi() {
 	const api = useContext(GuidesContext);
@@ -2518,7 +2931,7 @@ function useLauncher({ remember = true } = {}) {
 		const asked = {
 			question,
 			pathname,
-			conversationId: threadRef.current.conversationId
+			threadId: threadRef.current.threadId
 		};
 		run(transportAsk, asked, questionId, controller.signal, dispatch);
 	};
@@ -2528,6 +2941,7 @@ function useLauncher({ remember = true } = {}) {
 		ready: api.ready,
 		tourRunning: api.activeTour !== null,
 		messages: thread.messages,
+		threadId: thread.threadId,
 		waiting: isWaiting(thread),
 		rateLimitedUntil: cappedUntil,
 		handedOff: thread.handoff !== null,
@@ -2600,6 +3014,157 @@ function useLauncher({ remember = true } = {}) {
 		}
 	};
 }
+/** How often the end user's open conversation is checked, and the conversation on screen. */
+const SUPPORT_POLL_MS = 3e4;
+const CONVERSATION_POLL_MS = 5e3;
+function isOff(value) {
+	return typeof value === "object" && value !== null && "off" in value;
+}
+function useTabVisible() {
+	const [visible, setVisible] = useState(() => typeof document === "undefined" || document.visibilityState === "visible");
+	useEffect(() => {
+		const onChange = () => setVisible(document.visibilityState === "visible");
+		document.addEventListener("visibilitychange", onChange);
+		return () => document.removeEventListener("visibilitychange", onChange);
+	}, []);
+	return visible;
+}
+/**
+* Talk to a person. Polls the runtime only while it can matter: once on load,
+* then every 30 seconds while the end user has an open conversation, and the
+* conversation itself every 5 seconds while it is on screen. Nothing polls
+* while the tab is hidden.
+*/
+function useSupport({ onScreen, threadId }) {
+	const api = useGuidesApi();
+	const switchOn = useComponentSettings().launcher.talkToPerson;
+	const transport = api.support;
+	const [state, dispatch] = useReducer(supportReducer, emptySupport);
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const visible = useTabVisible();
+	const available = offersTalk(switchOn, transport !== void 0, state);
+	const live = available ? transport : void 0;
+	const hasOpen = state.open !== null;
+	const poll = useCallback(() => {
+		if (!live) return;
+		live.conversationPoll().then((answer) => dispatch(isOff(answer) ? { type: "off" } : {
+			type: "polled",
+			poll: answer
+		}), () => void 0);
+	}, [live]);
+	useEffect(() => {
+		poll();
+	}, [poll]);
+	const wasVisible = useRef(visible);
+	useEffect(() => {
+		const returned = visible && !wasVisible.current;
+		wasVisible.current = visible;
+		if (!hasOpen || !visible) return;
+		if (returned) poll();
+		const timer = setInterval(poll, SUPPORT_POLL_MS);
+		return () => clearInterval(timer);
+	}, [
+		poll,
+		hasOpen,
+		visible
+	]);
+	const watchedId = onScreen && visible && canWrite(state) ? state.conversation?.id ?? state.open?.id : void 0;
+	useEffect(() => {
+		if (!live || watchedId === void 0) return;
+		const fetchView = () => {
+			const held = stateRef.current.conversation;
+			const after = held?.id === watchedId ? held.messages.at(-1)?.id : void 0;
+			live.conversation(watchedId, after).then((view) => {
+				if (view === null) return;
+				if (isOff(view)) {
+					dispatch({ type: "off" });
+					return;
+				}
+				dispatch({
+					type: "loaded",
+					conversation: view
+				});
+				if (after !== void 0 && view.messages.some((message) => message.by === "TEAM")) live.markRead(watchedId).catch(() => void 0);
+			}, () => void 0);
+		};
+		fetchView();
+		const timer = setInterval(fetchView, CONVERSATION_POLL_MS);
+		return () => clearInterval(timer);
+	}, [live, watchedId]);
+	const unreadOnScreen = state.open?.unread === true && state.open.id === watchedId;
+	useEffect(() => {
+		if (!live || !unreadOnScreen || watchedId === void 0) return;
+		dispatch({
+			type: "read",
+			id: watchedId
+		});
+		live.markRead(watchedId).catch(() => void 0);
+	}, [
+		live,
+		unreadOnScreen,
+		watchedId
+	]);
+	return {
+		available,
+		state,
+		talk: () => dispatch({ type: "talk" }),
+		send: async (typed) => {
+			const text = typed.trim();
+			const current = stateRef.current;
+			if (!live || text === "" || current.sending || !canWrite(current)) return false;
+			dispatch({ type: "sending" });
+			stateRef.current = {
+				...current,
+				sending: true
+			};
+			let answer;
+			try {
+				answer = current.conversation ? await live.sendMessage(current.conversation.id, text) : await live.startConversation({
+					threadId: threadId ?? null,
+					path: window.location.pathname,
+					text
+				});
+			} catch {
+				answer = { refused: "lost" };
+			}
+			if (isOff(answer)) {
+				dispatch({ type: "off" });
+				return false;
+			}
+			if ("refused" in answer) {
+				const refused = answer.refused === "another-open" ? { refused: "lost" } : answer;
+				dispatch({
+					type: "refused",
+					refused
+				});
+				return false;
+			}
+			dispatch({
+				type: "sent",
+				sent: answer
+			});
+			return true;
+		},
+		showPast: () => {
+			dispatch({ type: "showPast" });
+			live?.pastConversations().then((past) => dispatch(isOff(past) ? { type: "off" } : {
+				type: "pastLoaded",
+				past
+			}), () => void 0);
+		},
+		openPast: (id) => {
+			live?.conversation(id).then((view) => {
+				if (view === null) return;
+				dispatch(isOff(view) ? { type: "off" } : {
+					type: "openPast",
+					conversation: view
+				});
+			}, () => void 0);
+		},
+		back: () => dispatch({ type: "back" })
+	};
+}
 /** One guide's content plus launchTour; call with no key for launch-only. */
 function useGuide(key) {
 	const api = useGuidesApi();
@@ -2720,12 +3285,6 @@ function PlayIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M7 4.5v15l12-7.5z" })
 	});
 }
-function DocIcon() {
-	return /* @__PURE__ */ jsxs(Glyph, {
-		width: 1.8,
-		children: [/* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("path", { d: "M14 3v5h5M9 13h6M9 17h4" })]
-	});
-}
 function ExternalIcon() {
 	return /* @__PURE__ */ jsx(Glyph, {
 		width: 1.8,
@@ -2763,12 +3322,6 @@ function RestartIcon() {
 function SendIcon() {
 	return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
 }
-function ChevronDownIcon() {
-	return /* @__PURE__ */ jsx(Glyph, {
-		width: 1.8,
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-	});
-}
 function CheckIcon() {
 	return /* @__PURE__ */ jsx(Glyph, {
 		width: 1.8,
@@ -2800,6 +3353,28 @@ function StarIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M11.53 2.3a.5.5 0 0 1 .94 0l2.31 4.68a2 2 0 0 0 1.5 1.1l5.17.75a.5.5 0 0 1 .28.86l-3.74 3.64a2 2 0 0 0-.58 1.77l.88 5.14a.5.5 0 0 1-.73.53l-4.62-2.43a2 2 0 0 0-1.86 0l-4.62 2.43a.5.5 0 0 1-.73-.53l.88-5.14a2 2 0 0 0-.57-1.77L2.3 9.69a.5.5 0 0 1 .28-.86l5.16-.75a2 2 0 0 0 1.52-1.1z" })
 	});
 }
+function ChevronLeftIcon() {
+	return /* @__PURE__ */ jsx(Glyph, {
+		width: 1.8,
+		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+	});
+}
+function HeadsetIcon() {
+	return /* @__PURE__ */ jsxs(Glyph, {
+		width: 1.8,
+		children: [/* @__PURE__ */ jsx("path", { d: "M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" }), /* @__PURE__ */ jsx("path", { d: "M21 16v2a4 4 0 0 1-4 4h-5" })]
+	});
+}
+function HistoryIcon() {
+	return /* @__PURE__ */ jsxs(Glyph, {
+		width: 1.8,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+		]
+	});
+}
 //#endregion
 //#region src/overlay/CardMedia.tsx
 const VIDEO_URL = /\.(mp4|webm|m4v|mov|ogg)([?#]|$)/i;
@@ -3887,10 +4462,387 @@ function SunboardLogo({ width = 75 }) {
 		}) })]
 	});
 }
+const FOCUSABLE = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled])";
+/**
+* On a phone the panel is a bottom sheet, and focusing the box raises the
+* soft keyboard over what the visitor came to read. The panel is fixed, so
+* focus never needs to scroll, and in an iframe it would scroll the parent.
+*/
+function useOpeningFocus(inline, focusBox, boxRef, panelRef) {
+	useEffect(() => {
+		if (inline) return;
+		const phone = window.matchMedia?.(`(max-width: 640px)`).matches ?? false;
+		const box = boxRef.current;
+		if ((focusBox || !phone) && box && !box.disabled) box.focus({ preventScroll: true });
+		else panelRef.current?.focus({ preventScroll: true });
+	}, [inline]);
+}
+/**
+* Bound to the document rather than the panel: disabling the box the visitor
+* was typing in hands focus back to the page, and a listener on the panel
+* would never hear the Tab that follows.
+*/
+function useTabTrap(inline, panelRef) {
+	useEffect(() => {
+		if (inline) return;
+		const onKeyDown = (event) => {
+			const panel = panelRef.current;
+			if (event.key !== "Tab" || event.defaultPrevented || !panel) return;
+			const stops = [...panel.querySelectorAll(FOCUSABLE)];
+			if (stops.length === 0) return;
+			const first = stops[0];
+			const last = stops[stops.length - 1];
+			const inside = panel.contains(document.activeElement);
+			const leaving = document.activeElement === (event.shiftKey ? first : last);
+			if (inside && !leaving) return;
+			event.preventDefault();
+			(event.shiftKey ? last : first).focus();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [inline, panelRef]);
+}
+function clockTime(iso) {
+	const at = new Date(iso);
+	if (Number.isNaN(at.getTime())) return iso;
+	return at.toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+/** Whole calendar days from `iso` to `now`, in the visitor's own time zone. */
+function daysAgo(iso, now) {
+	const at = new Date(iso);
+	if (Number.isNaN(at.getTime())) return 0;
+	const midnight = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+	return Math.max(0, Math.round((midnight(now) - midnight(at)) / 864e5));
+}
+function minutesUntil(iso) {
+	const at = new Date(iso).getTime();
+	if (Number.isNaN(at)) return 1;
+	return Math.max(1, Math.round((at - Date.now()) / 6e4));
+}
+//#endregion
+//#region src/components/Conversation.tsx
+/** "Sean replied" or "Waiting for a reply", for the bar and the start screen row. */
+function supportStatus(open, company, labels) {
+	if (open.lastMessageBy !== "TEAM") return labels.waiting;
+	return labels.replied(open.lastMessageWho ?? labels.from(company));
+}
+function when(iso, labels, now) {
+	const days = daysAgo(iso, now);
+	return days === 0 ? clockTime(iso) : labels.ago(days);
+}
+function PanelHead({ title, onBack, close }) {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs("header", {
+		className: "sb-head sb-head-back",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sb-panel-close",
+				"aria-label": labels.support.back,
+				onClick: onBack,
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "sb-title",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sb-panel-close",
+				"aria-label": labels.launcher.closeAria,
+				onClick: close,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+}
+function Branding() {
+	const L = useLabels().launcher;
+	if (!useComponentSettings().launcher.showBranding) return null;
+	return /* @__PURE__ */ jsxs("a", {
+		className: "sb-brand",
+		href: "https://sunboardhq.com",
+		target: "_blank",
+		rel: "noreferrer",
+		children: [L.poweredBy, /* @__PURE__ */ jsx(SunboardLogo, { width: 62 })]
+	});
+}
+/** The messages and the questions asked of the assistant meanwhile, in the order they happened. */
+function items(conversation) {
+	return [...conversation.messages.map((message) => ({
+		kind: "message",
+		at: message.sentAt,
+		message
+	})), ...conversation.during.map((question) => ({
+		kind: "fold",
+		at: question.askedAt,
+		question
+	}))].sort((a, b) => a.at.localeCompare(b.at));
+}
+/** The assistant's turns the conversation follows on from, dimmed. */
+function AssistantTurns({ messages }) {
+	const replies = new Map(messages.flatMap((message) => message.kind === "reply" ? [[message.questionId, message.reply.answer]] : []));
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-dim",
+		children: messages.map((message) => {
+			if (message.kind !== "question") return null;
+			const answer = replies.get(message.id);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "sb-exchange",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "sb-asked",
+					children: /* @__PURE__ */ jsx("p", { children: message.text })
+				}), answer && /* @__PURE__ */ jsx("div", {
+					className: "sb-reply-text",
+					children: /* @__PURE__ */ jsx(AnswerText, { text: answer })
+				})]
+			}, message.id);
+		})
+	});
+}
+function Fold({ question, labels }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: `sb-fold${open ? " sb-fold-open" : ""}`,
+		"aria-expanded": open,
+		onClick: () => setOpen((now) => !now),
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sb-fold-text",
+			children: labels.asked(question.text)
+		})]
+	});
+}
+function Line({ children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-line",
+		role: "note",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "sb-line-rule" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-line-text",
+				children
+			}),
+			/* @__PURE__ */ jsx("span", { className: "sb-line-rule" })
+		]
+	});
+}
+function TeamMessage({ who, text }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-team",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "sb-team-who",
+			children: who
+		}), /* @__PURE__ */ jsx("p", {
+			className: "sb-team-text",
+			children: text
+		})]
+	});
+}
+function SendFailure({ failure, labels }) {
+	const capped = failure.refused === "too-many";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-note sb-arrive",
+		role: capped ? "status" : "alert",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sb-note-mark",
+			children: capped ? /* @__PURE__ */ jsx(ClockIcon, {}) : /* @__PURE__ */ jsx(NoSignalIcon, {})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-note-text",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "sb-note-words",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "sb-note-title",
+					children: capped ? labels.tooMany : labels.lost
+				}), /* @__PURE__ */ jsx("p", {
+					className: "sb-note-body",
+					children: capped && failure.retryAt ? labels.writeAgainIn(minutesUntil(failure.retryAt)) : labels.lostBody
+				})]
+			})
+		})]
+	});
+}
+function ConversationPanel({ launcher, support, close, focusBox }) {
+	const api = useGuidesApi();
+	const { support: S, launcher: L } = useLabels();
+	const replyTime = useComponentSettings().launcher.replyTime.trim();
+	const company = api.productName;
+	const { conversation, readOnly, sending, failure } = support.state;
+	const panelRef = useRef(null);
+	const boxRef = useRef(null);
+	const [draft, setDraft] = useState("");
+	const now = /* @__PURE__ */ new Date();
+	useOpeningFocus(false, focusBox, boxRef, panelRef);
+	useTabTrap(false, panelRef);
+	useLayoutEffect(() => {
+		const box = boxRef.current;
+		if (!box) return;
+		box.style.height = "";
+		box.style.height = `${String(box.scrollHeight)}px`;
+		box.style.overflowY = box.scrollHeight > box.clientHeight + 1 ? "auto" : "hidden";
+	}, [draft]);
+	const send = async (event) => {
+		event?.preventDefault();
+		if (await support.send(draft)) setDraft("");
+	};
+	const onBoxKeyDown = (event) => {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		send();
+	};
+	const questions = launcher.messages.filter((message) => message.kind === "question" || message.kind === "reply");
+	const showTurns = !readOnly && questions.length > 0 && (conversation === null || conversation.before.length > 0);
+	const firstFromEndUser = conversation?.messages.find((message) => message.by === "END_USER")?.id;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "sb-panel",
+		ref: panelRef,
+		role: "dialog",
+		"aria-label": S.title(company),
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsx(PanelHead, {
+				title: S.title(company),
+				onBack: support.back,
+				close
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-thread",
+				role: "log",
+				"aria-label": S.conversationWith(company),
+				"aria-live": "polite",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "sb-thread-scroll sb-anchored",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "sb-thread-list sb-conversation",
+						children: [
+							showTurns && /* @__PURE__ */ jsx(AssistantTurns, { messages: questions }),
+							!showTurns && conversation?.before.map((question) => /* @__PURE__ */ jsx(Fold, {
+								question,
+								labels: S
+							}, question.id)),
+							/* @__PURE__ */ jsx(Line, { children: S.talking(company) }),
+							/* @__PURE__ */ jsx(TeamMessage, {
+								who: S.from(company),
+								text: S.greeting(api.firstName)
+							}),
+							conversation && items(conversation).map((item) => item.kind === "fold" ? /* @__PURE__ */ jsx(Fold, {
+								question: item.question,
+								labels: S
+							}, item.question.id) : item.message.by === "TEAM" ? /* @__PURE__ */ jsx(TeamMessage, {
+								who: S.teamMessage(item.message.who, company, when(item.message.sentAt, S, now)),
+								text: item.message.text
+							}, item.message.id) : /* @__PURE__ */ jsxs("div", {
+								className: "sb-asked sb-sent",
+								children: [/* @__PURE__ */ jsx("p", { children: item.message.text }), item.message.id === firstFromEndUser && replyTime !== "" && /* @__PURE__ */ jsx("span", {
+									className: "sb-reply-time",
+									children: replyTime
+								})]
+							}, item.message.id)),
+							conversation?.closed && /* @__PURE__ */ jsxs("div", {
+								className: "sb-closed",
+								children: [/* @__PURE__ */ jsx(Line, { children: S.closed(company) }), !readOnly && /* @__PURE__ */ jsx("p", {
+									className: "sb-reopen",
+									children: S.reopen
+								})]
+							}),
+							failure && /* @__PURE__ */ jsx(SendFailure, {
+								failure,
+								labels: S
+							})
+						]
+					})
+				})
+			}),
+			readOnly ? /* @__PURE__ */ jsx("div", {
+				className: "sb-foot",
+				children: /* @__PURE__ */ jsx(Branding, {})
+			}) : /* @__PURE__ */ jsxs("form", {
+				className: "sb-composer",
+				onSubmit: (event) => void send(event),
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "sb-field",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "sb-sr",
+							children: S.boxLabel(company)
+						}),
+						/* @__PURE__ */ jsx("textarea", {
+							className: "sb-box",
+							ref: boxRef,
+							rows: 1,
+							value: draft,
+							onChange: (event) => setDraft(event.target.value),
+							onKeyDown: onBoxKeyDown,
+							placeholder: S.placeholder(company),
+							maxLength: CONVERSATION_MESSAGE_MAX_LENGTH,
+							autoComplete: "off"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "sb-send",
+							"aria-label": L.send,
+							disabled: sending || draft.trim() === "",
+							children: /* @__PURE__ */ jsx(SendIcon, {})
+						})
+					]
+				}), /* @__PURE__ */ jsx(Branding, {})]
+			})
+		]
+	});
+}
+function PastPanel({ support, close }) {
+	const S = useLabels().support;
+	const panelRef = useRef(null);
+	const now = /* @__PURE__ */ new Date();
+	useTabTrap(false, panelRef);
+	useLayoutEffect(() => {
+		panelRef.current?.focus({ preventScroll: true });
+	}, []);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "sb-panel",
+		ref: panelRef,
+		role: "dialog",
+		"aria-label": S.past,
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsx(PanelHead, {
+				title: S.past,
+				onBack: support.back,
+				close
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-thread",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "sb-thread-scroll",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "sb-past-list",
+						children: (support.state.past ?? []).map((past) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "sb-past",
+							onClick: () => support.openPast(past.id),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sb-past-title",
+								children: past.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sb-past-meta",
+								children: S.closedWhen(S.ago(daysAgo(past.closedAt ?? now.toISOString(), now)), past.closedBy)
+							})]
+						}, past.id))
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-foot",
+				children: /* @__PURE__ */ jsx(Branding, {})
+			})
+		]
+	});
+}
 //#endregion
 //#region src/components/Launcher.tsx
-/** The width below which the panel is a bottom sheet; see styles.css. */
-const PHONE_WIDTH = 640;
 /** How long the stage labels stay before the wait owns up to being slow. */
 const SLOW_MS = 6e3;
 const STAGE_AT = {
@@ -3898,14 +4850,19 @@ const STAGE_AT = {
 	writing: 1,
 	checking: 2
 };
-const FOCUSABLE = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled])";
 function Launcher({ inline } = {}) {
 	const launcher = useLauncher({ remember: !inline });
 	const { ready, onThisPage, elsewhere, tourRunning, opened, handedOff } = launcher;
 	const [open, setOpen] = useState(false);
+	const support = useSupport({
+		onScreen: open !== false,
+		threadId: launcher.threadId
+	});
 	const { off } = useGuidesApi();
 	const canAsk = launcher.ask !== void 0;
 	const L = useLabels().launcher;
+	const S = useLabels().support;
+	const unread = support.available && support.state.open?.unread === true;
 	const pillRef = useRef(null);
 	const wasOpen = useRef(false);
 	const wasHandedOff = useRef(handedOff);
@@ -3932,31 +4889,49 @@ function Launcher({ inline } = {}) {
 	if (inline) return /* @__PURE__ */ jsx(Scope, { children: /* @__PURE__ */ jsx(QuestionPanel, {
 		inline: true,
 		launcher,
+		support,
 		close: () => setOpen(false),
 		focusBox: false
 	}) });
 	const floating = (surface) => /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(Scope, { children: surface }) });
 	if (!ready) return null;
 	if (tourRunning) return floating(/* @__PURE__ */ jsx(TourPill, {}));
-	if (!canAsk && onThisPage.length + elsewhere.length === 0) return null;
-	if (open) return floating(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "sb-panel-scrim",
-		onClick: () => setOpen(false)
-	}), /* @__PURE__ */ jsx(QuestionPanel, {
-		launcher,
-		close: () => setOpen(false),
-		focusBox: open === "back"
-	})] }));
+	if (!canAsk && onThisPage.length + elsewhere.length === 0 && !support.state.open) return null;
+	if (open) {
+		const close = () => setOpen(false);
+		const view = support.available ? support.state.view : "assistant";
+		return floating(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-panel-scrim",
+			onClick: close
+		}), view === "conversation" ? /* @__PURE__ */ jsx(ConversationPanel, {
+			launcher,
+			support,
+			close,
+			focusBox: open === "back"
+		}) : view === "past" ? /* @__PURE__ */ jsx(PastPanel, {
+			support,
+			close
+		}) : /* @__PURE__ */ jsx(QuestionPanel, {
+			launcher,
+			support,
+			close,
+			focusBox: open === "back"
+		})] }));
+	}
 	return floating(/* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "sb-launcher",
 		ref: pillRef,
-		"aria-label": L.openAria,
+		"aria-label": unread ? S.openAriaNewReply : L.openAria,
 		onClick: () => {
 			setOpen("opened");
 			opened();
 		},
-		children: [/* @__PURE__ */ jsx(HelpIcon, {}), L.open]
+		children: [
+			/* @__PURE__ */ jsx(HelpIcon, {}),
+			L.open,
+			unread && /* @__PURE__ */ jsx("span", { className: "sb-dot sb-launcher-dot" })
+		]
 	}));
 }
 /**
@@ -3964,10 +4939,14 @@ function Launcher({ inline } = {}) {
 * tour taking its place, loses nothing; a question still out lands while the
 * panel is away and is there when it comes back.
 */
-function QuestionPanel({ inline, launcher, close, focusBox }) {
+function QuestionPanel({ inline, launcher, support, close, focusBox }) {
 	const { onThisPage, elsewhere, messages, waiting, rateLimitedUntil, ask } = launcher;
 	const api = useGuidesApi();
 	const L = useLabels().launcher;
+	const S = useLabels().support;
+	const company = api.productName;
+	const talk = support.available && !inline ? support.talk : void 0;
+	const openConversation = support.available ? support.state.open : null;
 	const showBranding = useComponentSettings().launcher.showBranding;
 	const panelRef = useRef(null);
 	const scrollRef = useRef(null);
@@ -4022,16 +5001,6 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 		followRef.current = false;
 		measure();
 	}, [messages]);
-	const keepInPlace = (change) => {
-		const box = scrollRef.current;
-		const before = box ? {
-			height: box.scrollHeight,
-			top: box.scrollTop
-		} : null;
-		flushSync(change);
-		if (box && before && anchored) box.scrollTop = before.top - (box.scrollHeight - before.height);
-		measure();
-	};
 	useEffect(() => {
 		const seen = seenRef.current;
 		let finished = null;
@@ -4040,7 +5009,7 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 			if (message.kind === "waiting") continue;
 			seen.add(message.id);
 			if (message.kind === "reply") {
-				const { greeting, closing } = replyWords(message, listed, api.firstName, L);
+				const { greeting, closing } = replyWords(message, api.firstName, L);
 				finished = [
 					greeting,
 					plainAnswer(message.reply.answer),
@@ -4050,31 +5019,8 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 		}
 		if (finished !== null) setAnnouncement(finished);
 	}, [messages]);
-	useEffect(() => {
-		if (inline) return;
-		const phone = window.matchMedia?.(`(max-width: ${PHONE_WIDTH}px)`).matches ?? false;
-		const box = boxRef.current;
-		if ((focusBox || !phone) && box && !box.disabled) box.focus({ preventScroll: true });
-		else panelRef.current?.focus({ preventScroll: true });
-	}, [inline]);
-	useEffect(() => {
-		if (inline) return;
-		const onKeyDown = (event) => {
-			const panel = panelRef.current;
-			if (event.key !== "Tab" || event.defaultPrevented || !panel) return;
-			const stops = [...panel.querySelectorAll(FOCUSABLE)];
-			if (stops.length === 0) return;
-			const first = stops[0];
-			const last = stops[stops.length - 1];
-			const inside = panel.contains(document.activeElement);
-			const leaving = document.activeElement === (event.shiftKey ? first : last);
-			if (inside && !leaving) return;
-			event.preventDefault();
-			(event.shiftKey ? last : first).focus();
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [inline]);
+	useOpeningFocus(inline, focusBox, boxRef, panelRef);
+	useTabTrap(inline, panelRef);
 	useEffect(() => {
 		if (!confirming) return;
 		cancelRef.current?.focus();
@@ -4151,6 +5097,13 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 						onClick: () => setConfirming((now) => !now),
 						children: [/* @__PURE__ */ jsx(RestartIcon, {}), L.startOver]
 					}),
+					!inline && support.available && support.state.hasPast && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sb-panel-close",
+						"aria-label": S.past,
+						onClick: support.showPast,
+						children: /* @__PURE__ */ jsx(HistoryIcon, {})
+					}),
 					!inline && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: "sb-panel-close",
@@ -4193,10 +5146,30 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 					})
 				]
 			}),
+			openConversation && messages.length > 0 && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "sb-convbar",
+				onClick: talk,
+				children: [
+					openConversation.unread && /* @__PURE__ */ jsx("span", { className: "sb-dot" }),
+					openConversation.unread && /* @__PURE__ */ jsx("span", {
+						className: "sb-sr",
+						children: S.newReply
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sb-convbar-text",
+						children: [S.conversationWith(company), /* @__PURE__ */ jsxs("span", {
+							className: "sb-convbar-status",
+							children: [" · ", supportStatus(openConversation, company, S)]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ChevronRightIcon, {})
+				]
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "sb-thread",
 				role: "log",
-				"aria-label": L.conversation,
+				"aria-label": L.thread,
 				"aria-live": "off",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: `sb-thread-scroll${anchored ? " sb-anchored" : ""}`,
@@ -4207,7 +5180,30 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 						children: messages.length === 0 ? /* @__PURE__ */ jsx(Suggestions, {
 							labels: L,
 							guides: listed,
-							onRow: inline ? void 0 : (guide) => start(guide.key)
+							onRow: inline ? void 0 : (guide) => start(guide.key),
+							conversation: openConversation && /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "sb-conv",
+								onClick: talk,
+								children: [
+									openConversation.unread && /* @__PURE__ */ jsx("span", { className: "sb-dot" }),
+									openConversation.unread && /* @__PURE__ */ jsx("span", {
+										className: "sb-sr",
+										children: S.newReply
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "sb-conv-text",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "sb-conv-title",
+											children: supportStatus(openConversation, company, S)
+										}), /* @__PURE__ */ jsx("span", {
+											className: "sb-conv-line",
+											children: openConversation.lastMessageText
+										})]
+									}),
+									/* @__PURE__ */ jsx(ChevronRightIcon, {})
+								]
+							})
 						}) : threadItems(messages).map((item) => item.kind === "line" ? /* @__PURE__ */ jsx(TourLine, {
 							line: item.line,
 							labels: L,
@@ -4230,10 +5226,13 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 									latest: item.question.id === latestQuestion,
 									fresh: !seenRef.current.has(item.response.id),
 									guide: guideFor(item.response, listed),
-									words: replyWords(item.response, listed, api.firstName, L),
+									words: replyWords(item.response, api.firstName, L),
 									labels: L,
 									onShowMe: inline ? void 0 : start,
-									keepInPlace
+									talk: support.available ? {
+										labels: S,
+										onTalk: talk
+									} : void 0
 								}, item.response.id),
 								item.response?.kind === "error" && /* @__PURE__ */ jsx(FailureNote, {
 									message: item.response,
@@ -4311,30 +5310,33 @@ function guideFor(message, listed) {
 	return key === void 0 ? void 0 : listed.find((guide) => guide.key === key);
 }
 /**
-* The assistant's own lines around a written answer: the greeting on the
-* first reply of a conversation, and the closing under one that offers a
-* guide. A reply with nothing to offer gets neither.
+* The assistant's own lines around a reply: the greeting on the first reply
+* of a conversation that offers a guide or an answer, and the closing under
+* any reply that offers a guide.
 */
-function replyWords(message, listed, name, labels) {
-	const { reply } = message;
-	if (reply.outcome === "NONE") return {};
+function replyWords({ reply }, name, labels) {
+	const offers = reply.outcome === "GUIDE" || reply.outcome === "ANSWERED";
 	return {
-		greeting: reply.firstTurn ? labels.greeting(name) : void 0,
-		closing: guideFor(message, listed) ? labels.guideClosing : void 0
+		greeting: reply.firstTurn && offers ? labels.greeting(name) : void 0,
+		closing: reply.guideKey !== void 0 ? labels.guideClosing : void 0
 	};
 }
 const SUGGESTION_LIMIT = 4;
-function Suggestions({ labels, guides, onRow }) {
+function Suggestions({ labels, guides, onRow, conversation }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sb-start",
-		children: [/* @__PURE__ */ jsx("h3", {
-			className: "sb-start-title",
-			children: labels.emptyTitle
-		}), guides.length > 0 && /* @__PURE__ */ jsx(Group, {
-			label: labels.commonQuestions,
-			guides: guides.slice(0, SUGGESTION_LIMIT),
-			onRow
-		})]
+		children: [
+			conversation,
+			/* @__PURE__ */ jsx("h3", {
+				className: "sb-start-title",
+				children: labels.emptyTitle
+			}),
+			guides.length > 0 && /* @__PURE__ */ jsx(Group, {
+				label: labels.commonQuestions,
+				guides: guides.slice(0, SUGGESTION_LIMIT),
+				onRow
+			})
+		]
 	});
 }
 function Group({ label, guides, onRow }) {
@@ -4414,8 +5416,9 @@ function Waiting({ stage, since, labels, productName }) {
 		]
 	});
 }
-function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe, keepInPlace }) {
+function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe, talk }) {
 	const { reply } = message;
+	const notCovered = reply.outcome === "NONE" || reply.outcome === "UNSUPPORTED";
 	const primary = latest && !message.toured;
 	const [arrived] = useState(fresh);
 	return /* @__PURE__ */ jsxs("article", {
@@ -4428,7 +5431,7 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 						className: "sb-reply-greeting",
 						children: words.greeting
 					}),
-					/* @__PURE__ */ jsx(AnswerText, { text: reply.answer }),
+					reply.answer !== "" && /* @__PURE__ */ jsx(AnswerText, { text: reply.answer }),
 					words.closing && /* @__PURE__ */ jsx("p", {
 						className: "sb-reply-closing",
 						children: words.closing
@@ -4444,7 +5447,21 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 					children: [/* @__PURE__ */ jsx(PlayIcon, {}), labels.showMeHow]
 				})
 			}),
-			reply.outcome === "NONE" && reply.supportUrl && /* @__PURE__ */ jsxs("div", {
+			talk && (notCovered ? /* @__PURE__ */ jsx("div", {
+				className: "sb-reply-action",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "sb-secondary sb-talk-button",
+					onClick: talk.onTalk,
+					children: [/* @__PURE__ */ jsx(HeadsetIcon, {}), talk.labels.talkToPerson]
+				})
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "sb-talk",
+				onClick: talk.onTalk,
+				children: [/* @__PURE__ */ jsx(HeadsetIcon, {}), talk.labels.talkToPerson]
+			})),
+			!talk && reply.supportUrl && /* @__PURE__ */ jsxs("div", {
 				className: "sb-support",
 				children: [/* @__PURE__ */ jsx("span", { children: labels.supportOffer }), /* @__PURE__ */ jsxs("a", {
 					className: "sb-support-link",
@@ -4460,82 +5477,10 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 						})
 					]
 				})]
-			}),
-			reply.sources.length > 0 && (latest ? /* @__PURE__ */ jsx(Sources, {
-				sources: reply.sources,
-				labels
-			}) : /* @__PURE__ */ jsx(FoldedSources, {
-				sources: reply.sources,
-				labels,
-				keepInPlace
-			}))
+			})
 		]
 	});
 }
-function Sources({ sources, labels }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-sources",
-		role: "group",
-		"aria-label": labels.sources,
-		children: /* @__PURE__ */ jsx(SourceRows, {
-			sources,
-			labels
-		})
-	});
-}
-function FoldedSources({ sources, labels, keepInPlace }) {
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sb-sources",
-		role: "group",
-		"aria-label": labels.sources,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "sb-sources-toggle",
-			"aria-expanded": open,
-			onClick: () => keepInPlace(() => setOpen((now) => !now)),
-			children: [
-				/* @__PURE__ */ jsx(DocIcon, {}),
-				/* @__PURE__ */ jsx("span", { children: labels.sourcesCount(sources.length) }),
-				/* @__PURE__ */ jsx(ChevronDownIcon, {})
-			]
-		}), open && /* @__PURE__ */ jsx(SourceRows, {
-			sources,
-			labels
-		})]
-	});
-}
-function SourceRows({ sources, labels }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: sources.map((source) => {
-		const name = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DocIcon, {}), /* @__PURE__ */ jsxs("span", {
-			className: "sb-doc-text",
-			children: [source.heading !== void 0 && /* @__PURE__ */ jsx("span", {
-				className: "sb-doc-trail",
-				children: `${source.title} › `
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sb-doc-title",
-				children: source.heading ?? source.title
-			})]
-		})] });
-		return source.url === void 0 ? /* @__PURE__ */ jsx("div", {
-			className: "sb-doc",
-			children: name
-		}, source.id) : /* @__PURE__ */ jsxs("a", {
-			className: "sb-doc",
-			href: source.url,
-			target: "_blank",
-			rel: "noreferrer",
-			children: [
-				name,
-				/* @__PURE__ */ jsx(ExternalIcon, {}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-sr",
-					children: labels.newTab
-				})
-			]
-		}, source.id);
-	}) });
-}
 function FailureNote({ message, fresh, labels, onRetry }) {
 	const { failure } = message;
 	const lost = failure.kind === "lost";
@@ -4641,19 +5586,6 @@ function Stars({ labels, onPick }) {
 		}, rating))
 	});
 }
-function clockTime(iso) {
-	const at = new Date(iso);
-	if (Number.isNaN(at.getTime())) return iso;
-	return at.toLocaleTimeString(void 0, {
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-function minutesUntil(iso) {
-	const at = new Date(iso).getTime();
-	if (Number.isNaN(at)) return 1;
-	return Math.max(1, Math.round((at - Date.now()) / 6e4));
-}
 //#endregion
 //#region src/components/SunboardOverlay.tsx
 function SunboardOverlay({ launcher = true } = {}) {
@@ -4665,4 +5597,4 @@ function SunboardOverlay({ launcher = true } = {}) {
 	] });
 }
 //#endregion
-export { DEFAULT_SUNBOARD_API_URL, HttpTransport, LAUNCH_PARAM, Launcher, MemoryTransport, PREVIEW_EXPIRY_STORAGE, PREVIEW_KEY_STORAGE, PREVIEW_PARAM, SunboardOverlay, SunboardProvider, cooldownActive, detectThemeMode, enLabels, hasSeen, isBootstrapOff, markSeen, pickPushGuide, recordDismissal, resolveAnchor, themeToCssVars, useAnchorElement, useComponentSettings, useCurrentPathname, useGuide, useGuidesApi, useLabels, useLauncher, useTheme, useThemeMode, useTrack };
+export { DEFAULT_SUNBOARD_API_URL, HttpTransport, LAUNCH_PARAM, Launcher, MemoryTransport, PREVIEW_EXPIRY_STORAGE, PREVIEW_KEY_STORAGE, PREVIEW_PARAM, SunboardOverlay, SunboardProvider, cooldownActive, detectThemeMode, enLabels, hasSeen, isBootstrapOff, markSeen, pickPushGuide, recordDismissal, resolveAnchor, themeToCssVars, useAnchorElement, useComponentSettings, useCurrentPathname, useGuide, useGuidesApi, useLabels, useLauncher, useSupport, useTheme, useThemeMode, useTrack };