done

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

@@ -32,8 +32,8 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
+        bottom: '0px',
+        left: "-15px"
       },
       "&:before": {
         content: "''",
@@ -44,7 +44,7 @@ const useStyles = makeStyles({
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
         bottom: "0px",
-        right: "-17px"
+        left: "-17px"
       }     
   },
     image: {

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

@@ -5,8 +5,10 @@ import { firstLetter,slicedWord,timeStampMessage } from '../../../../../../helpe
 const useStyles = makeStyles({
     container: {
       display: "flex",
+      justifyContent: "flex-start",
       width:'auto',
-      maxWidth: '80%',     
+      maxWidth: '80%',
+      marginBottom:10
     },
     wrapper: {
       position: 'relative',
@@ -42,7 +44,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "0px",
+        bottom: "-1px",
         left: "-17px"
       }      
     },

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

@@ -164,14 +164,17 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
     const [isRecording, setIsRecording] = useState<boolean>(false)
     const [type, setType] = useState<string>('')
-    const { status, startRecording, stopRecording, mediaBlobUrl,clearBlobUrl } = useReactMediaRecorder({ audio: true });
-    const sentMessage = async () => {
-        setFile(null)
-        setIsRecording(false)
-        setValue('')
-        setType('')
+    const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true });
+    const handleClearMessage = () => {
+        file && setFile(null)
+        isRecording&&setIsRecording(false)
+        value&&setValue('')
+        type && setType('')
+        mediaBlobUrl && clearBlobUrl()
         isOpenMenu&&setIsOpenMenu(false)
         isOpenEmoji && setIsOpenEmoji(false)
+    }
+    const sentMessage = async () => {
         if (value) sentMessageById(companionId, value)
         if (mediaBlobUrl && type) {
             if (type === 'recording') {
@@ -216,6 +219,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
               sentFileMessageById(companionId, formData)   
             }
         }
+        handleClearMessage()
         setTimeout(handleScrollTo, 3000);
         playNotification('http://localhost:3000/send.mp3')
     }    
@@ -243,18 +247,13 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
             setIsRecording(true)
         }
     }
-    const handleClearMessage = () => {
-        file&&setFile(null)
-        value&&setValue('')
-        type&&setType('')
-    }
-    
+
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
             <div onKeyPress={handleKeyPres} className={classes.inputContainer}>
                 <CloseIcon onClick={handleClearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{backgroundColor: '#ffffff', width: 36, height: 36, color: '#949393',
-                    display: file || value ? 'inline-block' : 'none'}} />
+                    display: file || value || status === 'stopped' ? 'inline-block' : 'none'}} />
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
                     fontSize='medium' sx={{
                         color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',