make forward

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

@@ -0,0 +1,429 @@
+import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import FolderIcon from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload } from '../../../../../../helpers'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexWrap:'wrap',
+    maxWidth: 450,
+    minWidth:200,
+    padding: "10px",
+    paddingBottom:18,
+    backgroundColor: "#ffffff",
+    border: "1px solid #f0f0f0",
+    borderRadius: 7,
+  },
+  wrapperInner: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },    
+  message: {
+      display: 'flex',
+      alignItems: 'center',
+      alignContent: 'center',
+      flexWrap: 'wrap',    
+      marginLeft:20,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      "&: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: "-1px",
+        left: "-17px"
+      }      
+  },
+  messageActive: {
+      display: 'flex',
+      alignItems: 'center',
+      alignContent: 'center',
+      flexWrap: 'wrap',    
+      marginLeft:20,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #babdbc",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #babdbc",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }      
+  },    
+  copyIcon: {
+    color: '#b56ff7',
+    cursor: 'pointer',
+    marginRight: 7,
+    '&:hover': {
+      color: '#9c3bf8',
+    },
+  },  
+  time: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 6,
+      right: 6,
+      color: '#414141',
+      padding: 3,
+      borderRadius: 5,
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '0.2rem',
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2.2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -64,
+    bottom: -10,
+    pointerEvents: 'auto'
+  },
+  folderIcon: {
+    color: '#00b333',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#00e040'
+    },
+  },
+  forwardColumn: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:53,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#00b333',
+  },    
+});
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+interface IMessageLeftForward {
+  url: string,
+  message: string,
+  name: string,
+  lastName: string,
+  forwardName:string,
+  forwardLastName:string,
+  createdAt: string,
+  caption: string,
+  emoji: string,
+  emojiCompanion: string,
+  pinned: boolean,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
+  handleScrollToTheChat: (_id:string) => void,
+  fullType: string
+}
+
+const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageLeftForward) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  const checked = isSelected(_id)
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Message')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      removeMessageById(_id)
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }     
+
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  }
+
+  const handleClickIcon = (e: any) => {
+    e.stopPropagation()
+    handleDownload(url, fullType)
+  }  
+  
+  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">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={message}>
+          <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
+          </CopyToClipboard>}
+          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
+           className={classes.folderIcon} fontSize='large' />}
+          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
+           className={classes.folderIcon} fontSize='large' />}
+          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
+           className={classes.folderIcon} fontSize='large' />}
+          {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+            className={classes.folderIcon} fontSize='large' />}
+          <div className={classes.forwardColumn}></div>
+          <div className={selected?classes.messageActive:classes.message}>
+            <ListItemText style={{width:'100%'}}   primary={`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)} 
+             ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
+             primaryTypographyProps={{color: "#00b333"}}
+             secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }}/>
+            {caption&&<ListItemText style={{width:'100%'}} primary='Caption' primaryTypographyProps={{color: "#00b333"}}
+             secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }} />}
+          </div>
+        </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>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Text
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            {pinned ?
+              <CloseIcon className={classes.iconClose} /> :
+              <PushPinIcon />}
+             {pinned?'Unpin':'Pin'}
+        </MenuItem>          
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select
+        </MenuItem>  
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
+      </div>
+  </div>    
+)};  
+
+export default MessageLeftForward

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
+import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -82,6 +83,23 @@ const useStyles = makeStyles({
     border: "1px solid #f0f0f0",
     borderRadius: 7,
   },
+  wrapperInner: {
+    position:'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    marginLeft:20,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+  },  
     message: {
       wordBreak:'break-word',
       textAlign: "left",
@@ -262,12 +280,6 @@ const useStyles = makeStyles({
       color: '#00e040'
     },
   },
-  replyColumn: {
-    height: 50,
-    width: 2,
-    backgroundColor: '#00b333',
-    margin:'0px 10px'
-  },
   replyListItem: {
     display: 'flex',
     width: '100%',
@@ -280,7 +292,16 @@ const useStyles = makeStyles({
     left: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  replyColumn: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:43,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#00b333',
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -288,9 +309,12 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftReply {
   url:string,
   replyMessage: string,
-  message:string,
+  message: string,
+  name: string,
+  lastName: string,  
   replyName:string,
-  replyLastName:string,
+  replyLastName: string,
+  replyCaption: string,
   createdAt: string,
   caption: string,
   emoji: string,
@@ -308,7 +332,7 @@ interface IMessageLeftReply {
   oldId: string
 }
 
-const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
+const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -353,28 +377,35 @@ const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,crea
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
         style={{backgroundColor:selected?'#babdbc':undefined,
         border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <ul style={{ backgroundColor: selected?'#babdbc':undefined,width:'100%'}}>
-          <MenuItem className={classes.replyListItem}>
-            {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
+        <Typography style={{marginLeft:55,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}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-            </CopyToClipboard>}
-            {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
+          </CopyToClipboard>}
+          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />} 
-            <div className={classes.replyColumn}></div>
-            <ListItemText onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+          {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+            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)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
               primaryTypographyProps={{color: "#00b333"}}
-              secondary={slicedWord(replyMessage, 40, 0)}
-              secondaryTypographyProps={{ color: "#626262" }} />          
-          </MenuItem>
-        </ul>
+              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"}}/>        

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
+import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -64,19 +65,26 @@ const useStyles = makeStyles({
     marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
-    wrapper: {
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      maxWidth: 450,
-      minWidth:200,
-      padding: "10px",
-      paddingBottom:18,
-      backgroundColor: "#ffffff",
-      border: "1px solid #f0f0f0",
-      borderRadius: 7,
-    },
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexWrap:'wrap',
+    maxWidth: 450,
+    minWidth:200,
+    padding: "10px",
+    paddingBottom:18,
+    backgroundColor: "#ffffff",
+    border: "1px solid #f0f0f0",
+    borderRadius: 7,
+  },
+  wrapperInner: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },    
     message: {
       wordBreak:'break-word',
       textAlign: "left",
@@ -130,15 +138,7 @@ const useStyles = makeStyles({
         bottom: "-1px",
         left: "-17px"
       }      
-  },    
-  copyIcon: {
-    color: '#b56ff7',
-    cursor: 'pointer',
-    marginRight: 7,
-    '&:hover': {
-      color: '#9c3bf8',
-    },
-  },  
+  },     
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -255,7 +255,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' } };
@@ -318,15 +326,17 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':undefined,
         border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-          <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
-        </CopyToClipboard>
-        <ListItemText className={selected?classes.messageActive:classes.message}
-          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+        <Typography style={{marginLeft:40,color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-          primaryTypographyProps={{color: "#0379af"}}
-          secondary={message}
-          secondaryTypographyProps={{ color: "#0e0d0d" }} />
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <CopyToClipboard onCopy={() => copied('Message')} text={message}>
+            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
+          </CopyToClipboard>
+          <ListItemText className={selected?classes.messageActive:classes.message}
+            secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
+        </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>}

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

@@ -0,0 +1,428 @@
+import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import FolderIcon from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
+  },
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexWrap:'wrap',
+    maxWidth: 450,
+    minWidth:200,
+    padding: "10px",
+    paddingBottom:18,
+    backgroundColor: "#deffa9",
+    border: "1px solid #d5ff91",
+    borderRadius: 7,
+  },
+  wrapperInner: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },
+  message: {
+      display: 'flex',
+      alignItems: 'center',
+      alignContent: 'center',
+      flexWrap: 'wrap',
+      marginLeft:20,
+      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: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }
+  },
+  messageActive: {
+      display: 'flex',
+      alignItems: 'center',
+      alignContent: 'center',
+      flexWrap: 'wrap',
+      marginLeft:20,
+      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: "0px",
+        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"
+      }
+  },    
+  copyIcon: {
+    color: '#b56ff7',
+    cursor: 'pointer',
+    marginRight: 7,
+    '&:hover': {
+      color: '#9c3bf8',
+    },
+  },
+  time: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 6,
+      right: 6,
+      color: '#414141',
+      padding: 3,
+      borderRadius: 5,
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '0.2rem',
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2.2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -64,
+    bottom: -10,
+    pointerEvents: 'auto'
+  },
+  folderIcon: {
+    color: '#00b333',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#00e040'
+    },
+  },
+  forwardColumn: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:53,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#00b333',
+  },   
+});
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+interface IMessageRightForward {
+  url: string,
+  message: string,
+  name: string,
+  lastName: string,
+  forwardName:string,
+  forwardLastName: string,
+  caption: string,
+  createdAt: string,
+  emoji: string,
+  emojiCompanion: string,
+  pinned: boolean,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
+  handleScrollToTheChat: (_id:string) => void,
+  fullType: string
+}
+
+const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageRightForward) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  const checked = isSelected(_id)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Message')
+    if (type === 'delete') setModal(true)
+      setAnchorEl(null)
+      setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      removeMessageById(_id)
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  }
+  
+  const handleClickIcon = (e: any) => {
+    e.stopPropagation()
+    handleDownload(url, fullType)
+  }  
+
+  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">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={message}>
+           <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
+          </CopyToClipboard>}
+          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
+            className={classes.folderIcon} fontSize='large' />}
+          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
+            className={classes.folderIcon} fontSize='large' />}
+          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
+            className={classes.folderIcon} fontSize='large' />}
+          {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+           className={classes.folderIcon} fontSize='large' />}
+          <div className={classes.forwardColumn}></div>
+          <div className={selected?classes.messageActive:classes.message}>
+            <ListItemText style={{width:'100%'}}   primary={`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)} 
+             ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
+             primaryTypographyProps={{color: "#00b333"}}
+             secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }}/>
+            {caption&&<ListItemText style={{width:'100%'}} primary='Caption' primaryTypographyProps={{color: "#00b333"}}
+             secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }} />}
+          </div>
+        </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>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>           
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Text
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            {pinned ?
+              <CloseIcon className={classes.iconClose} /> :
+              <PushPinIcon />}
+             {pinned?'Unpin':'Pin'}
+        </MenuItem>           
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select
+        </MenuItem>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}        
+      </div>
+   </div>    
+)};
+
+export  default  MessageRightForward

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
+import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -82,6 +83,23 @@ const useStyles = makeStyles({
     border: "1px solid #d5ff91",
     borderRadius: 7,
   },
+  wrapperInner: {
+    position:'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    marginLeft:20,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+  },  
   message: {
     wordBreak:'break-word',
     textAlign: "left",
@@ -181,7 +199,7 @@ const useStyles = makeStyles({
         bottom: "0px",
         right: "-17px"
       }     
-  },  
+  },    
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -254,25 +272,21 @@ const useStyles = makeStyles({
       color: '#00e040'
     },
   },
-  replyColumn: {
-    height: 50,
-    width: 2,
-    backgroundColor: '#00b333',
-    margin:'0px 10px'
-  },
-  replyListItem: {
-    display: 'flex',
-    width: '100%',
-    flexWrap: 'nowrap',
-    alignContent: 'center',
-    alignItems: 'center',
-  },
   checkboxSelect: {
     position: 'absolute',
     right: -64,
     bottom: -10,
     pointerEvents: 'auto'
-  }
+  },
+  replyColumn: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:43,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#00b333',
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -280,9 +294,12 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageRightReply {
   url:string,
   replyMessage: string,
-  message:string,
+  message: string,
+  name: string,
+  lastName: string,
   replyName:string,
-  replyLastName:string,
+  replyLastName: string,
+  replyCaption: string,
   createdAt: string,
   caption: string,
   emoji: string,
@@ -300,7 +317,7 @@ interface IMessageRightReply {
   oldId: string
 }
 
-const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
+const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -344,28 +361,35 @@ const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,cre
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':undefined,
         border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <ul style={{ backgroundColor: selected?'#ced8d7':undefined,width:'100%'}}>
-          <MenuItem className={classes.replyListItem}>
-            {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
+        <Typography style={{marginLeft:55,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}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-            </CopyToClipboard>}
-            {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
+          </CopyToClipboard>}
+          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
+            className={classes.folderIcon} fontSize='large' />}
+          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-            {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}         
-            <div className={classes.replyColumn}></div>
-            <ListItemText onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+          <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)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
               primaryTypographyProps={{color: "#00b333"}}
-              secondary={slicedWord(replyMessage, 40, 0)}
-              secondaryTypographyProps={{ color: "#626262" }} />          
-          </MenuItem>
-        </ul>
+              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"}}/>         
@@ -436,7 +460,7 @@ const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,cre
         </div>  
       </div>}        
       </div>
