From 3f783aaae5f191308aa4026c63e9fddc6c3c9e7e Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Sat, 14 Sep 2024 15:11:36 -0400 Subject: [PATCH] Fix auto scroll update --- webview-ui/src/components/ChatView.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 6e2a362..a50eb36 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -51,7 +51,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie const virtuosoRef = useRef(null) const [expandedRows, setExpandedRows] = useState>({}) const [isAtBottom, setIsAtBottom] = useState(false) - const [didScrollFromApiReq, setDidScrollFromApiReq] = useState(false) + const [didScrollFromApiReqTs, setDidScrollFromApiReqTs] = useState(undefined) useEffect(() => { // if last message is an ask, show user ask UI @@ -463,8 +463,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie useEffect(() => { // dont scroll if we're just updating the api req started informational body - const isLastApiReqStarted = visibleMessages.at(-1)?.say === "api_req_started" - if (didScrollFromApiReq && isLastApiReqStarted) { + const lastMessage = visibleMessages.at(-1) + const isLastApiReqStarted = lastMessage?.say === "api_req_started" + if (didScrollFromApiReqTs && isLastApiReqStarted && lastMessage?.ts === didScrollFromApiReqTs) { return } @@ -473,11 +474,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie // TODO: we can use virtuoso's isAtBottom to prevent scrolling if user is scrolled up, and show a 'scroll to bottom' button for better UX // NOTE: scroll to bottom may not work if you use margin, see virtuoso's troubleshooting virtuosoRef.current?.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: "smooth" }) - setDidScrollFromApiReq(isLastApiReqStarted) // need to do this in timer since this effect can get called a few times simultaneously + setDidScrollFromApiReqTs(isLastApiReqStarted ? lastMessage?.ts : undefined) // need to do this in timer since this effect can get called a few times simultaneously }, 50) return () => clearTimeout(timer) - }, [visibleMessages, didScrollFromApiReq]) + }, [visibleMessages, didScrollFromApiReqTs]) const placeholderText = useMemo(() => { const text = task ? "Type a message..." : "Type your task here..."