Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update message scroll

This commit is contained in:
Henry 2023-05-22 17:47:57 +01:00
parent e89785080b
commit 7f3d850bf6
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/ui/src/views/chatmessage/ChatMessage.js
View File

@ -25,7 +25,7 @@ import predictionApi from 'api/prediction'
import useApi from 'hooks/useApi' import useApi from 'hooks/useApi'
// Const // Const
import { baseURL } from 'store/constant' import { baseURL, maxScroll } from 'store/constant'
import { throttle } from 'utils/genericHelper' import { throttle } from 'utils/genericHelper'
export const ChatMessage = ({ open, chatflowid, isDialog }) => { export const ChatMessage = ({ open, chatflowid, isDialog }) => {
@ -33,7 +33,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
const customization = useSelector((state) => state.customization) const customization = useSelector((state) => state.customization)
const ps = useRef() const ps = useRef()
const messagesEndRef = useRef()
const [userInput, setUserInput] = useState('') const [userInput, setUserInput] = useState('')
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
@ -51,7 +50,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming) const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)
const scrollToBottom = () => { const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView(true) if (ps.current) {
ps.current.scrollTo({ top: maxScroll })
}
} }
const onChange = useCallback((e) => setUserInput(e.target.value), [setUserInput]) const onChange = useCallback((e) => setUserInput(e.target.value), [setUserInput])
@ -170,8 +171,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
// Auto scroll chat to bottom // Auto scroll chat to bottom
useEffect(() => { useEffect(() => {
scrollThrottle() scrollToBottom()
}, [messages, scrollThrottle]) console.log('throeel')
}, [messages])
useEffect(() => { useEffect(() => {
if (isDialog && inputRef) { if (isDialog && inputRef) {
@ -292,7 +294,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
</Box> </Box>
) )
})} })}
<div className='h-[162px] bg-white dark:bg-[#343541]' ref={messagesEndRef} />
</div> </div>
</div> </div>
<Divider /> <Divider />