owncast/web/components/chat/ChatContainer/ScrollToBotBtn.tsx
2022-09-30 13:16:35 +02:00

28 lines
803 B
TypeScript

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>
);