[Agent Builder] Don't scroll to bottom of conversation if its the first round (#235827)

Author: chrisbmar

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation.tsx

@@ -8,6 +8,7 @@
 import { EuiButtonIcon, EuiResizableContainer, useEuiScrollBar, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useHasActiveConversation } from '../../hooks/use_conversation';
 import { ConversationInputForm } from './conversation_input/conversation_input_form';
 import { ConversationRounds } from './conversation_rounds/conversation_rounds';
@@ -18,6 +19,7 @@ import { useSendMessage } from '../../context/send_message_context';
 import { useConversationScrollActions } from '../../hooks/use_conversation_scroll_actions';
 import { useConversationStatus } from '../../hooks/use_conversation';
 import { ConversationContent } from './conversation_grid';
+import type { LocationState } from '../../hooks/use_navigation';
 
 const fullHeightStyles = css`
   height: 100%;
@@ -33,6 +35,9 @@ export const Conversation: React.FC<{}> = () => {
   const { euiTheme } = useEuiTheme();
   const { isResponseLoading } = useSendMessage();
   const { isFetched } = useConversationStatus();
+  const location = useLocation<LocationState>();
+
+  const shouldStickToBottom = location.state?.shouldStickToBottom ?? true;
 
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const {
@@ -48,14 +53,14 @@ export const Conversation: React.FC<{}> = () => {
 
   const scrollContainerHeight = scrollContainerRef.current?.clientHeight ?? 0;
 
-  // Stick to bottom only on initial conversation load or when {conversationId} is changed
+  // Stick to bottom only when user returns to an existing conversation (conversationId is defined and changes)
   useEffect(() => {
-    if (isFetched && conversationId) {
+    if (isFetched && conversationId && shouldStickToBottom) {
       requestAnimationFrame(() => {
         stickToBottom();
       });
     }
-  }, [stickToBottom, isFetched, conversationId]);
+  }, [stickToBottom, isFetched, conversationId, shouldStickToBottom]);
 
   const scrollContainerStyles = css`
     overflow-y: auto;

x-pack/platform/plugins/shared/onechat/public/application/hooks/use_conversation_actions.ts

@@ -57,7 +57,10 @@ export const useConversationActions = () => {
   const navigateToConversation = ({ nextConversationId }: { nextConversationId: string }) => {
     // Navigate to the new conversation if user is still on the "new" conversation page
     if (!conversationId && shouldAllowConversationRedirectRef.current) {
-      navigateToOnechatUrl(appPaths.chat.conversation({ conversationId: nextConversationId }));
+      const path = appPaths.chat.conversation({ conversationId: nextConversationId });
+      const params = undefined;
+      const state = { shouldStickToBottom: false };
+      navigateToOnechatUrl(path, params, state);
     }
   };
 

x-pack/platform/plugins/shared/onechat/public/application/hooks/use_navigation.ts

@@ -9,16 +9,21 @@ import { useCallback } from 'react';
 import { ONECHAT_APP_ID } from '../../../common/features';
 import { useKibana } from './use_kibana';
 
+export interface LocationState {
+  shouldStickToBottom?: boolean;
+}
+
 export const useNavigation = () => {
   const {
     services: { application },
   } = useKibana();
 
   const navigateToOnechatUrl = useCallback(
-    (path: string, params?: Record<string, string>) => {
+    (path: string, params?: Record<string, string>, state?: LocationState) => {
       const queryParams = new URLSearchParams(params);
       application.navigateToApp(ONECHAT_APP_ID, {
         path: queryParams.size ? `${path}?${queryParams}` : path,
+        state,
       });
     },
     [application]