started reply

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

@@ -15,6 +15,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -267,10 +268,12 @@ interface IMessageLeftAudio {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -307,7 +310,7 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{ pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
@@ -328,11 +331,22 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>  
+        <Divider />
+          <MenuItem onClick={() => {
+            handleReply(_id)
+            handleClose(undefined)
+        }}>
+            <ReplyIcon />
+            Reply
+          </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Audio link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -342,18 +356,18 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem> 
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>          
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&

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

@@ -16,6 +16,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -320,10 +321,12 @@ interface IMessageLeftFile {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -384,7 +387,7 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
       {read && <div className={classes.wrapperIcons}>
         <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
         <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />
@@ -421,11 +424,22 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy File link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -435,18 +449,18 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>       
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&

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

@@ -20,6 +20,7 @@ import Avatar from '@mui/material/Avatar';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
@@ -360,9 +361,11 @@ interface IMessagesLeftImage {
   _id: string,
   name: string,
   lastName: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -454,7 +457,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
       </div>
     </div>  :
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -474,11 +477,22 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Image link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -488,18 +502,18 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>         
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem> 
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&

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

@@ -12,6 +12,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -261,10 +262,12 @@ interface IMessageLeftText {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -301,7 +304,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':undefined,
         border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -324,11 +327,22 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy message
+             Copy Text
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -338,18 +352,18 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>          
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>  
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&

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

@@ -14,6 +14,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -271,10 +272,12 @@ interface IMessageLeftVideo {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -310,7 +313,7 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
 
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -329,11 +332,22 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Video link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -343,18 +357,18 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>          
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem> 
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&

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

@@ -15,6 +15,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -266,10 +267,12 @@ interface IMessageRightAudio {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected, }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -326,11 +329,22 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Audio link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -340,18 +354,18 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&
@@ -368,7 +382,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         </div>  
       </div>}          
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
     </div>    
 )};
 

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

@@ -16,6 +16,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -320,10 +321,12 @@ interface IMessageRightFile {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightFile) => {
+const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -420,11 +423,22 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy File link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -434,18 +448,18 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&
@@ -462,7 +476,7 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
         </div>  
       </div>}         
      </div>
-     {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}      
+     {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}      
     </div>    
 )};
 

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

@@ -20,6 +20,7 @@ import Avatar from '@mui/material/Avatar';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
@@ -360,9 +361,11 @@ interface IMessageRightImage {
   _id: string,
   name: string,
   lastName: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -472,11 +475,22 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>          
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Image link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -486,18 +500,18 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&
@@ -514,7 +528,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}         
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
     </div>   
 )};
 

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

@@ -12,6 +12,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr } from '../../../../../../helpers'
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -261,10 +262,12 @@ interface IMessageRightText {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -322,11 +325,22 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy message
+             Copy Text
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -336,18 +350,18 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>           
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&
@@ -364,7 +378,7 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
         </div>  
       </div>}        
       </div>
-{isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}      
+{isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}      
    </div>    
 )};
 

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

