@clivly/chat-widget 0.14.1 → 0.16.0

package/dist/browser-mount.cjs

@@ -163,16 +163,102 @@ const WIDGET_STYLES = `
 .clivly-chat-widget textarea {
   font: inherit;
 }
+/* The standalone embed does not load the app's shared stylesheet. */
+@media (width < 48rem), (any-pointer: coarse) {
+  .clivly-chat-widget input,
+  .clivly-chat-widget textarea {
+    font-size: max(16px, 1em);
+  }
+}
+/* Floating placements. The insets keep the launcher off a phone's home
+   indicator and rounded corners; --clivly-chat-z-index lets a host slot it
+   beneath its own dialogs. */
+.clivly-chat-widget[data-clivly-placement="bottom-right"],
+.clivly-chat-widget[data-clivly-placement="bottom-left"] {
+  bottom: max(1.25rem, env(safe-area-inset-bottom));
+  position: fixed;
+  z-index: var(--clivly-chat-z-index, 2147483000);
+}
+.clivly-chat-widget[data-clivly-placement="bottom-right"] {
+  right: max(1.25rem, env(safe-area-inset-right));
+}
+.clivly-chat-widget[data-clivly-placement="bottom-left"] {
+  left: max(1.25rem, env(safe-area-inset-left));
+}
 .clivly-chat-widget__launcher {
   align-items: center;
   background: var(--clivly-chat-accent);
   border: 0;
   border-radius: 999px;
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.18),
+    0 10px 28px -10px var(--clivly-chat-accent);
   color: var(--clivly-chat-accent-contrast);
   cursor: pointer;
   display: inline-flex;
+  font-weight: 500;
   gap: 0.5rem;
-  padding: 0.85rem 1.1rem;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0 1.15rem;
+  transition: transform 150ms ease-out, filter 150ms ease-out;
+}
+.clivly-chat-widget__launcher:hover {
+  filter: brightness(1.06);
+  transform: translateY(-1px);
+}
+.clivly-chat-widget__launcher:active {
+  transform: scale(0.96);
+}
+.clivly-chat-widget__launcher:focus-visible {
+  outline: 2px solid var(--clivly-chat-accent);
+  outline-offset: 3px;
+}
+.clivly-chat-widget__launcher-icon {
+  flex-shrink: 0;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+/* Icon-only: a 48px circle — a comfortable touch target that does not cover
+   the host's pagination, toolbars or form controls the way a labelled pill
+   does on a phone. The label is clipped, not removed, so it stays the
+   button's accessible name. */
+.clivly-chat-widget[data-clivly-launcher="icon"] .clivly-chat-widget__launcher {
+  height: 3rem;
+  padding: 0;
+  width: 3rem;
+}
+.clivly-chat-widget[data-clivly-launcher="icon"] .clivly-chat-widget__launcher-label {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+@media (width < 48rem) {
+  .clivly-chat-widget[data-clivly-launcher="auto"] .clivly-chat-widget__launcher {
+    height: 3rem;
+    padding: 0;
+    width: 3rem;
+  }
+  .clivly-chat-widget[data-clivly-launcher="auto"] .clivly-chat-widget__launcher-label {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .clivly-chat-widget__launcher {
+    transition: none;
+  }
+  .clivly-chat-widget__launcher:hover,
+  .clivly-chat-widget__launcher:active {
+    transform: none;
+  }
 }
 .clivly-chat-widget__panel {
   background: var(--clivly-chat-panel);
@@ -188,6 +274,19 @@ const WIDGET_STYLES = `
   bottom: 4.5rem;
   width: min(24rem, calc(100vw - 2rem));
 }
