fix open chat

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

@@ -147,14 +147,14 @@ const useStyles = makeStyles({
     borderRadius:7
   },
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+    position: "absolute",
+    fontSize: ".65em",
+    fontWeight:600,
+    bottom: 0,
+    right: 6,
+    color: '#414141',
+    padding: 3,
+    borderRadius: 5,
   },
   captionWrapper: {
       position: 'relative',
@@ -259,8 +259,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -311,8 +311,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -348,8 +348,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -277,8 +277,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -252,8 +252,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -263,8 +263,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    left: -80,
-    top: '50%',
+    left: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -258,8 +258,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -311,8 +311,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -348,8 +348,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -269,8 +269,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -252,8 +252,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -264,8 +264,8 @@ const useStyles = makeStyles({
   },
   checkboxSelect: {
     position: 'absolute',
-    right: -80,
-    top: '50%',
+    right: -64,
+    bottom: -10,
     pointerEvents: 'auto'
   }
 });

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

@@ -18,7 +18,7 @@ import Picker from 'emoji-picker-react';
 import InputAdornment from '@mui/material/InputAdornment';
 
 import { useReactMediaRecorder } from "react-media-recorder";
-import { useState,useEffect } from "react";
+import { useState,useEffect,useCallback } from "react";
 import { useSelector } from "react-redux";
 
 import FilesMenu from "../FilesMenu";
@@ -325,8 +325,10 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
     const [isFilming, setIsFilming] = useState<boolean>(false)
     const [isOpenCamera, setIsOpenCamera] = useState<boolean>(false)
     const [type, setType] = useState<string>('')
-    const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
-    const { status: _status, startRecording: _startRecording, stopRecording: _stopRecording,
+    const [status, setStatus] = useState<string | null>(null)
+    const [_status, _setStatus] = useState<string | null>(null)
+    const { startRecording, stopRecording, mediaBlobUrl, clearBlobUrl, } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
+    const { startRecording: _startRecording, stopRecording: _stopRecording,
       mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true, blobPropertyBag: { type: "video/mp4" } });
     const videoConstraints = {
       width: 1280,
@@ -344,25 +346,27 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
       }        
     };    
     const clearMessage = () => {
-      file && setFile(false)
-      isRecording && setIsRecording(false)
-      isFilming && setIsFilming(false)
-      value && setValue('')
-      caption&& setCaption('')
-      type && setType('')
-      mediaBlobUrl && clearBlobUrl()
-      _mediaBlobUrl && _clearBlobUrl()
-      isOpenMenu && setIsOpenMenu(false)
-      isOpenEmoji && setIsOpenEmoji(false)
-      isOpenCaption && setIsOpenCaption(false)
-      isOpenCaptionEmoji && setIsOpenCaptionEmoji(false)
+      setFile(false)
+      setIsRecording(false)
+      setIsFilming(false)
+      setValue('')
+      setCaption('')
+      setType('')
+      clearBlobUrl()
+      _clearBlobUrl()
+      setIsOpenMenu(false)
+      setIsOpenEmoji(false)
+      setIsOpenCaption(false)
+      setIsOpenCaptionEmoji(false)
+      setStatus(null)
+      _setStatus(null)
    }
 
     const sentMessage = async () => {
         if (value && !isReply) sentMessageById(companionId, value, caption.trim())
         if (value && isReply) {
            sentMessageReplyById(isReply._id, value, caption.trim())
-           isReply&&setIsReply(undefined)
+           setIsReply(undefined)
         }
         if (mediaBlobUrl && type === 'recording') {
             const audio = new XMLHttpRequest();
@@ -450,14 +454,24 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
       }
     } 
     const handleRecording = () => {
-        if (isRecording) return stopRecording()
+      if (isRecording) {
+          setStatus('stopped')
+          stopRecording()
+          return 
+        }
         startRecording()
+        setStatus('recording')
         setType('recording')
         setIsRecording(true) 
     }
     const handleFilming = () => {
-        if (isFilming) return _stopRecording()
+        if (isFilming) {
+          _setStatus('stopped')
+          _stopRecording()
+          return 
+        }
         _startRecording()
+        _setStatus('recording')
         setType('filming')
         setIsFilming(true) 
   }
@@ -478,26 +492,34 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
     setIsReply(undefined)
     clearMessage()
   }
