Start to display messages list

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -12,7 +12,8 @@ export interface MessageReaction {
 
 export interface Message {
   event_id: string;
-  sent: number;
+  account: string;
+  time_sent: number;
   modified: boolean;
   reactions: MessageReaction[];
   content: string;
@@ -75,9 +76,10 @@ export class RoomEventsManager {
 
         this.messages.push({
           event_id: evt.id,
+          account: evt.sender,
           modified: false,
           reactions: [],
-          sent: evt.time,
+          time_sent: evt.time,
           image: data.content.file?.url,
           content: data.content.body,
         });

matrixgw_frontend/src/widgets/messages/AccountIcon.tsx

@@ -0,0 +1,15 @@
+import { Avatar } from "@mui/material";
+import type { UserProfile } from "../../api/matrix/MatrixApiProfile";
+import { MatrixApiMedia } from "../../api/matrix/MatrixApiMedia";
+
+export function AccountIcon(p: { user: UserProfile }): React.ReactElement {
+  return (
+    <Avatar
+      src={
+        p.user.avatar ? MatrixApiMedia.MediaURL(p.user.avatar, true) : undefined
+      }
+    >
+      {p.user.display_name?.slice(0, 1)}
+    </Avatar>
+  );
+}

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -0,0 +1,61 @@
+import dayjs from "dayjs";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
+import { AccountIcon } from "./AccountIcon";
+import { MatrixApiMedia } from "../../api/matrix/MatrixApiMedia";
+
+export function RoomMessagesList(p: {
+  users: UsersMap;
+  mgr: RoomEventsManager;
+}): React.ReactElement {
+  return (
+    <div style={{ flex: 1, width: "100%" }}>
+      {p.mgr.messages.map((m, idx) => (
+        <RoomMessage
+          key={m.event_id}
+          {...p}
+          message={m}
+          previousFromSamePerson={
+            idx > 0 &&
+            p.mgr.messages[idx - 1].account === m.account &&
+            m.time_sent - p.mgr.messages[idx - 1].time_sent < 60 * 3 * 1000
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+function RoomMessage(p: {
+  users: UsersMap;
+  message: Message;
+  previousFromSamePerson: boolean;
+}): React.ReactElement {
+  const user = p.users.get(p.message.account);
+  return (
+    <>
+      {!p.previousFromSamePerson && user && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+        >
+          <AccountIcon user={user} />
+          &nbsp;
+          {user.display_name}
+        </div>
+      )}
+
+      <div>
+        {dayjs.unix(p.message.time_sent / 1000).format("HH:mm")}{" "}
+        {p.message.image ? (
+          <img src={MatrixApiMedia.MediaURL(p.message.image, true)} />
+        ) : (
+          p.message.content
+        )}
+      </div>
+    </>
+  );
+}

matrixgw_frontend/src/widgets/messages/RoomWidget.tsx

@@ -4,6 +4,7 @@ import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
 import { RoomEventsManager } from "../../utils/RoomEventsManager";
 import { AsyncWidget } from "../AsyncWidget";
+import { RoomMessagesList } from "./RoomMessagesList";
 
 export function RoomWidget(p: {
   room: Room;
@@ -24,7 +25,12 @@ export function RoomWidget(p: {
       ready={!!roomMgr}
       load={load}
       errMsg="Failed to load room!"
-      build={() => <>room</>}
+      build={() => (
+        <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
+          <RoomMessagesList mgr={roomMgr!} {...p} />
+          <div>Send message form</div>
+        </div>
+      )}
     />
   );
 }