autoscroll chatv2 to bottom on chat expand

Author: sutigit

src/client/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Outlet, useLocation, useParams } from 'react-router-dom'
 import { SnackbarProvider } from 'notistack'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
@@ -7,6 +7,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { fi } from 'date-fns/locale'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { Box, Button, Container, CssBaseline, Snackbar } from '@mui/material'
+import { AppContext } from './util/context'
 
 import { PUBLIC_URL } from '../config'
 import { User } from './types'
@@ -69,6 +70,7 @@ const AdminLoggedInAsBanner = () => {
 
 const App = () => {
   const theme = useTheme()
+  const appRef = useRef<HTMLDivElement>(null)
   const { courseId } = useParams()
   const location = useLocation()
 
@@ -94,13 +96,15 @@ const App = () => {
       <CssBaseline />
       <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fi}>
         <SnackbarProvider preventDuplicate>
-          <Box minHeight="100vh" display="flex" flexDirection="column">
-            <NavBar />
-            <Container component="main" sx={{ mt: '4rem', mb: '10rem' }}>
-              <Outlet />
-            </Container>
-            <Footer />
-          </Box>
+          <AppContext.Provider value={appRef}>
+            <Box minHeight="100vh" display="flex" flexDirection="column" ref={appRef}>
+              <NavBar />
+              <Container component="main" sx={{ mt: '4rem', mb: '10rem' }}>
+                <Outlet />
+              </Container>
+              <Footer />
+            </Box>
+          </AppContext.Provider>
           <AdminLoggedInAsBanner />
         </SnackbarProvider>
       </LocalizationProvider>

src/client/components/ChatV2/ChatV2.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom'
 import useCourse from '../../hooks/useCourse'
 import useUserStatus from '../../hooks/useUserStatus'
-import { useRef, useState } from 'react'
+import { useRef, useState, useContext, useEffect } from 'react'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
 import { DEFAULT_MODEL } from '../../../config'
 import useInfoTexts from '../../hooks/useInfoTexts'
@@ -15,6 +15,7 @@ import { Conversation } from './Conversation'
 import { ChatBox } from './ChatBox'
 import { getCompletionStream } from './util'
 import { SystemPrompt } from './System'
+import { AppContext } from '../../util/context'
 
 export const ChatV2 = () => {
   const { courseId } = useParams()
@@ -29,6 +30,10 @@ export const ChatV2 = () => {
   const [system, setSystem] = useLocalStorageState<{ content: string }>('general-chat-system', { content: '' })
   const [message, setMessage] = useLocalStorageState<{ content: string }>('general-chat-current', { content: '' })
   const [messages, setMessages] = useLocalStorageState<Message[]>('general-chat-messages', [])
+
+  const appContainerRef = useContext(AppContext)
+  const chatContainerRef = useRef<HTMLDivElement>(null)
+
   const inputFileRef = useRef<HTMLInputElement>(null)
   const [fileName, setFileName] = useState<string>('')
   const [completion, setCompletion] = useState('')
@@ -130,6 +135,28 @@ export const ChatV2 = () => {
     clearRetryTimeout()
   }
 
+  useEffect(() => {
+    const chatContainer = chatContainerRef.current
+    const appContainer = appContainerRef.current
+
+    if (!chatContainer || !appContainer || !messages.length) return
+
+    const scrollToBottom = () => {
+      appContainer.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      scrollToBottom()
+    })
+
+    resizeObserver.observe(chatContainer)
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
   return (
     <Box
       sx={{
@@ -138,26 +165,23 @@ export const ChatV2 = () => {
         flexDirection: 'column',
       }}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          gap: '1rem',
-        }}
-      >
+      <Box sx={{ display: 'flex', gap: '1rem' }}>
         {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
         <SystemPrompt content={system.content} setContent={(content) => setSystem({ content })} />
         <Button onClick={handleReset}>Reset</Button>
       </Box>
-      <Conversation messages={messages} completion={completion} />
-      <ChatBox
-        disabled={false}
-        onSubmit={(message) => {
-          if (message.trim()) {
-            handleSubmit(message)
-            setMessage({ content: '' })
-          }
-        }}
-      />
+      <Box ref={chatContainerRef}>
+        <Conversation messages={messages} completion={completion} />
+        <ChatBox
+          disabled={false}
+          onSubmit={(message) => {
+            if (message.trim()) {
+              handleSubmit(message)
+              setMessage({ content: '' })
+            }
+          }}
+        />
+      </Box>
     </Box>
   )
 }

src/client/components/ChatV2/Conversation.tsx

@@ -8,7 +8,7 @@ const MessageItem = ({ message }: { message: Message }) => (
   <Paper
     elevation={3}
     sx={{
-      my: '1rem',
+      my: '2rem',
       ml: message.role === 'assistant' ? '0' : '2rem',
       mr: message.role === 'assistant' ? '2rem' : '0',
       p: '1rem',
@@ -42,7 +42,7 @@ const PöhinäLogo = () => (
 )
 
 export const Conversation = ({ messages, completion }: { messages: Message[]; completion: string }) => (
-  <Box sx={{ flex: 1, overflowY: 'auto' }}>
+  <Box sx={{ flex: 1, overflowY: 'auto', gap: 2 }}>
     {messages.map((message, idx) => (
       <MessageItem key={idx} message={message} />
     ))}

src/client/util/context.ts

@@ -0,0 +1,7 @@
+import { createContext, RefObject } from 'react'
+
+/**
+ * Context to hold the reference to the App component which is the most parent component in the application.
+ * This is used to help trigger auto scrolling when chat containers expands.
+ */
+export const AppContext = createContext<RefObject<HTMLDivElement> | null>(null)