Improve messages appearance

matrixgw_backend/src/controllers/matrix/matrix_event_controller.rs

@@ -1,17 +1,22 @@
 use crate::controllers::HttpResult;
+use crate::controllers::matrix::matrix_media_controller;
+use crate::controllers::matrix::matrix_media_controller::MediaQuery;
 use crate::controllers::matrix::matrix_room_controller::RoomIdInPath;
 use crate::extractors::matrix_client_extractor::MatrixClientExtractor;
-use actix_web::{HttpResponse, web};
+use actix_web::dev::Payload;
+use actix_web::{FromRequest, HttpRequest, HttpResponse, web};
 use futures_util::{StreamExt, stream};
 use matrix_sdk::Room;
 use matrix_sdk::deserialized_responses::{TimelineEvent, TimelineEventKind};
+use matrix_sdk::media::MediaEventContent;
 use matrix_sdk::room::MessagesOptions;
 use matrix_sdk::room::edit::EditedContent;
 use matrix_sdk::ruma::events::reaction::ReactionEventContent;
 use matrix_sdk::ruma::events::relation::Annotation;
 use matrix_sdk::ruma::events::room::message::{
-    RoomMessageEventContent, RoomMessageEventContentWithoutRelation,
+    MessageType, RoomMessageEvent, RoomMessageEventContent, RoomMessageEventContentWithoutRelation,
 };
+use matrix_sdk::ruma::events::{AnyMessageLikeEvent, AnyTimelineEvent};
 use matrix_sdk::ruma::{MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedUserId, RoomId, UInt};
 use serde::{Deserialize, Serialize};
 use serde_json::value::RawValue;
@@ -162,6 +167,67 @@ pub async fn set_text_content(
     })
 }
 