-     {caption&&<div className={classes.captionWrapper}>{caption}</div>}     
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>} 
    </div>    
 )};
 

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
+import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -69,6 +70,7 @@ const useStyles = makeStyles({
       display: 'flex',
       alignItems: 'center',
       alignContent: 'center',
+      flexWrap:'wrap',
       maxWidth: 450,
       minWidth:200,
       padding: "10px",
@@ -76,7 +78,13 @@ const useStyles = makeStyles({
       backgroundColor: "#deffa9",
       border: "1px solid #d5ff91",
       borderRadius: 7,
-    },
+  },
+  wrapperInner: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    width:'100%'
+  },    
     message: {
       wordBreak:'break-word',
       textAlign: "left",
@@ -127,18 +135,10 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ced8d7",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }
   },    
-  copyIcon: {
-    color: '#b56ff7',
-    cursor: 'pointer',
-    marginRight: 7,
-    '&:hover': {
-      color: '#9c3bf8',
-    },
-  },
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -255,7 +255,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' } };
@@ -317,15 +325,18 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':undefined,
         border:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-          <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
-        </CopyToClipboard>
-        <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+        <Typography style={{marginLeft:40,color: "#42aee0"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-          primaryTypographyProps={{color: "#42aee0"}}
-          secondary={message}
-          secondaryTypographyProps={{ color: "#0e0d0d" }} />
+        </Typography>
+        <div className={classes.wrapperInner}>
+          <CopyToClipboard onCopy={() => copied('Message')} text={message}>
+            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
+          </CopyToClipboard>
+          <ListItemText className={selected?classes.messageActive:classes.message}  
+            secondary={message}
+            secondaryTypographyProps={{ color: "#0e0d0d" }} />
+        </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>}

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

@@ -7,12 +7,14 @@ import SendMessage from "./SendMessage";
 import UnpinBar from "./UnpinBar";
 import MessageLeftText from './Messages/MessageLeftText'
 import MessageLeftReply from "./Messages/MessageLeftReply";
+import MessageLeftForward from "./Messages/MessageLeftForward";
 import MessageLeftImage from './Messages/MessageLeftImage'
 import MessageLeftAudio from './Messages/MessageLeftAudio'
 import MessageLeftVideo from './Messages/MessageLeftVideo'
 import MessageLeftFile from "./Messages/MessageLeftFile";
 import MessageRightText from './Messages/MessageRightText'
 import MessageRightReply from "./Messages/MessageRightReply";
+import MessageRightForward from "./Messages/MessageRightForward";
 import MessageRightImage from './Messages/MessageRightImage'
 import MessageRightAudio from './Messages/MessageRightAudio'
 import MessageRightVideo from './Messages/MessageRightVideo'
@@ -204,7 +206,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName, color,pinned,
-           createdAt,number, type,fullType,replyName,replyLastName,caption,emoji,emojiCompanion,_id,oldId,}) => {
+           createdAt,number, type,fullType,replyName,replyLastName,replyCaption,caption,emoji,emojiCompanion,_id,oldId,forwardName,forwardLastName,companionIdForwardToAndFrom}) => {
           let isTime
           if (!time) {
             isTime = true
@@ -216,7 +218,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
           const url = `${prodAwsS3}/${message}`
           const urlReply = `${prodAwsS3}/${replyMessage}`
           if (number !== userNumber) {
-            if (type === 'text' && !oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+            if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
                <MessageLeftText
                message={message}
@@ -242,8 +244,11 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
+                name={name}
+                lastName={lastName}
                 replyName={replyName}
                 replyLastName={replyLastName}
+                replyCaption={replyCaption}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -258,7 +263,31 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 fullType={fullType}
                 handleScrollToTheMessage={handleScrollToTheMessage}
                 oldId={oldId}
-                 /></div>)            
+                /></div>)
+            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+              {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
+               <MessageLeftForward
+                url={url}
+                name={name}
+                lastName={lastName}
+                forwardName={forwardName}
+                forwardLastName={forwardLastName}
+                message={message}
+                createdAt={createdAt}
+                caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
+                pinned={pinned}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
+                _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
+                handleForward={handleForward}
+                fullType={fullType}
+                handleScrollToTheChat={handleScrollToTheMessage}
+                 /></div>)              
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftImage   
@@ -335,7 +364,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)             
           } else {
-            if (type === 'text' && !oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+            if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightText   
                 message={message}
@@ -361,8 +390,11 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
+                name={name}
+                lastName={lastName}
                 replyName={replyName}
                 replyLastName={replyLastName}
+                replyCaption={replyCaption}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -377,6 +409,30 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 fullType={fullType}
                 handleScrollToTheMessage={handleScrollToTheMessage}
                 oldId={oldId}
+                /></div>)
+            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              <MessageRightForward
+                url={url}
+                name={name}
+                lastName={lastName}
+                forwardName={forwardName}
+                forwardLastName={forwardLastName}
+                message={message}
+                createdAt={createdAt}
+                caption={caption}
+                emoji={emoji}
+                emojiCompanion={emojiCompanion}
+                pinned={pinned}
+                isSomeSelected={isSomeSelected}
+                isSelected={isSelected}
+                handleSelected={handleSelected}                
+                _id={_id}
+                nightMode={nightMode}
+                handleReply={handleReply}
+                handleForward={handleForward}
+                fullType={fullType}
+                handleScrollToTheChat={handleScrollToTheMessage}
                   /></div>)            
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}