fix(ui): improve last message height computation (#1470)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

apps/agentstack-ui/src/modules/runs/chat/ChatAgentMessage.tsx

@@ -27,8 +27,8 @@ import classes from './ChatAgentMessage.module.scss';
 interface Props {
   message: UIAgentMessage;
   isLast?: boolean;
+  isFirst?: boolean;
   containerScrollableRef?: RefObject<HTMLDivElement | null>;
-  onShow?: () => void;
 }
 
 export function ChatAgentMessage(props: Props) {
@@ -39,16 +39,12 @@ export function ChatAgentMessage(props: Props) {
   );
 }
 
-function Message({ message, isLast, containerScrollableRef, onShow }: Props) {
+function Message({ message, isLast, isFirst, containerScrollableRef }: Props) {
   const contentRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<HTMLDivElement>(null);
 
   const { props } = useMessageInteractionProps();
 
-  useEffect(() => {
-    onShow?.();
-  }, [onShow]);
-
   const updateHeight = useCallback(() => {
     if (!containerScrollableRef?.current || !rootRef.current) {
       return;
@@ -63,15 +59,20 @@ function Message({ message, isLast, containerScrollableRef, onShow }: Props) {
       const messagesElem = listItemElem?.parentElement;
       const prevMessageElem = listItemElem?.nextElementSibling; // Messages are in reverse order
 
-      if (prevMessageElem instanceof HTMLLIElement && messagesElem) {
-        const nextSiblingHeight = prevMessageElem?.offsetHeight ?? 0;
-        const rowGap = parseFloat(window.getComputedStyle(messagesElem).rowGap);
+      if (messagesElem) {
+        const nextSiblingHeight =
+          prevMessageElem instanceof HTMLLIElement
+            ? prevMessageElem.offsetHeight
+            : isFirst
+              ? MESSAGE_PLACEHOLDER_HEIGHT
+              : 0;
+        const rowGap = nextSiblingHeight ? parseFloat(window.getComputedStyle(messagesElem).rowGap) : 0;
 
         const availableHeight = Math.max(0, containerHeight - nextSiblingHeight - rowGap);
         rootRef.current.style.minBlockSize = rem(availableHeight);
       }
     }
-  }, [isLast, containerScrollableRef]);
+  }, [containerScrollableRef, isLast, isFirst]);
 
   useEffect(() => {
     updateHeight();
@@ -119,3 +120,5 @@ function Message({ message, isLast, containerScrollableRef, onShow }: Props) {
     </div>
   );
 }
+
+const MESSAGE_PLACEHOLDER_HEIGHT = 46; // Height in px to reserve for the last user message to avoid layout shift

apps/agentstack-ui/src/modules/runs/chat/ChatMessagesView.tsx

@@ -52,28 +52,30 @@ export function ChatMessagesView() {
               {messages.map((message, idx) => {
                 const isUser = isUserMessage(message);
                 const isAgent = isAgentMessage(message);
-                const isLast = idx == 0; // messages are displayed in reverse order
+
+                // messages are displayed in reverse order
+                const isLast = idx === 0;
+                const isFirst = idx === messages.length - 1;
 
                 return (
-                  <li key={message.id} className={classes.message}>
+                  <li key={message.id}>
                     {isUser && <ChatUserMessage message={message} />}
 
                     {isAgent && (
                       <ChatAgentMessage
                         message={message}
-                        onShow={isLast ? scrollToBottom : undefined}
                         isLast={isLast}
+                        isFirst={isFirst}
                         containerScrollableRef={scrollElementRef}
                       />
                     )}
 
                     {isLast && <div ref={observeElementRef} />}
+                    {isFirst && hasNextPage && <div ref={fetchNextPageInViewAnchorRef} />}
                   </li>
                 );
               })}
 
-              {hasNextPage && <li ref={fetchNextPageInViewAnchorRef}> </li>}
-
               {isFetchingNextPage && (
                 <li className={classes.loading}>
                   <InlineLoading description="Loading more messages..." />