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

…ers reading the content (#19196)

nx-dev/feature-ai/src/lib/feed-container.tsx

@@ -4,7 +4,6 @@ import {
   type JSX,
   RefObject,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -28,8 +27,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,
@@ -57,14 +54,28 @@ export function FeedContainer(): JSX.Element {
     },
   });
 
-  const hasReply = useMemo(() => messages.length > 0, [messages]);
-
+  /*
+   * Determine whether we should scroll to the bottom of new messages.
+   * Scroll if:
+   * 1. New message has come in (length > previous length)
+   * 2. User is close to the bottom of the messages
+   *
+   * Otherwise, user is probably reading messages, so don't scroll.
+   */
+  const scrollableWrapperRef: RefObject<HTMLDivElement> | undefined =
+    useRef(null);
+  const currentMessagesLength = useRef(0);
   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;
+    let shouldScroll = false;
+    if (messages.length > currentMessagesLength.current) {
+      currentMessagesLength.current = messages.length;
+      shouldScroll = true;
+    } else if (el.scrollTop + el.clientHeight + 50 >= el.scrollHeight) {
+      shouldScroll = true;
     }
+    if (shouldScroll) el.scrollTo(0, el.scrollHeight);
   }, [messages, isLoading]);
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -100,6 +111,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 +123,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}
@@ -139,7 +147,7 @@ export function FeedContainer(): JSX.Element {
                     onRegenerate={handleRegenerate}
                     input={input}
                     isGenerating={isLoading}
-                    showNewChatCta={!isLoading && hasReply}
+                    showNewChatCta={!isLoading && messages.length > 0}
                     showRegenerateCta={isStopped}
                   />
                 </div>

nx-dev/nx-dev/pages/ai-chat/index.tsx

@@ -2,6 +2,7 @@ import { FeedContainer } from '@nx/nx-dev/feature-ai';
 import { DocumentationHeader } from '@nx/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import { useNavToggle } from '../../lib/navigation-toggle.effect';
+import { cx } from '@nx/nx-dev/ui-primitives';
 
 export default function AiDocs(): JSX.Element {
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -21,7 +22,14 @@ export default function AiDocs(): JSX.Element {
           maxVideoPreview: -1,
         }}
       />
-      <div id="shell" className="flex h-full flex-col">
+      <div
+        id="shell"
+        className={cx(
+          'flex flex-col',
+          // Adjust dynamically to mobile viewport height (e.g. when navigational tabs are open).
+          'h-[calc(100dvh)]'
+        )}
+      >
         <div className="w-full flex-shrink-0">
           <DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
         </div>