sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use requestAnimationFrame for synced scroll on chat in web app

Browse source 
Make all the scroll actions just use requestAnimationFrame instead of
setTimeout. It better aligns with browser rendering loop, so better
for UX changes than setTimeout
This commit is contained in:
Debanjum Singh Solanky 2024-09-30 07:00:24 -07:00
parent 57b4f844b7
commit 852662f946
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/interface/web/app/components/chatHistory/chatHistory.tsx
View file

@ -100,16 +100,16 @@ export default function ChatHistory(props: ChatHistoryProps) {
// Auto scroll while incoming message is streamed
useEffect(() => {
if (props.incomingMessages && props.incomingMessages.length > 0 && isNearBottom) {
setTimeout(scrollToBottom, 0);
scrollToBottom();
}
}, [props.incomingMessages, isNearBottom]);
// Scroll to most recent user message after the first page of chat messages is loaded.
useEffect(() => {
if (data && data.chat && data.chat.length > 0 && currentPage < 2) {
setTimeout(() => {
requestAnimationFrame(() => {
latestUserMessageRef.current?.scrollIntoView({ behavior: "auto", block: "start" });
}, 0);
});
}
}, [data, currentPage]);