chat interface

src/app/chat/page.tsx

@@ -4,19 +4,28 @@ import { trpc } from '../_trpc/Client';
 import { Skeleton } from '~/components/ui/skeleton';
 import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
 import { useTimeLine } from '../_providers/GsapProvicer';
+import { useMessages } from '../_providers/MessagesProvider';
+import { Spinner } from '~/components/ui/spinner';
+import { useEffect } from 'react';
 
 export default function ChatPage() {
-	const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
-	useTimeLine(session)
+	const {messages,session,clearChat,clearingChat,isLoading,error,refetchMessages} = useMessages()
+	useTimeLine(messages)
 	return (
 		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
 					<AnimatedPageTitle position={0}>
 						<span>Talk To My </span> <span> AI-Assistant</span>
 					</AnimatedPageTitle>
-					<div className='flex items-center h-[80%] my-auto w-full'>
-					<ChatInterface sessionId={session?.id} /> 
-					{error && <div>{error.message}</div>}
-					{isLoading && <Skeleton/>}
+					<div className='flex items-center h-[80%] w-full my-auto w-full'>
+					{messages && session?.id &&
+					<ChatInterface sessionId={session.id} dbMessages={messages}/>
+					}
+					{isLoading &&
+						<><Spinner/> Loading Messages...</>
+					}
+					{error &&
+						<div> {error} </div>
+					}
 					</div>
 		</div>
 	)