add camera capture

package-lock.json

@@ -24,7 +24,6 @@
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.9",
         "@types/yup": "^0.29.13",
-        "aws-sdk": "^2.1163.0",
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
         "canvas": "^2.8.0",
@@ -51,6 +50,7 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.1",
         "react-toastify": "^6.2.0",
+        "react-webcam": "^7.0.1",
         "redux": "^4.0.5",
         "redux-devtools-extension": "^2.13.8",
         "redux-logger": "^3.0.6",
@@ -4497,65 +4497,6 @@
         "autoprefixer": "bin/autoprefixer"
       }
     },
-    "node_modules/aws-sdk": {
-      "version": "2.1163.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1163.0.tgz",
-      "integrity": "sha512-vSCPTNduqxv5cGe3al/0V6dxPr+hpDRR7B9AADtVp+iHS+HdLCeNZbGhT66VfFjXVXXEfbAuF4ME9fYSc5/mOg==",
-      "dependencies": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "uuid": "8.0.0",
-        "xml2js": "0.4.19"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-    },
-    "node_modules/aws-sdk/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-    },
-    "node_modules/aws-sdk/node_modules/sax": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA=="
-    },
-    "node_modules/aws-sdk/node_modules/url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/uuid": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
-      "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -13230,14 +13171,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -18490,6 +18423,15 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/react-webcam": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.0.1.tgz",
+      "integrity": "sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==",
+      "peerDependencies": {
+        "react": ">=16.2.0",
+        "react-dom": ">=16.2.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -23703,23 +23645,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
-    "node_modules/xml2js": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
-      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~9.0.1"
-      }
-    },
-    "node_modules/xml2js/node_modules/xmlbuilder": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-      "integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xmlbuilder": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.5.tgz",
@@ -27570,58 +27495,6 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
-    "aws-sdk": {
-      "version": "2.1163.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1163.0.tgz",
-      "integrity": "sha512-vSCPTNduqxv5cGe3al/0V6dxPr+hpDRR7B9AADtVp+iHS+HdLCeNZbGhT66VfFjXVXXEfbAuF4ME9fYSc5/mOg==",
-      "requires": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "uuid": "8.0.0",
-        "xml2js": "0.4.19"
-      },
-      "dependencies": {
-        "events": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-          "integrity": "sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw=="
-        },
-        "ieee754": {
-          "version": "1.1.13",
-          "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-          "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-        },
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-        },
-        "sax": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-          "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA=="
-        },
-        "url": {
-          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-          "integrity": "sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==",
-          "requires": {
-            "punycode": "1.3.2",
-            "querystring": "0.2.0"
-          }
-        },
-        "uuid": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz",
-          "integrity": "sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw=="
-        }
-      }
-    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -34712,11 +34585,6 @@
         }
       }
     },
-    "jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw=="
-    },
     "jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -39042,6 +38910,12 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-webcam": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.0.1.tgz",
+      "integrity": "sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==",
+      "requires": {}
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -43402,22 +43276,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
-    "xml2js": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
-      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
-      "requires": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~9.0.1"
-      },
-      "dependencies": {
-        "xmlbuilder": {
-          "version": "9.0.7",
-          "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-          "integrity": "sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ=="
-        }
-      }
-    },
     "xmlbuilder": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-2.6.5.tgz",

package.json

@@ -45,6 +45,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-toastify": "^6.2.0",
+    "react-webcam": "^7.0.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",

src/api-data/index.ts

@@ -373,5 +373,5 @@ export {
   sentVideoMessageById,
   sentFileMessageById,
   getMessagesById,
-  getAllMessages
+  getAllMessages,
 };

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

