@clivly/chat-widget 0.3.0 → 0.5.0

package/dist/index.d.mts

@@ -1,6 +1,35 @@
 import { Root } from "react-dom/client";
-import { ReactElement } from "react";
+import { CSSProperties, ReactElement } from "react";
 
+//#region src/theme.d.ts
+/**
+ * Theme resolution for the widget.
+ *
+ * The script-tag build mounts into a Shadow DOM, so the host's `.dark` class on
+ * `<html>` can never reach the widget through a CSS selector. The theme has to
+ * be resolved in JavaScript — reading the same signals the host's own CSS reads
+ * — and applied to an attribute inside the widget. That is what this module
+ * does, and why it is a plain DOM module rather than a stylesheet.
+ */
+type ChatWidgetTheme = "auto" | "dark" | "light";
+type ResolvedTheme = "dark" | "light";
+interface ResolveThemeOptions {
+  /** Injection seam for tests. Defaults to the ambient document/window. */
+  root?: Element | null;
+  view?: Window | null;
+}
+/**
+ * Resolve a requested theme to the one the widget should actually paint.
+ *
+ * Falls back to `light` when there is nothing to read — during SSR there is no
+ * document, and guessing dark would flash the wrong palette on hydration for
+ * the majority of pages.
+ */
+declare function resolveTheme(theme: ChatWidgetTheme, {
+  root,
+  view
+}?: ResolveThemeOptions): ResolvedTheme;
+//#endregion
 //#region src/types.d.ts
 type WidgetSenderType = "visitor" | "operator" | "system";
 interface WidgetConfig {
@@ -124,6 +153,18 @@ interface ChatWidgetProps {
   initiallyOpen?: boolean;
   launcherLabel?: string;
   storage?: Pick<Storage, "getItem" | "setItem">;
+  /**
+   * Inline styles on the widget root. The intended use is overriding palette
+   * tokens — `{ "--clivly-chat-panel": "#0b0f19" }` — which works because
+   * inline declarations beat both palette rules without any specificity games.
+   */
+  style?: CSSProperties;
+  /**
+   * `"auto"` (the default) follows the host app: a `data-theme` attribute or a
+   * `dark`/`light` class on `<html>`, then the OS preference. `"light"` and
+   * `"dark"` pin the widget regardless of what the host is doing.
+   */
+  theme?: ChatWidgetTheme;
   widgetId: string;
 }
 declare function ChatWidget({
@@ -133,6 +174,8 @@ declare function ChatWidget({
   initiallyOpen,
   launcherLabel,
   storage,
+  style,
+  theme,
   widgetId
 }: ChatWidgetProps): ReactElement;
 declare function ChatLauncher(): null;
@@ -148,16 +191,20 @@ interface MountChatWidgetOptions$1 extends Omit<ChatWidgetProps, "getSession" |
   socketUrlTemplate?: string;
   widgetId: string;
 }
-declare function mountChatWidget$1({
-  container,
-  createTransport,
-  sessionUrl,
-  socketUrlTemplate,
-  widgetId,
-  ...props
-}: MountChatWidgetOptions$1): Root;
-interface ScriptMountResult$1 {
+interface ChatWidgetMount$1 {
   root: Root;
+  /**
+   * Repaint the widget in a different theme. `"auto"` resumes following the
+   * host, so a caller can hand control back as easily as taking it.
+   *
+   * Only needed by hosts whose theme toggle does not touch `<html>` — the
+   * default `"auto"` already tracks a `data-theme` attribute or a `dark`
+   * class there.
+   */
+  setTheme: (theme: ChatWidgetTheme) => void;
+}
+declare function mountChatWidget$1(options: MountChatWidgetOptions$1): Root;
+interface ScriptMountResult$1 extends ChatWidgetMount$1 {
   shadowRoot: ShadowRoot;
 }
 declare function mountChatWidgetScript$1(script?: HTMLScriptElement): ScriptMountResult$1;
@@ -187,6 +234,7 @@ declare function createSessionFetcher({
 }: CreateSessionFetcherOptions): GetSession;
 //#endregion
 //#region src/index.d.ts
+type ChatWidgetMount = ChatWidgetMount$1;
 type MountChatWidgetOptions = MountChatWidgetOptions$1;
 type ScriptMountResult = ScriptMountResult$1;
 declare const autoMountChatWidgetScript: typeof autoMountChatWidgetScript$1;
@@ -195,4 +243,4 @@ declare const createClivlyTransport: typeof createClivlyTransport$1;
 declare const mountChatWidget: typeof mountChatWidget$1;
 declare const mountChatWidgetScript: typeof mountChatWidgetScript$1;
 //#endregion
-export { ChatLauncher, ChatPanel, type ChatTransportConnection, type ChatTransportHandlers, ChatWidget, type ChatWidgetVisitor, ConversationView, type CreateChatTransport, type CreateChatTransportOptions, CreateClivlyTransportOptions, type CreateLoopbackTransportOptions, type CreateWebSocketTransportOptions, type GetSession, type GetSessionOptions, MessageComposer, MountChatWidgetOptions, PreChatForm, ScriptMountResult, type WidgetClientCreateMessageEvent, type WidgetClientEvent, type WidgetConfig, type WidgetContact, type WidgetConversation, type WidgetConversationSnapshotEvent, type WidgetErrorEvent, type WidgetMessage, type WidgetMessageAckEvent, type WidgetMessageCreatedEvent, type WidgetSenderType, type WidgetServerEvent, type WidgetSessionPayload, type WidgetSessionReadyEvent, type WidgetSummary, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript };
+export { ChatLauncher, ChatPanel, type ChatTransportConnection, type ChatTransportHandlers, ChatWidget, ChatWidgetMount, type ChatWidgetProps, type ChatWidgetTheme, type ChatWidgetVisitor, ConversationView, type CreateChatTransport, type CreateChatTransportOptions, CreateClivlyTransportOptions, type CreateLoopbackTransportOptions, type CreateWebSocketTransportOptions, type GetSession, type GetSessionOptions, MessageComposer, MountChatWidgetOptions, PreChatForm, type ResolvedTheme, ScriptMountResult, type WidgetClientCreateMessageEvent, type WidgetClientEvent, type WidgetConfig, type WidgetContact, type WidgetConversation, type WidgetConversationSnapshotEvent, type WidgetErrorEvent, type WidgetMessage, type WidgetMessageAckEvent, type WidgetMessageCreatedEvent, type WidgetSenderType, type WidgetServerEvent, type WidgetSessionPayload, type WidgetSessionReadyEvent, type WidgetSummary, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript, resolveTheme };

package/dist/index.mjs

@@ -1,21 +1,162 @@
 import { createRoot } from "react-dom/client";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/theme.ts
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+/** The attribute set by next-themes, daisyUI, and most `data-*` theme setups. */
+const THEME_ATTRIBUTE = "data-theme";
+/** Attributes worth re-resolving on. Anything else on `<html>` is noise. */
+const OBSERVED_ATTRIBUTES = ["class", THEME_ATTRIBUTE];
+function isResolvedTheme(value) {
+	return value === "dark" || value === "light";
+}
+/**
+* The host's explicit signals, in precedence order: a `data-theme` attribute
+* beats a class, because a host that sets both is using the attribute as the
+* source of truth and the class as a styling convenience.
+*
+* Both conventions are checked for `light` as well as `dark`. A host that says
+* `class="light"` on an OS-dark machine means it, and the explicit signal
+* should win over the OS preference below it.
+*/
+function readHostTheme(root) {
+	const attribute = root.getAttribute(THEME_ATTRIBUTE);
+	if (isResolvedTheme(attribute)) return attribute;
+	if (root.classList.contains("dark")) return "dark";
+	if (root.classList.contains("light")) return "light";
+	return null;
+}
+function prefersDark(view) {
+	return view.matchMedia?.(DARK_MEDIA_QUERY).matches ?? false;
+}
+function defaultRoot() {
+	return typeof document === "undefined" ? null : document.documentElement;
+}
+function defaultView() {
+	return typeof window === "undefined" ? null : window;
+}
+/**
+* Resolve a requested theme to the one the widget should actually paint.
+*
+* Falls back to `light` when there is nothing to read — during SSR there is no
+* document, and guessing dark would flash the wrong palette on hydration for
+* the majority of pages.
+*/
+function resolveTheme(theme, { root = defaultRoot(), view = defaultView() } = {}) {
+	if (theme !== "auto") return theme;
+	const hostTheme = root ? readHostTheme(root) : null;
+	if (hostTheme) return hostTheme;
+	if (view && prefersDark(view)) return "dark";
+	return "light";
+}
+/**
+* Watch both host signals and call `onChange` whenever the resolved theme
+* changes. Returns an unsubscribe function.
+*
+* An explicit `light`/`dark` subscribes to nothing — there is no signal that
+* could change the answer — so callers can pass any theme without branching.
+*/
+function observeTheme(theme, onChange, { root = defaultRoot(), view = defaultView() } = {}) {
+	if (theme !== "auto") return () => {};
+	let current = resolveTheme(theme, {
+		root,
+		view
+	});
+	const publish = () => {
+		const next = resolveTheme(theme, {
+			root,
+			view
+		});
+		if (next !== current) {
+			current = next;
+			onChange(next);
+		}
+	};
+	const teardowns = [];
+	if (root && typeof MutationObserver !== "undefined") {
+		const observer = new MutationObserver(publish);
+		observer.observe(root, {
+			attributeFilter: OBSERVED_ATTRIBUTES,
+			attributes: true
+		});
+		teardowns.push(() => {
+			observer.disconnect();
+		});
+	}
+	const media = view?.matchMedia?.(DARK_MEDIA_QUERY);
+	if (media) {
+		if (media.addEventListener) {
+			media.addEventListener("change", publish);
+			teardowns.push(() => {
+				media.removeEventListener("change", publish);
+			});
+		} else if (media.addListener) {
+			media.addListener(publish);
+			teardowns.push(() => {
+				media.removeListener(publish);
+			});
+		}
+	}
+	return () => {
+		for (const teardown of teardowns) teardown();
+	};
+}
+/**
+* Narrow an untrusted string — a `data-theme` script attribute, a `setTheme`
+* call from plain JS — to a theme, falling back to `auto`.
+*/
+function parseTheme(value) {
+	if (value === "auto" || value === "dark" || value === "light") return value;
+	return "auto";
+}
+//#endregion
 //#region src/chat-widget.tsx
+const DELIVERY_LABELS = {
+	failed: "Failed to send",
+	pending: "Sending…",
+	sent: null
+};
 const WIDGET_STYLES = `
 .clivly-chat-widget, .clivly-chat-widget * { box-sizing: border-box; }
 .clivly-chat-widget {
   --clivly-chat-accent: #185adb;
+  --clivly-chat-accent-contrast: #ffffff;
   --clivly-chat-panel: #ffffff;
+  --clivly-chat-input: transparent;
   --clivly-chat-border: #d6dde8;
   --clivly-chat-text: #132238;
   --clivly-chat-muted: #60738a;
   --clivly-chat-visitor: #ecf3ff;
   --clivly-chat-operator: #f5f7fa;
+  --clivly-chat-shadow: rgba(19, 34, 56, 0.18);
+  --clivly-chat-error-bg: #fff1f1;
+  --clivly-chat-error-border: #f2c2c2;
+  --clivly-chat-error-text: #9f2d2d;
   color: var(--clivly-chat-text);
+  color-scheme: light;
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   position: relative;
 }
+/* Dark is a pure token override — every rule below reads through a variable, so
+   the palette is the only thing that changes between themes. The color-scheme
+   declaration carries the theme to the parts of the UI that CSS cannot reach:
+   native scrollbars, autofill backgrounds, and the caret. */
+.clivly-chat-widget[data-clivly-theme="dark"] {
+  --clivly-chat-accent: #4f8cff;
+  --clivly-chat-accent-contrast: #0b1220;
+  --clivly-chat-panel: #111827;
+  --clivly-chat-input: #0b1220;
+  --clivly-chat-border: #2a3546;
+  --clivly-chat-text: #e8edf5;
+  --clivly-chat-muted: #93a2b8;
+  --clivly-chat-visitor: #1e3a6b;
+  --clivly-chat-operator: #1b2534;
+  --clivly-chat-shadow: rgba(0, 0, 0, 0.5);
+  --clivly-chat-error-bg: #2c1618;
+  --clivly-chat-error-border: #5c2a2e;
+  --clivly-chat-error-text: #ffb4b4;
+  color-scheme: dark;
+}
 .clivly-chat-widget button,
 .clivly-chat-widget input,
 .clivly-chat-widget textarea {
@@ -26,7 +167,7 @@ const WIDGET_STYLES = `
   background: var(--clivly-chat-accent);
   border: 0;
   border-radius: 999px;
-  color: white;
+  color: var(--clivly-chat-accent-contrast);
   cursor: pointer;
   display: inline-flex;
   gap: 0.5rem;
@@ -36,7 +177,7 @@ const WIDGET_STYLES = `
   background: var(--clivly-chat-panel);
   border: 1px solid var(--clivly-chat-border);
   border-radius: 1rem;
-  box-shadow: 0 24px 80px rgba(19, 34, 56, 0.18);
+  box-shadow: 0 24px 80px var(--clivly-chat-shadow);
   display: grid;
   grid-template-rows: auto 1fr auto;
   height: min(44rem, 75vh);
@@ -139,37 +280,54 @@ const WIDGET_STYLES = `
 }
 .clivly-chat-widget__input,
 .clivly-chat-widget__textarea {
+  background: var(--clivly-chat-input);
   border: 1px solid var(--clivly-chat-border);
   border-radius: 0.8rem;
+  color: inherit;
   min-width: 0;
   padding: 0.75rem 0.85rem;
 }
+.clivly-chat-widget__input::placeholder,
+.clivly-chat-widget__textarea::placeholder {
+  color: var(--clivly-chat-muted);
+}
 .clivly-chat-widget__textarea {
   min-height: 5.5rem;
   resize: vertical;
 }
 .clivly-chat-widget__actions {
+  align-items: center;
   display: flex;
   gap: 0.75rem;
   justify-content: space-between;
 }
+/* The subtitle is the only part that may reflow; without min-width the flex
+   default (min-content) lets it push the button below its intrinsic width. */
+.clivly-chat-widget__actions .clivly-chat-widget__subtitle {
+  min-width: 0;
+}
 .clivly-chat-widget__button {
   background: var(--clivly-chat-accent);
   border: 0;
   border-radius: 0.8rem;
-  color: white;
+  color: var(--clivly-chat-accent-contrast);
   cursor: pointer;
+  flex: 0 0 auto;
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.2;
   padding: 0.75rem 0.95rem;
+  white-space: nowrap;
 }
 .clivly-chat-widget__button[disabled] {
   cursor: not-allowed;
   opacity: 0.55;
 }
 .clivly-chat-widget__error {
-  background: #fff1f1;
-  border: 1px solid #f2c2c2;
+  background: var(--clivly-chat-error-bg);
+  border: 1px solid var(--clivly-chat-error-border);
   border-radius: 0.8rem;
-  color: #9f2d2d;
+  color: var(--clivly-chat-error-text);
   font-size: 0.875rem;
   padding: 0.75rem;
 }
@@ -231,14 +389,93 @@ function markMessageFailed(messages, clientMessageId) {
 function sortMessages(messages) {
 	return [...messages].sort((left, right) => left.createdAt.localeCompare(right.createdAt));
 }
-function useThemeStyle(session) {
+function useThemeStyle(session, style) {
 	return useMemo(() => {
 		const brandColor = session?.widget.config.brandColor ?? null;
-		if (!brandColor) return;
-		return { ["--clivly-chat-accent"]: brandColor };
-	}, [session?.widget.config.brandColor]);
+		if (!brandColor) return style;
+		return {
+			["--clivly-chat-accent"]: brandColor,
+			...style
+		};
+	}, [session?.widget.config.brandColor, style]);
+}
+/**
+* Track the theme the widget should paint.
+*
+* The initial value is resolved synchronously so the first paint is already
+* correct — deferring it to an effect would flash light on a dark page.
+*/
+function useResolvedTheme(theme) {
+	const [resolved, setResolved] = useState(() => resolveTheme(theme));
+	useEffect(() => {
+		setResolved(resolveTheme(theme));
+		return observeTheme(theme, setResolved);
+	}, [theme]);
+	return resolved;
+}
+/**
+* Reduce one socket event into widget state.
+*
+* Lives at module scope rather than inside the connect effect so the wire
+* protocol reads as a single unit, and so `ChatWidget` stays inside the
+* cognitive-complexity budget.
+*/
+function applyServerEvent(event, { setError, setIsReady, setMessages }) {
+	switch (event.type) {
+		case "conversation.snapshot":
+			setMessages(sortMessages(event.messages.map((message) => createLocalMessage(message))));
+			return;
+		case "error":
+			setError(event.message);
+			return;
+		case "message.ack":
+			setMessages((currentMessages) => sortMessages(replacePendingMessage(currentMessages, event.clientMessageId, event.message)));
+			return;
+		case "message.created": {
+			const clientMessageId = event.clientMessageId;
+			setMessages((currentMessages) => sortMessages(clientMessageId ? replacePendingMessage(currentMessages, clientMessageId, event.message) : mergeMessage(currentMessages, event.message)));
+			return;
+		}
+		case "session.ready":
+			setIsReady(true);
+			return;
+		default: return;
+	}
+}
+function MessageBubble({ message }) {
+	return /* @__PURE__ */ jsxs("article", {
+		className: "clivly-chat-widget__message",
+		"data-sender": message.senderType,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "clivly-chat-widget__message-meta",
+				children: [/* @__PURE__ */ jsx("span", { children: message.author ?? "Clivly" }), /* @__PURE__ */ jsx("span", { children: formatTimestamp(message.createdAt) })]
+			}),
+			/* @__PURE__ */ jsx("div", { children: message.body }),
+			message.delivery === "sent" ? null : /* @__PURE__ */ jsx("div", {
+				className: "clivly-chat-widget__status",
+				children: DELIVERY_LABELS[message.delivery]
+			})
+		]
+	});
+}
+/**
+* The scrollable transcript. Split out of `ChatWidget` because the three states
+* (no session, empty thread, messages) were a nested ternary in the render tree
+* — early returns make them readable and keep the parent's complexity down.
+*/
+function MessageList({ greeting, hasSession, messages }) {
+	if (!hasSession) return /* @__PURE__ */ jsx("p", {
+		className: "clivly-chat-widget__empty",
+		children: greeting
+	});
+	if (messages.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "clivly-chat-widget__empty",
+		children: "No messages yet. Say hello to get the conversation started."
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)) });
 }
