chore(compass-assistant): add auto-scroll to bottom with entry points and message sending COMPASS-9887

packages/compass-assistant/src/components/assistant-chat.spec.tsx

@@ -248,9 +248,8 @@ describe('AssistantChat', function () {
     userEvent.type(inputField, 'What is aggregation?');
     userEvent.click(sendButton);
 
-    expect(ensureOptInAndSendStub.called).to.be.true;
-
     await waitFor(() => {
+      expect(ensureOptInAndSendStub.called).to.be.true;
       expect(track).to.have.been.calledWith('Assistant Prompt Submitted', {
         user_input_length: 'What is aggregation?'.length,
       });
@@ -281,9 +280,8 @@ describe('AssistantChat', function () {
     userEvent.type(inputField, '  What is sharding?  ');
     userEvent.click(screen.getByLabelText('Send message'));
 
-    expect(ensureOptInAndSendStub.called).to.be.true;
-
     await waitFor(() => {
+      expect(ensureOptInAndSendStub.called).to.be.true;
       expect(track).to.have.been.calledWith('Assistant Prompt Submitted', {
         user_input_length: 'What is sharding?'.length,
       });
@@ -320,6 +318,48 @@ describe('AssistantChat', function () {
     expect(userMessage.className).to.not.equal(assistantMessage.className);
   });
 
+  it('scrolls to bottom when new message is added', async function () {
+    const { chat } = renderWithChat(mockMessages);
+
+    // Get the messages container element
+    const messagesContainer = screen.getByTestId('assistant-chat-messages');
+
+    // Add a message to trigger auto scroll
+    const newMessage: AssistantMessage = {
+      id: 'new-message',
+      role: 'user',
+      parts: [{ type: 'text', text: 'New message' }],
+    };
+
+    messagesContainer.scrollTop = 100;
+
+    chat.messages = [...chat.messages, newMessage];
+
+    await waitFor(() => {
+      expect(screen.getByTestId('assistant-message-new-message')).to.exist;
+    });
+
+    expect(messagesContainer.scrollTop).to.equal(0);
+  });
+
+  it('does not scroll to bottom when new message is added by assistant', async function () {
+    const { chat } = renderWithChat(mockMessages);
+
+    const messagesContainer = screen.getByTestId('assistant-chat-messages');
+    messagesContainer.scrollTop = 100;
+
+    chat.messages = [
+      ...chat.messages,
+      {
+        id: 'new-message',
+        role: 'assistant',
+        parts: [{ type: 'text', text: 'New message' }],
+      },
+    ];
+
+    expect(messagesContainer.scrollTop).to.equal(100);
+  });
+
   it('handles messages with multiple text parts', function () {
     const messagesWithMultipleParts: AssistantMessage[] = [
       {

packages/compass-assistant/src/components/assistant-chat.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useContext } from 'react';
+import React, { useCallback, useEffect, useContext, useRef } from 'react';
 import type { AssistantMessage } from '../compass-assistant-provider';
 import { AssistantActionsContext } from '../compass-assistant-provider';
 import type { Chat } from '../@ai-sdk/react/chat-react';
@@ -203,6 +203,11 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
 }) => {
   const track = useTelemetry();
   const darkMode = useDarkMode();
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const previousLastMessageId = useRef<string | undefined>(undefined);
+  const lastMessageId = chat.messages[chat.messages.length - 1]?.id;
+  const lastMessageIsUser =
+    chat.messages[chat.messages.length - 1]?.role === 'user';
 
   const { ensureOptInAndSend } = useContext(AssistantActionsContext);
   const { messages, status, error, clearError, setMessages } = useChat({
@@ -214,6 +219,26 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
     },
   });
 
+  const scrollToBottom = useCallback(() => {
+    if (messagesContainerRef.current) {
+      // Since the container uses flexDirection: 'column-reverse',
+      // scrolling to the bottom means setting scrollTop to 0
+      messagesContainerRef.current.scrollTop = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (
+      lastMessageId &&
+      previousLastMessageId.current !== undefined &&
+      lastMessageId !== previousLastMessageId.current &&
+      lastMessageIsUser
+    ) {
+      scrollToBottom();
+    }
+    previousLastMessageId.current = lastMessageId;
+  }, [lastMessageId, lastMessageIsUser, scrollToBottom]);
+
   useEffect(() => {
     const hasExistingNonGenuineWarning = chat.messages.some(
       (message) => message.id === 'non-genuine-warning'
@@ -232,17 +257,18 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   }, [hasNonGenuineConnections, chat, setMessages]);
 
   const handleMessageSend = useCallback(
-    (messageBody: string) => {
+    async (messageBody: string) => {
       const trimmedMessageBody = messageBody.trim();
       if (trimmedMessageBody) {
+        await chat.stop();
         void ensureOptInAndSend?.({ text: trimmedMessageBody }, {}, () => {
           track('Assistant Prompt Submitted', {
             user_input_length: trimmedMessageBody.length,
           });
         });
       }
     },
-    [track, ensureOptInAndSend]
+    [track, ensureOptInAndSend, chat]
   );
 
   const handleFeedback = useCallback(
@@ -343,6 +369,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
           <div
             data-testid="assistant-chat-messages"
             className={messageFeedFixesStyles}
+            ref={messagesContainerRef}
           >
             <div className={messagesWrapStyles}>
               {messages.map((message, index) => {