done carousel

package-lock.json

@@ -41,6 +41,7 @@
         "react-loader-spinner": "^4.0.0",
         "react-query": "^3.24.3",
         "react-redux": "^7.2.2",
+        "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.1",
         "react-toastify": "^6.2.0",
@@ -18056,6 +18057,17 @@
         "react": ">= 16.8"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
@@ -18193,6 +18205,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -38565,6 +38587,14 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
@@ -38673,6 +38703,16 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "react-loader-spinner": "^4.0.0",
     "react-query": "^3.24.3",
     "react-redux": "^7.2.2",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-toastify": "^6.2.0",

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

@@ -44,7 +44,8 @@ const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
         </UploadFile>
       </MenuItem>
       <MenuItem  onClick={() => handleClose('application')}>
-        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf'>
+        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf,
+        application/vnd.openxmlformats-officedocument.wordprocessingml.document'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>

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

@@ -82,7 +82,7 @@ const useStyles = makeStyles({
     top: 0,
     left: 0,
     width: '100%',
-    height:'100%',
+    minHeight:'100%',  
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
@@ -93,9 +93,10 @@ const useStyles = makeStyles({
 interface IMessageLeftFile {
   url:string,
   updatedAt: string,
+  type:string,
 }
 
-const MessageLeftFile = ({ url,updatedAt }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,updatedAt,type }:IMessageLeftFile) => {
   const classes = useStyles();
   const [read,setRead] = useState<boolean>(false)
   const handleOpenRead = () => !read&&setRead(true)
@@ -106,7 +107,7 @@ const MessageLeftFile = ({ url,updatedAt }:IMessageLeftFile) => {
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
-          fileType='pdf'
+          fileType={type}
           filePath={url}
           onError={handleCloseRead}
          />

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

@@ -1,6 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles";
-
-import { timeStampMessage } from '../../../../../../helpers'
+import { Carousel } from 'react-responsive-carousel';
+import { IconButton } from "@material-ui/core";
+import ImageIcon from '@mui/icons-material/Image';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { useState } from "react";
+import { timeStampMessage, timeStampFilter } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -11,44 +15,133 @@ const useStyles = makeStyles({
       marginBottom:15
   },
   wrapper: {
-    width: 300,
-    position:'relative'
+    width: 400,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 7,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#ffffff',
+      "&: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: "0px",
+        right: "-17px"
+      }     
   },
     image: {
       borderRadius: 7,
       width: 300,
       maxHeight: 400,
+      cursor: 'pointer',
     },  
     time: {
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: 6,
+      bottom: 0,
       right: 6,
-      color: '#ffffff',
-      padding:'1px 4px 1px 4px',
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      color: '#414141',
+      padding: 3,
       borderRadius: 5,
-    },
+      zIndex:10
+  },
+  bntDownload: {
+    backgroundColor: '#ffffff',
+    color: '#54b0fc',
+    width: 30,
+    height:30,
+    '&:hover': {
+      backgroundColor: '#54b0fc',
+      color:'#ffffff'
+    }
+  },    
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    border: 'solid 1px rgba(179, 179, 179, 0.6)',
+    overflowY: 'hidden',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+  carousel: {
+    width:'40%'
+  }
 });
 
 interface IMessagesLeftImage {
   url:string,
   updatedAt:string,
-  color:string
+  color: string,
+  message: string,
+  messages: any
 }
 
-const MessagesLeftImage = ({url,updatedAt,color}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,updatedAt,color,message,messages}:IMessagesLeftImage) => {
   const classes = useStyles();
+  const [watch, setWatch] = useState<boolean>(false)
+  const handleOpenWatch = () => !watch&&setWatch(true)
+  const handleCloseWatch = (e:any) => {
+    if (e.target.id === 'overlay' && watch) setWatch(false)
+  }
 
-  return (
+  return (watch ?
+    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+      <Carousel className={classes.carousel}>
+        {[...messages].reduce((acc, el) => {
+          if (el.type === 'image' && el.message !== message) {
+            acc.push(el)
+            return acc
+          } else if (el.type === 'image') {
+            acc.unshift(el)
+            return acc 
+          }
+          return acc
+        },[]).map((el:any) => <div>
+              <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
+                <p className="legend">{timeStampFilter(el.updatedAt)}</p>
+            </div>)}
+       </Carousel>
+    </div> :
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <img className={classes.image} alt='message pic' src={url}
-        style={{ backgroundColor: url?'':color }} width='300' height='400' />
+        <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
+        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+          style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
+        <a href={url} target="_blank" rel="noreferrer" download>
+           <IconButton className={classes.bntDownload}  >
+             <FileDownloadIcon fontSize='medium'/>
+           </IconButton>
+        </a>        
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
-    </div>    
+    </div>   
 )};
 
 export  default  MessagesLeftImage

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

@@ -21,7 +21,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '5px 5px 12px 5px',
+    padding: '12px 5px 12px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
       "&:after": {

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

@@ -83,7 +83,7 @@ const useStyles = makeStyles({
     top: 0,
     left: 0,
     width: '100%',
-    height:'100%',
+    minHeight:'100%',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
@@ -94,9 +94,10 @@ const useStyles = makeStyles({
 interface IMessageRightFile {
   url:string,
   updatedAt: string,
+  type:string,
 }
 
-const MessageRightFile = ({ url,updatedAt }:IMessageRightFile) => {
+const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {
   const classes = useStyles();
   const [read,setRead] = useState<boolean>(false)
   const handleOpenRead = () => !read&&setRead(true)
@@ -107,7 +108,7 @@ const MessageRightFile = ({ url,updatedAt }:IMessageRightFile) => {
       {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
         <FileViewer
           allowFullScreen={true}
-          fileType='pdf'
+          fileType={type}
           filePath={url}
           onError={handleCloseRead}
          />

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

@@ -1,6 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { Carousel } from 'react-responsive-carousel';
+import { IconButton } from "@material-ui/core";
+import ImageIcon from '@mui/icons-material/Image';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { useState } from "react";
+import { timeStampMessage, timeStampFilter } from '../../../../../../helpers'
 
-import { timeStampMessage } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -11,44 +16,133 @@ const useStyles = makeStyles({
       marginBottom:15
   },
   wrapper: {
-    width: 300,
-    position:'relative'
+    width: 400,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 7,
+    padding: '12px 5px 12px 5px',
+    backgroundColor: '#deffa9',
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }     
   },
     image: {
       borderRadius: 7,
       width: 300,
       maxHeight: 400,
+      cursor: 'pointer',
     },  
     time: {
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: 6,
+      bottom: 0,
       right: 6,
-      color: '#ffffff',
-      padding:'1px 4px 1px 4px',
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      color: '#414141',
+      padding: 3,
       borderRadius: 5,
-    },
+      zIndex:10
+  },
+  bntDownload: {
+    backgroundColor: '#deffa9',
+    color: '#54b0fc',
+    width: 30,
+    height:30,
+    '&:hover': {
+      backgroundColor: '#54b0fc',
+      color:'#ffffff'
+    }
+  },    
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    border: 'solid 1px rgba(179, 179, 179, 0.6)',
+    overflowY: 'hidden',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+  carousel: {
+    width:'40%'
+  }
 });
 
 interface IMessageRightImage {
   url:string,
   updatedAt:string,
-  color:string
+  color: string,
+  message: string,
+  messages: any
 }
 
-const MessageRightImage = ({url,updatedAt,color}:IMessageRightImage) => {
+const MessageRightImage = ({url,updatedAt,color,message,messages}:IMessageRightImage) => {
   const classes = useStyles();
+  const [watch, setWatch] = useState<boolean>(false)
+  const handleOpenWatch = () => !watch&&setWatch(true)
+  const handleCloseWatch = (e:any) => {
+    if (e.target.id === 'overlay' && watch) setWatch(false)
+  }
 
-  return (
+  return (watch ?
+    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+      <Carousel className={classes.carousel}>
+        {[...messages].reduce((acc, el) => {
+          if (el.type === 'image' && el.message !== message) {
+            acc.push(el)
+            return acc
+          } else if (el.type === 'image') {
+            acc.unshift(el)
+            return acc 
+          }
+          return acc
+        },[]).map((el:any) => <div>
+              <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
+                <p className="legend">{timeStampFilter(el.updatedAt)}</p>
+            </div>)}
+       </Carousel>
+    </div> :
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <img className={classes.image} alt='message pic' src={url}
-        style={{ backgroundColor: url?'':color }} width='300' height='400' />
+        <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
+        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+          style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
+        <a href={url} target="_blank" rel="noreferrer" download>
+           <IconButton className={classes.bntDownload}  >
+             <FileDownloadIcon fontSize='medium'/>
+           </IconButton>
+        </a>        
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
-    </div>    
+    </div>   
 )};
 
 export  default  MessageRightImage

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

@@ -21,7 +21,7 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
     width: 400,
-    padding: '5px 5px 12px 5px',
+    padding: '12px 5px 12px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
       "&:after": {

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

@@ -135,6 +135,14 @@ const useStyles = makeStyles({
             color: '#ffffff',
         }
     },
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex:100
+    },    
 });
 
 interface ISendMessage{
@@ -176,61 +184,56 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
               const formData: any = new FormData()
               formData.append("file", file);
               sentFileMessageById(companionId, formData)   
-            }            
+            }
         }
         setTimeout(handleScrollTo, 3000);
         playNotification('http://localhost:3000/send.mp3')
     }    
-    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        isOpenMenu&&setIsOpenMenu(false)
-        isOpenEmoji && setIsOpenEmoji(false)
-        setValue(e.target.value)
-    }
-    const handleFocusTextarea = () => {
-        typingChat(companionId,true)
-        isOpenMenu&&setIsOpenMenu(false)
-        isOpenEmoji&&setIsOpenEmoji(false) 
-    }
-    const handleBlurTextarea = () =>  typingChat(companionId,false) 
+    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
+    const handleFocusTextarea = async () => await typingChat(companionId,true)
+    const handleBlurTextarea = async () => await typingChat(companionId,false) 
       
-    const handleLeaveInput = (e: any) => {
-        if (e.clientX > 1450 || e.clientX < 850) {
-        isOpenMenu&&setIsOpenMenu(false)
-        isOpenEmoji&&setIsOpenEmoji(false)  
-        }
-    }
-    const handleMoveInput = (e: any) => {
-        if (e.clientX < 1250 && e.clientX > 1200) {
-        isOpenMenu&&setIsOpenMenu(false)
-        isOpenEmoji&&setIsOpenEmoji(false)   
-        }
-    }
     const handleKeyPres = (e: any) => {
         if(e.code === 'Enter'&& value) sentMessage()
     }
-    const handleEnterFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
-    const handleLeaveFileMenu = () => isOpenMenu&&setIsOpenMenu(false)
-    const handleEnterEmoji = () => !isOpenEmoji&&setIsOpenEmoji(true)
-    const handleLeaveEmoji = () => isOpenEmoji && setIsOpenEmoji(false)
+    const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
+    const handleCloseFileMenu = (e:any) => {
+        if (e.target.id === 'overlay'&&isOpenMenu) setIsOpenMenu(false) 
+    }
+    const handleOpenEmoji = () => !isOpenEmoji&&setIsOpenEmoji(true)
+    const handleCloseEmoji = (e: any) => {
+        if (e.target.id === 'overlay'&&isOpenEmoji) setIsOpenEmoji(false) 
+    }
     const handleClearMessage = () => setFile(null)
-
+    console.log(file)
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
-            <div onMouseLeave={handleLeaveInput} onMouseMove={handleMoveInput}
-                onKeyPress={handleKeyPres} className={classes.inputContainer}>
+            <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?'inline-block':'none'}}/>
-                <SentimentSatisfiedAltIcon onMouseEnter={handleEnterEmoji}
-                    fontSize='medium' sx={{ color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b' }}/>
-                <div onMouseLeave={handleLeaveEmoji} style={{display:isOpenEmoji?'block':'none'}} className={classes.emoji}>
-                    <NotDone name='Emoji Bar'/>
-                </div>                
+                <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
+                    fontSize='medium' sx={{
+                        color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
+                        '&:hover': { color: 'rgb(41, 139, 231)' }
+                    }} />
+                <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
+                  style={{ display: isOpenEmoji ? 'block':'none'}}>
+                   <div className={classes.emoji}>
+                      <NotDone name='Emoji Bar'/>
+                   </div>  
+                </div>
                 <textarea disabled={file?true:false} value={value} onBlur={handleBlurTextarea} onFocus={handleFocusTextarea} onChange={handleTextarea}
                     className={classes.textarea} placeholder={file?'Press onto Plane to send or Cross to remove':'Message'} rows={1}></textarea>
-                <AttachFileIcon onMouseEnter={handleEnterFileMenu} className={classes.attachIcon}
-                    fontSize='medium'  sx={{color: isOpenMenu?'rgb(41, 139, 231)':'#6b6b6b'}}/>
-                <div onMouseLeave={handleLeaveFileMenu} style={{display:isOpenMenu?'block':'none'}} className={classes.filesMenu}>
-                    <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
+                <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
+                    fontSize='medium' sx={{
+                        color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
+                        '&:hover': { color: 'rgb(41, 139, 231)' }
+                    }} />
+                <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
+                    style={{ display: isOpenMenu ? 'block':'none'}}>
+                    <div className={classes.filesMenu}>
+                      <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
+                    </div>
                 </div>
                 <Avatar onClick={handleScrollTo} className={classes.avatarArrow} sx={{
                   backgroundColor: '#ffffff',

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

@@ -109,7 +109,9 @@ const ChatBar = () => {
                 <MessageLeftImage   
                 url={url}
                 updatedAt={updatedAt}
-                color={color} 
+                color={color}
+                message={message}
+                messages={messages}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -123,11 +125,12 @@ const ChatBar = () => {
                 url={url}
                 updatedAt={updatedAt}  
                   /></div>)
-            if (type === 'file') return (<div key={createdAt}>
+            if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftFile   
                 url={url}
-                updatedAt={updatedAt}  
+                updatedAt={updatedAt}
+                type={type}
                   /></div>)             
           } else {
             if (type === 'text') return (<div key={createdAt}>
@@ -143,7 +146,9 @@ const ChatBar = () => {
                 <MessageRightImage   
                 url={url}
                 updatedAt={updatedAt}
-                color={color}    
+                color={color}
+                message={message}
+                messages={messages}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -157,12 +162,12 @@ const ChatBar = () => {
                  url={url}
                  updatedAt={updatedAt} 
                    /></div>)
-            if (type === 'file') return (<div key={createdAt}>
+            if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
-                 <MessageRightFile
-                 key={updatedAt}    
+                 <MessageRightFile  
                  url={url}
-                 updatedAt={updatedAt} 
+                 updatedAt={updatedAt}
+                 type={type}
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}

src/index.tsx

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import 'video-react/dist/video-react.css';
 import 'react-toastify/dist/ReactToastify.css';
 import 'modern-normalize/modern-normalize.css';
+import "react-responsive-carousel/lib/styles/carousel.min.css"
 import './index.css';
 import App from './App';
 import { Load } from './components/reusableComponents/Loader/Loader'