@bdocs/plugin-ask-ai 0.3.0 → 0.4.0

package/dist/client/index.mjs

@@ -1,8 +1,109 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useId, useRef, useState } from "react";
 import { useConfig } from "boltdocs/client";
-import { Streamdown } from "streamdown";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+//#region src/client/abort.ts
+/**
+* Creates a cooperative cancellation controller for a single submission.
+*
+* Prefers the native `AbortController` (real `AbortSignal` for `fetch`).
+* When it is unavailable we degrade gracefully: `abort()` cancels the stream
+* reader and sets a flag that the read loop checks. Never throws.
+*/
+function createClientController() {
+	let holder = null;
+	let aborted = false;
+	const attachReader = (reader) => {
+		holder = reader;
+		if (aborted) try {
+			holder?.cancel?.();
+		} catch {}
+	};
+	const abort = () => {
+		if (aborted) return;
+		aborted = true;
+		try {
+			holder?.cancel?.();
+		} catch {}
+	};
+	try {
+		if (typeof AbortController !== "undefined") {
+			const native = new AbortController();
+			return {
+				get signal() {
+					return native.signal;
+				},
+				get aborted() {
+					return aborted;
+				},
+				attachReader,
+				abort() {
+					abort();
+					try {
+						native.abort();
+					} catch {}
+				}
+			};
+		}
+	} catch {}
+	return {
+		signal: void 0,
+		get aborted() {
+			return aborted;
+		},
+		attachReader,
+		abort
+	};
+}
+//#endregion
 //#region src/client/use-ask-ai.ts
