From 892532dfa25813b0bbffddfc8e2393dd031efa0f Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Fri, 30 Sep 2022 13:16:35 +0200
Subject: [PATCH] moved scroll to bottom btn to own comp

---
 .../chat/ChatContainer/ScrollToBotBtn.tsx     | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 web/components/chat/ChatContainer/ScrollToBotBtn.tsx

diff --git a/web/components/chat/ChatContainer/ScrollToBotBtn.tsx b/web/components/chat/ChatContainer/ScrollToBotBtn.tsx
new file mode 100644
index 000000000..ea72b7d5a
--- /dev/null
+++ b/web/components/chat/ChatContainer/ScrollToBotBtn.tsx
@@ -0,0 +1,28 @@
+import { VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { FC, MutableRefObject } from 'react';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import styles from './ChatContainer.module.scss';
+
+type Props = {
+  chatContainerRef: MutableRefObject<any>;
+  messages: ChatMessage[];
+};
+
+export const ScrollToBotBtn: FC<Props> = ({ chatContainerRef, messages }) => (
+  <div className={styles.toBottomWrap}>
+    <Button
+      type="default"
+      style={{ color: 'currentColor' }}
+      icon={<VerticalAlignBottomOutlined />}
+      onClick={() =>
+        chatContainerRef.current.scrollToIndex({
+          index: messages.length - 1,
+          behavior: 'smooth',
+        })
+      }
+    >
+      Go to last message
+    </Button>
+  </div>
+);