done scroll bar

package-lock.json

@@ -30,6 +30,7 @@
         "date-fns": "^2.28.0",
         "formik": "^2.2.6",
         "gh-pages": "^3.1.0",
+        "lodash.debounce": "^4.0.8",
         "modern-normalize": "^1.0.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
@@ -13599,6 +13600,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "node_modules/lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -33739,6 +33745,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "date-fns": "^2.28.0",
     "formik": "^2.2.6",
     "gh-pages": "^3.1.0",
+    "lodash.debounce": "^4.0.8",
     "modern-normalize": "^1.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

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

@@ -6,10 +6,7 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       width:'auto',
-      maxWidth: '80%',
-    '&:last-child': {
-      paddingBottom:0,
-      }      
+      maxWidth: '80%',     
     },
     messageVertical: {
       position:'relative',
@@ -26,7 +23,7 @@ const useStyles = makeStyles({
     },
     message: {
       position: "relative",
-      marginLeft: 3,
+      marginLeft: 5,
       padding: "10px",
       paddingBottom:18,
       backgroundColor: "#ffffff",

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

@@ -7,10 +7,7 @@ const useStyles = makeStyles({
       display: "flex",
       justifyContent: "flex-end",
       width:'auto',
-    maxWidth: '80%',
-    '&:last-child': {
-      paddingBottom:0,
-      }
+      maxWidth: '80%',
     },
     messageVertical: {
       position:'relative',
@@ -27,7 +24,7 @@ const useStyles = makeStyles({
     },
     message: {
       position: "relative",
-      marginRight: 3,
+      marginRight: 5,
       padding: "10px",
       paddingBottom:18,
       backgroundColor: "#deffa9",

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

@@ -1,21 +1,77 @@
-import TextField from '@material-ui/core/TextField';
 import { makeStyles } from "@material-ui/core/styles";
 import SendIcon from '@mui/icons-material/Send';
 import MicNoneIcon from '@mui/icons-material/MicNone';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import Avatar from '@mui/material/Avatar';
+import { useState } from "react";
+
 
 const useStyles = makeStyles({
-    form : {
+    absoluteContainer:{
+    // position: 'relative'
+    },
+    container : {
         display: "flex",
         justifyContent: "space-between",
-        alignContent: 'center',
-        alignItems:'center',
+        alignContent: 'flex-end',
+        alignItems:'flex-end',
         width: 700,
         position: 'fixed',
         bottom: 20,
     },
-    input  : {
-        width: 620
+    inputContainer: {
+        position:'relative',
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignContent: 'center',
+        alignItems:'center',
+        color: '#6b6b6b',
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        padding: 10,
+        marginRight: 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"
+      }        
+    },
+    textarea  : {
+        width: '100%',
+        outline: 'none',
+        border:'none',
+        padding: '0px 10px',
+        marginLeft: 8,
+        marginRight: 8,
+        overflowY:'auto',
+        resize: 'none',
+        height: 'auto',
+        '&:focus': {
+            height:66
+        }
+    },
+    attachIcon: {
+        transform: 'rotate(30deg)'
     },
     avatar: {
         '&:hover': {
@@ -23,23 +79,64 @@ const useStyles = makeStyles({
             color: '#ffffff',
         }
     },
+    avatarArrow: {
+        position: 'static',
+        left: 175,
+        bottom:-400,
+        '&:hover': {
+            backgroundColor: 'rgb(41, 139, 231)',
+            color: '#ffffff',
+        }
+    },    
 });
 
-const SendMessage = () => {
+interface ISendMessage{
+    setChat:any,
+    isArrow:boolean,
+    handleArrow:() => void
+}
+
+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 sentMessage = () => {
+        const newMessage =  {
+        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
+        name: 'Grigore',
+        lastName: 'Omelchenko',
+        message: value,
+        }
+        setChat((prevState: any) => [...prevState, newMessage])
+        setValue('')
+    }
+
     return (
-        <>
-            <form className={classes.form}  noValidate autoComplete="off">
-              <TextField
-                label="Write a new message"
-                className={classes.input}
-              />
-             <Avatar className={classes.avatar} sx={{
+    <>
+        <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>
+            {value ?
+             <Avatar onClick={sentMessage} className={classes.avatar} sx={{
                backgroundColor: '#ffffff',
                width: 56, height: 56 ,color: 'rgb(41, 139, 231)'}}>
                   <SendIcon fontSize="medium" />
-             </Avatar>                
-            </form>
+                </Avatar> :
+             <Avatar className={classes.avatar} sx={{
+               backgroundColor: '#ffffff',
+               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>}             
         </>
     )
 }

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

@@ -1,4 +1,4 @@
-export  const chats = [
+export  const fakeChat = [
     {
         avatarUrl: '',
         name: 'Grigore',

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

@@ -1,10 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles";
-import { Paper } from "@material-ui/core";
 import SendMessage from "./SendMessage";
 import MessageLeft from './Messages/MessageLeft'
 import MessageRight from './Messages/MessagesRight'
+import { useState,useEffect,useRef,useCallback} from "react";
+import { fakeChat } from "./fakeChat";
 
-import { chats } from "./chats";
+const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
     container: {
@@ -19,12 +20,11 @@ const useStyles = makeStyles({
       position: "relative",
       overflowY: "scroll",
       paddingTop: 60,
-      paddingBottom:60
     },
     messagesBody: {
       width: "40%",
       height: "80%",
-    },      
+    },   
 });
 
 const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
@@ -35,11 +35,32 @@ const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
 
 const ChatBar = () => {
   const classes = useStyles();
+  const [chat, setChat] = useState<any>(fakeChat)
+  const [isArrow,setIsArrow] = useState<boolean>(false)
+  const divRef = useRef<HTMLDivElement | 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,
+    behavior: 'smooth'
+    })
+  }
+  const debouncedHandleScroll = useCallback(debounce(handleScroll, 300), []);
+  useEffect(() => {
+    divRef.current&&divRef.current.scrollTo({
+    top: 1000000,
+    behavior: 'smooth'
+    })
+  }, [chat])
+ 
   return (
-      <div className={classes.container}>
-        <div className={classes.messagesBody}>
-        {chats.map(({message,avatarUrl,name,lastName}:any,i) => {
-          if (i % 2 == 0) {
+      <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
+        <div  className={classes.messagesBody}>
+        {chat.map(({message,avatarUrl,name,lastName}:any,i:number) => {
+          if (i % 2 === 0) {
             return (
             <MessageLeft
             message={message}
@@ -57,8 +78,8 @@ const ChatBar = () => {
             name={name}
             lastName={lastName}
           />)}})}
-        </div>
-        <SendMessage />
+      </div>         
+      <SendMessage setChat={setChat} isArrow={isArrow} handleArrow={handleArrow}/>   
       </div>
   );
 }

src/components/HomePage/RightBar/index.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles({
     minHeight: '100vh',
     maxHeight: '100vh',
     background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    paddingBottom:160,
+    paddingBottom:180,
   },
   chat: {
     width: "100%",