@@ -14,6 +14,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -272,10 +273,12 @@ interface IMessageRightVideo {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -329,11 +332,22 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
             {emojisArr.map((el:string, i:number) =>
               <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
           </MenuItem>
-        <Divider/>           
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Video link
+             Copy Link
           </MenuItem>
         </CopyToClipboard>
         <MenuItem onClick={() => {
@@ -343,18 +357,18 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
             {pinned ?
               <CloseIcon className={classes.iconClose} /> :
               <PushPinIcon />}
-             {pinned?'Unpin message':'Pin message'}
+             {pinned?'Unpin':'Pin'}
         </MenuItem>            
         <MenuItem onClick={() => {
             handleSelected(_id)
             handleClose(undefined)
           }}>
             <CheckBoxIcon />
-            Select message
+            Select
         </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
-            Delete message
+            Delete
         </MenuItem>        
       </StyledMenu>
       {modal &&
@@ -371,7 +385,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         </div>  
       </div>}          
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
+      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
     </div>    
 )};
 

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

@@ -12,6 +12,8 @@ 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 MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
 import Picker from 'emoji-picker-react';
 
 import { useReactMediaRecorder } from "react-media-recorder";
@@ -25,8 +27,9 @@ import {
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { getRightIsOpen } from '../../../../../redux/control/selector'
-import { playNotification,prodBaseURL } from "../../../../../helpers";
+import { playNotification,prodBaseURL,firstLetter,slicedWord } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
+import { TMessage } from "../../../../../typescript/redux/messages/types";
 
 const useStyles = makeStyles({   
     container: {
@@ -77,14 +80,48 @@ const useStyles = makeStyles({
     attachIcon: {
         transform:'rotate(30deg)',  
     },
-    borderTop: {
-        position: 'absolute',
-        left: 0,
-        top: '-2vh',
-        width: '100%',
-        height: 1,
-        background:'#ffffff',
-    },
+  borderTop: {
+    position: 'absolute',
+    left: 0,
+    top: '-2vh',
+    width: '100%',
+    height: 1,
+    background:'#ffffff',
+  },
+  replyTop : {
+    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: 0,
+    zIndex:2,
+  },
+  replyIconClose: {
+    cursor: 'pointer',
+    margin:'0px 7px',
+    '&:hover': {
+      color:'#f02a2a',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  replyListWrapper: {
+    width: '100%',
+  },
+  replyColumn: {
+    height: '80%',
+    width: 2,
+    backgroundColor: '#00aeff',
+  },
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
@@ -269,9 +306,13 @@ const useStyles = makeStyles({
 
 interface ISendMessage{
   isArrow: boolean,
+  silentMode: boolean,
+  isReply:TMessage | undefined,
+  setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
+  chatDivRef: any | null,
 }
 
-const SendMessage = ({isArrow }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -311,7 +352,10 @@ const SendMessage = ({isArrow }:ISendMessage) => {
       isOpenCaption && setIsOpenCaption(false)
     }
   const sentMessage = async () => {
-        if (value) sentMessageById(companionId, value,caption.trim())
+        if (value && !isReply) sentMessageById(companionId, value, caption.trim())
+        if (value && isReply) {
+          console.log('sended reply')
+        }
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
             audio.open('GET', mediaBlobUrl, true);
@@ -379,7 +423,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
         })
       }         
         clearMessage()
-        playNotification(`${prodBaseURL}/send.mp3`)
+        !silentMode&&playNotification(`${prodBaseURL}/send.mp3`)
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
     const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -408,16 +452,53 @@ const SendMessage = ({isArrow }:ISendMessage) => {
   }
   const handleOpenCamera = () => setIsOpenCamera(true)
 
-  
-
   const handleCloseCamera = (e: any) => {
     const id = e.target.id
     if (id === 'overlay') setIsOpenCamera(false)
+  }
+  
+  const handleCaptureAvatar = (getScreenshot:() => string| null) => {
+    setFile(getScreenshot())
+    setType('base64')
+    !silentMode&&playNotification(`${prodBaseURL}/cameraCapture.mp3`)
+  }
+
+  const handleCloseReply = () => {
+    setIsReply(undefined)
+    clearMessage()
+  }
+
+  const handleScrollToTheMessage = () => {
+    if(!isReply) return
+    const childNodes = chatDivRef.current.childNodes[0].childNodes
+    let toScrollNode = [...childNodes].find((el: any) => el.id === isReply._id)
+    if (toScrollNode) {
+      toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+      toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
+      toScrollNode.scrollIntoView({ behavior: 'smooth' })
+      setTimeout(() => {
+        toScrollNode.style.boxShadow = 'unset'
+      }, 2000)
+    }
   }  
 
     return (
         <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
             {isArrow && <div className={classes.borderTop}></div>}
+            {isReply && <div className={classes.replyTop}>
+                <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
+                <div className={classes.replyColumn}></div>
+                <ul className={classes.replyListWrapper}>
+                  <MenuItem onClick={handleScrollToTheMessage}>
+                    <ListItemText
+                      primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)} 
+                       ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
+                      primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+                      secondary={`Type : ${isReply.type.toUpperCase()}`}
+                      secondaryTypographyProps={{ fontSize:16 }}/>          
+                  </MenuItem>
+                </ul>
+            </div>}       
             {isFilming && _status !== 'stopped' &&                
              <>
                 <div className={classes.pauseLeft}>
@@ -446,23 +527,23 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 </>}            
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
-                    || _status === 'stopped' ? 'inline-block' : 'none'}} />
+                    || _status === 'stopped' || !isReply ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
-                    style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming ? 'none' : 'block' }} />                           
+                    style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming || isReply ? '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' }}/>                
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
-                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording ? 'block' : 'none'}}/>
+                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording && !isReply ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                     pointerEvents: file || status !== 'idle' || _status !== 'idle' ? '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'? 'auto' : "none",
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
@@ -486,11 +567,11 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 <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 !== 'idle'
-                   || _status !== 'idle' ? 'none' : "auto",
+                   || _status !== 'idle' || isReply ? '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 !== 'idle' || _status !== 'idle' ? 'none' : "auto", '&:hover':
+                    pointerEvents: type === 'base64' || value || status !== 'idle' || _status !== 'idle' || isReply ? 'none' : "auto", '&:hover':
                     { color: 'rgb(41, 139, 231)'}}}/>
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
@@ -503,11 +584,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                       <Webcam audio={false} screenshotFormat="image/jpeg" width='40%'
                       videoConstraints={videoConstraints} style={{marginBottom:30}}>
                      {({ getScreenshot }) => <>
-                       <CameraIcon onClick={() => {
-                         setFile(getScreenshot())
-                         setType('base64')
-                         playNotification(`${prodBaseURL}/cameraCapture.mp3`)
-                       }}
+                       <CameraIcon onClick={() => handleCaptureAvatar(getScreenshot)}
                          className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
                        <img className={classes.capturedPicture} width='300' height='174'
                          style={{visibility:file?'visible':'hidden'}} src={file} alt='chosen pic'></img>

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

@@ -18,7 +18,7 @@ import MessageRightFile from "./Messages/MessageRightFile";
 import MessageTime from "./Messages/MessageTime";
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
-import { getNumber } from '../../../../redux/authorization/selector'
+import { getAuthorizationState } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
 import { getScrollChat } from '../../../../redux/control/selector'
 import { actionScrollChat } from '../../../../redux/control/action'
@@ -26,6 +26,7 @@ import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 import { asyncGetChatById } from "../../../../redux/chat/operations";
 import { seenChat } from "../../../../api-data";
 import { TPinnedMessages } from "../../../../typescript/redux/pinnedMessages/types";
+import { TMessage } from "../../../../typescript/redux/allMessages/types"; 
 import { timeStampFilter,prodAwsS3,refreshAppTime } from "../../../../helpers";
 const debounce = require('lodash.debounce');
 
@@ -91,9 +92,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const classes = useStyles();
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
-  const userNumber = useSelector(getNumber)
+  const { number:userNumber,nightMode,silentMode} = useSelector(getAuthorizationState)
   const { companionId,total,seen,mute } = useSelector(getChat)
   const scrollChat = useSelector(getScrollChat)
+  const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   let time: any
@@ -104,6 +106,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       setSelectedArr(selectedArr.filter((el:string) => el !== _id))
      else setSelectedArr([...selectedArr,_id])
   }
+
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
      top: chatDivRef.current.scrollHeight,
@@ -119,6 +122,14 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   }, [total,seen, companionId,openPinned])
   
   const debouncedHandleScroll = debounce(handleScroll, 300)