-function ChatWidget({ className, createTransport, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, widgetId }) {
+function ChatWidget({ className, createTransport, getSession, initiallyOpen = false, launcherLabel = "Chat with us", storage = DEFAULT_STORAGE, style, theme = "auto", widgetId }) {
 	const [isOpen, setIsOpen] = useState(initiallyOpen);
 	const [error, setError] = useState(null);
 	const [isConnecting, setIsConnecting] = useState(false);
@@ -252,7 +489,8 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	});
 	const transportRef = useRef(null);
 	const listRef = useRef(null);
-	const themeStyle = useThemeStyle(session);
+	const themeStyle = useThemeStyle(session, style);
+	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => () => {
 		transportRef.current?.close();
 		transportRef.current = null;
@@ -266,31 +504,6 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		transportRef.current = null;
 		setIsReady(false);
 		if (!(session && createTransport)) return;
-		const handleEvent = (event) => {
-			switch (event.type) {
-				case "conversation.snapshot":
-					setMessages(sortMessages(event.messages.map((message) => createLocalMessage(message))));
-					return;
-				case "error":
-					setError(event.message);
-					return;
-				case "message.ack":
-					setMessages((currentMessages) => sortMessages(replacePendingMessage(currentMessages, event.clientMessageId, event.message)));
-					return;
-				case "message.created": {
-					const clientMessageId = event.clientMessageId;
-					if (clientMessageId) {
-						setMessages((currentMessages) => sortMessages(replacePendingMessage(currentMessages, clientMessageId, event.message)));
-						return;
-					}
-					setMessages((currentMessages) => sortMessages(mergeMessage(currentMessages, event.message)));
-					return;
-				}
-				case "session.ready":
-					setIsReady(true);
-					return;
-			}
-		};
 		const connection = createTransport({
 			handlers: {
 				onClose: () => {
@@ -299,7 +512,13 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 				onError: (transportError) => {
 					setError(transportError.message);
 				},
-				onEvent: handleEvent,
+				onEvent: (event) => {
+					applyServerEvent(event, {
+						setError,
+						setIsReady,
+						setMessages
+					});
+				},
 				onOpen: () => {
 					setIsReady(true);
 				}
@@ -367,6 +586,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	const sessionSummary = session ? `${session.contact.name} • ${session.contact.email}` : greeting;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `clivly-chat-widget ${className ?? ""}`.trim(),
+		"data-clivly-theme": resolvedTheme,
 		style: themeStyle,
 		children: [
 			/* @__PURE__ */ jsx("style", { children: WIDGET_STYLES }),
@@ -406,26 +626,10 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 						children: [error ? /* @__PURE__ */ jsx("div", {
 							className: "clivly-chat-widget__error",
 							children: error
-						}) : null, session ? messages.length > 0 ? messages.map((message) => /* @__PURE__ */ jsxs("article", {
-							className: "clivly-chat-widget__message",
-							"data-sender": message.senderType,
-							children: [
-								/* @__PURE__ */ jsxs("div", {
-									className: "clivly-chat-widget__message-meta",
-									children: [/* @__PURE__ */ jsx("span", { children: message.author ?? "Clivly" }), /* @__PURE__ */ jsx("span", { children: formatTimestamp(message.createdAt) })]
-								}),
-								/* @__PURE__ */ jsx("div", { children: message.body }),
-								message.delivery === "sent" ? null : /* @__PURE__ */ jsx("div", {
-									className: "clivly-chat-widget__status",
-									children: message.delivery === "pending" ? "Sending…" : "Failed to send"
-								})
-							]
-						}, message.id)) : /* @__PURE__ */ jsx("p", {
-							className: "clivly-chat-widget__empty",
-							children: "No messages yet. Say hello to get the conversation started."
-						}) : /* @__PURE__ */ jsx("p", {
-							className: "clivly-chat-widget__empty",
-							children: greeting
+						}) : null, /* @__PURE__ */ jsx(MessageList, {
+							greeting,
+							hasSession: Boolean(session),
+							messages
 						})]
 					}),
 					session ? /* @__PURE__ */ jsxs("form", {
@@ -688,16 +892,27 @@ const MOUNTED_DATA_ATTR = "clivlyMounted";
 function resolveSocketUrl(socketUrlTemplate, conversationId, token) {
 	return socketUrlTemplate.replaceAll("{conversationId}", encodeURIComponent(conversationId)).replaceAll("{token}", encodeURIComponent(token));
 }
-function mountChatWidget$1({ container, createTransport, sessionUrl, socketUrlTemplate, widgetId, ...props }) {
+function createWidgetMount({ container, createTransport, sessionUrl, socketUrlTemplate, theme = "auto", widgetId, ...props }) {
 	const transport = createTransport ?? (socketUrlTemplate ? createWebSocketTransport({ resolveUrl: (session) => session.socketUrl ?? resolveSocketUrl(socketUrlTemplate, session.conversation.id, session.token) }) : createClivlyTransport$1());
+	const getSession = createSessionFetcher({ sessionUrl });
 	const root = createRoot(container);
-	root.render(/* @__PURE__ */ jsx(ChatWidget, {
-		...props,
-		createTransport: transport,
-		getSession: createSessionFetcher({ sessionUrl }),
-		widgetId
-	}));
-	return root;
+	const render = (nextTheme) => {
+		root.render(/* @__PURE__ */ jsx(ChatWidget, {
+			...props,
+			createTransport: transport,
+			getSession,
+			theme: nextTheme,
+			widgetId
+		}));
+	};
+	render(theme);
+	return {
+		root,
+		setTheme: render
+	};
+}
+function mountChatWidget$1(options) {
+	return createWidgetMount(options).root;
 }
 function markScriptMounted(script) {
 	script.dataset[MOUNTED_DATA_ATTR] = "true";
@@ -716,15 +931,17 @@ function mountChatWidgetScript$1(script = document.currentScript) {
 	const shadowRoot = host.attachShadow({ mode: "open" });
 	const container = document.createElement("div");
 	shadowRoot.append(container);
-	const root = mountChatWidget$1({
+	const { root, setTheme } = createWidgetMount({
 		container,
 		sessionUrl,
 		socketUrlTemplate: script.dataset.socketUrlTemplate,
+		theme: parseTheme(script.dataset.theme),
 		widgetId
 	});
 	markScriptMounted(script);
 	return {
 		root,
+		setTheme,
 		shadowRoot
 	};
 }
@@ -739,4 +956,4 @@ const createClivlyTransport = createClivlyTransport$1;
 const mountChatWidget = mountChatWidget$1;
 const mountChatWidgetScript = mountChatWidgetScript$1;
 //#endregion
-export { ChatLauncher, ChatPanel, ChatWidget, ConversationView, MessageComposer, PreChatForm, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript };
+export { ChatLauncher, ChatPanel, ChatWidget, ConversationView, MessageComposer, PreChatForm, autoMountChatWidgetScript, createClivlyTransport, createLoopbackTransport, createSessionFetcher, createWebSocketTransport, mountChatWidget, mountChatWidgetScript, resolveTheme };