fix(chat): phantom scrolling when typing in mention menu (#8127)

ichim-david · web-flow · commit 2fcc04b13328 · 2025-07-01T19:22:13.000+03:00
https://www.youtube.com/watch?v=V-PnNRUo5Jo ## Test plan - Use the mention menu and notice that we no longer get a fake scroll down as we type
diff --git a/vscode/webviews/chat/Transcript.tsx b/vscode/webviews/chat/Transcript.tsx
@@ -76,6 +76,22 @@ interface TranscriptProps {
     welcomeContent?: React.ReactNode
 }
 
+function useDebouncedBoolean(value: boolean, delay: number): boolean {
+    const [debouncedValue, setDebouncedValue] = useState(value)
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value)
+        }, delay)
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [value, delay])
+
+    return debouncedValue
+}
+
 export const Transcript: FC<TranscriptProps> = props => {
     const {
         activeChatContext,
@@ -105,6 +121,10 @@ export const Transcript: FC<TranscriptProps> = props => {
     const [scrollableContainer, setScrollableContainer] = useState<HTMLDivElement | null>(null)
     const [isAtBottom, setIsAtBottom] = useState(false)
 
+    // Debounce the isAtBottom state to prevent flickering of the "Skip to end" button
+    // when the mention menu appears and causes micro-scrolls
+    const isAtBottomDebounced = useDebouncedBoolean(isAtBottom, 150)
+
     useEffect(() => {
         const handleCopyEvent = (event: ClipboardEvent) => {
             const selectedText = window.getSelection()?.toString() || ''
@@ -266,7 +286,7 @@ export const Transcript: FC<TranscriptProps> = props => {
 
                     {scrollableContainer && <ScrollbarMarkers scrollContainer={scrollableContainer} />}
 
-                    {!isAtBottom && <ScrollDown onClick={scrollTotheBottom} />}
+                    {!isAtBottomDebounced && <ScrollDown onClick={scrollTotheBottom} />}
 
                     <div className="tw-bg-[var(--vscode-input-background)]">
                         {inputInteractionAtTheBottom &&
