86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import Message from "./components/Message/Message.tsx";
|
|
import { useChatContext } from "../../pages/ClientsPage/contexts/ChatContext.tsx";
|
|
import { MessageSchema } from "../../client";
|
|
import { ReactNode, useCallback } from "react";
|
|
import ChatDate from "./components/ChatDate/ChatDate.tsx";
|
|
import MessageInput from "./components/MessageInput/MessageInput.tsx";
|
|
import { Virtuoso } from "react-virtuoso";
|
|
import { Stack } from "@mantine/core";
|
|
|
|
const Chat = () => {
|
|
const {
|
|
messages,
|
|
lastMessage,
|
|
firstItemIndex,
|
|
fetchMoreMessages,
|
|
} = useChatContext();
|
|
|
|
const onFollowOutputHandler = useCallback(
|
|
(atBottom: boolean) => {
|
|
if (atBottom || lastMessage?.crmSender) {
|
|
return "auto";
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
[lastMessage],
|
|
);
|
|
|
|
const itemContent = useCallback(
|
|
(index: number, sessionData: MessageSchema) => {
|
|
let dateComponent: ReactNode | null = null;
|
|
const msgArrayIdx = index - firstItemIndex;
|
|
const currMessage = messages[msgArrayIdx];
|
|
let prevMessage = null;
|
|
if (msgArrayIdx > 0) {
|
|
prevMessage = messages[msgArrayIdx - 1];
|
|
}
|
|
if (!prevMessage || prevMessage.createdAt.substring(5, 10) != currMessage.createdAt.substring(5, 10)) {
|
|
dateComponent = (
|
|
<ChatDate
|
|
key={currMessage.id + "date"}
|
|
date={new Date(currMessage.createdAt)}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<Stack mb={"xs"} mr={"xs"}>
|
|
{dateComponent}
|
|
<Message
|
|
key={`${sessionData.id}${index}`}
|
|
message={sessionData}
|
|
/>
|
|
</Stack>
|
|
);
|
|
},
|
|
[messages],
|
|
);
|
|
|
|
if (messages.length === 0) {
|
|
return (
|
|
<Stack h={"96vh"} justify={"flex-end"}>
|
|
<MessageInput />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack h={"96vh"}>
|
|
<Virtuoso
|
|
data={messages}
|
|
followOutput={onFollowOutputHandler}
|
|
firstItemIndex={firstItemIndex}
|
|
initialTopMostItemIndex={messages.length - 1}
|
|
itemContent={itemContent}
|
|
startReached={fetchMoreMessages}
|
|
height={"100%"}
|
|
increaseViewportBy={100}
|
|
alignToBottom
|
|
/>
|
|
<MessageInput />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Chat;
|