@@ -56,7 +56,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-start",
-      marginBottom:15
   },
   wrapper: {
     position: 'relative',
@@ -146,15 +145,42 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'80%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -27,
+      left: 12,
       borderRadius: 5,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#deffa9',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
   },  
   modalDelete: {
     background: '#ffffff',
@@ -231,7 +257,6 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);     
   const handleClose = (type: string | undefined): void => {
@@ -257,23 +282,17 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
          <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
           <ReactAudioPlayer className={classes.player}
-            src={url}
-            controls
+            src={url} controls
           />
         <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
             <FileDownloadIcon fontSize='medium'/>
@@ -281,7 +300,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -54,9 +54,8 @@ const StyledMenu = styled((props:any) => (
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-start",
-      marginBottom:15
+    display: "flex",
+    justifyContent: "flex-start",
   },
   wrapper: {
     position: 'relative',
@@ -65,7 +64,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 200,
-    padding: '5px 5px 12px 5px',
+    padding: '5px 5px 22px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
       "&:after": {
@@ -98,7 +97,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 200,
-    padding: '5px 5px 12px 5px',
+    padding: '5px 5px 22px 5px',
     backgroundColor: '#babdbc',
     borderRadius: 7,
       "&:after": {
@@ -152,16 +151,43 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -28,
+      left: 12,
       borderRadius: 5,
-  },  
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#deffa9',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
+  }, 
   overlay: {
     position: 'absolute',
     top: 0,
@@ -249,7 +275,6 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);   
   const handleOpenRead = () => !read&&setRead(true)
@@ -277,17 +302,12 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
  
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }  
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  }   
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?43:15}}>
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
@@ -308,7 +328,7 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }
         <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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -52,10 +52,9 @@ const StyledMenu = styled((props:any) => (
 }));
 
 const useStyles = makeStyles({
-    container: {
-      display: "flex",
-      justifyContent: "flex-start",
-      marginBottom:15
+  container: {
+    display: "flex",
+    justifyContent: "flex-start",
   },
   wrapper: {
     width: 400,
@@ -139,16 +138,43 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-    caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -25,
+      left: 12,
       borderRadius: 5,
-  },    
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#deffa9',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
+  },     
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -269,8 +295,6 @@ interface IMessagesLeftImage {
   url:string,
   createdAt:string,
   color: string,
-  message: string,
-  messages: any,
   fullType: string,
   caption: string,
   emoji: string,
@@ -278,12 +302,11 @@ interface IMessagesLeftImage {
   _id:string
 }
 
-const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,caption,emoji,emojiCompanion,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,_id}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);    
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -311,14 +334,9 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,captio
   
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
@@ -329,7 +347,7 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,captio
         <img width='100%' height='auto' alt='imageItem' src={url} />
        </div>
     </div>  :
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
@@ -341,7 +359,7 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,captio
         <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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -52,7 +52,6 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-start",
-      marginBottom:15
     },
     wrapper: {
       position: 'relative',
@@ -139,16 +138,43 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'80%',
       fontWeight:600,
-      bottom: 6,
+      bottom: -30,
       left: 6,
-      color: '#000000',
-      padding: 3,
       borderRadius: 5,
-  },  
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#deffa9',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
+  },   
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -226,7 +252,6 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -253,17 +278,12 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
 
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
   } 
   
   return (
-  <div className={classes.container}>
+  <div className={classes.container} style={{marginBottom:caption?45:15}}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':undefined,
         border:selected?'#babdbc':undefined}}>
