fix: chat stream hook same across web and mobile

The-Commit-Company · Mar 26, 2024 · 8accc04 · 8accc04
1 parent 063f295
commit 8accc04
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/mobile/src/components/features/chat-space/useChatStream.ts b/mobile/src/components/features/chat-space/useChatStream.ts
@@ -175,15 +175,10 @@ const useChatStream = (channelID: string, scrollRef: RefObject<HTMLIonContentEle
             }).then(() => {
                 // If the user is focused on the page, then we also need to
                 if (scrollRef.current) {
-                    // We only scroll to the bottom if the user is close to the bottom
-                    scrollRef.current.scrollToBottom()
-                    // TODO: Else we show a notification that there are new messages
-                    if (scrollRef.current.scrollTop !== 0) {
-
-                    }
+                    // TODO: We only scroll to the bottom if the user is close to the bottom
+                    scrollRef.current.scrollToBottom(200)
                 }
             })
-
         }
     })
 
@@ -475,7 +470,6 @@ const useChatStream = (channelID: string, scrollRef: RefObject<HTMLIonContentEle
             onBaseMessageChange?.(messageID)
             setHighlightedMessage(messageID)
         }
-
     }
 
     return {

diff --git a/raven-app/src/components/feature/chat/ChatStream/useChatStream.ts b/raven-app/src/components/feature/chat/ChatStream/useChatStream.ts
@@ -1,9 +1,10 @@
 import { useFrappeDocumentEventListener, useFrappeEventListener, useFrappeGetCall, useFrappePostCall } from 'frappe-react-sdk'
-import { MutableRefObject, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { MutableRefObject, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useBeforeUnload, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { Message } from '../../../../../../types/Messaging/Message'
 import { convertFrappeTimestampToUserTimezone } from '@/utils/dateConversions/utils'
 import { useDebounce } from '@/hooks/useDebounce'
+import { UserContext } from '@/utils/auth/UserProvider'
 
 interface GetMessagesResponse {
     message: {
@@ -30,6 +31,8 @@ const useChatStream = (scrollRef: MutableRefObject<HTMLDivElement | null>) => {
     const navigate = useNavigate()
     const { state } = location
 
+    const { currentUser } = useContext(UserContext)
+
 
     const [highlightedMessage, setHighlightedMessage] = useState<string | null>(state?.baseMessage ? state.baseMessage : null)
 
@@ -195,8 +198,12 @@ const useChatStream = (scrollRef: MutableRefObject<HTMLDivElement | null>) => {
                     // If the user is focused on the page, then we also need to
                     if (scrollRef.current) {
                         // We only scroll to the bottom if the user is close to the bottom
-                        scrollRef.current?.scrollTo(0, scrollRef.current?.scrollHeight)
-                        // TODO: Else we show a notification that there are new messages
+                        if (scrollRef.current.scrollTop + scrollRef.current.clientHeight >= scrollRef.current.scrollHeight - 100) {
+                            scrollRef.current?.scrollTo(0, scrollRef.current?.scrollHeight)
+                        } else if (event.message_details.owner === currentUser) {
+                            // If the user is the sender of the message, scroll to the bottom
+                            scrollRef.current?.scrollTo(0, scrollRef.current?.scrollHeight)
+                        }
                     }
                 }
             })
@@ -487,6 +494,7 @@ const useChatStream = (scrollRef: MutableRefObject<HTMLDivElement | null>) => {
             // Use the id to scroll to the message
             document.getElementById(`message-${messageID}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
             setHighlightedMessage(messageID)
+
         } else {
             // If not, change the base message, fetch the message and scroll to it.
             navigate(location, {