fix scrolldown when new msg

This commit is contained in:
PhilReact 2024-12-05 14:11:19 +02:00
parent 451b16ebf2
commit 4972496998
2 changed files with 10 additions and 4 deletions

View File

@ -75,7 +75,9 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
timestamp: Date.now(),
groupId: selectedGroup
}).then((res)=> {
getTimestampEnterChatParent();
setTimeout(() => {
getTimestampEnterChatParent();
}, 200);
}).catch((error) => {
console.error("Failed to add timestamp:", error.message || "An error occurred");
});

View File

@ -13,6 +13,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
const [showScrollButton, setShowScrollButton] = useState(false);
const hasLoadedInitialRef = useRef(false);
const [showScrollDownButton, setShowScrollDownButton] = useState(false);
const lastSeenUnreadMessageTimestamp = useRef(null);
const scrollingIntervalRef = useRef(null);
@ -84,7 +85,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
setMessages(totalMessages);
setTimeout(() => {
const hasUnreadMessages = totalMessages.some((msg) => msg.unread && !msg?.chatReference && !msg?.isTemp);
const hasUnreadMessages = totalMessages.some(
(msg) => msg.unread && !msg?.chatReference && !msg?.isTemp && (!msg?.chatReference && msg?.timestamp > lastSeenUnreadMessageTimestamp.current || 0)
);
if (parentRef.current) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
@ -127,6 +130,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
}))
);
setShowScrollButton(false)
lastSeenUnreadMessageTimestamp.current = Date.now()
}, []);
// const scrollToBottom = (initialMsgs) => {
@ -353,7 +357,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
</div>
</div>
{showScrollButton && (
{showScrollButton && (
<button
onClick={() => scrollToBottom()}
style={{
@ -373,7 +377,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
Scroll to Unread Messages
</button>
)}
{showScrollDownButton && (
{showScrollDownButton && !showScrollButton && (
<button
onClick={() => scrollToBottom()}
style={{