fix chat

src/app/chat/page.tsx

@@ -2,26 +2,22 @@
 import ChatInterface from './_components/ChatInterface'
 import { trpc } from '../_trpc/Client';
 import { Skeleton } from '~/components/ui/skeleton';
+import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
+import { useTimeLine } from '../_providers/GsapProvicer';
 
 export default function ChatPage() {
 	const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
+	useTimeLine(session)
 	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">
-				<div className="p-4 border-b flex items-center justify-between">
-					<div>
-						<h1 className="text-lg font-semibold">AI Recruiter</h1>
-						<p className="text-xs text-muted-foreground">
-							Chat with Gregor's AI assistant
-						</p>
-					</div>
-				</div>
-				<div className="flex-1 overflow-hidden">
-					{session && <ChatInterface sessionId={session?.id} initialMessages={session?.messages} /> }
+		<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>
-			</div>
+					</div>
 		</div>
 	)
 }