make some fixes

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

@@ -152,15 +152,15 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   overlay: {
-    position: 'sticky',
+    position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
-    minHeight:'100%',  
+    height:'100%',
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflow: 'hidden',
-    cursor:'pointer'
+    border:'solid 2px #0084ff',
+    cursor: 'pointer',
+    zIndex:100
   },
   modalDelete: {
     background: '#ffffff',

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

@@ -152,15 +152,15 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   overlay: {
-    position: 'sticky',
+    position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
-    minHeight:'100%',
+    height:'100%',
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflow: 'hidden',
-    cursor:'pointer'
+    border:'solid 2px #0084ff',
+    cursor: 'pointer',
+    zIndex:100
   },
   modalDelete: {
     background: '#ffffff',

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

@@ -78,10 +78,9 @@ const ChatBar = () => {
   const dispatch = useDispatch()
   const messages = useSelector(getMessagesMemo)
   const userNumber = useSelector(getNumber)
-  const { companionId,total } = useSelector(getChat)
+  const { companionId,total,seen } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
-  const [isScroll, setIsScroll] = useState<boolean>(true)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   const divRef = useRef<any | null>(null)
   let time:any
@@ -92,12 +91,11 @@ const ChatBar = () => {
      })
   }
 
-  const handleScroll = useCallback(({ target }: any) => {
-    isScroll&&setIsScroll(false)
-    const different = target.scrollHeight - target.scrollTop
-    if (different < 900) seenChat(companionId)
-    setIsArrow(different < 1300 ? false : true)
-  }, [isScroll, companionId])
+  const handleScroll = useCallback(({ target:{scrollHeight,scrollTop,clientHeight} }: any) => {
+    const different = scrollHeight - Math.trunc(scrollTop)
+    if (total !== seen&&clientHeight - different < 50) seenChat(companionId)
+    setIsArrow(different === clientHeight ? false : true)
+  }, [total,seen, companionId])
   
   const debouncedHandleScroll = debounce(handleScroll, 300)
   
@@ -122,8 +120,8 @@ const ChatBar = () => {
   useEffect(() => {
     const scrollHeight = divRef.current.scrollHeight
     const clientHeight = divRef.current.clientHeight
-    if(isScroll&&scrollHeight === clientHeight) seenChat(companionId)
-  }, [isScroll, companionId, total]);
+    if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
+  }, [total,seen, companionId]);
 
   return (
     <div className={classes.container} >