Scaffold web app

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