Start to display messages list

2025-11-25 12:17:48 +01:00
parent 5eab7c3e4f
commit 2adbf146d0
4 changed files with 87 additions and 3 deletions
--- a/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
+++ b/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>
+    </>
+  );
+}