-  
+
+  const defaultState = useCallback(() => {
+    stopRecording()
+    _stopRecording()
+    clearBlobUrl()
+    _clearBlobUrl()
+    setStatus(null)
+    _setStatus(null)
+    setIsRecording(false)
+    setIsFilming(false)     
+    setFile(false)
+    setValue('')
+    setCaption('')
+    setType('')
+    setIsOpenMenu(false)
+    setIsOpenEmoji(false)
+    setIsOpenCaption(false)
+    setIsOpenCaptionEmoji(false)
+  },[_clearBlobUrl,clearBlobUrl,_stopRecording,stopRecording])
+
   useEffect(() => {
-    if (isReply) {
-      stopRecording()
-      _stopRecording()
-      clearBlobUrl()
-      _clearBlobUrl()
-      setIsRecording(false)
-      setIsFilming(false)     
-      setFile(false)
-      setValue('')
-      setCaption('')
-      setType('')
-      setIsOpenMenu(false)
-      setIsOpenEmoji(false)
-      setIsOpenCaption(false)
-      setIsOpenCaptionEmoji(false)
-    }
+    defaultState()
   }, [isReply])
-  console.log(file,'file', status ,'status', _status, '_status')
+  
+  useEffect(() => {
+    defaultState()
+  },[companionId])
+  
     return (
         <div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
             {isArrow && <div className={classes.borderTop}></div>}
@@ -546,20 +568,20 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
                     || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
-                    style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming || isReply ? 'none' : 'block' }} />                           
+                    style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply ? 'none' : 'block' }} />                           
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
                     style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}/>                
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
                     sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
-                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording && !isReply ? 'block' : 'none'}}/>
+                    style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: file || type === 'recording' || type === 'filming' ? 'none' : "auto",
+                    pointerEvents: file || status || _status ? 'none' : "auto",
                         '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
                 <CommentIcon onClick={handleOpenCaption} 
                     fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: value || file || type === 'recording' || type === 'filming'? 'auto' : "none",
