import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material"; import { addOrUpdateMessages, clearMessages, setMessages, useMessageStore } from "@root/stores/messages"; import Message from "./Message"; import SendIcon from "@mui/icons-material/Send"; import AttachFileIcon from "@mui/icons-material/AttachFile"; import { KeyboardEvent, useEffect, useRef, useState } from "react"; import { useParams } from "react-router-dom"; import { GetMessagesRequest, TicketMessage } from "@root/model/ticket"; import { getTicketMessages, sendTicketMessage, subscribeToTicketMessages } from "@root/api/tickets"; import { enqueueSnackbar } from "notistack"; import { useTicketStore } from "@root/stores/tickets"; export default function Chat() { const theme = useTheme(); const upMd = useMediaQuery(theme.breakpoints.up("md")); const tickets = useTicketStore(state => state.tickets); const messages = useMessageStore(state => state.messages); const [messageField, setMessageField] = useState(""); const ticketId = useParams().ticketId; const chatBoxRef = useRef(null); const ticket = tickets.find(ticket => ticket.id === ticketId); useEffect(function scrollOnNewMessage() { scrollToBottom(); }, [messages]); useEffect(function fetchTicketMessages() { if (!ticketId) return; const getTicketsBody: GetMessagesRequest = { amt: 100, // TODO use pagination page: 0, ticket: ticketId, }; const controller = new AbortController(); getTicketMessages({ body: getTicketsBody, signal: controller.signal, }).then(result => { console.log("GetMessagesResponse", result); setMessages(result); }).catch(error => { console.log("Error fetching tickets", error); enqueueSnackbar(error.message); }); return () => { controller.abort(); clearMessages(); }; }, [ticketId]); useEffect(function subscribeToMessages() { if (!ticketId) return; const token = localStorage.getItem("AT"); if (!token) return; const unsubscribe = subscribeToTicketMessages({ ticketId, accessToken: token, onMessage(event) { try { const newMessage = JSON.parse(event.data) as TicketMessage; console.log("SSE: parsed newMessage:", newMessage); addOrUpdateMessages([newMessage]); } catch (error) { console.log("SSE: couldn't parse:", event.data); console.log("Error parsing message SSE", error); } }, onError(event) { console.log("SSE Error:", event); }, }); return () => { unsubscribe(); }; }, [ticketId]); function scrollToBottom() { if (!chatBoxRef.current) return; chatBoxRef.current.scroll({ left: 0, top: chatBoxRef.current.scrollHeight, behavior: "smooth", }); } function handleSendMessage() { if (!ticket || !messageField) return; sendTicketMessage({ body: { files: [], lang: "ru", message: messageField, ticket: ticket.id, } }); setMessageField(""); } function handleAddAttachment() { } function handleTextfieldKeyPress(e: KeyboardEvent) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } } const sortedMessages = messages.sort(sortMessagesByTime); return ( {ticket ? <> {ticket.title} {sortedMessages.map(message => )} setMessageField(e.target.value)} onKeyPress={handleTextfieldKeyPress} id="message-input" placeholder="Написать сообщение" fullWidth multiline maxRows={8} InputProps={{ style: { backgroundColor: theme.palette.content.main, color: theme.palette.secondary.main, }, endAdornment: ( ) }} InputLabelProps={{ style: { color: theme.palette.secondary.main, } }} /> : Выберите тикет} ); } function sortMessagesByTime(message1: TicketMessage, message2: TicketMessage) { const date1 = new Date(message1.created_at).getTime(); const date2 = new Date(message2.created_at).getTime(); return date1 - date2; }