From a786e1589bf61cdc4f2dbc4c705f464306eb2235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Rame=CC=81?= <thomas.rame@outlook.com>
Date: Mon, 19 Feb 2024 15:29:05 +0100
Subject: [PATCH] chore: make the scroll follow a new message

---
 src/app/(public)/assistant/AssistantPage.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/(public)/assistant/AssistantPage.tsx b/src/app/(public)/assistant/AssistantPage.tsx
index 3a8c45c..c13680d 100644
--- a/src/app/(public)/assistant/AssistantPage.tsx
+++ b/src/app/(public)/assistant/AssistantPage.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { RequestAssistantForm } from '@etabli/src/app/(public)/assistant/RequestAssistantForm';
@@ -27,6 +27,7 @@ export function AssistantPage(props: AssistantPageProps) {
 
   const [sessionId, setSessionId] = useState<string>(() => uuidv4());
   const [messages, setMessages] = useState<MessageSchemaType[]>(() => props.prefilledMessages || []);
+  const inputContainerRef = useRef<HTMLDivElement | null>(null); // This is used to scroll to ease the reading
 
   const handleNewMessageChunk = (data: SessionAnswerChunkSchemaType) => {
     // If not for the current session (for any reason, ignore)
@@ -54,6 +55,9 @@ export function AssistantPage(props: AssistantPageProps) {
 
     // Needed to re-render
     setMessages([...messages]);
+
+    // Scroll in case the user was at the top while typing, or in case the new chunk is producing a new line
+    inputContainerRef.current?.scrollIntoView({ behavior: 'instant' });
   };
 
   const restartSession = () => {
@@ -101,7 +105,7 @@ export function AssistantPage(props: AssistantPageProps) {
           </Grid>
         )}
       </Box>
-      <Box sx={{ bgcolor: 'var(--background-default-grey)', position: 'sticky', bottom: '1.5rem', pt: 1 }}>
+      <Box sx={{ bgcolor: 'var(--background-default-grey)', position: 'sticky', bottom: '1.5rem', pt: 1 }} ref={inputContainerRef}>
         <Grid container spacing={2} sx={{ bgcolor: 'var(--background-default-grey)' }}>
           <Grid item xs={12}>
             <ContextualRequestAssistantForm
@@ -120,6 +124,9 @@ export function AssistantPage(props: AssistantPageProps) {
 
                 // Needed to re-render
                 setMessages([...messages]);
+
+                // Scroll in case the user was at the top while typing
+                inputContainerRef.current?.scrollIntoView({ behavior: 'instant' });
               }}
               canBeReset={messages.length > 0}
               onResetSession={restartSession}