@@ -279,7 +299,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -53,9 +53,8 @@ const StyledMenu = styled((props:any) => (
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-start",
-      marginBottom:15
+    display: "flex",
+    justifyContent: "flex-start",
   },
   wrapper: {
     position: 'relative',
@@ -144,15 +143,42 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -25,
+      left: 12,
       borderRadius: 5,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#deffa9',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        left: "-17px"
+      }      
   },  
   player: {
     backgroundColor: '#ffffff',
@@ -235,7 +261,6 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -262,17 +287,12 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
    
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
@@ -283,7 +303,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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/MessageRightAudio/index.tsx

@@ -53,9 +53,8 @@ const StyledMenu = styled((props:any) => (
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-end",
-      marginBottom:15
+    display: "flex",
+    justifyContent: "flex-end",
   },
   wrapper: {
     position: 'relative',
@@ -145,16 +144,43 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#414141',
+      maxWidth:'80%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -27,
+      right: 40,
       borderRadius: 5,
-  }, 
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#ffffff',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }     
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -230,7 +256,6 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);     
   const handleClose = (type: string | undefined): void => {
@@ -256,17 +281,12 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
 
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }  
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
         <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
@@ -280,7 +300,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -56,7 +56,6 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
-    marginBottom:15
   },
   wrapper: {
     position: 'relative',
@@ -65,7 +64,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 200,
-    padding: '5px 5px 12px 5px',
+    padding: '5px 5px 22px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
       "&:after": {
@@ -98,7 +97,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 200,
-    padding: '5px 5px 12px 5px',
+    padding: '5px 5px 22px 5px',
     backgroundColor: '#ced8d7',
     borderRadius: 7,
       "&:after": {
@@ -152,15 +151,42 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#626262',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 0,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -28,
+      right: 40,
       borderRadius: 5,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#ffffff',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }     
   },  
   overlay: {
     position: 'absolute',
@@ -249,7 +275,6 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);    
   const handleOpenRead = () => !read&&setRead(true)
@@ -280,17 +305,12 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
 
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
 
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?43:15}}>
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
@@ -311,7 +331,7 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id
         <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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -55,7 +55,6 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
-    marginBottom:15
   },
   wrapper: {
     width: 400,
@@ -139,16 +138,43 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-    caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#626262',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 1,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -25,
+      right: 40,
       borderRadius: 5,
-  },    
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#ffffff',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }     
+  },   
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -269,8 +295,6 @@ interface IMessageRightImage {
   url:string,
   createdAt:string,
   color: string,
-  message: string,
-  messages: any,
   fullType: string,
   caption: string,
   emoji: string,
@@ -278,12 +302,11 @@ interface IMessageRightImage {
   _id:string
 }
 
-const MessageRightImage = ({url,createdAt,color,message,messages,fullType,caption,emoji,emojiCompanion,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,_id}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);  
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -311,14 +334,9 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,captio
   
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
 
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
@@ -329,7 +347,7 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,captio
         <img width='100%' height='auto' alt='imageItem' src={url} />
        </div>
     </div>  :
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
@@ -341,7 +359,7 @@ const MessageRightImage = ({url,createdAt,color,message,messages,fullType,captio
         <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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -52,7 +52,6 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-end",
-      marginBottom:15
     },
     wrapper: {
       position: 'relative',
@@ -139,15 +138,42 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#626262',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 6,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -30,
+      right: 40,
       borderRadius: 5,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#ffffff',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }     
   },  
   modalDelete: {
     background: '#ffffff',
@@ -225,7 +251,6 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -252,17 +277,12 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
   }  
 
   return (
-  <div className={classes.container}>
+  <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}}>
@@ -278,7 +298,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -145,15 +145,42 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
   },