+const DEFAULT_ASK_AI_UI_COPY = {
+	title: "Ask Assistant",
+	placeholder: "Ask about this page…",
+	emptyTitle: "How can I help you today?",
+	emptyDescription: "Ask anything about the current documentation page. The assistant only answers using the page you are viewing.",
+	buttonTooltip: "Ask AI assistant",
+	composerHint: "Enter to send · Shift+Enter for a new line"
+};
+function readUiCopy(meta) {
+	if (!meta) return DEFAULT_ASK_AI_UI_COPY;
+	const str = (key) => {
+		const v = meta[key];
+		return typeof v === "string" && v.length > 0 ? v : DEFAULT_ASK_AI_UI_COPY[key];
+	};
+	return {
+		title: str("title"),
+		placeholder: str("placeholder"),
+		emptyTitle: str("emptyTitle"),
+		emptyDescription: str("emptyDescription"),
+		buttonTooltip: str("buttonTooltip"),
+		composerHint: str("composerHint")
+	};
+}
+function readClassNames(meta, overrides = {}) {
+	const configured = meta?.classNames && typeof meta.classNames === "object" ? meta.classNames : {};
+	const result = {};
+	for (const key of [
+		"root",
+		"panel",
+		"trigger",
+		"header",
+		"messages",
+		"message",
+		"userMessage",
+		"assistantMessage",
+		"emptyState",
+		"composer",
+		"input",
+		"markdown"
+	]) {
+		const value = overrides[key] ?? configured[key];
+		if (typeof value === "string" && value) result[key] = value;
+	}
+	return result;
+}
 function useAskAi(options = {}) {
 	const [messages, setMessages] = useState([]);
 	const [input, setInput] = useState("");
@@ -11,9 +112,12 @@ function useAskAi(options = {}) {
 	const submitAbortRef = useRef(null);
 	const pendingTextRef = useRef({ value: "" });
 	const pendingRafRef = useRef(null);
+	const messageIdRef = useRef(0);
 	const askAiPluginMeta = useConfig()?.plugins?.find((p) => p.name === "boltdocs-plugin-ask-ai")?.metadata;
 	const customEndpoint = options.endpoint || askAiPluginMeta?.endpoint || "/api/ask-ai";
 	const devMode = askAiPluginMeta?.devMode ?? false;
+	const ui = readUiCopy(askAiPluginMeta);
+	const classNames = readClassNames(askAiPluginMeta, options.classNames);
 	useEffect(() => {
 		const handleOpen = () => setIsOpen(true);
 		const handleClose = () => setIsOpen(false);
@@ -27,6 +131,10 @@ function useAskAi(options = {}) {
 			window.removeEventListener("boltdocs:ask-ai:toggle", handleToggle);
 		};
 	}, []);
+	useEffect(() => () => {
+		submitAbortRef.current?.abort();
+		if (pendingRafRef.current !== null) cancelAnimationFrame(pendingRafRef.current);
+	}, []);
 	const startTimeRef = useRef(0);
 	const usageRef = useRef(null);
 	const flushPendingText = useCallback(() => {
@@ -38,9 +146,13 @@ function useAskAi(options = {}) {
 		const chunk = pendingTextRef.current.value;
 		pendingTextRef.current.value = "";
 		setMessages((prev) => {
-			const next = [...prev];
-			const last = next[next.length - 1];
-			if (last && last.role === "assistant") last.content += chunk;
+			const next = prev.slice();
+			const i = next.length - 1;
+			const last = next[i];
+			if (last && last.role === "assistant") next[i] = {
+				...last,
+				content: last.content + chunk
+			};
 			return next;
 		});
 	}, []);
@@ -56,16 +168,16 @@ function useAskAi(options = {}) {
 		setMessages((prev) => {
 			const next = [...prev];
 			const last = next[next.length - 1];
-			if (last && last.role === "assistant" && last.status !== "done") {
-				last.status = last.content ? "done" : "error";
-				if (last.status === "error" && opts.message) last.errorMessage = opts.message;
-			}
+			if (last && last.role === "assistant" && last.status !== "done" && last.status !== "cancelled") next[next.length - 1] = {
+				...last,
+				status: opts.kind === "cancel" ? "cancelled" : "error",
+				...opts.kind === "error" && opts.message ? { errorMessage: opts.message } : {}
+			};
 			return next;
 		});
 	}, [flushPendingText]);
 	const stopStreaming = useCallback(() => {
 		if (submitAbortRef.current) submitAbortRef.current.abort();
-		setIsLoading(false);
 		finalizeAssistantTerminal({ kind: "cancel" });
 	}, [finalizeAssistantTerminal]);
 	useEffect(() => {
@@ -89,13 +201,18 @@ function useAskAi(options = {}) {
 			if (!trimmed || isLoading) return;
 			pendingTextRef.current = { value: "" };
 			pendingRafRef.current = null;
+			usageRef.current = null;
+			startTimeRef.current = Date.now();
+			const turnId = ++messageIdRef.current;
 			setMessages((prev) => [
 				...prev,
 				{
+					id: `message-${turnId}-user`,
 					role: "user",
 					content: trimmed
 				},
 				{
+					id: `message-${turnId}-assistant`,
 					role: "assistant",
 					content: "",
 					status: "reading"
@@ -103,26 +220,45 @@ function useAskAi(options = {}) {
 			]);
 			setInput("");
 			setIsLoading(true);
-			const controller = new AbortController();
+			const replaceLastAssistant = (prev, apply) => {
+				const next = prev.slice();
+				const i = next.length - 1;
+				const last = next[i];
+				if (last && last.role === "assistant") next[i] = apply(last);
+				return next;
+			};
+			const controller = createClientController();
 			submitAbortRef.current = controller;
 			try {
 				const currentPage = options.currentPage || (typeof window !== "undefined" ? window.location.pathname : "/");
-				const response = await fetch(customEndpoint, {
+				const context = options.getContext?.() ?? options.context;
+				const init = {
 					method: "POST",
 					headers: { "Content-Type": "application/json" },
 					body: JSON.stringify({
 						question: trimmed,
-						currentPage
-					}),
-					signal: controller.signal
-				});
-				if (!response.ok) throw new Error(`Server returned ${response.status}`);
+						currentPage,
+						...context ? { context } : {}
+					})
+				};
+				if (controller.signal) init.signal = controller.signal;
+				const response = await fetch(customEndpoint, init);
+				if (!response.ok) {
+					const errorBody = await response.text();
+					let errorMessage = `Server returned ${response.status}`;
+					try {
+						const parsed = JSON.parse(errorBody);
+						if (typeof parsed.error === "string") errorMessage = parsed.error;
+					} catch {}
+					throw new Error(errorMessage);
+				}
 				if (!response.body) throw new Error("No streaming body from endpoint");
 				const reader = response.body.getReader();
+				controller.attachReader(reader);
 				const decoder = new TextDecoder();
 				let lineBuffer = "";
 				let firstTextSeen = false;
-				while (true) {
+				while (!controller.aborted) {
 					const { value, done } = await reader.read();
 					if (done) break;
 					lineBuffer += decoder.decode(value, { stream: true });
@@ -139,56 +275,61 @@ function useAskAi(options = {}) {
 						} catch {
 							continue;
 						}
-						if (parsed.context) setMessages((prev) => {
-							const next = [...prev];
-							const last = next[next.length - 1];
-							if (last && last.role === "assistant") {
-								last.contextChip = parsed.context;
-								startTimeRef.current = Date.now();
-							}
-							return next;
-						});
+						if (parsed.context) setMessages((prev) => replaceLastAssistant(prev, (last) => {
+							startTimeRef.current = Date.now();
+							return {
+								...last,
+								contextChip: parsed.context
+							};
+						}));
 						else if (parsed.usage) usageRef.current = parsed.usage;
 						else if (typeof parsed.text === "string") {
 							if (!firstTextSeen) {
 								firstTextSeen = true;
-								setMessages((prev) => {
-									const next = [...prev];
-									const last = next[next.length - 1];
-									if (last && last.role === "assistant") last.status = "streaming";
-									return next;
-								});
+								setMessages((prev) => replaceLastAssistant(prev, (last) => ({
+									...last,
+									status: "streaming"
+								})));
 							}
 							pendingTextRef.current.value += parsed.text;
 							scheduleFlush();
-						} else if (parsed.error) throw new Error(parsed.error);
+						} else if (typeof parsed.error === "string") throw new Error(parsed.error);
 					}
 				}
+				if (controller.aborted) {
+					finalizeAssistantTerminal({ kind: "cancel" });
+					return;
+				}
 				flushPendingText();
-				setMessages((prev) => {
-					const next = [...prev];
-					const last = next[next.length - 1];
-					if (last && last.role === "assistant") {
-						last.status = last.content ? "done" : "error";
-						if (last.status === "error" && !last.errorMessage) last.errorMessage = "No response received.";
-						if (usageRef.current && devMode) last.usage = {
-							...usageRef.current,
-							elapsedMs: startTimeRef.current ? Date.now() - startTimeRef.current : usageRef.current.elapsedMs
-						};
-					}
-					return next;
-				});
+				setMessages((prev) => replaceLastAssistant(prev, (last) => {
+					const status = last.content ? "done" : "error";
+					const usage = usageRef.current && devMode ? {
+						...usageRef.current,
+						elapsedMs: startTimeRef.current ? Date.now() - startTimeRef.current : usageRef.current.elapsedMs
+					} : last.usage;
+					return {
+						...last,
+						status,
+						errorMessage: status === "error" && !last.errorMessage ? "No response received." : last.errorMessage,
+						usage
+					};
+				}));
 			} catch (error) {
 				if (error instanceof DOMException && error.name === "AbortError") finalizeAssistantTerminal({
 					kind: "cancel",
 					message: "Request cancelled."
 				});
 				else {
+					const message = error instanceof Error ? error.message : "Unknown error";
+					const userMessage = message.includes("AI_NOT_CONFIGURED") ? "The AI assistant is not configured on this server." : message.includes("RATE_LIMITED") ? "Too many requests. Please try again shortly." : message.includes("UNAUTHORIZED") ? "This assistant requires authorization." : message.includes("CLIENT_CONTEXT_NOT_ALLOWED") ? "This deployment does not accept client-provided context." : "The AI assistant could not complete this request.";
 					finalizeAssistantTerminal({
 						kind: "error",
-						message: error instanceof Error ? error.message : "Unknown error"
+						message: userMessage
 					});
-					console.error("[Ask AI] failed:", error);
+					setMessages((prev) => replaceLastAssistant(prev, (last) => last.status === "error" ? {
+						...last,
+						errorMessage: userMessage
+					} : last));
 				}
 			} finally {
 				if (pendingRafRef.current !== null) {
@@ -201,20 +342,225 @@ function useAskAi(options = {}) {
 		}, [
 			customEndpoint,
 			options.currentPage,
+			options.context,
+			options.getContext,
 			isLoading,
 			scheduleFlush,
-			finalizeAssistantTerminal
+			finalizeAssistantTerminal,
+			devMode,
+			flushPendingText
 		]),
 		stopStreaming,
 		clearChat,
 		isOpen,
 		setIsOpen,
-		devMode
+		devMode,
+		ui,
+		classNames
+	};
+}
+//#endregion
+//#region src/client/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/client/components/icons.tsx
+function IconBase({ size = 16, className, strokeWidth = 2, children }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className,
+		"aria-hidden": "true",
+		children
+	});
+}
+function SparkleIcon(props) {
+	return /* @__PURE__ */ jsx(IconBase, {
+		strokeWidth: 2.5,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
+	});
+}
+function ChatIcon(props) {
+	return /* @__PURE__ */ jsx(IconBase, {
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+	});
+}
+function TrashIcon(props) {
+	return /* @__PURE__ */ jsxs(IconBase, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+			/* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+		]
+	});
+}
+function CloseIcon(props) {
+	return /* @__PURE__ */ jsxs(IconBase, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+function SendIcon(props) {
+	return /* @__PURE__ */ jsxs(IconBase, {
+		strokeWidth: 2.5,
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }), /* @__PURE__ */ jsx("path", { d: "M22 2 11 13" })]
+	});
+}
+function StopIcon({ size = 16, className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		className,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "6",
+			y: "6",
+			width: "12",
+			height: "12",
+			rx: "2"
+		})
+	});
+}
+function FileIcon(props) {
+	return /* @__PURE__ */ jsxs(IconBase, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })]
+	});
+}
+//#endregion
+//#region src/client/components/chat-empty-state.tsx
+function ChatEmptyState({ description, title = "How can I help you today?", variant = "bubble", className }) {
+	const compact = variant === "dialog";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-1 flex-col items-center justify-center text-center", compact ? "p-2" : "p-6", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: `${compact ? "w-10 h-10 rounded-xl" : "w-12 h-12 rounded-full"} bg-primary-500/10 flex items-center justify-center text-primary-500 mb-3`,
+				children: /* @__PURE__ */ jsx(SparkleIcon, { size: compact ? 20 : 24 })
+			}),
+			!compact && /* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold text-body mb-1",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: compact ? "text-xs text-muted leading-relaxed" : "text-xs text-muted max-w-[240px]",
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+//#region src/client/components/chat-header.tsx
+function ChatHeader({ title, variant = "bubble", canClear, onClear, onClose, className, titleId }) {
+	const compact = variant === "dialog";
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("shrink-0 border-b border-subtle bg-gradient-to-r from-primary-500/8 to-transparent px-4 py-3", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary-500/12 text-primary-500",
+					children: /* @__PURE__ */ jsx(SparkleIcon, { size: compact ? 15 : 17 })
+				}), /* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					className: cn("truncate font-semibold tracking-tight text-body", compact ? "text-xs" : "text-sm"),
+					children: title
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [canClear ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClear,
+					className: "cursor-pointer rounded-lg p-1.5 text-muted transition-colors hover:bg-soft hover:text-danger-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30",
+					title: "Clear chat",
+					"aria-label": "Clear chat",
+					children: /* @__PURE__ */ jsx(TrashIcon, { size: compact ? 13 : 15 })
+				}) : null, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					className: "cursor-pointer rounded-lg p-1.5 text-muted transition-colors hover:bg-soft hover:text-body focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30",
+					title: "Close assistant",
+					"aria-label": "Close assistant",
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: compact ? 13 : 16 })
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/client/components/chat-input.tsx
+function ChatInput({ input, onInputChange, onSubmit, onStop, isLoading, placeholder = "Ask about this page…", hint = "Enter to send · Shift+Enter for a new line", variant = "bubble", inputRef, className, inputClassName }) {
+	const compact = variant === "dialog";
+	const hintId = useId();
+	const canSubmit = Boolean(input.trim()) && !isLoading;
+	const rows = Math.min(Math.max(input.split("\n").length, 1), 6);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" || event.shiftKey) return;
+		event.preventDefault();
+		if (canSubmit) onSubmit(input);
 	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (canSubmit) onSubmit(input);
+	};
+	const buttonSize = compact ? "size-8" : "size-9";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", compact ? "shrink-0" : "shrink-0", className),
+		children: [/* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			className: cn("flex items-end gap-2 rounded-2xl border border-subtle bg-surface/80 p-1.5 shadow-sm transition-colors focus-within:border-primary-500/60 focus-within:ring-2 focus-within:ring-primary-500/10", inputClassName),
+			children: [/* @__PURE__ */ jsx("textarea", {
+				ref: inputRef,
+				rows,
+				value: input,
+				onChange: (event) => onInputChange(event.target.value),
+				onKeyDown: handleKeyDown,
+				placeholder,
+				disabled: isLoading,
+				"aria-label": "Ask the assistant",
+				"aria-describedby": hintId,
+				className: cn("min-h-8 flex-1 resize-none bg-transparent px-2 py-1.5 text-body leading-relaxed outline-none placeholder:text-muted", compact ? "text-xs" : "text-sm")
+			}), isLoading ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onStop,
+				title: "Stop generating",
+				"aria-label": "Stop generating",
+				className: cn(buttonSize, "flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full bg-danger-500 text-white transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger-500/40"),
+				children: /* @__PURE__ */ jsx(StopIcon, { size: compact ? 12 : 16 })
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				disabled: !input.trim(),
+				title: "Send question",
+				"aria-label": "Send question",
+				className: cn(buttonSize, "flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full bg-primary-500 text-white transition-all hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"),
+				children: /* @__PURE__ */ jsx(SendIcon, { size: compact ? 12 : 16 })
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			id: hintId,
+			className: cn("select-none px-1 text-muted", compact ? "text-[10px]" : "text-[11px]"),
+			children: hint
+		})]
+	});
 }
 //#endregion
 //#region src/client/render-markdown.tsx
