Refactor Chat component to set saved messages on mount

Author: miurla

components/chat.tsx

@@ -2,6 +2,7 @@
 
 import { CHAT_ID } from '@/lib/constants'
 import { Message, useChat } from 'ai/react'
+import { useEffect } from 'react'
 import { toast } from 'sonner'
 import { ChatMessages } from './chat-messages'
 import { ChatPanel } from './chat-panel'
@@ -38,6 +39,10 @@ export function Chat({
     }
   })
 
+  useEffect(() => {
+    setMessages(savedMessages)
+  }, [id])
+
   const onQuerySelect = (query: string) => {
     append({
       role: 'user',
@@ -46,7 +51,7 @@ export function Chat({
   }
 
   return (
-    <div className="flex flex-col w-full max-w-3xl pt-10 pb-16 mx-auto stretch">
+    <div className="flex flex-col w-full max-w-3xl pt-10 pb-20 mx-auto stretch">
       <ChatMessages
         messages={messages}
         onQuerySelect={onQuerySelect}