@farming-labs/theme 0.0.2-beta.4

package/dist/ai-search-dialog.mjs

@@ -0,0 +1,937 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { highlight } from "sugar-high";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ai-search-dialog.tsx
+/**
+* Enhanced search dialog with "Ask AI" tab + floating chat widget.
+*
+* All visual styles live in CSS (`ai.css` + theme overrides) using `fd-ai-*`
+* class names. Each theme (default, darksharp, pixel-border) provides its
+* own variant so the AI UI matches the rest of the docs.
+*
+* Two modes:
+* - `mode="search"` (default): AI tab inside the Cmd+K search dialog
+* - `mode="floating"`: Standalone floating chat widget with configurable position
+*/
+function buildCodeBlock(lang, code) {
+	const highlighted = highlight(code.replace(/\n$/, "")).replace(/<\/span>\n<span/g, "</span><span");
+	return `<div class="fd-ai-code-block"><div class="fd-ai-code-header">${lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : ""}<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button></div><pre><code>${highlighted}</code></pre></div>`;
+}
+function renderMarkdown(text) {
+	const codeBlocks = [];
+	let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+		codeBlocks.push(buildCodeBlock(lang, code));
+		return `\x00CB${codeBlocks.length - 1}\x00`;
+	});
+	processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_match, lang, code) => {
+		codeBlocks.push(buildCodeBlock(lang, code));
+		return `\x00CB${codeBlocks.length - 1}\x00`;
+	});
+	const lines = processed.split("\n");
+	const output = [];
+	let i = 0;
+	while (i < lines.length) {
+		if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+			const tableLines = [lines[i]];
+			i++;
+			i++;
+			while (i < lines.length && isTableRow(lines[i])) {
+				tableLines.push(lines[i]);
+				i++;
+			}
+			output.push(renderTable(tableLines));
+			continue;
+		}
+		output.push(lines[i]);
+		i++;
+	}
+	let result = output.join("\n");
+	result = result.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\">$1</a>").replace(/^### (.*$)/gm, "<h4>$1</h4>").replace(/^## (.*$)/gm, "<h3>$1</h3>").replace(/^# (.*$)/gm, "<h2>$1</h2>").replace(/^[-*] (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">•</span><span>$1</span></div>").replace(/^(\d+)\. (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">$1.</span><span>$2</span></div>").replace(/\n\n/g, "<div style=\"height:8px\"></div>").replace(/\n/g, "<br>");
+	result = result.replace(/\x00CB(\d+)\x00/g, (_m, idx) => codeBlocks[Number(idx)]);
+	return result;
+}
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function isTableRow(line) {
+	const trimmed = line.trim();
+	return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+}
+function isTableSeparator(line) {
+	return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+}
+function renderTable(rows) {
+	const parseRow = (row) => row.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+	return `<table>${`<thead><tr>${parseRow(rows[0]).map((c) => `<th>${c}</th>`).join("")}</tr></thead>`}<tbody>${rows.slice(1).map((row) => {
+		return `<tr>${parseRow(row).map((c) => `<td>${c}</td>`).join("")}</tr>`;
+	}).join("")}</tbody></table>`;
+}
+function SearchIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })]
+	});
+}
+function SparklesIcon({ size = 16 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }),
+			/* @__PURE__ */ jsx("path", { d: "M20 3v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M22 5h-4" })
+		]
+	});
+}
+function FileIcon() {
+	return /* @__PURE__ */ jsxs("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: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })]
+	});
+}
+function ArrowUpIcon() {
+	return /* @__PURE__ */ jsxs("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: "m5 12 7-7 7 7" }), /* @__PURE__ */ jsx("path", { d: "M12 19V5" })]
+	});
+}
+function XIcon() {
+	return /* @__PURE__ */ jsxs("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" })]
+	});
+}
+function DefaultLoadingIndicator({ label }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "fd-ai-loading",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "fd-ai-loading-text",
+			children: [label, " is thinking"]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "fd-ai-loading-dots",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" }),
+				/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" }),
+				/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" })
+			]
+		})]
+	});
+}
+function LoadingDots() {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "fd-ai-loading-dots",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" }),
+			/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" }),
+			/* @__PURE__ */ jsx("span", { className: "fd-ai-loading-dot" })
+		]
+	});
+}
+function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loadingComponentHtml }) {
+	const label = aiLabel || "AI";
+	const aiInputRef = useRef(null);
+	const messagesEndRef = useRef(null);
+	useEffect(() => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messages]);
+	useEffect(() => {
+		aiInputRef.current?.focus();
+	}, []);
+	const submitQuestion = useCallback(async (question) => {
+		if (!question.trim() || isStreaming) return;
+		const userMessage = {
+			role: "user",
+			content: question
+		};
+		const newMessages = [...messages, userMessage];
+		setAiInput("");
+		setIsStreaming(true);
+		setMessages([...newMessages, {
+			role: "assistant",
+			content: ""
+		}]);
+		try {
+			const res = await fetch(api, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ messages: newMessages.map((m) => ({
+					role: m.role,
+					content: m.content
+				})) })
+			});
+			if (!res.ok) {
+				let errMsg = "Something went wrong.";
+				try {
+					errMsg = (await res.json()).error || errMsg;
+				} catch {}
+				setMessages([...newMessages, {
+					role: "assistant",
+					content: errMsg
+				}]);
+				setIsStreaming(false);
+				return;
+			}
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+			let buffer = "";
+			let assistantContent = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				buffer += decoder.decode(value, { stream: true });
+				const lines = buffer.split("\n");
+				buffer = lines.pop() || "";
+				for (const line of lines) if (line.startsWith("data: ")) {
+					const data = line.slice(6).trim();
+					if (data === "[DONE]") continue;
+					try {
+						const content = JSON.parse(data).choices?.[0]?.delta?.content;
+						if (content) {
+							assistantContent += content;
+							setMessages([...newMessages, {
+								role: "assistant",
+								content: assistantContent
+							}]);
+						}
+					} catch {}
+				}
+			}
+			if (assistantContent) setMessages([...newMessages, {
+				role: "assistant",
+				content: assistantContent
+			}]);
+		} catch {
+			setMessages([...newMessages, {
+				role: "assistant",
+				content: "Failed to connect. Please try again."
+			}]);
+		}
+		setIsStreaming(false);
+	}, [
+		messages,
+		api,
+		isStreaming,
+		setMessages,
+		setAiInput,
+		setIsStreaming
+	]);
+	const handleAskAI = useCallback(async () => {
+		await submitQuestion(aiInput);
+	}, [aiInput, submitQuestion]);
+	const handleAIKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleAskAI();
+		}
+	};
+	const canSend = !!(aiInput.trim() && !isStreaming);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flex: 1,
+			minHeight: 0
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fd-ai-messages",
+			children: [messages.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-empty",
+				children: [
+					/* @__PURE__ */ jsx(SparklesIcon, { size: 20 }),
+					/* @__PURE__ */ jsx("div", {
+						className: "fd-ai-empty-title",
+						children: "Ask anything about the docs"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "fd-ai-empty-desc",
+						children: [label, " will search through the documentation and answer your question with relevant context."]
+					}),
+					suggestedQuestions && suggestedQuestions.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "fd-ai-suggestions",
+						children: suggestedQuestions.map((q, i) => /* @__PURE__ */ jsxs("button", {
+							onClick: () => submitQuestion(q),
+							className: "fd-ai-suggestion",
+							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), /* @__PURE__ */ jsx("span", {
+								style: { flex: 1 },
+								children: q
+							})]
+						}, i))
+					})
+				]
+			}) : messages.map((msg, i) => /* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-msg",
+				"data-role": msg.role,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "fd-ai-msg-label",
+					children: msg.role === "user" ? "You" : label
+				}), msg.role === "user" ? /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-bubble-user",
+					children: msg.content
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-bubble-ai",
+					children: msg.content ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }) : loadingComponentHtml ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: loadingComponentHtml } }) : /* @__PURE__ */ jsx(DefaultLoadingIndicator, { label })
+				})]
+			}, i)), /* @__PURE__ */ jsx("div", { ref: messagesEndRef })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "fd-ai-chat-footer",
+			children: [messages.length > 0 && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "flex-end",
+					paddingBottom: 8
+				},
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						setMessages([]);
+						setAiInput("");
+					},
+					className: "fd-ai-clear-btn",
+					children: "Clear chat"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-input-wrap",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: aiInputRef,
+					type: "text",
+					placeholder: "Ask a question...",
+					value: aiInput,
+					onChange: (e) => setAiInput(e.target.value),
+					onKeyDown: handleAIKeyDown,
+					disabled: isStreaming,
+					className: "fd-ai-input",
+					style: { opacity: isStreaming ? .5 : 1 }
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: handleAskAI,
+					disabled: !canSend,
+					className: "fd-ai-send-btn",
+					"data-active": canSend,
+					children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+				})]
+			})]
+		})]
+	});
+}
+function DocsSearchDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestions, aiLabel, loadingComponentHtml }) {
+	const [tab, setTab] = useState("search");
+	const [searchQuery, setSearchQuery] = useState("");
+	const [searchResults, setSearchResults] = useState([]);
+	const [isSearching, setIsSearching] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const searchInputRef = useRef(null);
+	const [messages, setMessages] = useState([]);
+	const [aiInput, setAiInput] = useState("");
+	const [isStreaming, setIsStreaming] = useState(false);
+	useEffect(() => {
+		if (open) {
+			setSearchQuery("");
+			setSearchResults([]);
+			setActiveIndex(0);
+			setTimeout(() => {
+				if (tab === "search") searchInputRef.current?.focus();
+			}, 50);
+		}
+	}, [open, tab]);
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (e.key === "Escape") onOpenChange(false);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [open, onOpenChange]);
+	useEffect(() => {
+		if (open) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!searchQuery.trim() || tab !== "search") {
+			setSearchResults([]);
+			setActiveIndex(0);
+			return;
+		}
+		setIsSearching(true);
+		const timer = setTimeout(async () => {
+			try {
+				const res = await fetch(`${api}?query=${encodeURIComponent(searchQuery)}`);
+				if (res.ok) {
+					setSearchResults(await res.json());
+					setActiveIndex(0);
+				}
+			} catch {}
+			setIsSearching(false);
+		}, 150);
+		return () => clearTimeout(timer);
+	}, [
+		searchQuery,
+		api,
+		tab
+	]);
+	const handleSearchKeyDown = (e) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setActiveIndex((i) => Math.min(i + 1, searchResults.length - 1));
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			setActiveIndex((i) => Math.max(i - 1, 0));
+		} else if (e.key === "Enter" && searchResults[activeIndex]) {
+			e.preventDefault();
+			onOpenChange(false);
+			window.location.href = searchResults[activeIndex].url;
+		}
+	};
+	if (!open) return null;
+	const aiName = aiLabel || "AI";
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		onClick: () => onOpenChange(false),
+		className: "fd-ai-overlay"
+	}), /* @__PURE__ */ jsxs("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		onClick: (e) => e.stopPropagation(),
+		className: "fd-ai-dialog",
+		style: {
+			left: "50%",
+			top: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "min(680px, calc(100vw - 32px))",
+			maxHeight: "min(560px, calc(100vh - 64px))",
+			animation: "fd-ai-slide-up 200ms ease-out"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-tab-bar",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						onClick: () => setTab("search"),
+						className: "fd-ai-tab",
+						"data-active": tab === "search",
+						children: [/* @__PURE__ */ jsx(SearchIcon, {}), " Search"]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						onClick: () => setTab("ai"),
+						className: "fd-ai-tab",
+						"data-active": tab === "ai",
+						children: [
+							/* @__PURE__ */ jsx(SparklesIcon, {}),
+							" Ask ",
+							aiName
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							marginLeft: "auto",
+							display: "flex",
+							gap: 4,
+							alignItems: "center"
+						},
+						children: /* @__PURE__ */ jsx("kbd", {
+							className: "fd-ai-esc",
+							children: "ESC"
+						})
+					})
+				]
+			}),
+			tab === "search" && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					flex: 1,
+					minHeight: 0
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "fd-ai-search-wrap",
+					children: [
+						/* @__PURE__ */ jsx(SearchIcon, {}),
+						/* @__PURE__ */ jsx("input", {
+							ref: searchInputRef,
+							type: "text",
+							placeholder: "Search documentation...",
+							value: searchQuery,
+							onChange: (e) => setSearchQuery(e.target.value),
+							onKeyDown: handleSearchKeyDown,
+							className: "fd-ai-input"
+						}),
+						isSearching && /* @__PURE__ */ jsx(LoadingDots, {})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-results",
+					children: searchResults.length > 0 ? searchResults.map((result, i) => /* @__PURE__ */ jsxs("button", {
+						onClick: () => {
+							onOpenChange(false);
+							window.location.href = result.url;
+						},
+						onMouseEnter: () => setActiveIndex(i),
+						className: "fd-ai-result",
+						"data-active": i === activeIndex,
+						children: [/* @__PURE__ */ jsx(FileIcon, {}), /* @__PURE__ */ jsx("span", {
+							dangerouslySetInnerHTML: { __html: result.content },
+							style: { flex: 1 }
+						})]
+					}, result.id)) : /* @__PURE__ */ jsx("div", {
+						className: "fd-ai-result-empty",
+						children: searchQuery.trim() ? isSearching ? "Searching..." : `No results found. Try the Ask ${aiName} tab.` : "Type to search the docs"
+					})
+				})]
+			}),
+			tab === "ai" && /* @__PURE__ */ jsx(AIChat, {
+				api,
+				messages,
+				setMessages,
+				aiInput,
+				setAiInput,
+				isStreaming,
+				setIsStreaming,
+				suggestedQuestions,
+				aiLabel,
+				loadingComponentHtml
+			})
+		]
+	})] }), document.body);
+}
+const BTN_POSITIONS = {
+	"bottom-right": {
+		bottom: 24,
+		right: 24
+	},
+	"bottom-left": {
+		bottom: 24,
+		left: 24
+	},
+	"bottom-center": {
+		bottom: 24,
+		left: "50%",
+		transform: "translateX(-50%)"
+	}
+};
+const PANEL_POSITIONS = {
+	"bottom-right": {
+		bottom: 80,
+		right: 24
+	},
+	"bottom-left": {
+		bottom: 80,
+		left: 24
+	},
+	"bottom-center": {
+		bottom: 80,
+		left: "50%",
+		transform: "translateX(-50%)"
+	}
+};
+const POPOVER_POSITIONS = {
+	"bottom-right": {
+		bottom: 80,
+		right: 24
+	},
+	"bottom-left": {
+		bottom: 80,
+		left: 24
+	},
+	"bottom-center": {
+		bottom: 80,
+		left: "50%",
+		transform: "translateX(-50%)"
+	}
+};
+function getContainerStyles(style, position) {
+	switch (style) {
+		case "modal": return {
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "min(680px, calc(100vw - 32px))",
+			height: "min(560px, calc(100vh - 64px))"
+		};
+		case "popover": return {
+			...POPOVER_POSITIONS[position] || POPOVER_POSITIONS["bottom-right"],
+			width: "min(360px, calc(100vw - 48px))",
+			height: "min(400px, calc(100vh - 120px))"
+		};
+		default: return {
+			...PANEL_POSITIONS[position] || PANEL_POSITIONS["bottom-right"],
+			width: "min(400px, calc(100vw - 48px))",
+			height: "min(500px, calc(100vh - 120px))"
+		};
+	}
+}
+function getAnimation(style) {
+	return style === "modal" ? "fd-ai-float-center-in 200ms ease-out" : "fd-ai-float-in 200ms ease-out";
+}
+function FloatingAIChat({ api = "/api/docs", position = "bottom-right", floatingStyle = "panel", triggerComponentHtml, suggestedQuestions, aiLabel, loadingComponentHtml }) {
+	const [mounted, setMounted] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [messages, setMessages] = useState([]);
+	const [aiInput, setAiInput] = useState("");
+	const [isStreaming, setIsStreaming] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		if (isOpen) {
+			const handler = (e) => {
+				if (e.key === "Escape") setIsOpen(false);
+			};
+			document.addEventListener("keydown", handler);
+			return () => document.removeEventListener("keydown", handler);
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		if (isOpen && (floatingStyle === "modal" || floatingStyle === "full-modal")) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [isOpen, floatingStyle]);
+	if (!mounted) return null;
+	if (floatingStyle === "full-modal") return /* @__PURE__ */ jsx(FullModalAIChat, {
+		api,
+		isOpen,
+		setIsOpen,
+		messages,
+		setMessages,
+		aiInput,
+		setAiInput,
+		isStreaming,
+		setIsStreaming,
+		suggestedQuestions,
+		aiLabel,
+		loadingComponentHtml,
+		triggerComponentHtml,
+		position
+	});
+	const btnPosition = BTN_POSITIONS[position] || BTN_POSITIONS["bottom-right"];
+	const isModal = floatingStyle === "modal";
+	const containerStyles = getContainerStyles(floatingStyle, position);
+	const aiName = aiLabel || "AI";
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+		isOpen && isModal && /* @__PURE__ */ jsx("div", {
+			onClick: () => setIsOpen(false),
+			className: "fd-ai-overlay"
+		}),
+		isOpen && /* @__PURE__ */ jsxs("div", {
+			onClick: (e) => e.stopPropagation(),
+			className: "fd-ai-dialog",
+			style: {
+				...containerStyles,
+				animation: getAnimation(floatingStyle)
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-header",
+				children: [
+					/* @__PURE__ */ jsx(SparklesIcon, { size: 16 }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "fd-ai-header-title",
+						children: ["Ask ", aiName]
+					}),
+					isModal && /* @__PURE__ */ jsx("kbd", {
+						className: "fd-ai-esc",
+						children: "ESC"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => setIsOpen(false),
+						className: "fd-ai-close-btn",
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}), /* @__PURE__ */ jsx(AIChat, {
+				api,
+				messages,
+				setMessages,
+				aiInput,
+				setAiInput,
+				isStreaming,
+				setIsStreaming,
+				suggestedQuestions,
+				aiLabel,
+				loadingComponentHtml
+			})]
+		}),
+		!isOpen && (triggerComponentHtml ? /* @__PURE__ */ jsx("div", {
+			onClick: () => setIsOpen(true),
+			className: "fd-ai-floating-trigger",
+			style: btnPosition,
+			dangerouslySetInnerHTML: { __html: triggerComponentHtml }
+		}) : /* @__PURE__ */ jsx("button", {
+			onClick: () => setIsOpen(true),
+			"aria-label": `Ask ${aiName}`,
+			className: "fd-ai-floating-btn",
+			style: btnPosition,
+			children: /* @__PURE__ */ jsx(SparklesIcon, { size: 22 })
+		}))
+	] }), document.body);
+}
+function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loadingComponentHtml, triggerComponentHtml, position }) {
+	const label = aiLabel || "AI";
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const btnPosition = BTN_POSITIONS[position] || BTN_POSITIONS["bottom-right"];
+	useEffect(() => {
+		if (isOpen) setTimeout(() => inputRef.current?.focus(), 100);
+	}, [isOpen]);
+	useEffect(() => {
+		if (listRef.current) listRef.current.scrollTo({
+			top: listRef.current.scrollHeight,
+			behavior: "smooth"
+		});
+	}, [messages]);
+	const submitQuestion = useCallback(async (question) => {
+		if (!question.trim() || isStreaming) return;
+		const userMessage = {
+			role: "user",
+			content: question
+		};
+		const newMessages = [...messages, userMessage];
+		setAiInput("");
+		setIsStreaming(true);
+		setMessages([...newMessages, {
+			role: "assistant",
+			content: ""
+		}]);
+		try {
+			const res = await fetch(api, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ messages: newMessages.map((m) => ({
+					role: m.role,
+					content: m.content
+				})) })
+			});
+			if (!res.ok) {
+				let errMsg = "Something went wrong.";
+				try {
+					errMsg = (await res.json()).error || errMsg;
+				} catch {}
+				setMessages([...newMessages, {
+					role: "assistant",
+					content: errMsg
+				}]);
+				setIsStreaming(false);
+				return;
+			}
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+			let buffer = "";
+			let assistantContent = "";
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				buffer += decoder.decode(value, { stream: true });
+				const lines = buffer.split("\n");
+				buffer = lines.pop() || "";
+				for (const line of lines) if (line.startsWith("data: ")) {
+					const data = line.slice(6).trim();
+					if (data === "[DONE]") continue;
+					try {
+						const content = JSON.parse(data).choices?.[0]?.delta?.content;
+						if (content) {
+							assistantContent += content;
+							setMessages([...newMessages, {
+								role: "assistant",
+								content: assistantContent
+							}]);
+						}
+					} catch {}
+				}
+			}
+			if (assistantContent) setMessages([...newMessages, {
+				role: "assistant",
+				content: assistantContent
+			}]);
+		} catch {
+			setMessages([...newMessages, {
+				role: "assistant",
+				content: "Failed to connect. Please try again."
+			}]);
+		}
+		setIsStreaming(false);
+	}, [
+		messages,
+		api,
+		isStreaming,
+		setMessages,
+		setAiInput,
+		setIsStreaming
+	]);
+	const canSend = !!(aiInput.trim() && !isStreaming);
+	const showSuggestions = messages.length === 0 && !isStreaming;
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			if (canSend) submitQuestion(aiInput);
+		}
+	};
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [isOpen && /* @__PURE__ */ jsxs("div", {
+		className: "fd-ai-fm-overlay",
+		onClick: (e) => {
+			if (e.target === e.currentTarget) setIsOpen(false);
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "fd-ai-fm-topbar",
+			children: /* @__PURE__ */ jsx("button", {
+				onClick: () => setIsOpen(false),
+				className: "fd-ai-fm-close-btn",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			className: "fd-ai-fm-messages",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "fd-ai-fm-messages-inner",
+				children: messages.map((msg, i) => /* @__PURE__ */ jsxs("div", {
+					className: "fd-ai-fm-msg",
+					"data-role": msg.role,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "fd-ai-fm-msg-label",
+						"data-role": msg.role,
+						children: msg.role === "user" ? "you" : label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "fd-ai-fm-msg-content",
+						children: msg.content ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }) : loadingComponentHtml ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: loadingComponentHtml } }) : /* @__PURE__ */ jsxs("div", {
+							className: "fd-ai-fm-thinking",
+							children: [
+								/* @__PURE__ */ jsx("span", { className: "fd-ai-fm-thinking-dot" }),
+								/* @__PURE__ */ jsx("span", { className: "fd-ai-fm-thinking-dot" }),
+								/* @__PURE__ */ jsx("span", { className: "fd-ai-fm-thinking-dot" })
+							]
+						})
+					})]
+				}, i))
+			})
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: `fd-ai-fm-input-bar ${isOpen ? "fd-ai-fm-input-bar--open" : "fd-ai-fm-input-bar--closed"}`,
+		style: isOpen ? void 0 : btnPosition,
+		children: !isOpen ? triggerComponentHtml ? /* @__PURE__ */ jsx("div", {
+			onClick: () => setIsOpen(true),
+			dangerouslySetInnerHTML: { __html: triggerComponentHtml }
+		}) : /* @__PURE__ */ jsxs("button", {
+			onClick: () => setIsOpen(true),
+			className: "fd-ai-fm-trigger-btn",
+			"aria-label": `Ask ${label}`,
+			children: [/* @__PURE__ */ jsx(SparklesIcon, { size: 16 }), /* @__PURE__ */ jsxs("span", { children: ["Ask ", label] })]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "fd-ai-fm-input-container",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "fd-ai-fm-input-wrap",
+					children: [/* @__PURE__ */ jsx("textarea", {
+						ref: inputRef,
+						className: "fd-ai-fm-input",
+						placeholder: isStreaming ? "answering..." : `Ask ${label}`,
+						value: aiInput,
+						onChange: (e) => setAiInput(e.target.value),
+						onKeyDown: handleKeyDown,
+						disabled: isStreaming,
+						rows: 1
+					}), isStreaming ? /* @__PURE__ */ jsx("button", {
+						className: "fd-ai-fm-send-btn",
+						onClick: () => setIsStreaming(false),
+						children: /* @__PURE__ */ jsx(LoadingDots, {})
+					}) : /* @__PURE__ */ jsx("button", {
+						className: "fd-ai-fm-send-btn",
+						"data-active": canSend,
+						disabled: !canSend,
+						onClick: () => submitQuestion(aiInput),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+					})]
+				}),
+				showSuggestions && suggestedQuestions && suggestedQuestions.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "fd-ai-fm-suggestions-area",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "fd-ai-fm-suggestions-label",
+						children: "Try asking:"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "fd-ai-fm-suggestions",
+						children: suggestedQuestions.map((q, i) => /* @__PURE__ */ jsx("button", {
+							onClick: () => submitQuestion(q),
+							className: "fd-ai-fm-suggestion",
+							children: q
+						}, i))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "fd-ai-fm-footer-bar",
+					children: messages.length > 0 ? /* @__PURE__ */ jsxs("button", {
+						className: "fd-ai-fm-clear-btn",
+						onClick: () => {
+							if (!isStreaming) {
+								setMessages([]);
+								setAiInput("");
+							}
+						},
+						"aria-disabled": isStreaming,
+						children: [/* @__PURE__ */ jsx(TrashIcon, {}), /* @__PURE__ */ jsx("span", { children: "Clear" })]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "fd-ai-fm-footer-hint",
+						children: "AI can be inaccurate, please verify the information."
+					})
+				})
+			]
+		})
+	})] }), document.body);
+}
+function TrashIcon() {
+	return /* @__PURE__ */ jsxs("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" })
+		]
+	});
+}
+
+//#endregion
+export { DocsSearchDialog, FloatingAIChat };