work on edit

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

@@ -16,6 +16,8 @@ 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 DownloadIcon from '@mui/icons-material/Download';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
@@ -213,6 +215,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftAudio {
   url: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -232,7 +235,7 @@ interface IMessageLeftAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftAudio = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,tongue,watched,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);
@@ -282,7 +285,8 @@ const MessageLeftAudio = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
@@ -317,6 +321,10 @@ const MessageLeftAudio = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>         
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -18,6 +18,8 @@ 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 DownloadIcon from '@mui/icons-material/Download';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -260,6 +262,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftFile {
   url: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -279,7 +282,7 @@ interface IMessageLeftFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftFile = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,tongue,watched,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);
@@ -372,7 +375,8 @@ const MessageLeftFile = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,ty
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
@@ -407,6 +411,10 @@ const MessageLeftFile = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,ty
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={handleDownloadFile}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>         
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -18,6 +18,7 @@ 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 VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -235,6 +236,7 @@ interface IMessageLeftForward {
   companionIdForwardToAndFrom: string,
   oldId: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   message: string,
@@ -260,7 +262,7 @@ interface IMessageLeftForward {
   fullType: string
 }
 
-const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,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,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);
@@ -333,7 +335,8 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,avatar
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -19,6 +19,8 @@ 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 DownloadIcon from '@mui/icons-material/Download';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -307,6 +309,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessagesLeftImage {
   url: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   createdAt:string,
@@ -326,7 +329,7 @@ interface IMessagesLeftImage {
   handleForward: (_id: string) => void,
 }
 
-const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,tongue,watched,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);
@@ -432,7 +435,8 @@ const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,captio
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
@@ -467,6 +471,10 @@ const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,captio
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -18,6 +18,7 @@ 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 VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -248,6 +249,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftReply {
   url: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   replyMessage: string,
@@ -274,7 +276,7 @@ interface IMessageLeftReply {
   oldId: string
 }
 
-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 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 classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -347,7 +349,8 @@ const MessageLeftReply = ({url,tongue,avatarUrl,color,replyMessage,message,name,
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -14,6 +14,7 @@ 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 VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -214,6 +215,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftText {
   message: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   name:string,
@@ -232,7 +234,7 @@ interface IMessageLeftText {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftText = ({message,tongue,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftText) => {
+const MessageLeftText = ({message,tongue,watched,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);
@@ -285,7 +287,8 @@ const MessageLeftText = ({message,tongue,avatarUrl,color,name,lastName,createdAt
           </div>
         </div>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -15,6 +15,8 @@ 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 DownloadIcon from '@mui/icons-material/Download';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -224,6 +226,7 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftVideo {
   url: string,
   tongue: boolean,
+  watched: boolean,
   avatarUrl: string,
   color: string,
   name: string,
@@ -243,7 +246,7 @@ interface IMessageLeftVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftVideo = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,tongue,watched,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);
@@ -292,7 +295,8 @@ const MessageLeftVideo = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+           <div className={classes.time} style={{ color: '#959595'}}>{timeStampMessage(createdAt)}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
@@ -327,6 +331,10 @@ const MessageLeftVideo = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -19,6 +19,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/Download';
+import EditIcon from '@mui/icons-material/Edit';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord,prodAwsS3 } from '../../../../../../helpers'
@@ -231,9 +233,10 @@ interface IMessageRightAudio {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  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 }:IMessageRightAudio) => {
+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 classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -318,6 +321,17 @@ const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>           
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
         </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>

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

@@ -19,6 +19,8 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/Download';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -279,9 +281,10 @@ interface IMessageRightFile {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  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 }:IMessageRightFile) => {
+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 classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -410,7 +413,18 @@ const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
-        </MenuItem>           
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>          
+        <MenuItem onClick={handleDownloadFile}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>          
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -20,6 +20,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -258,11 +259,12 @@ interface IMessageRightForward {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  handleEdit:(_id: string) => void,
   handleScrollToTheChat: (companionIdForwardToAndFrom:string,oldId:string) => void,
   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,handleScrollToTheChat,fullType}:IMessageRightForward) => {
+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 classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -371,6 +373,13 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>       
         <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -21,6 +21,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/Download';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -316,9 +318,10 @@ interface IMessageRightImage {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  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}:IMessageRightImage) => {
+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 classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -461,6 +464,17 @@ const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullTyp
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>          
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>        
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>          
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -20,6 +20,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -256,12 +257,13 @@ interface IMessageRightReply {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  handleEdit:(_id: string) => void,
   fullType: string,
   handleScrollToTheMessage: (_id: string) => void,
   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,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,handleEdit,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -370,6 +372,13 @@ const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,mess
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -16,6 +16,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
@@ -232,9 +233,10 @@ interface IMessageRightText {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  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}:IMessageRightText) => {
+const MessageRightText = ({message,tongue,watched,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);
@@ -323,6 +325,13 @@ const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -17,6 +17,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/Download';
+import EditIcon from '@mui/icons-material/Edit';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -235,9 +237,10 @@ interface IMessageRightVideo {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
+  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 }:IMessageRightVideo) => {
+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 classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -323,6 +326,17 @@ const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>        
+        <MenuItem onClick={() => handleDownload(url, fullType)}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />

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

@@ -0,0 +1,76 @@
+import { makeStyles } from "@material-ui/core/styles";
+import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import ListItemText from '@mui/material/ListItemText';
+
+import { TMessage } from "../../../../../../typescript/redux/messages/types";
+
+const useStyles = makeStyles({   
+  editTop : {
+    position: 'absolute',
+    left: 0,
+    top: '-7vh',
+    height: '6vh',
+    width: '100%',
+    borderRadius: 8,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignContent: 'center',
+    alignItems: 'center',
+    color: '#6b6b6b',
+    border:'solid 2px rgb(41, 139, 231)',
+    backgroundColor: '#ffffff',
+    padding: '0px 5px',
+    zIndex:2,
+  },
+  editListWrapper: {
+    width: '100%',
+    wordBreak: 'break-word',
+    overflowY: "auto",
+    height: '6vh',
+  },  
+  editIconClose: {
+    cursor: 'pointer',
+    marginLeft:5,
+    '&:hover': {
+      color:'#f02a2a',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  editColumn: {
+    height: '80%',
+    width: 2,
+    backgroundColor: '#00aeff',
+    marginRight:10
+  }, 
+});
+
+interface IEditBar {
+  isEdit:TMessage,
+  handleCloseEdit: () => void,
+  handleScrollToTheMessage:(_id:string) => void
+}
+
+const EditBar = ({ isEdit, handleCloseEdit,handleScrollToTheMessage }: IEditBar) => {
+  const classes = useStyles();
+  
+  return (
+    <div className={classes.editTop}>
+      <EditIcon style={{margin:'0px 7px',color: "#0694d6"}}/>
+      <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}`}
+              secondaryTypographyProps={{ fontSize: 16}} />
+          </li>
+      </ul>
+      <CloseIcon onClick={handleCloseEdit} className={classes.editIconClose} />
+    </div>
+  )
+}
+
+export default EditBar

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

@@ -22,6 +22,7 @@ import { useSelector } from "react-redux";
 import FilesMenu from "./FilesMenu";
 import ReplyBar from './ReplyBar'
 import ForwardBar from "./ForwardBar";
+import EditBar from "./EditBar";
 import ForwardSearchList from "./ForwardSearchList";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
@@ -276,12 +277,14 @@ interface ISendMessage{
   setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
   isForward: TMessage | undefined,
   setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
+  isEdit: TMessage | undefined, 
+  setIsEdit: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
   modalForward: boolean,
   setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
   handleScrollToTheMessage: (_id: string) => void,
 }
 
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,modalForward,setModalForward,handleScrollToTheMessage }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,isEdit,setIsEdit,modalForward,setModalForward,handleScrollToTheMessage }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -471,6 +474,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
   const handleCloseForward= () => {
     setIsForward(undefined)
     clearMessage()
+  }
+  
+  const handleCloseEdit = () => {
+    setIsEdit(undefined)
+    clearMessage()
   }  
 
   const defaultState = useCallback(() => {
@@ -494,11 +502,12 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
 
   useEffect(() => {
     defaultState()
-  }, [isReply, isForward, companionId])
+  }, [isReply, isForward,isEdit, companionId])
   
   useEffect(() => {
     setIsReply(undefined)
-  }, [companionId, setIsReply])
+    setIsEdit(undefined)
+  }, [companionId, setIsReply,setIsEdit])
   
   useEffect(() => {
     const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
@@ -512,6 +521,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
             handleScrollToTheMessage={handleScrollToTheMessage} />}
           {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
             setIsForward={setIsForward} companionId={companionId}/>}
+          {isEdit && <EditBar isEdit={isEdit} handleCloseEdit={handleCloseEdit}
+            handleScrollToTheMessage={handleScrollToTheMessage} />}  
           {isForward && !modalForward && <ForwardBar companionId={companionId} 
             isForward={isForward} handleCloseForward={handleCloseForward}
             handleScrollToTheMessage={handleScrollToTheMessage} setIsForward={setIsForward}/>}

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

@@ -103,6 +103,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const [isNew, setIsNew] = useState<{ new: number, mute: boolean }>({ new: 0, mute: false })
   const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
   const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
+  const [isEdit, setIsEdit] = useState<TMessage | undefined>(undefined)
   const [modalForward, setModalForward] = useState<boolean>(false)
   let time: any
   let tongue: any
@@ -117,16 +118,24 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   }
 
   const handleReply = (_id: string) => {
-    openPinned&& dispatch(actionOpenPinned(false))
+    openPinned && dispatch(actionOpenPinned(false))
+    isEdit&&setIsEdit(undefined)
     setIsReply(renderArr.find((el) => el._id ===_id))
   }
   
   const handleForward = (_id: string) => {
     openPinned && dispatch(actionOpenPinned(false))
-    isReply&&setIsReply(undefined)
+    isReply && setIsReply(undefined)
+    isEdit&&setIsEdit(undefined)
     setIsForward(renderArr.find((el) => el._id === _id))
     setModalForward(true)
   }
+
+  const handleEdit = (_id: string) => {
+    openPinned && dispatch(actionOpenPinned(false))
+    isReply && setIsReply(undefined)
+    setIsEdit(renderArr.find((el) => el._id ===_id))
+  }   
  
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
@@ -276,6 +285,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               <MessageLeftText
                message={message}
                tongue={isTongue}
+               watched={!unread}
                avatarUrl={avatarUrl}
                color={color}
                createdAt={createdAt}
@@ -301,6 +311,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 companionIdForwardToAndFrom={companionIdForwardToAndFrom}
                 oldId={oldId}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -331,6 +342,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                <MessageLeftReply
                 url={urlReply}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 replyMessage={replyMessage}
@@ -362,6 +374,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 <MessageLeftImage   
                 url={url}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 createdAt={createdAt}
@@ -386,6 +399,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 <MessageLeftAudio    
                 url={url}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -410,6 +424,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 <MessageLeftVideo    
                 url={url}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -434,6 +449,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 <MessageLeftFile   
                 url={url}
                 tongue={isTongue}
+                watched={!unread}
                 avatarUrl={avatarUrl}
                 color={color}
                 name={name}
@@ -476,6 +492,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 nightMode={nightMode}
                 handleReply={handleReply}
                 handleForward={handleForward}
+                handleEdit={handleEdit}
                 /></div>)
             if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
@@ -507,6 +524,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 nightMode={nightMode}
                 handleReply={handleReply}
                 handleForward={handleForward}
+                handleEdit={handleEdit}
                 fullType={fullType}
                 handleScrollToTheChat={handleScrollToTheChat}
                   /></div>) 
@@ -538,6 +556,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 nightMode={nightMode}
                 handleReply={handleReply}
                 handleForward={handleForward}
+                handleEdit={handleEdit}
                 fullType={fullType}
                 handleScrollToTheMessage={handleScrollToTheMessage}
                 oldId={oldId}
@@ -566,6 +585,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 nightMode={nightMode}
                 handleReply={handleReply}
                 handleForward={handleForward}
+                handleEdit={handleEdit}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
@@ -591,6 +611,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 nightMode={nightMode}
                 handleReply={handleReply}
                 handleForward={handleForward}
+                handleEdit={handleEdit}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
@@ -616,6 +637,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  nightMode={nightMode}
                  handleReply={handleReply}
                  handleForward={handleForward}
+                 handleEdit={handleEdit}
                    /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
@@ -641,6 +663,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  nightMode={nightMode}
                  handleReply={handleReply}
                  handleForward={handleForward}
+                 handleEdit={handleEdit}
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}
@@ -648,6 +671,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       </div>
       {!openPinned && !isSomeSelected && <SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply}
         isForward={isForward} setIsForward={setIsForward}
+        isEdit={isEdit} setIsEdit={setIsEdit}
         modalForward={modalForward} setModalForward={setModalForward}
         handleScrollToTheMessage={handleScrollToTheMessage}/>}
       {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}

src/components/HomePage/LeftBar/ChatsList/ChatItem/index.tsx

@@ -250,7 +250,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned,selectedCom
             typing<span style={{color:openedChat?'#ffffff':'#1b1b1b'}}
             className={classes.listItem_dots}>...</span></span> :
             lastMessage ? slicedWord(lastMessage, 35) :
-            `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}
+            `${firstLetter(name)}${slicedWord(name, 15, 1)} joined Telegram`}
             secondaryTypographyProps={{color:openedChat?'#ffffff':'#000000'}}/>
           <ListItemIcon className={classes.listItem_iconRight}>
             <div className={classes.listItem_iconTimeChecked}>