Improve chat container bottom scrolling handling. Closes #2342

web/components/chat/ChatContainer/ScrollToBotBtn.tsx

@@ -1,7 +1,6 @@
 import { Button } from 'antd';
 import dynamic from 'next/dynamic';
-import { FC, MutableRefObject } from 'react';
-import { ChatMessage } from '../../../interfaces/chat-message.model';
+import { FC } from 'react';
 import styles from './ChatContainer.module.scss';
 
 // Lazy loaded components
@@ -12,23 +11,18 @@ const VerticalAlignBottomOutlined = dynamic(
     ssr: false,
   },
 );
+
 type Props = {
-  chatContainerRef: MutableRefObject<any>;
-  messages: ChatMessage[];
+  onClick: () => void;
 };
 
-export const ScrollToBotBtn: FC<Props> = ({ chatContainerRef, messages }) => (
+export const ScrollToBotBtn: FC<Props> = ({ onClick }) => (
   <div className={styles.toBottomWrap}>
     <Button
       type="default"
       style={{ color: 'currentColor' }}
       icon={<VerticalAlignBottomOutlined />}
-      onClick={() =>
-        chatContainerRef.current.scrollToIndex({
-          index: messages.length - 1,
-          behavior: 'auto',
-        })
-      }
+      onClick={onClick}
     >
       Go to last message
     </Button>