ai modal

src/app/@modal/(.)chat/_components/ChatModal.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
+import ChatInterface from '~/app/chat/_components/ChatInterface'
+
+type DBMessage = {
+	id: string
+	role: 'user' | 'assistant'
+	content: string
+}
+
+interface ChatModalProps {
+	sessionId: string
+	initialMessages: DBMessage[]
+}
+
+export default function ChatModal({ sessionId, initialMessages }: ChatModalProps) {
+	const router = useRouter()
+
+	return (
+		<Dialog open onOpenChange={() => router.back()}>
+			<DialogContent className="max-w-2xl h-[80vh] flex flex-col p-0 gap-0">
+				<DialogHeader className="p-4 border-b shrink-0">
+					<DialogTitle>AI Recruiter</DialogTitle>
+				</DialogHeader>
+				<div className="flex-1 overflow-hidden min-h-0">
+					<ChatInterface sessionId={sessionId} initialMessages={initialMessages} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	)
+}

src/app/@modal/(.)chat/page.tsx

@@ -0,0 +1,34 @@
+import { auth } from '@clerk/nextjs/server'
+import { redirect } from 'next/navigation'
+import { asc, desc, eq } from 'drizzle-orm'
+import { db } from '~/server/db'
+import { chatMessage, chatSession } from '~/server/dbschema/schema'
+import ChatModal from './_components/ChatModal'
+
+export default async function ChatModalPage() {
+	const { userId } = await auth()
+	if (!userId) redirect('/')
+
+	let session = await db
+		.select()
+		.from(chatSession)
+		.where(eq(chatSession.userId, userId))
+		.orderBy(desc(chatSession.createdAt))
+		.limit(1)
+		.then((r) => r[0])
+
+	if (!session) {
+		const [created] = await db.insert(chatSession).values({ userId }).returning()
+		session = created
+	}
+
+	if (!session) redirect('/')
+
+	const messages = await db
+		.select()
+		.from(chatMessage)
+		.where(eq(chatMessage.sessionId, session.id))
+		.orderBy(asc(chatMessage.createdAt))
+
+	return <ChatModal sessionId={session.id} initialMessages={messages} />
+}

src/app/_components/TopNav.tsx

