From 87e4a73e0503a3d70f8d7bfe352160c68ef6c1be Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sun, 4 Oct 2020 14:47:46 -0300
Subject: [PATCH] improvement: better contact name exhibition on group messages

---
 frontend/src/components/Ticket/index.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js
index 77396d6..721aa43 100644
--- a/frontend/src/components/Ticket/index.js
+++ b/frontend/src/components/Ticket/index.js
@@ -17,7 +17,6 @@ import Paper from "@material-ui/core/Paper";
 
 import {
 	Avatar,
-	Button,
 	Card,
 	CardActions,
 	CardHeader,
@@ -163,6 +162,12 @@ const useStyles = makeStyles(theme => ({
 		"&:hover, &.Mui-focusVisible": { backgroundColor: "#dcf8c6" },
 	},
 
+	messageContactName: {
+		paddingLeft: 6,
+		color: "#6bcbef",
+		fontWeight: 500,
+	},
+
 	textContentItem: {
 		overflowWrap: "break-word",
 		padding: "3px 80px 6px 6px",
@@ -564,6 +569,11 @@ const Ticket = () => {
 							<div className={classes.messageLeft}>
 								{(message.mediaUrl || message.mediaType === "vcard") &&
 									checkMessageMedia(message)}
+								{ticket.isGroup && (
+									<span className={classes.messageContactName}>
+										{message.contact?.name}
+									</span>
+								)}
 								<div className={classes.textContentItem}>
 									{message.mediaType !== "vcard" && message.body}
 									<span className={classes.timestamp}>