finshed with forward

src/api-data/index.ts

@@ -340,9 +340,9 @@ const sentMessageReplyById = async <T>(id:string,message:string,caption:string):
   }
 };
 
-const sentMessageForwardById = async <T>(id:string,companionIdForwardToAndFrom:string): Promise<T | undefined> => {
+const sentMessageForwardById = async <T>(id:string,companionIdForwardToAndFrom:string,message:string,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post('/messages/forward', { id,companionIdForwardToAndFrom });
+    const { data: { data } } = await axios.post('/messages/forward', { id,companionIdForwardToAndFrom,message,caption });
     return data
   } catch (e) {
     forbidden(e)

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

@@ -66,7 +66,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -270,7 +270,7 @@ const MessageLeftAudio = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
   } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={classes.wrapper} style={{backgroundColor: selected ? '#babdbc' : "#ffffff",pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
          <Typography style={{color: "#00b333"}} variant="h6" align="right">

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

@@ -67,7 +67,7 @@ const useStyles = makeStyles({
     alignContent: 'flex-start',
     flexDirection:'column',
     borderRadius: 7,
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -345,7 +345,7 @@ const MessageLeftFile = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,ty
   }   
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       {read && <div className={classes.wrapperIcons}>
         <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
         <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />

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

@@ -67,7 +67,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -234,6 +234,8 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageLeftForward {
   url: string,
+  companionIdForwardToAndFrom: string,
+  oldId: string,
   tongue: boolean,
   avatarUrl: string,
   color: string,
@@ -241,7 +243,9 @@ interface IMessageLeftForward {
   name: string,
   lastName: string,
   forwardName:string,
-  forwardLastName:string,
+  forwardLastName: string,
+  forwardMessage: string,
+  forwardCaption: string,
   createdAt: string,
   caption: string,
   emoji: string,
@@ -254,11 +258,11 @@ interface IMessageLeftForward {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
-  handleScrollToTheChat: (_id:string) => void,
+  handleScrollToTheChat: (companionIdForwardToAndFrom:string,oldId:string) => void,
   fullType: string
 }
 
-const MessageLeftForward = ({url,tongue,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageLeftForward) => {
+const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,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);
@@ -299,7 +303,7 @@ const MessageLeftForward = ({url,tongue,avatarUrl,color,message,name,lastName,fo
   }  
   
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">
@@ -319,13 +323,13 @@ const MessageLeftForward = ({url,tongue,avatarUrl,color,message,name,lastName,fo
           {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
-          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat('oldId')}>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>
             <Typography style={{color: "#26afee"}} variant="h6" align="right">
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#535353" }} />
-            <ListItemText secondary={caption} secondaryTypographyProps={{color: "#535353"}}/>
+            <ListItemText primary={forwardMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={forwardCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />

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

@@ -68,7 +68,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   },
   wrapper: {
     position: 'relative',
@@ -419,7 +419,7 @@ const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,captio
           width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">

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

@@ -67,7 +67,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -317,7 +317,7 @@ const MessageLeftReply = ({url,tongue,avatarUrl,color,replyMessage,message,name,
   }  
   
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
         style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">

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

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -270,7 +270,7 @@ const MessageLeftText = ({message,tongue,avatarUrl,color,name,lastName,createdAt
   } 
   
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">

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

@@ -65,7 +65,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 0px 10px 22px'
+    padding:'4px 0px 4px 22px'
   }, 
   wrapper: {
     position: 'relative',
@@ -280,7 +280,7 @@ const MessageLeftVideo = ({ url,tongue,avatarUrl,color,name,lastName,createdAt,f
   } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#00b333"}} variant="h6" align="right">

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

@@ -66,7 +66,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -269,7 +269,7 @@ const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
   } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
         style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">

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

@@ -68,7 +68,7 @@ const useStyles = makeStyles({
     alignContent: 'flex-end',
     flexDirection:'column',
     borderRadius: 7,
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -346,7 +346,7 @@ const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
   } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       {read && <div className={classes.wrapperIcons}>
         <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
         <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />

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

@@ -68,7 +68,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -234,6 +234,8 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageRightForward {
   url: string,
+  oldId: string,
+  companionIdForwardToAndFrom: string,
   tongue: boolean,
   watched: boolean,
   avatarUrl: string,
@@ -243,6 +245,8 @@ interface IMessageRightForward {
   lastName: string,
   forwardName:string,
   forwardLastName: string,
+  forwardMessage: string,
+  forwardCaption: string,
   caption: string,
   createdAt: string,
   emoji: string,
@@ -255,11 +259,11 @@ interface IMessageRightForward {
   nightMode: boolean,
   handleReply: (_id: string) => void,
   handleForward: (_id: string) => void,
-  handleScrollToTheChat: (_id:string) => void,
+  handleScrollToTheChat: (companionIdForwardToAndFrom:string,oldId:string) => void,
   fullType: string
 }
 
-const MessageRightForward = ({url,tongue,watched,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleScrollToTheChat,fullType}:IMessageRightForward) => {
+const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watched,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,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);
@@ -299,7 +303,7 @@ const MessageRightForward = ({url,tongue,watched,avatarUrl,color,message,name,la
   }  
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
         style={{backgroundColor:selected?'#ced8d7':'#deffa9', pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">
@@ -319,13 +323,13 @@ const MessageRightForward = ({url,tongue,watched,avatarUrl,color,message,name,la
           {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
            className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
-          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat('oldId')}>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>
             <Typography style={{color: "#00b333"}} variant="h6" align="right">
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#535353" }} />
-            <ListItemText secondary={caption} secondaryTypographyProps={{color: "#535353"}}/>
+            <ListItemText primary={forwardMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText secondary={forwardCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />

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

@@ -69,7 +69,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -410,7 +410,7 @@ const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullTyp
           width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">

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

@@ -68,7 +68,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -302,7 +302,7 @@ const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,mess
   }
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">

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

@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -270,7 +270,7 @@ const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,
   }  
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':"#deffa9",pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">

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

@@ -67,8 +67,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-
-    padding:'10px 22px 10px 0px'
+    padding:'4px 22px 4px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -272,7 +271,7 @@ const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
   } 
  
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
         <Typography style={{color: "#26afee"}} variant="h6" align="right">

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

@@ -4,6 +4,7 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "center",
+    marginBottom: 12
   },
   wrapper: {
     textAlign: 'center',

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

@@ -339,8 +339,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
            sentMessageReplyById(isReply._id, value, caption.trim())
            setIsReply(undefined)
         }
-        if (!isReply && isForward) {
-           sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom)
+        if (value&&!isReply && isForward) {
+           sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom,value,caption.trim())
            setIsForward(undefined)
         }      
         if (mediaBlobUrl && type === 'recording') {
@@ -506,7 +506,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
   },[companionId])  
   
     return (
-        <div className={value || file || status === 'stopped' || _status === 'stopped' || isForward ?classes.containerActive:classes.container}>
+        <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
           {isArrow && <div className={classes.borderTop}></div>}
           {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
             handleScrollToTheMessage={handleScrollToTheMessage} />}
@@ -549,13 +549,13 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward? 'none' : 'block' }} />                           
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
-                    style={{display: value || file || status === 'stopped'  || _status === 'stopped' || isForward? 'block':'none' }}/>                
+                    style={{display: value || file || status === 'stopped'  || _status === 'stopped'? 'block':'none' }}/>                
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
                     style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: file || status || _status || isForward ? 'none' : "auto",
+                    pointerEvents: file || status || _status ? 'none' : "auto",
                         '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
                 <CommentIcon onClick={handleOpenCaption} 
                     fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
@@ -584,9 +584,9 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
                     </InputAdornment>
                   ),}}/>
                 </div>
-                <textarea disabled={file || type === 'recording' || type === 'filming' || isForward? true : false} value={value} onBlur={handleBlurTextarea}
+                <textarea disabled={file || type === 'recording' || type === 'filming'? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
-                    placeholder={file || isForward ? `${file?'The File is ready to send':'Forward Message is ready to send'}` : status === null && _status === null ? 'Message' :
+                    placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
                     `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
                     style={{color:value || file || type === 'recording' || type === 'filming' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
                 </textarea>

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

@@ -25,9 +25,9 @@ import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getAuthorizationState } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
 import { getScrollChat } from '../../../../redux/control/selector'
-import { actionScrollChat,actionOpenPinned } from '../../../../redux/control/action'
+import { actionScrollChat,actionOpenPinned,actionRightIsOpen } from '../../../../redux/control/action'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
-import { asyncGetChatById } from "../../../../redux/chat/operations";
+import { asyncGetChatById,asyncStartChatById } from "../../../../redux/chat/operations";
 import { seenChat } from "../../../../api-data";
 import { TPinnedMessages } from "../../../../typescript/redux/pinnedMessages/types";
 import { TMessage } from "../../../../typescript/redux/allMessages/types"; 
@@ -106,6 +106,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const [modalForward, setModalForward] = useState<boolean>(false)
   let time: any
   let tongue: any
+  const getSeconds = (createdAt:string) => Math.round(new Date(createdAt).getTime()/ 1000)
   const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
   const handleSelected = (_id: string) => {
     !isSomeSelected&&setIsSomeSelected(true)
@@ -125,13 +126,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     setIsForward(renderArr.find((el) => el._id === _id))
     setModalForward(true)
   }
-  
-  const setTongueAndTime = (_id: string) => {
-    openPinned && dispatch(actionOpenPinned(false))
-    isReply&&setIsReply(undefined)
-    setIsForward(renderArr.find((el) => el._id === _id))
-    setModalForward(true)
-  }   
+ 
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
      top: chatDivRef.current.scrollHeight,
@@ -166,6 +161,14 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       }, 2000)
     }
   }  
+
+  const handleScrollToTheChat = (companionIdForwardToAndFrom:string,oldId:string) => {
+    if (companionId === companionIdForwardToAndFrom) return handleScrollToTheMessage(oldId)
+    dispatch(actionRightIsOpen(''))
+    dispatch(actionOpenPinned(false))
+    dispatch(asyncStartChatById(companionIdForwardToAndFrom))
+    setTimeout(() => handleScrollToTheMessage(oldId), 2000)
+  }    
   
   useEffect(() => {
     if (scrollChat) {
@@ -205,7 +208,6 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
   }, [total, seen, chatDivRef, companionId, openPinned]);
-
   return (
     <div className={classes.container} >
       <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo} openPinned={openPinned}/>
@@ -214,7 +216,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
-          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom},i) => {
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption},i) => {
           const watched = true
           let isTime
           let isTongue = false
@@ -227,13 +229,21 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
             isTime = true
           }          
           if (!tongue&&nextTongue&&nextTongue.number === number) {
-            isTongue = false
+            if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {
+              isTongue = false
+            } else {
+              isTongue = true
+            }
             tongue = number
           } else if (!tongue&&nextTongue&&nextTongue.number !== number) {
             isTongue = true
             tongue = null
           } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number === number) {
-            isTongue = false
+            if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {
+              isTongue = false
+            } else {
+              isTongue = true
+            }
             tongue = number
           } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number !== number) {
             isTongue = true
@@ -273,21 +283,23 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                handleReply={handleReply}
                handleForward={handleForward} 
                /></div>)
-            if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
-               <MessageLeftReply
-                url={urlReply}
+               <MessageLeftForward
+                url={url}
+                companionIdForwardToAndFrom={companionIdForwardToAndFrom}
+                oldId={oldId}
                 tongue={isTongue}
                 avatarUrl={avatarUrl}
                 color={color}
-                replyMessage={replyMessage}
-                message={message}
-                createdAt={createdAt}
                 name={name}
                 lastName={lastName}
-                replyName={replyName}
-                replyLastName={replyLastName}
-                replyCaption={replyCaption}
+                forwardName={forwardName}
+                forwardLastName={forwardLastName}
+                forwardMessage={forwardMessage}
+                forwardCaption={forwardCaption}
+                message={message}
+                createdAt={createdAt}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -300,22 +312,23 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleReply={handleReply}
                 handleForward={handleForward}
                 fullType={fullType}
-                handleScrollToTheMessage={handleScrollToTheMessage}
-                oldId={oldId}
-                /></div>)
-            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
+                handleScrollToTheChat={handleScrollToTheChat}
+                 /></div>)  
+            if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
-               <MessageLeftForward
-                url={url}
+               <MessageLeftReply
+                url={urlReply}
                 tongue={isTongue}
                 avatarUrl={avatarUrl}
                 color={color}
-                name={name}
-                lastName={lastName}
-                forwardName={forwardName}
-                forwardLastName={forwardLastName}
+                replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
+                name={name}
+                lastName={lastName}
+                replyName={replyName}
+                replyLastName={replyLastName}
+                replyCaption={replyCaption}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -328,8 +341,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleReply={handleReply}
                 handleForward={handleForward}
                 fullType={fullType}
-                handleScrollToTheChat={handleScrollToTheMessage}
-                 /></div>)              
+                handleScrollToTheMessage={handleScrollToTheMessage}
+                oldId={oldId}
+                /></div>)                             
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageLeftImage   
@@ -446,22 +460,24 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleReply={handleReply}
                 handleForward={handleForward}
                 /></div>)
-            if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
-              <MessageRightReply
-                url={urlReply}
+              <MessageRightForward
+                url={url}
+                oldId={oldId}
+                companionIdForwardToAndFrom={companionIdForwardToAndFrom}
                 tongue={isTongue}
                 watched={watched}
                 avatarUrl={avatarUrl}
                 color={color}
-                replyMessage={replyMessage}
-                message={message}
-                createdAt={createdAt}
                 name={name}
                 lastName={lastName}
-                replyName={replyName}
-                replyLastName={replyLastName}
-                replyCaption={replyCaption}
+                forwardName={forwardName}
+                forwardLastName={forwardLastName}
+                forwardMessage={forwardMessage}
+                forwardCaption={forwardCaption}
+                message={message}
+                createdAt={createdAt}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -474,23 +490,24 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleReply={handleReply}
                 handleForward={handleForward}
                 fullType={fullType}
-                handleScrollToTheMessage={handleScrollToTheMessage}
-                oldId={oldId}
-                /></div>)
-            if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
+                handleScrollToTheChat={handleScrollToTheChat}
+                  /></div>) 
+            if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
-              <MessageRightForward
-                url={url}
+              <MessageRightReply
+                url={urlReply}
                 tongue={isTongue}
                 watched={watched}
                 avatarUrl={avatarUrl}
                 color={color}
-                name={name}
-                lastName={lastName}
-                forwardName={forwardName}
-                forwardLastName={forwardLastName}
+                replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
+                name={name}
+                lastName={lastName}
+                replyName={replyName}
+                replyLastName={replyLastName}
+                replyCaption={replyCaption}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
@@ -503,8 +520,9 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleReply={handleReply}
                 handleForward={handleForward}
                 fullType={fullType}
-                handleScrollToTheChat={handleScrollToTheMessage}
-                  /></div>)            
+                handleScrollToTheMessage={handleScrollToTheMessage}
+                oldId={oldId}
+                /></div>)                             
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightImage   

src/typescript/redux/allMessages/types.ts

@@ -1,6 +1,7 @@
 export type TMessage = {
   message: string,
-  replyMessage:string,
+  replyMessage: string,
+  forwardMessage: string,
   name: string,
   replyName: string,
   lastName: string,
@@ -18,6 +19,7 @@ export type TMessage = {
   companionIdForwardToAndFrom: string,
   caption: string,
   replyCaption: string,
+  forwardCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,

src/typescript/redux/messages/types.ts

@@ -1,6 +1,7 @@
 export type TMessage = {
   message: string,
-  replyMessage:string,
+  replyMessage: string,
+  forwardMessage: string,
   name: string,
   replyName: string,
   lastName: string,
@@ -15,6 +16,7 @@ export type TMessage = {
   fullType: string,
   caption: string,
   replyCaption: string,
+  forwardCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,

src/typescript/redux/pinnedMessages/types.ts

@@ -1,6 +1,7 @@
 export type TPinnedMessage = {
   message: string,
-  replyMessage:string,
+  replyMessage: string,
+  forwardMessage: string,
   name: string,
   replyName: string,
   lastName: string,
@@ -15,6 +16,7 @@ export type TPinnedMessage = {
   fullType: string,
   caption: string,
   replyCaption: string,
+  forwardCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,