From 771392c9601a5e15b9a90d4bb3f7346cb94a0e28 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 8 Oct 2021 11:11:31 +0200
Subject: [PATCH] Load new messages when reaching top (#57)

---
 packages/react-chat/src/components/Chat/ChatBody.tsx |  1 +
 .../react-chat/src/components/Chat/ChatMessages.tsx  | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index 9e354c15..f5247c2a 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -115,6 +115,7 @@ export function ChatBody({
                 messenger ? (
                   <ChatMessages
                     messages={messages}
+                    loadNextDay={loadNextDay}
                     fetchMetadata={fetchMetadata}
                   />
                 ) : (
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index f98daff9..5be98dba 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -10,11 +10,16 @@ import { ChatMessageContent } from "./ChatMessageContent";
 
 type ChatMessagesProps = {
   messages: ChatMessage[];
+  loadNextDay: () => void;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
 };
 
-export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
-  const [scrollOnBot, setScrollOnBot] = useState(false);
+export function ChatMessages({
+  messages,
+  loadNextDay,
+  fetchMetadata,
+}: ChatMessagesProps) {
+  const [scrollOnBot, setScrollOnBot] = useState(true);
   const ref = useRef<HTMLHeadingElement>(null);
   const today = useMemo(() => new Date().getDay(), []);
   useEffect(() => {
@@ -26,6 +31,9 @@ export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
   useEffect(() => {
     const setScroll = () => {
       if (ref && ref.current) {
+        if (ref.current.scrollTop <= 0) {
+          loadNextDay();
+        }
         if (
           ref.current.scrollTop + ref.current.clientHeight ==
           ref.current.scrollHeight