+/* Opens toward the page from whichever corner the launcher is in. */
+.clivly-chat-widget[data-clivly-placement="bottom-left"] .clivly-chat-widget__panel {
+  left: 0;
+  right: auto;
+}
+/* dvh: on a phone vh includes the collapsed URL bar, so a 75vh panel's top
+   edge could slide under it. The 48px launcher sits lower than the pill. */
+@media (width < 48rem) {
+  .clivly-chat-widget__panel {
+    bottom: 4rem;
+    height: min(44rem, calc(100dvh - 6.5rem));
+  }
+}
 .clivly-chat-widget__header {
   border-bottom: 1px solid var(--clivly-chat-border);
   display: flex;
@@ -372,6 +471,47 @@ const WIDGET_STYLES = `
   margin: 0;
   padding: 0.625rem 0.75rem;
 }
+/* Automated and AI messages are marked as such, never styled as a teammate. */
+.clivly-chat-widget__message[data-automation] {
+  background: transparent;
+  border: 1px dashed var(--clivly-chat-border);
+}
+.clivly-chat-widget__badge {
+  border: 1px solid var(--clivly-chat-border);
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  padding: 0 0.4rem;
+}
+.clivly-chat-widget__topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.clivly-chat-widget__topic {
+  background: var(--clivly-chat-panel);
+  border: 1px solid var(--clivly-chat-accent);
+  border-radius: 999px;
+  color: var(--clivly-chat-text);
+  cursor: pointer;
+  font-size: 0.875rem;
+  min-height: 2.25rem;
+  padding: 0.4rem 0.85rem;
+}
+.clivly-chat-widget__topic:hover,
+.clivly-chat-widget__topic:focus-visible {
+  background: var(--clivly-chat-visitor);
+}
+.clivly-chat-widget__topic:focus-visible {
+  outline: 2px solid var(--clivly-chat-accent);
+  outline-offset: 2px;
+}
+.clivly-chat-widget__topic[disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
 .clivly-chat-widget__empty {
   color: var(--clivly-chat-muted);
   font-size: 0.875rem;
@@ -468,8 +608,15 @@ function useResolvedTheme(theme) {
 * protocol reads as a single unit, and so `ChatWidget` stays inside the
 * cognitive-complexity budget.
 */
-function applyServerEvent(event, { setError, setIsReady, setMessages }) {
+function applyServerEvent(event, actions) {
+	const { setError, setIsReady, setMessages } = actions;
 	switch (event.type) {
+		case "assistant.status":
+			actions.setAssistantThinking(event.status === "thinking");
+			return;
+		case "support.state":
+			actions.setSupportState(event.state);
+			return;
 		case "conversation.snapshot":
 			setMessages(sortMessages(event.messages.map((message) => createLocalMessage(message))));
 			return;
@@ -490,14 +637,80 @@ function applyServerEvent(event, { setError, setIsReady, setMessages }) {
 		default: return;
 	}
 }
+/**
+* What a message from the support assistant is called. Automated
+* acknowledgements, AI answers and people are never presented alike, so a
+* visitor is never led to think a person has read their message.
+*/
+const AUTOMATION_BADGES = {
+	ai: "AI assistant",
+	ai_clarify: "AI assistant",
+	greeting: "Automated",
+	handoff: "Automated",
+	topic: "Automated"
+};
+const AUTHOR_LABEL_SUFFIX = / · (?:Automated|AI assistant)$/;
+function automationBadge(message) {
+	if (message.senderType !== "system" || !message.automation) return null;
+	return AUTOMATION_BADGES[message.automation] ?? "Automated";
+}
+/**
+* The button that opens and closes the panel. Its size and shape come from the
+* 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 }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"aria-controls": open ? panelId : void 0,
+		"aria-expanded": open,
+		className: "clivly-chat-widget__launcher",
+		onClick: onToggle,
+		type: "button",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LauncherIcon, { open }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "clivly-chat-widget__launcher-label",
+			children: label
+		})]
+	});
+}
+/**
+* A chat bubble while closed, a cross while open — so the icon-only launcher
+* still tells a sighted visitor what tapping it will do. Decorative: the
+* label and `aria-expanded` carry the meaning for assistive technology.
+* Inline SVG because the script-tag build renders inside a shadow root with no
+* icon font or stylesheet of the host's to borrow.
+*/
+function LauncherIcon({ open }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		className: "clivly-chat-widget__launcher-icon",
+		fill: "none",
+		focusable: "false",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		viewBox: "0 0 24 24",
+		children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })
+	});
+}
 function MessageBubble({ message }) {
+	const badge = automationBadge(message);
+	const author = badge ? (message.author ?? "").replace(AUTHOR_LABEL_SUFFIX, "") : message.author;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 		className: "clivly-chat-widget__message",
+		"data-automation": badge ? message.automation : void 0,
 		"data-sender": message.senderType,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "clivly-chat-widget__message-meta",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message.author ?? "Clivly" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatTimestamp(message.createdAt) })]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: author || "Clivly" }),
+					badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "clivly-chat-widget__badge",
+						children: badge
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatTimestamp(message.createdAt) })
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: message.body }),
 			message.delivery === "sent" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -540,6 +753,7 @@ function awaitingReplySince(messages) {
 	for (let index = messages.length - 1; index >= 0; index--) {
 		const message = messages[index];
 		if (!message || message.delivery === "failed") continue;
+		if (message.senderType === "system" || message.automation === "topic_choice") continue;
 		if (message.senderType !== "visitor") return null;
 		return new Date(message.createdAt).getTime();
 	}
@@ -589,60 +803,148 @@ function isCompleteVisitor(visitor) {
 * the visitor is told to wait for something that will never arrive. The third
 * string keeps the status honest in all three states.
 */
-function composerStatusText(hasTransport, isReady) {
+function composerStatusText(hasTransport, isReady, reconnecting) {
 	if (!hasTransport) return "Chat is unavailable";
-	return isReady ? "Conversation ready" : "Connecting…";
+	if (isReady) return "Conversation ready";
+	return reconnecting ? "Reconnecting…" : "Connecting…";
 }
-function ChatWidget({ className, createTransport, defaultVisitor, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
-	const [isOpen, setIsOpen] = (0, react.useState)(initiallyOpen);
-	const [error, setError] = (0, react.useState)(null);
-	const [isConnecting, setIsConnecting] = (0, react.useState)(false);
-	const [isReady, setIsReady] = (0, react.useState)(false);
-	const [messageDraft, setMessageDraft] = (0, react.useState)("");
-	const [messages, setMessages] = (0, react.useState)([]);
-	const [session, setSession] = (0, react.useState)(null);
-	const [visitor, setVisitor] = (0, react.useState)({
-		email: defaultVisitor?.email ?? "",
-		name: defaultVisitor?.name ?? ""
+/**
+* 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.
+*/
+function SupportTopics({ disabled, onSelect, topics }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		"aria-label": "Suggested topics",
+		className: "clivly-chat-widget__topics",
+		children: topics.map((topic) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "clivly-chat-widget__topic",
+			disabled,
+			onClick: () => {
+				onSelect(topic);
+			},
+			type: "button",
+			children: topic.label
+		}) }, topic.id))
 	});
-	const transportRef = (0, react.useRef)(null);
-	const listRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (createTransport) return;
-		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
-	}, []);
-	const showWaitingNotice = useWaitingNotice(messages);
-	const themeStyle = useThemeStyle(session, style);
-	const resolvedTheme = useResolvedTheme(theme);
-	(0, react.useEffect)(() => () => {
-		transportRef.current?.close();
-		transportRef.current = null;
-	}, []);
+}
+/** Topics are offered only while automation is answering this conversation. */
+function visibleTopics(session, state) {
+	return state === "automated" ? session?.support?.topics ?? [] : [];
+}
+function composerPlaceholder(hasTopics) {
+	return hasTopics ? "Or type your question" : "Write your message";
+}
+/**
+* Hand one visitor message to the transport: a topic click as `topic.select`
+* when the transport supports it (the server resolves the answer), otherwise
+* as the label, typed. Throws what the transport throws.
+*/
+function dispatchVisitorMessage(transport, clientMessageId, body, topic) {
+	if (topic && transport.selectTopic) {
+		transport.selectTopic({
+			id: clientMessageId,
+			topicId: topic.id,
+			type: "topic.select"
+		});
+		return;
+	}
+	transport.sendMessage({
+		body,
+		id: clientMessageId,
+		type: "message.create"
+	});
+}
+/**
+* One honest status line: the AI is working on an answer, or — once the
+* visitor has waited — that the team has been told. Never both.
+*/
+function StatusNotice({ assistantThinking, email, showWaitingNotice }) {
+	if (assistantThinking) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "clivly-chat-widget__notice",
+		role: "status",
+		children: "The AI assistant is looking for an answer…"
+	});
+	if (!showWaitingNotice) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "clivly-chat-widget__notice",
+		role: "status",
+		children: waitingNoticeText(email)
+	});
+}
+const RECONNECT_BASE_MS = 1e3;
+const RECONNECT_MAX_MS = 3e4;
+/**
+* How long to wait before reconnect attempt `attempt` (0-based): doubling from
+* one second to a 30-second ceiling, ±25% jitter so a fleet of widgets dropped
+* by the same server restart doesn't reconnect in lockstep.
+*/
+function reconnectDelayMs(attempt, random = Math.random) {
+	const base = Math.min(RECONNECT_MAX_MS, RECONNECT_BASE_MS * 2 ** attempt);
+	return Math.round(base * (.75 + random() * .5));
+}
+/**
+* Keep the socket for `session` open, and reconnect when it drops — a laptop
+* waking, a network change, a server deploy — instead of leaving the visitor at
+* "Connecting…" until they reload. A reconnect refreshes the session (same
+* conversation, fresh token) and the server's snapshot on connect brings back
+* anything that arrived meanwhile. Returns whether a reconnect is pending.
+*/
+function useLiveConnection({ actions, createTransport, refreshSession, session, setIsReady, transportRef }) {
+	const [reconnecting, setReconnecting] = (0, react.useState)(false);
+	const attemptRef = (0, react.useRef)(0);
+	const refreshRef = (0, react.useRef)(refreshSession);
+	const actionsRef = (0, react.useRef)(actions);
 	(0, react.useEffect)(() => {
-		if (!listRef.current) return;
-		listRef.current.scrollTop = listRef.current.scrollHeight;
-	}, [messages]);
+		refreshRef.current = refreshSession;
+		actionsRef.current = actions;
+	});
 	(0, react.useEffect)(() => {
 		transportRef.current?.close();
 		transportRef.current = null;
 		setIsReady(false);
 		if (!(session && createTransport)) return;
+		let disposed = false;
+		let timer;
+		const retry = () => {
+			timer = void 0;
+			refreshRef.current(session).catch(() => {
+				scheduleReconnect();
+			});
+		};
+		const scheduleReconnect = () => {
+			if (disposed || timer !== void 0) return;
+			setReconnecting(true);
+			timer = setTimeout(retry, reconnectDelayMs(attemptRef.current));
+			attemptRef.current += 1;
+		};
+		const retryNow = () => {
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				retry();
+			}
+		};
+		window.addEventListener("online", retryNow);
 		const connection = createTransport({
 			handlers: {
 				onClose: () => {
 					setIsReady(false);
+					actionsRef.current.setAssistantThinking(false);
+					scheduleReconnect();
 				},
 				onError: (transportError) => {
-					setError(transportError.message);
+					if (attemptRef.current === 0) actionsRef.current.setError(transportError.message);
 				},
 				onEvent: (event) => {
 					applyServerEvent(event, {
-						setError,
-						setIsReady,
-						setMessages
+						...actionsRef.current,
+						setIsReady
 					});
 				},
 				onOpen: () => {
+					if (attemptRef.current > 0) actionsRef.current.setError(null);
+					attemptRef.current = 0;
+					setReconnecting(false);
 					setIsReady(true);
 				}
 			},
@@ -650,10 +952,72 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		});
 		transportRef.current = connection;
 		return () => {
+			disposed = true;
+			if (timer !== void 0) clearTimeout(timer);
+			window.removeEventListener("online", retryNow);
 			connection.close();
 			if (transportRef.current === connection) transportRef.current = null;
 		};
 	}, [createTransport, session]);
+	return reconnecting;
+}
+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] = (0, react.useState)(initiallyOpen);
+	const panelId = (0, react.useId)();
+	const [error, setError] = (0, react.useState)(null);
+	const [isConnecting, setIsConnecting] = (0, react.useState)(false);
+	const [isReady, setIsReady] = (0, react.useState)(false);
+	const [messageDraft, setMessageDraft] = (0, react.useState)("");
+	const [messages, setMessages] = (0, react.useState)([]);
+	const [session, setSession] = (0, react.useState)(null);
+	const [supportState, setSupportState] = (0, react.useState)(null);
+	const [assistantThinking, setAssistantThinking] = (0, react.useState)(false);
+	const [visitor, setVisitor] = (0, react.useState)({
+		email: defaultVisitor?.email ?? "",
+		name: defaultVisitor?.name ?? ""
+	});
+	const transportRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const identityRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (createTransport) return;
+		console.warn("[clivly] <ChatWidget> was given no createTransport, so messages cannot be sent. Pass createTransport={createClivlyTransport()} — see https://www.npmjs.com/package/@clivly/chat-widget#five-minute-quick-start");
+	}, []);
+	const showWaitingNotice = useWaitingNotice(messages);
+	const themeStyle = useThemeStyle(session, style);
+	const resolvedTheme = useResolvedTheme(theme);
+	(0, react.useEffect)(() => () => {
+		transportRef.current?.close();
+		transportRef.current = null;
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!listRef.current) return;
+		listRef.current.scrollTop = listRef.current.scrollHeight;
+	}, [messages]);
+	const reconnecting = useLiveConnection({
+		actions: {
+			setAssistantThinking,
+			setError,
+			setMessages,
+			setSupportState
+		},
+		createTransport,
+		refreshSession: async (current) => {
+			const identity = identityRef.current;
+			if (!identity) throw new Error("No visitor to reconnect as.");
+			const next = await getSession({
+				visitor: identity,
+				visitorToken: current.visitorToken,
+				widgetId
+			});
+			storage?.setItem(createStorageKey(widgetId), next.visitorToken);
+			setSupportState(next.support?.state ?? null);
+			setSession(next);
+		},
+		session,
+		setIsReady,
+		transportRef
+	});
 	(0, react.useEffect)(() => {
 		if (!(isOpen && isReady)) return;
 		const markReadIfVisible = () => {
@@ -681,6 +1045,8 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 				widgetId
 			});
 			storage?.setItem(createStorageKey(widgetId), nextSession.visitorToken);
+			identityRef.current = identity;
+			setSupportState(nextSession.support?.state ?? null);
 			setSession(nextSession);
 			setMessages(sortMessages(nextSession.messages.map((message) => createLocalMessage(message))));
 		} catch (sessionError) {
@@ -713,58 +1079,68 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 		session,
 		startSession
 	]);
-	const submitMessage = (event) => {
-		event?.preventDefault();
-		if (!(session && transportRef.current)) {
+	/**
+	* 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
+	* server resolves the answer; otherwise as the label, typed.
+	*/
+	const sendVisitorMessage = (body, topic) => {
+		const transport = transportRef.current;
+		if (!(session && transport)) {
 			setError("Chat is not connected yet.");
 			return;
 		}
-		const body = messageDraft.trim();
-		if (!body) return;
 		const clientMessageId = generateId();
 		const optimisticMessage = {
 			author: sessionDisplayName(session),
+			automation: topic && transport.selectTopic ? "topic_choice" : null,
 			body,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			id: clientMessageId,
 			senderType: "visitor"
 		};
 		setMessages((currentMessages) => sortMessages([...currentMessages, createLocalMessage(optimisticMessage, "pending")]));
-		setMessageDraft("");
 		setError(null);
 		try {
-			transportRef.current.sendMessage({
-				body,
-				id: clientMessageId,
-				type: "message.create"
-			});
+			dispatchVisitorMessage(transport, clientMessageId, body, topic);
 		} catch (transportError) {
 			const resolved = transportError instanceof Error ? transportError : /* @__PURE__ */ new Error("Failed to send your message.");
 			setMessages((currentMessages) => markMessageFailed(currentMessages, clientMessageId));
 			setError(resolved.message);
 		}
 	};
+	const submitMessage = (event) => {
+		event?.preventDefault();
+		const body = messageDraft.trim();
+		if (!body) return;
+		setMessageDraft("");
+		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);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
+		"data-clivly-launcher": launcher,
+		"data-clivly-placement": placement,
 		"data-clivly-theme": resolvedTheme,
 		style: themeStyle,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: WIDGET_STYLES }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: "clivly-chat-widget__launcher",
-				onClick: () => {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Launcher, {
+				label: launcherLabel,
+				onToggle: () => {
 					setIsOpen((open) => !open);
 				},
-				type: "button",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: launcherLabel })
+				open: isOpen,
+				panelId
 			}),
 			isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				"aria-label": panelTitle,
 				className: "clivly-chat-widget__panel",
+				id: panelId,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 						className: "clivly-chat-widget__header",
@@ -785,8 +1161,10 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						"aria-label": "Conversation",
 						className: "clivly-chat-widget__body",
 						ref: listRef,
+						role: "log",
 						children: [
 							error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "clivly-chat-widget__error",
@@ -797,10 +1175,17 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 								hasSession: Boolean(session),
 								messages
 							}),
-							session && showWaitingNotice ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "clivly-chat-widget__notice",
-								role: "status",
-								children: waitingNoticeText(session.contact?.email)
+							topics.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SupportTopics, {
+								disabled: !canSend,
+								onSelect: (topic) => {
+									sendVisitorMessage(topic.label, topic);
+								},
+								topics
+							}) : null,
+							session ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusNotice, {
+								assistantThinking,
+								email: session.contact?.email,
+								showWaitingNotice
 							}) : null
 						]
 					}),
@@ -822,14 +1207,15 @@ function ChatWidget({ className, createTransport, defaultVisitor, getSession, in
 									event.preventDefault();
 									if (messageDraft.trim() && canSend) submitMessage();
 								},
-								placeholder: "Write your message",
+								placeholder: composerPlaceholder(topics.length > 0),
 								value: messageDraft
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "clivly-chat-widget__actions",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-live": "polite",
 								className: "clivly-chat-widget__subtitle",
-								children: composerStatusText(Boolean(createTransport), isReady)
+								children: composerStatusText(Boolean(createTransport), isReady, reconnecting)
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								className: "clivly-chat-widget__button",
 								disabled: !(messageDraft.trim() && canSend),
@@ -948,6 +1334,10 @@ function createWebSocketTransport({ createSocket = (url, protocols) => new WebSo
 			markRead: () => {
 				if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "conversation.read" }));
 			},
+			selectTopic: (event) => {
+				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
+				socket.send(JSON.stringify(event));
+			},
 			sendMessage: (message) => {
 				if (socket.readyState !== WebSocket.OPEN) throw new Error("Chat socket is not connected.");
 				socket.send(JSON.stringify(message));
@@ -974,6 +1364,26 @@ function createClivlyTransport(options = {}) {
 	});
 }
 //#endregion
+//#region src/layout.ts
+const PLACEMENTS = [
+	"bottom-left",
+	"bottom-right",
+	"inline"
+];
+const LAUNCHERS = [
+	"auto",
+	"icon",
+	"pill"
+];
+/** A script tag's `data-placement`; anything unrecognised floats bottom-right. */
+function parsePlacement(value) {
+	return PLACEMENTS.find((placement) => placement === value) ?? "bottom-right";
+}
+/** A script tag's `data-launcher`; anything unrecognised is `"auto"`. */
+function parseLauncher(value) {
+	return LAUNCHERS.find((launcher) => launcher === value) ?? "auto";
+}
+//#endregion
 //#region src/session.ts
 function isWidgetSessionPayload(value) {
 	return typeof value === "object" && value !== null;
@@ -1071,6 +1481,8 @@ function mountChatWidgetScript(script = document.currentScript) {
 	const { root, setTheme } = createWidgetMount({
 		container,
 		defaultVisitor: readScriptVisitor(script.dataset),
+		launcher: parseLauncher(script.dataset.launcher),
+		placement: parsePlacement(script.dataset.placement),
 		sessionUrl,
 		socketUrlTemplate: script.dataset.socketUrlTemplate,
 		theme: parseTheme(script.dataset.theme),