40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import { Avatar, Flex, Text } from "@chakra-ui/react";
|
|
|
|
const Messages = ({ messages, character }) => {
|
|
const AlwaysScrollToBottom = () => {
|
|
const elementRef = useRef();
|
|
useEffect(() => elementRef.current.scrollIntoView());
|
|
return <div ref={elementRef} />;
|
|
};
|
|
|
|
return ( // To make the messages start at the bottom, use flex-direction, not flex-end
|
|
<Flex width="100%" height="100%" overflowY="scroll" flexDirection="column-reverse" p="3">
|
|
<AlwaysScrollToBottom />
|
|
{messages.map((item, index) => {
|
|
const senderName = item.sender === "CHARACTER" ? character.name : "Anon";
|
|
const senderImage = item.sender === "CHARACTER" ? character.image : "";
|
|
return (
|
|
<Flex key={index} width="100%" mb="4" mt="4">
|
|
<Avatar
|
|
name={senderName}
|
|
src={senderImage}
|
|
/>
|
|
<Flex
|
|
minWidth="100px"
|
|
maxWidth="100%"
|
|
ml="3"
|
|
flexDirection="column"
|
|
>
|
|
<Text fontWeight="bold">{senderName}</Text>
|
|
<Text>{item.text}</Text>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
})}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Messages;
|