-  caption: {
+  captionWrapper: {
       position: "absolute",
-      fontSize: ".65em",
+      fontSize: ".85em",
+      color: '#626262',
+      maxWidth:'76%',
       fontWeight:600,
-      bottom: 1,
-      left: 6,
-      color: '#000000',
-      padding: 3,
+      bottom: -25,
+      right: 40,
       borderRadius: 5,
+      wordBreak:'break-word',
+      textAlign: "left",
+      font: "400 .9em 'Open Sans', sans-serif",
+      backgroundColor: '#ffffff',
+      padding:10,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "-1px",
+        right: "-17px"
+      }     
   },  
   player: {
     backgroundColor: '#deffa9',
@@ -236,7 +263,6 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   
@@ -263,17 +289,12 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
   
   const handleEmojiMenu = ({ target }: any): void => {
     const idEmoji = target.id
-    if (idEmoji === emoji) {
-        updateMessageById(_id,'')
-        setEmojiIndex(null)
-    } else {
-      updateMessageById(_id,idEmoji)
-      setEmojiIndex(idEmoji)
-    }
-  }  
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  } 
  
   return (
-    <div className={classes.container}>
+    <div className={classes.container} style={{marginBottom:caption?40:15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected? classes.wrapperActive:classes.wrapper}>
         <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
@@ -284,7 +305,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>}
-        <div className={classes.caption}>{caption}</div>
+        {caption&&<div className={classes.captionWrapper}>{caption}</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

@@ -108,7 +108,7 @@ const useStyles = makeStyles({
       backgroundColor: '#ffffff',
       padding: 10,
       borderRadius: 10,
-      width: '15vw',
+      width: '20vw',
     },
     iconCancel: {
         position: 'absolute',
@@ -250,9 +250,9 @@ const SendMessage = ({isArrow }:ISendMessage) => {
     const [isRecording, setIsRecording] = useState<boolean>(false)
     const [isFilming, setIsFilming] = useState<boolean>(false)    
     const [type, setType] = useState<string>('')
-    const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true });
+    const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
     const { status: _status, startRecording: _startRecording, stopRecording: _stopRecording,
-        mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true });
+        mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true,blobPropertyBag:{type: "video/mp4"}});
     const onEmojiClick = (_e:any, emojiObject:any) => {
         setValue(prevValue => prevValue + emojiObject.emoji)
         setIsOpenEmoji(false)
@@ -298,8 +298,8 @@ const SendMessage = ({isArrow }:ISendMessage) => {
             video.onload = () => {
             if (video.status === 200) {
                 const blob = video.response
-                const file = new File([blob], 'video.mp4', {
-                    type: 'video/mp4'
+                const file = new File([blob], 'video.mp4',{
+                  type: "video/mp4"
                 })
                 const formData: any = new FormData()
                 formData.append("video", file)
@@ -336,8 +336,8 @@ const SendMessage = ({isArrow }:ISendMessage) => {
     }    
     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())
+        if (caption.length >= 25) setCaption(e.target.value.slice(0,-1))
+        else setCaption(e.target.value)
     }
     const handleFocusTextarea = async () => await typingChat(companionId,true)
     const handleBlurTextarea = async () => await typingChat(companionId,false) 
@@ -419,8 +419,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                   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'/>
+                        value={caption} fullWidth variant='outlined' id="caption" name='caption'/>
                    </div>
                 </div>
                 <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? true : false} value={value} onBlur={handleBlurTextarea}

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

@@ -165,8 +165,6 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 color={color}
-                message={message}
-                messages={messages}
                 fullType={fullType}
                 caption={caption}
                 emoji={emoji}
@@ -225,8 +223,6 @@ const ChatBar = () => {
                 url={url}
                 createdAt={createdAt}
                 color={color}
-                message={message}
-                messages={messages}
                 fullType={fullType}
                 caption={caption}
                 emoji={emoji}

src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

@@ -4,6 +4,7 @@ import Avatar from '@mui/material/Avatar';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import { useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
+import Webcam from "react-webcam";
 import { format,firstLetter,prodAwsS3 } from '../../../../../helpers'
 import { IAuthorizationState } from '../../../../../typescript/redux/authorization/interfaces'
 
@@ -73,7 +74,13 @@ const EditList = (props: IEditList) => {
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         noDrag: true,
         accept:'image/*'
-    });
+  });
+  
+  const videoConstraints = {
+    width: 1280,
+    height: 720,
+    facingMode: "user"
+  };
 
   const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
   !openBtn&&setOpenBtn(true)
@@ -109,7 +116,22 @@ const EditList = (props: IEditList) => {
            sx={{ background: color, width: 120, height: 120}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
-      </ListItemAvatar>                 
+      </ListItemAvatar>
+      <Webcam
+        audio={false}
+        height={300}
+        screenshotFormat="image/jpeg"
+        width={300}
+        videoConstraints={videoConstraints}
+      >
+        {({ getScreenshot }) => (
+          <button onClick={() => {
+            setFile(getScreenshot())
+            !openBtn&&setOpenBtn(true)
+          }}>
+            Capture photo
+          </button>)}
+      </Webcam>          
       <TextField
         id="name"
         name='name'