diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 3d6ce7bf..de04c018 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -29,6 +29,8 @@ export function Chat({ theme, community }: ChatProps) { sendMessage, notifications, clearNotifications, + loadNextDay, + lastMessage, } = useMessenger( activeChannel.name, channels.map((channel) => channel.name) @@ -59,6 +61,8 @@ export function Chat({ theme, community }: ChatProps) { showMembers={showMembers} community={community} showCommunity={!showChannels} + loadNextDay={() => loadNextDay(activeChannel.name)} + lastMessage={lastMessage} /> ) : ( Connecting to waku diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 1e8c7a8f..4e4394bc 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -28,6 +28,8 @@ interface ChatBodyProps { notifications: { [id: string]: number }; setActiveChannel: (val: ChannelData) => void; activeChannelId: number; + loadNextDay: () => void; + lastMessage: Date; } export function ChatBody({ @@ -42,6 +44,8 @@ export function ChatBody({ notifications, setActiveChannel, activeChannelId, + loadNextDay, + lastMessage, }: ChatBodyProps) { const narrow = useNarrow(); const [showChannelsList, setShowChannelsList] = useState(false); @@ -90,7 +94,9 @@ export function ChatBody({ {!showChannelsList && !showMembersList && ( <> - {" "} + {" "} {messages.length > 0 ? ( ) : ( diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index fb3eac3a..f4303fec 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import styled from "styled-components"; import { ChatMessage } from "../../models/ChatMessage"; @@ -14,13 +14,34 @@ type ChatMessagesProps = { }; export function ChatMessages({ messages, theme }: ChatMessagesProps) { + const [scrollOnBot, setScrollOnBot] = useState(false); const ref = useRef(null); const today = useMemo(() => new Date().getDay(), []); useEffect(() => { - if (ref && ref.current) { + if (ref && ref.current && scrollOnBot) { ref.current.scrollTop = ref.current.scrollHeight; } - }, [messages, messages.length]); + }, [messages, messages.length, scrollOnBot]); + + useEffect(() => { + const setScroll = () => { + if (ref && ref.current) { + if ( + ref.current.scrollTop + ref.current.clientHeight == + ref.current.scrollHeight + ) { + setScrollOnBot(true); + } else { + if (scrollOnBot == true) { + setScrollOnBot(false); + } + } + } + }; + ref.current?.addEventListener("scroll", setScroll); + return () => ref.current?.removeEventListener("scroll", setScroll); + }, [ref, scrollOnBot]); + return ( {messages.map((message, idx) => { diff --git a/packages/react-chat/src/hooks/useMessenger.ts b/packages/react-chat/src/hooks/useMessenger.ts index 82d4d08a..f1204add 100644 --- a/packages/react-chat/src/hooks/useMessenger.ts +++ b/packages/react-chat/src/hooks/useMessenger.ts @@ -37,6 +37,9 @@ export function useMessenger(chatId: string, chatIdList: string[]) { const [notifications, setNotifications] = useState<{ [chatId: string]: number; }>({}); + const [lastLoadTime, setLastLoadTime] = useState<{ + [chatId: string]: Date; + }>({}); const clearNotifications = useCallback((id: string) => { setNotifications((prevNotifications) => { @@ -111,10 +114,20 @@ export function useMessenger(chatId: string, chatIdList: string[]) { Promise.all( chatIdList.map(async (id) => { + const today = new Date(); + const yesterday = new Date(); + yesterday.setDate(today.getDate() - 1); + yesterday.setHours(0, 0, 0, 0); + setLastLoadTime((prev) => { + return { + ...prev, + [id]: yesterday, + }; + }); await messenger.retrievePreviousMessages( id, - new Date(0), - new Date(), + yesterday, + today, (messages) => messages.forEach((msg) => addNewMessage(msg, id)) ); clearNotifications(id); @@ -126,6 +139,29 @@ export function useMessenger(chatId: string, chatIdList: string[]) { createMessenger(); }, []); + const loadNextDay = useCallback( + (id: string) => { + console.log(id); + if (messenger) { + const endTime = lastLoadTime[id]; + const startTime = new Date(); + startTime.setDate(endTime.getDate() - 1); + startTime.setHours(0, 0, 0, 0); + + messenger.retrievePreviousMessages(id, startTime, endTime, (messages) => + messages.forEach((msg) => addNewMessage(msg, id)) + ); + setLastLoadTime((prev) => { + return { + ...prev, + [id]: startTime, + }; + }); + } + }, + [lastLoadTime, messenger] + ); + const sendMessage = useCallback( async (messageText: string) => { await messenger?.sendMessage(messageText, chatId); @@ -149,5 +185,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) { sendMessage, notifications, clearNotifications, + loadNextDay, + lastMessage: lastLoadTime[chatId], }; }