hooks up the redux conversation state with conversation UI

frontend/src/conversation/Conversation.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import Hero from '../Hero';
 import ConversationBubble from './ConversationBubble';
@@ -6,13 +7,18 @@ import { selectConversation } from './conversationSlice';
 
 export default function Conversation() {
   const messages = useSelector(selectConversation);
+  const endMessageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => endMessageRef?.current?.scrollIntoView());
+
   return (
     <div className="flex justify-center p-6">
       <div className="w-10/12 transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble
-              className="mt-5"
+              ref={index === messages.length - 1 ? endMessageRef : null}
+              className="mb-7"
               key={index}
               message={message.text}
               type={message.type}