done message input

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

@@ -0,0 +1,47 @@
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import PhotoSizeSelectActualIcon from '@mui/icons-material/PhotoSizeSelectActual';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+
+import { makeStyles } from '@material-ui/core'
+
+
+const useStyles = makeStyles({
+    list: {
+      background: '#fdfdfd',
+    },
+    listIcon: {
+      marginRight: 15,
+    },
+})
+
+interface IFilesMenu {
+  setIsOpenMenu: any
+}
+const FilesMenu = ({setIsOpenMenu}:IFilesMenu) => {
+  const classes = useStyles()
+  const handleClose = (i: number) => {
+    console.log(i, 'index of type file')
+    setIsOpenMenu(false)
+  }
+  return (
+      <MenuList className={classes.list}>
+        <MenuItem onClick={() => handleClose(0)}>
+          <ListItemIcon className={classes.listIcon}>
+            <PhotoSizeSelectActualIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>Photo or Video</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => handleClose(1)}>
+          <ListItemIcon className={classes.listIcon}>
+            <InsertDriveFileIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText>File</ListItemText>
+        </MenuItem>
+      </MenuList>
+  );
+}
+
+export default FilesMenu

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

@@ -57,12 +57,11 @@ const useStyles = makeStyles({
     },
     messageTime: {
       position: "absolute",
-      fontSize: ".75em",
-      fontWeight:300,
+      fontSize: ".65em",
+      fontWeight:600,
       marginTop: "10px",
       bottom: "12px",
       right: "10px",
-      zIndex: 3,
       color: '#4d4c4c'
     },
 });
@@ -79,7 +78,7 @@ const MessageLeft = ({message,avatarUrl,name,lastName,timestamp}:any) => {
           alt='avatar'
           src={avatarUrl?avatarUrl:undefined}
           className={classes.avatar}
-        ></Avatar>
+        >{!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}

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

@@ -58,13 +58,12 @@ const useStyles = makeStyles({
     },
     messageTime: {
       position: "absolute",
-      fontSize: ".75em",
-      fontWeight:300,
+      fontSize: ".65em",
+      fontWeight:600,
       marginTop: "10px",
       bottom: "12px",
-      right: "50px",
-      zIndex: 3,
-      color: '#4d4c4c'
+      left: 10,
+      color: '#4d4c4c',
     },
 });
 