+pub async fn event_file(
+    req: HttpRequest,
+    client: MatrixClientExtractor,
+    path: web::Path<RoomIdInPath>,
+    event_path: web::Path<EventIdInPath>,
+) -> HttpResult {
+    let query = web::Query::<MediaQuery>::from_request(&req, &mut Payload::None).await?;
+
+    let Some(room) = client.client.client.get_room(&path.room_id) else {
+        return Ok(HttpResponse::NotFound().json("Room not found!"));
+    };
+
+    let event = match room.load_or_fetch_event(&event_path.event_id, None).await {
+        Ok(event) => event,
+        Err(e) => {
+            log::error!("Failed to load event information! {e}");
+            return Ok(HttpResponse::InternalServerError()
+                .json(format!("Failed to load event information! {e}")));
+        }
+    };
+
+    let event = match event.kind {
+        TimelineEventKind::Decrypted(dec) => dec.event.deserialize()?,
+        TimelineEventKind::UnableToDecrypt { event, .. }
+        | TimelineEventKind::PlainText { event } => event
+            .deserialize()?
+            .into_full_event(room.room_id().to_owned()),
+    };
+
+    let AnyTimelineEvent::MessageLike(message) = event else {
+        return Ok(HttpResponse::BadRequest().json("Event is not message like!"));
+    };
+
+    let AnyMessageLikeEvent::RoomMessage(message) = message else {
+        return Ok(HttpResponse::BadRequest().json("Event is not a room message!"));
+    };
+
+    let RoomMessageEvent::Original(message) = message else {
+        return Ok(HttpResponse::BadRequest().json("Event has been redacted!"));
+    };
+
+    let (source, thumb_source) = match message.content.msgtype {
+        MessageType::Audio(c) => (c.source(), c.thumbnail_source()),
+        MessageType::File(c) => (c.source(), c.thumbnail_source()),
+        MessageType::Image(c) => (c.source(), c.thumbnail_source()),
+        MessageType::Location(c) => (c.source(), c.thumbnail_source()),
+        MessageType::Video(c) => (c.source(), c.thumbnail_source()),
+        _ => (None, None),
+    };
+
+    println!("{source:#?} {thumb_source:#?}");
+
+    let source = match (query.thumbnail, source, thumb_source) {
+        (false, Some(s), _) => s,
+        (true, _, Some(s)) => s,
+        _ => return Ok(HttpResponse::NotFound().json("Requested file not available!")),
+    };
+
+    matrix_media_controller::serve_media(req, source, false).await
+}
+
 #[derive(Deserialize)]
 struct EventReactionBody {
     key: String,

matrixgw_backend/src/controllers/matrix/matrix_media_controller.rs

@@ -4,19 +4,35 @@ use crate::utils::crypt_utils::sha512;
 use actix_web::dev::Payload;
 use actix_web::http::header;
 use actix_web::{FromRequest, HttpRequest, HttpResponse, web};
+use matrix_sdk::crypto::{AttachmentDecryptor, MediaEncryptionInfo};
 use matrix_sdk::media::{MediaFormat, MediaRequestParameters, MediaThumbnailSettings};
 use matrix_sdk::ruma::events::room::MediaSource;
 use matrix_sdk::ruma::{OwnedMxcUri, UInt};
+use std::io::{Cursor, Read};
 
 #[derive(serde::Deserialize)]
-struct MediaQuery {
+pub struct MediaMXCInPath {
+    mxc: OwnedMxcUri,
+}
+
+/// Serve media resource handler
+pub async fn serve_mxc_handler(req: HttpRequest, media: web::Path<MediaMXCInPath>) -> HttpResult {
+    serve_mxc_file(req, media.into_inner().mxc).await
+}
+
+#[derive(serde::Deserialize)]
+pub struct MediaQuery {
     #[serde(default)]
-    thumbnail: bool,
+    pub thumbnail: bool,
+}
+pub async fn serve_mxc_file(req: HttpRequest, media: OwnedMxcUri) -> HttpResult {
+    let query = web::Query::<MediaQuery>::from_request(&req, &mut Payload::None).await?;
+
+    serve_media(req, MediaSource::Plain(media), query.thumbnail).await
 }
 
 /// Serve a media file
-pub async fn serve_media(req: HttpRequest, media: OwnedMxcUri) -> HttpResult {
-    let query = web::Query::<MediaQuery>::from_request(&req, &mut Payload::None).await?;
+pub async fn serve_media(req: HttpRequest, source: MediaSource, thumbnail: bool) -> HttpResult {
     let client = MatrixClientExtractor::from_request(&req, &mut Payload::None).await?;
 
     let media = client
@@ -25,8 +41,8 @@ pub async fn serve_media(req: HttpRequest, media: OwnedMxcUri) -> HttpResult {
         .media()
         .get_media_content(
             &MediaRequestParameters {
-                source: MediaSource::Plain(media),
-                format: match query.thumbnail {
+                source: source.clone(),
+                format: match thumbnail {
                     true => MediaFormat::Thumbnail(MediaThumbnailSettings::new(
                         UInt::new(100).unwrap(),
                         UInt::new(100).unwrap(),
@@ -38,6 +54,21 @@ pub async fn serve_media(req: HttpRequest, media: OwnedMxcUri) -> HttpResult {
         )
         .await?;
 
+    // Decrypt file if needed
+    let media = if let MediaSource::Encrypted(file) = source {
+        let mut cursor = Cursor::new(media);
+        let mut decryptor =
+            AttachmentDecryptor::new(&mut cursor, MediaEncryptionInfo::from(*file))?;
+
+        let mut decrypted_data = Vec::new();
+
+        decryptor.read_to_end(&mut decrypted_data)?;
+
+        decrypted_data
+    } else {
+        media
+    };
+
     let digest = sha512(&media);
 
     let mime_type = infer::get(&media).map(|x| x.mime_type());
@@ -55,13 +86,3 @@ pub async fn serve_media(req: HttpRequest, media: OwnedMxcUri) -> HttpResult {
         .insert_header(("cache-control", "max-age=360000"))
         .body(media))
 }
-
-#[derive(serde::Deserialize)]
-pub struct MediaMXCInPath {
-    mxc: OwnedMxcUri,
-}
-
-/// Save media resource handler
-pub async fn serve_media_res(req: HttpRequest, media: web::Path<MediaMXCInPath>) -> HttpResult {
-    serve_media(req, media.into_inner().mxc).await
-}

matrixgw_backend/src/controllers/matrix/matrix_room_controller.rs

@@ -111,5 +111,5 @@ pub async fn room_avatar(
         return Ok(HttpResponse::NotFound().json("Room has no avatar"));
     };
 
-    matrix_media_controller::serve_media(req, uri).await
+    matrix_media_controller::serve_mxc_file(req, uri).await
 }

matrixgw_backend/src/controllers/mod.rs

@@ -24,6 +24,12 @@ pub enum HttpFailure {
     ActixError(#[from] actix_web::Error),
     #[error("Matrix error: {0}")]
     MatrixError(#[from] matrix_sdk::Error),
+    #[error("Matrix decryptor error: {0}")]
+    MatrixDecryptorError(#[from] matrix_sdk::encryption::DecryptorError),
+    #[error("Serde JSON error: {0}")]
+    SerdeJSON(#[from] serde_json::Error),
+    #[error("Standard library error: {0}")]
+    StdLibError(#[from] std::io::Error),
 }
 
 impl ResponseError for HttpFailure {

matrixgw_backend/src/main.rs

@@ -177,6 +177,10 @@ async fn main() -> std::io::Result<()> {
                 "/api/matrix/room/{room_id}/event/{event_id}/set_text_content",
                 web::post().to(matrix_event_controller::set_text_content),
             )
+            .route(
+                "/api/matrix/room/{room_id}/event/{event_id}/file",
+                web::get().to(matrix_event_controller::event_file),
+            )
             .route(
                 "/api/matrix/room/{room_id}/event/{event_id}/react",
                 web::post().to(matrix_event_controller::react_to_event),
@@ -188,7 +192,7 @@ async fn main() -> std::io::Result<()> {
             // Matrix media controller
             .route(
                 "/api/matrix/media/{mxc}",
-                web::get().to(matrix_media_controller::serve_media_res),
+                web::get().to(matrix_media_controller::serve_mxc_handler),
             )
     })
     .workers(4)

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -67,4 +67,17 @@ export class MatrixApiEvent {
       })
     ).data;
   }
+
+  /**
+   * Get Matrix event file URL
+   */
+  static GetEventFileURL(
+    room: Room,
+    event_id: string,
+    thumbnail: boolean
+  ): string {
+    return `${APIClient.ActualBackendURL()}/matrix/room/${
+      room.id
+    }/event/${event_id}/file?thumbnail=${thumbnail}`;
+  }
 }

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import type {
   MatrixEvent,
   MatrixEventsList,
@@ -12,7 +13,9 @@ export interface MessageReaction {
 
 export interface Message {
   event_id: string;
-  sent: number;
+  account: string;
+  time_sent: number;
+  time_sent_dayjs: dayjs.Dayjs;
   modified: boolean;
   reactions: MessageReaction[];
   content: string;
@@ -75,9 +78,11 @@ export class RoomEventsManager {
 
         this.messages.push({
           event_id: evt.id,
+          account: evt.sender,
           modified: false,
           reactions: [],
-          sent: evt.time,
+          time_sent: evt.time,
+          time_sent_dayjs: dayjs.unix(evt.time / 1000),
           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,133 @@
+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%",
+        paddingRight: "50px",
+        overflow: "scroll",
+        paddingLeft: "20px",
+      }}
+    >
+      {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
+          }
+          firstMessageOfDay={
+            idx === 0 ||
+            m.time_sent_dayjs.startOf("day").unix() !=
+              p.mgr.messages[idx - 1].time_sent_dayjs.startOf("day").unix()
+          }
+        />
+      ))}
+
+      <div ref={messagesEndRef} style={{ height: "10px" }} />
+    </div>
+  );
+}
+
+function RoomMessage(p: {
+  room: Room;
+  users: UsersMap;
+  message: Message;
+  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 && (
+        <Typography
+          variant="caption"
+          component={"div"}
+          style={{ textAlign: "center", marginTop: "50px" }}
+        >
+          {p.message.time_sent_dayjs.format("DD/MM/YYYY")}
+        </Typography>
+      )}
+      {(!p.previousFromSamePerson || p.firstMessageOfDay) && user && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            marginTop: "20px",
+          }}
+        >
+          <AccountIcon user={user} />
+          &nbsp;&nbsp;&nbsp;
+          {user.display_name}
+        </div>
+      )}
+
+      <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>
+    </>
+  );
+}

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>
+      )}
     />
   );
 }