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],
};
}