67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
import { Badge, Box, Container } from "@chakra-ui/react";
|
|
import { useEffect, useState } from "react";
|
|
import { useAppContext } from "../context/appContext";
|
|
import Messages from "./Messages";
|
|
import { BsChevronDoubleDown } from "react-icons/bs";
|
|
|
|
export default function Chat() {
|
|
const [height, setHeight] = useState(window.innerHeight - 205);
|
|
const {
|
|
scrollRef,
|
|
onScroll,
|
|
scrollToBottom,
|
|
isOnBottom,
|
|
unviewedMessageCount,
|
|
} = useAppContext();
|
|
useEffect(() => {
|
|
window.addEventListener("resize", () => {
|
|
setHeight(window.innerHeight - 205);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<Container maxW="600px" pb="20px">
|
|
<Box
|
|
bg="white"
|
|
p="5"
|
|
overflow="auto"
|
|
borderRadius="10px"
|
|
height={height}
|
|
onScroll={onScroll}
|
|
ref={scrollRef}
|
|
>
|
|
<Messages />
|
|
{!isOnBottom && (
|
|
<div
|
|
style={{
|
|
position: "sticky",
|
|
bottom: 8,
|
|
// right: 0,
|
|
float: "right",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={scrollToBottom}
|
|
>
|
|
{unviewedMessageCount > 0 ? (
|
|
<Badge
|
|
ml="1"
|
|
fontSize="0.8em"
|
|
colorScheme="green"
|
|
display="flex"
|
|
borderRadius="7px"
|
|
padding="3px 5px"
|
|
alignItems="center"
|
|
>
|
|
{unviewedMessageCount}
|
|
<BsChevronDoubleDown style={{ marginLeft: "3px" }} />
|
|
</Badge>
|
|
) : (
|
|
<BsChevronDoubleDown style={{ marginLeft: "3px" }} />
|
|
)}
|
|
</div>
|
|
)}
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|