-function MarkdownRenderer({ content, className, parseIncompleteMarkdown = true }) {
+function MarkdownRendererImpl({ content, className, parseIncompleteMarkdown = true }) {
 	if (!content) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className,
@@ -224,313 +570,283 @@ function MarkdownRenderer({ content, className, parseIncompleteMarkdown = true }
 		})
 	});
 }
+/**
+* Memoized: while the message streams the same buffered content can be
+* re-rendered (e.g. a status flip reading → streaming) — this skips the
+* heavy markdown re-parse when nothing changed.
+*/
+const MarkdownRenderer = memo(MarkdownRendererImpl);
+//#endregion
+//#region src/client/components/typing-indicator.tsx
+function Dot({ delay }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "w-1.5 h-1.5 rounded-full bg-primary-500 animate-bounce",
+		style: { animationDelay: delay }
+	});
+}
+function TypingIndicator({ label = "Waiting…" }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2 text-xs text-muted",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx(Dot, { delay: "0ms" }),
+				/* @__PURE__ */ jsx(Dot, { delay: "120ms" }),
+				/* @__PURE__ */ jsx(Dot, { delay: "240ms" })
+			]
+		}), label]
+	});
+}
+//#endregion
+//#region src/client/components/chat-message.tsx
+function UsageChip({ usage, compact }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted font-mono",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "px-1 py-0.5 rounded bg-warning-500/15 text-warning-500 text-[10px] font-bold uppercase tracking-wide",
+				children: "DEV"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				title: "Provider / model",
+				children: [
+					usage.provider,
+					"/",
+					usage.model
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted",
+				children: "·"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				title: "Prompt tokens",
+				children: [usage.promptTokens, "↑"]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				title: "Completion tokens",
+				children: [usage.completionTokens, "↓"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted",
+				children: "·"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				title: "Total tokens",
+				className: "text-primary-500 font-semibold",
+				children: [usage.totalTokens, " tok"]
+			}),
+			!compact && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted",
+				children: "·"
+			}), /* @__PURE__ */ jsxs("span", {
+				title: "Elapsed",
+				children: [usage.elapsedMs, "ms"]
+			})] })
+		]
+	});
+}
+function ContextChip({ chip, compact }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted",
+		children: chip.missing ? /* @__PURE__ */ jsx("span", { children: compact ? "No docs in scope" : "No docs page in scope" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(FileIcon, { size: 12 }),
+			/* @__PURE__ */ jsx("span", { children: "Reading" }),
+			/* @__PURE__ */ jsx("code", {
+				className: "px-1 py-0.5 rounded bg-surface text-primary-500 text-[10px] font-mono",
+				children: chip.page
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted",
+				children: "·"
+			}),
+			/* @__PURE__ */ jsxs("span", { children: [chip.chars, compact ? "c" : " chars"] }),
+			!compact && typeof chip.elapsedMs === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted",
+				children: "·"
+			}), /* @__PURE__ */ jsxs("span", { children: [chip.elapsedMs, "ms"] })] })
+		] })
+	});
+}
+function ChatMessageImpl({ message: msg, variant = "bubble", devMode, className, userClassName, assistantClassName, markdownClassName }) {
+	const compact = variant === "dialog";
+	const isUser = msg.role === "user";
+	const containerClass = cn("flex flex-col", compact ? "max-w-full" : "max-w-[85%]", isUser ? "ml-auto items-end" : "items-start", className);
+	const bubbleClass = cn("rounded-2xl px-3.5 py-2.5 text-left", isUser ? cn("rounded-br-md bg-primary-500 text-white shadow-sm", compact && "max-w-[90%]", userClassName) : msg.status === "error" ? cn("rounded-bl-md border border-danger-500/30 bg-danger-500/10 text-danger-500", assistantClassName) : cn("rounded-bl-md border border-subtle bg-surface text-body shadow-sm", assistantClassName));
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClass,
+		children: [
+			msg.role === "assistant" && msg.usage && devMode && /* @__PURE__ */ jsx(UsageChip, {
+				usage: msg.usage,
+				compact
+			}),
+			msg.role === "assistant" && msg.contextChip && /* @__PURE__ */ jsx(ContextChip, {
+				chip: msg.contextChip,
+				compact
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: bubbleClass,
+				children: isUser ? /* @__PURE__ */ jsx("p", {
+					className: `whitespace-pre-wrap ${compact ? "text-xs" : "text-sm"}`,
+					children: msg.content
+				}) : msg.status === "cancelled" ? msg.content ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "whitespace-pre-wrap text-sm text-body",
+					children: msg.content
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-[11px] text-muted",
+					children: "Generation stopped."
+				})] }) : /* @__PURE__ */ jsx("p", {
+					className: cn("text-muted", compact ? "text-xs" : "text-sm"),
+					children: "Generation stopped."
+				}) : msg.status === "error" ? msg.content ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "whitespace-pre-wrap text-sm text-body",
+					children: msg.content
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-xs text-danger-500",
+					children: msg.errorMessage || "Something went wrong."
+				})] }) : /* @__PURE__ */ jsxs("p", {
+					className: compact ? "text-xs" : "text-sm",
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Error:" }),
+						" ",
+						msg.errorMessage || "Something went wrong."
+					]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "ask-ai-streamdown",
+					children: msg.content ? /* @__PURE__ */ jsx(MarkdownRenderer, {
+						content: msg.content,
+						className: cn("text-sm leading-relaxed", markdownClassName)
+					}) : msg.status === "reading" ? /* @__PURE__ */ jsx(TypingIndicator, { label: "Reading page…" }) : /* @__PURE__ */ jsx(TypingIndicator, { label: "Waiting…" })
+				})
+			})
+		]
+	});
+}
+/**
+* Memoized so that during streaming only the message whose content actually
+* changed re-renders. The hook structurally shares the array and replaces the
+* final assistant message with a new object, so all older siblings keep their
+* identity and are skipped by the default shallow comparison.
+*/
+const ChatMessage = memo(ChatMessageImpl);
 //#endregion
 //#region src/client/components/ask-ai-bubble.tsx