@@ -22,6 +22,11 @@ export default function TopNav() {
 					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
 						<Link href={"/music"}> Music </Link>
 					</Button>
+					<Show when="signed-in">
+						<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
+							<Link href={"/chat"}> Chat </Link>
+						</Button>
+					</Show>
 				</div>
 				<div className="flex flex-col-reverse flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row lg:ml-auto">
 					<AdminWrap>

src/app/actions/scheduleMeeting.ts

@@ -0,0 +1,86 @@
+'use server'
+import { clerkClient } from '@clerk/nextjs/server'
+import { google } from 'googleapis'
+import { env } from '~/env'
+
+export async function scheduleMeeting({
+	title,
+	description,
+	dateTime,
+	durationMinutes,
+	attendeeEmail,
+	attendeeName,
+	userId,
+}: {
+	title: string
+	description: string
+	dateTime: string
+	durationMinutes: number
+	attendeeEmail?: string
+	attendeeName?: string
+	userId: string
+}) {
+	try {
+		const clerk = await clerkClient()
+
+		// Get admin's Google OAuth token to create the event on Gregor's calendar
+		const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
+			env.ADMIN_USER_CLERK_ID,
+			'oauth_google',
+		)
+		const adminToken = adminTokenResponse.data[0]
+
+		if (!adminToken?.token) {
+			return { success: false, error: 'Admin Google Calendar not connected. Ensure the admin account is linked with Google and has calendar scope enabled.' }
+		}
+
+		// Try to resolve visitor's Google email for the invite
+		let visitorEmail: string | undefined = attendeeEmail
+		if (!visitorEmail) {
+			try {
+				const visitorTokenResponse = await clerk.users.getUserOauthAccessToken(userId, 'oauth_google')
+				if (visitorTokenResponse.data[0]) {
+					const user = await clerk.users.getUser(userId)
+					const googleAccount = user.externalAccounts.find((a) => a.provider === 'google')
+					visitorEmail = googleAccount?.emailAddress ?? undefined
+				}
+			} catch {
+				// Visitor not signed in with Google — no invite
+			}
+		}
+
+		const oAuth2Client = new google.auth.OAuth2()
+		oAuth2Client.setCredentials({ access_token: adminToken.token })
+		const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })
+
+		const startTime = new Date(dateTime)
+		const endTime = new Date(startTime.getTime() + durationMinutes * 60 * 1000)
+
+		const attendees: { email: string; displayName?: string }[] = []
+		if (visitorEmail) {
+			attendees.push({ email: visitorEmail, displayName: attendeeName })
+		}
+
+		const event = await calendar.events.insert({
+			calendarId: 'primary',
+			sendUpdates: 'all',
+			requestBody: {
+				summary: title,
+				description,
+				start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
+				end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
+				attendees,
+			},
+		})
+
+		return {
+			success: true,
+			eventId: event.data.id,
+			htmlLink: event.data.htmlLink,
+			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}${visitorEmail ? `. Invite sent to ${visitorEmail}.` : '.'}`,
+		}
+	} catch (error) {
+		console.error('Failed to schedule meeting:', error)
+		return { success: false, error: 'Failed to schedule meeting. Please try again.' }
+	}
+}

src/app/api/chat/route.ts

@@ -0,0 +1,97 @@
+import { auth } from '@clerk/nextjs/server'
+import { createOpenAI } from '@ai-sdk/openai'
+import { streamText, tool, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
+import { z } from 'zod'
+import { eq, and } from 'drizzle-orm'
+import { env } from '~/env'
+import { db } from '~/server/db'
+import { chatSession, chatMessage } from '~/server/dbschema/schema'
+import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
+
+const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
+
+export async function POST(req: Request) {
+	const { userId } = await auth()
+	if (!userId) return new Response('Unauthorized', { status: 401 })
+
+	const { messages, sessionId } = (await req.json()) as {
+		messages: UIMessage[]
+		sessionId: string
+	}
+
+	// Verify this session belongs to the authenticated user
+	const session = await db
+		.select()
+		.from(chatSession)
+		.where(and(eq(chatSession.id, sessionId), eq(chatSession.userId, userId)))
+		.limit(1)
+		.then((r) => r[0])
+
+	if (!session) return new Response('Session not found', { status: 404 })
+
+	// Save the latest user message
+	const lastMessage = messages[messages.length - 1]
+	if (lastMessage?.role === 'user') {
+		const content = lastMessage.parts
+			.filter((p): p is { type: 'text'; text: string } => p.type === 'text')
+			.map((p) => p.text)
+			.join('')
+		if (content) {
+			await db.insert(chatMessage).values({ sessionId, role: 'user', content })
+		}
+	}
+
+	const result = streamText({
+		model: openai('gpt-4o'),
+		system: `You are an AI recruiter assistant on Gregor Lohaus's personal portfolio website.
+Your role is to help visitors learn about Gregor's background, skills, and experience, and to schedule meetings.
+
+About Gregor:
+- Fullstack developer specialising in TypeScript, React, Next.js, and modern web technologies
+- Experienced with Drizzle ORM, tRPC, PostgreSQL, server components, and the T3 stack
+- Also experienced with React Native, Expo, Java/Spring, gRPC, AWS, and Linux/Debian server administration
+- Open to new opportunities and collaboration
+
+Be professional, friendly, and concise. When a visitor wants to schedule a meeting, collect the necessary details (preferred date/time, duration, and optionally their name/email) and use the scheduleMeeting tool.`,
+		messages: await convertToModelMessages(messages),
+		tools: {
+			scheduleMeeting: tool({
+				description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
+				inputSchema: z.object({
+					title: z.string().describe('Meeting title'),
+					description: z.string().describe('Meeting description / agenda'),
+					dateTime: z
+						.string()
+						.describe(
+							'ISO 8601 datetime for the meeting start, e.g. 2025-04-01T10:00:00',
+						),
+					durationMinutes: z
+						.number()
+						.int()
+						.min(15)
+						.max(120)
+						.describe('Duration of the meeting in minutes'),
+					attendeeEmail: z
+						.string()
+						.email()
+						.optional()
+						.describe('Email of the visitor to invite (if provided)'),
+					attendeeName: z.string().optional().describe('Name of the visitor'),
+				}),
+				execute: async (input) => scheduleMeeting({ ...input, userId }),
+			}),
+		},
+		stopWhen: stepCountIs(5),
+		onFinish: async ({ text, finishReason }) => {
+			if (text && finishReason === 'stop') {
+				await db.insert(chatMessage).values({
+					sessionId,
+					role: 'assistant',
+					content: text,
+				})
+			}
+		},
+	})
+
+	return result.toUIMessageStreamResponse()
+}

src/app/chat/_components/ChatInterface.tsx

@@ -0,0 +1,162 @@
+'use client'
+import { useRef, useState, useEffect } from 'react'
+import { useChat } from '@ai-sdk/react'
+import { DefaultChatTransport, type UIMessage } from 'ai'
+import { Button } from '~/components/ui/button'
+import { Textarea } from '~/components/ui/textarea'
+import { cn } from '~/lib/utils'
+
+type DBMessage = {
+	id: string
+	role: 'user' | 'assistant'
+	content: string
+}
+
+interface ChatInterfaceProps {
+	sessionId: string
+	initialMessages: DBMessage[]
+}
+
+function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
+	return dbMessages.map((m) => ({
+		id: m.id,
+		role: m.role,
+		parts: [{ type: 'text' as const, text: m.content }],
+	}))
+}
+
+export default function ChatInterface({ sessionId, initialMessages }: ChatInterfaceProps) {
+	const [input, setInput] = useState('')
+	const messagesEndRef = useRef<HTMLDivElement>(null)
+
+	const { messages, sendMessage, status } = useChat({
+		transport: new DefaultChatTransport({
+			api: '/api/chat',
+			body: { sessionId },
+		}),
+		messages: toUIMessages(initialMessages),
+	})
+
+	const isLoading = status === 'submitted' || status === 'streaming'
+
+	useEffect(() => {
+		messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+	}, [messages])
+
+	const handleSend = () => {
+		const text = input.trim()
+		if (!text || isLoading) return
+		setInput('')
+		sendMessage({ text })
+	}
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="flex-1 overflow-y-auto p-4 space-y-4">
+				{messages.length === 0 && (
+					<div className="text-center text-muted-foreground py-12">
+						<p className="text-base font-medium mb-1">Hi! I'm Gregor's AI recruiter assistant.</p>
+						<p className="text-sm">Ask me about his skills and experience, or schedule a meeting!</p>
+					</div>
+				)}
+
+				{messages.map((message) => (
+					<div
+						key={message.id}
+						className={cn('flex', message.role === 'user' ? 'justify-end' : 'justify-start')}
+					>
+						<div
+							className={cn(
+								'max-w-[80%] rounded-lg px-4 py-2 text-sm space-y-2',
+								message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted',
+							)}
+						>
+							{message.parts.map((part, i) => {
+								if (part.type === 'text') {
+									return (
+										<p key={i} className="whitespace-pre-wrap">
+											{part.text}
+										</p>
+									)
+								}
+								if (part.type === 'tool-scheduleMeeting') {
+									const toolPart = part as unknown as {
+										type: 'tool-scheduleMeeting'
+										state: string
+										input: unknown
+										output?: { success: boolean; message?: string; htmlLink?: string; error?: string }
+									}
+									if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+										return (
+											<p key={i} className="text-xs opacity-70 italic">
+												Scheduling meeting…
+											</p>
+										)
+									}
+									if (toolPart.state === 'output-available' && toolPart.output) {
+										const result = toolPart.output
+										return (
+											<div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+												{result.success ? (
+													<span>
+														✓ {result.message}{' '}
+														{result.htmlLink && (
+															<a
+																href={result.htmlLink}
+																target="_blank"
+																rel="noopener noreferrer"
+																className="underline"
+															>
+																View event
+															</a>
+														)}
+													</span>
+												) : (
+													<span>✗ {result.error}</span>
+												)}
+											</div>
+										)
+									}
+								}
+								return null
+							})}
+						</div>
+					</div>
+				))}
+
+				{isLoading && (
+					<div className="flex justify-start">
+						<div className="bg-muted rounded-lg px-4 py-2 text-sm">
+							<span className="animate-pulse">Thinking…</span>
+						</div>
+					</div>
+				)}
+
+				<div ref={messagesEndRef} />
+			</div>
+
+			<div className="p-4 border-t flex gap-2">
+				<Textarea
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder="Ask about Gregor's experience or schedule a meeting…"
+					className="resize-none"
+					rows={2}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' && !e.shiftKey) {
+							e.preventDefault()
+							handleSend()
+						}
+					}}
+				/>
+				<Button
+					onClick={handleSend}
+					disabled={isLoading || !input.trim()}
+					className="self-end"
+				>
+					Send
+				</Button>
+			</div>
+		</div>
+	)
+}

src/app/chat/page.tsx

@@ -0,0 +1,50 @@
+import { auth } from '@clerk/nextjs/server'
+import { redirect } from 'next/navigation'
+import { asc, desc, eq } from 'drizzle-orm'
+import { db } from '~/server/db'
+import { chatMessage, chatSession } from '~/server/dbschema/schema'
+import ChatInterface from './_components/ChatInterface'
+
+export default async function ChatPage() {
+	const { userId } = await auth()
+	if (!userId) redirect('/')
+
+	let session = await db
+		.select()
+		.from(chatSession)
+		.where(eq(chatSession.userId, userId))
+		.orderBy(desc(chatSession.createdAt))
+		.limit(1)
+		.then((r) => r[0])
+
+	if (!session) {
+		const [created] = await db.insert(chatSession).values({ userId }).returning()
+		session = created
+	}
+
+	if (!session) redirect('/')
+
+	const messages = await db
+		.select()
+		.from(chatMessage)
+		.where(eq(chatMessage.sessionId, session.id))
+		.orderBy(asc(chatMessage.createdAt))
+
+	return (
+		<div className="container max-w-2xl mx-auto h-screen pt-10 pb-4 flex flex-col">
+			<div className="flex flex-col flex-1 bg-background border rounded-lg overflow-hidden">
+				<div className="p-4 border-b flex items-center justify-between">
+					<div>
+						<h1 className="text-lg font-semibold">AI Recruiter</h1>
+						<p className="text-xs text-muted-foreground">
+							Chat with Gregor's AI assistant
+						</p>
+					</div>
+				</div>
+				<div className="flex-1 overflow-hidden">
+					<ChatInterface sessionId={session.id} initialMessages={messages} />
+				</div>
+			</div>
+		</div>
+	)
+}