Scaffold web app

src/app/(app)/ai.tsx

@@ -0,0 +1,34 @@
+'use server'
+
+import { executeTodoAgent } from '~/agents/todo'
+import env from '~/env'
+import { publish } from '~/events/server'
+
+export async function sendMessage({ userId, message }: { userId: string; message: string }) {
+	const { response } = await executeTodoAgent({
+		messages: [{ content: message, role: 'user' }],
+		onEvent: async events => {
+			switch (events.type) {
+				case 'assistant_message': {
+					await publish({
+						channel: userId,
+						eventType: events.type,
+						payload: events
+					})
+					break
+				}
+				case 'function_call': {
+					await publish({
+						channel: userId,
+						eventType: events.name,
+						payload: events
+					})
+					break
+				}
+			}
+		},
+		openAIKey: env.OPENAI_API_KEY
+	})
+
+	console.log(response)
+}

src/app/(app)/chat.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import type { TodoAgentResponseEvent, TodoAgentToolEvent } from '~/agents/todo'
+import { useSession } from '~/auth/client'
+import { ChatBox } from '~/components/ChatBox'
+import { AssistantMessage, ToolMessage, UserMessage } from '~/components/Message'
+
+import { useEvents } from '~/events/client'
+import { sendMessage } from './ai'
+
+type Message =
+	| TodoAgentToolEvent
+	| TodoAgentResponseEvent
+	| {
+			id: string
+			type: 'user_message'
+			message: string
+	  }
+
+function MessageSwitch({ message }: { message: Message }) {
+	switch (message.type) {
+		case 'user_message': {
+			return <UserMessage>{message.message}</UserMessage>
+		}
+
+		case 'assistant_message': {
+			return <AssistantMessage>{message.message.response}</AssistantMessage>
+		}
+		case 'function_call': {
+			return (
+				<ToolMessage
+					name={message.name}
+					args={JSON.stringify(message.arguments)}
+					result={JSON.stringify(message.result)}
+				/>
+			)
+		}
+	}
+}
+
+function ChatMessages({
+	userId,
+	messages,
+	addMessage
+}: {
+	userId: string
+	messages: Message[]
+	addMessage: (message: Message) => void
+}) {
+	useEvents({
+		id: userId,
+		on: {
+			assistant_message: addMessage
+		}
+	})
+
+	return (
+		<div className="pb-16">
+			{messages.map(message => (
+				<MessageSwitch key={message.id} message={message} />
+			))}
+		</div>
+	)
+}
+
+export default function Chat() {
+	const { userId } = useSession()
+	const [messages, setMessages] = useState<Message[]>([])
+
+	function addMessage(message: Message) {
+		setMessages(prev => [...prev, message])
+	}
+
+	function handleSubmit(message: string) {
+		addMessage({
+			id: Date.now().toString(),
+			message,
+			type: 'user_message'
+		})
+		sendMessage({ message, userId })
+	}
+
+	return (
+		<div className="w-full">
+			<ChatMessages userId={userId} messages={messages} addMessage={addMessage} />
+			<ChatBox placeholder="What is my todo list?" submit={handleSubmit} />
+		</div>
+	)
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,17 @@
+import { getSession } from '~/auth/actions'
+import { ClientAuthProvider } from '~/auth/client'
+import { Nav } from '~/components/Nav'
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+	return (
+		// @ts-expect-error: Auth Package Bug
+		<ClientAuthProvider session={await getSession({ redirectUnauthorized: '/signin' })}>
+			<div className="flex min-h-screen flex-col">
+				<Nav />
+				<div className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center p-10">
+					<div className="flex w-full flex-col items-center">{children}</div>
+				</div>
+			</div>
+		</ClientAuthProvider>
+	)
+}

src/app/(app)/page.tsx

@@ -0,0 +1,5 @@
+import Chat from './chat'
+
+export default function Page() {
+	return <Chat />
+}

src/app/(landing)/signin/page.tsx

@@ -0,0 +1,5 @@
+import { SignInWithGithubButton } from '~/components/SignIn'
+
+export default function SignInPage() {
+	return <SignInWithGithubButton />
+}

src/app/api/auth/[...auth]/route.ts

@@ -0,0 +1,3 @@
+import { routes } from '~/auth/server'
+
+export const { GET } = routes

src/app/api/events/route.ts

@@ -0,0 +1 @@
+export { GET, maxDuration } from '~/events/server'

src/app/icon.tsx

@@ -0,0 +1,30 @@
+import { ImageResponse } from 'next/og'
+
+export const contentType = 'image/png'
+export const size = {
+	height: 32,
+	width: 32
+}
+
+export default async function Icon() {
+	return new ImageResponse(
+		<div
+			style={{
+				alignItems: 'center',
+				background: 'black',
+				color: 'white',
+				display: 'flex',
+				fontSize: 28,
+				fontWeight: 700,
+				height: '100%',
+				justifyContent: 'center',
+				width: '100%'
+			}}
+		>
+			R
+		</div>,
+		{
+			...size
+		}
+	)
+}

src/app/layout.tsx

@@ -0,0 +1,14 @@
+import './styles.css'
+
+export const metadata = {
+	description: 'Generated by Create Rubric App',
+	title: 'Create Rubric App'
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	)
+}

src/app/opengraph-image.tsx

@@ -0,0 +1,41 @@
+import { readFile } from 'node:fs/promises'
+import { ImageResponse } from 'next/og'
+
+export const alt = 'Create Rubric App'
+export const size = {
+	height: 630,
+	width: 1200
+}
+
+export const contentType = 'image/png'
+
+export default async function Image() {
+	const interSemiBold = await readFile('public/fonts/PlusJakartaSans-Bold.ttf')
+
+	return new ImageResponse(
+		<div
+			style={{
+				alignItems: 'center',
+				background: 'white',
+				display: 'flex',
+				fontSize: 128,
+				height: '100%',
+				justifyContent: 'center',
+				width: '100%'
+			}}
+		>
+			R
+		</div>,
+		{
+			...size,
+			fonts: [
+				{
+					data: interSemiBold,
+					name: 'Inter',
+					style: 'normal',
+					weight: 400
+				}
+			]
+		}
+	)
+}

src/app/styles.css

@@ -0,0 +1,3 @@
+/** biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind Grammar */
+
+@import "tailwindcss";

src/app/twitter-image.tsx

@@ -0,0 +1 @@
+export { alt, contentType, default, size } from './opengraph-image'