Improve messages appearance

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,16 +1,34 @@
+import { Dialog, Typography } from "@mui/material";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
 import { AccountIcon } from "./AccountIcon";
+import React from "react";
 
 export function RoomMessagesList(p: {
   room: Room;
   users: UsersMap;
   mgr: RoomEventsManager;
 }): React.ReactElement {
+  const messagesEndRef = React.createRef<HTMLDivElement>();
+
+  // Automatically scroll to bottom when number of messages change
+  React.useEffect(() => {
+    if (messagesEndRef)
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [p.mgr.messages.length]);
+
   return (
-    <div style={{ flex: 1, width: "100%" }}>
+    <div
+      style={{
+        flex: 1,
+        width: "100%",
+        paddingRight: "50px",
+        overflow: "scroll",
+        paddingLeft: "20px",
+      }}
+    >
       {p.mgr.messages.map((m, idx) => (
         <RoomMessage
           key={m.event_id}
@@ -28,6 +46,8 @@ export function RoomMessagesList(p: {
           }
         />
       ))}
+
+      <div ref={messagesEndRef} style={{ height: "10px" }} />
     </div>
   );
 }
@@ -39,42 +59,75 @@ function RoomMessage(p: {
   previousFromSamePerson: boolean;
   firstMessageOfDay: boolean;
 }): React.ReactElement {
+  const [showImageFullScreen, setShowImageFullScreen] = React.useState(false);
+
+  const closeImageFullScreen = () => setShowImageFullScreen(false);
+
   const user = p.users.get(p.message.account);
+
   return (
     <>
       {p.firstMessageOfDay && (
-        <div style={{ textAlign: "center" }}>
+        <Typography
+          variant="caption"
+          component={"div"}
+          style={{ textAlign: "center", marginTop: "50px" }}
+        >
           {p.message.time_sent_dayjs.format("DD/MM/YYYY")}
-        </div>
+        </Typography>
       )}
-      {!p.previousFromSamePerson && user && (
+      {(!p.previousFromSamePerson || p.firstMessageOfDay) && user && (
         <div
           style={{
             display: "flex",
             flexDirection: "row",
             alignItems: "center",
+            marginTop: "20px",
           }}
         >
           <AccountIcon user={user} />
-          &nbsp;
+          &nbsp;&nbsp;&nbsp;
           {user.display_name}
         </div>
       )}
 
-      <div>
-        {p.message.time_sent_dayjs.format("HH:mm")}{" "}
+      <div
+        style={{
+          wordBreak: "break-all",
+          wordWrap: "break-word",
+          maxWidth: "100%",
+        }}
+      >
+        <Typography variant="caption">
+          &nbsp; {p.message.time_sent_dayjs.format("HH:mm")}
+        </Typography>{" "}
+        &nbsp;&nbsp;&nbsp;
         {p.message.image ? (
           <img
+            onClick={() => setShowImageFullScreen(true)}
             src={MatrixApiEvent.GetEventFileURL(
               p.room,
               p.message.event_id,
               true
             )}
+            style={{
+              maxWidth: "200px",
+            }}
           />
         ) : (
           p.message.content
         )}
       </div>
+
+      <Dialog open={showImageFullScreen} onClose={closeImageFullScreen}>
+        <img
+          src={MatrixApiEvent.GetEventFileURL(
+            p.room,
+            p.message.event_id,
+            false
+          )}
+        />
+      </Dialog>
     </>
   );
 }