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

Author: gagik

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,
       });

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';
@@ -211,6 +211,10 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
 }) => {
   const track = useTelemetry();
   const darkMode = useDarkMode();
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const previousLastMessageId = useRef<string | undefined>(undefined);
+  const { id: lastMessageId, role: lastMessageRole } =
+    chat.messages[chat.messages.length - 1] ?? {};
 
   const { ensureOptInAndSend } = useContext(AssistantActionsContext);
   const { messages, status, error, clearError, setMessages } = useChat({
@@ -222,6 +226,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 &&
+      lastMessageRole === 'user'
+    ) {
+      scrollToBottom();
+    }
+    previousLastMessageId.current = lastMessageId;
+  }, [lastMessageId, lastMessageRole, scrollToBottom]);
+
   useEffect(() => {
     const hasExistingNonGenuineWarning = chat.messages.some(
       (message) => message.id === 'non-genuine-warning'
@@ -240,17 +264,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(
@@ -351,6 +376,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
           <div
             data-testid="assistant-chat-messages"
             className={messageFeedFixesStyles}
+            ref={messagesContainerRef}
           >
             <div className={messagesWrapStyles}>
               {messages.map((message, index) => {
@@ -450,7 +476,9 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
           <div className={inputBarStyleFixes}>
             <InputBar
               data-testid="assistant-chat-input"
-              onMessageSend={handleMessageSend}
+              onMessageSend={(messageBody) =>
+                void handleMessageSend(messageBody)
+              }
               state={status === 'submitted' ? 'loading' : undefined}
               textareaProps={{
                 placeholder: 'Ask a question',