done caption

src/api-data/index.ts

@@ -260,9 +260,9 @@ const removeMessageById = async <T>(id:string): Promise<T | undefined> => {
   }
 };
 
-const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined> => {
+const sentMessageById = async <T>(id:string,message:string,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post('/messages', { id, message });
+    const { data: { data } } = await axios.post('/messages', { id, message,caption });
     return data
   } catch (e) {
     forbidden(e)
@@ -270,9 +270,9 @@ const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined>
   }
 };
 
-const sentImgMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+const sentImgMessageById = async <T>(id:string,formData: object,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post(`/messages/image/${id}`, formData);
+    const { data: { data } } = await axios.post(`/messages/image/${id} ${caption}}`, formData);
     return data
   } catch (e) {
     forbidden(e)
@@ -280,9 +280,9 @@ const sentImgMessageById = async <T>(id:string,formData: object): Promise<T | un
   }
 };
 
-const sentAudioMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+const sentAudioMessageById = async <T>(id:string,formData: object,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post(`/messages/audio/${id}`, formData);
+    const { data: { data } } = await axios.post(`/messages/audio/${id} ${caption}`, formData);
     return data
   } catch (e) {
     forbidden(e)
@@ -290,9 +290,9 @@ const sentAudioMessageById = async <T>(id:string,formData: object): Promise<T |
   }
 };
 
-const sentVideoMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+const sentVideoMessageById = async <T>(id:string,formData: object,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post(`/messages/video/${id}`, formData);
+    const { data: { data } } = await axios.post(`/messages/video/${id} ${caption}`, formData);
     return data
   } catch (e) {
     forbidden(e)
@@ -300,9 +300,9 @@ const sentVideoMessageById = async <T>(id:string,formData: object): Promise<T |
   }
 };
 
