chat interface

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

@@ -2,6 +2,8 @@
 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';
 
 type DBMessage = {
 	id: string
@@ -9,14 +11,9 @@ type DBMessage = {
 	content: string
 }
 
-interface ChatModalProps {
-	sessionId?: string
-	// initialMessages: DBMessage[]
-}
-
-export default function ChatModal({ sessionId }: ChatModalProps) {
+export default function ChatModal() {
 	const router = useRouter()
-
+	const {messages,session,clearChat,clearingChat,isLoading,error,refetchMessages} = 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">
@@ -24,7 +21,15 @@ export default function ChatModal({ sessionId }: ChatModalProps) {
 					<DialogTitle>Talk To My AI-Assistant</DialogTitle>
 				</DialogHeader>
 				<div className="flex-1 overflow-hidden min-h-0">
-					<ChatInterface sessionId={sessionId} />
+					{messages && session?.id &&
+					<ChatInterface sessionId={session.id} dbMessages={messages}/>
+					}
+					{isLoading &&
+						<><Spinner/> Loading Messages...</>
+					}
+					{error &&
+						<div> {error} </div>
+					}
 				</div>
 			</DialogContent>
 		</Dialog>