pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix auto scroll update

Browse Source
This commit is contained in:
Saoud Rizwan
2024-09-14 15:11:36 -04:00
parent 0cd4ca2590
commit 3f783aaae5
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
webview-ui/src/components/ChatView.tsx
View File

@@ -51,7 +51,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
const virtuosoRef = useRef<VirtuosoHandle>(null)
const [expandedRows, setExpandedRows] = useState<Record<number, boolean>>({})
const [isAtBottom, setIsAtBottom] = useState(false)
const [didScrollFromApiReq, setDidScrollFromApiReq] = useState(false)
const [didScrollFromApiReqTs, setDidScrollFromApiReqTs] = useState<number | undefined>(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..."