model selector

src/app/_providers/GsapProvicer.tsx

@@ -103,6 +103,13 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     return () => { console.log("gsap cleanup") }
   })
 
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    tl.current?.add(animation, position);
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    tl.current?.add(fn, position)
+  },[])
+
   // Handoff: fire registered callbacks once, when the entrance finishes.
   const readyFired = useRef(false)
   const readyCbs = useRef<Array<() => void>>([])
@@ -117,21 +124,6 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     else readyCbs.current.push(cb)
   },[])
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    // Content can mount in waves (e.g. nested queries resolving after the
-    // entrance already played). Parking a tween in a finished, paused timeline
-    // would freeze it at its from-state, so once the entrance is done let the
-    // (live) tween play on its own instead.
-    if (readyFired.current) return
-    tl.current?.add(animation, position);
-  },[])
-  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
-    // Same late-arrival case: a callback added past the playhead never fires, so
-    // run the reveal immediately once the entrance has finished.
-    if (readyFired.current) { fn(); return }
-    tl.current?.add(fn, position)
-  },[])
-
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
   // can fire freely while content height animates.
   const refreshQueued = useRef(false)

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>
 	)
 }

src/app/api/chat/route.ts

@@ -32,6 +32,7 @@ export async function POST(req: Request) {
 	if (!session) return new Response('Session not found', { status: 404 })
 
 	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
 	const lastMessage = messages[messages.length - 1]
@@ -46,7 +47,7 @@ export async function POST(req: Request) {
 	}
 
 	const result = streamText({
-		model: openai('gpt-5-mini'),
+		model: openai(model),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
 		tools: {

src/app/cv/_components/CvCategory.tsx

@@ -1,42 +1,42 @@
 'use client'
+import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
+import type { servTrpc } from "~/app/_trpc/ServerClient"
+import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils" 
-import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
-import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
 import { ScrollArea } from "~/components/ui/scroll-area";
-
-export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
-
 type CvCategoryProps = {
-  category: CvCategoryData,
-  layout: "row" | "col",
-  position?: number,
+  initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
+  layout: "row"|"col",
+  children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
-export default function CvCategory({ category, layout, position = 0 }: CvCategoryProps) {
-  const entries = category.cvEntry
-  return (
-    <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
-      <CardHeader>
-        <AnimateTextIn position={position + 0.2} animation="slide">
-          <CardTitle>{category.name}</CardTitle>
-        </AnimateTextIn>
-      </CardHeader>
-      {entries.length > 0 ?
-        <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
-          <ScrollArea>
-            {entries.map((entry, i) => (
-              <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
-              </AnimatePopUp>
-            ))}
-          </ScrollArea>
-        </CardContent>
-        :
-        <></>
-      }
-    </AnimatedCard>
-  )
+export default function CvCategory(props:CvCategoryProps)  {
+  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
+  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
+		return (
+			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+				<CardHeader>
+					<CardTitle>
+						{category.data?.name}
+					</CardTitle>
+				</CardHeader>
+				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
+					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
+						<ScrollArea>
+						{entries.data?.map((entry,i) => (
+							<AnimatePopUp position={i}key={entry.id}>
+							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+							</AnimatePopUp>
+						))}
+					</ScrollArea>
+					</CardContent>
+					:
+					<></>
+				} 
+			</Card>
+		) 
 }

src/app/cv/_components/CvEntry.tsx

@@ -1,49 +1,68 @@
+import { trpc } from "~/app/_trpc/Client"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
-import { cn } from "~/lib/utils"
+import { Skeleton } from "~/components/ui/skeleton"
+import { cn, type Defined } from "~/lib/utils"
 import Markdown from 'react-markdown'
 import { format } from 'date-fns'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeRaw from 'rehype-raw'
+import type { RouterOutputs } from "~/server/routers/_app"
 import type { ArrayElement } from "type-fest"
-import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
-import type { CvCategoryData } from "./CvCategory"
-
-export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
-
-export default function CvEntry({ entry, className, position = 0 }: {
-	entry: CvEntryData,
-	className?: string,
-	position?: number
+export default function CvEntry(params: {
+	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
+	className?: string
 }) {
+	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
+	const { data, isError, error } = query
 	return (
-		<Card className={className ? cn("w-fit", className) : "w-fit"}>
-			{entry.title ?
-				<CardHeader>
-					<AnimateTextIn position={position} animation="slide">
-						<CardTitle> {entry.title} </CardTitle>
-					</AnimateTextIn>
-				</CardHeader> :
-				<></>
+		<>
+			{
+				data ?
+					<>
+						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
+							{
+								data.title ?
+									<CardHeader>
+										<CardTitle> {data.title} </CardTitle>
+									</CardHeader> :
+									<></>
+							}
+							{
+								data.description ?
+									<CardContent className="text-sm lg:text-base">
+										<article className="prose prose-zinc dark:prose-invert max-w-none">
+											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
+										</article>
+									</CardContent> :
+									<></>
+							}
+							{
+								!data.hideDates ?
+									<CardFooter className="text-sm">
+										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
+									</CardFooter> :
+									<></>
+							}
+						</Card>
+					</> :
+					<>
+						<Card>
+							<CardHeader>
+								<div className="flex flex-row">
+									<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
+									<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<div>
+									<Skeleton className="h-4 w-60" />
+									<Skeleton className="h-4 w-50" />
+									<Skeleton className="h-4 w-50" />
+								</div>
+							</CardContent>
+						</Card>
+					</>
 			}
-			{entry.description ?
-				<CardContent className="text-sm lg:text-base">
-					<AnimatePopUp position={position + 0.2}>
-						<article className="prose prose-zinc dark:prose-invert max-w-none">
-							<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{entry.description}</Markdown>
-						</article>
-					</AnimatePopUp>
-				</CardContent> :
-				<></>
-			}
-			{!entry.hideDates ?
-				<CardFooter className="text-sm">
-					<AnimateTextIn position={position + 0.4}>
-						{`von ${format(new Date(entry.fromTime), 'M. yyyy')} bis zum ${format(new Date(entry.toTime), 'M. yyyy')}`}
-					</AnimateTextIn>
-				</CardFooter> :
-				<></>
-			}
-		</Card>
+		</>
 	)
 }

src/app/cv/page.tsx

@@ -1,29 +1,65 @@
 'use client'
-import { useTimeLine } from "../_providers/GsapProvicer";
+import { useGSAP } from "@gsap/react";
+import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
+import { useRef } from "react";
 import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
+import gsap from 'gsap'
 export default function CvPage() {
-  const cv = trpc.categoryv2.listAllWithEntries.useQuery();
-  useTimeLine(cv.data)
-  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
-    cv.data?.filter((c) => c.layoutPosition === pos) ?? []
-  const sidebarCategories = byPosition("sidebar")
-  const headerCategories = byPosition("header")
-  const col1Categories = byPosition("col1")
-  const col2Categories = byPosition("col2")
+  const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
+  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
+  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
+  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
+  const gsapContext = useGsapContext()
+  const container = useRef<HTMLDivElement>(null)
+  enum Direction {
+    Left = 1,
+    Up,
+    Right,
+    Down
+  }
+  const nextGsapConf = (direction: Direction) => {
+    switch (direction) {
+      case Direction.Left:
+        return { x: -100, opacity: 0, duration: 0.5 }
+      case Direction.Up:
+        return { y: -100, opacity: 0, duration: 0.5 }
+      case Direction.Right:
+        return { x: 100, opacity: 0, duration: 0.5 }
+      case Direction.Down:
+        return { y: 100, opacity: 0, duration: 0.5 }
+    }
+  }
+  useTimeLine(col2Categories)
+  useGSAP(() => {
+    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
+    let dir = Direction.Left;
+    items?.forEach(item => {
+      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
+      if (dir == Direction.Down) {
+        dir = Direction.Left
+      } else {
+        dir = dir + 1
+      }
+    })
+  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
   return (
     <>
-      <SidebarProvider>
-        {sidebarCategories.length > 0 &&
+      <SidebarProvider ref={container}>
+        {sidebarCategories.data &&
           <>
             <SidebarTriggerDisappearsOnMobile />
-            <Sidebar>
+            <Sidebar className="gsapan ">
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
+                {sidebarCategories.data?.map((cat) => {
+                  if (cat !== undefined) {
+                    return (
+                      <CvCategory layout="col" initialData={cat} key={cat.id} />
+                    )
+                  }
+                })}
               </SidebarContent>
             </Sidebar>
           </> 
@@ -31,20 +67,26 @@ export default function CvPage() {
         <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
           <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
             <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.map((cat, i) => (
-                <CvCategory layout="row" position={i} category={cat} key={cat.id} />
-              ))}
+              {headerCategories.data?.map((cat) => {
+                return (
+                  <CvCategory layout="row" initialData={cat} key={cat.id} />
+                )
+              })}
             </div>
             <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
-              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
+              <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+                {col1Categories.data?.map((cat) => {
+                  return (
+                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                  )
+                })}
               </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                ))}
+              <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+                {col2Categories.data?.map((cat) => {
+                  return (
+                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                  )
+                })}
               </div>
             </div>
           </div>

src/server/dbschema/schema.ts

@@ -175,6 +175,7 @@ export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
 export const systemSettings = createTable(
 	"systemSetting",
 	(d) => ({
-		systemPropmt: d.text()
+		systemPropmt: d.text(),
+		model: d.text()
 	})
 )

src/server/routers/chat.ts

@@ -7,6 +7,26 @@ import { isAdmin } from '~/app/actions';
 import { z } from 'zod';
 import { eq } from 'drizzle-orm';
 import { clerkClient, auth } from '@clerk/nextjs/server'
+import { env } from '~/env'
+
+export const DEFAULT_MODEL = 'gpt-5-mini'
+
+// Models returned by the OpenAI API that aren't usable for chat completions.
+const NON_CHAT_MODEL = /embedding|image|audio|realtime|transcribe|tts|whisper|moderation|dall-e|search|codex|instruct/
+
+async function readSettings() {
+	return db.select().from(systemSettings).limit(1).then((r) => r[0])
+}
+
+async function writeSettings(values: { systemPropmt?: string | null; model?: string | null }) {
+	const current = await readSettings()
+	await db.delete(systemSettings)
+	await db.insert(systemSettings).values({
+		systemPropmt: values.systemPropmt ?? current?.systemPropmt ?? null,
+		model: values.model ?? current?.model ?? null,
+	})
+}
+
 export const chatRouter = router({
   getSession: publicProcedure.query(async () => {
     const { userId } = await auth();
@@ -66,13 +86,34 @@ export const chatRouter = router({
 
   }),
   getSystemPrompt: publicProcedure.query(async () => {
-    const row = await db.select().from(systemSettings).limit(1).then((r) => r[0])
+    const row = await readSettings()
     return row?.systemPropmt ?? ''
   }),
   updateSystemPrompt: publicProcedure.input(z.object({ prompt: z.string() })).mutation(async ({ input }) => {
     if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await db.delete(systemSettings)
-    await db.insert(systemSettings).values({ systemPropmt: input.prompt })
+    await writeSettings({ systemPropmt: input.prompt })
+  }),
+  getModel: publicProcedure.query(async () => {
+    const row = await readSettings()
+    return row?.model ?? DEFAULT_MODEL
+  }),
+  listModels: publicProcedure.query(async () => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    const res = await fetch('https://api.openai.com/v1/models', {
+      headers: { Authorization: `Bearer ${env.OPENAI_API_KEY}` },
+    })
+    if (!res.ok) {
+      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: `failed to fetch models (${res.status})` })
+    }
+    const json = (await res.json()) as { data: { id: string }[] }
+    return json.data
+      .map((m) => m.id)
+      .filter((id) => (id.startsWith('gpt') || /^o\d/.test(id) || id.startsWith('chatgpt')) && !NON_CHAT_MODEL.test(id))
+      .sort()
+  }),
+  updateModel: publicProcedure.input(z.object({ model: z.string() })).mutation(async ({ input }) => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    await writeSettings({ model: input.model })
   }),
 })
 

src/server/routers/cvCategory.ts

@@ -13,20 +13,6 @@ export const cvCategoryRouter = router({
     console.log(res);
     return res;
   }),
-  // Single round-trip for the whole CV page: every category (across all layout
-  // positions) with its entries already populated. Lets the page fetch-then-render
-  // instead of waterfalling per-category/per-entry queries, so all content is
-  // present before the entrance animation runs.
-  listAllWithEntries: publicProcedure.query(async () => {
-    const res = await db.query.cvCategory.findMany({
-      with: {
-        cvEntry: {
-          orderBy: (t, { desc }) => desc(t.toTime),
-        },
-      },
-    })
-    return res;
-  }),
   getById: publicProcedure.input(z.string()).query(async ({input}) => {
     const res = await db.query.cvCategory.findFirst({
       where(fields, operators) {