+                    pointerEvents: value || file || status === 'stopped' || _status === 'stopped'? 'auto' : "none",
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
@@ -586,18 +608,18 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
                 </div>
                 <textarea disabled={file || type === 'recording' || type === 'filming' ? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
-                    placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? 'Message' :
+                    placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
                     `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
                     style={{color:value || file || type === 'recording' || type === 'filming' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
                 </textarea>
                 <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
                  sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',
-                   pointerEvents: type === 'content' || type === 'application' || value || status !== 'idle'
-                   || _status !== 'idle' || isReply ? 'none' : "auto",
+                   pointerEvents: type === 'content' || type === 'application' || value || status !== null
+                   || _status !== null || isReply ? 'none' : "auto",
                   '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                   fontSize='medium' sx={{color: isOpenMenu || type === 'content' || type === 'application' ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    pointerEvents: type === 'base64' || value || status !== 'idle' || _status !== 'idle' || isReply ? 'none' : "auto", '&:hover':
+                    pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply ? 'none' : "auto", '&:hover':
                     { color: 'rgb(41, 139, 231)'}}}/>
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>

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

@@ -23,7 +23,7 @@ import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getAuthorizationState } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
 import { getScrollChat } from '../../../../redux/control/selector'
-import { actionScrollChat } from '../../../../redux/control/action'
+import { actionScrollChat,actionOpenPinned } from '../../../../redux/control/action'
 import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 import { asyncGetChatById } from "../../../../redux/chat/operations";
 import { seenChat } from "../../../../api-data";
@@ -87,17 +87,18 @@ interface IChatBar {
   setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
   openPinned: boolean,
   pinnedMessagesMemo: TPinnedMessages,
-  handleUnpinAll: () => void
+  handleUnpinAll: () => void,
+  isReply:TMessage | undefined,
+  setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
 }
 
-const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll}:IChatBar) => {
+const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSelected,openPinned,pinnedMessagesMemo,handleUnpinAll,isReply,setIsReply}:IChatBar) => {
   const classes = useStyles();
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
   const { number:userNumber,nightMode,silentMode} = useSelector(getAuthorizationState)
   const { companionId,total,seen,mute } = useSelector(getChat)
   const scrollChat = useSelector(getScrollChat)
-  const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   let time: any
@@ -109,6 +110,11 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
      else setSelectedArr([...selectedArr,_id])
   }
 
+  const handleReply = (_id: string) => {
+    openPinned&& dispatch(actionOpenPinned(false))
+    setIsReply(renderArr.find((el) => el._id ===_id))
+  }  
+
   const handleScrollTo = useCallback(() => {
      chatDivRef.current&&chatDivRef.current.scrollTo({
      top: chatDivRef.current.scrollHeight,
@@ -129,18 +135,16 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     return !openPinned ? messagesMemo : pinnedMessagesMemo
   }, [messagesMemo, pinnedMessagesMemo, openPinned])
   
-  const handleReply = (_id: string) => {
-    setIsReply(renderArr.find((el) => el._id ===_id))
-  }
-  
   const handleScrollToTheMessage = (_id:string) => {
     const childNodes = chatDivRef.current.childNodes[0].childNodes
     let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
     if (toScrollNode) {
       toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+      toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
       toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
       toScrollNode.scrollIntoView({ behavior: 'smooth' })
       setTimeout(() => {
+        toScrollNode.style.backgroundColor = 'unset'
         toScrollNode.style.boxShadow = 'unset'
       }, 2000)
     }
@@ -183,7 +187,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     }
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
-  }, [total, seen, chatDivRef, companionId,openPinned]);
+  }, [total, seen, chatDivRef, companionId, openPinned]);
 
   return (
     <div className={classes.container} >
@@ -433,8 +437,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         }) : <AlertInfo name='You do not have messages yet!' />}
         </div>
       </div>
-      {!openPinned&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} handleScrollToTheMessage={handleScrollToTheMessage}/>}
-      {openPinned&&!isSomeSelected &&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
+      {!openPinned&&!isSomeSelected&&<SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+      {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );
 }

src/components/HomePage/CentralBar/HeaderBar/PinnedBar/index.tsx

@@ -108,9 +108,11 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
     }
     if (toScrollNode) {
       toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+      toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
       toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
       toScrollNode.scrollIntoView({ behavior: 'smooth' })
       setTimeout(() => {
+        toScrollNode.style.backgroundColor = 'unset'
         toScrollNode.style.boxShadow = 'unset'
       }, 2000)
     }

src/components/HomePage/CentralBar/index.tsx

@@ -1,14 +1,17 @@
 import Grid from '@mui/material/Grid'
 import { useState,useEffect } from 'react'
-import { useSelector,useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import isEqual from 'lodash.isequal';
 
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { getPinnedMessagesMemo } from '../../../redux/pinnedMessages/selector'
+import { getMessagesMemo } from '../../../redux/messages/selector'
 import { TRightIsOpen } from '../../../typescript/redux/control/types'
 import { getOpenPinned } from '../../../redux/control/selector'
 import { actionOpenPinned } from '../../../redux/control/action'
 import { unpinAllMessagesById } from '../../../api-data'
+import { TMessage } from "../../../typescript/redux/messages/types"; 
 
 
 interface ICentralBar {
@@ -21,9 +24,11 @@ interface ICentralBar {
 const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentralBar) => {
   const dispatch = useDispatch()
   const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
+  const messagesMemo = useSelector(getMessagesMemo)
   const openPinned = useSelector(getOpenPinned)
   const [selectedArr, setSelectedArr] = useState<string[] | []>([])
   const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
+  const [isReply, setIsReply] = useState<TMessage | undefined>(undefined)
   const handleClearSelect = () => {
     selectedArr.length > 0 && setSelectedArr([])
     isSomeSelected && setIsSomeSelected(false)
@@ -40,7 +45,19 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
   useEffect(() => {
     setIsSomeSelected(false)
     setSelectedArr([])
-  },[companionId])  
+    setIsReply(undefined)
+  }, [companionId])
+  
+  useEffect(() => {
+    if (isReply) {
+      const reply = messagesMemo.find((el) => el._id === isReply._id)
+      if (!reply) {
+        setIsReply(undefined)
+      } else if (isEqual(isReply, reply) === false) {
+        setIsReply(reply)
+      }
+    }
+  },[messagesMemo,isReply])   
 
     return ( 
      <Grid item lg={rightIsOpen?8:12}>
@@ -52,7 +69,8 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
         <Grid item lg={12} style={{backgroundImage}}>
           <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}
             isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}
-            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll}/>
+            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}
+            handleUnpinAll={handleUnpinAll} isReply={isReply} setIsReply={setIsReply}/>
         </Grid>
       </Grid>
     )   

src/components/HomePage/LeftBar/SearchLists/index.tsx

@@ -85,9 +85,11 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
       let toScrollNode = [...childNodes].find((el: any) => el.id === id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
         toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
+          toScrollNode.style.backgroundColor = 'unset'
           toScrollNode.style.boxShadow = 'unset'
         }, 2000)
       }

src/components/HomePage/RightBar/CredentialsList/ProfileLists/index.tsx

@@ -67,9 +67,11 @@ const ProfileLists = ({setDisabled,chatDivRef}:IProfileLists) => {
       let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
         toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
+          toScrollNode.style.backgroundColor = 'unset'
           toScrollNode.style.boxShadow = 'unset'
         }, 2000)
       }

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

@@ -69,9 +69,11 @@ const SearchList= ({chatDivRef}:ISearchList) => {
       let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
       if (toScrollNode) {
         toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.backgroundColor = 'rgba(70, 70, 70, 0.4)'
         toScrollNode.style.boxShadow = '0px 0px 6px 0px #ffffff'
         toScrollNode.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
+          toScrollNode.style.backgroundColor = 'unset'
           toScrollNode.style.boxShadow = 'unset'
         }, 2000)
       }