@farming-labs/theme 0.0.3-beta.3 → 0.0.3-beta.5

package/dist/ai-search-dialog.d.mts

@@ -1,4 +1,8 @@
 //#region src/ai-search-dialog.d.ts
+type AIModelOption = {
+  id: string;
+  label: string;
+};
 type LoaderVariant = "shimmer-dots" | "circular" | "dots" | "typing" | "wave" | "bars" | "pulse" | "pulse-dot" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
 declare function DocsSearchDialog({
   open,
@@ -7,7 +11,9 @@ declare function DocsSearchDialog({
   suggestedQuestions,
   aiLabel,
   loaderVariant,
-  loadingComponentHtml
+  loadingComponentHtml,
+  models,
+  defaultModelId
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -16,6 +22,8 @@ declare function DocsSearchDialog({
   aiLabel?: string;
   loaderVariant?: LoaderVariant;
   loadingComponentHtml?: string;
+  models?: AIModelOption[];
+  defaultModelId?: string;
 }): any;
 type FloatingPosition = "bottom-right" | "bottom-left" | "bottom-center";
 type FloatingStyle = "panel" | "modal" | "popover" | "full-modal";
@@ -27,7 +35,9 @@ declare function FloatingAIChat({
   suggestedQuestions,
   aiLabel,
   loaderVariant,
-  loadingComponentHtml
+  loadingComponentHtml,
+  models,
+  defaultModelId
 }: {
   api?: string;
   position?: FloatingPosition;
@@ -37,6 +47,8 @@ declare function FloatingAIChat({
   aiLabel?: string;
   loaderVariant?: LoaderVariant;
   loadingComponentHtml?: string;
+  models?: AIModelOption[];
+  defaultModelId?: string;
 }): any;
 declare function AIModalDialog({
   open,
@@ -45,7 +57,9 @@ declare function AIModalDialog({
   suggestedQuestions,
   aiLabel,
   loaderVariant,
-  loadingComponentHtml
+  loadingComponentHtml,
+  models,
+  defaultModelId
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -54,6 +68,8 @@ declare function AIModalDialog({
   aiLabel?: string;
   loaderVariant?: LoaderVariant;
   loadingComponentHtml?: string;
+  models?: AIModelOption[];
+  defaultModelId?: string;
 }): any;
 //#endregion
 export { AIModalDialog, DocsSearchDialog, FloatingAIChat };

package/dist/ai-search-dialog.mjs

@@ -281,10 +281,77 @@ function InlineLoaderDots() {
 		]
 	});
 }
-function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml }) {
+function ModelSelector({ models, selectedId, onChange, disabled }) {
+	const [open, setOpen] = useState(false);
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		function handleClick(e) {
+			if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+		}
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	const current = models.find((m) => m.id === selectedId) ?? models[0];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "fd-ai-model-dropdown",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "fd-ai-model-dropdown-btn",
+			onClick: () => !disabled && setOpen(!open),
+			"aria-expanded": open,
+			disabled,
+			children: [/* @__PURE__ */ jsx("span", { children: current?.label ?? "Select model" }), /* @__PURE__ */ jsx("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: "m6 9 6 6 6-6" })
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "fd-ai-model-dropdown-menu",
+			role: "menu",
+			children: models.map((m) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "menuitem",
+				className: "fd-ai-model-dropdown-item",
+				"data-active": m.id === selectedId,
+				onClick: () => {
+					onChange(m.id);
+					setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "fd-ai-model-dropdown-label",
+					children: m.label
+				}), m.id === selectedId && /* @__PURE__ */ jsx("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+				})]
+			}, m.id))
+		})]
+	});
+}
+function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const label = aiLabel || "AI";
 	const aiInputRef = useRef(null);
 	const messagesEndRef = useRef(null);
+	const [selectedModel, setSelectedModel] = useState(() => {
+		const trimmed = (defaultModelId ?? "").trim();
+		return trimmed.length > 0 ? trimmed : void 0;
+	});
+	const effectiveModelId = selectedModel || (Array.isArray(models) && models.length > 0 ? models[0].id : void 0);
 	useEffect(() => {
 		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
 	}, [messages]);
@@ -308,10 +375,13 @@ function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming,
 			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
-				})) })
+				body: JSON.stringify({
+					messages: newMessages.map((m) => ({
+						role: m.role,
+						content: m.content
+					})),
+					model: effectiveModelId
+				})
 			});
 			if (!res.ok) {
 				let errMsg = "Something went wrong.";
@@ -367,7 +437,8 @@ function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming,
 		isStreaming,
 		setMessages,
 		setAiInput,
-		setIsStreaming
+		setIsStreaming,
+		effectiveModelId
 	]);
 	const handleAskAI = useCallback(async () => {
 		await submitQuestion(aiInput);
@@ -434,44 +505,56 @@ function AIChat({ api, messages, setMessages, aiInput, setAiInput, isStreaming,
 			}, 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("");
+			children: [
+				Array.isArray(models) && models.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-model-select-row",
+					children: /* @__PURE__ */ jsx(ModelSelector, {
+						models,
+						selectedId: effectiveModelId ?? models[0].id,
+						onChange: setSelectedModel,
+						disabled: isStreaming
+					})
+				}),
+				messages.length > 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						justifyContent: "flex-end",
+						paddingBottom: 8
 					},
-					className: "fd-ai-clear-btn",
-					children: "Clear chat"
+					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, {})
+					})]
 				})
