chat scroll trial 1

app/backend/InputOutputHandler.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { use, useEffect, useRef, useState } from "react";
-import ConversationFrontend from "../components/ConversationFrontend";
+import ConversationFrontend from '../components/ConversationFrontend';
 import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
@@ -52,6 +52,7 @@ const InputOutputBackend: React.FC = () => {
   }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
 
 
+  const conversationRef = useRef<HTMLDivElement>(null)
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
@@ -266,6 +267,7 @@ const InputOutputBackend: React.FC = () => {
   return (
     <>
       <ConversationFrontend
+        ref={conversationRef}
         messages={messages}
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}

app/components/ConversationFrontend.tsx

@@ -14,32 +14,34 @@ interface ConversationProps {
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
-    const endOfMessagesRef = useRef<HTMLDivElement>(null);
-  
+  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
+
+    useEffect(() => {
+      if (ref && typeof ref !== 'function') {
+        const element = ref as React.RefObject<HTMLDivElement>;
+        if (element.current) {
+          element.current.scrollTop = element.current.scrollHeight;
+        }
+      }
+    }, [messages, ref]);
+
     return (
-      <div className="output">
-        <div className="conversation resize" id="conversation" ref={ref}>
+      <div className="output" ref={ref}>
+        <div className="conversation resize" id="conversation">
           {messages.map((message, index) => {
-            let isUserMessage
-            if (message.role == "user") {
-              isUserMessage = message
-            }
             if (index >= 1){
 
               return (
                 <div
                   key={index}
-                  className={isUserMessage ? 'user-message' : 'ai-message'}
+                  className={message.role === "user" ? 'user-message' : 'ai-message'}
                   >
                   <p> {message.content}</p>
                 </div>
               );
             }
           })}
-        
-          {/* Dummy div to mark the end of the conversation for auto-scrolling */}
-          <div ref={endOfMessagesRef} />
+
           <div className="button-container">
             <button type="button" onClick={onResendClick}>
               <img src="/img/resend.svg" alt="resend" />