add chat
This commit is contained in:
nflnkr
parent
45ec218cde
commit
a539855131
@ -1,16 +1,190 @@
|
||||
import { Box, useTheme } from "@mui/material";
|
||||
import { Box, IconButton, InputAdornment, TextField, useTheme } from "@mui/material";
|
||||
import { addMessages, 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";
|
||||
|
||||
|
||||
export default function Chat() {
|
||||
const theme = useTheme()
|
||||
|
||||
const theme = useTheme();
|
||||
const messages = useMessageStore(state => state.messages);
|
||||
const [messageField, setMessageField] = useState<string>("");
|
||||
const ticketId = useParams().ticketId;
|
||||
const chatBoxRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(function scrollOnNewMessage() {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
useEffect(function fetchTicketMessages() {
|
||||
if (!ticketId) return;
|
||||
|
||||
const getTicketsBody: GetMessagesRequest = {
|
||||
amt: 10,
|
||||
page: 0,
|
||||
srch: "",
|
||||
ticket: ticketId,
|
||||
};
|
||||
const controller = new AbortController();
|
||||
|
||||
getTicketMessages({
|
||||
body: getTicketsBody,
|
||||
signal: controller.signal,
|
||||
}).then(result => {
|
||||
console.log("GetTicketsResponse", result);
|
||||
setMessages(result);
|
||||
}).catch(error => {
|
||||
console.log("Error fetching tickets", error);
|
||||
enqueueSnackbar(error.message);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
}, [ticketId]);
|
||||
|
||||
useEffect(function subscribeToMessages() {
|
||||
if (!ticketId) return;
|
||||
|
||||
const token = localStorage.getItem("AT");
|
||||
if (!token) return;
|
||||
|
||||
const unsubscribe = subscribeToTicketMessages({
|
||||
ticketId,
|
||||
accessToken: token,
|
||||
onMessage(event) {
|
||||
console.log("SSE: message received:", event.data);
|
||||
if (event.data === "no tickets 4 user") return;
|
||||
|
||||
try {
|
||||
const newMessage = JSON.parse(event.data) as TicketMessage;
|
||||
addMessages([newMessage]);
|
||||
} catch (error) {
|
||||
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 (!ticketId) return;
|
||||
|
||||
sendTicketMessage({
|
||||
body: {
|
||||
files: [],
|
||||
lang: "ru",
|
||||
message: messageField,
|
||||
ticket: ticketId,
|
||||
}
|
||||
});
|
||||
setMessageField("");
|
||||
}
|
||||
|
||||
function handleAddAttachment() {
|
||||
|
||||
}
|
||||
|
||||
function handleTextfieldKeyPress(e: KeyboardEvent) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.grayDark.main,
|
||||
width: "53%",
|
||||
height: "100%",
|
||||
borderRadius: "3px"
|
||||
}}></Box>
|
||||
)
|
||||
borderRadius: "3px",
|
||||
p: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
}}>
|
||||
<Box
|
||||
ref={chatBoxRef}
|
||||
sx={{
|
||||
backgroundColor: "#46474a",
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
p: "8px",
|
||||
overflow: "auto",
|
||||
colorScheme: "dark",
|
||||
}}
|
||||
>
|
||||
{messages.map((message, index) =>
|
||||
<Message key={message.id} message={message} isSelf={Boolean(index % 2)} />
|
||||
)}
|
||||
</Box>
|
||||
<TextField
|
||||
value={messageField}
|
||||
onChange={e => 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: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={handleSendMessage}
|
||||
sx={{
|
||||
height: "45px",
|
||||
width: "45px",
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<SendIcon sx={{ color: theme.palette.golden.main }} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleAddAttachment}
|
||||
sx={{
|
||||
height: "45px",
|
||||
width: "45px",
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<AttachFileIcon sx={{ color: theme.palette.golden.main }} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
45
src/pages/dashboard/Content/Support/Message.tsx
Normal file
45
src/pages/dashboard/Content/Support/Message.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { TicketMessage } from "@root/model/ticket";
|
||||
|
||||
|
||||
interface Props {
|
||||
message: TicketMessage;
|
||||
isSelf?: boolean;
|
||||
}
|
||||
|
||||
export default function Message({ message, isSelf }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
const time = (
|
||||
<Typography sx={{
|
||||
fontSize: "12px",
|
||||
alignSelf: "end",
|
||||
}}>
|
||||
{new Date(message.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
justifyContent: isSelf ? "end" : "start",
|
||||
gap: "6px",
|
||||
}}>
|
||||
{isSelf && time}
|
||||
<Box sx={{
|
||||
backgroundColor: "#2a2b2c",
|
||||
p: "12px",
|
||||
border: `1px solid ${theme.palette.golden.main}`,
|
||||
borderRadius: "20px",
|
||||
borderTopLeftRadius: isSelf ? "20px" : 0,
|
||||
borderTopRightRadius: isSelf ? 0 : "20px",
|
||||
maxWidth: "90%",
|
||||
}}>
|
||||
<Typography fontSize="14px">
|
||||
{message.message}
|
||||
</Typography>
|
||||
</Box>
|
||||
{!isSelf && time}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user