fix scroll bottom button flickering (#639)

frontend/src/components/atoms/buttons/scrollDownButton.tsx

@@ -0,0 +1,26 @@
+import ExpandCircleDown from '@mui/icons-material/ExpandCircleDown';
+import IconButton from '@mui/material/IconButton';
+
+interface Props {
+  onClick?: () => void;
+}
+
+export default function ScrollDownButton({ onClick }: Props) {
+  return (
+    <IconButton
+      sx={{
+        width: 'fit-content',
+        margin: 'auto',
+        position: 'absolute',
+        zIndex: 1,
+        transform: 'translateY(-100%)',
+        top: 0,
+        left: 0,
+        right: 0
+      }}
+      onClick={onClick}
+    >
+      <ExpandCircleDown fontSize="large" />
+    </IconButton>
+  );
+}

frontend/src/components/organisms/chat/index.tsx

@@ -171,6 +171,7 @@ const Chat = () => {
             fileSpec={fileSpec}
             onFileUpload={onFileUpload}
             onFileUploadError={onFileUploadError}
+            autoScroll={autoScroll}
             setAutoScroll={setAutoScroll}
             projectSettings={projectSettings}
           />

frontend/src/components/organisms/chat/inputBox/index.tsx

@@ -7,6 +7,8 @@ import { Box } from '@mui/material';
 
 import { FileSpec, IStep, useChatInteract } from '@chainlit/react-client';
 
+import ScrollDownButton from 'components/atoms/buttons/scrollDownButton';
+
 import { IAttachment } from 'state/chat';
 import { IProjectSettings } from 'state/project';
 import { inputHistoryState } from 'state/userInputHistory';
@@ -19,6 +21,7 @@ interface Props {
   onFileUpload: (payload: File[]) => void;
   onFileUploadError: (error: string) => void;
   setAutoScroll: (autoScroll: boolean) => void;
+  autoScroll?: boolean;
   projectSettings?: IProjectSettings;
 }
 
@@ -28,6 +31,7 @@ const InputBox = memo(
     onFileUpload,
     onFileUploadError,
     setAutoScroll,
+    autoScroll,
     projectSettings
   }: Props) => {
     const setInputHistory = useSetRecoilState(inputHistoryState);
@@ -94,6 +98,7 @@ const InputBox = memo(
     return (
       <Box
         display="flex"
+        position="relative"
         flexDirection="column"
         gap={1}
         p={2}
@@ -105,6 +110,9 @@ const InputBox = memo(
           justifyContent: 'center'
         }}
       >
+        {!autoScroll ? (
+          <ScrollDownButton onClick={() => setAutoScroll(true)} />
+        ) : null}
         <Box>
           <Input
             fileSpec={fileSpec}

libs/react-components/src/messages/MessageContainer.tsx

@@ -1,9 +1,7 @@
 import { MessageContext, defaultMessageContext } from 'contexts/MessageContext';
 import { memo, useEffect, useRef } from 'react';
 
-import ExpandCircleDown from '@mui/icons-material/ExpandCircleDown';
 import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
 
 import type { IAction, IMessageElement, IStep } from 'client-types/';
 import { IMessageContext } from 'src/types/messageContext';
@@ -64,19 +62,6 @@ const MessageContainer = memo(
             elements={elements}
             actions={actions}
           />
-          {!autoScroll ? (
-            <IconButton
-              sx={{
-                width: 'fit-content',
-                margin: 'auto',
-                position: 'sticky',
-                bottom: 0
-              }}
-              onClick={() => setAutoScroll && setAutoScroll(true)}
-            >
-              <ExpandCircleDown fontSize="large" />
-            </IconButton>
-          ) : null}
         </Box>
       </MessageContext.Provider>
     );