work visualy on chat

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

@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
-import { IconButton } from "@material-ui/core";
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
 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';
@@ -19,7 +19,7 @@ import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -70,13 +70,24 @@ const useStyles = makeStyles({
   }, 
   wrapper: {
     position: 'relative',
+    display: 'flex',
+    flexWrap:'wrap',
+    padding: '12px 5px 18px 5px',
+    width:350,
+    backgroundColor: "#ffffff",
+    borderRadius: 7,
+  },
+  wrapperInner: {
     display: 'flex',
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 15px 5px',
-    backgroundColor: '#ffffff',
-    borderRadius: 7,
+    width:'100%'
+  },
+    message: {
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
       "&:after": {
         content: "''",
         position: "absolute",
@@ -98,17 +109,12 @@ const useStyles = makeStyles({
         borderRight: "16px solid transparent",
         bottom: "0px",
         left: "-17px"
-      }    
+      }      
   },
-  wrapperActive: {
-    position: 'relative',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
-    alignItems: 'center',
-    padding: '12px 5px 15px 5px',
-    backgroundColor: '#babdbc',
-    borderRadius: 7,
+    messageActive: {
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
       "&:after": {
         content: "''",
         position: "absolute",
@@ -130,21 +136,18 @@ const useStyles = makeStyles({
         borderRight: "16px solid transparent",
         bottom: "0px",
         left: "-17px"
-      }    
-  },
-  bntDownload: {
-    backgroundColor: 'inherit',
+      }      
+  },      
+  folderIcon: {
     color: '#54b0fc',
-    width: 30,
-    height:30,
+    cursor: 'pointer',
     '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
-  },
+      color: '#016cc3'
+    },
+  },  
   player: {
-    margin: '0 5px 0 5px',
-    borderRadius:7
+    margin: '0px 5px 0px 0px',
+    borderRadius: 7,
   },
   time: {
     position: "absolute",
@@ -156,42 +159,6 @@ const useStyles = makeStyles({
     padding: 3,
     borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 410,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -268,7 +235,9 @@ const useStyles = makeStyles({
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftAudio {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   fullType: string,
   caption: string,
@@ -284,7 +253,7 @@ interface IMessageLeftAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -322,15 +291,21 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected ? classes.wrapperActive : classes.wrapper}
-        style={{ pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
-         <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
-         <ReactAudioPlayer className={classes.player}
-            src={url} controls
-          />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>
+        className={classes.wrapper} style={{
+          backgroundColor: selected ? '#babdbc' : undefined,
+          pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
+         <Typography style={{color: "#42aee0",marginBottom:4}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <AudioFileIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <ReactAudioPlayer className={classes.player} src={url} controls />
+        </div>
+        {caption && <ListItemText className={selected?classes.messageActive:classes.message}
+           primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -398,7 +373,6 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState,useRef } from "react";
-import { IconButton } from "@material-ui/core";
+import { useState, useRef } from "react";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -72,52 +72,46 @@ const useStyles = makeStyles({
   wrapper: {
     position: 'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 200,
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    maxWidth: 450,
+    minWidth:200,
     padding: '5px 5px 22px 5px',
     backgroundColor: '#ffffff',
-    borderRadius: 7,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }     
+    borderRadius: 7, 
   },
-  wrapperActive: {
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 200,
-    padding: '5px 5px 22px 5px',
-    backgroundColor: '#babdbc',
-    borderRadius: 7,
+    alignContent: 'center',
+    width: '100%',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
+  },   
+  time: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      right: 6,
+      color: '#414141',
+      padding: 3,
+      borderRadius: 5,
+  },
+    message: {
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
       "&:after": {
         content: "''",
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "15px solid #babdbc",
+        borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
         bottom: '0px',
@@ -128,63 +122,26 @@ const useStyles = makeStyles({
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "17px solid #babdbc",
+        borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
         bottom: "0px",
         left: "-17px"
-      }     
-  },  
-  bntDownload: {
-    backgroundColor: 'inherit',
-    color: '#54b0fc',
-    width: 30,
-    height:30,
-    '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
-  },
-  title: {
-    margin: '0 30px 0 5px',
-    color: '#0e0d0d',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#54b0fc',
-    }
-  },
-  time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+      }      
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 230,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
+    messageActive: {
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
       "&:after": {
         content: "''",
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "15px solid #deffa9",
+        borderBottom: "15px solid #babdbc",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0px",
+        bottom: '0px',
         left: "-15px"
       },
       "&:before": {
@@ -192,13 +149,13 @@ const useStyles = makeStyles({
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "17px solid #deffa9",
+        borderBottom: "17px solid #babdbc",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
         bottom: "0px",
         left: "-17px"
       }      
-  }, 
+  },   
   overlay: {
     position: 'absolute',
     top: 0,
@@ -314,13 +271,23 @@ const useStyles = makeStyles({
     left: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftFile {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   type: string,
   caption: string,
@@ -336,7 +303,7 @@ interface IMessageLeftFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -360,7 +327,10 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
       setScale(scale-0.25)
     }
   }   
-  const handleOpenRead = () => !read&&setRead(true)
+  const handleOpenRead = (e: any) => {
+    const id = e.target.id
+    if(id === 'read') !read&&setRead(true)
+  }
   const handleCloseRead = (e:any) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'close') {
@@ -413,16 +383,21 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
           />
         </div>
       </div>}
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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>
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner} id='read' onClick={handleOpenRead}>
+          <a href={url} target="_blank" rel="noreferrer" download>
+           <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />
+          </a>
+          {!read && <span id='read'>Read File</span>} 
+        </div>
+        {caption && <ListItemText className={selected ? classes.messageActive : classes.message}
+          primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+          secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -490,7 +465,6 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>        
 )};
 

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState,useRef } from "react";
+import { useState, useRef } from "react";
+import Typography from '@mui/material/Typography';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
@@ -78,72 +79,24 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    justifyContent: 'space-between',
+    flexWrap: 'wrap',
     borderRadius: 7,
     padding: '12px 5px 18px 5px',
-    backgroundColor: '#ffffff',
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }     
+    backgroundColor: '#ffffff',   
   },
-  wrapperActive: {
-    width: 400,
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    justifyContent: 'space-between',
+    width: '100%',
+  },  
+  image: {
     borderRadius: 7,
-    padding: '12px 5px 18px 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"
-      }     
+    width: 300,
+    maxHeight: 400,
+    cursor: 'pointer',
   },  
-    image: {
-      borderRadius: 7,
-      width: 300,
-      maxHeight: 400,
-      cursor: 'pointer',
-    },  
     time: {
       position: "absolute",
       fontSize: ".65em",
@@ -153,42 +106,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-  },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 430,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
   },     
   bntDownload: {
     backgroundColor: 'inherit',
@@ -351,7 +268,15 @@ const useStyles = makeStyles({
     left: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -468,15 +393,20 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
       </div>
     </div>  :
     <div className={classes.container}>
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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' />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>       
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <ImageIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+            style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
+        </div>
+        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}       
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -544,7 +474,6 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}        
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>)
 };
 

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

@@ -80,7 +80,6 @@ const useStyles = makeStyles({
     padding: "10px",
     paddingBottom:18,
     backgroundColor: "#ffffff",
-    border: "1px solid #f0f0f0",
     borderRadius: 7,
   },
   wrapperInner: {
@@ -88,7 +87,11 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
+    width: '100%',
+    cursor: 'pointer',
+     '&:hover': {
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
   },
   wrapperInnerMessage: {
     display: 'flex',
@@ -123,7 +126,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },
@@ -150,7 +153,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #babdbc",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },    
@@ -172,42 +175,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 474,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },   
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -375,14 +342,13 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
   return (
     <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-        style={{backgroundColor:selected?'#babdbc':undefined,
-        border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{marginLeft:55,color: "#42aee0"}} variant="h6" align="right">
+        style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${replyMessage} , Caption: ${replyCaption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -395,20 +361,24 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.replyColumn}></div>
           <div className={classes.wrapperInnerMessage}>
-            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+            <Typography style={{color: "#00b333"}} variant="h6" align="right">
+             {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
-              primaryTypographyProps={{color: "#00b333"}}
-              secondary={replyMessage}
-              secondaryTypographyProps={{ color: "#626262" }} />
+            </Typography>
+            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
+              primary='Message' primaryTypographyProps={{color: "#00b333"}}
+              secondary={replyMessage} secondaryTypographyProps={{ color: "#626262" }} />
               {replyCaption&&<ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
                primary='Caption' primaryTypographyProps={{color: "#00b333"}}
                secondary={replyCaption} secondaryTypographyProps={{ color: "#626262" }}/>}
           </div>
         </div>        
-        <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={message}
-          primaryTypographyProps={{color: "#626262"}}/>        
+        <div className={selected?classes.messageActive:classes.message}>
+          <ListItemText primary='Message' primaryTypographyProps={{ color: "#42aee0" }}
+            secondary={message} secondaryTypographyProps={{ color: "#2f2f2f" }} />
+          {caption && <ListItemText primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        </div>        
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -435,7 +405,7 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text
@@ -476,7 +446,6 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
   </div>    
 )};  
 

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

@@ -76,7 +76,6 @@ const useStyles = makeStyles({
     padding: "10px",
     paddingBottom:18,
     backgroundColor: "#ffffff",
-    border: "1px solid #f0f0f0",
     borderRadius: 7,
   },
   wrapperInner: {
@@ -84,7 +83,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     width:'100%'
-  },    
+  },   
     message: {
       wordBreak:'break-word',
       textAlign: "left",
@@ -108,7 +107,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },
@@ -135,7 +134,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #babdbc",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },     
@@ -148,43 +147,7 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-  },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 474,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },   
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -324,18 +287,22 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   return (
     <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#babdbc':undefined,
-        border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{marginLeft:40,color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          <CopyToClipboard onCopy={() => copied('Message')} text={message}>
+          <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>
-          <ListItemText className={selected?classes.messageActive:classes.message}
-            secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
+          <div className={selected?classes.messageActive:classes.message}>
+            <ListItemText primary='Message' primaryTypographyProps={{color: "#42aee0"}}
+              secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
+              {caption&&<ListItemText className={selected?classes.messageActive:classes.message}
+               primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+               secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+          </div>
         </div>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
@@ -363,7 +330,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text
@@ -404,7 +371,6 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
   </div>    
 )};  
 

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

@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
-import { IconButton } from "@material-ui/core";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
 import VideoFileIcon from '@mui/icons-material/VideoFile';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -17,7 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
 const StyledMenu = styled((props:any) => (
@@ -70,68 +70,20 @@ const useStyles = makeStyles({
   wrapper: {
     position: 'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
+    alignContent: 'center',
+    flexWrap: 'wrap',
     width: 400,
     padding: '12px 5px 18px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }    
   },
-  wrapperActive: {
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 400,
-    padding: '12px 5px 18px 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"
-      }    
+    alignContent: 'center',
+    width: '100%',
   },  
   bntDownload: {
     backgroundColor: 'inherit',
@@ -154,42 +106,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 430,
-      fontWeight:600,
-      borderRadius: 5,
-      marginLeft:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#deffa9',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },  
   player: {
     backgroundColor: '#ffffff',
   },
@@ -266,13 +182,23 @@ const useStyles = makeStyles({
     left: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },    
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftVideo {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   fullType: string,
   caption: string,
@@ -288,7 +214,7 @@ interface IMessageLeftVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -324,14 +250,19 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
 
   return (
     <div className={classes.container}>
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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}  >
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <VideoFileIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
+        </div>
+        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -399,7 +330,6 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -1,9 +1,9 @@
 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 ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
 import ReactAudioPlayer from 'react-audio-player';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -18,7 +18,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -65,84 +65,87 @@ const useStyles = makeStyles({
     borderRadius: 7,
     position: 'relative',
     marginBottom: 5,
-    padding: '10px 22px 10px 0px',
+    padding:'10px 0px 10px 22px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
-    alignItems: 'center',
-    padding: '12px 5px 15px 5px',
+    flexWrap:'wrap',
+    padding: '12px 5px 18px 5px',
+    width:350,
     backgroundColor: '#deffa9',
     borderRadius: 7,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }    
   },
-  wrapperActive: {
-    position: 'relative',
+  wrapperInner: {
     display: 'flex',
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 15px 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"
-      }    
+    width:'100%'
+  },
+  message: {
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+    "&:after": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "15px solid #deffa9",
+      borderLeft: "15px solid transparent",
+      borderRight: "15px solid transparent",
+      bottom: "0px",
+      right: "-15px"
+    },
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "17px solid #deffa9",
+      borderLeft: "16px solid transparent",
+      borderRight: "16px solid transparent",
+      bottom: "0px",
+      right: "-17px"
+    },
   },
-  bntDownload: {
-    backgroundColor: 'inherit',
+  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: "0px",
+      right: "-17px"
+    }
+  },  
+  folderIcon: {
     color: '#54b0fc',
-    width: 30,
-    height:30,
+    cursor: 'pointer',
     '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
-  },
+      color: '#016cc3'
+    },
+  },  
   player: {
-    margin: '0 5px 0 5px',
+    margin: '0px 5px 0px 0px',
     borderRadius: 7,
   },
   time: {
@@ -155,42 +158,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#414141',
-      maxWidth: 410,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
-  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -267,7 +234,9 @@ const useStyles = makeStyles({
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightAudio {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   fullType: string,
   caption: string,
@@ -283,7 +252,7 @@ interface IMessageRightAudio {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,name,lastName,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply,handleForward }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -319,17 +288,20 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
 
   return (
     <div className={classes.container}>
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        className={selected ? classes.wrapperActive : classes.wrapper}
-        style={{pointerEvents:isSomeSelected?'none':'auto'}}>
-        <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
-        <ReactAudioPlayer className={classes.player} 
-          src={url}
-          controls
-         />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+        style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
+        <Typography style={{color: "#42aee0",marginBottom:4}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <AudioFileIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <ReactAudioPlayer className={classes.player} src={url} controls />
+        </div>
+        {caption && <ListItemText className={selected?classes.messageActive:classes.message}
+           primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -397,7 +369,6 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         </div>  
       </div>}          
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState,useRef } from "react";
-import { IconButton } from "@material-ui/core";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -72,87 +72,80 @@ const useStyles = makeStyles({
   wrapper: {
     position: 'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 200,
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    maxWidth: 450,
+    minWidth:200,
     padding: '5px 5px 22px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }    
   },
-  wrapperActive:  {
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 200,
-    padding: '5px 5px 22px 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: 'inherit',
-    color: '#54b0fc',
-    width: 30,
-    height:30,
-    '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
-  }, 
-  title: {
-    margin: '0 30px 0 5px',
-    color: '#0e0d0d',
+    alignContent: 'center',
+    width: '100%',
     cursor: 'pointer',
     '&:hover': {
-      color: '#54b0fc',
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
+  },  
+  message: {
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+    "&:after": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "15px solid #deffa9",
+      borderLeft: "15px solid transparent",
+      borderRight: "15px solid transparent",
+      bottom: "0px",
+      right: "-15px"
+    },
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "17px solid #deffa9",
+      borderLeft: "16px solid transparent",
+      borderRight: "16px solid transparent",
+      bottom: "0px",
+      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: "0px",
+      right: "-17px"
+    }
+  },   
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -163,42 +156,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#626262',
-      maxWidth: 230,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
-  },  
   overlay: {
     position: 'absolute',
     top: 0,
@@ -314,13 +271,23 @@ const useStyles = makeStyles({
     right: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightFile {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   type: string,
   caption: string,
@@ -336,7 +303,7 @@ interface IMessageRightFile {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightFile) => {
+const MessageRightFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -360,7 +327,10 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
       setScale(scale-0.25)
     }
   }    
-  const handleOpenRead = () => !read&&setRead(true)
+  const handleOpenRead = (e: any) => {
+    const id = e.target.id
+    if(id === 'read') !read&&setRead(true)
+  }
   const handleCloseRead = (e:any) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'close') {
@@ -413,16 +383,21 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
          />
         </div>
       </div>}
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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>
-           <IconButton className={classes.bntDownload}>
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner} id='read' onClick={handleOpenRead}>
+          <a href={url} target="_blank" rel="noreferrer" download>
+           <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />
+          </a>
+          {!read && <span id='read'>Read File</span>} 
+        </div>
+        {caption && <ListItemText className={selected ? classes.messageActive : classes.message}
+          primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+          secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -490,7 +465,6 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -1,10 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState,useRef } from "react";
+import { useState, useRef } from "react";
+import Typography from '@mui/material/Typography';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -73,71 +72,77 @@ const useStyles = makeStyles({
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
+    position:'relative',
     width: 400,
-    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    justifyContent: 'space-between',
+    flexWrap: 'wrap',
     borderRadius: 7,
     padding: '12px 5px 18px 5px',
     backgroundColor: '#deffa9',
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
   },
-  wrapperActive: {
-    width: 400,
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    justifyContent: 'space-between',
-    borderRadius: 7,
-    padding: '12px 5px 18px 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"
-      }     
-  },    
+    width: '100%',
+  },
+  message: {
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+    "&:after": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "15px solid #deffa9",
+      borderLeft: "15px solid transparent",
+      borderRight: "15px solid transparent",
+      bottom: "0px",
+      right: "-15px"
+    },
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "0",
+      height: "0",
+      borderBottom: "17px solid #deffa9",
+      borderLeft: "16px solid transparent",
+      borderRight: "16px solid transparent",
+      bottom: "0px",
+      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: "0px",
+      right: "-17px"
+    }
+  },  
     image: {
       borderRadius: 7,
       width: 300,
@@ -153,52 +158,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-  },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#626262',
-      maxWidth: 430,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
-  },   
-  bntDownload: {
-    backgroundColor: 'inherit',
-    color: '#54b0fc',
-    width: 30,
-    height:30,
-    '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
   },  
   overlay: {
     position: 'fixed',
@@ -351,7 +310,15 @@ const useStyles = makeStyles({
     right: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },   
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -468,15 +435,20 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
       </div>
     </div>  :
     <div className={classes.container}>
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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' />
-        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}>
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <ImageIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+            style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
+        </div>
+        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -544,7 +516,6 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}         
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>   
 )};
 

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

@@ -80,7 +80,6 @@ const useStyles = makeStyles({
     padding: "10px",
     paddingBottom:18,
     backgroundColor: "#deffa9",
-    border: "1px solid #d5ff91",
     borderRadius: 7,
   },
   wrapperInner: {
@@ -88,7 +87,11 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
+    width: '100%',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
   },
   wrapperInnerMessage: {
     display: 'flex',
@@ -112,7 +115,7 @@ const useStyles = makeStyles({
       borderBottom: "15px solid #deffa9",
       borderLeft: "15px solid transparent",
       borderRight: "15px solid transparent",
-      bottom: "0",
+      bottom: "0px",
       right: "-15px"
     },
     "&:before": {
@@ -123,7 +126,7 @@ const useStyles = makeStyles({
       borderBottom: "17px solid #deffa9",
       borderLeft: "16px solid transparent",
       borderRight: "16px solid transparent",
-      bottom: "-1px",
+      bottom: "0px",
       right: "-17px"
     },
   },
@@ -150,7 +153,7 @@ const useStyles = makeStyles({
       borderBottom: "17px solid #ced8d7",
       borderLeft: "16px solid transparent",
       borderRight: "16px solid transparent",
-      bottom: "-1px",
+      bottom: "0px",
       right: "-17px"
     }
   },    
@@ -163,42 +166,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-  },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#626262',
-      maxWidth: 474,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
   },    
   modalDelete: {
     background: '#ffffff',
@@ -286,7 +253,10 @@ const useStyles = makeStyles({
     top:'10%',
     height:'80%',
     backgroundColor: '#00b333',
-  },  
+  },
+  tittle: {
+    margin:0,
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -359,14 +329,13 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,
-        border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{marginLeft:55,color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${replyMessage} , Caption: ${replyCaption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -379,20 +348,24 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.replyColumn}></div>
           <div className={classes.wrapperInnerMessage}>
-            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+            <Typography style={{color: "#00b333"}} variant="h6" align="right">
+             {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
-              primaryTypographyProps={{color: "#00b333"}}
-              secondary={replyMessage}
-              secondaryTypographyProps={{ color: "#626262" }} />
+            </Typography>
+            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
+              primary='Message' primaryTypographyProps={{color: "#00b333"}}
+              secondary={replyMessage} secondaryTypographyProps={{ color: "#626262" }} />
               {replyCaption&&<ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
                primary='Caption' primaryTypographyProps={{color: "#00b333"}}
                secondary={replyCaption} secondaryTypographyProps={{ color: "#626262" }}/>}
           </div>
         </div>
-        <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={message}
-          primaryTypographyProps={{color: "#2f2f2f"}}/>         
+        <div className={selected?classes.messageActive:classes.message}>
+          <ListItemText primary='Message' primaryTypographyProps={{ color: "#42aee0" }}
+            secondary={message} secondaryTypographyProps={{ color: "#2f2f2f" }} />
+          {caption && <ListItemText primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
+           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        </div>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -419,7 +392,7 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text
@@ -460,7 +433,6 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
         </div>  
       </div>}        
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>} 
    </div>    
 )};
 

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

@@ -76,7 +76,6 @@ const useStyles = makeStyles({
       padding: "10px",
       paddingBottom:18,
       backgroundColor: "#deffa9",
-      border: "1px solid #d5ff91",
       borderRadius: 7,
   },
   wrapperInner: {
@@ -84,7 +83,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     width:'100%'
-  },    
+  },  
     message: {
       wordBreak:'break-word',
       textAlign: "left",
@@ -108,7 +107,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #deffa9",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }
   },
@@ -124,7 +123,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ced8d7",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -149,42 +148,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#626262',
-      maxWidth: 474,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
-  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -323,19 +286,21 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,
-        border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{marginLeft:40,color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          <CopyToClipboard onCopy={() => copied('Message')} text={message}>
+          <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>
-          <ListItemText className={selected?classes.messageActive:classes.message}  
-            secondary={message}
-            secondaryTypographyProps={{ color: "#0e0d0d" }} />
+          <div className={selected?classes.messageActive:classes.message}>
+            <ListItemText primary='Message' primaryTypographyProps={{color: "#42aee0"}}
+              secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
+              {caption&&<ListItemText  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+               secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+          </div>
         </div>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
@@ -363,7 +328,7 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text
@@ -404,7 +369,6 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
         </div>  
       </div>}        
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
    </div>    
 )};
 

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

@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
-import { IconButton } from "@material-ui/core";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
 import VideoFileIcon from '@mui/icons-material/VideoFile';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -17,7 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
 
@@ -71,79 +71,20 @@ const useStyles = makeStyles({
   wrapper: {
     position: 'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
+    alignContent: 'center',
+    flexWrap: 'wrap',
     width: 400,
     padding: '12px 5px 18px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }    
   },
-  wrapperActive: {
-    position: 'relative',
+  wrapperInner: {
+    position:'relative',
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width: 400,
-    padding: '12px 5px 18px 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: 'inherit',
-    color: '#54b0fc',
-    width: 30,
-    height: 30,
-    marginLeft:5,
-    '&:hover': {
-      backgroundColor: '#54b0fc',
-      color:'#ffffff'
-    }
+    alignContent: 'center',
+    width: '100%',
   },  
   time: {
       position: "absolute",
@@ -155,42 +96,6 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  captionWrapper: {
-      position: 'relative',
-      fontSize: ".85em",
-      color: '#626262',
-      maxWidth: 430,
-      fontWeight:600,
-      borderRadius: 5,
-      marginRight:10,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      backgroundColor: '#ffffff',
-      padding:10,
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }     
-  },  
   player: {
     backgroundColor: '#deffa9',
   },
@@ -267,13 +172,23 @@ const useStyles = makeStyles({
     right: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  folderIcon: {
+    marginRight: 7,
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightVideo {
-  url:string,
+  url: string,
+  name: string,
+  lastName: string,
   createdAt: string,
   fullType: string,
   caption: string,
@@ -289,7 +204,7 @@ interface IMessageRightVideo {
   handleForward: (_id: string) => void,
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -325,14 +240,19 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
  
   return (
     <div className={classes.container}>
-      <div onContextMenu={(e) => handleContextMenu(e)}
-        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}>
-            <FileDownloadIcon fontSize='medium'/>
-        </IconButton>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <VideoFileIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.folderIcon} fontSize='large' />
+          <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
+        </div>
+        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
+          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -400,7 +320,6 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         </div>  
       </div>}          
       </div>
-      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -313,6 +313,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftAudio    
                 url={url}
+                name={name}
+                lastName={lastName}
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
@@ -331,6 +333,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftVideo    
                 url={url}
+                name={name}
+                 lastName={lastName}
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
@@ -349,6 +353,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftFile   
                 url={url}
+                name={name}
+                lastName={lastName}
                 createdAt={createdAt}
                 type={type}
                 caption={caption}
@@ -459,6 +465,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightAudio    
                 url={url}
+                name={name}
+                lastName={lastName}
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
@@ -477,6 +485,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                  <MessageRightVideo  
                  url={url}
+                 name={name}
+                 lastName={lastName}
                  createdAt={createdAt}
                  fullType={fullType}
                  caption={caption}
@@ -495,6 +505,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                  <MessageRightFile  
                  url={url}
+                 name={name}
+                 lastName={lastName}
                  createdAt={createdAt}
                  type={type}
                  caption={caption}