work on chat

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -16,10 +16,11 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
+import { prodAwsS3,timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -85,12 +86,19 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     padding:'10px 0px',
   },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
-  },  
+  },
   folderIcon: {
     color: '#54b0fc',
     cursor: 'pointer',
@@ -170,15 +178,45 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
-  }
+  },
+  avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 10,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftAudio {
   url: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -196,7 +234,7 @@ interface IMessageLeftAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftAudio = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -244,8 +282,18 @@ const MessageLeftAudio = ({ url,name,lastName,createdAt,fullType,caption,emoji,e
             className={classes.folderIcon} fontSize='large' />
           <ReactAudioPlayer className={classes.player} src={url} controls />
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftFile/index.tsx

@@ -17,9 +17,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -90,12 +91,19 @@ const useStyles = makeStyles({
       backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
-  }, 
+  },
   overlay: {
     position: 'absolute',
     top: 0,
@@ -209,7 +217,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -219,13 +227,43 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftFile {
   url: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -243,7 +281,7 @@ interface IMessageLeftFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -334,8 +372,18 @@ const MessageLeftFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiC
           <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
           {!read &&<ListItemText primary='Press to read the File'/>} 
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftForward/index.tsx

@@ -18,9 +18,10 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload } from '../../../../../../helpers'
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -100,12 +101,19 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     marginLeft:20,
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
-  },      
+  },
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -174,7 +182,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -192,13 +200,43 @@ const useStyles = makeStyles({
     top:'10%',
     height:'80%',
     backgroundColor: '#26afee',
-  },    
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftForward {
   url: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   message: string,
   name: string,
   lastName: string,
@@ -220,7 +258,7 @@ interface IMessageLeftForward {
   fullType: string
 }
 
-const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageLeftForward) => {
+const MessageLeftForward = ({url,tongue,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageLeftForward) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -286,16 +324,23 @@ const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastNa
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }}
-              secondary={caption} secondaryTypographyProps={{color: "#7a7a7a"}}/>
-            {/* <ListItemText primary={caption} primaryTypographyProps={{color: "#7a7a7a"}}/> */}
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={caption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
-        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }}
-          secondary={caption} secondaryTypographyProps={{color: "#7a7a7a"}}/>
-        {/* <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText primary={caption} primaryTypographyProps={{color: "#7a7a7a"}}/> */}
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftImage/index.tsx

@@ -15,14 +15,14 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Avatar from '@mui/material/Avatar';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -85,11 +85,18 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
   },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
   },  
   image: {
     borderRadius: 7,
@@ -257,7 +264,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -267,15 +274,44 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },    
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessagesLeftImage {
-  url:string,
-  createdAt:string,
+  url: string,
+  tongue: boolean,
+  avatarUrl: string,
   color: string,
+  createdAt:string,
   fullType: string,
   caption: string,
   emoji: string,
@@ -292,7 +328,7 @@ interface IMessagesLeftImage {
   handleForward: (_id: string) => void,
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -385,7 +421,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
     </div>  :
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
+       style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
@@ -396,8 +432,18 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftReply/index.tsx

@@ -18,9 +18,10 @@ import FolderIcon from '@mui/icons-material/Folder';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload } from '../../../../../../helpers'
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -100,11 +101,18 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     marginLeft:20,
   },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
   },  
   copyIcon: {
     color: '#b56ff7',
@@ -196,7 +204,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   column: {
@@ -207,13 +215,43 @@ const useStyles = makeStyles({
     top:'10%',
     height:'80%',
     backgroundColor: '#26afee',
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftReply {
-  url:string,
+  url: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   replyMessage: string,
   message: string,
   name: string,
@@ -238,7 +276,7 @@ interface IMessageLeftReply {
   oldId: string
 }
 
-const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
+const MessageLeftReply = ({url,tongue,avatarUrl,color,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -304,13 +342,23 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#000000" }} />
-            <ListItemText primary={replyCaption} primaryTypographyProps={{color: "#000000"}}/>
+            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={replyCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>        
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -14,9 +14,10 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -89,12 +90,19 @@ const useStyles = makeStyles({
     alignContent: 'start',
     flexDirection: 'column',
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
-  },      
+  },     
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -163,7 +171,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -173,13 +181,43 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },   
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftText {
-  message:string,
+  message: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   name:string,
   lastName:string,
   createdAt: string,
@@ -196,7 +234,7 @@ interface IMessageLeftText {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftText) => {
+const MessageLeftText = ({message,tongue,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -245,10 +283,20 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
           </CopyToClipboard>
           <div className={classes.wrapperInnerMessage}>
             <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftVideo/index.tsx

@@ -15,9 +15,10 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
+import { prodAwsS3,timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
 const StyledMenu = styled((props:any) => (
@@ -82,11 +83,18 @@ const useStyles = makeStyles({
     alignContent: 'center',
     width: '100%',
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-    marginLeft:'auto',
   },
   bntDownload: {
     backgroundColor: 'inherit',
@@ -173,7 +181,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     left: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -183,13 +191,43 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },    
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftVideo {
   url: string,
+  tongue: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -207,7 +245,7 @@ interface IMessageLeftVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -254,8 +292,18 @@ const MessageLeftVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,e
             className={classes.folderIcon} fontSize='large' />
           <Player className={selected?classes.playerActive:classes.player} playsInline  src={url}/>
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
+import Avatar from '@mui/material/Avatar';
 import AudioFileIcon from '@mui/icons-material/AudioFile';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
@@ -16,9 +17,10 @@ import MenuItem from '@mui/material/MenuItem';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -64,7 +66,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -84,11 +86,17 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     padding:'10px 0px',
   },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
   },
   folderIcon: {
     color: '#54b0fc',
@@ -169,15 +177,46 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
-  }
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightAudio {
   url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -195,7 +234,7 @@ interface IMessageRightAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightAudio = ({ url,name,lastName,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -242,8 +281,19 @@ const MessageRightAudio = ({ url,name,lastName,createdAt,fullType,caption,_id,em
             className={classes.folderIcon} fontSize='large' />
           <ReactAudioPlayer className={classes.player} src={url} controls />
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -17,9 +17,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload} from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload,prodAwsS3} from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -90,11 +92,17 @@ const useStyles = makeStyles({
       backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
   },
   overlay: {
     position: 'absolute',
@@ -209,7 +217,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -219,13 +227,44 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightFile {
   url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -243,7 +282,7 @@ interface IMessageRightFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightFile) => {
+const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -334,8 +373,19 @@ const MessageRightFile = ({ url,name,lastName,createdAt,type,caption,emoji,emoji
           <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
           {!read &&<ListItemText primary='Press to read the File'/>} 
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightForward/index.tsx

@@ -18,8 +18,10 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload } from '../../../../../../helpers'
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
@@ -100,12 +102,18 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     marginLeft:20,
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
-  }, 
+  },
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -174,7 +182,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -192,13 +200,44 @@ const useStyles = makeStyles({
     top:'10%',
     height:'80%',
     backgroundColor: '#00b333',
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightForward {
   url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   message: string,
   name: string,
   lastName: string,
@@ -220,7 +259,7 @@ interface IMessageRightForward {
   fullType: string
 }
 
-const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageRightForward) => {
+const MessageRightForward = ({url,tongue,watched,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageRightForward) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -285,13 +324,24 @@ const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastN
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={caption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -15,14 +15,15 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Avatar from '@mui/material/Avatar';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord,prodAwsS3 } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -85,12 +86,18 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
   },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
-  },  
+  }, 
   image: {
     borderRadius: 7,
     width: 348,
@@ -247,7 +254,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -257,15 +264,45 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },   
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightImage {
-  url:string,
-  createdAt:string,
+  url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
   color: string,
+  createdAt:string,
   fullType: string,
   caption: string,
   emoji: string,
@@ -282,7 +319,7 @@ interface IMessageRightImage {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessageRightImage) => {
+const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -386,8 +423,19 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightReply/index.tsx

@@ -18,8 +18,10 @@ import FolderIcon from '@mui/icons-material/Folder';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload } from '../../../../../../helpers'
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
@@ -100,12 +102,18 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     marginLeft:20,
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
-  },    
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -181,7 +189,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   column: {
@@ -193,12 +201,43 @@ const useStyles = makeStyles({
     height:'80%',
     backgroundColor: '#00b333',
   },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightReply {
-  url:string,
+  url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   replyMessage: string,
   message: string,
   name: string,
@@ -223,7 +262,7 @@ interface IMessageRightReply {
   oldId: string
 }
 
-const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
+const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -288,13 +327,24 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#000000" }} />
-            <ListItemText primary={replyCaption} primaryTypographyProps={{color: "#000000"}}/>
+            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={replyCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -14,8 +14,10 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr } from '../../../../../../helpers'
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 
 const StyledMenu = styled((props:any) => (
@@ -89,11 +91,17 @@ const useStyles = makeStyles({
     alignContent: 'start',
     flexDirection: 'column',
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
   },
   modalDelete: {
     background: '#ffffff',
@@ -163,7 +171,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -173,13 +181,44 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightText {
-  message:string,
+  message: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   name:string,
   lastName:string,
   createdAt: string,
@@ -196,7 +235,7 @@ interface IMessageRightText {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageRightText) => {
+const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -244,10 +283,21 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
           </CopyToClipboard>
           <div className={classes.wrapperInnerMessage}>
             <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightVideo/index.tsx

@@ -15,9 +15,11 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter,prodAwsS3 } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
 
@@ -84,11 +86,17 @@ const useStyles = makeStyles({
     alignContent: 'center',
     width: '100%',
   },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    zIndex: 2,
+    width:'100%',
+  },
   time: {
     fontSize: ".65em",
     fontWeight:600,
-    color: '#414141',
-    marginLeft:'auto',
   },
   player: {
     backgroundColor: '#deffa9',
@@ -164,7 +172,7 @@ const useStyles = makeStyles({
   checkboxSelect: {
     position: 'absolute',
     right: -64,
-    bottom: -10,
+    top: -10,
     pointerEvents: 'auto'
   },
   folderIcon: {
@@ -174,13 +182,44 @@ const useStyles = makeStyles({
     '&:hover': {
       color: '#016cc3'
     },
-  },  
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+  zIndex:1
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+  zIndex:1
+ },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightVideo {
   url: string,
+  tongue: boolean,
+  watched: boolean,
+  avatarUrl: string,
+  color: string,
   name: string,
   lastName: string,
   createdAt: string,
@@ -198,7 +237,7 @@ interface IMessageRightVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -245,8 +284,19 @@ const MessageRightVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,
             className={classes.folderIcon} fontSize='large' />
           <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
         </div>
-        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
-        <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
         {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -105,6 +105,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
   const [modalForward, setModalForward] = useState<boolean>(false)
   let time: any
+  let tongue: any
   const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
   const handleSelected = (_id: string) => {
     !isSomeSelected&&setIsSomeSelected(true)
@@ -123,8 +124,14 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     isReply&&setIsReply(undefined)
     setIsForward(renderArr.find((el) => el._id === _id))
     setModalForward(true)
-  }    
-
+  }
+  
+  const setTongueAndTime = (_id: string) => {
+    openPinned && dispatch(actionOpenPinned(false))
+    isReply&&setIsReply(undefined)
+    setIsForward(renderArr.find((el) => el._id === _id))
+    setModalForward(true)
+  }   
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
      top: chatDivRef.current.scrollHeight,
@@ -205,23 +212,52 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       <div id={companionId} ref={chatDivRef} onScroll={debouncedHandleScroll}
         className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
-        {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName, color,pinned,
-           createdAt,number, type,fullType,replyName,replyLastName,replyCaption,caption,emoji,emojiCompanion,_id,oldId,forwardName,forwardLastName,companionIdForwardToAndFrom}) => {
+        {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
+          createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom},i) => {
+          const watched = true
           let isTime
+          let isTongue = false
+          const nextTongue = renderArr[i + 1]
           if (!time) {
             isTime = true
             time = createdAt
           } else if (timeStampFilter(time) !== timeStampFilter(createdAt)) {
             time = createdAt
             isTime = true
+          }          
+          if (!tongue&&nextTongue&&nextTongue.number === number) {
+            isTongue = false
+            tongue = number
+          } else if (!tongue&&nextTongue&&nextTongue.number !== number) {
+            isTongue = true
+            tongue = null
+          } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number === number) {
+            isTongue = false
+            tongue = number
+          } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number !== number) {
+            isTongue = true
+            tongue = null
+          } else if (tongue&&!nextTongue&&tongue === number) {
+            isTongue = true
+            tongue = null
+          } else if (tongue&&!nextTongue&&tongue !== number) {
+            isTongue = false
+            tongue = number
+          }
+          if (nextTongue && timeStampFilter(nextTongue.createdAt) !== timeStampFilter(createdAt)) {
+            isTongue = true
           }
           const url = `${prodAwsS3}/${message}`
           const urlReply = `${prodAwsS3}/${replyMessage}`
           if (number !== userNumber) {
             if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
-               <MessageLeftText
+              <MessageLeftText
                message={message}
+               tongue={isTongue}
+               avatarUrl={avatarUrl}
+               color={color}
                createdAt={createdAt}
                name={name}
                lastName={lastName}
@@ -241,6 +277,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
                <MessageLeftReply
                 url={urlReply}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
+                color={color}
                 replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
@@ -268,6 +307,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
                <MessageLeftForward
                 url={url}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
                 lastName={lastName}
                 forwardName={forwardName}
@@ -292,8 +334,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftImage   
                 url={url}
-                createdAt={createdAt}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
                 color={color}
+                createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
                 emoji={emoji}
@@ -313,6 +357,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftAudio    
                 url={url}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
                 lastName={lastName}
                 createdAt={createdAt}
@@ -333,8 +380,11 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftVideo    
                 url={url}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
-                 lastName={lastName}
+                lastName={lastName}
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
@@ -353,6 +403,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftFile   
                 url={url}
+                tongue={isTongue}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
                 lastName={lastName}
                 createdAt={createdAt}
@@ -374,6 +427,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightText   
                 message={message}
+                tongue={isTongue}
+                watched={watched}
+                avatarUrl={avatarUrl}
+                color={color}
                 createdAt={createdAt}
                 name={name}
                 lastName={lastName}
@@ -393,6 +450,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
               <MessageRightReply
                 url={urlReply}
+                tongue={isTongue}
+                watched={watched}
+                avatarUrl={avatarUrl}
+                color={color}
                 replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
@@ -420,6 +481,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
               <MessageRightForward
                 url={url}
+                tongue={isTongue}
+                watched={watched}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
                 lastName={lastName}
                 forwardName={forwardName}
@@ -444,8 +509,11 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightImage   
                 url={url}
-                createdAt={createdAt}
+                tongue={isTongue}
+                watched={watched}
+                avatarUrl={avatarUrl}
                 color={color}
+                createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
                 emoji={emoji}
@@ -465,6 +533,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightAudio    
                 url={url}
+                tongue={isTongue}
+                watched={watched}
+                avatarUrl={avatarUrl}
+                color={color}
                 name={name}
                 lastName={lastName}
                 createdAt={createdAt}
@@ -485,6 +557,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                  <MessageRightVideo  
                  url={url}
+                 tongue={isTongue}
+                 watched={watched}
+                 avatarUrl={avatarUrl}
+                 color={color}
                  name={name}
                  lastName={lastName}
                  createdAt={createdAt}
@@ -505,6 +581,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                  <MessageRightFile  
                  url={url}
+                 tongue={isTongue}
+                 watched={watched}
+                 avatarUrl={avatarUrl}
+                 color={color}
                  name={name}
                  lastName={lastName}
                  createdAt={createdAt}

src/components/HomePage/CentralBar/HeaderBar/Credentials/index.tsx

@@ -18,7 +18,7 @@ const Credentials = () => {
         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
               sx={{ background: color, width: 44, height: 44 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
-          </Avatar>
+        </Avatar>
       </ListItemIcon> 
       <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}