work on forward

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

@@ -280,10 +280,11 @@ interface IMessageLeftAudio {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,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);
@@ -349,7 +350,10 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
             <ReplyIcon />
             Reply
           </MenuItem>
-        <MenuItem>
+          <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -332,10 +332,11 @@ interface IMessageLeftFile {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,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);
@@ -441,7 +442,10 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -372,10 +372,11 @@ interface IMessagesLeftImage {
   name: string,
   lastName: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -495,7 +496,10 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -302,12 +302,13 @@ interface IMessageLeftReply {
   _id: string,
   nightMode: boolean,
   handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
   fullType: string,
   handleScrollToTheMessage: (_id: string) => void,
   oldId: string
 }
 
-const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
+const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,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);
@@ -396,7 +397,10 @@ const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,crea
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -274,10 +274,11 @@ interface IMessageLeftText {
   handleSelected: (_id:string) => void,
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -345,7 +346,10 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -284,10 +284,11 @@ interface IMessageLeftVideo {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,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);
@@ -350,7 +351,10 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -279,10 +279,11 @@ interface IMessageRightAudio {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,nightMode,handleReply }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,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);
@@ -348,7 +349,10 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -332,10 +332,11 @@ interface IMessageRightFile {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageRightFile) => {
+const MessageRightFile = ({ url,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);
@@ -441,7 +442,10 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -372,10 +372,11 @@ interface IMessageRightImage {
   name: string,
   lastName: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -495,7 +496,10 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>          

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

@@ -294,12 +294,13 @@ interface IMessageRightReply {
   _id: string,
   nightMode: boolean,
   handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
   fullType: string,
   handleScrollToTheMessage: (_id: string) => void,
   oldId: string
 }
 
-const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
+const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,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);
@@ -387,7 +388,10 @@ const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,cre
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -274,10 +274,11 @@ interface IMessageRightText {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -344,7 +345,10 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -285,10 +285,11 @@ interface IMessageRightVideo {
   handleSelected: (_id:string) => void,  
   _id: string,
   nightMode: boolean,
-  handleReply: (_id: string) => void
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,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);
@@ -351,7 +352,10 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
           <ReplyIcon />
           Reply
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           

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

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { makeStyles } from '@material-ui/core'
-import { usePrevious } from '../../../../../hooks';
+import { usePrevious } from '../../../../../../hooks';
 import UploadFile from './UploadFile'
 
 const useStyles = makeStyles({

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

@@ -0,0 +1,73 @@
+import { makeStyles } from "@material-ui/core/styles";
+import CloseIcon from '@mui/icons-material/Close';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+
+import { firstLetter,slicedWord } from "../../../../../../helpers";
+import { TMessage } from "../../../../../../typescript/redux/messages/types";
+
+const useStyles = makeStyles({   
+  replyTop : {
+    position: 'absolute',
+    left: 0,
+    top: '-7vh',
+    height: '6vh',
+    width: '100%',
+    borderRadius: 8,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignContent: 'center',
+    alignItems: 'center',
+    color: '#6b6b6b',
+    border:'solid 2px rgb(41, 139, 231)',
+    backgroundColor: '#ffffff',
+    padding: 0,
+    zIndex:2,
+  },
+  replyIconClose: {
+    cursor: 'pointer',
+    margin:'0px 7px',
+    '&:hover': {
+      color:'#f02a2a',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  replyListWrapper: {
+    width: '100%',
+  },
+  replyColumn: {
+    height: '80%',
+    width: 2,
+    backgroundColor: '#00aeff',
+  }, 
+});
+
+interface IForwardBar {
+  isForward:TMessage,
+  handleCloseForward: () => void,
+  handleScrollToTheMessage:(_id:string) => void
+}
+
+const ForwardBar = ({ isForward, handleCloseForward,handleScrollToTheMessage }: IForwardBar) => {
+  const classes = useStyles();
+  
+  return (
+    <div className={classes.replyTop}>
+      <CloseIcon onClick={handleCloseForward} className={classes.replyIconClose} />
+      <div className={classes.replyColumn}></div>
+        <ul className={classes.replyListWrapper}>
+          <MenuItem onClick={() => handleScrollToTheMessage(isForward._id)}>
+            <ListItemText
+              primary={`${firstLetter(isForward.name)}${slicedWord(isForward.name, 15, 1)} 
+              ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}
+              primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+              secondary={`Type : ${isForward.type.toUpperCase()}`}
+              secondaryTypographyProps={{ fontSize:16 }}/>          
+          </MenuItem>
+        </ul>
+    </div>
+  )
+}
+
+export default ForwardBar

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/ForwardItem/index.tsx

@@ -0,0 +1,78 @@
+import { makeStyles } from '@material-ui/core'
+import { styled } from '@mui/material/styles';
+import ListItemButton from '@mui/material/ListItemButton';
+import Avatar from '@mui/material/Avatar';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Badge from '@mui/material/Badge';
+
+import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../../../../helpers';
+
+const StyledBadge = styled(Badge)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    backgroundColor: '#44b700',
+    color: '#44b700',
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      animation: 'ripple 1.2s infinite ease-in-out',
+      border: '1px solid currentColor',
+      content: '""',
+    },
+  },
+  '@keyframes ripple': {
+    '0%': {
+      transform: 'scale(.8)',
+      opacity: 1,
+    },
+    '100%': {
+      transform: 'scale(2.4)',
+      opacity: 0,
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  listItem_iconAvatar: {
+    marginRight:10
+  },
+})
+
+interface IForwardItem {
+  name: string,
+  lastName: string,
+  avatarUrl: string,
+  color: string,
+  online: string,
+  companionId: string,
+  handleListItemClick: (companionId: string) => void,
+}
+const ForwardItem = ({name,lastName,avatarUrl,color,online,companionId,handleListItemClick}:IForwardItem) => {
+  const classes = useStyles()
+  
+  return (
+    <div>
+      <ListItemButton onClick={() => handleListItemClick(companionId)}>
+        <ListItemIcon className={classes.listItem_iconAvatar}>
+          <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
+             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+            <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 54, height: 54 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+            </Avatar>
+          </StyledBadge>
+        </ListItemIcon> 
+        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+          secondaryTypographyProps={{ color: '#0379af' }} secondary={online === 'true' ?
+          'online' : `last seen ${timeStampEU(online)}`} />         
+        </ListItemButton>  
+    </div>
+  );
+}
+export default ForwardItem

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

@@ -0,0 +1,78 @@
+import List from '@mui/material/List';
+import { makeStyles } from '@material-ui/core'
+import { useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
+import ForwardItem from './ForwardItem'
+import { getChatMemo } from '../../../../../../../redux/chat/selector'
+import { asyncGetChatById } from '../../../../../../../redux/chat/operations'
+import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../../redux/control/action'
+import { TChats } from '../../../../../../../typescript/redux/chats/types';
+
+
+const useStyles = makeStyles({
+  list: {
+    width: '100%',
+    maxHeight: '53vh',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },
+})
+
+interface IForwardList {
+  value: string,
+  chats:TChats,
+  total: string
+}
+
+const ForwardList = ({ value, chats, total }: IForwardList) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const chat = useSelector(getChatMemo)
+  
+  const handleListItemClick = (companionId: string) => {
+    dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
+    dispatch(asyncGetChatById(companionId))
+    if (chat.companionId !== companionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
+  }
+
+  const filteredChatsMemo = useMemo((): TChats => {
+    return chats.filter((el) => {
+      const credentials = el.name + ' ' + el.lastName
+      if (credentials.toLowerCase().includes(value.toLowerCase())) return el
+      return undefined
+    })
+  }, [chats, value])
+
+  return total !== '0' ? (<>
+    <List className={classes.list} component="nav"
+      aria-label="main mailbox folders">
+      {filteredChatsMemo.length > 0 ?
+        filteredChatsMemo.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
+          <ForwardItem key={number} name={name} lastName={lastName}
+            avatarUrl={avatarUrl} color={color} online={online}
+            companionId={companionId} handleListItemClick={handleListItemClick} />) :
+        <AlertInfo name={`Can not find Chat by request: ${value}`} />}
+    </List>
+  </>) : <AlertInfo name='You do not have other Chats yet!' />
+}
+
+export default ForwardList

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

@@ -0,0 +1,89 @@
+import InputBase from '@mui/material/InputBase';
+import Toolbar from '@mui/material/Toolbar'
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import { makeStyles } from '@material-ui/core'
+
+const SearchBar = styled('div')(() => ({
+  position: 'relative',
+  borderRadius: '20px',
+  backgroundColor: '#f1f0f0', 
+  width: '100%',
+  margin:'0 5% 0 5%'
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+  '& .MuiInputBase-input': { 
+    fontWeight: 500,
+    borderRadius: '20px',
+    padding: theme.spacing(1, 1, 1, 0),
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+  },
+}));
+
+const useStyles = makeStyles({
+  toolBar: {
+    color: '#b1aeae',
+    height: '7vh',
+    width:'100%'
+  },
+  searchBarActive: {
+    outline: '2px solid  #2184f7',
+    color: '#2184f7',
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
+})
+
+
+interface IForwardSearch {
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  value: string,
+  total: string
+}
+
+const ForwardSearch = ({handleSearch,value,total}:IForwardSearch) => {
+  const classes = useStyles()
+  const disabled = total === '0' ? true : false
+ 
+  return (
+    <Toolbar className={classes.toolBar} >
+      <IconButton aria-label="delete" size="medium">
+        <CloseIcon className={classes.iconClose} fontSize='medium'/>
+      </IconButton>
+      <SearchBar className={!value||disabled?undefined:classes.searchBarActive}>
+          <SearchIconWrapper>
+              <SearchIcon />
+          </SearchIconWrapper>
+          <StyledInputBase
+            disabled={disabled}
+            onChange={handleSearch}
+            placeholder={disabled?'Disabled':'Search'}
+            value={value}
+            inputProps={{ 'aria-label': 'search' }}
+          />
+      </SearchBar>      
+    </Toolbar>
+    )
+}
+
+export default ForwardSearch

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

@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/core'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ForwardSearch from './ForwardSearch'
+import ForwardList from './ForwardList'
+import { getStateMemo } from '../../../../../../redux/chats/selector'
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: 'white',
+    width: '22vw',
+    position: 'absolute',
+    top: '10vh',
+    height:'80vh',
+    left: '39vw',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding:10,
+    borderRadius:10,
+  }
+})
+
+const ForwardSearchList = () => {
+  const classes = useStyles()
+  const { total,chats } = useSelector(getStateMemo)
+  const [value, setValue] = useState<string>('')
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
+
+  return (
+    <div className={classes.container}>
+      <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
+      <ForwardList value={value} chats={chats} total={total}/>
+    </div>
+  )
+}
+
+export default ForwardSearchList

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

@@ -0,0 +1,73 @@
+import { makeStyles } from "@material-ui/core/styles";
+import CloseIcon from '@mui/icons-material/Close';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+
+import { firstLetter,slicedWord } from "../../../../../../helpers";
+import { TMessage } from "../../../../../../typescript/redux/messages/types";
+
+const useStyles = makeStyles({   
+  replyTop : {
+    position: 'absolute',
+    left: 0,
+    top: '-7vh',
+    height: '6vh',
+    width: '100%',
+    borderRadius: 8,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignContent: 'center',
+    alignItems: 'center',
+    color: '#6b6b6b',
+    border:'solid 2px rgb(41, 139, 231)',
+    backgroundColor: '#ffffff',
+    padding: 0,
+    zIndex:2,
+  },
+  replyIconClose: {
+    cursor: 'pointer',
+    margin:'0px 7px',
+    '&:hover': {
+      color:'#f02a2a',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  replyListWrapper: {
+    width: '100%',
+  },
+  replyColumn: {
+    height: '80%',
+    width: 2,
+    backgroundColor: '#00aeff',
+  }, 
+});
+
+interface IReplyBar {
+  isReply:TMessage,
+  handleCloseReply: () => void,
+  handleScrollToTheMessage:(_id:string) => void
+}
+
+const ReplyBar = ({ isReply, handleCloseReply,handleScrollToTheMessage }: IReplyBar) => {
+  const classes = useStyles();
+  
+  return (
+    <div className={classes.replyTop}>
+      <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
+      <div className={classes.replyColumn}></div>
+        <ul className={classes.replyListWrapper}>
+          <MenuItem onClick={() => handleScrollToTheMessage(isReply._id)}>
+            <ListItemText
+              primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)} 
+              ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
+              primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
+              secondary={`Type : ${isReply.type.toUpperCase()}`}
+              secondaryTypographyProps={{ fontSize:16 }}/>          
+          </MenuItem>
+        </ul>
+    </div>
+  )
+}
+
+export default ReplyBar

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

@@ -12,8 +12,6 @@ import Avatar from '@mui/material/Avatar';
 import Webcam from "react-webcam";
 import CameraIcon from '@mui/icons-material/Camera';
 import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemText from '@mui/material/ListItemText';
 import Picker from 'emoji-picker-react';
 import InputAdornment from '@mui/material/InputAdornment';
 
@@ -21,67 +19,70 @@ import { useReactMediaRecorder } from "react-media-recorder";
 import { useState,useEffect,useCallback } from "react";
 import { useSelector } from "react-redux";
 
-import FilesMenu from "../FilesMenu";
+import FilesMenu from "./FilesMenu";
+import ReplyBar from './ReplyBar'
+import ForwardBar from "./ForwardBar";
+import ForwardSearchList from "./ForwardSearchList";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
     sentVideoMessageById,sentFileMessageById,sentMessageReplyById
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { getRightIsOpen } from '../../../../../redux/control/selector'
-import { playNotification,prodBaseURL,firstLetter,slicedWord } from "../../../../../helpers";
+import { playNotification,prodBaseURL } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 import { TMessage } from "../../../../../typescript/redux/messages/types";
 
 
 const useStyles = makeStyles({   
-    container: {
-        width: '35vw',
-        height:'6vh',
-        position: 'fixed',
-        bottom: '2vh',
-        borderRadius: 8,
-        padding: 10,
-        display: 'flex',
-        flexWrap: 'nowrap',
-        alignContent: 'start',
-        alignItems: 'start',
-        color: '#6b6b6b',
-        border:'solid 2px #ffffff',
-        backgroundColor: '#ffffff',        
-    },
-    containerActive: {
-        width: '35vw',
-        height:'6vh',
-        position: 'fixed',
-        bottom: '2vh',
-        borderRadius: 8,
-        padding: 10,
-        display: 'flex',
-        flexWrap: 'nowrap',
-        alignContent: 'start',
-        alignItems: 'start',
-        border:'solid 2px rgb(41, 139, 231)',
-        backgroundColor: '#ffffff',        
-    },    
-    textarea: {
-        width: '100%',
-        height: '100%',
-        outline: 'none',
-        border:'none',
-        padding: '0px 10px',
-        marginLeft: 8,
-        marginRight: 8,
-        overflowY:'auto',
-        resize: 'none',
-        '&::placeholder': {
-            color: 'inherit',
-            fontWeight: 600,
-            fontSize:20
-        }
-    },
-    attachIcon: {
-        transform:'rotate(30deg)',  
+  container: {
+    width: '35vw',
+    height:'6vh',
+    position: 'fixed',
+    bottom: '2vh',
+    borderRadius: 8,
+    padding: 10,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignContent: 'start',
+    alignItems: 'start',
+    color: '#6b6b6b',
+    border:'solid 2px #ffffff',
+    backgroundColor: '#ffffff',        
+  },
+  containerActive: {
+    width: '35vw',
+    height:'6vh',
+    position: 'fixed',
+    bottom: '2vh',
+    borderRadius: 8,
+    padding: 10,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignContent: 'start',
+    alignItems: 'start',
+    border:'solid 2px rgb(41, 139, 231)',
+    backgroundColor: '#ffffff',        
+  },    
+  textarea: {
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    border:'none',
+    padding: '0px 10px',
+    marginLeft: 8,
+    marginRight: 8,
+    overflowY:'auto',
+    resize: 'none',
+    '&::placeholder': {
+      color: 'inherit',
+      fontWeight: 600,
+      fontSize:20
     },
+ },
+  attachIcon: {
+    transform:'rotate(30deg)',  
+  },
   borderTop: {
     position: 'absolute',
     left: 0,
@@ -90,40 +91,6 @@ const useStyles = makeStyles({
     height: 1,
     background:'#ffffff',
   },
-  replyTop : {
-    position: 'absolute',
-    left: 0,
-    top: '-7vh',
-    height: '6vh',
-    width: '100%',
-    borderRadius: 8,
-    display: 'flex',
-    flexWrap: 'nowrap',
-    alignContent: 'center',
-    alignItems: 'center',
-    color: '#6b6b6b',
-    border:'solid 2px rgb(41, 139, 231)',
-    backgroundColor: '#ffffff',
-    padding: 0,
-    zIndex:2,
-  },
-  replyIconClose: {
-    cursor: 'pointer',
-    margin:'0px 7px',
-    '&:hover': {
-      color:'#f02a2a',
-      transform: 'rotate(180deg)',
-      transition: 'all 250ms ease-out ',
-    }
-  },
-  replyListWrapper: {
-    width: '100%',
-  },
-  replyColumn: {
-    height: '80%',
-    width: 2,
-    backgroundColor: '#00aeff',
-  },
   filesMenu: {
     background: '#fdfdfd',
     position: 'absolute',
@@ -141,14 +108,14 @@ const useStyles = makeStyles({
     zIndex: 10,
     visibility: 'visible',
   },
-    captionTextField: {
-      zIndex: 10,
-      visibility: 'visible',  
-      width: '35vw',
-      backgroundColor: '#ffffff',
-      borderRadius:4,
-    },
-    iconCancel: {
+  captionTextField: {
+    zIndex: 10,
+    visibility: 'visible',  
+    width: '35vw',
+    backgroundColor: '#ffffff',
+    borderRadius:4,
+  },
+  iconCancel: {
         position: 'absolute',
         left: -72,
         bottom:-1,
@@ -212,7 +179,7 @@ const useStyles = makeStyles({
             color: '#ffffff',
         }
     },
-    overlay: {
+  overlay: {
       position: 'fixed',
       top: 0,
       left: 0,
@@ -307,10 +274,12 @@ interface ISendMessage{
   silentMode: boolean,
   isReply:TMessage | undefined,
   setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
+  isForward: TMessage | undefined,
+  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
   handleScrollToTheMessage: (_id:string) => void
 }
 
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMessage }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,handleScrollToTheMessage }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -363,11 +332,15 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
    }
 
     const sentMessage = async () => {
-        if (value && !isReply) sentMessageById(companionId, value, caption.trim())
+        if (value && !isReply && !isForward) sentMessageById(companionId, value, caption.trim())
         if (value && isReply) {
            sentMessageReplyById(isReply._id, value, caption.trim())
            setIsReply(undefined)
         }
+        if (value && isForward) {
+           console.log('Sent forwarded')
+           setIsForward(undefined)
+        }      
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
             audio.open('GET', mediaBlobUrl, true);
@@ -493,6 +466,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
     clearMessage()
   }
 
+  const handleCloseForward= () => {
+    setIsForward(undefined)
+    clearMessage()
+  }  
+
   const defaultState = useCallback(() => {
     stopRecording()
     _stopRecording()
@@ -515,6 +493,10 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
   useEffect(() => {
     defaultState()
   }, [isReply])
+
+  useEffect(() => {
+    defaultState()
+  }, [isForward])  
   
   useEffect(() => {
     defaultState()
@@ -522,21 +504,13 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
   
     return (
         <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
-            {isArrow && <div className={classes.borderTop}></div>}
-            {isReply && <div className={classes.replyTop}>
-                <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
-                <div className={classes.replyColumn}></div>
-                <ul className={classes.replyListWrapper}>
-                  <MenuItem onClick={() => handleScrollToTheMessage(isReply._id)}>
-                    <ListItemText
-                      primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)} 
-                       ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
-                      primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
-                      secondary={`Type : ${isReply.type.toUpperCase()}`}
-                      secondaryTypographyProps={{ fontSize:16 }}/>          
-                  </MenuItem>
-                </ul>
-            </div>}       
+          {isArrow && <div className={classes.borderTop}></div>}
+          {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply} handleScrollToTheMessage={handleScrollToTheMessage} />}
+          {isForward &&
+            <div className={classes.overlay} id='overlay'>
+              <ForwardSearchList/>
+            </div>}
+          {/* {isForward && <ForwardBar isForward={isForward} handleCloseForward={handleCloseForward} handleScrollToTheMessage={handleScrollToTheMessage}/>} */}
             {isFilming && _status !== 'stopped' &&                
              <>
                 <div className={classes.pauseLeft}>
@@ -636,9 +610,9 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
                          className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
                        <img className={classes.capturedPicture} width='300' height='174'
                          style={{visibility:file?'visible':'hidden'}} src={file} alt='chosen pic'></img>
-                     </>}
-                   </Webcam>
-                 </div>}
+                       </>}
+                      </Webcam>
+                    </div>}
         </div>            
     )
 }

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

@@ -90,9 +90,11 @@ interface IChatBar {
   handleUnpinAll: () => void,
   isReply:TMessage | undefined,
   setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
+  isForward: TMessage | undefined,
+  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
 }
 
-const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll,isReply,setIsReply}:IChatBar) => {
+const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll,isReply,setIsReply,isForward,setIsForward}:IChatBar) => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
@@ -113,7 +115,12 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const handleReply = (_id: string) => {
     openPinned&& dispatch(actionOpenPinned(false))
     setIsReply(renderArr.find((el) => el._id ===_id))
-  }  
+  }
+  
+  const handleForward = (_id: string) => {
+    openPinned&& dispatch(actionOpenPinned(false))
+    setIsForward(renderArr.find((el) => el._id ===_id))
+  }    
 
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
@@ -225,6 +232,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                _id={_id}
                nightMode={nightMode}
                handleReply={handleReply}
+               handleForward={handleForward} 
                /></div>)
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
@@ -245,6 +253,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                 fullType={fullType}
                 handleScrollToTheMessage={handleScrollToTheMessage}
                 oldId={oldId}
@@ -268,6 +277,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 lastName={lastName}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -285,6 +295,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -302,6 +313,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -319,6 +331,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)             
           } else {
             if (type === 'text' && !oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
@@ -338,6 +351,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                 /></div>)
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -358,6 +372,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                 fullType={fullType}
                 handleScrollToTheMessage={handleScrollToTheMessage}
                 oldId={oldId}
@@ -381,6 +396,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 lastName={lastName}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -398,6 +414,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 _id={_id}
                 nightMode={nightMode}
                 handleReply={handleReply}
+                handleForward={handleForward}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -415,6 +432,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  _id={_id}
                  nightMode={nightMode}
                  handleReply={handleReply}
+                 handleForward={handleForward}
                    /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -432,12 +450,14 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  _id={_id}
                  nightMode={nightMode}
                  handleReply={handleReply}
+                 handleForward={handleForward}
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}
         </div>
       </div>
-      {!openPinned&&!isSomeSelected&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+      {!openPinned && !isSomeSelected && <SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply}
+       isForward={isForward} setIsForward={setIsForward} handleScrollToTheMessage={handleScrollToTheMessage} />}
       {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );

src/components/HomePage/CentralBar/index.tsx

@@ -29,10 +29,13 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
   const [selectedArr, setSelectedArr] = useState<string[] | []>([])
   const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
   const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
+  const [isForward, setIsForward] = useState<TMessage | undefined>(undefined)
+
   const handleClearSelect = () => {
     selectedArr.length > 0 && setSelectedArr([])
     isSomeSelected && setIsSomeSelected(false)
   }
+
   const handleUnpinAll = () => {
     openPinned && dispatch(actionOpenPinned(false))
     unpinAllMessagesById(pinnedMessagesMemo.map(({_id}) => _id))
@@ -70,7 +73,8 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
           <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}
             isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}
             openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}
-            handleUnpinAll={handleUnpinAll} isReply={isReply} setIsReply={setIsReply}/>
+            handleUnpinAll={handleUnpinAll} isReply={isReply} setIsReply={setIsReply}
+            isForward={isForward} setIsForward={setIsForward}/>
         </Grid>
       </Grid>
     )