polymorph-sdk 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -48,9 +48,13 @@ export declare interface WidgetBranding {
 export declare interface WidgetConfig {
     apiBaseUrl: string;
     apiKey?: string;
+    /** Server-side widget config ID. When set, metadata is ignored and config is resolved server-side. */
+    configId?: string;
     /** LiveKit dispatched agent name (default: "custom-voice-agent"). */
     agentName?: string;
     metadata?: Record<string, string | string[]>;
+    /** Pre-filled user identity. When provided, the agent skips asking for these fields. */
+    user?: WidgetUser;
     branding?: WidgetBranding;
     position?: "bottom-right" | "bottom-left";
     /** Enable voice call (default: true). When false, widget is chat-only. */
@@ -61,4 +65,13 @@ export declare interface WidgetConfig {
     darkMode?: boolean;
 }
 
+declare interface WidgetUser {
+    /** Display name (e.g. "Jane Smith") */
+    name?: string;
+    /** Email address */
+    email?: string;
+    /** Phone number */
+    phone?: string;
+}
+
 export { }

package/dist/index.js

@@ -17680,31 +17680,33 @@ function RoomHandler({ setRoom: t, addMessage: a, isVoiceEnabled: s }) {
 	}, [c, a]), /* @__PURE__ */ jsx(ba, {});
 }
 var styles_module_default = {
-	widgetRoot: "_widgetRoot_e2sak_1",
-	bottomRight: "_bottomRight_e2sak_12",
-	bottomLeft: "_bottomLeft_e2sak_18",
-	fab: "_fab_e2sak_25",
-	panel: "_panel_e2sak_47",
-	header: "_header_e2sak_62",
-	chatThread: "_chatThread_e2sak_70",
-	messageBubble: "_messageBubble_e2sak_81",
-	agentMessage: "_agentMessage_e2sak_90",
-	userMessage: "_userMessage_e2sak_96",
-	voiceLabel: "_voiceLabel_e2sak_101",
-	voiceOverlay: "_voiceOverlay_e2sak_107",
-	voiceBars: "_voiceBars_e2sak_117",
-	voiceBar: "_voiceBar_e2sak_117",
-	voiceToggle: "_voiceToggle_e2sak_154",
-	voiceToggleActive: "_voiceToggleActive_e2sak_173",
-	inputBar: "_inputBar_e2sak_183",
-	inputField: "_inputField_e2sak_191",
-	iconButton: "_iconButton_e2sak_207",
-	iconButtonActive: "_iconButtonActive_e2sak_232",
-	connectButton: "_connectButton_e2sak_236",
-	statusBadge: "_statusBadge_e2sak_257",
-	errorText: "_errorText_e2sak_264",
-	thinkingDots: "_thinkingDots_e2sak_270",
-	thinkingDot: "_thinkingDot_e2sak_270"
+	widgetRoot: "_widgetRoot_n856n_1",
+	bottomRight: "_bottomRight_n856n_2",
+	bottomLeft: "_bottomLeft_n856n_3",
+	fab: "_fab_n856n_4",
+	fabOpen: "_fabOpen_n856n_6",
+	panel: "_panel_n856n_8",
+	panelHidden: "_panelHidden_n856n_9",
+	header: "_header_n856n_10",
+	chatThread: "_chatThread_n856n_11",
+	messageBubble: "_messageBubble_n856n_12",
+	messageAppear: "_messageAppear_n856n_1",
+	agentMessage: "_agentMessage_n856n_14",
+	userMessage: "_userMessage_n856n_15",
+	voiceLabel: "_voiceLabel_n856n_16",
+	voiceOverlay: "_voiceOverlay_n856n_17",
+	voiceBars: "_voiceBars_n856n_18",
+	voiceBar: "_voiceBar_n856n_18",
+	voiceToggle: "_voiceToggle_n856n_24",
+	voiceToggleActive: "_voiceToggleActive_n856n_26",
+	inputBar: "_inputBar_n856n_28",
+	inputField: "_inputField_n856n_29",
+	iconButton: "_iconButton_n856n_31",
+	iconButtonActive: "_iconButtonActive_n856n_34",
+	statusBadge: "_statusBadge_n856n_35",
+	errorText: "_errorText_n856n_36",
+	thinkingDots: "_thinkingDots_n856n_37",
+	thinkingDot: "_thinkingDot_n856n_37"
 };
 function hexToMantineTuple(t) {
 	let a = Number.parseInt(t.slice(1, 3), 16), s = Number.parseInt(t.slice(3, 5), 16), c = Number.parseInt(t.slice(5, 7), 16), l = (t) => `#${[
@@ -17757,115 +17759,143 @@ async function ensureCsrf(t, a) {
 	}
 }
 function usePolymorphSession(t) {
-	let a = (t.agentName || "").toLowerCase().includes("chat-agent"), c = t.enableVoice !== !1 && !a, [u, d] = useState("idle"), [m, g] = useState(null), [v, y] = useState([]), [b, x] = useState(c), [S, C] = useState(c), [w, E] = useState(null), O = useRef(null);
+	let a = (t.agentName || "").toLowerCase().includes("chat-agent"), c = t.enableVoice !== !1 && !a, [u, d] = useState("idle"), [m, g] = useState(null), v = t.branding?.greeting, [y, b] = useState(() => v ? [{
+		id: "greeting",
+		role: "agent",
+		text: v,
+		source: "chat",
+		timestamp: Date.now()
+	}] : []), [x, S] = useState(c), [C, w] = useState(c), [E, O] = useState(null), j = useRef(null), R = useRef([]);
 	useEffect(() => {
-		x(c), C(c), O.current && O.current.localParticipant.setMicrophoneEnabled(c);
+		S(c), w(c), j.current && j.current.localParticipant.setMicrophoneEnabled(c);
 	}, [c]);
-	let j = useCallback((t, a, s) => {
-		y((c) => [...c, {
+	let V = useCallback((t, a, s) => {
+		b((c) => [...c, {
 			id: crypto.randomUUID(),
 			role: t,
 			text: a,
 			source: s,
 			timestamp: Date.now()
 		}]);
-	}, []);
+	}, []), H = useCallback(async () => {
+		if (!(u === "connecting" || u === "connected")) {
+			d("connecting"), O(null);
+			try {
+				let { headers: a,...s } = t.fetchOptions ?? {}, c = {};
+				if (t.apiKey) c.Authorization = `Bearer ${t.apiKey}`;
+				else if (s.credentials === "include") {
+					await ensureCsrf(t.apiBaseUrl, s);
+					let a = sessionStorage.getItem(csrfStorageKey);
+					a && (c["x-csrf-token"] = a);
+				}
+				let l = "polymorph_widget_session", u = localStorage.getItem(l) ?? void 0;
+				u || (u = `widget-session-${crypto.randomUUID().slice(0, 12)}`, localStorage.setItem(l, u));
+				let d = await fetch(`${t.apiBaseUrl}/voice-rooms/start`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						...c,
+						...a instanceof Headers ? Object.fromEntries(a.entries()) : a
+					},
+					body: JSON.stringify({
+						agent_name: t.agentName || "custom-voice-agent",
+						config_id: t.configId ?? void 0,
+						metadata: t.configId ? void 0 : {
+							...t.metadata,
+							...t.branding?.greeting && { greeting: t.branding.greeting },
+							...t.user?.name && { user_name: t.user.name },
+							...t.user?.email && { user_email: t.user.email },
+							...t.user?.phone && { user_phone: t.user.phone }
+						},
+						user_name: t.user?.name,
+						external_user_id: u
+					}),
+					...s
+				});
+				if (d.status === 403 && sessionStorage.removeItem(csrfStorageKey), !d.ok) throw Error(await d.text() || "Failed to start session");
+				let f = await d.json();
+				g({
+					token: f.token,
+					livekitUrl: f.livekit_url
+				});
+			} catch (t) {
+				O(t instanceof Error ? t.message : "Something went wrong"), d("error");
+			}
+		}
+	}, [t, u]);
 	return {
 		status: u,
 		roomConnection: m,
-		messages: v,
-		isVoiceEnabled: b,
-		isMicActive: S,
-		error: w,
-		connect: useCallback(async () => {
-			if (!(u === "connecting" || u === "connected")) {
-				d("connecting"), E(null);
-				try {
-					let { headers: a,...s } = t.fetchOptions ?? {}, c = {};
-					if (t.apiKey) c.Authorization = `Bearer ${t.apiKey}`;
-					else if (s.credentials === "include") {
-						await ensureCsrf(t.apiBaseUrl, s);
-						let a = sessionStorage.getItem(csrfStorageKey);
-						a && (c["x-csrf-token"] = a);
-					}
-					let l = "polymorph_widget_session", u = localStorage.getItem(l) ?? void 0;
-					u || (u = `widget-session-${crypto.randomUUID().slice(0, 12)}`, localStorage.setItem(l, u));
-					let d = await fetch(`${t.apiBaseUrl}/voice-rooms/start`, {
-						method: "POST",
-						headers: {
-							"Content-Type": "application/json",
-							...c,
-							...a instanceof Headers ? Object.fromEntries(a.entries()) : a
-						},
-						body: JSON.stringify({
-							agent_name: t.agentName || "custom-voice-agent",
-							metadata: {
-								...t.metadata,
-								...t.branding?.greeting && { greeting: t.branding.greeting }
-							},
-							external_user_id: u
-						}),
-						...s
-					});
-					if (d.status === 403 && sessionStorage.removeItem(csrfStorageKey), !d.ok) throw Error(await d.text() || "Failed to start session");
-					let f = await d.json();
-					g({
-						token: f.token,
-						livekitUrl: f.livekit_url
-					});
-				} catch (t) {
-					E(t instanceof Error ? t.message : "Something went wrong"), d("error");
-				}
-			}
-		}, [t, u]),
+		messages: y,
+		isVoiceEnabled: x,
+		isMicActive: C,
+		error: E,
+		connect: H,
 		disconnect: useCallback(() => {
-			O.current?.disconnect(), O.current = null, g(null), d("idle");
+			j.current?.disconnect(), j.current = null, g(null), d("idle");
 		}, []),
-		addMessage: j,
+		addMessage: V,
 		sendMessage: useCallback((t) => {
-			let a = O.current;
-			if (!a || !t.trim()) return;
-			j("user", t.trim(), "chat");
-			let s = new TextEncoder().encode(JSON.stringify({ text: t.trim() }));
-			a.localParticipant.publishData(s, {
-				reliable: !0,
-				topic: "chat_message"
-			});
-		}, [j]),
+			if (!t.trim()) return;
+			let a = t.trim();
+			V("user", a, "chat");
+			let s = j.current;
+			if (s) {
+				let t = new TextEncoder().encode(JSON.stringify({ text: a }));
+				s.localParticipant.publishData(t, {
+					reliable: !0,
+					topic: "chat_message"
+				});
+			} else R.current.push(a), H();
+		}, [V, H]),
 		toggleMic: useCallback(async () => {
-			let t = O.current;
+			let t = j.current;
 			if (!t) return;
-			let a = !S;
-			await t.localParticipant.setMicrophoneEnabled(a), C(a);
-		}, [S]),
+			let a = !C;
+			await t.localParticipant.setMicrophoneEnabled(a), w(a);
+		}, [C]),
 		toggleVoice: useCallback(async () => {
-			let t = O.current;
+			let t = j.current;
 			if (!t) return;
-			let a = !b;
-			await t.localParticipant.setMicrophoneEnabled(a), x(a), C(a);
+			let a = !x;
+			await t.localParticipant.setMicrophoneEnabled(a), S(a), w(a);
 			let s = new TextEncoder().encode(JSON.stringify({ voice_enabled: a }));
 			t.localParticipant.publishData(s, {
 				reliable: !0,
 				topic: "voice_mode"
 			});
-		}, [b]),
+		}, [x]),
 		setRoom: useCallback((t) => {
-			O.current = t, t && d("connected");
+			if (j.current = t, t) {
+				d("connected");
+				let a = R.current.splice(0);
+				for (let s of a) {
+					let a = new TextEncoder().encode(JSON.stringify({ text: s }));
+					t.localParticipant.publishData(a, {
+						reliable: !0,
+						topic: "chat_message"
+					});
+				}
+			}
 		}, [])
 	};
 }
-function ChatThread({ messages: t, primaryColor: a, status: s }) {
-	let c = useRef(null), u = useRef(null), d = t.filter((t) => t.role === "agent").length;
-	s === "connecting" && u.current === null && (u.current = d), (s === "idle" || s === "error") && (u.current = null);
-	let p = (s === "connecting" || s === "connected") && u.current !== null && d <= u.current, m = s === "connected" && t.length > 0 && t[t.length - 1].role === "user", y = p || m;
-	return useEffect(() => {
-		c.current?.scrollTo({
-			top: c.current.scrollHeight,
+function ChatThread({ messages: t, primaryColor: a, status: c }) {
+	let l = useRef(null), u = useRef(!0), d = useRef(0), p = useRef(null), m = t.filter((t) => t.role === "agent").length, y = t.length > 0 && t[t.length - 1].role === "user", b = useCallback(() => {
+		let t = l.current;
+		t && (u.current = t.scrollHeight - t.scrollTop - t.clientHeight < 100);
+	}, []);
+	c === "connecting" && p.current === null && (p.current = m), (c === "idle" || c === "error") && (p.current = null);
+	let x = (c === "connecting" || c === "connected") && p.current !== null && m <= p.current, S = c === "connected" && t.length > 0 && t[t.length - 1].role === "user", C = x || S, w = t.length + (C ? 1 : 0);
+	return w !== d.current && (d.current = w, (u.current || y) && queueMicrotask(() => {
+		l.current?.scrollTo({
+			top: l.current.scrollHeight,
 			behavior: "smooth"
 		});
-	}, []), /* @__PURE__ */ jsxs("div", {
-		ref: c,
+	})), /* @__PURE__ */ jsxs("div", {
+		ref: l,
 		className: styles_module_default.chatThread,
+		onScroll: b,
 		children: [t.map((t) => /* @__PURE__ */ jsxs("div", {
 			className: `${styles_module_default.messageBubble} ${t.role === "user" ? styles_module_default.userMessage : styles_module_default.agentMessage}`,
 			style: t.role === "user" ? { backgroundColor: a } : void 0,
@@ -17873,7 +17903,7 @@ function ChatThread({ messages: t, primaryColor: a, status: s }) {
 				className: styles_module_default.voiceLabel,
 				children: "voice"
 			})]
-		}, t.id)), y && /* @__PURE__ */ jsx("div", {
+		}, t.id)), C && /* @__PURE__ */ jsx("div", {
 			className: `${styles_module_default.messageBubble} ${styles_module_default.agentMessage}`,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: styles_module_default.thinkingDots,
@@ -17969,6 +17999,7 @@ function MicIcon() {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		children: [
+			/* @__PURE__ */ jsx("title", { children: "Microphone on" }),
 			/* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
 			/* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
 			/* @__PURE__ */ jsx("line", {
@@ -17992,6 +18023,7 @@ function MicOffIcon() {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		children: [
+			/* @__PURE__ */ jsx("title", { children: "Microphone off" }),
 			/* @__PURE__ */ jsx("line", {
 				x1: "2",
 				x2: "22",
@@ -18022,7 +18054,11 @@ function SendIcon() {
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }), /* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })]
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "Send" }),
+			/* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })
+		]
 	});
 }
 function CloseIcon() {
@@ -18036,17 +18072,28 @@ function CloseIcon() {
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "Close" }),
+			/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+			/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+		]
 	});
 }
-function WidgetPanel({ config: t, session: a, onClose: c }) {
-	let [l, u] = useState(""), d = t.branding?.primaryColor || "#171717", f = (t.agentName || "").toLowerCase().includes("chat-agent"), m = useCallback(() => {
-		l.trim() && (a.sendMessage(l), u(""));
-	}, [l, a]), y = useCallback((t) => {
-		t.key === "Enter" && !t.shiftKey && (t.preventDefault(), m());
-	}, [m]);
+function WidgetPanel({ config: t, session: a, onClose: c, hidden: l }) {
+	let [u, d] = useState(""), m = useRef(null), y = t.branding?.primaryColor || "#171717", b = (t.agentName || "").toLowerCase().includes("chat-agent"), x = useCallback(() => {
+		if (!u.trim()) return;
+		a.sendMessage(u), d("");
+		let t = m.current;
+		t && (t.style.height = "auto");
+	}, [u, a]), S = useCallback((t) => {
+		t.key === "Enter" && !t.shiftKey && (t.preventDefault(), x());
+	}, [x]), C = useCallback(() => {
+		let t = m.current;
+		t && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: styles_module_default.panel,
+		className: `${styles_module_default.panel} ${l ? styles_module_default.panelHidden : ""}`,
+		"aria-hidden": l,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: styles_module_default.header,
@@ -18072,10 +18119,10 @@ function WidgetPanel({ config: t, session: a, onClose: c }) {
 			}),
 			/* @__PURE__ */ jsx(ChatThread, {
 				messages: a.messages,
-				primaryColor: d,
+				primaryColor: y,
 				status: a.status
 			}),
-			!f && /* @__PURE__ */ jsx(VoiceOverlay, {
+			!b && /* @__PURE__ */ jsx(VoiceOverlay, {
 				isVoiceEnabled: a.isVoiceEnabled,
 				isMicActive: a.isMicActive,
 				status: a.status,
@@ -18085,36 +18132,28 @@ function WidgetPanel({ config: t, session: a, onClose: c }) {
 				className: styles_module_default.errorText,
 				children: a.error
 			}),
-			a.status === "idle" || a.status === "error" ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: styles_module_default.connectButton,
-				style: { backgroundColor: d },
-				onClick: a.connect,
-				children: "Start conversation"
-			}) : a.status === "connecting" ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: styles_module_default.connectButton,
-				style: { backgroundColor: d },
-				disabled: !0,
-				children: "Connecting..."
-			}) : /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: styles_module_default.inputBar,
 				children: [
-					/* @__PURE__ */ jsx("input", {
+					/* @__PURE__ */ jsx("textarea", {
+						ref: m,
 						className: styles_module_default.inputField,
-						placeholder: "Type a message...",
-						value: l,
-						onChange: (t) => u(t.target.value),
-						onKeyDown: y
+						placeholder: a.status === "connecting" ? "Connecting..." : "Type a message...",
+						value: u,
+						onChange: (t) => d(t.target.value),
+						onInput: C,
+						onKeyDown: S,
+						disabled: a.status === "connecting",
+						rows: 1
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: styles_module_default.iconButton,
-						onClick: m,
-						disabled: !l.trim(),
+						onClick: x,
+						disabled: !u.trim() || a.status === "connecting",
 						children: /* @__PURE__ */ jsx(SendIcon, {})
 					}),
-					a.isVoiceEnabled && !f && /* @__PURE__ */ jsx("button", {
+					a.isVoiceEnabled && !b && a.status === "connected" && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: `${styles_module_default.iconButton} ${a.isMicActive ? styles_module_default.iconButtonActive : ""}`,
 						onClick: a.toggleMic,
@@ -18126,7 +18165,7 @@ function WidgetPanel({ config: t, session: a, onClose: c }) {
 	});
 }
 function ChatIcon() {
-	return /* @__PURE__ */ jsx("svg", {
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "24",
 		height: "24",
@@ -18136,7 +18175,25 @@ function ChatIcon() {
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: /* @__PURE__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })
+		children: [/* @__PURE__ */ jsx("title", { children: "Chat" }), /* @__PURE__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })]
+	});
+}
+function FabCloseIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "Close" }),
+			/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+			/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+		]
 	});
 }
 function PolymorphWidget(t) {
@@ -18151,21 +18208,18 @@ function PolymorphWidget(t) {
 			cssVariablesSelector: ".polymorph-widget",
 			getRootElement: () => y.current ?? void 0,
 			children: [
-				c && /* @__PURE__ */ jsx(WidgetPanel, {
+				/* @__PURE__ */ jsx(WidgetPanel, {
 					config: t,
 					session: u,
-					onClose: () => {
-						u.disconnect(), l(!1);
-					}
+					onClose: () => l(!1),
+					hidden: !c
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: styles_module_default.fab,
+					className: `${styles_module_default.fab} ${c ? styles_module_default.fabOpen : ""}`,
 					style: { backgroundColor: d },
-					onClick: () => {
-						c && u.disconnect(), l((t) => !t);
-					},
-					children: /* @__PURE__ */ jsx(ChatIcon, {})
+					onClick: () => l((t) => !t),
+					children: jsx(c ? FabCloseIcon : ChatIcon, {})
 				}),
 				u.roomConnection && /* @__PURE__ */ jsx(W, {
 					token: u.roomConnection.token,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-sdk",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": false,
   "main": "src/index.ts",

package/src/ChatThread.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import styles from "./styles.module.css";
 import type { ChatMessage, SessionStatus } from "./types";
 
@@ -12,8 +12,19 @@ export function ChatThread({
   status: SessionStatus;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const isNearBottom = useRef(true);
+  const prevItemCount = useRef(0);
   const agentCountAtConnect = useRef<number | null>(null);
   const agentMessageCount = messages.filter((m) => m.role === "agent").length;
+  const lastMessageIsUser =
+    messages.length > 0 && messages[messages.length - 1].role === "user";
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isNearBottom.current =
+      el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+  }, []);
 
   // Snapshot agent message count when connecting starts
   if (status === "connecting" && agentCountAtConnect.current === null) {
@@ -33,15 +44,24 @@ export function ChatThread({
     messages[messages.length - 1].role === "user";
   const showThinking = initialConnectThinking || waitingForAgentReply;
 
-  useEffect(() => {
-    scrollRef.current?.scrollTo({
-      top: scrollRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, []);
+  // Auto-scroll when new messages arrive or thinking indicator appears.
+  // Uses render-time comparison instead of useEffect to avoid lint issues
+  // with intentional "trigger" dependencies.
+  const itemCount = messages.length + (showThinking ? 1 : 0);
+  if (itemCount !== prevItemCount.current) {
+    prevItemCount.current = itemCount;
+    if (isNearBottom.current || lastMessageIsUser) {
+      queueMicrotask(() => {
+        scrollRef.current?.scrollTo({
+          top: scrollRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      });
+    }
+  }
 
   return (
-    <div ref={scrollRef} className={styles.chatThread}>
+    <div ref={scrollRef} className={styles.chatThread} onScroll={handleScroll}>
       {messages.map((msg) => (
         <div
           key={msg.id}

package/src/PolymorphWidget.tsx

@@ -9,7 +9,6 @@ import type { WidgetConfig } from "./types";
 import { usePolymorphSession } from "./usePolymorphSession";
 import { WidgetPanel } from "./WidgetPanel";
 
-// Chat bubble icon for FAB
 function ChatIcon() {
   return (
     <svg
@@ -23,11 +22,32 @@ function ChatIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Chat</title>
       <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
     </svg>
   );
 }
 
+function FabCloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Close</title>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
 export function PolymorphWidget(props: WidgetConfig) {
   const { position = "bottom-right", branding } = props;
   const [open, setOpen] = useState(false);
@@ -48,30 +68,20 @@ export function PolymorphWidget(props: WidgetConfig) {
         cssVariablesSelector=".polymorph-widget"
         getRootElement={() => rootRef.current ?? undefined}
       >
-        {open && (
-          <WidgetPanel
-            config={props}
-            session={session}
-            onClose={() => {
-              session.disconnect();
-              setOpen(false);
-            }}
-          />
-        )}
+        <WidgetPanel
+          config={props}
+          session={session}
+          onClose={() => setOpen(false)}
+          hidden={!open}
+        />
         <button
           type="button"
-          className={styles.fab}
+          className={`${styles.fab} ${open ? styles.fabOpen : ""}`}
           style={{ backgroundColor: primaryColor }}
-          onClick={() => {
-            if (open) {
-              session.disconnect();
-            }
-            setOpen((prev) => !prev);
-          }}
+          onClick={() => setOpen((prev) => !prev)}
         >
-          <ChatIcon />
+          {open ? <FabCloseIcon /> : <ChatIcon />}
         </button>
-        {/* LiveKit room lives outside WidgetPanel so it mounts before the panel renders */}
         {session.roomConnection && (
           <LiveKitRoom
             token={session.roomConnection.token}