make edit

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

@@ -216,6 +216,7 @@ interface IMessageLeftAudio {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -235,7 +236,7 @@ interface IMessageLeftAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,tongue,watched,edited,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);
@@ -285,7 +286,7 @@ const MessageLeftAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -263,6 +263,7 @@ interface IMessageLeftFile {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -282,7 +283,7 @@ interface IMessageLeftFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,tongue,watched,edited,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);
@@ -375,7 +376,7 @@ const MessageLeftFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,crea
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -237,6 +237,7 @@ interface IMessageLeftForward {
   oldId: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   message: string,
@@ -262,7 +263,7 @@ interface IMessageLeftForward {
   fullType: string
 }
 
-const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watched,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageLeftForward) => {
+const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watched,edited,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,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);
@@ -335,7 +336,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -310,6 +310,7 @@ interface IMessagesLeftImage {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   createdAt:string,
@@ -329,7 +330,7 @@ interface IMessagesLeftImage {
   handleForward: (_id: string) => void,
 }
 
-const MessagesLeftImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,tongue,watched,edited,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);
@@ -435,7 +436,7 @@ const MessagesLeftImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullTyp
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -250,6 +250,7 @@ interface IMessageLeftReply {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   replyMessage: string,
@@ -276,7 +277,7 @@ interface IMessageLeftReply {
   oldId: string
 }
 
-const MessageLeftReply = ({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}:IMessageLeftReply) => {
+const MessageLeftReply = ({url,tongue,watched,edited,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);
@@ -349,7 +350,7 @@ const MessageLeftReply = ({url,tongue,watched,avatarUrl,color,replyMessage,messa
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -216,6 +216,7 @@ interface IMessageLeftText {
   message: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name:string,
@@ -234,7 +235,7 @@ interface IMessageLeftText {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftText = ({message,tongue,watched,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftText) => {
+const MessageLeftText = ({message,tongue,watched,edited,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);
@@ -287,7 +288,7 @@ const MessageLeftText = ({message,tongue,watched,avatarUrl,color,name,lastName,c
           </div>
         </div>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -227,6 +227,7 @@ interface IMessageLeftVideo {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -246,7 +247,7 @@ interface IMessageLeftVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,tongue,watched,edited,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);
@@ -295,7 +296,7 @@ const MessageLeftVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

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

@@ -216,6 +216,7 @@ interface IMessageRightAudio {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -236,7 +237,7 @@ interface IMessageRightAudio {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward,handleEdit }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward,handleEdit }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -285,7 +286,7 @@ const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -264,6 +264,7 @@ interface IMessageRightFile {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -284,7 +285,7 @@ interface IMessageRightFile {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit }:IMessageRightFile) => {
+const MessageRightFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -377,7 +378,7 @@ const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -238,6 +238,7 @@ interface IMessageRightForward {
   companionIdForwardToAndFrom: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   message: string,
@@ -264,7 +265,7 @@ interface IMessageRightForward {
   fullType: string
 }
 
-const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watched,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,handleScrollToTheChat,fullType}:IMessageRightForward) => {
+const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watched,edited,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,handleScrollToTheChat,fullType}:IMessageRightForward) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -336,7 +337,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -301,6 +301,7 @@ interface IMessageRightImage {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   createdAt:string,
@@ -321,7 +322,7 @@ interface IMessageRightImage {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward,handleEdit}:IMessageRightImage) => {
+const MessageRightImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward,handleEdit}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -427,7 +428,7 @@ const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullTyp
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -236,6 +236,7 @@ interface IMessageRightReply {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   replyMessage: string,
@@ -263,7 +264,7 @@ interface IMessageRightReply {
   oldId: string
 }
 
-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,handleEdit,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
+const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -335,7 +336,7 @@ const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,mess
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -217,6 +217,7 @@ interface IMessageRightText {
   message: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name:string,
@@ -236,7 +237,7 @@ interface IMessageRightText {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit}:IMessageRightText) => {
+const MessageRightText = ({message,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -288,7 +289,7 @@ const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,
           </div>
         </div>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -220,6 +220,7 @@ interface IMessageRightVideo {
   url: string,
   tongue: boolean,
   watched: boolean,
+  edited: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -240,7 +241,7 @@ interface IMessageRightVideo {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -289,7 +290,7 @@ const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

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

@@ -31,7 +31,8 @@ const useStyles = makeStyles({
   },  
   editIconClose: {
     cursor: 'pointer',
-    marginLeft:5,
+    marginLeft: 5,
+    marginRight: 5,
     '&:hover': {
       color:'#f02a2a',
       transform: 'rotate(180deg)',
@@ -41,7 +42,7 @@ const useStyles = makeStyles({
   editColumn: {
     height: '80%',
     width: 2,
-    backgroundColor: '#00aeff',
+    backgroundColor: 'rgb(41, 139, 231)',
     marginRight:10
   }, 
 });
@@ -57,14 +58,14 @@ const EditBar = ({ isEdit, handleCloseEdit,handleScrollToTheMessage }: IEditBar)
   
   return (
     <div className={classes.editTop}>
-      <EditIcon style={{margin:'0px 7px',color: "#0694d6"}}/>
+      <EditIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
       <div className={classes.editColumn}></div>
         <ul className={classes.editListWrapper}>
           <li onClick={() => handleScrollToTheMessage(isEdit._id)}>
             <ListItemText
-              primary={`Edit ${isEdit.type === 'text'?'Message or Caption':'Caption'}`}
-              primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
-              secondary={isEdit.type === 'text'?`Message: ${isEdit.message} , Caption: ${isEdit.caption}`:`Caption: ${isEdit.caption}`}
+              primary={`Edit ${isEdit.type === 'text'?'Message and Caption':'only Caption'}`}
+              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
+              secondary={isEdit.type === 'text' ? `Message: ${isEdit.message} , Caption: ${isEdit.caption}`:`Caption: ${isEdit.caption}`}
               secondaryTypographyProps={{ fontSize: 16}} />
           </li>
       </ul>

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

@@ -1,16 +1,17 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { useDispatch } from "react-redux";
 import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 
 import { firstLetter,slicedWord } from "../../../../../../helpers";
 import { TMessage } from "../../../../../../typescript/redux/messages/types";
 import { asyncGetChatById } from '../../../../../../redux/chat/operations'
-import { actionRightIsOpen, actionScrollChat, actionOpenPinned } from '../../../../../../redux/control/action'
+import { actionRightIsOpen, actionOpenPinned } from '../../../../../../redux/control/action'
 
 const useStyles = makeStyles({   
-  replyTop : {
+  forwardTop : {
     position: 'absolute',
     left: 0,
     top: '-7vh',
@@ -24,25 +25,27 @@ const useStyles = makeStyles({
     color: '#6b6b6b',
     border:'solid 2px rgb(41, 139, 231)',
     backgroundColor: '#ffffff',
-    padding: 0,
+    padding: '0px 5px',
     zIndex:2,
   },
-  replyIconClose: {
+  forwardIconClose: {
     cursor: 'pointer',
-    margin:'0px 7px',
+    marginLeft: 5,
+    marginRight: 5,
     '&:hover': {
       color:'#f02a2a',
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
   },
-  replyListWrapper: {
+  forwardListWrapper: {
     width: '100%',
   },
-  replyColumn: {
+  forwardColumn: {
     height: '80%',
     width: 2,
-    backgroundColor: '#00aeff',
+    backgroundColor: 'rgb(41, 139, 231)',
+    marginRight:10
   }, 
 });
 
@@ -68,19 +71,20 @@ const ForwardBar = ({ companionId,isForward, handleCloseForward,handleScrollToTh
   }
   
   return (
-    <div className={classes.replyTop}>
-      <CloseIcon onClick={handleCloseForward} className={classes.replyIconClose} />
-      <div className={classes.replyColumn}></div>
-        <ul className={classes.replyListWrapper}>
+    <div className={classes.forwardTop}>
+      <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)",transform :'rotateY(180deg)'}} />
+      <div className={classes.forwardColumn}></div>
+        <ul className={classes.forwardListWrapper}>
           <MenuItem onClick={handleScrollHereOrBack}>
             <ListItemText
               primary={`${firstLetter(isForward.name)}${slicedWord(isForward.name, 15, 1)} 
               ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}
-              primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
               secondary={`Type : ${isForward.type.toUpperCase()}`}
               secondaryTypographyProps={{ fontSize:16 }}/>          
           </MenuItem>
         </ul>
+        <CloseIcon onClick={handleCloseForward} className={classes.forwardIconClose} />
     </div>
   )
 }

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

@@ -1,5 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles";
 import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 
@@ -21,12 +22,13 @@ const useStyles = makeStyles({
     color: '#6b6b6b',
     border:'solid 2px rgb(41, 139, 231)',
     backgroundColor: '#ffffff',
-    padding: 0,
+    padding: '0px 5px',
     zIndex:2,
   },
   replyIconClose: {
     cursor: 'pointer',
-    margin:'0px 7px',
+    marginLeft: 5,
+    marginRight: 5,
     '&:hover': {
       color:'#f02a2a',
       transform: 'rotate(180deg)',
@@ -39,7 +41,8 @@ const useStyles = makeStyles({
   replyColumn: {
     height: '80%',
     width: 2,
-    backgroundColor: '#00aeff',
+    backgroundColor: 'rgb(41, 139, 231)',
+    marginRight:10
   }, 
 });
 
@@ -54,18 +57,19 @@ const ReplyBar = ({ isReply, handleCloseReply,handleScrollToTheMessage }: IReply
   
   return (
     <div className={classes.replyTop}>
-      <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
+      <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
       <div className={classes.replyColumn}></div>
         <ul className={classes.replyListWrapper}>
           <MenuItem onClick={() => handleScrollToTheMessage(isReply._id)}>
             <ListItemText
               primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)} 
               ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
-              primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
               secondary={`Type : ${isReply.type.toUpperCase()}`}
               secondaryTypographyProps={{ fontSize:16 }}/>          
           </MenuItem>
         </ul>
+        <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
     </div>
   )
 }

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

@@ -11,7 +11,7 @@ import CommentIcon from '@mui/icons-material/Comment';
 import Avatar from '@mui/material/Avatar';
 import Webcam from "react-webcam";
 import CameraIcon from '@mui/icons-material/Camera';
-import TextField from '@mui/material/TextField';
+import TextField from '@material-ui/core/TextField';
 import Picker from 'emoji-picker-react';
 import InputAdornment from '@mui/material/InputAdornment';
 
@@ -114,7 +114,9 @@ const useStyles = makeStyles({
     visibility: 'visible',  
     width: '35vw',
     backgroundColor: '#ffffff',
-    borderRadius:4,
+    borderRadius: 4,
+    height: '6vh',
+    overflowY: 'auto',
   },
   iconCancel: {
         position: 'absolute',
@@ -337,15 +339,19 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
    }
 
     const sentMessage = async () => {
-        if (value && !isReply && !isForward) sentMessageById(companionId, value, caption.trim())
-        if (value && isReply && !isForward) {
+        if (value && !isReply && !isForward && !isEdit) sentMessageById(companionId, value, caption.trim())
+        if (value && isReply && !isForward && !isEdit) {
            sentMessageReplyById(isReply._id, value, caption.trim())
            setIsReply(undefined)
         }
-        if (value&&!isReply && isForward) {
+        if (value&&isForward && !isEdit && !isReply) {
            sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom,value,caption.trim())
            setIsForward(undefined)
-        }      
+        }    
+        if (value&&isEdit && !isForward && !isReply) {
+           //sent edited messages
+           setIsEdit(undefined)
+        }           
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
             audio.open('GET', mediaBlobUrl, true);
@@ -508,6 +514,13 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
     setIsReply(undefined)
     setIsEdit(undefined)
   }, [companionId, setIsReply,setIsEdit])
+
+  useEffect(() => {
+    if (isEdit) {
+      isEdit.type ==='text'&&setValue(isEdit.message?isEdit.message:'')
+      setCaption(isEdit.caption?isEdit.caption:'')
+    }
+  }, [isEdit, companionId])  
   
   useEffect(() => {
     const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
@@ -515,7 +528,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
   },[companionId])  
   
     return (
-        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
+        <div className={(isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
           {isArrow && <div className={classes.borderTop}></div>}
           {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
             handleScrollToTheMessage={handleScrollToTheMessage} />}
@@ -553,24 +566,24 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                 </div>
                 </>}            
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
-                    sx={{width: 56, height: 56, display: file || value || (status === 'stopped'&&type)
+                    sx={{width: 56, height: 56, display: file || (value&&!isReply&&!isForward&&!isEdit) || (status === 'stopped'&&type)
                     || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
-                    style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward? 'none' : 'block' }} />                           
+                    style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward || isEdit? 'none' : 'block' }} />                           
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
-                    style={{display: value || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>                
+                    style={{display: (isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
-                    style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward ? 'block' : 'none'}}/>
+                    style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward && !isEdit ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: file || status || _status ? 'none' : "auto",
+                    pointerEvents: file || status || _status || (isEdit&&isEdit.type !== 'text') ? 'none' : "auto",
                         '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
                 <CommentIcon onClick={handleOpenCaption} 
                     fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: value || file || status === 'stopped' || _status === 'stopped'? 'auto' : "none",
+                    pointerEvents: value || file || status === 'stopped' || _status === 'stopped' || (isEdit&&isEdit.type !== 'text')? 'auto' : "none",
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
@@ -581,21 +594,21 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                 <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                   style={{ display: isOpenCaption ? 'block' : 'none' }}>
                    {isOpenCaptionEmoji && <div className={classes.emoji}
-                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply || isForward?'23vh':'16vh' }}>
+                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply || isForward || isEdit?'23vh':'16vh' }}>
                       <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
                    </div>}          
-                   <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
-                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply || isForward?'78.5vh':'85vh' }}
+                   <TextField multiline className={classes.captionTextField} onChange={handleTextareaCaption}
+                    style={{left: rightIsOpen ? '32.5vw' : '45vw', top: isReply || isForward || isEdit?'78.5vh':'85vh' }}
                     placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
                     InputProps={{
-                      startAdornment: (<InputAdornment position="start">
+                      startAdornment: (<InputAdornment position="start" sx={{marginRight:4}}>
                         <SentimentSatisfiedAltIcon onClick={handleOpenCaptionEmoji}
                           sx={{color: isOpenCaptionEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                        '&:hover': { color: 'rgb(41, 139, 231)' }}} />
+                        '&:hover': { color: 'rgb(41, 139, 231)' },position:'fixed',top: isReply || isForward || isEdit?'80vh':'86.5vh'}} />
                     </InputAdornment>
                   ),}}/>
                 </div>
-                <textarea disabled={file || type === 'recording' || type === 'filming'? true : false} value={value} onBlur={handleBlurTextarea}
+                <textarea disabled={file || type === 'recording' || type === 'filming' || (isEdit&&isEdit.type !== 'text')? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
                     placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
                     `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
@@ -604,11 +617,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                 <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
                  sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',
                    pointerEvents: type === 'content' || type === 'application' || value || status !== null
-                   || _status !== null || isReply || isForward ? 'none' : "auto",
+                   || _status !== null || isReply || isForward || isEdit ? 'none' : "auto",
                   '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                   fontSize='medium' sx={{color: isOpenMenu || type === 'content' || type === 'application' ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply || isForward? 'none' : "auto", '&:hover':
+                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply || isForward || isEdit? 'none' : "auto", '&:hover':
                     { color: 'rgb(41, 139, 231)'}}}/>
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>

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

@@ -227,7 +227,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         <div className={classes.messagesBody}>
         {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,forwardMessage,forwardCaption},i) => {
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited},i) => {
           const watched = seenCompanion - (i + 1) < 0 ? false : true
           let isUnread 
           let isTime
@@ -286,6 +286,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                message={message}
                tongue={isTongue}
                watched={!unread}
+               edited={edited}
                avatarUrl={avatarUrl}
                color={color}
                createdAt={createdAt}
@@ -312,6 +313,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 oldId={oldId}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -343,6 +345,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={urlReply}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 replyMessage={replyMessage}
@@ -375,6 +378,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 createdAt={createdAt}
@@ -400,6 +404,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -425,6 +430,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -450,6 +456,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={!unread}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -476,6 +483,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 message={message}
                 tongue={isTongue}
                 watched={watched}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 createdAt={createdAt}
@@ -503,6 +511,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 companionIdForwardToAndFrom={companionIdForwardToAndFrom}
                 tongue={isTongue}
                 watched={watched}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -535,6 +544,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={urlReply}
                 tongue={isTongue}
                 watched={watched}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 replyMessage={replyMessage}
@@ -568,6 +578,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={watched}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 createdAt={createdAt}
@@ -594,6 +605,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 url={url}
                 tongue={isTongue}
                 watched={watched}
+                edited={edited}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -620,6 +632,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  url={url}
                  tongue={isTongue}
                  watched={watched}
+                 edited={edited}
                  avatarUrl={avatarUrl}
                  color={color}
                  name={name}
@@ -646,6 +659,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  url={url}
                  tongue={isTongue}
                  watched={watched}
+                 edited={edited}
                  avatarUrl={avatarUrl}
                  color={color}
                  name={name}

src/typescript/redux/allMessages/types.ts

@@ -23,6 +23,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  edited: boolean,
   idTime: string,
   oldId: string,
   owner: any,

src/typescript/redux/messages/types.ts

@@ -20,6 +20,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  edited: boolean,
   idTime: string,
   oldId: string,
   companionId: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -20,6 +20,7 @@ export type TPinnedMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  edited: boolean,
   idTime: string,
   oldId: string,
   companionId: string,