-function AskAiBubble() {
-	const { messages, input, setInput, isLoading, submitQuestion, stopStreaming, clearChat, isOpen, setIsOpen, devMode } = useAskAi();
+function AskAiBubble(props = {}) {
+	const { messages, input, setInput, isLoading, submitQuestion, stopStreaming, clearChat, isOpen, setIsOpen, devMode, ui, classNames = {} } = useAskAi(props);
 	const messagesEndRef = useRef(null);
+	const inputRef = useRef(null);
+	const triggerRef = useRef(null);
+	const wasOpenRef = useRef(false);
+	const titleId = useId();
+	const panelId = useId();
+	const lastMessageContent = messages.at(-1)?.content;
 	useEffect(() => {
-		if (isOpen) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-	}, [messages, isOpen]);
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		if (!input.trim()) return;
-		submitQuestion(input);
-	};
+		if (isOpen) {
+			wasOpenRef.current = true;
+			inputRef.current?.focus();
+		} else if (wasOpenRef.current) {
+			wasOpenRef.current = false;
+			triggerRef.current?.focus();
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		if (isOpen && lastMessageContent !== void 0) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [isOpen, lastMessageContent]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "fixed bottom-6 right-6 z-50 flex flex-col items-end",
-		children: [isOpen && /* @__PURE__ */ jsxs("div", {
-			className: "mb-4 w-[380px] max-w-[calc(100vw-2rem)] h-[min(520px,calc(100vh-8rem))] bg-main/90 backdrop-blur-md border border-subtle rounded-2xl shadow-xl flex flex-col overflow-hidden animate-in fade-in slide-in-from-bottom-5 duration-200",
+		className: cn("pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-stretch md:inset-x-auto md:bottom-6 md:right-6 md:items-end", classNames.root),
+		children: [isOpen ? /* @__PURE__ */ jsxs("section", {
+			id: panelId,
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					setIsOpen(false);
+					return;
+				}
+				if (event.key !== "Tab") return;
+				const focusable = Array.from(event.currentTarget.querySelectorAll("button:not([disabled]), textarea:not([disabled]), [href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
+				if (focusable.length === 0) return;
+				const first = focusable[0];
+				const last = focusable[focusable.length - 1];
+				if (event.shiftKey && document.activeElement === first) {
+					event.preventDefault();
+					last.focus();
+				} else if (!event.shiftKey && document.activeElement === last) {
+					event.preventDefault();
+					first.focus();
+				}
+			},
+			className: cn("pointer-events-auto mb-0 flex h-[min(100dvh,680px)] w-full flex-col overflow-hidden rounded-t-3xl border border-subtle bg-main/95 shadow-2xl shadow-black/10 backdrop-blur-xl motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 md:mb-4 md:h-[min(560px,calc(100vh-8rem))] md:w-[400px] md:max-w-[calc(100vw-2rem)] md:rounded-3xl", classNames.panel),
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "px-4 py-3 border-b border-subtle flex items-center justify-between bg-surface/50",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx("svg", {
-							xmlns: "http://www.w3.org/2000/svg",
-							width: "16",
-							height: "16",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "2.5",
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							className: "text-primary-500",
-							children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-sm font-semibold text-body",
-							children: "Ask Assistant"
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1",
-						children: [messages.length > 0 && /* @__PURE__ */ jsx("button", {
-							onClick: clearChat,
-							className: "p-1 text-muted hover:text-red-500 hover:bg-surface rounded-lg transition-colors cursor-pointer",
-							title: "Clear chat",
-							"aria-label": "Clear chat",
-							children: /* @__PURE__ */ jsxs("svg", {
-								xmlns: "http://www.w3.org/2000/svg",
-								width: "14",
-								height: "14",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: [
-									/* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
-									/* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
-									/* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
-								]
-							})
-						}), /* @__PURE__ */ jsx("button", {
-							onClick: () => setIsOpen(false),
-							className: "p-1 text-muted hover:text-body hover:bg-surface rounded-lg transition-colors cursor-pointer",
-							title: "Close assistant",
-							"aria-label": "Close assistant",
-							children: /* @__PURE__ */ jsxs("svg", {
-								xmlns: "http://www.w3.org/2000/svg",
-								width: "16",
-								height: "16",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-							})
-						})]
-					})]
+				/* @__PURE__ */ jsx(ChatHeader, {
+					title: ui.title,
+					canClear: messages.length > 0,
+					onClear: clearChat,
+					onClose: () => setIsOpen(false),
+					className: classNames.header,
+					titleId
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 overflow-y-auto p-4 flex flex-col gap-4",
+					role: "log",
+					"aria-live": "polite",
+					"aria-relevant": "additions text",
+					"aria-label": "Assistant messages",
+					className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-4", classNames.messages),
 					children: [
-						messages.length === 0 && /* @__PURE__ */ jsxs("div", {
-							className: "flex-1 flex flex-col items-center justify-center text-center p-6",
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "w-12 h-12 rounded-full bg-primary-500/10 flex items-center justify-center text-primary-500 mb-3",
-									children: /* @__PURE__ */ jsx("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("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
-									})
-								}),
-								/* @__PURE__ */ jsx("h3", {
-									className: "text-sm font-semibold text-body mb-1",
-									children: "How can I help you today?"
-								}),
-								/* @__PURE__ */ jsx("p", {
-									className: "text-xs text-muted max-w-[240px]",
-									children: "Ask questions about the current documentation page. The assistant only answers using the page you're viewing."
-								})
-							]
-						}),
-						messages.map((msg, i) => /* @__PURE__ */ jsxs("div", {
-							className: `flex flex-col max-w-[85%] ${msg.role === "user" ? "align-self-end items-end ml-auto" : "align-self-start items-start"}`,
-							children: [
-								msg.role === "assistant" && msg.usage && devMode && /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted font-mono",
-									children: [
-										/* @__PURE__ */ jsx("span", {
-											className: "px-1 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] font-bold uppercase tracking-wide",
-											children: "DEV"
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											title: "Provider / model",
-											children: [
-												msg.usage.provider,
-												"/",
-												msg.usage.model
-											]
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "text-muted",
-											children: "·"
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											title: "Prompt tokens",
-											children: [msg.usage.promptTokens, "↑"]
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											title: "Completion tokens",
-											children: [msg.usage.completionTokens, "↓"]
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "text-muted",
-											children: "·"
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											title: "Total tokens",
-											className: "text-primary-500 font-semibold",
-											children: [msg.usage.totalTokens, " tok"]
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "text-muted",
-											children: "·"
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											title: "Elapsed",
-											children: [msg.usage.elapsedMs, "ms"]
-										})
-									]
-								}),
-								msg.role === "assistant" && msg.contextChip && /* @__PURE__ */ jsx("div", {
-									className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted",
-									children: msg.contextChip.missing ? /* @__PURE__ */ jsx("span", { children: "No docs page in scope" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-										/* @__PURE__ */ jsxs("svg", {
-											xmlns: "http://www.w3.org/2000/svg",
-											width: "12",
-											height: "12",
-											viewBox: "0 0 24 24",
-											fill: "none",
-											stroke: "currentColor",
-											strokeWidth: "2",
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })]
-										}),
-										/* @__PURE__ */ jsx("span", { children: "Reading" }),
-										/* @__PURE__ */ jsx("code", {
-											className: "px-1 py-0.5 rounded bg-surface text-primary-500 text-[10px] font-mono",
-											children: msg.contextChip.page
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "text-muted",
-											children: "·"
-										}),
-										/* @__PURE__ */ jsxs("span", { children: [msg.contextChip.chars, " chars"] }),
-										typeof msg.contextChip.elapsedMs === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-											className: "text-muted",
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", { children: [msg.contextChip.elapsedMs, "ms"] })] })
-									] })
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: `px-3 py-2 rounded-xl ${msg.role === "user" ? "bg-primary-500 text-white rounded-br-none" : msg.status === "error" ? "bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 rounded-bl-none" : "bg-surface border border-subtle text-body rounded-bl-none"}`,
-									children: msg.role === "user" ? /* @__PURE__ */ jsx("p", {
-										className: "whitespace-pre-wrap text-sm",
-										children: msg.content
-									}) : msg.status === "error" ? /* @__PURE__ */ jsxs("p", {
-										className: "text-sm",
-										children: [
-											/* @__PURE__ */ jsx("strong", { children: "Error:" }),
-											" ",
-											msg.errorMessage || "Something went wrong."
-										]
-									}) : /* @__PURE__ */ jsx("div", {
-										className: "ask-ai-streamdown",
-										children: msg.content ? /* @__PURE__ */ jsx(MarkdownRenderer, { content: msg.content }) : msg.status === "reading" ? /* @__PURE__ */ jsxs("span", {
-											className: "inline-flex items-center gap-1.5 text-xs text-muted",
-											children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary-500 animate-pulse" }), /* @__PURE__ */ jsx("span", { children: "Reading page…" })]
-										}) : /* @__PURE__ */ jsxs("span", {
-											className: "inline-flex items-center gap-1.5 text-xs text-muted",
-											children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary-500 animate-pulse" }), /* @__PURE__ */ jsx("span", { children: "Waiting…" })]
-										})
-									})
-								})
-							]
-						}, i)),
+						messages.length === 0 ? /* @__PURE__ */ jsx(ChatEmptyState, {
+							title: ui.emptyTitle,
+							description: ui.emptyDescription,
+							className: classNames.emptyState
+						}) : null,
+						messages.map((message, index) => /* @__PURE__ */ jsx(ChatMessage, {
+							message,
+							devMode,
+							className: classNames.message,
+							userClassName: classNames.userMessage,
+							assistantClassName: classNames.assistantMessage,
+							markdownClassName: classNames.markdown
+						}, message.id ?? `legacy-message-${index}`)),
 						/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
 					]
 				}),
-				/* @__PURE__ */ jsxs("form", {
-					onSubmit: handleSubmit,
-					className: "p-3 border-t border-subtle bg-surface/30 flex gap-2",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "text",
-						value: input,
-						onChange: (e) => setInput(e.target.value),
-						placeholder: "Ask about this page…",
-						className: "flex-1 bg-surface border border-subtle rounded-xl px-3 py-1.5 text-sm outline-none text-body focus-visible:border-primary-500 transition-colors",
-						disabled: isLoading
-					}), isLoading ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: stopStreaming,
-						className: "px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-sm font-semibold rounded-xl flex items-center justify-center transition-colors cursor-pointer select-none",
-						title: "Stop generating",
-						"aria-label": "Stop generating",
-						children: /* @__PURE__ */ jsx("svg", {
-							xmlns: "http://www.w3.org/2000/svg",
-							width: "16",
-							height: "16",
-							viewBox: "0 0 24 24",
-							fill: "currentColor",
-							children: /* @__PURE__ */ jsx("rect", {
-								x: "6",
-								y: "6",
-								width: "12",
-								height: "12",
-								rx: "2"
-							})
-						})
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "submit",
-						disabled: !input.trim(),
-						className: "px-3 py-1.5 bg-primary-500 hover:bg-primary-600 disabled:opacity-50 text-white text-sm font-semibold rounded-xl flex items-center justify-center transition-colors cursor-pointer select-none",
-						"aria-label": "Send question",
-						children: /* @__PURE__ */ jsxs("svg", {
-							xmlns: "http://www.w3.org/2000/svg",
-							width: "16",
-							height: "16",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "2.5",
-							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" })]
-						})
-					})]
+				/* @__PURE__ */ jsx(ChatInput, {
+					input,
+					onInputChange: setInput,
+					onSubmit: submitQuestion,
+					onStop: stopStreaming,
+					isLoading,
+					inputRef,
+					placeholder: ui.placeholder,
+					hint: ui.composerHint,
+					className: cn("px-3 pb-3", classNames.composer),
+					inputClassName: classNames.input
 				})
 			]
