From eb3897b042b973f35f53a893e51c25b0fe782365 Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Mon, 17 Apr 2023 22:12:12 +0100
Subject: [PATCH] add fix to chat message scroll

---
 packages/ui/src/views/chatmessage/ChatMessage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/views/chatmessage/ChatMessage.js b/packages/ui/src/views/chatmessage/ChatMessage.js
index 4fbb54e68..4dbdc8498 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.js
+++ b/packages/ui/src/views/chatmessage/ChatMessage.js
@@ -39,6 +39,7 @@ export const ChatMessage = ({ chatflowid }) => {
     const customization = useSelector((state) => state.customization)
     const { confirm } = useConfirm()
     const dispatch = useDispatch()
+    const ps = useRef()
 
     useNotifier()
     const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
@@ -115,7 +116,9 @@ export const ChatMessage = ({ chatflowid }) => {
     }
 
     const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+        if (ps.current) {
+            ps.current.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: 'smooth' })
+        }
     }
 
     const addChatMessage = async (message, type) => {
@@ -286,7 +289,7 @@ export const ChatMessage = ({ chatflowid }) => {
                             <ClickAwayListener onClickAway={handleClose}>
                                 <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
                                     <div className='cloud'>
-                                        <div className='messagelist'>
+                                        <div ref={ps} className='messagelist'>
                                             {messages.map((message, index) => {
                                                 return (
                                                     // The latest message sent by the user will be animated while waiting for a response
@@ -331,7 +334,6 @@ export const ChatMessage = ({ chatflowid }) => {
                                                     </Box>
                                                 )
                                             })}
-                                            <div ref={messagesEndRef} />
                                         </div>
                                     </div>
                                     <Divider />