add fix to chat message scroll

This commit is contained in:
Henry 2023-04-17 22:12:12 +01:00
parent 180990b025
commit eb3897b042
1 changed files with 5 additions and 3 deletions

View File

@ -39,6 +39,7 @@ export const ChatMessage = ({ chatflowid }) => {
const customization = useSelector((state) => state.customization) const customization = useSelector((state) => state.customization)
const { confirm } = useConfirm() const { confirm } = useConfirm()
const dispatch = useDispatch() const dispatch = useDispatch()
const ps = useRef()
useNotifier() useNotifier()
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
@ -115,7 +116,9 @@ export const ChatMessage = ({ chatflowid }) => {
} }
const scrollToBottom = () => { 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) => { const addChatMessage = async (message, type) => {
@ -286,7 +289,7 @@ export const ChatMessage = ({ chatflowid }) => {
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
<MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}> <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
<div className='cloud'> <div className='cloud'>
<div className='messagelist'> <div ref={ps} className='messagelist'>
{messages.map((message, index) => { {messages.map((message, index) => {
return ( return (
// The latest message sent by the user will be animated while waiting for a response // The latest message sent by the user will be animated while waiting for a response
@ -331,7 +334,6 @@ export const ChatMessage = ({ chatflowid }) => {
</Box> </Box>
) )
})} })}
<div ref={messagesEndRef} />
</div> </div>
</div> </div>
<Divider /> <Divider />