Add scrolling case for longer user message

change/@ni-spright-components-e6f8c74f-96f4-4b4e-a67d-dcad84b3ec6f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add scrolling case for longer user message",
+  "packageName": "@ni/spright-components",
+  "email": "163188334+Alexia-Claudia-Micu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/spright-components/src/chat/conversation/models/auto-scroll-manager.ts

@@ -13,6 +13,11 @@ import {
 // Distance from the bottom (px) within which the conversation is considered "at the bottom".
 const scrollingPixelThreshold = 10;
 
+// Maximum fraction of the viewport height that an anchored message may occupy after the
+// post-send scroll. Messages taller than this are scrolled past so only this fraction
+// remains visible at the top, leaving room for the AI response.
+const anchoredMessageMaxViewportFraction = 0.2;
+
 // Slot name for messages that precede the current turn's anchor message.
 const historySlotName = 'history';
 
@@ -84,6 +89,7 @@ export class AutoScrollManager implements Subscriber {
         this.resizeObserver = undefined;
         this.setScrollAnchorMessage(undefined);
         this.clearSlotAssignments();
+        this.conversation.anchoredContainer.style.minHeight = '';
         this.anchorActive = false;
         this.previousMessages = [];
     }
@@ -142,24 +148,36 @@ export class AutoScrollManager implements Subscriber {
             this.pendingAnchorInsert = false;
             if (anchorInsert) {
                 this.anchorToLastInsertedMessage();
-            } else if (this.autoScrollEngaged) {
+            } else if (this.autoScrollEngaged && this.programmaticScrollTarget === undefined) {
                 this.followContent();
             }
         });
     }
 
     /**
      * Pins the most recently inserted anchor message near the top of the
-     * viewport.
+     * viewport. Outbound messages taller than anchoredMessageMaxViewportFraction of
+     * the viewport are scrolled past so only that fraction remains visible
      */
     private anchorToLastInsertedMessage(): void {
         const message = this.getLastAnchorMessage();
         if (message === undefined) {
             return;
         }
+
+        const anchored = this.conversation.anchoredContainer;
+        anchored.style.minHeight = '';
+
         this.setScrollAnchorMessage(message);
         this.autoScrollEngaged = true;
-        this.smoothScrollTo(this.getMaxScrollTop());
+
+        const target = this.getAnchorScrollTarget(message);
+        const shortfall = target - this.getMaxScrollTop();
+        if (shortfall > 0) {
+            anchored.style.minHeight = `${anchored.offsetHeight + shortfall}px`;
+            void this.conversation.messagesContainer.scrollHeight;
+        }
+        this.smoothScrollTo(Math.min(target, this.getMaxScrollTop()));
     }
 
     private followContent(): void {
@@ -206,6 +224,19 @@ export class AutoScrollManager implements Subscriber {
         return Math.max(0, scrollHeight - clientHeight);
     }
 
+    private getAnchorScrollTarget(message: ChatMessage): number {
+        const container = this.conversation.messagesContainer;
+        const containerRect = container.getBoundingClientRect();
+        const messageRect = message.getBoundingClientRect();
+        const messageTopInContainer = messageRect.top - containerRect.top + container.scrollTop;
+        const { clientHeight } = container;
+        const maxMessageCoverage = clientHeight * anchoredMessageMaxViewportFraction;
+        if (messageRect.height > maxMessageCoverage) {
+            return messageTopInContainer + messageRect.height - maxMessageCoverage;
+        }
+        return messageTopInContainer;
+    }
+
     private smoothScrollTo(scrollTop: number): void {
         const container = this.conversation.messagesContainer;
         if (Math.abs(container.scrollTop - scrollTop) <= 1) {

packages/spright-components/src/chat/specs/scrolling-behavior.md

@@ -23,7 +23,7 @@ A specific type of user scrolling that takes place when the user scrolls while A
 Scrolling should animate when possible to be smooth rather than instant.
 
 **Post send auto-scroll**  
-Post send auto-scrolling should occur any time the user sends a new message (regardless of where they are in the chat history at the time)
+Post send auto-scrolling should occur any time the user sends a new message (regardless of where they are in the chat history at the time). The user message should be scrolled such that it occupies at most 20% of the viewport.
 
 **AI response auto-scroll**  
 AI response auto-scroll should occur only if the AI streams responses. Long responses should auto scroll because streaming should be happening at a human readable pace and therefore start removing the old (assumed read) content off screen. If we are not streaming the response and instead returning a block of text, we should not autoscroll because this would take unread content off the screen.