model selector

src/app/admin/chat/_components/ModelSelector.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+
+export default function ModelSelector({ initialValue }: { initialValue: string }) {
+	const utils = trpc.useUtils()
+	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
+	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
+		initialData: initialValue,
+	})
+
+	const mutation = trpc.chat.updateModel.useMutation({
+		onSuccess: () => utils.chat.getModel.invalidate(),
+	})
+
+	// Ensure the currently-saved model is always selectable, even if the
+	// OpenAI list doesn't include it (e.g. a deprecated model).
+	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
+
+	return (
+		<div className="flex flex-col gap-2">
+			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
+				<SelectTrigger className="w-72">
+					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((id) => (
+						<SelectItem key={id} value={id}>
+							{id}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			<div className="flex items-center gap-3 text-sm text-muted-foreground">
+				{mutation.isPending && <span>Saving…</span>}
+				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
+				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
+				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
+			</div>
+		</div>
+	)
+}

src/app/admin/chat/page.tsx

@@ -1,18 +1,31 @@
 import { servTrpc } from '~/app/_trpc/ServerClient'
 import SystemPromptForm from './_components/SystemPromptForm'
+import ModelSelector from './_components/ModelSelector'
 
 export default async function SystemPromptPage() {
 	const prompt = await servTrpc.chat.getSystemPrompt()
+	const model = await servTrpc.chat.getModel()
 
 	return (
-		<div className="w-full max-w-2xl p-6 flex flex-col gap-4">
-			<div>
-				<h1 className="text-lg font-semibold">AI System Prompt</h1>
-				<p className="text-sm text-muted-foreground">
-					This prompt is sent to the model on every chat request.
-				</p>
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI Model</h1>
+					<p className="text-sm text-muted-foreground">
+						The OpenAI model used to respond to chat requests.
+					</p>
+				</div>
+				<ModelSelector initialValue={model} />
+			</div>
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI System Prompt</h1>
+					<p className="text-sm text-muted-foreground">
+						This prompt is sent to the model on every chat request.
+					</p>
+				</div>
+				<SystemPromptForm initialValue={prompt} />
 			</div>
-			<SystemPromptForm initialValue={prompt} />
 		</div>
 	)
 }