chat fab

src/app/chat/page.tsx

@@ -1,35 +1,10 @@
-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'
+'use client'
 import ChatInterface from './_components/ChatInterface'
+import { trpc } from '../_trpc/Client';
+import { Skeleton } from '~/components/ui/skeleton';
 
-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))
-
+export default function ChatPage() {
+	const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
 	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">
@@ -42,7 +17,9 @@ export default async function ChatPage() {
 					</div>
 				</div>
 				<div className="flex-1 overflow-hidden">
-					<ChatInterface sessionId={session.id} initialMessages={messages} />
+					{session && <ChatInterface sessionId={session?.id} initialMessages={session?.messages} /> }
+					{error && <div>{error.message}</div>}
+					{isLoading && <Skeleton/>}
 				</div>
 			</div>
 		</div>