diff --git a/nx-dev/feature-ai/src/lib/feed-container.tsx b/nx-dev/feature-ai/src/lib/feed-container.tsx index d4f9c038d0c8b4..aa2d4fdb2b4c4b 100644 --- a/nx-dev/feature-ai/src/lib/feed-container.tsx +++ b/nx-dev/feature-ai/src/lib/feed-container.tsx @@ -28,8 +28,6 @@ export function FeedContainer(): JSX.Element { const [startedReply, setStartedReply] = useState(false); const [isStopped, setStopped] = useState(false); - const feedContainer: RefObject | undefined = useRef(null); - const { messages, setMessages, @@ -59,11 +57,15 @@ export function FeedContainer(): JSX.Element { const hasReply = useMemo(() => messages.length > 0, [messages]); + // If user is close to the bottom, scroll to the bottom. + // Otherwise, the user is probably reading something above, so don't scroll. + const scrollableWrapperRef: RefObject | undefined = + useRef(null); useEffect(() => { - if (feedContainer.current) { - const elements = - feedContainer.current.getElementsByClassName('feed-item'); - elements[elements.length - 1].scrollIntoView({ behavior: 'smooth' }); + if (!scrollableWrapperRef.current) return; + const el = scrollableWrapperRef.current; + if (el.scrollTop + el.clientHeight + 100 >= el.scrollHeight) { + el.scrollTo(0, el.scrollHeight); } }, [messages, isLoading]); @@ -100,6 +102,7 @@ export function FeedContainer(): JSX.Element { <> {/*WRAPPER*/}
{/*MAIN CONTENT*/} -
+