+
+  const renderArr = useMemo(() => {
+    return !openPinned ? messagesMemo : pinnedMessagesMemo
+  }, [messagesMemo, pinnedMessagesMemo, openPinned])
+  
+  const handleReply = (_id: string) => {
+    setIsReply(renderArr.find((el) => el._id ===_id))
+  }    
   
   useEffect(() => {
     if (scrollChat) {
@@ -139,22 +150,25 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   
   useEffect(() => {
      setIsNew({ new:total-seen,mute})
-  }, [total,seen,mute]); 
+  }, [total, seen, mute]);
+  
+  useEffect(() => {
+    if (chatDivRef.current&&openPinned) {
+      const { scrollHeight, clientHeight } = chatDivRef.current
+      if (scrollHeight === clientHeight && isArrow) setIsArrow(false)
+    }
+  }, [chatDivRef,openPinned,pinnedMessagesMemo.length, isArrow]);  
 
   useEffect(() => {
     const handleReset = () => {
       if (chatDivRef.current&&!openPinned) {
          const { scrollHeight, clientHeight } = chatDivRef.current
-         if (total !== seen && scrollHeight === clientHeight) seenChat(companionId)
+        if (total !== seen && scrollHeight === clientHeight) seenChat(companionId)
        }
     }
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
   }, [total, seen, chatDivRef, companionId,openPinned]);
-  
-  const renderArr = useMemo(() => {
-    return !openPinned ? messagesMemo : pinnedMessagesMemo
-  },[messagesMemo,pinnedMessagesMemo,openPinned])
 
   return (
     <div className={classes.container} >
@@ -163,7 +177,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ message, name, lastName, color,pinned,
-           createdAt,number, type,fullType,caption,emoji,emojiCompanion,_id }) => {
+           createdAt,number, type,fullType,caption,emoji,emojiCompanion,_id}) => {
           let isTime
           if (!time) {
             isTime = true
@@ -189,6 +203,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                isSelected={isSelected}
                handleSelected={handleSelected}
                _id={_id}
+               nightMode={nightMode}
+               handleReply={handleReply}
                  /></div>)
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -206,7 +222,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleSelected={handleSelected}                
                 _id={_id}
                 name={name}
-                lastName={lastName}                
+                lastName={lastName}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -222,6 +240,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
                 _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -237,6 +257,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}              
                 _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -252,6 +274,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}              
                 _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)             
           } else {
             if (type === 'text') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
@@ -269,6 +293,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
                 _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -287,6 +313,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 name={name}
                 lastName={lastName}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -302,6 +330,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}
                 _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -317,6 +347,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  isSelected={isSelected}
                  handleSelected={handleSelected}
                  _id={_id}
+                 nightMode={nightMode}
+                 handleReply={handleReply}
                    /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -332,13 +364,15 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  isSelected={isSelected}
                  handleSelected={handleSelected}
                  _id={_id}
+                 nightMode={nightMode}
+                 handleReply={handleReply}
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}
         </div>
-      </div>  
-      {!openPinned ? <SendMessage isArrow={isArrow} /> :
-      <UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
+      </div>
+      {!openPinned&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} chatDivRef={chatDivRef}/>}
+      {openPinned&&!isSomeSelected &&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );
 }

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

@@ -5,8 +5,6 @@ import ListItemText from '@mui/material/ListItemText';
 import CloseIcon from '@mui/icons-material/Close';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import Button from '@mui/material/Button';
-import Avatar from '@mui/material/Avatar';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import FolderIcon from '@mui/icons-material/Folder';
 import ImageIcon from '@mui/icons-material/Image';
@@ -110,7 +108,7 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
     }
     if (toScrollNode) {
       toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
-      toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+      toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
       toScrollNode.scrollIntoView({ behavior: 'smooth' })
       setTimeout(() => {
         toScrollNode.style.boxShadow = 'unset'

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

@@ -123,7 +123,7 @@ const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,hand
   }    
 
   return (<>
-    {openPinned &&pinnedMessagesMemo.length > 0&&
+    {!isSomeSelected&&openPinned &&pinnedMessagesMemo.length > 0&&
       <AppBar position="static">
         <Toolbar className={classes.toolBarPinned}>
           <div onClick={handleOpenCredentials}  className={classes.pinnedBack}>
@@ -138,7 +138,6 @@ const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,hand
           <Buttons setIsSomeSelected={setIsSomeSelected}/>
        </Toolbar>
      </AppBar>}
-    {openPinned&&isSomeSelected&&<Divider variant="inset"/>}
     {!openPinned && !isSomeSelected &&
       <AppBar position="static">
         <Toolbar className={classes.toolBar}>

src/components/HomePage/LeftBar/AddContact/index.tsx

@@ -57,7 +57,6 @@ const AddContact = ({handleClick}:IAddContact) => {
   const handlePressEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if(e.code === 'Enter' && isValidNumber()) handleAddContact()
   } 
-
  
   return (
     <>

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

@@ -8,6 +8,7 @@ import ChatItem from './ChatItem';
 import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
 import { getStateMemo } from '../../../../redux/chats/selector'
 import { getChatMemo } from '../../../../redux/chat/selector'
+import { getSilentMode } from '../../../../redux/authorization/selector'
 import { asyncGetChatById } from '../../../../redux/chat/operations'
 import { asyncGetChats } from '../../../../redux/chats/operations';
 import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../redux/control/action'
@@ -47,6 +48,7 @@ const ChatsList = ({sort}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const chatsRef = useRef<any>(null)
+  const silentMode = useSelector(getSilentMode)
   const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo) 
   
@@ -99,13 +101,13 @@ const ChatsList = ({sort}:IChatsList) => {
         if(chat === undefined) return
         const newDifferent = chat.total - chat.seen
         if (newDifferent > oldDifferent && !chat.mute) {
-          playNotificationWithoutPermission(`${prodBaseURL}/telegramReceive.mp3`)
+          !silentMode&&playNotificationWithoutPermission(`${prodBaseURL}/telegramReceive.mp3`)
           notification(chat.name, () => handleNotification(chat.companionId))
         } 
       })
     }
     chatsRef.current = sortedChats
-  }, [chat,sortedChats,handleNotification,dispatch])
+  }, [chat,sortedChats,handleNotification,dispatch,silentMode])
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"