-		}), /* @__PURE__ */ jsx("button", {
-			onClick: () => setIsOpen((prev) => !prev),
-			className: "w-12 h-12 bg-primary-500 hover:bg-primary-600 active:scale-95 text-white rounded-full flex items-center justify-center shadow-lg transition-all cursor-pointer select-none",
-			title: "Ask AI assistant",
-			"aria-label": "Ask AI assistant",
-			children: isOpen ? /* @__PURE__ */ jsxs("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				width: "20",
-				height: "20",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2.5",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-			}) : /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				width: "20",
-				height: "20",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-			})
+		}) : null, /* @__PURE__ */ jsx("button", {
+			ref: triggerRef,
+			type: "button",
+			onClick: () => setIsOpen((open) => !open),
+			className: cn("pointer-events-auto ml-auto flex size-14 cursor-pointer select-none items-center justify-center rounded-2xl bg-primary-500 text-white shadow-xl shadow-primary-500/25 transition-all hover:-translate-y-0.5 hover:bg-primary-600 hover:shadow-2xl active:translate-y-0 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-main motion-reduce:transform-none motion-reduce:transition-none", classNames.trigger),
+			title: ui.buttonTooltip,
+			"aria-label": ui.buttonTooltip,
+			"aria-expanded": isOpen,
+			"aria-controls": panelId,
+			children: isOpen ? /* @__PURE__ */ jsx(CloseIcon, {
+				size: 21,
+				strokeWidth: 2.5
+			}) : /* @__PURE__ */ jsx(ChatIcon, { size: 21 })
 		})]
 	});
 }
 //#endregion
 //#region src/client/components/ask-ai-dialog.tsx
