worked on reply

src/api-data/index.ts

@@ -330,9 +330,9 @@ const sentMessageById = async <T>(id:string,message:string,caption:string): Prom
   }
 };
 
-const sentMessageReplyById = async <T>(id:string,newMessage:string,newCaption:string): Promise<T | undefined> => {
+const sentMessageReplyById = async <T>(id:string,message:string,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post('/messages/reply', { id, newMessage,newCaption });
+    const { data: { data } } = await axios.post('/messages/reply', { id, message,caption });
     return data
   } catch (e) {
     forbidden(e)

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

@@ -19,7 +19,7 @@ import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -324,7 +324,7 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -417,7 +417,7 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -470,7 +470,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -320,7 +320,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -17,7 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 const { Player } = require('video-react')
 
 const StyledMenu = styled((props:any) => (
@@ -325,7 +325,7 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -277,13 +277,12 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageReplyLeft {
   url:string,
-  newMessage: string,
+  replyMessage: string,
   message:string,
-  name:string,
-  lastName:string,
+  replyName:string,
+  replyLastName:string,
   createdAt: string,
   caption: string,
-  newCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
@@ -298,7 +297,7 @@ interface IMessageReplyLeft {
   oldId: string
 }
 
-const MessageReplyLeft = ({url,newMessage,message,name,lastName,createdAt,caption,newCaption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyLeft) => {
+const MessageReplyLeft = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyLeft) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -339,14 +338,14 @@ const MessageReplyLeft = ({url,newMessage,message,name,lastName,createdAt,captio
   }  
   
   return (
-    <div className={classes.container} style={{ marginBottom: newCaption ? 45 : 15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
       {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
      <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={message}>
+            {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
             </CopyToClipboard>}
             {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -359,20 +358,20 @@ const MessageReplyLeft = ({url,newMessage,message,name,lastName,createdAt,captio
             className={classes.folderIcon} fontSize='large' />} 
             <div className={classes.replyColumn}></div>
             <ListItemText onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
-              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+              primary={`${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+              ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
               primaryTypographyProps={{color: "#00b333"}}
-              secondary={slicedWord(message, 40, 0)}
+              secondary={slicedWord(replyMessage, 40, 0)}
               secondaryTypographyProps={{ color: "#626262" }} />          
           </MenuItem>
         </ul>
         <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={slicedWord(newMessage, 40, 0)}
+          primary={slicedWord(message, 40, 0)}
           primaryTypographyProps={{color: "#0e0d0d"}}/>        
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
-        {newCaption&&<div className={classes.captionWrapper}>{newCaption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -391,7 +390,7 @@ const MessageReplyLeft = ({url,newMessage,message,name,lastName,createdAt,captio
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={newMessage?newMessage:message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -269,13 +269,12 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 interface IMessageReplyRight {
   url:string,
-  newMessage: string,
+  replyMessage: string,
   message:string,
-  name:string,
-  lastName:string,
+  replyName:string,
+  replyLastName:string,
   createdAt: string,
   caption: string,
-  newCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
@@ -290,7 +289,7 @@ interface IMessageReplyRight {
   oldId: string
 }
 
-const MessageReplyRight = ({url,newMessage,message,name,lastName,createdAt,caption,newCaption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyRight) => {
+const MessageReplyRight = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyRight) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -330,13 +329,13 @@ const MessageReplyRight = ({url,newMessage,message,name,lastName,createdAt,capti
   }
 
   return (
-    <div className={classes.container} style={{ marginBottom: newCaption ? 45 : 15}}>
+    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
       <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={message}>
+            {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={replyMessage}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
             </CopyToClipboard>}
             {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -349,20 +348,20 @@ const MessageReplyRight = ({url,newMessage,message,name,lastName,createdAt,capti
             className={classes.folderIcon} fontSize='large' />}         
             <div className={classes.replyColumn}></div>
             <ListItemText onClick={() => handleScrollToTheMessage(oldId)}
-              primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
-              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+              primary={`${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
+              ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
               primaryTypographyProps={{color: "#00b333"}}
-              secondary={slicedWord(message, 40, 0)}
+              secondary={slicedWord(replyMessage, 40, 0)}
               secondaryTypographyProps={{ color: "#626262" }} />          
           </MenuItem>
         </ul>
         <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={slicedWord(newMessage, 40, 0)}
+          primary={slicedWord(message, 40, 0)}
           primaryTypographyProps={{color: "#0e0d0d"}}/>         
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
-        {newCaption&&<div className={classes.captionWrapper}>{newCaption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -381,7 +380,7 @@ const MessageReplyRight = ({url,newMessage,message,name,lastName,createdAt,capti
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={newMessage?newMessage:message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -18,7 +18,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -322,7 +322,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -416,7 +416,7 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -468,7 +468,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -318,7 +318,7 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -17,7 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload,copied,emojisArr,slicedWord } from '../../../../../../helpers'
 
 const { Player } = require('video-react')
 
@@ -325,7 +325,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{caption}</div>}
+        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >

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

@@ -84,7 +84,7 @@ const useStyles = makeStyles({
   borderTop: {
     position: 'absolute',
     left: 0,
-    top: '-2vh',
+    top: -21,
     width: '100%',
     height: 1,
     background:'#ffffff',
@@ -123,33 +123,30 @@ const useStyles = makeStyles({
     width: 2,
     backgroundColor: '#00aeff',
   },
-    filesMenu: {
-      background: '#fdfdfd',
-      position: 'absolute',
-      width: '15vw',
-      maxWidth: '100%',
-      left: '61%',
-      bottom:'10vh',
-      zIndex: 10,
-      visibility: 'visible',
-      borderRadius: 10,
-      padding: '4px 6px',
-    },
-    emoji: {
-      position: 'absolute',
-      bottom:'10vh',
-      zIndex: 10,
-      visibility: 'visible',
-    },
+  filesMenu: {
+    background: '#fdfdfd',
+    position: 'absolute',
+    width: '15vw',
+    maxWidth: '100%',
+    left: '61%',
+    bottom:'9vh',
+    zIndex: 10,
+    visibility: 'visible',
+    borderRadius: 10,
+    padding: '4px 6px',
+  },
+  emoji: {
+    position: 'absolute',
+    bottom:'9vh',
+    zIndex: 10,
+    visibility: 'visible',
+  },
     captionTextField: {
-      position: 'absolute',
-      bottom:'10vh',
       zIndex: 10,
       visibility: 'visible',  
+      width: '35vw',
       backgroundColor: '#ffffff',
-      padding: 10,
-      borderRadius: 10,
-      width: '20vw',
+      borderRadius:4,
     },
     iconCancel: {
         position: 'absolute',
@@ -310,11 +307,10 @@ interface ISendMessage{
   silentMode: boolean,
   isReply:TMessage | undefined,
   setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
-  chatDivRef: any | null,
   handleScrollToTheMessage: (_id:string) => void
 }
 
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScrollToTheMessage }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMessage }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -352,24 +348,14 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
       isOpenMenu && setIsOpenMenu(false)
       isOpenEmoji && setIsOpenEmoji(false)
       isOpenCaption && setIsOpenCaption(false)
-      isReply&&setIsReply(undefined)
    }
-  const defaultState = () => {
-      clearBlobUrl()
-      _clearBlobUrl()
-      setIsRecording(false)
-      setIsFilming(false)     
-      setFile(false)
-      setValue('')
-      setCaption('')
-      setType('')
-      setIsOpenMenu(false)
-      setIsOpenEmoji(false)
-      setIsOpenCaption(false)
-    }  
+
     const sentMessage = async () => {
         if (value && !isReply) sentMessageById(companionId, value, caption.trim())
-        if (value && isReply) sentMessageReplyById(isReply._id, value, caption.trim())
+        if (value && isReply) {
+           sentMessageReplyById(isReply._id, value, caption.trim())
+           isReply&&setIsReply(undefined)
+        }
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
             audio.open('GET', mediaBlobUrl, true);
@@ -440,10 +426,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
         !silentMode&&playNotification(`${prodBaseURL}/send.mp3`)
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
-    const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (caption.length >= 25) setCaption(e.target.value.slice(0,-1))
-        else setCaption(e.target.value)
-    }
+    const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => setCaption(e.target.value)
     const handleFocusTextarea = async () => await typingChat(companionId,true)
     const handleBlurTextarea = async () => await typingChat(companionId,false) 
     const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
@@ -483,9 +466,23 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
   }
   
   useEffect(() => {
-    if (isReply) defaultState()
-  },[isReply])
-
+    if (isReply) {
+      stopRecording()
+      _stopRecording()
+      clearBlobUrl()
+      _clearBlobUrl()
+      setIsRecording(false)
+      setIsFilming(false)     
+      setFile(false)
+      setValue('')
+      setCaption('')
+      setType('')
+      setIsOpenMenu(false)
+      setIsOpenEmoji(false)
+      setIsOpenCaption(false)
+    }
+  }, [isReply])
+  console.log(file,'file', status ,'status', _status, '_status')
     return (
         <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
             {isArrow && <div className={classes.borderTop}></div>}
@@ -530,8 +527,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
                 </div>
                 </>}            
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
-                    sx={{width: 56, height: 56, display: file || value || status === 'stopped'
-                    || _status === 'stopped' ? 'inline-block' : 'none'}} />
+                    sx={{width: 56, height: 56, display: file || value || (status === 'stopped'&&type)
+                    || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
                     style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming || isReply ? 'none' : 'block' }} />                           
@@ -543,11 +540,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
                     style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording && !isReply ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: file || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",
+                    pointerEvents: file || type === 'recording' || type === 'filming' ? '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',
-                    pointerEvents: value || file || status === 'stopped'  || _status === 'stopped'? 'auto' : "none",
+                    pointerEvents: value || file || type === 'recording' || type === 'filming'? 'auto' : "none",
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
@@ -557,16 +554,15 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
                 </div>
                 <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                   style={{ display: isOpenCaption ? 'block' : 'none' }}>
-                  <div className={classes.captionTextField} style={{left: rightIsOpen?'32.5vw':'45vw'}}>
-                    <TextField onChange={handleTextareaCaption} label="Caption"
-                        value={caption} fullWidth variant='outlined' id="caption" name='caption'/>
-                   </div>
+                   <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
+                    style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply?'78.5vh':'85vh' }}
+                    placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'/>
                 </div>
-                <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? 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 ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? 'Message ' :
-                    `${status === 'stopped' || _status === 'stopped' ? 'Recorded' : 'Recording in progress...'}`} rows={1}
-                    style={{color:value || file || status !== 'idle' || _status !== 'idle' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
+                    placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? '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>
                 <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
                  sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',

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

@@ -191,8 +191,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       <div id={companionId} ref={chatDivRef} onScroll={debouncedHandleScroll}
         className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
-        {messagesMemo.length > 0 ? renderArr.map(({ newMessage,message, name, lastName, color,pinned,
-           createdAt,number, type,fullType,newCaption,caption,emoji,emojiCompanion,_id,oldId,}) => {
+        {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName, color,pinned,
+           createdAt,number, type,fullType,replyName,replyLastName,caption,emoji,emojiCompanion,_id,oldId,}) => {
           let isTime
           if (!time) {
             isTime = true
@@ -202,6 +202,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
             isTime = true
           }
           const url = `${prodAwsS3}/${message}`
+          const urlReply = `${prodAwsS3}/${replyMessage}`
           if (number !== userNumber) {
             if (type === 'text' && !oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
@@ -224,14 +225,13 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
                <MessageReplyLeft
-                url={url}
-                newMessage={newMessage}
+                url={urlReply}
+                replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
-                name={name}
-                lastName={lastName}
+                replyName={replyName}
+                replyLastName={replyLastName}
                 caption={caption}
-                newCaption={newCaption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
                 pinned={pinned}
@@ -338,14 +338,13 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
               <MessageReplyRight
-                url={url}
-                newMessage={newMessage}
+                url={urlReply}
+                replyMessage={replyMessage}
                 message={message}
                 createdAt={createdAt}
-                name={name}
-                lastName={lastName}
+                replyName={replyName}
+                replyLastName={replyLastName}
                 caption={caption}
-                newCaption={newCaption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
                 pinned={pinned}
@@ -434,7 +433,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         }) : <AlertInfo name='You do not have messages yet!' />}
         </div>
       </div>
-      {!openPinned&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} chatDivRef={chatDivRef} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+      {!openPinned&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} handleScrollToTheMessage={handleScrollToTheMessage}/>}
       {openPinned&&!isSomeSelected &&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );

src/typescript/redux/allMessages/types.ts

@@ -1,8 +1,10 @@
 export type TMessage = {
   message: string,
-  newMessage:string,
+  replyMessage:string,
   name: string,
+  replyName: string,
   lastName: string,
+  replyLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -12,7 +14,7 @@ export type TMessage = {
   companionId: string,
   companionIdFlow: string,
   caption: string,
-  newCaption: string,
+  replyCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,

src/typescript/redux/messages/types.ts

@@ -1,8 +1,10 @@
 export type TMessage = {
   message: string,
-  newMessage:string,
+  replyMessage:string,
   name: string,
+  replyName: string,
   lastName: string,
+  replyLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -10,7 +12,7 @@ export type TMessage = {
   type: string,
   fullType: string,
   caption: string,
-  newCaption: string,
+  replyCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,

src/typescript/redux/pinnedMessages/types.ts

@@ -1,8 +1,10 @@
 export type TPinnedMessage = {
   message: string,
-  newMessage:string,
+  replyMessage:string,
   name: string,
+  replyName: string,
   lastName: string,
+  replyLastName: string,
   avatarUrl:string,
   color: string,
   number:string,
@@ -10,7 +12,7 @@ export type TPinnedMessage = {
   type: string,
   fullType: string,
   caption: string,
-  newCaption: string,
+  replyCaption: string,
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,