-			}), /* @__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, loaderVariant, loadingComponentHtml }) {
+function DocsSearchDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const [tab, setTab] = useState("search");
 	const [searchQuery, setSearchQuery] = useState("");
 	const [searchResults, setSearchResults] = useState([]);
@@ -481,6 +564,11 @@ function DocsSearchDialog({ open, onOpenChange, api = "/api/docs", suggestedQues
 	const [messages, setMessages] = useState([]);
 	const [aiInput, setAiInput] = useState("");
 	const [isStreaming, setIsStreaming] = useState(false);
+	const [selectedModel, setSelectedModel] = useState(() => {
+		const trimmed = (defaultModelId ?? "").trim();
+		return trimmed.length > 0 ? trimmed : void 0;
+	});
+	const effectiveModelId = selectedModel || (Array.isArray(models) && models.length > 0 ? models[0].id : void 0);
 	useEffect(() => {
 		if (open) {
 			setSearchQuery("");
@@ -647,7 +735,9 @@ function DocsSearchDialog({ open, onOpenChange, api = "/api/docs", suggestedQues
 				suggestedQuestions,
 				aiLabel,
 				loaderVariant,
-				loadingComponentHtml
+				loadingComponentHtml,
+				models,
+				defaultModelId: effectiveModelId
 			})
 		]
 	})] }), document.body);
@@ -721,7 +811,7 @@ function getContainerStyles(style, position) {
 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, loaderVariant, loadingComponentHtml }) {
+function FloatingAIChat({ api = "/api/docs", position = "bottom-right", floatingStyle = "panel", triggerComponentHtml, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const [mounted, setMounted] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const [messages, setMessages] = useState([]);
@@ -762,7 +852,9 @@ function FloatingAIChat({ api = "/api/docs", position = "bottom-right", floating
 		loaderVariant,
 		loadingComponentHtml,
 		triggerComponentHtml,
-		position
+		position,
+		models,
+		defaultModelId
 	});
 	const btnPosition = BTN_POSITIONS[position] || BTN_POSITIONS["bottom-right"];
 	const isModal = floatingStyle === "modal";
@@ -826,11 +918,16 @@ function FloatingAIChat({ api = "/api/docs", position = "bottom-right", floating
 		}))
 	] }), document.body);
 }
-function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, triggerComponentHtml, position }) {
+function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInput, setAiInput, isStreaming, setIsStreaming, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, triggerComponentHtml, position, models, defaultModelId }) {
 	const label = aiLabel || "AI";
 	const inputRef = useRef(null);
 	const listRef = useRef(null);
 	const btnPosition = BTN_POSITIONS[position] || BTN_POSITIONS["bottom-right"];
+	const [selectedModel, setSelectedModel] = useState(() => {
+		const trimmed = (defaultModelId ?? "").trim();
+		return trimmed.length > 0 ? trimmed : void 0;
+	});
+	const effectiveModelId = selectedModel || (Array.isArray(models) && models.length > 0 ? models[0].id : void 0);
 	useEffect(() => {
 		if (isOpen) setTimeout(() => inputRef.current?.focus(), 100);
 	}, [isOpen]);
@@ -857,10 +954,13 @@ function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInpu
 			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
-				})) })
+				body: JSON.stringify({
+					messages: newMessages.map((m) => ({
+						role: m.role,
+						content: m.content
+					})),
+					model: effectiveModelId
+				})
 			});
 			if (!res.ok) {
 				let errMsg = "Something went wrong.";
@@ -916,7 +1016,8 @@ function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInpu
 		isStreaming,
 		setMessages,
 		setAiInput,
-		setIsStreaming
+		setIsStreaming,
+		effectiveModelId
 	]);
 	const canSend = !!(aiInput.trim() && !isStreaming);
 	const showSuggestions = messages.length === 0 && !isStreaming;
@@ -977,6 +1078,15 @@ function FullModalAIChat({ api, isOpen, setIsOpen, messages, setMessages, aiInpu
 		}) : /* @__PURE__ */ jsxs("div", {
 			className: "fd-ai-fm-input-container",
 			children: [
+				Array.isArray(models) && models.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-model-select-row fd-ai-model-select-row--fm",
+					children: /* @__PURE__ */ jsx(ModelSelector, {
+						models,
+						selectedId: effectiveModelId ?? models[0].id,
+						onChange: setSelectedModel,
+						disabled: isStreaming
+					})
+				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "fd-ai-fm-input-wrap",
 					children: [/* @__PURE__ */ jsx("textarea", {
@@ -1052,7 +1162,7 @@ function TrashIcon() {
 		]
 	});
 }
-function AIModalDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml }) {
+function AIModalDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const [messages, setMessages] = useState([]);
 	const [aiInput, setAiInput] = useState("");
 	const [isStreaming, setIsStreaming] = useState(false);
@@ -1120,7 +1230,9 @@ function AIModalDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestio
 				suggestedQuestions,
 				aiLabel,
 				loaderVariant,
-				loadingComponentHtml
+				loadingComponentHtml,
+				models,
+				defaultModelId
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "fd-ai-modal-footer",

package/dist/docs-ai-features.d.mts

@@ -10,6 +10,11 @@ interface DocsAIFeaturesProps {
   aiLabel?: string;
   loaderVariant?: string;
   loadingComponentHtml?: string;
+  models?: {
+    id: string;
+    label: string;
+  }[];
+  defaultModelId?: string;
 }
 declare function DocsAIFeatures({
   mode,
@@ -19,7 +24,9 @@ declare function DocsAIFeatures({
   suggestedQuestions,
   aiLabel,
   loaderVariant,
-  loadingComponentHtml
+  loadingComponentHtml,
+  models,
+  defaultModelId
 }: DocsAIFeaturesProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsAIFeatures };

package/dist/docs-ai-features.mjs

@@ -19,18 +19,22 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * This component is rendered inside the docs layout so the user's root layout
 * never needs to be modified — AI features work purely from `docs.config.tsx`.
 */
-function DocsAIFeatures({ mode, position = "bottom-right", floatingStyle = "panel", triggerComponentHtml, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml }) {
+function DocsAIFeatures({ mode, position = "bottom-right", floatingStyle = "panel", triggerComponentHtml, suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	if (mode === "search") return /* @__PURE__ */ jsx(SearchModeAI, {
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	});
 	if (mode === "sidebar-icon") return /* @__PURE__ */ jsx(SidebarIconModeAI, {
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	});
 	return /* @__PURE__ */ jsx(FloatingAIChat, {
 		api: "/api/docs",
@@ -40,10 +44,12 @@ function DocsAIFeatures({ mode, position = "bottom-right", floatingStyle = "pane
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	});
 }
-function SearchModeAI({ suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml }) {
+function SearchModeAI({ suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const [open, setOpen] = useState(false);
 	useEffect(() => {
 		function handler(e) {
@@ -79,10 +85,12 @@ function SearchModeAI({ suggestedQuestions, aiLabel, loaderVariant, loadingCompo
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	});
 }
-function SidebarIconModeAI({ suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml }) {
+function SidebarIconModeAI({ suggestedQuestions, aiLabel, loaderVariant, loadingComponentHtml, models, defaultModelId }) {
 	const [searchOpen, setSearchOpen] = useState(false);
 	const [aiOpen, setAiOpen] = useState(false);
 	useEffect(() => {
@@ -118,7 +126,9 @@ function SidebarIconModeAI({ suggestedQuestions, aiLabel, loaderVariant, loading
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	}), /* @__PURE__ */ jsx(AIModalDialog, {
 		open: aiOpen,
 		onOpenChange: setAiOpen,
@@ -126,7 +136,9 @@ function SidebarIconModeAI({ suggestedQuestions, aiLabel, loaderVariant, loading
 		suggestedQuestions,
 		aiLabel,
 		loaderVariant,
-		loadingComponentHtml
+		loadingComponentHtml,
+		models,
+		defaultModelId
 	})] });
 }
 

package/dist/docs-api.d.mts

@@ -18,11 +18,27 @@
  * export const revalidate = false;
  * ```
  */
+interface AIProviderConfig {
+  baseUrl: string;
+  apiKey?: string;
+}
+interface AIModelEntry {
+  id: string;
+  label: string;
+  provider?: string;
+}
+interface AIModelConfig {
+  models?: AIModelEntry[];
+  defaultModel?: string;
+}
 interface AIOptions {
   enabled?: boolean;
-  model?: string;
+  model?: string | AIModelConfig;
+  providers?: Record<string, AIProviderConfig>;
   systemPrompt?: string;
+  /** Default baseUrl when no per-model provider is configured. */
   baseUrl?: string;
+  /** Default apiKey when no per-model provider is configured. */
   apiKey?: string;
   maxResults?: number;
 }

package/dist/docs-api.mjs

@@ -108,9 +108,26 @@ function scanDocsDir(docsDir, entry) {
 	return indexes;
 }
 const DEFAULT_SYSTEM_PROMPT = `You are a helpful documentation assistant. Answer questions based on the provided documentation context. Be concise and accurate. If the answer is not in the context, say so honestly. Use markdown formatting for code examples and links.`;
+function resolveModelAndProvider(aiConfig, requestedModelId) {
+	const raw = aiConfig.model;
+	const modelList = typeof raw === "object" && raw?.models || [];
+	let modelId = requestedModelId;
+	if (!modelId) {
+		if (typeof raw === "string") modelId = raw;
+		else if (typeof raw === "object") modelId = raw.defaultModel ?? raw.models?.[0]?.id;
+		if (!modelId) modelId = "gpt-4o-mini";
+	}
+	const providerKey = modelList.find((m) => m.id === modelId)?.provider;
+	const providerConfig = providerKey && aiConfig.providers?.[providerKey];
+	const baseUrl = (providerConfig && providerConfig.baseUrl || aiConfig.baseUrl || "https://api.openai.com/v1").replace(/\/$/, "");
+	const apiKey = providerConfig && providerConfig.apiKey || aiConfig.apiKey || process.env.OPENAI_API_KEY;
+	return {
+		model: modelId,
+		baseUrl,
+		apiKey
+	};
+}
 async function handleAskAI(request, indexes, searchServer, aiConfig) {
-	const apiKey = aiConfig.apiKey ?? process.env.OPENAI_API_KEY;
-	if (!apiKey) return Response.json({ error: `AI is enabled but no API key was found. Either set apiKey in your docs.config or add OPENAI_API_KEY to your .env.local file.` }, { status: 500 });
 	let body;
 	try {
 		body = await request.json();
@@ -139,16 +156,16 @@ async function handleAskAI(request, indexes, searchServer, aiConfig) {
 		role: "system",
 		content: context ? `${systemPrompt}\n\n---\n\nDocumentation context:\n\n${context}` : systemPrompt
 	}, ...messages.filter((m) => m.role !== "system")];
-	const baseUrl = (aiConfig.baseUrl ?? "https://api.openai.com/v1").replace(/\/$/, "");
-	const model = aiConfig.model ?? "gpt-4o-mini";
-	const llmResponse = await fetch(`${baseUrl}/chat/completions`, {
+	const resolved = resolveModelAndProvider(aiConfig, typeof body.model === "string" && body.model.trim().length > 0 ? body.model.trim() : void 0);
+	if (!resolved.apiKey) return Response.json({ error: `AI is enabled but no API key was found. Either set apiKey in your docs.config ai section, configure a provider, or add OPENAI_API_KEY to your .env.local file.` }, { status: 500 });
+	const llmResponse = await fetch(`${resolved.baseUrl}/chat/completions`, {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/json",
-			Authorization: `Bearer ${apiKey}`
+			Authorization: `Bearer ${resolved.apiKey}`
 		},
 		body: JSON.stringify({
-			model,
+			model: resolved.model,
 			stream: true,
 			messages: llmMessages
 		})

package/dist/docs-layout.mjs

@@ -434,6 +434,13 @@ function createDocsLayout(config) {
 	const aiLabel = aiConfig?.aiLabel;
 	const aiLoaderVariant = aiConfig?.loader;
 	const aiLoadingComponentHtml = typeof aiConfig?.loadingComponent === "function" ? serializeIcon(aiConfig.loadingComponent({ name: aiLabel || "AI" })) : void 0;
+	const rawModelConfig = aiConfig?.model;
+	let aiModels = aiConfig?.models;
+	let aiDefaultModelId = aiConfig?.defaultModel ?? (typeof aiConfig?.model === "string" ? aiConfig.model : void 0);
+	if (rawModelConfig && typeof rawModelConfig === "object") {
+		aiModels = rawModelConfig.models ?? aiModels;
+		aiDefaultModelId = rawModelConfig.defaultModel ?? rawModelConfig.models?.[0]?.id ?? aiDefaultModelId;
+	}
 	const lastModifiedMap = buildLastModifiedMap(config.entry);
 	const descriptionMap = buildDescriptionMap(config.entry);
 	return function DocsLayoutWrapper({ children }) {
@@ -467,7 +474,9 @@ function createDocsLayout(config) {
 					suggestedQuestions: aiSuggestedQuestions,
 					aiLabel,
 					loaderVariant: aiLoaderVariant,
-					loadingComponentHtml: aiLoadingComponentHtml
+					loadingComponentHtml: aiLoadingComponentHtml,
+					models: aiModels,
+					defaultModelId: aiDefaultModelId
 				}),
 				/* @__PURE__ */ jsx(DocsPageClient, {
 					tocEnabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.3-beta.3",
+  "version": "0.0.3-beta.5",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -98,7 +98,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.3-beta.3"
+    "@farming-labs/docs": "0.0.3-beta.5"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/ai.css

@@ -345,6 +345,93 @@
   border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
 }
 
+/* ─── Model selector dropdown (matches "Open in" page-action style) ── */
+
+.fd-ai-model-select-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  overflow: visible;
+  margin-bottom: 6px;
+}
+
+.fd-ai-model-select-row--fm {
+  padding: 8px 12px 0;
+}
+
+.fd-ai-model-dropdown {
+  position: relative;
+  margin-left: auto;
+}
+
+.fd-ai-model-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--color-fd-muted-foreground, #71717a);
+  background: transparent;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius, 6px);
+  cursor: pointer;
+  transition: all 150ms;
+}
+
+.fd-ai-model-dropdown-btn:hover {
+  color: var(--color-fd-foreground, #e4e4e7);
+  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.25));
+}
+
+.fd-ai-model-dropdown-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fd-ai-model-dropdown-menu {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 99999;
+  min-width: 220px;
+  padding: 4px;
+  background: var(--color-fd-popover, var(--color-fd-background, #0c0c0c));
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius, 8px);
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626);  
+  animation: fd-ai-fade-in 100ms ease-out;
+}
+
+
+.fd-ai-model-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #e4e4e7));
+  background: transparent;
+  cursor: pointer;
+  transition: background 100ms;
+}
+
+.fd-ai-model-dropdown-item:hover {
+  background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
+}
+
+.fd-ai-model-dropdown-item[data-active="true"] {
+  color: var(--color-fd-primary, #6366f1);
+}
+
+.fd-ai-model-dropdown-label {
+  flex: 1;
+  text-align: left;
+}
+
 .fd-ai-clear-btn {
   font-size: 11px;
   color: var(--color-fd-muted-foreground, #71717a);
@@ -840,6 +927,43 @@
   min-height: 1.2em;
 }
 
+:root:not(.dark) .fd-ai-code-block {
+  --sh-class: #b45309;
+  --sh-identifier: #1f2937;
+  --sh-keyword: #7c3aed;
+  --sh-string: #0d9488;
+  --sh-property: #dc2626;
+  --sh-entity: #059669;
+  --sh-sign: #374151;
+  --sh-comment: #6b7280;
+  --sh-jsxliterals: #7c3aed;
+  border-color: rgba(0, 0, 0, 0.12);
+  background: #f4f4f5;
+}
+
+:root:not(.dark) .fd-ai-code-header {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  background: color-mix(in srgb, #e4e4e7 80%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-lang {
+  color: #52525b;
+}
+
+:root:not(.dark) .fd-ai-code-copy {
+  color: #52525b;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+:root:not(.dark) .fd-ai-code-copy:hover {
+  color: #18181b;
+  background: color-mix(in srgb, #d4d4d8 60%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-block code {
+  color: #1f2937;
+}
+
 /* ═══════════════════════════════════════════════════════════════════
  * Full-Modal (better-auth inspired) — fd-ai-fm-*
  * ═══════════════════════════════════════════════════════════════════ */
@@ -948,6 +1072,11 @@
   font-size: 0.875em;
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
+.fd-ai-code-block pre {
+  padding-left: -10px !important;
+  padding-right: -10px !important;
+  padding-bottom: 2px !important;
+}
 
 .fd-ai-fm-msg-content .fd-ai-code-block code {
   background: transparent;
@@ -1015,7 +1144,7 @@
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
   background: var(--color-fd-background, #0c0c0c);
   box-shadow: 0 20px 60px color-mix(in srgb, var(--color-fd-background, #000) 70%, transparent);
-  overflow: hidden;
+  overflow: visible;
 }
 
 .fd-ai-fm-input-wrap {

package/styles/base.css

@@ -440,6 +440,12 @@ figure.shiki:has(figcaption) figcaption {
   text-decoration: none;
 }
 
+fd-ai-code-block pre {
+  padding-left: -10px !important;
+  padding-right: -10px !important;
+  padding-bottom: 2px !important;
+}
+
 /* ─── Code block copy button: show on hover ────────────────────────── */
 
 figure.shiki > button,

package/styles/darksharp.css

@@ -431,6 +431,23 @@ article a[class*="text-fd-muted-foreground"] {
   border-radius: 2px;
 }
 
+/* Light mode: AI code blocks — light bg + dark syntax */
+:root:not(.dark) .fd-ai-code-block {
+  --sh-class: #b45309;
+  --sh-identifier: #1f2937;
+  --sh-keyword: #7c3aed;
+  --sh-string: #0d9488;
+  --sh-property: #dc2626;
+  --sh-entity: #059669;
+  --sh-sign: #374151;
+  --sh-comment: #6b7280;
+  --sh-jsxliterals: #7c3aed;
+}
+
+:root:not(.dark) .fd-ai-code-block code {
+  color: #1f2937;
+}
+
 /* ─── Omni Command Palette (darksharp theme) ────────────────────── */
 
 .omni-content {

package/styles/default.css

@@ -5,6 +5,9 @@
 
 .fd-page-action-btn {
   border-radius: 0.375rem;
+  box-shadow: none;
+  text-transform: capitalize; 
+  font-family: var(--fd-font-sans, var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif));
 }
 
 .fd-page-action-menu {

package/styles/greentree.css

@@ -77,11 +77,11 @@ h3 {
 aside,
 #nd-sidebar,
 aside#nd-sidebar,
-#nd-docs-layout aside {
+#nd-docs-layout aside,
+.fd-sidebar {
   border: none;
-  border-right: none;
+  border-right: 1px solid var(--color-fd-border);
   border-left: none;
-  border-color: transparent;
   box-shadow: none;
   background: var(--color-fd-background);
 }
@@ -104,8 +104,8 @@ aside a[data-active]:hover {
   background: var(--color-fd-accent);
 }
 
-/* Active sidebar item — green background like Mintlify */
 aside a[data-active="true"] {
+  position: relative;
   color: var(--color-fd-primary);
   font-weight: 600;
   background: rgba(13, 147, 115, 0.08);
@@ -119,8 +119,15 @@ aside a[data-active="true"] {
 }
 
 aside a[data-active="true"]::before {
-  background-color: transparent;
-  width: 0;
+  content: "";
+  display: block;
+  position: absolute;
+  left: 9;
+  top: 20%;
+  bottom: 20%;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--color-fd-primary);
 }
 
 /* ── Flat sidebar — category headings ─────────────────────────── */
@@ -162,10 +169,12 @@ aside button[class*="bg-fd-secondary"] {
   font-size: 0.875rem;
 }
 
-/* Sidebar footer border removal */
+/* Sidebar footer border */
 aside .border-t,
-aside [class*="border-t"] {
-  border-top-color: transparent;
+aside [class*="border-t"],
+.fd-sidebar .fd-sidebar-footer,
+.fd-sidebar .fd-sidebar-footer-custom {
+  border-top: 1px solid var(--color-fd-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -324,7 +333,6 @@ nav[class*="header"] {
  * ═══════════════════════════════════════════════════════════════════ */
 
 figure.shiki {
-  border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--color-fd-border);
 }

package/styles/pixel-border.css

@@ -475,6 +475,95 @@ hr {
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace)) !important;
 }
 
+/* model selector  */
+.fd-ai-model-select-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  overflow: visible;
+  margin-bottom: 6px;
+}
+
+.fd-ai-model-select-row--fm {
+  padding: 8px 12px 0;
+}
+
+.fd-ai-model-dropdown {
+  position: relative;
+  margin-left: auto;
+}
+
+.fd-ai-model-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  color: var(--color-fd-muted-foreground, #71717a);
+  background: transparent;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius, 6px);
+  cursor: pointer;
+  transition: all 150ms;
+}
+
+.fd-ai-model-dropdown-btn:hover {
+  color: var(--color-fd-foreground, #e4e4e7);
+  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.25));
+}
+
+.fd-ai-model-dropdown-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fd-ai-model-dropdown-menu {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 99999;
+  min-width: 220px;
+  padding: 4px;
+  background: var(--color-fd-popover, var(--color-fd-background, #0c0c0c));
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius, 8px);
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626);  
+  animation: fd-ai-fade-in 100ms ease-out;
+}
+
+
+.fd-ai-model-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  color: var(--color-fd-muted-foreground, #71717a);
+  padding: 6px 10px;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  font-size: 11px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 100ms;
+}
+
+.fd-ai-model-dropdown-item:hover {
+  background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
+}
+
+.fd-ai-model-dropdown-item[data-active="true"] {
+  color: var(--color-fd-primary, #6366f1);
+}
+
+.fd-ai-model-dropdown-label {
+  flex: 1;
+  text-align: left;
+}
+
 /* ─── AI Chat (pixel-border — zero radius, pixel-art, monospace) ── */
 
 .fd-ai-dialog {
@@ -611,7 +700,6 @@ hr {
   font-size: 12px;
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
-
 .fd-ai-fm-trigger-btn:hover {
   transform: translate(-1px, -1px);
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
@@ -687,6 +775,49 @@ hr {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
+:root:not(.dark) .fd-ai-code-block {
+  background: #f4f4f5 !important;
+  padding: 0 !important;
+  box-shadow: 3px 3px 0 0 hsl(0 0% 75%);
+  --sh-class: #b45309;
+  --sh-identifier: #1f2937;
+  --sh-keyword: #7c3aed;
+  --sh-string: #0d9488;
+  --sh-property: #dc2626;
+  --sh-entity: #059669;
+  --sh-sign: #374151;
+  --sh-comment: #6b7280;
+  --sh-jsxliterals: #7c3aed;
+}
+.fd-ai-code-block pre {
+  padding-left: -10px !important;
+  padding-right: -10px !important;
+  padding-bottom: 2px !important;
+}
+
+:root:not(.dark) .fd-ai-code-header {
+  border-bottom-color: hsl(0 0% 80%);
+  background: color-mix(in srgb, #e4e4e7 90%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-lang {
+  color: #52525b;
+}
+
+:root:not(.dark) .fd-ai-code-copy {
+  color: #52525b;
+  border-color: hsl(0 0% 75%);
+}
+
+:root:not(.dark) .fd-ai-code-copy:hover {
+  color: #18181b;
+  background: color-mix(in srgb, #d4d4d8 70%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-block code {
+  color: #1f2937;
+}
+
 /* ─── Omni Command Palette (pixel-border theme) ─────────────────── */
 
 .omni-content {