-function AskAiDialog() {
-	const { messages, input, setInput, isLoading, submitQuestion, stopStreaming, clearChat, isOpen, setIsOpen, devMode } = useAskAi();
+function AskAiDialog(props = {}) {
+	const { messages, input, setInput, isLoading, submitQuestion, stopStreaming, clearChat, isOpen, setIsOpen, devMode, ui, classNames = {} } = useAskAi(props);
 	const messagesEndRef = useRef(null);
 	const inputRef = useRef(null);
+	const titleId = useId();
 	useEffect(() => {
 		if (isOpen) {
 			window.dispatchEvent(new CustomEvent("boltdocs:ask-ai:open"));
@@ -538,239 +854,63 @@ function AskAiDialog() {
 			inputRef.current?.focus();
 		} else window.dispatchEvent(new CustomEvent("boltdocs:ask-ai:close"));
 	}, [isOpen]);
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		if (!input.trim() || isLoading) return;
-		submitQuestion(input);
-	};
 	if (!isOpen) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "hidden xl:flex flex-col shrink-0 w-[320px] border-l border-subtle bg-main overflow-hidden",
+	return /* @__PURE__ */ jsxs("aside", {
+		"aria-labelledby": titleId,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") setIsOpen(false);
+		},
+		className: cn("hidden w-[340px] shrink-0 flex-col overflow-hidden border-l border-subtle bg-main xl:flex", classNames.root),
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "px-4 py-3 border-b border-subtle flex items-center justify-between bg-surface/50 shrink-0",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						width: "14",
-						height: "14",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2.5",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						className: "text-primary-500 shrink-0",
-						children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
-					}), /* @__PURE__ */ jsx("span", {
-						className: "text-xs font-bold text-body",
-						children: "AI Assistant"
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [messages.length > 0 && /* @__PURE__ */ jsx("button", {
-						onClick: clearChat,
-						className: "p-1 text-muted hover:text-red-500 hover:bg-surface rounded-lg transition-colors cursor-pointer",
-						title: "Clear chat",
-						"aria-label": "Clear chat",
-						children: /* @__PURE__ */ jsxs("svg", {
-							xmlns: "http://www.w3.org/2000/svg",
-							width: "12",
-							height: "12",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "2",
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							children: [
-								/* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
-								/* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
-								/* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
-							]
-						})
-					}), /* @__PURE__ */ jsx("button", {
-						onClick: () => setIsOpen(false),
-						className: "p-1 text-muted hover:text-body hover:bg-surface rounded-lg transition-colors cursor-pointer",
-						title: "Close assistant",
-						"aria-label": "Close assistant",
-						children: /* @__PURE__ */ jsxs("svg", {
-							xmlns: "http://www.w3.org/2000/svg",
-							width: "12",
-							height: "12",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "2",
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-						})
-					})]
-				})]
+			/* @__PURE__ */ jsx(ChatHeader, {
+				title: ui.title,
+				variant: "dialog",
+				canClear: messages.length > 0,
+				onClear: clearChat,
+				onClose: () => setIsOpen(false),
+				className: classNames.header,
+				titleId
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 overflow-y-auto p-4 flex flex-col gap-3 min-h-0",
+				role: "log",
+				"aria-live": "polite",
+				"aria-relevant": "additions text",
+				"aria-label": "Assistant messages",
+				className: cn("flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4", classNames.messages),
 				children: [
-					messages.length === 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex-1 flex flex-col items-center justify-center text-center p-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "w-10 h-10 rounded-xl bg-primary-500/10 flex items-center justify-center text-primary-500 mb-3",
-							children: /* @__PURE__ */ jsx("svg", {
-								xmlns: "http://www.w3.org/2000/svg",
-								width: "20",
-								height: "20",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
-							})
-						}), /* @__PURE__ */ jsx("p", {
-							className: "text-xs text-muted leading-relaxed",
-							children: "Ask anything about the current documentation page"
-						})]
-					}),
-					messages.map((msg, i) => /* @__PURE__ */ jsxs("div", {
-						className: `flex flex-col max-w-full ${msg.role === "user" ? "items-end" : "items-start"}`,
-						children: [
-							msg.role === "assistant" && msg.usage && devMode && /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted font-mono",
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										className: "px-1 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] font-bold uppercase tracking-wide",
-										children: "DEV"
-									}),
-									/* @__PURE__ */ jsxs("span", { children: [
-										msg.usage.provider,
-										"/",
-										msg.usage.model
-									] }),
-									/* @__PURE__ */ jsx("span", { children: "·" }),
-									/* @__PURE__ */ jsxs("span", { children: [msg.usage.promptTokens, "↑"] }),
-									/* @__PURE__ */ jsxs("span", { children: [msg.usage.completionTokens, "↓"] }),
-									/* @__PURE__ */ jsx("span", { children: "·" }),
-									/* @__PURE__ */ jsxs("span", {
-										className: "text-primary-500 font-semibold",
-										children: [msg.usage.totalTokens, " tok"]
-									}),
-									/* @__PURE__ */ jsx("span", { children: "·" }),
-									/* @__PURE__ */ jsxs("span", { children: [msg.usage.elapsedMs, "ms"] })
-								]
-							}),
-							msg.role === "assistant" && msg.contextChip && /* @__PURE__ */ jsx("div", {
-								className: "flex items-center gap-1.5 px-2 py-1 mb-1 text-[11px] text-muted",
-								children: msg.contextChip.missing ? /* @__PURE__ */ jsx("span", { children: "No docs in scope" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-									/* @__PURE__ */ jsxs("svg", {
-										xmlns: "http://www.w3.org/2000/svg",
-										width: "12",
-										height: "12",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })]
-									}),
-									/* @__PURE__ */ jsx("span", { children: "Reading" }),
-									/* @__PURE__ */ jsx("code", {
-										className: "px-1 py-0.5 rounded bg-surface text-primary-500 text-[10px] font-mono",
-										children: msg.contextChip.page
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "text-muted",
-										children: "·"
-									}),
-									/* @__PURE__ */ jsxs("span", { children: [msg.contextChip.chars, "c"] })
-								] })
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: `px-3 py-2 rounded-xl ${msg.role === "user" ? "bg-primary-500 text-white rounded-br-none max-w-[90%]" : msg.status === "error" ? "bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 rounded-bl-none" : "bg-surface border border-subtle text-body rounded-bl-none"}`,
-								children: msg.role === "user" ? /* @__PURE__ */ jsx("p", {
-									className: "whitespace-pre-wrap text-xs",
-									children: msg.content
-								}) : msg.status === "error" ? /* @__PURE__ */ jsxs("p", {
-									className: "text-xs",
-									children: [
-										/* @__PURE__ */ jsx("strong", { children: "Error:" }),
-										" ",
-										msg.errorMessage || "Something went wrong."
-									]
-								}) : /* @__PURE__ */ jsx("div", {
-									className: "ask-ai-streamdown",
-									children: msg.content ? /* @__PURE__ */ jsx(MarkdownRenderer, { content: msg.content }) : msg.status === "reading" ? /* @__PURE__ */ jsxs("span", {
-										className: "inline-flex items-center gap-1.5 text-xs text-muted",
-										children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary-500 animate-pulse" }), /* @__PURE__ */ jsx("span", { children: "Reading page…" })]
-									}) : /* @__PURE__ */ jsxs("span", {
-										className: "inline-flex items-center gap-1.5 text-xs text-muted",
-										children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary-500 animate-pulse" }), /* @__PURE__ */ jsx("span", { children: "Waiting…" })]
-									})
-								})
-							})
-						]
-					}, i)),
+					messages.length === 0 ? /* @__PURE__ */ jsx(ChatEmptyState, {
+						variant: "dialog",
+						title: ui.emptyTitle,
+						description: ui.emptyDescription,
+						className: classNames.emptyState
+					}) : null,
+					messages.map((message, index) => /* @__PURE__ */ jsx(ChatMessage, {
+						message,
+						variant: "dialog",
+						devMode,
+						className: classNames.message,
+						userClassName: classNames.userMessage,
+						assistantClassName: classNames.assistantMessage,
+						markdownClassName: classNames.markdown
+					}, message.id ?? `legacy-message-${index}`)),
 					/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
 				]
 			}),
