Display a message when the conversation is empty

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -40,16 +40,34 @@ export function RoomMessagesList(p: {
   users: UsersMap;
   manager: RoomEventsManager;
 }): React.ReactElement {
+  const listContainerRef = React.createRef<HTMLDivElement>();
   const messagesEndRef = React.createRef<HTMLDivElement>();
 
   // Automatically scroll to bottom when number of messages change
   React.useEffect(() => {
     if (messagesEndRef)
       messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
-  }, [p.manager.messages.length]);
+  }, [p.manager.messages.at(-1)?.event_id]);
+
+  // Watch scroll to detect when user reach the top to load older messages
+  const handleScroll = () => {
+    if (!listContainerRef.current) return;
+
+    const { scrollTop } = listContainerRef.current;
+
+    if (scrollTop !== 0) {
+      return;
+    }
+
+    console.log("reached top");
+    // TODO : load old messages
+    // TODO : block when user reached begining of conversation
+  };
 
   return (
     <div
+      onScroll={handleScroll}
+      ref={listContainerRef}
       style={{
         flex: 1,
         width: "100%",
@@ -58,6 +76,20 @@ export function RoomMessagesList(p: {
         paddingLeft: "20px",
       }}
     >
+      {/* Empty conversation notice */}
+      {p.manager.messages.length === 0 && (
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          No message in this conversation yet!
+        </div>
+      )}
+
       {p.manager.messages.map((m, idx) => (
         <RoomMessage
           key={m.event_id}