Antes de alterar o CSS do chatbox

frontend/src/pages/Chat/Chat.js

@@ -42,14 +42,15 @@ const Chat = ({ showToast }) => {
 		socket.emit("joinNotification");
 
 		socket.on("contact", data => {
-			console.log(data);
+			console.log("mensagem de um novo contato");
 			if (data.action === "create") {
 				addContact(data.contact);
+				setNotification(prevState => !prevState);
 			}
 		});
 
 		socket.on("appMessage", data => {
-			console.log("recebendo msg");
+			console.log("mensagem de contato existente");
 			setNotification(prevState => !prevState);
 			// handleUnreadMessages(data.message.contactId);
 		});
@@ -57,7 +58,7 @@ const Chat = ({ showToast }) => {
 		return () => {
 			socket.disconnect();
 		};
-	}, [contacts]);
+	}, []);
 
 	// const handleUnreadMessages = contactId => {
 	// 	console.log("Atualizando mensagens n lidas");

frontend/src/pages/ChatBox/ChatBox.css

@@ -332,6 +332,10 @@ input::placeholder {
 	overflow-wrap: break-word;
 }
 
+.messageAck {
+	font-size: 10px;
+}
+
 .viewListContentChat div:last-child {
 	margin-bottom: 10px;
 }

frontend/src/pages/ChatBox/ChatBox.js

@@ -138,6 +138,8 @@ const ChatBox = ({ currentPeerContact }) => {
 		setShowEmoji(false);
 	};
 
+	console.log(listMessages);
+
 	const renderMessages = () => {
 		if (listMessages.length > 0) {
 			let viewListMessages = [];
@@ -227,6 +229,7 @@ const ChatBox = ({ currentPeerContact }) => {
 						viewListMessages.push(
 							<div className="viewItemRight" key={message.id}>
 								<span className="textContentItem ">{message.messageBody}</span>
+								<span className="messageAck">{message.ack}</span>
 							</div>
 						);
 					}