-			/* @__PURE__ */ jsxs("form", {
-				onSubmit: handleSubmit,
-				className: "p-3 border-t border-subtle bg-surface/30 flex gap-2 shrink-0",
-				children: [/* @__PURE__ */ jsx("input", {
-					ref: inputRef,
-					type: "text",
-					value: input,
-					onChange: (e) => setInput(e.target.value),
-					placeholder: "Ask about this page…",
-					className: "flex-1 bg-surface border border-subtle rounded-lg px-2.5 py-1.5 text-xs outline-none text-body focus-within:border-primary-500 transition-colors min-w-0",
-					disabled: isLoading
-				}), isLoading ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: stopStreaming,
-					className: "px-2.5 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-semibold rounded-lg flex items-center justify-center transition-colors cursor-pointer shrink-0",
-					title: "Stop generating",
-					"aria-label": "Stop generating",
-					children: /* @__PURE__ */ jsx("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						width: "12",
-						height: "12",
-						viewBox: "0 0 24 24",
-						fill: "currentColor",
-						children: /* @__PURE__ */ jsx("rect", {
-							x: "6",
-							y: "6",
-							width: "12",
-							height: "12",
-							rx: "2"
-						})
-					})
-				}) : /* @__PURE__ */ jsx("button", {
-					type: "submit",
-					disabled: !input.trim(),
-					className: "px-2.5 py-1.5 bg-primary-500 hover:bg-primary-600 disabled:opacity-50 text-white text-xs font-semibold rounded-lg flex items-center justify-center transition-colors cursor-pointer shrink-0",
-					"aria-label": "Send question",
-					children: /* @__PURE__ */ jsxs("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						width: "12",
-						height: "12",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2.5",
-						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" })]
-					})
-				})]
+			/* @__PURE__ */ jsx(ChatInput, {
+				variant: "dialog",
+				input,
+				onInputChange: setInput,
+				onSubmit: submitQuestion,
+				onStop: stopStreaming,
+				isLoading,
+				inputRef,
+				placeholder: ui.placeholder,
+				hint: ui.composerHint,
+				className: cn("border-t border-subtle p-3", classNames.composer),
+				inputClassName: classNames.input
 			})
 		]
 	});
 }
 //#endregion
-//#region src/client/index.ts
-var client_default = null;
-//#endregion
-export { AskAiBubble, AskAiDialog, MarkdownRenderer, client_default as default, useAskAi };
+export { AskAiBubble, AskAiDialog, ChatEmptyState, ChatHeader, ChatInput, ChatMessage, MarkdownRenderer, TypingIndicator, useAskAi };