mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-10 22:41:14 +00:00
fix: prevent unwanted auto-scrolling in reasoning block during thinking
- Add scroll position tracking to ReasoningBlock component - Only auto-scroll when user is already near bottom (within 10px tolerance) - Preserve user scroll position when reading thoughts from beginning - Fixes issue #5874 where users could not read thoughts properly due to forced scrolling The implementation follows the same pattern used in CodeBlock.tsx for consistent UX.
This commit is contained in:
parent
38d8edf05a
commit
179c6791e9
1 changed files with 35 additions and 1 deletions
|
|
@ -12,6 +12,9 @@ interface ReasoningBlockProps {
|
|||
onToggleCollapse?: () => void
|
||||
}
|
||||
|
||||
// Tolerance for determining if user is "near bottom" (in pixels)
|
||||
const SCROLL_SNAP_TOLERANCE = 10
|
||||
|
||||
export const ReasoningBlock = ({ content, elapsed, isCollapsed = false, onToggleCollapse }: ReasoningBlockProps) => {
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
const elapsedRef = useRef<number>(0)
|
||||
|
|
@ -21,10 +24,41 @@ export const ReasoningBlock = ({ content, elapsed, isCollapsed = false, onToggle
|
|||
const [isTransitioning, setIsTransitioning] = useState<boolean>(false)
|
||||
const cursorRef = useRef<number>(0)
|
||||
const queueRef = useRef<string[]>([])
|
||||
|
||||
// Track if user was scrolled near bottom before content update
|
||||
const wasNearBottomRef = useRef(true) // Start as true for initial auto-scroll
|
||||
|
||||
// Check if user is near the bottom of the scroll container
|
||||
const isNearBottom = useCallback(() => {
|
||||
if (!contentRef.current) return false
|
||||
const { scrollTop, scrollHeight, clientHeight } = contentRef.current
|
||||
return Math.abs(scrollHeight - scrollTop - clientHeight) <= SCROLL_SNAP_TOLERANCE
|
||||
}, [])
|
||||
|
||||
// Effect to listen to scroll events and update the ref
|
||||
useEffect(() => {
|
||||
if (contentRef.current && !isCollapsed) {
|
||||
const element = contentRef.current
|
||||
if (!element || isCollapsed) return
|
||||
|
||||
const handleScroll = () => {
|
||||
wasNearBottomRef.current = isNearBottom()
|
||||
}
|
||||
|
||||
element.addEventListener("scroll", handleScroll, { passive: true })
|
||||
// Initial check in case it starts scrolled up
|
||||
handleScroll()
|
||||
|
||||
return () => {
|
||||
element.removeEventListener("scroll", handleScroll)
|
||||
}
|
||||
}, [isNearBottom, isCollapsed])
|
||||
|
||||
// Only auto-scroll if user was near bottom before content update
|
||||
useEffect(() => {
|
||||
if (contentRef.current && !isCollapsed && wasNearBottomRef.current) {
|
||||
contentRef.current.scrollTop = contentRef.current.scrollHeight
|
||||
// Update the ref since we just scrolled to bottom
|
||||
wasNearBottomRef.current = true
|
||||
}
|
||||
}, [content, isCollapsed])
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue