add metu to delete message

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

@@ -1,10 +1,54 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import AudioFileIcon from '@mui/icons-material/AudioFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ReactAudioPlayer from 'react-audio-player';
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { timeStampMessage,handleDownload } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
 
 const useStyles = makeStyles({
   container: {
@@ -44,8 +88,40 @@ const useStyles = makeStyles({
         left: "-17px"
       }    
   },
+  wrapperActive: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#babdbc',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }    
+  },
   bntDownload: {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -67,7 +143,30 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-    },
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 interface IMessageLeftAudio {
@@ -78,11 +177,35 @@ interface IMessageLeftAudio {
 
 const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);     
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }    
 
 
   return (
     <div className={classes.container}>
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
          <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
           <ReactAudioPlayer className={classes.player}
             src={url}
@@ -92,6 +215,32 @@ const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Audio link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
     </div>    
 )};

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

@@ -1,12 +1,55 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { useState } from "react";
-import { timeStampMessage } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { timeStampMessage,copied } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
 const useStyles = makeStyles({
   container: {
       display: "flex",
@@ -46,8 +89,41 @@ const useStyles = makeStyles({
         left: "-17px"
       }     
   },
+  wrapperActive: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    width: 200,
+    padding: '5px 5px 12px 5px',
+    backgroundColor: '#babdbc',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }     
+  },  
   bntDownload: {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -84,7 +160,30 @@ const useStyles = makeStyles({
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflow: 'hidden'
-  }, 
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlayDelete: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 interface IMessageLeftFile {
@@ -95,9 +194,32 @@ interface IMessageLeftFile {
 
 const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
   const classes = useStyles();
-  const [read,setRead] = useState<boolean>(false)
+  const [read, setRead] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);   
   const handleOpenRead = () => !read&&setRead(true)
   const handleCloseRead = () => read && setRead(false)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }   
 
   return (
     <div className={classes.container}>
@@ -109,7 +231,8 @@ const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
           onError={handleCloseRead}
          />
       </div>}
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
         {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
         <a href={url} target="_blank" rel="noreferrer" download>
@@ -118,6 +241,32 @@ const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy File link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
     </div>        
 )};

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

@@ -1,10 +1,53 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { Carousel } from 'react-responsive-carousel';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { useState } from "react";
-import { timeStampMessage, timeStampFilter,handleDownload } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
 
 const useStyles = makeStyles({
     container: {
@@ -45,6 +88,39 @@ const useStyles = makeStyles({
         left: "-17px"
       }     
   },
+  wrapperActive: {
+    width: 400,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 7,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#babdbc',
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }     
+  },  
     image: {
       borderRadius: 7,
       width: 300,
@@ -62,7 +138,7 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   bntDownload: {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -89,7 +165,30 @@ const useStyles = makeStyles({
     top:'2%',
     width: '30%',
     height:'80%',
-  }
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlayDelete: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },   
 });
 
 interface IMessagesLeftImage {
@@ -104,9 +203,31 @@ interface IMessagesLeftImage {
 const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);    
   const handleOpenWatch = () => !watch&&setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
 
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
       <Carousel className={classes.carousel}>
@@ -126,7 +247,8 @@ const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMess
        </Carousel>
     </div> :
     <div className={classes.container}>
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
         <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
           style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
@@ -134,6 +256,32 @@ const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMess
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>       
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Image link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}        
       </div>
     </div>   
 )};

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

@@ -1,9 +1,51 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
 const useStyles = makeStyles({
     container: {
       display: "flex",
@@ -49,6 +91,33 @@ const useStyles = makeStyles({
         left: "-17px"
       }      
   },
+    messageActive: {
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
+  },    
   copyIcon: {
     color: '#b56ff7',
     cursor: 'pointer',
@@ -66,7 +135,30 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-    },
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 
@@ -79,20 +171,72 @@ interface IMessageLeftText {
 
 const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Message')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }     
 
   return (
   <div className={classes.container}>
-     <div className={classes.wrapper}>
+     <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#babdbc':undefined,
+        border:selected?'#babdbc':undefined}}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
           <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
-        <ListItemText className={classes.message}
+        <ListItemText className={selected?classes.messageActive:classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
           primaryTypographyProps={{color: "#0379af"}}
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy message
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
   </div>    
 )};  

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

@@ -1,10 +1,54 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { timeStampMessage,handleDownload } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
 const useStyles = makeStyles({
   container: {
       display: "flex",
@@ -44,8 +88,41 @@ const useStyles = makeStyles({
         left: "-17px"
       }    
   },
+  wrapperActive: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    width: 400,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#babdbc',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }    
+  },  
   bntDownload: {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height: 30,
@@ -67,7 +144,33 @@ const useStyles = makeStyles({
   },
   player: {
     backgroundColor: '#ffffff',
-  }  
+  },
+  playerActive: {
+    backgroundColor: '#babdbc',
+  },  
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 interface IMessageLeftVideo {
@@ -78,16 +181,68 @@ interface IMessageLeftVideo {
 
 const MessageLeftVideo = ({ url,updatedAt,fullType }:IMessageLeftVideo) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }    
+   
 
   return (
     <div className={classes.container}>
-      <div className={classes.wrapper} >
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
-        <Player className={classes.player}  playsInline src={url}/>
+        <Player className={selected?classes.playerActive:classes.player}  playsInline src={url}/>
         <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Video link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
     </div>    
 )};

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

@@ -1,10 +1,54 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import AudioFileIcon from '@mui/icons-material/AudioFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ReactAudioPlayer from 'react-audio-player';
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { timeStampMessage,handleDownload } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
 
 const useStyles = makeStyles({
   container: {
@@ -44,8 +88,40 @@ const useStyles = makeStyles({
         right: "-17px"
       }    
   },
+  wrapperActive: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#ced8d7',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ced8d7",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ced8d7",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }    
+  },
   bntDownload: {
-    backgroundColor: '#deffa9',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -67,7 +143,30 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-    },
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 interface IMessageRightAudio {
@@ -78,20 +177,69 @@ interface IMessageRightAudio {
 
 const MessageRightAudio = ({ url,updatedAt,fullType }:IMessageRightAudio) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);     
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
 
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }  
 
   return (
     <div className={classes.container}>
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
         <ReactAudioPlayer className={classes.player} 
           src={url}
           controls
          />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Audio link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}          
       </div>
     </div>    
 )};

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

@@ -1,12 +1,54 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { useState } from "react";
-import { timeStampMessage } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { timeStampMessage,copied } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
 
 const useStyles = makeStyles({
   container: {
@@ -47,8 +89,41 @@ const useStyles = makeStyles({
         right: "-17px"
       }    
   },
+  wrapperActive:  {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    width: 200,
+    padding: '5px 5px 12px 5px',
+    backgroundColor: '#ced8d7',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ced8d7",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ced8d7",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }    
+  },    
   bntDownload: {
-    backgroundColor: '#deffa9',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -56,7 +131,7 @@ const useStyles = makeStyles({
       backgroundColor: '#54b0fc',
       color:'#ffffff'
     }
-  },
+  }, 
   title: {
     margin: '0 30px 0 5px',
     color: '#0e0d0d',
@@ -86,6 +161,29 @@ const useStyles = makeStyles({
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflow: 'hidden'
   },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlayDelete: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },  
 });
 
 interface IMessageRightFile {
@@ -96,9 +194,32 @@ interface IMessageRightFile {
 
 const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {
   const classes = useStyles();
-  const [read,setRead] = useState<boolean>(false)
+  const [read, setRead] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);    
   const handleOpenRead = () => !read&&setRead(true)
   const handleCloseRead = () => read && setRead(false)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }    
 
   return (
     <div className={classes.container}>
@@ -110,15 +231,42 @@ const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {
           onError={handleCloseRead}
          />
       </div>}
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
         {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
         <a href={url} target="_blank" rel="noreferrer" download>
-           <IconButton className={classes.bntDownload}  >
+           <IconButton className={classes.bntDownload}>
              <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy File link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
     </div>    
 )};

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

@@ -1,11 +1,53 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { Carousel } from 'react-responsive-carousel';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { useState } from "react";
-import { timeStampMessage, timeStampFilter,handleDownload } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
 
 const useStyles = makeStyles({
   container: {
@@ -46,6 +88,39 @@ const useStyles = makeStyles({
         right: "-17px"
       }     
   },
+  wrapperActive: {
+    width: 400,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 7,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#ced8d7',
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ced8d7",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ced8d7",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }     
+  },    
     image: {
       borderRadius: 7,
       width: 300,
@@ -63,7 +138,7 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   bntDownload: {
-    backgroundColor: '#deffa9',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -71,7 +146,7 @@ const useStyles = makeStyles({
       backgroundColor: '#54b0fc',
       color:'#ffffff'
     }
-  },    
+  },  
   overlay: {
     position: 'fixed',
     top: 0,
@@ -90,7 +165,30 @@ const useStyles = makeStyles({
     top:'2%',
     width: '30%',
     height:'80%',
-  }
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlayDelete: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },      
 });
 
 interface IMessageRightImage {
@@ -105,8 +203,31 @@ interface IMessageRightImage {
 const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);  
   const handleOpenWatch = () => !watch&&setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
       <Carousel className={classes.carousel}>
@@ -126,14 +247,41 @@ const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMess
        </Carousel>
     </div> :
     <div className={classes.container}>
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
         <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
           style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Image link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
       </div>
     </div>   
 )};

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

@@ -1,9 +1,51 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage,copied } from '../../../../../../helpers'
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
 const useStyles = makeStyles({
     container: {
       display: "flex",
@@ -49,6 +91,33 @@ const useStyles = makeStyles({
         right: "-17px"
       }
   },
+    messageActive: {
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ced8d7",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ced8d7",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }
+  },    
   copyIcon: {
     color: '#b56ff7',
     cursor: 'pointer',
@@ -66,7 +135,30 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-    },
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },  
 });
 
 interface IMessageRightText {
@@ -78,22 +170,74 @@ interface IMessageRightText {
 
 const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Message')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }   
 
   return (
   <div className={classes.container}>
-     <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,
+        border:selected?'#ced8d7':undefined}}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
           <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
-        <ListItemText className={classes.message}
+        <ListItemText className={selected?classes.messageActive:classes.message}  
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
           primaryTypographyProps={{color: "#42aee0"}}
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
-      </div>
-  </div>    
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy message
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}        
+     </div>
+   </div>    
 )};
 
 export  default  MessageRightText

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

@@ -1,11 +1,56 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { timeStampMessage,handleDownload } from '../../../../../../helpers'
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import { timeStampMessage,handleDownload,copied } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
 
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
 const useStyles = makeStyles({
   container: {
       display: "flex",
@@ -45,8 +90,41 @@ const useStyles = makeStyles({
         right: "-17px"
       }    
   },
+  wrapperActive: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    width: 400,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#ced8d7',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ced8d7",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ced8d7",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }    
+  },  
   bntDownload: {
-    backgroundColor: '#deffa9',
+    backgroundColor: 'inherit',
     color: '#54b0fc',
     width: 30,
     height: 30,
@@ -55,7 +133,7 @@ const useStyles = makeStyles({
       backgroundColor: '#54b0fc',
       color:'#ffffff'
     }
-  },
+  },  
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -68,7 +146,33 @@ const useStyles = makeStyles({
   },
   player: {
     backgroundColor: '#deffa9',
-  }
+  },
+  playerActive: {
+    backgroundColor: '#ced8d7',
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },    
 });
 
 interface IMessageRightVideo {
@@ -79,16 +183,67 @@ interface IMessageRightVideo {
 
 const MessageRightVideo = ({ url,updatedAt,fullType }:IMessageRightVideo) => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Link')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }    
  
   return (
     <div className={classes.container}>
-      <div className={classes.wrapper}>
+      <div onContextMenu={(e) => handleContextMenu(e)}
+        className={selected? classes.wrapperActive:classes.wrapper}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
-        <Player className={classes.player}  playsInline  src={url}/>
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+        <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl} open={open} onClose={handleClose}>        
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Video link
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete message
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}          
       </div>
     </div>    
 )};

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useSelector } from 'react-redux';
+import { useSelector,useDispatch } from 'react-redux';
 import Paper from '@mui/material/Paper';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -14,6 +14,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import { getChat } from '../../../../../../redux/chat/selector'
+import { asyncGetChatById } from '../../../../../../redux/chat/operations';
 import { muteChat,sortChat } from '../../../../../../api-data'
 import { copied,firstLetter,slicedWord } from '../../../../../../helpers';
 
@@ -27,9 +28,13 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 const ProfileMenu = () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)
   const handleMute = () => muteChat(companionId)
-  const handleSort = () => sortChat(companionId)
+    const handleSort = () => {
+    sortChat(companionId)
+    dispatch(asyncGetChatById(companionId))
+  }
   const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}
         ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`
   return (
@@ -57,7 +62,7 @@ const ProfileMenu = () => {
             <SortIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText primary={`Sort by Date`} />
-          <Switch style={{ cursor:'pointer'}} onClick={handleSort} {...label} defaultChecked={sort} />
+          <Switch style={{ cursor:'pointer'}} onClick={handleSort} {...label} checked={sort} />
         </MenuItem>
         <Divider variant="inset"/>        
         <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>

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

@@ -4,12 +4,16 @@ import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch,useSelector } from "react-redux";
 
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../redux/messages/selector'
+import { getChat } from '../../../../../../redux/chat/selector'
+import { asyncGetChatById } from '../../../../../../redux/chat/operations';
+import { sortChat } from '../../../../../../api-data';
 import StaticDatePicker from "./StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({
@@ -48,11 +52,13 @@ const useStyles = makeStyles({
     height:'7vh'
   },
   searchBar: {
-  outline: '2px solid  #2184f7',
-  color: '#2184f7',
+    outline: '2px solid  #2184f7',
+    color: '#2184f7',
   },
 })
 
+const label = { inputProps: { 'aria-label': 'Switch demo' } };
+
 interface ISearch {
   handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
   value: string,
@@ -63,9 +69,14 @@ interface ISearch {
 const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const dispatch = useDispatch()
   const classes = useStyles()
+  const { sort,companionId } = useSelector(getChat)
   const messages = useSelector(getMessages)
   const disabled = messages.length > 0 ? false : true
   const handleOnOpen = () => setDate('')
+  const handleSort = () => {
+    sortChat(companionId)
+    dispatch(asyncGetChatById(companionId))
+  }
 
   return (
     <Toolbar className={classes.toolBar} >
@@ -89,6 +100,7 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
         changeDate={setDate} handleOnOpen={handleOnOpen} />        
         <CalendarTodayIcon fontSize='medium' />
       </IconButton>
+      <Switch onClick={handleSort} checked={sort} {...label} /> 
     </Toolbar>
     )
 }

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

@@ -11,7 +11,9 @@ import Divider from '@mui/material/Divider';
 import Search from './Search'
 import AlertInfo from "../../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../../redux/messages/selector'
-import { timeStampEU,timeStampFilter,firstLetter,slicedWord } from '../../../../../helpers'
+import { getChat } from '../../../../../redux/chat/selector'
+import { timeStampEU, timeStampFilter, firstLetter, slicedWord, handleSort } from '../../../../../helpers'
+import { TMessages } from '../../../../../typescript/redux/messages/types';
 
 const useStyles = makeStyles({
   container: {
@@ -31,12 +33,13 @@ const useStyles = makeStyles({
 
 const SearchList= () => {
     const classes = useStyles()
+    const { sort } = useSelector(getChat)
     const messages = useSelector(getMessages)
     const [value, setValue] = useState<string>('')
     const [date, setDate] = useState<any>('');
     const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
 
-    const filteredMessages = () => messages.filter((el) => {
+    const filteredMessages = (arr:TMessages) => arr.filter((el) => {
       if (!date) {
         return el.message.toLowerCase().includes(value.toLowerCase())
       } else if (el.message.toLowerCase().includes(value.toLowerCase())
@@ -44,7 +47,7 @@ const SearchList= () => {
         return el
       }
     })
-  const arr = filteredMessages()
+  const arr:TMessages =  filteredMessages(handleSort('updatedAt',messages,sort))
 return (
    <div className={classes.container}>
     <Search handleSearch={handleSearch} value={value}