feat(nx-dev): improve auto-scrolling so it does not interfere with us…

…ers reading the content
nrwl · Sep 15, 2023 · 5b17197 · 5b17197
1 parent 6242c87
commit 5b17197
Showing 1 changed file with 10 additions and 11 deletions.
diff --git 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<HTMLDivElement> | 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<HTMLDivElement> | 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*/}
       <div
+        ref={scrollableWrapperRef}
         id="wrapper"
         data-testid="wrapper"
         className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
@@ -111,11 +114,7 @@ export function FeedContainer(): JSX.Element {
           >
             <div className="relative min-w-0 flex-auto">
               {/*MAIN CONTENT*/}
-              <div
-                ref={feedContainer}
-                data-document="main"
-                className="relative pb-36"
-              >
+              <div data-document="main" className="relative pb-36">
                 <Feed
                   activity={!!messages.length ? messages : [assistantWelcome]}
                   onFeedback={handleFeedback}