done to select messages

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

@@ -22,24 +22,22 @@ interface IUploadFile {
   setFile: any,
   setValue: any,
   accept: string,
-  type: string,
-  setType:any
+  setType: any,
+  prevType: string | undefined
 }
   
-const UploadFile = ({children,setFile,setValue,accept,type,setType}:IUploadFile) => {
+const UploadFile = ({children,setFile,setValue,accept,setType,prevType}:IUploadFile) => {
   const classes = useStyles()
-    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
-        noDrag: true,
-        accept
-    });
-      useEffect(() => {
-        if (acceptedFiles.slice(-1)[0]) {
-          setValue('')
-          setFile(acceptedFiles.slice(-1)[0])
-          setType(type)
-        }
-      }, [setFile,setValue,setType,type,acceptedFiles])
-  
+  const onFileDialogCancel = () => setType(prevType)
+  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
+      noDrag: true,accept,onFileDialogCancel});
+  useEffect(() => {
+    if (acceptedFiles.slice(-1)[0]) {
+      setValue('')
+      setFile(acceptedFiles.slice(-1)[0])
+    }
+  }, [setFile,setValue,acceptedFiles])
+
     return (
     <div className={classes.container} >
       {children}

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

@@ -4,6 +4,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { makeStyles } from '@material-ui/core'
+import { usePrevious } from '../../../../../hooks';
 import UploadFile from './UploadFile'
 
 const useStyles = makeStyles({
@@ -24,23 +25,28 @@ interface IFilesMenu {
   setIsOpenMenu: any,
   setFile: any,
   setValue: any,
-  setType: any
+  setType: any,
+  type: string
 }
-const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
+const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType,type}:IFilesMenu) => {
   const classes = useStyles()
-  const handleClose = () => setIsOpenMenu(false)
+  const prevType = usePrevious(type);
+  const handleClose = (typeFile:string) => {
+    setIsOpenMenu(false)
+    setType(typeFile)
+  }
   return (
     <MenuList className={classes.list}>
-      <MenuItem onClick={handleClose}>
-        <UploadFile setFile={setFile} setValue={setValue} type='content' setType={setType} accept='image/*,video/*,audio/*'>
+      <MenuItem onClick={() => handleClose('content')}>
+        <UploadFile setFile={setFile} setValue={setValue} setType={setType} prevType={prevType} accept='image/*,video/*,audio/*'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText className={classes.listText}>Upload Image/Audio/Video</ListItemText>
         </UploadFile>
       </MenuItem>
-      <MenuItem onClick={handleClose}>
-        <UploadFile setFile={setFile} setValue={setValue} type='application' setType={setType} accept='application/pdf,
+      <MenuItem onClick={() => handleClose('application')}>
+        <UploadFile setFile={setFile} setValue={setValue} setType={setType} prevType={prevType} accept='application/pdf,
         application/vnd.openxmlformats-officedocument.wordprocessingml.document'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />

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

@@ -11,6 +11,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
@@ -54,8 +56,9 @@ const StyledMenu = styled((props:any) => (
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-start",
+    display: "flex",
+    justifyContent: "flex-start",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -243,6 +246,8 @@ const useStyles = makeStyles({
    },
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageLeftAudio {
   url:string,
   createdAt: string,
@@ -250,15 +255,19 @@ interface IMessageLeftAudio {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }: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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -287,11 +296,13 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   } 
 
   return (
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{ pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
          <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
-          <ReactAudioPlayer className={classes.player}
+         <ReactAudioPlayer className={classes.player}
             src={url} controls
           />
         <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
@@ -313,7 +324,15 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             <ContentCopyIcon />
              Copy Audio link
           </MenuItem>
-        </CopyToClipboard>           
+        </CopyToClipboard>
+          CheckBoxIcon
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>          
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -10,6 +10,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -56,6 +58,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-start",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -260,6 +263,8 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageLeftFile {
   url:string,
   createdAt: string,
@@ -267,16 +272,20 @@ interface IMessageLeftFile {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageLeftFile) => {
   const classes = useStyles();
   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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleOpenRead = () => !read&&setRead(true)
   const handleCloseRead = () => read && setRead(false)
   const handleClose = (type: string | undefined): void => {
@@ -307,7 +316,8 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
   }   
 
   return (
-    <div className={classes.container} style={{marginBottom:caption?43:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
@@ -317,7 +327,8 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
          />
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
         {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
         <a href={url} target="_blank" rel="noreferrer" download>
@@ -342,6 +353,13 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
              Copy File link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -11,6 +11,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -55,6 +57,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-start",
+    borderRadius: 7,
   },
   wrapper: {
     width: 400,
@@ -291,6 +294,8 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessagesLeftImage {
   url:string,
   createdAt:string,
@@ -298,17 +303,21 @@ interface IMessagesLeftImage {
   fullType: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,  
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}: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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleOpenWatch = () => !watch&&setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   const handleClose = (type: string | undefined): void => {
@@ -347,9 +356,11 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <img width='100%' height='auto' alt='imageItem' src={url} />
        </div>
     </div>  :
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <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' />
@@ -373,6 +384,13 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
              Copy Image link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem> 
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -8,6 +8,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -52,6 +54,7 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-start",
+      borderRadius: 7,
     },
     wrapper: {
       position: 'relative',
@@ -236,6 +239,7 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftText {
   message:string,
@@ -245,15 +249,19 @@ interface IMessageLeftText {
   caption: string,
   emoji: string,
   emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,
   _id:string
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,_id}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}: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 checked = isSelected(_id)
   
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Message')
@@ -283,10 +291,11 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   } 
   
   return (
-  <div className={classes.container} style={{marginBottom:caption?45:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':undefined,
-        border:selected?'#babdbc':undefined}}>
+        border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
           <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
@@ -313,6 +322,13 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
              Copy message
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>  
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -10,6 +10,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -55,6 +57,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-start",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -247,23 +250,28 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageLeftVideo {
   url:string,
   createdAt: string,
   fullType: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,  
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }: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 checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -292,9 +300,11 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   } 
 
   return (
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
         <Player className={selected?classes.playerActive:classes.player}  playsInline src={url}/>
         <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
@@ -317,6 +327,13 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
              Copy Video link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem> 
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -9,6 +9,8 @@ import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -55,6 +57,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -242,22 +245,28 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageRightAudio {
   url:string,
   createdAt: string,
   fullType: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,  
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected, }: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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -286,9 +295,11 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
   } 
 
   return (
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
         <ReactAudioPlayer className={classes.player} 
           src={url}
@@ -314,6 +325,13 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
              Copy Audio link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -10,6 +10,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -56,6 +58,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -260,23 +263,29 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageRightFile {
   url:string,
   createdAt: string,
   type: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,  
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }:IMessageRightFile) => {
+const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }:IMessageRightFile) => {
   const classes = useStyles();
   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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleOpenRead = () => !read&&setRead(true)
   const handleCloseRead = (e: any) => {
     console.log(e)
@@ -310,7 +319,8 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
   } 
 
   return (
-    <div className={classes.container} style={{marginBottom:caption?43:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
@@ -320,7 +330,8 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
          />
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
         {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
         <a href={url} target="_blank" rel="noreferrer" download>
@@ -345,6 +356,13 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
              Copy File link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -11,6 +11,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -55,6 +57,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
+    borderRadius: 7,
   },
   wrapper: {
     width: 400,
@@ -291,6 +294,8 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageRightImage {
   url:string,
   createdAt:string,
@@ -298,17 +303,21 @@ interface IMessageRightImage {
   fullType: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,  
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}: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 open = Boolean(anchorEl);
+  const checked = isSelected(_id)
   const handleOpenWatch = () => !watch&&setWatch(true)
   const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   const handleClose = (type: string | undefined): void => {
@@ -347,9 +356,11 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <img width='100%' height='auto' alt='imageItem' src={url} />
        </div>
     </div>  :
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <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' />
@@ -373,6 +384,13 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
              Copy Image link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -8,6 +8,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr } from '../../../../../../helpers'
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
@@ -52,6 +54,7 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-end",
+      borderRadius: 7,
     },
     wrapper: {
       position: 'relative',
@@ -236,6 +239,8 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageRightText {
   message:string,
   name:string,
@@ -243,17 +248,20 @@ interface IMessageRightText {
   createdAt: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string, 
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,_id}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id}: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 checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Message')
     if (type === 'delete') setModal(true)
@@ -282,10 +290,11 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   }  
 
   return (
-  <div className={classes.container} style={{marginBottom:caption?45:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':undefined,
-        border:selected?'#ced8d7':undefined}}>
+        border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
         <CopyToClipboard onCopy={() => copied('Message')} text={message}>
           <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
         </CopyToClipboard>
@@ -312,6 +321,13 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
              Copy message
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -10,6 +10,8 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
@@ -54,9 +56,9 @@ const StyledMenu = styled((props:any) => (
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-end",
-      marginBottom:15
+    display: "flex",
+    justifyContent: "flex-end",
+    borderRadius: 7,
   },
   wrapper: {
     position: 'relative',
@@ -249,23 +251,28 @@ const useStyles = makeStyles({
    },  
 });
 
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
 interface IMessageRightVideo {
   url:string,
   createdAt: string,
   fullType: string,
   caption: string,
   emoji: string,
-  emojiCompanion: string,   
+  emojiCompanion: string,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
   _id:string
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,_id }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,isSomeSelected,isSelected,handleSelected,_id }: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 checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -294,9 +301,11 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
   } 
  
   return (
-    <div className={classes.container} style={{marginBottom:caption?40:15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+      {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected? classes.wrapperActive:classes.wrapper}>
+        className={selected ? classes.wrapperActive : classes.wrapper}
+        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
         <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
         <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
@@ -319,6 +328,13 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
              Copy Video link
           </MenuItem>
         </CopyToClipboard>
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete message

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

@@ -268,7 +268,7 @@ const useStyles = makeStyles({
 });
 
 interface ISendMessage{
-    isArrow: boolean,
+  isArrow: boolean,
 }
 
 const SendMessage = ({isArrow }:ISendMessage) => {
@@ -310,7 +310,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
       isOpenEmoji && setIsOpenEmoji(false)
       isOpenCaption && setIsOpenCaption(false)
     }
-    const sentMessage = async () => {
+  const sentMessage = async () => {
         if (value) sentMessageById(companionId, value,caption.trim())
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
@@ -495,7 +495,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
                     <div className={classes.filesMenu} style={{left: rightIsOpen?'52.5vw':'65vw'}}>
-                      <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
+                      <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType} type={type}/>
                     </div>
                 </div>
                    {isOpenCamera &&

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

@@ -28,7 +28,7 @@ import { timeStampFilter,prodAwsS3,refreshAppTime } from "../../../../helpers";
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
-    container: {
+  container: {
       height: '93vh',
       width: "100%",
       display: "flex",
@@ -69,12 +69,19 @@ const useStyles = makeStyles({
       justifyContent: 'center',
       paddingTop: 30,
   },  
-    messagesBody: {
+  messagesBody: {
       width: "60%",
-  },  
+  },   
 });
 
-const ChatBar = () => {
+interface IChatBar {
+  selectedArr: string[] | [],
+  setSelectedArr: React.Dispatch<React.SetStateAction<string[] | []>>,
+  isSomeSelected: boolean,
+  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
+}
+
+const ChatBar = ({selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected}:IChatBar) => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messages = useSelector(getMessagesMemo)
@@ -84,7 +91,14 @@ const ChatBar = () => {
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   const divRef = useRef<any | null>(null)
-  let time:any
+  let time: any
+  const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
+  const handleSelected = (_id: string) => {
+    !isSomeSelected&&setIsSomeSelected(true)
+    if (selectedArr.some((el: string) => el === _id)) 
+      setSelectedArr(selectedArr.filter((el:string) => el !== _id))
+     else setSelectedArr([...selectedArr,_id])
+  }
   const handleScrollTo = () => {
      divRef.current&&divRef.current.scrollTo({
      top: divRef.current.scrollHeight,
@@ -127,7 +141,7 @@ const ChatBar = () => {
       const { scrollHeight, clientHeight } = divRef.current
       if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
     }
-  }, [total,seen,companionId]);
+  }, [total, seen, companionId]);
 
   return (
     <div className={classes.container} >
@@ -157,6 +171,9 @@ const ChatBar = () => {
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
+               isSomeSelected={isSomeSelected}
+               isSelected={isSelected}
+               handleSelected={handleSelected}
                _id={_id}
                  /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -169,6 +186,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -180,6 +200,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -191,6 +214,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}              
                 _id={_id}
                   /></div>)
             if (type) return (<div key={createdAt}>
@@ -202,6 +228,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}              
                 _id={_id}
                   /></div>)             
           } else {
@@ -215,6 +244,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
                 _id={_id}
                   /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -227,6 +259,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -238,6 +273,9 @@ const ChatBar = () => {
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -249,6 +287,9 @@ const ChatBar = () => {
                  caption={caption}
                  emoji={emoji}
                  emojiCompanion={emojiCompanion}
+                 isSomeSelected={isSomeSelected}
+                 isSelected={isSelected}
+                 handleSelected={handleSelected}
                  _id={_id}
                    /></div>)
             if (type) return (<div key={createdAt}>
@@ -260,6 +301,9 @@ const ChatBar = () => {
                  caption={caption}
                  emoji={emoji}
                  emojiCompanion={emojiCompanion}
+                 isSomeSelected={isSomeSelected}
+                 isSelected={isSelected}
+                 handleSelected={handleSelected}
                  _id={_id}
                    /></div>)            
           }

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

@@ -8,6 +8,7 @@ import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
 import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 import { getChat } from '../../../../../../redux/chat/selector'
 import { muteChat } from '../../../../../../api-data'
@@ -48,8 +49,12 @@ const StyledMenu = styled((props:any) => (
   },
 }));
 
+interface IMenuList {
+  setModal:any,
+  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
+}
 
-const MenuList = ({setModal}:{setModal:any}) => {
+const MenuList = ({setModal,setIsSomeSelected}:IMenuList) => {
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const open = Boolean(anchorEl);
   const { companionId, mute } = useSelector(getChat)
@@ -80,6 +85,13 @@ const MenuList = ({setModal}:{setModal:any}) => {
           {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
           {mute ? 'Unmute':'Mute'}
         </MenuItem>
+        <MenuItem onClick={() => {
+            setIsSomeSelected(true)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select message
+        </MenuItem>        
         <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('deleteModal')}>
             <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
             Delete chat

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

@@ -15,7 +15,11 @@ const useStyles = makeStyles({
   }, 
 })
 
-const Buttons = () => {
+interface IButtons {
+  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
+}
+
+const Buttons = ({setIsSomeSelected}:IButtons) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [modal,setModal] = useState<boolean>(false)
@@ -25,7 +29,7 @@ const Buttons = () => {
       <IconButton onClick={() => dispatch(actionRightIsOpen('search'))} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>
-      <MenuList setModal={setModal}/>
+      <MenuList setModal={setModal} setIsSomeSelected={setIsSomeSelected}/>
        {modal&&<DeleteModal setModal={setModal}/>}      
     </Stack>
   );

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

@@ -1,6 +1,8 @@
 import Toolbar from '@mui/material/Toolbar'
 import AppBar from '@mui/material/AppBar';
 import { makeStyles } from '@material-ui/core'
+import Button from '@mui/material/Button';
+import { useState } from 'react';
 
 import Credentials from './Credentials'
 import Buttons from './Buttons'
@@ -13,17 +15,93 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
     height:'7vh'
   },
+  buttonDelete: {
+    color: '#f8f8f8',
+    backgroundColor:'#1d74c5',
+  },
+  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',
+  },  
 })
 
-const HeaderBar = () => {
+interface IHeaderBar {
+  selectedArr: string[] | [],
+  isSomeSelected: boolean,
+  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
+  handleClearSelect: () => void
+}
+
+const HeaderBar = ({selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect}:IHeaderBar) => {
   const classes = useStyles()
-    return (
+  const [modal, setModal] = useState<boolean>(false)
+  const handleOpenModal = (): void => setModal(true)
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay') return setModal(false)
+    if (id === 'cancel') {
+      handleClearSelect()
+      setModal(false)
+    }
+    if (id === 'delete') {
+      // fetch on server
+      handleClearSelect()
+      setModal(false)
+    }
+  }    
+
+    return (!isSomeSelected?
       <AppBar position="static">
         <Toolbar className={classes.toolBar}>
           <Credentials/>
-          <Buttons/>
+          <Buttons setIsSomeSelected={setIsSomeSelected}/>
+        </Toolbar>
+      </AppBar> :
+      <AppBar position="static">
+        <Toolbar className={classes.toolBar}>
+          <Button color='primary' onClick={handleOpenModal}
+            variant="contained" className={classes.buttonDelete}
+            style={{visibility: selectedArr.length === 0 ? 'hidden' : 'visible',
+              fontWeight:500}}>
+            {`DELETE ${selectedArr.length}`}
+          </Button>
+          <Button onClick={handleClearSelect} style={{color:'#1d74c5',fontWeight:500}}>
+            CANCEL
+          </Button>
         </Toolbar>
-      </AppBar>        
+        {modal &&
+        <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+          <div className={classes.modalDelete}>
+            <h3 style={{color: '#2c2c2c'}}>Delete messages</h3>
+            <p style={{ color: '#050505' }}>Are you sure you want to delete messages?</p>
+            <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+              DELETE MESSAGES
+            </Button>         
+            <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+               CANCEL
+            </Button>
+          </div>  
+        </div>}         
+      </AppBar>      
     )
 }
 

src/components/HomePage/CentralBar/index.tsx

@@ -1,5 +1,6 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
+import { useState } from 'react'
 
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
@@ -13,14 +14,20 @@ const useStyles = makeStyles({
 
 const CentralBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
   const classes = useStyles()
+  const [selectedArr, setSelectedArr] = useState<string[] | []>([])
+  const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
+  const handleClearSelect = () => {
+    selectedArr.length > 0 &&setSelectedArr([])
+    isSomeSelected&&setIsSomeSelected(false)
+  }
 
     return ( 
      <Grid item lg={rightIsOpen?8:12}>
         <Grid item lg={12} >
-          <HeaderBar/>
+          <HeaderBar selectedArr={selectedArr} isSomeSelected={isSomeSelected} handleClearSelect={handleClearSelect} setIsSomeSelected={setIsSomeSelected}/>
         </Grid>          
         <Grid item lg={12} className={classes.chatBar}>
-          <ChatBar />
+          <ChatBar selectedArr={selectedArr} setSelectedArr={setSelectedArr} isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}/>
         </Grid>
       </Grid>
     )   

src/hooks/index.tsx

@@ -0,0 +1,13 @@
+import { useRef,useEffect } from 'react';
+
+const usePrevious = (typeFile: string): string | undefined => {
+  const ref = useRef<string | undefined>();
+    useEffect(() => {
+      ref.current = typeFile;
+    });
+    return ref.current;
+};
+
+export {
+  usePrevious
+}