-const sentFileMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+const sentFileMessageById = async <T>(id:string,formData: object,caption:string): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post(`/messages/file/${id}`, formData);
+    const { data: { data } } = await axios.post(`/messages/file/${id} ${caption}`, formData);
     return data
   } catch (e) {
     forbidden(e)

src/components/AuthPage/Registration/index.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import UploadAvatar from './UploadAvatar'
-import { asyncCreateUser,asyncLogin } from '../../../redux/authorization/operations'
+import { asyncCreateUser } from '../../../redux/authorization/operations'
 import { format } from '../../../helpers'
 
 const useStyles = makeStyles({

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

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 15px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
       "&:after": {
@@ -95,7 +95,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 15px 5px',
     backgroundColor: '#babdbc',
     borderRadius: 7,
       "&:after": {
@@ -145,6 +145,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -174,10 +184,11 @@ interface IMessageLeftAudio {
   url:string,
   createdAt: string,
   fullType: string,
+  caption :string,
   _id:string
 }
 
-const MessageLeftAudio = ({ url,createdAt,fullType,_id }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,createdAt,fullType,caption,_id }:IMessageLeftAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -218,6 +229,7 @@ const MessageLeftAudio = ({ url,createdAt,fullType,_id }:IMessageLeftAudio) => {
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -151,6 +151,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   overlay: {
     position: 'absolute',
     top: 0,
@@ -191,10 +201,11 @@ interface IMessageLeftFile {
   url:string,
   createdAt: string,
   type: string,
+  caption :string,
   _id:string
 }
 
-const MessageLeftFile = ({ url,createdAt,type,_id }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,createdAt,type,caption,_id }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -244,6 +255,7 @@ const MessageLeftFile = ({ url,createdAt,type,_id }:IMessageLeftFile) => {
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     justifyContent: 'space-between',
     borderRadius: 7,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#ffffff',
       "&:after": {
         content: "''",
@@ -97,7 +97,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     justifyContent: 'space-between',
     borderRadius: 7,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#babdbc',
       "&:after": {
         content: "''",
@@ -138,6 +138,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+    caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },    
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -225,10 +235,11 @@ interface IMessagesLeftImage {
   message: string,
   messages: any,
   fullType: string,
+  caption :string,
   _id:string
 }
 
-const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,caption,_id}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -276,6 +287,7 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,_id}:I
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>       
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -59,6 +59,7 @@ const useStyles = makeStyles({
       alignItems: 'center',
       alignContent: 'center',
       maxWidth: 450,
+      minWidth:200,
       padding: "10px",
       paddingBottom:18,
       backgroundColor: "#ffffff",
@@ -137,6 +138,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 6,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -168,10 +179,11 @@ interface IMessageLeftText {
   name:string,
   lastName:string,
   createdAt: string,
+  caption :string,
   _id:string
 }
 
-const MessageLeftText = ({message,name,lastName,createdAt,_id}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,createdAt,caption,_id}:IMessageLeftText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -214,6 +226,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,_id}:IMessageLeftText)
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>

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

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
       "&:after": {
@@ -96,7 +96,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#babdbc',
     borderRadius: 7,
       "&:after": {
@@ -143,6 +143,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   player: {
     backgroundColor: '#ffffff',
   },
@@ -178,10 +188,11 @@ interface IMessageLeftVideo {
   url:string,
   createdAt: string,
   fullType: string,
+  caption :string,
   _id:string
 }
 
-const MessageLeftVideo = ({ url,createdAt,fullType,_id }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,createdAt,fullType,caption,_id }:IMessageLeftVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -220,6 +231,7 @@ const MessageLeftVideo = ({ url,createdAt,fullType,_id }:IMessageLeftVideo) => {
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -62,7 +62,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 15px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
       "&:after": {
@@ -94,7 +94,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 15px 5px',
     backgroundColor: '#ced8d7',
     borderRadius: 7,
       "&:after": {
@@ -138,12 +138,22 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: 0,
+      bottom: 2,
       right: 6,
       color: '#414141',
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -173,10 +183,11 @@ interface IMessageRightAudio {
   url:string,
   createdAt: string,
   fullType: string,
+  caption: string,
   _id:string
 }
 
-const MessageRightAudio = ({ url,createdAt,fullType,_id }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,createdAt,fullType,caption,_id }:IMessageRightAudio) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -216,6 +227,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,_id }:IMessageRightAudio) =>
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -151,6 +151,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 0,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   overlay: {
     position: 'absolute',
     top: 0,
@@ -191,10 +201,11 @@ interface IMessageRightFile {
   url:string,
   createdAt: string,
   type: string,
+  caption: string,
   _id:string
 }
 
-const MessageRightFile = ({ url,createdAt,type,_id }:IMessageRightFile) => {
+const MessageRightFile = ({ url,createdAt,type,caption,_id }:IMessageRightFile) => {
   const classes = useStyles();
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -247,6 +258,7 @@ const MessageRightFile = ({ url,createdAt,type,_id }:IMessageRightFile) => {
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     justifyContent: 'space-between',
     borderRadius: 7,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#deffa9',
       "&:after": {
         content: "''",
@@ -97,7 +97,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     justifyContent: 'space-between',
     borderRadius: 7,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#ced8d7',
       "&:after": {
         content: "''",
@@ -138,6 +138,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+    caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 1,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },    
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -225,10 +235,11 @@ interface IMessageRightImage {
   message: string,
   messages: any,
   fullType: string,
+  caption: string,
   _id:string
 }
 
-const MessageRightImage = ({url,createdAt,color,message,messages,fullType,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,message,messages,fullType,caption,_id}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -276,6 +287,7 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,_id}:I
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -59,6 +59,7 @@ const useStyles = makeStyles({
       alignItems: 'center',
       alignContent: 'center',
       maxWidth: 450,
+      minWidth:200,
       padding: "10px",
       paddingBottom:18,
       backgroundColor: "#deffa9",
@@ -137,6 +138,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 6,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -167,10 +178,11 @@ interface IMessageRightText {
   name:string,
   lastName:string,
   createdAt: string,
+  caption: string,
   _id:string
 }
 
-const MessageRightText = ({message,name,lastName,createdAt,_id}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,createdAt,caption,_id}:IMessageRightText) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -213,6 +225,7 @@ const MessageRightText = ({message,name,lastName,createdAt,_id}:IMessageRightTex
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>

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

@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
       "&:after": {
@@ -97,7 +97,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '12px 5px 12px 5px',
+    padding: '12px 5px 18px 5px',
     backgroundColor: '#ced8d7',
     borderRadius: 7,
       "&:after": {
@@ -144,6 +144,16 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
+  caption: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: 1,
+      left: 6,
+      color: '#000000',
+      padding: 3,
+      borderRadius: 5,
+  },  
   player: {
     backgroundColor: '#deffa9',
   },
@@ -179,10 +189,11 @@ interface IMessageRightVideo {
   url:string,
   createdAt: string,
   fullType: string,
+  caption: string,
   _id:string
 }
 
-const MessageRightVideo = ({ url,createdAt,fullType,_id }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,createdAt,fullType,caption,_id }:IMessageRightVideo) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -220,6 +231,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,_id }:IMessageRightVideo) =>
             <FileDownloadIcon fontSize='medium'/>
         </IconButton>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
+        <div className={classes.caption}>{caption}</div>
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>        
         <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>

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

@@ -6,7 +6,9 @@ import PauseIcon from '@mui/icons-material/Pause';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import CloseIcon from '@mui/icons-material/Close';
+import CommentIcon from '@mui/icons-material/Comment';
 import Avatar from '@mui/material/Avatar';
+import TextField from '@mui/material/TextField';
 import Picker from 'emoji-picker-react';
 
 import { useReactMediaRecorder } from "react-media-recorder";
@@ -23,7 +25,6 @@ import { getRightIsOpen } from '../../../../../redux/control/selector'
 import { playNotification,prodBaseURL } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 
-
 const useStyles = makeStyles({   
     container: {
         width: '35vw',
@@ -69,7 +70,7 @@ const useStyles = makeStyles({
             fontWeight: 600,
             fontSize:20
         }
-    },    
+    },
     attachIcon: {
         transform:'rotate(30deg)',  
     },
@@ -99,6 +100,16 @@ const useStyles = makeStyles({
       zIndex: 10,
       visibility: 'visible',
     },
+    captionTextField: {
+      position: 'absolute',
+      bottom:'10vh',
+      zIndex: 10,
+      visibility: 'visible',  
+      backgroundColor: '#ffffff',
+      padding: 10,
+      borderRadius: 10,
+      width: '15vw',
+    },
     iconCancel: {
         position: 'absolute',
         left: -72,
@@ -232,6 +243,8 @@ const SendMessage = ({isArrow }:ISendMessage) => {
     const rightIsOpen = useSelector(getRightIsOpen)
     const [value, setValue] = useState<string>('')
     const [file, setFile] = useState<any>(false)
+    const [caption, setCaption] = useState<string>('')
+    const [isOpenCaption, setIsOpenCaption] = useState<boolean>(false)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
     const [isRecording, setIsRecording] = useState<boolean>(false)
@@ -249,15 +262,17 @@ const SendMessage = ({isArrow }:ISendMessage) => {
         isRecording && setIsRecording(false)
         isFilming && setIsFilming(false)
         value && setValue('')
+        caption&& setCaption('')
         type && setType('')
         mediaBlobUrl && clearBlobUrl()
         _mediaBlobUrl && _clearBlobUrl()
         isOpenMenu && setIsOpenMenu(false)
         isOpenEmoji && setIsOpenEmoji(false)
+        isOpenCaption && setIsOpenCaption(false)
     
     }
     const sentMessage = async () => {
-        if (value) sentMessageById(companionId, value)
+        if (value) sentMessageById(companionId, value,caption.trim())
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
             audio.open('GET', mediaBlobUrl, true);
@@ -270,7 +285,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 })
                 const formData: any = new FormData()
                 formData.append("audio", file)
-                sentAudioMessageById(companionId, formData)
+                sentAudioMessageById(companionId, formData,caption.trim())
                 clearBlobUrl()
                }
             }
@@ -288,7 +303,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 })
                 const formData: any = new FormData()
                 formData.append("video", file)
-                sentVideoMessageById(companionId, formData)
+                sentVideoMessageById(companionId, formData,caption.trim())
                 _clearBlobUrl()
                 }
             }
@@ -298,34 +313,40 @@ const SendMessage = ({isArrow }:ISendMessage) => {
             if (file.type.includes('image') && type === 'content') {
               const formData: any = new FormData()
               formData.append("image", file);
-              await sentImgMessageById(companionId, formData)
+              await sentImgMessageById(companionId, formData, caption.trim())
             }
             if (file.type.includes('audio') && type === 'content') {
               const formData: any = new FormData()
               formData.append("audio", file);
-              sentAudioMessageById(companionId, formData)
+              sentAudioMessageById(companionId, formData,caption.trim())
             }           
             if (file.type.includes('video') && type === 'content') {
               const formData: any = new FormData()
               formData.append("video", file);
-              sentVideoMessageById(companionId, formData)                
+              sentVideoMessageById(companionId, formData,caption.trim())                
             }
             if (file.type.includes('application') && type === 'application') {
               const formData: any = new FormData()
               formData.append("file", file);
-              sentFileMessageById(companionId, formData)   
+              sentFileMessageById(companionId, formData,caption.trim())   
             }
         }
         clearMessage()
         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).toLocaleLowerCase())
+        else setCaption(e.target.value.toLocaleLowerCase())
+    }
     const handleFocusTextarea = async () => await typingChat(companionId,true)
     const handleBlurTextarea = async () => await typingChat(companionId,false) 
     const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
     const handleCloseFileMenu = (e:any) => e.target.id === 'overlay'&&isOpenMenu&&setIsOpenMenu(false) 
-    const handleOpenEmoji = () => !isOpenEmoji&&setIsOpenEmoji(true)
-    const handleCloseEmoji = (e: any) => e.target.id === 'overlay'&&isOpenEmoji&&setIsOpenEmoji(false) 
+    const handleOpenEmoji = () => !isOpenEmoji && setIsOpenEmoji(true)
+    const handleCloseEmoji = (e: any) => e.target.id === 'overlay' && isOpenEmoji && setIsOpenEmoji(false)
+    const handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
+    const handleCloseCaption = (e: any) => e.target.id === 'overlay' && isOpenCaption && setIsOpenCaption(false)
     const handleRecording = () => {
         if (isRecording) return stopRecording()
         startRecording()
@@ -367,13 +388,13 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                   <div className={classes.ringRing}></div>
                   <div className={classes.circle}></div>         
                 </div>
-                </>}
+                </>}            
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? '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 ? 'none' : 'block'}} />
+                    style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming ? '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' ? 'block':'none' }}/>                
@@ -383,6 +404,10 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                     pointerEvents: file || status !== 'idle' || _status !== 'idle' ? '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",
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
@@ -390,12 +415,20 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                       <Picker onEmojiClick={onEmojiClick} />
                    </div>  
                 </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>
+                </div>
                 <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? 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}
+                    `${status === 'stopped' || _status === 'stopped' ? 'Recorded' : 'Recording in progress...'}`} rows={1}
                     style={{color:value || file || status !== 'idle' || _status !== 'idle' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
-               </textarea>
+                </textarea>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                   fontSize='medium' sx={{color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                   pointerEvents: value || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",'&:hover': { color: 'rgb(41, 139, 231)'}}} />

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

@@ -136,7 +136,7 @@ const ChatBar = () => {
         className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,
-           createdAt,number, type,fullType,_id }) => {
+           createdAt,number, type,fullType,caption,_id }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -154,6 +154,7 @@ const ChatBar = () => {
                createdAt={createdAt}
                name={name}
                lastName={lastName}
+               caption={caption}
                _id={_id}
                  /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -165,6 +166,7 @@ const ChatBar = () => {
                 message={message}
                 messages={messages}
                 fullType={fullType}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -173,6 +175,7 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 fullType={fullType}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -181,6 +184,7 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 fullType={fullType}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type) return (<div key={createdAt}>
@@ -189,6 +193,7 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 type={type}
+                caption={caption}
                 _id={_id}
                   /></div>)             
           } else {
@@ -199,6 +204,7 @@ const ChatBar = () => {
                 createdAt={createdAt}
                 name={name}
                 lastName={lastName}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type === 'image') return (<div key={createdAt}>
@@ -210,6 +216,7 @@ const ChatBar = () => {
                 message={message}
                 messages={messages}
                 fullType={fullType}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
@@ -218,6 +225,7 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 fullType={fullType}
+                caption={caption}
                 _id={_id}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
@@ -226,6 +234,7 @@ const ChatBar = () => {
                  url={url}
                  createdAt={createdAt}
                  fullType={fullType}
+                 caption={caption}
                  _id={_id}
                    /></div>)
             if (type) return (<div key={createdAt}>
@@ -234,6 +243,7 @@ const ChatBar = () => {
                  url={url}
                  createdAt={createdAt}
                  type={type}
+                 caption={caption}
                  _id={_id}
                    /></div>)            
           }

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -53,6 +53,7 @@ const ChatsList = ({sort}:IChatsList) => {
   const handleListItemClick = (companionId: string) => {
     dispatch(actionRightIsOpen(''))
     dispatch(asyncGetChatById(companionId))
+    if(chat.companionId !== companionId) dispatch(actionScrollChat(true))
   }
 
   const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {

src/typescript/redux/allMessages/types.ts

@@ -10,6 +10,7 @@ export type TMessage = {
   fullType:string,
   companionId: string,
   companionIdFlow: string,
+  caption:string,
   idTime: string,
   owner: any,
   createdAt: string,

src/typescript/redux/messages/types.ts

@@ -8,6 +8,7 @@ export type TMessage = {
   _id: string,
   type: string,
   fullType: string,
+  caption: string,
   idTime: string,
   companionId: string,
   companionIdFlow: string,