Improve scrolling in chat and studio

client/src/components/Chat/ChatBody/Conversation.tsx

@@ -1,10 +1,10 @@
 import React, { Dispatch, SetStateAction, useContext } from 'react';
+import ScrollToBottom from 'react-scroll-to-bottom';
 import {
   ChatMessage,
   ChatMessageAuthor,
   ChatMessageServer,
 } from '../../../types/general';
-import useScrollToBottom from '../../../hooks/useScrollToBottom';
 import { AppNavigationContext } from '../../../context/appNavigationContext';
 import Message from './ConversationMessage';
 import FirstMessage from './FirstMessage';
@@ -30,16 +30,10 @@ const Conversation = ({
   onMessageEdit,
   setInputValue,
 }: Props) => {
-  const { messagesRef, handleScroll, scrollToBottom } =
-    useScrollToBottom(conversation);
   const { navigatedItem } = useContext(AppNavigationContext);
 
   return (
-    <div
-      className={`w-full flex flex-col gap-3 overflow-auto pb-28`}
-      ref={messagesRef}
-      onScroll={handleScroll}
-    >
+    <ScrollToBottom className="w-full flex flex-col gap-3 overflow-auto pb-28">
       {!isHistory && (
         <FirstMessage
           repoName={repoName}
@@ -78,7 +72,6 @@ const Conversation = ({
                 '00000000-0000-0000-0000-000000000000'
           }
           repoRef={repoRef}
-          scrollToBottom={scrollToBottom}
           repoName={repoName}
           onMessageEdit={onMessageEdit}
           responseTimestamp={
@@ -91,7 +84,7 @@ const Conversation = ({
           }
         />
       ))}
-    </div>
+    </ScrollToBottom>
   );
 };
 

client/src/components/Chat/ChatBody/ConversationMessage/MessageFeedback.tsx

@@ -11,7 +11,6 @@ import DownvoteBtn from '../../FeedbackBtns/Downvote';
 type Props = {
   showInlineFeedback: boolean;
   isHistory?: boolean;
-  scrollToBottom?: () => void;
   threadId: string;
   queryId: string;
   repoRef: string;
@@ -21,7 +20,6 @@ type Props = {
 const MessageFeedback = ({
   showInlineFeedback,
   isHistory,
-  scrollToBottom,
   threadId,
   queryId,
   repoRef,
@@ -42,7 +40,6 @@ const MessageFeedback = ({
       if (!isUpvote) {
         setTimeout(() => {
           setShowCommentInput(true);
-          setTimeout(() => scrollToBottom?.(), 10);
         }, 500); // to play animation
       }
       if (isUpvote) {
@@ -54,7 +51,6 @@ const MessageFeedback = ({
 
   const handleSubmit = useCallback(() => {
     setIsSubmitted(true);
-    setTimeout(() => scrollToBottom?.(), 150);
     return upvoteAnswer(threadId, queryId, repoRef, {
       type: 'negative',
       feedback: comment,

client/src/components/Chat/ChatBody/ConversationMessage/index.tsx

@@ -42,7 +42,6 @@ type Props = {
   responseTimestamp: string | null;
   isHistory?: boolean;
   showInlineFeedback: boolean;
-  scrollToBottom?: () => void;
   isLoading?: boolean;
   loadingSteps?: ChatLoadingStep[];
   i: number;
@@ -59,7 +58,6 @@ const ConversationMessage = ({
   threadId,
   queryId,
   repoRef,
-  scrollToBottom,
   isLoading,
   loadingSteps,
   i,
@@ -220,7 +218,6 @@ const ConversationMessage = ({
             queryId={queryId}
             repoRef={repoRef}
             error={!!error}
-            scrollToBottom={scrollToBottom}
           />
         </>
       ) : error ? (

client/src/pages/StudioTab/RightPanel/Conversation/Input.tsx

@@ -38,7 +38,6 @@ type Props = {
   onMessageChange: (m: string, i?: number) => void;
   onMessageRemoved?: (i: number, andSubsequent?: boolean) => void;
   i?: number;
-  scrollToBottom?: () => void;
   inputRef?: React.MutableRefObject<HTMLTextAreaElement | null>;
   setLeftPanel: Dispatch<SetStateAction<StudioLeftPanelDataType>>;
   isTokenLimitExceeded: boolean;
@@ -51,7 +50,6 @@ const ConversationInput = ({
   onMessageChange,
   i,
   onMessageRemoved,
-  scrollToBottom,
   inputRef,
   setLeftPanel,
   isLast,
@@ -83,7 +81,6 @@ const ConversationInput = ({
       // Trying to set this with state or a ref will product an incorrect value.
       ref.current.style.height =
         Math.min(Math.max(scrollHeight, 22), 300) + 'px';
-      setTimeout(() => scrollToBottom?.(), 10);
     }
   }, [message, isFocused]);
 

client/src/pages/StudioTab/RightPanel/Conversation/index.tsx

@@ -11,6 +11,7 @@ import React, {
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import throttle from 'lodash.throttle';
+import ScrollToBottom from 'react-scroll-to-bottom';
 import {
   DiffHunkType,
   StudioConversationMessage,
@@ -38,7 +39,6 @@ import {
 } from '../../../../services/api';
 import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
 import { DeviceContext } from '../../../../context/deviceContext';
-import useScrollToBottom from '../../../../hooks/useScrollToBottom';
 import { StudioContext } from '../../../../context/studioContext';
 import { PersonalQuotaContext } from '../../../../context/personalQuotaContext';
 import { UIContext } from '../../../../context/uiContext';
@@ -122,8 +122,6 @@ const Conversation = ({
 
   const [isLoading, setIsLoading] = useState(false);
   const { apiUrl } = useContext(DeviceContext);
-  const { messagesRef, handleScroll, scrollToBottom } =
-    useScrollToBottom(conversation);
 
   useEffect(() => {
     const mappedConv = mapConversation(messages);
@@ -496,11 +494,7 @@ const Conversation = ({
 
   return (
     <div className="px-7 flex flex-col overflow-auto h-full">
-      <div
-        className="fade-bottom overflow-auto"
-        ref={messagesRef}
-        onScroll={handleScroll}
-      >
+      <ScrollToBottom className="fade-bottom overflow-auto">
         <div className="flex flex-col gap-3 py-8 px-1">
           {conversation.map((m, i) => (
             <ConversationInput
@@ -561,15 +555,14 @@ const Conversation = ({
                 author={inputAuthor}
                 message={inputValue}
                 onMessageChange={onMessageChange}
-                scrollToBottom={scrollToBottom}
                 inputRef={inputRef}
                 setLeftPanel={setLeftPanel}
                 isTokenLimitExceeded={isTokenLimitExceeded}
                 isLast
               />
             )}
         </div>
-      </div>
+      </ScrollToBottom>
       <div className="px-1 flex flex-col gap-8 pb-8 mt-auto">
         <hr className="border-bg-border" />
         {isPreviewing ? (