diff --git a/src/pages/dashboard/Content/Support/Chat.tsx b/src/pages/dashboard/Content/Support/Chat.tsx index c774c4b..5a09cea 100644 --- a/src/pages/dashboard/Content/Support/Chat.tsx +++ b/src/pages/dashboard/Content/Support/Chat.tsx @@ -1,5 +1,5 @@ import { Box, IconButton, InputAdornment, TextField, useTheme } from "@mui/material"; -import { addMessages, setMessages, useMessageStore } from "@root/stores/messages"; +import { addOrUpdateMessage, setMessages, useMessageStore } from "@root/stores/messages"; import Message from "./Message"; import SendIcon from "@mui/icons-material/Send"; import AttachFileIcon from "@mui/icons-material/AttachFile"; @@ -66,7 +66,7 @@ export default function Chat() { try { const newMessage = JSON.parse(event.data) as TicketMessage; - addMessages([newMessage]); + addOrUpdateMessage(newMessage); } catch (error) { console.log("Error parsing message SSE", error); } diff --git a/src/stores/messages.ts b/src/stores/messages.ts index 75ef7d0..cb2fcce 100644 --- a/src/stores/messages.ts +++ b/src/stores/messages.ts @@ -20,4 +20,15 @@ export const useMessageStore = create()( ); export const setMessages = (messages: TicketMessage[]) => useMessageStore.setState(({ messages })); -export const addMessages = (messages: TicketMessage[]) => useMessageStore.setState(state => ({ messages: [...state.messages, ...messages] })); \ No newline at end of file + +export const addOrUpdateMessage = (newMessage: TicketMessage) => { + const state = useMessageStore.getState(); + const ticketIndex = state.messages.findIndex(message => message.id === newMessage.id); + + if (ticketIndex === -1) { + return useMessageStore.setState({ messages: [...state.messages, newMessage] }); + } + + const newMessages = state.messages.slice().splice(ticketIndex, 1, newMessage); + useMessageStore.setState({ messages: newMessages }); +}; \ No newline at end of file