src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

@@ -85,7 +85,7 @@ const EditList = (props: IEditList) => {
   const classes = useStyles()
   const { user, name, setName, lastName, setLastName,
     openBtn, setOpenBtn,file,setFile,camera,setCamera,selfie,setSelfie } = props
-  const { avatarUrl, color } = user
+  const { avatarUrl, color,silentMode } = user
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         noDrag: true,
         accept:'image/*'
@@ -164,7 +164,7 @@ const EditList = (props: IEditList) => {
             <CameraIcon onClick={() => {
               setSelfie(getScreenshot())
               setOpenBtn(true)
-              playNotification(`${prodBaseURL}/cameraCapture.mp3`)
+              !silentMode&&playNotification(`${prodBaseURL}/cameraCapture.mp3`)
             }}
               className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
             <img className={classes.capturedPicture} width='300' height='174'

src/components/HomePage/LeftBar/MenuBar/index.tsx

@@ -6,7 +6,8 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
 import SettingsIcon from '@mui/icons-material/Settings';
-import Brightness3Icon from '@mui/icons-material/Brightness3'; 
+import Brightness3Icon from '@mui/icons-material/Brightness3';
+import NotificationsIcon from '@mui/icons-material/Notifications';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import BugReportIcon from '@mui/icons-material/BugReport';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
@@ -56,12 +57,14 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface IContactsList {
   nightMode: boolean,
+  silentMode: boolean,
 }
 
-const MenuBar = ({nightMode}:IContactsList) => {
+const MenuBar = ({nightMode,silentMode}:IContactsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const handleNightMode = () => updateUser({ nightMode: !nightMode })
+  const handleSilentMode = () => updateUser({ silentMode: !silentMode })
 
   useEffect(() => {
     const handleReset = () => dispatch(asyncCurrentUser())
@@ -95,10 +98,17 @@ const MenuBar = ({nightMode}:IContactsList) => {
         <MenuItem style={{cursor:'default'}}>
           <ListItemIcon className={classes.listIcon}>
             <Brightness3Icon fontSize="medium" />
-          </ListItemIcon>
+            </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
           <Switch onClick={handleNightMode} checked={nightMode} {...label} style={{cursor:'pointer'}}/>
-        </MenuItem>
+          </MenuItem>
+        <MenuItem style={{cursor:'default'}}>
+          <ListItemIcon className={classes.listIcon}>
+            <NotificationsIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Silent Mode</ListItemText>
+          <Switch onClick={handleSilentMode} checked={silentMode} {...label} style={{cursor:'pointer'}}/>
+        </MenuItem>          
         <a style={{ textDecoration: 'none', color: 'inherit' }} target='blank'
           href='https://www.makeuseof.com/tag/useful-telegram-features/'>
           <MenuItem>

src/components/HomePage/LeftBar/SearchLists/index.tsx

@@ -85,7 +85,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
       let toScrollNode = [...childNodes].find((el: any) => el.id === id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
-        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
           toScrollNode.style.boxShadow = 'unset'

src/components/HomePage/LeftBar/index.tsx

@@ -18,7 +18,7 @@ import { actionLeftIsOpen } from '../../../redux/control/action';
 
 const LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {
   const dispatch = useDispatch()
-  const { sort, nightMode } = useSelector(getAuthorizationState)
+  const { sort, nightMode,silentMode } = useSelector(getAuthorizationState)
   const leftIsOpen = useSelector(getLeftIsOpen)
   const [modal, setModal] = useState<boolean>(false)
   const [popup, setPopup] = useState<boolean>(false);
@@ -81,7 +81,7 @@ const LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {
         {leftIsOpen === ''&&<ChatsList sort={sort}/>}
         {leftIsOpen === '' && popup && <SmallMenuBar setPopup={setPopup} />}
         {modal && modalRoot.current &&
-          createPortal(<MenuBar nightMode={nightMode} />, modalRoot.current)}
+          createPortal(<MenuBar nightMode={nightMode} silentMode={silentMode}/>, modalRoot.current)}
         {leftIsOpen === 'contacts' && <ContactsList handleClick={handleClick} value={value}
           sort={sort} date={date} setDisabled={setDisabled} />}
         {leftIsOpen === 'contact' && <AddContact  handleClick={handleClick}/>}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/index.tsx

@@ -67,7 +67,7 @@ const ProfileLists = ({setDisabled,chatDivRef}:IProfileLists) => {
       let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
-        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
           toScrollNode.style.boxShadow = 'unset'

src/components/HomePage/RightBar/SearchList/index.tsx

@@ -69,7 +69,7 @@ const SearchList= ({chatDivRef}:ISearchList) => {
       let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
-        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
           toScrollNode.style.boxShadow = 'unset'

src/helpers/index.ts

@@ -153,7 +153,8 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
 
 const emojisArr = ['💘','😀','😍','😲','😡']            
 
-const prodBaseURL = 'https://w-telegram.herokuapp.com'
+let prodBaseURL = 'https://w-telegram.herokuapp.com'
+prodBaseURL = 'http://localhost:3000'
 
 const prodAwsS3 = 'https://my-telegram-bucket.s3.eu-west-1.amazonaws.com'
 

src/redux/authorization/reducer/index.ts

@@ -26,6 +26,7 @@ const initialState:IAuthorizationState = {
   country: "",
   sort: false,
   nightMode: false,
+  silentMode: false,
   createdAt: "",
   updatedAt: "",
   __v: 0,

src/redux/authorization/selector/index.ts

@@ -9,6 +9,7 @@ const getAvatarUrl = (state: IState) => state.authorization.avatarUrl;
 const getId = (state: IState) => state.authorization._id;
 const getSort = (state: IState) => state.authorization.sort;
 const getNightMode = (state: IState) => state.authorization.nightMode;
+const getSilentMode = (state: IState) => state.authorization.silentMode;
 const getAuthorizationState= (state:IState) => state.authorization;
 
-export { getToken,getNumber,getName,getLastName,getCountry,getAvatarUrl,getId,getSort,getNightMode,getAuthorizationState };
+export { getToken,getNumber,getName,getLastName,getCountry,getAvatarUrl,getId,getSort,getNightMode,getSilentMode,getAuthorizationState };

src/typescript/redux/allMessages/types.ts

@@ -14,6 +14,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  reply: boolean,
   idTime: string,
   owner: any,
   createdAt: string,

src/typescript/redux/authorization/interfaces.ts

@@ -15,6 +15,7 @@ export interface IAuthorizationState  {
   country: string,
   sort: boolean,
   nightMode: boolean,
+  silentMode: boolean,
   createdAt: string,
   updatedAt: string,
   __v: number,

src/typescript/redux/messages/types.ts

@@ -12,6 +12,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  reply: boolean,
   idTime: string,
   companionId: string,
   companionIdFlow: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -12,6 +12,7 @@ export type TPinnedMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  reply: boolean,
   idTime: string,
   companionId: string,
   companionIdFlow: string,