Files
gregorlohaus.com/src/app/@modal/(.)assistant/_components/ChatModal.tsx

32 lines
1.1 KiB
TypeScript

'use client'
import { useRouter } from 'next/navigation'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
import ChatInterface from '~/app/chat/_components/ChatInterface'
import { useMessages } from '~/app/_providers/MessagesProvider';
import { Spinner } from '~/components/ui/spinner';
export default function ChatModal() {
const router = useRouter()
const {messages,session,isLoading,error} = useMessages()
return (
<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>Talk To My AI-Assistant</DialogTitle>
</DialogHeader>
<div className="flex-1 overflow-hidden min-h-0">
{!isLoading &&
<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
}
{isLoading &&
<><Spinner/> Loading Messages...</>
}
{error &&
<div> {error} </div>
}
</div>
</DialogContent>
</Dialog>
)
}