57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { ScrollArea, Stack } from "@mantine/core";
|
|
import Message from "./components/Message/Message.tsx";
|
|
import MessageInput from "./components/MessageInput/MessageInput.tsx";
|
|
import { useChatContext } from "../../pages/ClientsPage/contexts/ChatContext.tsx";
|
|
import { MessageSchema } from "../../client";
|
|
import { ReactNode } from "react";
|
|
import ChatDate from "./components/ChatDate/ChatDate.tsx";
|
|
|
|
const Chat = () => {
|
|
const {
|
|
messages,
|
|
scrollRef,
|
|
onScrollPositionChange,
|
|
} = useChatContext();
|
|
|
|
const getChatElements = (): ReactNode[] => {
|
|
const elements: ReactNode[] = [];
|
|
let prevMessage: MessageSchema | null = null;
|
|
|
|
for (let i = messages.length - 1; i >= 0; i--) {
|
|
const currMessage = messages[i];
|
|
|
|
if (!prevMessage || prevMessage.createdAt.substring(5, 10) != currMessage.createdAt.substring(5, 10)) {
|
|
elements.push((
|
|
<ChatDate
|
|
key={currMessage.id + "date"}
|
|
date={new Date(currMessage.createdAt)}
|
|
/>
|
|
));
|
|
}
|
|
elements.push(
|
|
<Message key={currMessage.id + "msg"} message={currMessage} />
|
|
);
|
|
prevMessage = currMessage;
|
|
}
|
|
|
|
return elements;
|
|
};
|
|
|
|
return (
|
|
<Stack h={"96vh"}>
|
|
<ScrollArea
|
|
h={"100%"}
|
|
viewportRef={scrollRef}
|
|
onScrollPositionChange={onScrollPositionChange}
|
|
>
|
|
<Stack pr={"md"} gap={"sm"}>
|
|
{getChatElements()}
|
|
</Stack>
|
|
</ScrollArea>
|
|
<MessageInput />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Chat;
|