chat fab

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

@@ -18,8 +18,8 @@ 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">
+		<Dialog modal={true} open onOpenChange={() => router.back()}>
+			<DialogContent className="w-full max-w-full rounded-none sm:max-w-full h-[100svh] lg:max-w-3xl lg:rounded-xl lg:h-[80vh] flex flex-col p-0 gap-0">
 				<DialogHeader className="p-4 border-b shrink-0">
 					<DialogTitle>AI Recruiter</DialogTitle>
 				</DialogHeader>

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

@@ -1,34 +1,15 @@
-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 { Skeleton } from '~/components/ui/skeleton';
 import ChatModal from './_components/ChatModal'
+import { trpc } from '~/app/_trpc/Client'
 
-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} />
+export default function ChatModalPage() {
+	const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
+	return (
+		<>
+			{session && <ChatModal sessionId={session.id} initialMessages={session.messages} />}
+			{error && <div>{error.message}</div>}
+			{isLoading && <Skeleton />}
+		</>
+	)
 }