@@ -77,18 +76,18 @@ const MessageRight = ({message,avatarUrl,name,lastName,timestamp}:any) => {
   return (
   <div className={classes.container}>
       <div className={classes.messageVertical}>
-        <div className={classes.messageTime}>{timestamp}</div>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
           primaryTypographyProps={{color: "#42aee0"}}
           secondary={message}
-          secondaryTypographyProps={{color: "#0e0d0d"}}/>
-        <Avatar
+          secondaryTypographyProps={{ color: "#0e0d0d" }} />
+        <div className={classes.messageTime}>{timestamp}</div>
+       <Avatar
           alt='avatar'
           src={avatarUrl?avatarUrl:undefined}
           className={classes.avatar}
-        ></Avatar>
+        >{!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
       </div>
   </div>    
 )};

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

@@ -6,13 +6,15 @@ import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import Avatar from '@mui/material/Avatar';
 import { useState } from "react";
+import { useSelector } from "react-redux";
+import { getState } from '../../../../../redux/authorization/selector'
 
+import FilesMenu from "../FilesMenu";
+import NotDone from "../../../../reusableComponents/NotDone";
 
-const useStyles = makeStyles({
-    absoluteContainer:{
-    // position: 'relative'
-    },
-    container : {
+
+const useStyles = makeStyles({   
+    container: {
         display: "flex",
         justifyContent: "space-between",
         alignContent: 'flex-end',
@@ -23,11 +25,13 @@ const useStyles = makeStyles({
     },
     inputContainer: {
         position:'relative',
-        width: '100%',
+        minWidth: 634,
+        maxWidth: 634,
+        maxHeight:56,
         display: 'flex',
         flexWrap: 'nowrap',
         alignContent: 'center',
-        alignItems:'center',
+        alignItems: 'center',
         color: '#6b6b6b',
         backgroundColor: '#ffffff',
         borderRadius: 8,
@@ -56,8 +60,9 @@ const useStyles = makeStyles({
         right: "-17px"
       }        
     },
-    textarea  : {
-        width: '100%',
+    textarea: {
+        minWidth: 550,
+        maxWidth: 550,
         outline: 'none',
         border:'none',
         padding: '0px 10px',
@@ -66,13 +71,37 @@ const useStyles = makeStyles({
         overflowY:'auto',
         resize: 'none',
         height: 'auto',
-        '&:focus': {
-            height:66
-        }
     },
     attachIcon: {
-        transform: 'rotate(30deg)'
+        height:'auto',
+        '&:hover': {
+            color: 'rgb(41, 139, 231)',
+        }        
     },
+    filesMenu: {
+      background: '#fdfdfd',
+      position: 'absolute',
+      width: 230,
+      maxWidth: '100%',
+      left: 406,
+      bottom:64,
+      zIndex: 10,
+      visibility: 'visible',
+      borderRadius: 10,
+      padding: '4px 6px',
+    },
+    emoji: {
+      background: '#fdfdfd',
+      position: 'absolute',
+      width: 350,
+      height:350,
+      left: 0,
+      bottom:64,
+      zIndex: 10,
+      visibility: 'visible',
+      borderRadius: 10,
+      padding: '0px 6px',
+    },     
     avatar: {
         '&:hover': {
             backgroundColor: 'rgb(41, 139, 231)',
@@ -80,9 +109,8 @@ const useStyles = makeStyles({
         }
     },
     avatarArrow: {
-        position: 'static',
-        left: 175,
-        bottom:-400,
+        left: 120,
+        bottom:200,
         '&:hover': {
             backgroundColor: 'rgb(41, 139, 231)',
             color: '#ffffff',
@@ -98,28 +126,77 @@ interface ISendMessage{
 
 const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
     const classes = useStyles();
-    const [value,setValue] = useState<string>('')
-    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
+    const currentUser = useSelector(getState)
+    const [value, setValue] = useState<string>('')
+    const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
+    const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
     const sentMessage = () => {
+        const {name ,lastName,avatarUrl} = currentUser
         const newMessage =  {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigore',
-        lastName: 'Omelchenko',
+        avatarUrl:`http://${avatarUrl}`,
+        name,
+        lastName,
         message: value,
         }
         setChat((prevState: any) => [...prevState, newMessage])
         setValue('')
+        setIsOpenMenu(false)
+        setIsOpenEmoji(false)        
+    }    
+    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setIsOpenMenu(false)
+        setIsOpenEmoji(false)
+        setValue(e.target.value.trim())
+    }
+    const handleFocusTextarea = () => {
+        setIsOpenMenu(false)
+        setIsOpenEmoji(false)
+    }
+    const handleLeaveInput = (e: any) => {
+        if (e.clientX > 1450 || e.clientX < 850) {
+        setIsOpenMenu(false)
+        setIsOpenEmoji(false) 
+        }
     }
+    const handleMoveInput = (e: any) => {
+        if (e.clientX < 1250 && e.clientX > 1200) {
+        setIsOpenMenu(false)
+        setIsOpenEmoji(false)  
+        }
+    }
+    const handleKeyPres = (e: any) => {
+        console.log(value.length)
+        if(e.code === 'Enter'&& value) sentMessage()
+    }
+    const handleEnterFileMenu = () => setIsOpenMenu(true)
+    const handleLeaveFileMenu = () => setIsOpenMenu(false)
+    const handleEnterEmoji = () => setIsOpenEmoji(true)
+    const handleLeaveEmoji = () => setIsOpenEmoji(false)  
+
 
     return (
-    <>
-        <div className={classes.container} >
-            <div className={classes.inputContainer}>
-                <SentimentSatisfiedAltIcon fontSize='medium'/>
-                <textarea value={value}  onChange={handleTextarea} className={classes.textarea}
-                  placeholder='Message' rows={1} cols={20}/>
-                <AttachFileIcon className={classes.attachIcon} fontSize='medium' />       
-            </div>
+        <div className={classes.container} >            
+            <div onMouseLeave={handleLeaveInput} onMouseMove={handleMoveInput}
+                 onKeyPress={handleKeyPres} className={classes.inputContainer}>
+                <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>                
+                <textarea value={value} onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
+                  placeholder='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 setIsOpenMenu={setIsOpenMenu}/>
+                </div>
+                <Avatar onClick={handleArrow} className={classes.avatarArrow} sx={{
+                  backgroundColor: '#ffffff',
+                   width: 56, height: 56 ,color: '#6b6b6b',display:isArrow?'flex':'none'}}>
+                  <ArrowDownwardIcon fontSize="medium" />
+                </Avatar>                 
+            </div>  
             {value ?
              <Avatar onClick={sentMessage} className={classes.avatar} sx={{
                backgroundColor: '#ffffff',
@@ -128,16 +205,10 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
                 </Avatar> :
              <Avatar className={classes.avatar} sx={{
                backgroundColor: '#ffffff',
-               width: 56, height: 56 ,color: '#6b6b6b'}}>
-                  <MicNoneIcon fontSize="medium" />
+                    width: 56, height: 56, color: '#6b6b6b'}}>                   
+                    <MicNoneIcon fontSize="medium" />                    
             </Avatar>}
-            </div>
-               {<Avatar onClick={handleArrow} className={classes.avatarArrow} sx={{
-                  backgroundColor: '#ffffff',
-                   width: 56, height: 56 ,color: '#6b6b6b'}}>
-                  <ArrowDownwardIcon fontSize="medium" />
-               </Avatar>}             
-        </>
+        </div>            
     )
 }
 

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

@@ -7,27 +7,27 @@ export  const fakeChat = [
     },
     {
         avatarUrl: '',
-        name: 'Grigore',
-        lastName:'Helena',
-        message: 'Hello'
-    },    
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+    },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigfffffffffffffffvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvfffffffffffffdddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Weddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddrr',
-        message: 'dddd'
+        avatarUrl: '',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
         avatarUrl: '',
-        name: 'Helena',
-        lastName:'Velikolug',
-        message: 'I am zaraza'
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName: 'Wedrr',
-        message: 'qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeedfgfgggggggggggggggggggggghhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhh'
+        lastName:'Wedrr',
+        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
         avatarUrl: '',
@@ -36,7 +36,7 @@ export  const fakeChat = [
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
@@ -49,174 +49,174 @@ export  const fakeChat = [
     },
     {
         avatarUrl: '',
-        name: 'hrigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'uedrr',
+        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
         avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'kjedrr',
+        lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: 'http://localhost:3000/6204ddabad4c847040122033//%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_viber_2021-01-02_13-51-35.jpg',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
     },
     {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        avatarUrl: '',
         name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
         lastName:'Wedrr',
         message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'

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

@@ -37,25 +37,26 @@ const ChatBar = () => {
   const classes = useStyles();
   const [chat, setChat] = useState<any>(fakeChat)
   const [isArrow,setIsArrow] = useState<boolean>(false)
-  const divRef = useRef<HTMLDivElement | null>(null)
+  const divRef = useRef<any | null>(null)
   const handleScroll = ({ target }: any) => {
     const different = target.scrollHeight - target.scrollTop
     setIsArrow(different < 1500?false:true)
   }
   const handleArrow = () => {
     divRef.current&&divRef.current.scrollTo({
-    top: 1000000,
+    top: divRef.current.scrollTopMax,
     behavior: 'smooth'
     })
   }
   const debouncedHandleScroll = useCallback(debounce(handleScroll, 300), []);
   useEffect(() => {
     divRef.current&&divRef.current.scrollTo({
-    top: 1000000,
+    top: divRef.current.scrollTopMax,
     behavior: 'smooth'
     })
   }, [chat])
  
+
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>

src/components/HomePage/RightBar/index.tsx

@@ -33,8 +33,7 @@ const RightBar = () => {
         <HeaderBar />
         <div className={classes.chat}>
           <ChatBar />
-          {isOpen&&isOpen !== 'menu'&&
-            <div className={classes.moveChat}></div>}
+          {isOpen&&isOpen !== 'menu'&&<div className={classes.moveChat}></div>}
         </div>
       </Grid>
     )