chore(deps): update rust crate clap to 4.6.0

matrixgw_backend/Cargo.toml

@@ -6,14 +6,15 @@ edition = "2024"
 [dependencies]
 env_logger = "0.11.9"
 log = "0.4.29"
-clap = { version = "4.5.59", features = ["derive", "env"] }
+clap = { version = "4.6.0", features = ["derive", "env"] }
-anyhow = "1.0.101"
+anyhow = "1.0.102"
 serde = { version = "1.0.228", features = ["derive"] }
-tokio = { version = "1.49.0", features = ["full"] }
+tokio = { version = "1.50.0", features = ["full"] }
 actix-web = "4.13.0"
 actix-session = { version = "0.11.0", features = ["redis-session"] }
 actix-remote-ip = "0.1.0"
 actix-cors = "0.7.1"
+actix-multipart = "0.7.2"
 light-openid = "1.1.0"
 bytes = "1.11.1"
 sha2 = "0.11.0-rc.5"
@@ -21,18 +22,19 @@ base16ct = { version = "1.0.0", features = ["alloc"] }
 futures-util = "0.3.32"
 jwt-simple = { version = "0.12.14", default-features = false, features = ["pure-rust"] }
 thiserror = "2.0.18"
-uuid = { version = "1.21.0", features = ["v4", "serde"] }
+uuid = { version = "1.22.0", features = ["v4", "serde"] }
-ipnet = { version = "2.11.0", features = ["serde"] }
+ipnet = { version = "2.12.0", features = ["serde"] }
 rand = "0.10.0"
 hex = "0.4.3"
-mailchecker = "6.0.19"
+mailchecker = "6.0.20"
 matrix-sdk = { version = "0.16.0", features = ["e2e-encryption"] }
 matrix-sdk-ui = "0.16.0"
 url = "2.5.8"
-ractor = "0.15.10"
+ractor = "0.15.12"
 serde_json = "1.0.149"
 lazy-regex = "3.6.0"
-actix-ws = "0.3.1"
+actix-ws = "0.4.0"
 infer = "0.19.0"
 rust-embed = "8.11.0"
-mime_guess = "2.0.5"
+mime_guess = "2.0.5"
+image = "0.25.10"

matrixgw_backend/src/controllers/matrix/matrix_devices_controller.rs

@@ -0,0 +1,9 @@
+use crate::controllers::HttpResult;
+use crate::extractors::matrix_client_extractor::MatrixClientExtractor;
+use actix_web::HttpResponse;
+
+/// Get the list of devices for the account
+pub async fn get_list(client: MatrixClientExtractor) -> HttpResult {
+    let devices = client.client.client.devices().await?.devices;
+    Ok(HttpResponse::Ok().json(devices))
+}

matrixgw_backend/src/controllers/matrix/matrix_event_controller.rs

@@ -2,27 +2,33 @@ 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::controllers::server_controller::ServerConstraints;
 use crate::extractors::matrix_client_extractor::MatrixClientExtractor;
+use actix_multipart::form::MultipartForm;
 use actix_web::dev::Payload;
 use actix_web::{FromRequest, HttpRequest, HttpResponse, web};
 use futures_util::{StreamExt, stream};
 use matrix_sdk::Room;
+use matrix_sdk::attachment::AttachmentConfig;
 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::room::reply::{EnforceThread, Reply};
 use matrix_sdk::ruma::api::client::filter::RoomEventFilter;
 use matrix_sdk::ruma::api::client::receipt::create_receipt::v3::ReceiptType;
 use matrix_sdk::ruma::events::reaction::ReactionEventContent;
 use matrix_sdk::ruma::events::receipt::ReceiptThread;
-use matrix_sdk::ruma::events::relation::Annotation;
+use matrix_sdk::ruma::events::relation::{Annotation, InReplyTo};
 use matrix_sdk::ruma::events::room::message::{
-    MessageType, RoomMessageEvent, RoomMessageEventContent, RoomMessageEventContentWithoutRelation,
+    MessageType, Relation, 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;
+use std::io::Read;
 
 #[derive(Serialize)]
 pub struct APIEvent {
@@ -118,6 +124,8 @@ pub async fn get_for_room(
 #[derive(Deserialize)]
 struct SendTextMessageRequest {
     content: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    in_reply_to: Option<OwnedEventId>,
 }
 
 pub async fn send_text_message(
@@ -130,7 +138,79 @@ pub async fn send_text_message(
         return Ok(HttpResponse::NotFound().json("Room not found!"));
     };
 
-    room.send(RoomMessageEventContent::text_plain(req.content))
+    let mut evt = RoomMessageEventContent::text_plain(req.content);
+
+    if let Some(event_id) = req.in_reply_to {
+        evt.relates_to = Some(Relation::Reply {
+            in_reply_to: InReplyTo::new(event_id),
+        })
+    };
+
+    room.send(evt).await?;
+
+    Ok(HttpResponse::Accepted().finish())
+}
+
+#[derive(Debug, actix_multipart::form::MultipartForm)]
+pub struct SendFileForm {
+    #[multipart]
+    file: actix_multipart::form::tempfile::TempFile,
+}
+
+#[derive(serde::Deserialize)]
+pub struct SendFileQuery {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    in_reply_to: Option<OwnedEventId>,
+}
+
+pub async fn send_file(
+    client: MatrixClientExtractor,
+    path: web::Path<RoomIdInPath>,
+    query: web::Query<SendFileQuery>,
+    req: HttpRequest,
+) -> HttpResult {
+    let Some(payload) = client.auth.payload else {
+        return Ok(HttpResponse::BadRequest().body("No payload included in request!"));
+    };
+
+    // Reconstruct multipart form from authenticated request
+    let mut form = MultipartForm::<SendFileForm>::from_request(
+        &req,
+        &mut Payload::from(bytes::Bytes::from(payload)),
+    )
+    .await?;
+
+    // Read attachment to end
+    let mut buff = Vec::with_capacity(form.file.size);
+    form.file.file.read_to_end(&mut buff)?;
+
+    if form.file.size > ServerConstraints::default().max_upload_file_size {
+        return Ok(HttpResponse::NotFound().json("Uploaded file is too large!"));
+    }
+
+    let Some(room) = client.client.client.get_room(&path.room_id) else {
+        return Ok(HttpResponse::NotFound().json("Room not found!"));
+    };
+
+    let Some(file_name) = form.file.file_name.as_deref() else {
+        return Ok(HttpResponse::BadRequest().json("File name must be specified!"));
+    };
+
+    let Some(mime_type) = form.file.content_type.as_ref() else {
+        return Ok(HttpResponse::BadRequest().json("File content type must be specified!"));
+    };
+
+    let mut config = AttachmentConfig::new();
+
+    if let Some(event_id) = query.0.in_reply_to {
+        config.reply = Some(Reply {
+            event_id,
+            enforce_thread: EnforceThread::MaybeThreaded,
+        })
+    }
+
+    // Do send the file
+    room.send_attachment(file_name, mime_type, buff, config)
         .await?;
 
     Ok(HttpResponse::Accepted().finish())
@@ -141,6 +221,25 @@ pub struct EventIdInPath {
     pub(crate) event_id: OwnedEventId,
 }
 
+/// Get a single event information
+pub async fn get_event(
+    client: MatrixClientExtractor,
+    path: web::Path<RoomIdInPath>,
+    event_path: web::Path<EventIdInPath>,
+) -> HttpResult {
+    let Some(room) = client.client.client.get_room(&path.room_id) else {
+        return Ok(HttpResponse::NotFound().json("Room not found!"));
+    };
+
+    let event = room.load_or_fetch_event(&event_path.event_id, None).await?;
+
+    Ok(match event.kind {
+        TimelineEventKind::Decrypted(dec) => HttpResponse::Ok().json(dec.event),
+        TimelineEventKind::UnableToDecrypt { event, .. }
+        | TimelineEventKind::PlainText { event } => HttpResponse::Ok().json(event),
+    })
+}
+
 pub async fn set_text_content(
     client: MatrixClientExtractor,
     path: web::Path<RoomIdInPath>,

matrixgw_backend/src/controllers/matrix/matrix_media_controller.rs

@@ -4,9 +4,12 @@ use crate::utils::crypt_utils::sha512;
 use actix_web::dev::Payload;
 use actix_web::http::header;
 use actix_web::{FromRequest, HttpRequest, HttpResponse, web};
+use image::imageops::FilterType;
+use image::{ImageFormat, ImageReader};
 use matrix_sdk::media::{MediaFormat, MediaRequestParameters, MediaThumbnailSettings};
 use matrix_sdk::ruma::events::room::MediaSource;
 use matrix_sdk::ruma::{OwnedMxcUri, UInt};
+use std::io::Cursor;
 
 #[derive(serde::Deserialize)]
 pub struct MediaMXCInPath {
@@ -29,11 +32,44 @@ pub async fn serve_mxc_file(req: HttpRequest, media: OwnedMxcUri) -> HttpResult
     serve_media(req, MediaSource::Plain(media), query.thumbnail).await
 }
 
+#[derive(serde::Deserialize, Default, Copy, Clone)]
+#[serde(rename_all(deserialize = "lowercase"))]
+enum ConvertFormat {
+    #[default]
+    Png,
+    Jpeg,
+    Gif,
+    Bmp,
+    Tga,
+    Tiff,
+}
+
+#[derive(serde::Deserialize)]
+struct ServeMediaQuery {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    max_width: Option<u32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    max_height: Option<u32>,
+    #[serde(default)]
+    grayscale: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    format: Option<ConvertFormat>,
+}
+
+impl ServeMediaQuery {
+    pub fn operation_needed(&self) -> bool {
+        self.max_width.is_some()
+            || self.max_height.is_some()
+            || self.format.is_some()
+            || self.grayscale
+    }
+}
+
 /// Serve a media file
 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
+    let mut media = client
         .client
         .client
         .media()
@@ -52,11 +88,44 @@ pub async fn serve_media(req: HttpRequest, source: MediaSource, thumbnail: bool)
         )
         .await?;
 
-    let digest = sha512(&media);
-
     let mime_type = infer::get(&media).map(|x| x.mime_type());
 
+    // Check if the media needs to be converted before being returned
+    let query = web::Query::<ServeMediaQuery>::from_request(&req, &mut Payload::None).await?;
+    if query.operation_needed() {
+        let mut img = ImageReader::new(Cursor::new(&media))
+            .with_guessed_format()?
+            .decode()?;
+
+        // Resize image if required
+        if query.max_width.is_some() || query.max_height.is_some() {
+            img = img.resize(
+                query.max_width.unwrap_or(img.width()),
+                query.max_height.unwrap_or(img.height()),
+                FilterType::Lanczos3,
+            );
+        }
+
+        // Apply grayscal if needed
+        if query.grayscale {
+            img = img.grayscale();
+        }
+
+        // Serialize new image
+        let format = match query.format.unwrap_or_default() {
+            ConvertFormat::Png => ImageFormat::Png,
+            ConvertFormat::Jpeg => ImageFormat::Jpeg,
+            ConvertFormat::Gif => ImageFormat::Gif,
+            ConvertFormat::Bmp => ImageFormat::Bmp,
+            ConvertFormat::Tga => ImageFormat::Tga,
+            ConvertFormat::Tiff => ImageFormat::Tiff,
+        };
+        media.clear();
+        img.write_to(&mut Cursor::new(&mut media), format)?;
+    }
+
     // Check if the browser already knows the etag
+    let digest = sha512(&media);
     if let Some(c) = req.headers().get(header::IF_NONE_MATCH)
         && c.to_str().unwrap_or("") == digest
     {

matrixgw_backend/src/controllers/matrix/matrix_room_controller.rs

@@ -115,17 +115,31 @@ pub struct RoomIdInPath {
     pub(crate) room_id: OwnedRoomId,
 }
 
+#[derive(serde::Deserialize)]
+pub struct SingleRoomQuery {
+    #[serde(default)]
+    pub with_latest_event: bool,
+}
+
 /// Get the list of joined rooms of the user
 pub async fn single_room_info(
     client: MatrixClientExtractor,
     path: web::Path<RoomIdInPath>,
+    query: web::Query<SingleRoomQuery>,
 ) -> HttpResult {
     let notifs = client.client.client.notification_settings().await;
 
-    Ok(match client.client.client.get_room(&path.room_id) {
+    let Some(room) = client.client.client.get_room(&path.room_id) else {
-        None => HttpResponse::NotFound().json("Room not found"),
+        return Ok(HttpResponse::NotFound().json("Room not found"));
-        Some(r) => HttpResponse::Ok().json(APIRoomInfo::from_room(&r, &notifs).await?),
+    };
-    })
+
+    let mut room_info = APIRoomInfo::from_room(&room, &notifs).await?;
+
+    if !query.with_latest_event {
+        room_info.latest_event = None;
+    }
+
+    Ok(HttpResponse::Ok().json(room_info))
 }
 
 /// Get room avatar

matrixgw_backend/src/controllers/matrix/mod.rs

@@ -1,3 +1,4 @@
+pub mod matrix_devices_controller;
 pub mod matrix_event_controller;
 pub mod matrix_media_controller;
 pub mod matrix_profile_controller;

matrixgw_backend/src/controllers/mod.rs

@@ -25,12 +25,16 @@ pub enum HttpFailure {
     ActixError(#[from] actix_web::Error),
     #[error("Matrix error: {0}")]
     MatrixError(#[from] matrix_sdk::Error),
+    #[error("Matrix HTTP error: {0}")]
+    MatrixHTTPError(#[from] matrix_sdk::HttpError),
     #[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),
+    #[error("Image error: {0}")]
+    ImageDecode(#[from] image::ImageError),
 }
 
 impl ResponseError for HttpFailure {

matrixgw_backend/src/controllers/server_controller.rs

@@ -39,6 +39,7 @@ pub struct ServerConstraints {
     pub token_name: LenConstraints,
     pub token_ip_net: LenConstraints,
     pub token_max_inactivity: LenConstraints,
+    pub max_upload_file_size: usize,
 }
 
 impl Default for ServerConstraints {
@@ -47,6 +48,7 @@ impl Default for ServerConstraints {
             token_name: LenConstraints::new(5, 255),
             token_ip_net: LenConstraints::max_only(44),
             token_max_inactivity: LenConstraints::new(3600, 3600 * 24 * 365),
+            max_upload_file_size: 20_000_000,
         }
     }
 }

matrixgw_backend/src/main.rs

@@ -10,9 +10,10 @@ use matrixgw_backend::app_config::AppConfig;
 use matrixgw_backend::broadcast_messages::BroadcastMessage;
 use matrixgw_backend::constants;
 use matrixgw_backend::controllers::matrix::{
-    matrix_event_controller, matrix_media_controller, matrix_profile_controller,
+    matrix_devices_controller, matrix_event_controller, matrix_media_controller,
-    matrix_room_controller, matrix_space_controller,
+    matrix_profile_controller, matrix_room_controller, matrix_space_controller,
 };
+use matrixgw_backend::controllers::server_controller::ServerConstraints;
 use matrixgw_backend::controllers::{
     auth_controller, matrix_link_controller, matrix_sync_thread_controller, server_controller,
     static_controller, tokens_controller, ws_controller,
@@ -75,6 +76,9 @@ async fn main() -> std::io::Result<()> {
             .wrap(Logger::default())
             .wrap(session_mw)
             .wrap(cors)
+            .app_data(web::PayloadConfig::new(
+                ServerConstraints::default().max_upload_file_size,
+            ))
             .app_data(web::Data::new(manager_actor_clone.clone()))
             .app_data(web::Data::new(RemoteIPConfig {
                 proxy: AppConfig::get().proxy_ip.clone(),
@@ -138,6 +142,11 @@ async fn main() -> std::io::Result<()> {
                 web::get().to(matrix_sync_thread_controller::status),
             )
             .service(web::resource("/api/ws").route(web::get().to(ws_controller::ws)))
+            // Matrix connection status
+            .route(
+                "/api/matrix/devices",
+                web::get().to(matrix_devices_controller::get_list),
+            )
             // Matrix spaces controller
             .route(
                 "/api/matrix/space/hierarchy",
@@ -182,6 +191,14 @@ async fn main() -> std::io::Result<()> {
                 "/api/matrix/room/{room_id}/send_text_message",
                 web::post().to(matrix_event_controller::send_text_message),
             )
+            .route(
+                "/api/matrix/room/{room_id}/send_file",
+                web::post().to(matrix_event_controller::send_file),
+            )
+            .route(
+                "/api/matrix/room/{room_id}/event/{event_id}",
+                web::get().to(matrix_event_controller::get_event),
+            )
             .route(
                 "/api/matrix/room/{room_id}/event/{event_id}/set_text_content",
                 web::post().to(matrix_event_controller::set_text_content),

matrixgw_frontend/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MatrixGW</title>
+    <style>body {background-color: black;}</style>
   </head>
   <body>
     <div id="root"></div>

matrixgw_frontend/package.json

@@ -13,13 +13,14 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.10",
-    "@mui/icons-material": "^7.3.8",
+    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.8",
+    "@mui/material": "^7.3.9",
-    "@mui/x-data-grid": "^8.27.3",
+    "@mui/x-data-grid": "^8.27.5",
     "@mui/x-date-pickers": "^8.27.2",
-    "date-and-time": "^4.2.0",
+    "date-and-time": "^4.3.1",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.20",
-    "emoji-picker-react": "^4.17.4",
+    "emoji-picker-react": "^4.18.0",
+    "filesize": "^11.0.13",
     "is-cidr": "^6.0.3",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.4",
@@ -29,17 +30,17 @@
     "react-router": "^7.13.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
+    "@eslint/js": "^10.0.1",
-    "@types/node": "^25.1.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.3",
+    "eslint": "^10.0.3",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^16.5.0",
+    "globals": "^17.4.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.57.1",
     "vite": "npm:rolldown-vite@7.3.1"
   },
   "overrides": {

matrixgw_frontend/src/api/ServerApi.ts

@@ -16,6 +16,7 @@ export interface ServerConstraints {
   token_name: LenConstraint;
   token_ip_net: LenConstraint;
   token_max_inactivity: LenConstraint;
+  max_upload_file_size: number;
 }
 
 export interface LenConstraint {

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -68,7 +68,7 @@ export class MatrixApiEvent {
    */
   static async GetRoomEvents(
     room: Room,
-    from?: string
+    from?: string,
   ): Promise<MatrixEventsList> {
     return (
       await APIClient.exec({
@@ -86,7 +86,7 @@ export class MatrixApiEvent {
   static GetEventFileURL(
     room: Room,
     event_id: string,
-    thumbnail: boolean
+    thumbnail: boolean,
   ): string {
     return `${APIClient.ActualBackendURL()}/matrix/room/${
       room.id
@@ -96,11 +96,34 @@ export class MatrixApiEvent {
   /**
    * Send text message
    */
-  static async SendTextMessage(room: Room, content: string): Promise<void> {
+  static async SendTextMessage(
+    room: Room,
+    content: string,
+    in_reply_to?: string | undefined,
+  ): Promise<void> {
     await APIClient.exec({
       method: "POST",
       uri: `/matrix/room/${room.id}/send_text_message`,
-      jsonData: { content },
+      jsonData: { content, in_reply_to },
+    });
+  }
+
+  /**
+   * Send file message
+   */
+  static async SendFileMessage(
+    room: Room,
+    file: Blob,
+    inReplyTo?: string | undefined,
+  ): Promise<void> {
+    const formData = new FormData();
+    formData.set("file", file);
+    await APIClient.exec({
+      method: "POST",
+      uri:
+        `/matrix/room/${room.id}/send_file?` +
+        (inReplyTo ? `in_reply_to=${inReplyTo}` : ""),
+      formData,
     });
   }
 
@@ -110,7 +133,7 @@ export class MatrixApiEvent {
   static async SetTextMessageContent(
     room: Room,
     event_id: string,
-    content: string
+    content: string,
   ): Promise<void> {
     await APIClient.exec({
       method: "POST",
@@ -125,7 +148,7 @@ export class MatrixApiEvent {
   static async ReactToEvent(
     room: Room,
     event_id: string,
-    key: string
+    key: string,
   ): Promise<void> {
     await APIClient.exec({
       method: "POST",

matrixgw_frontend/src/utils/FilesUtils.ts

@@ -0,0 +1,33 @@
+import { filesize } from "filesize";
+
+/**
+ * Select a file to upload
+ */
+export async function selectFileToUpload(p: {
+  allowedTypes?: string[];
+  maxSize?: number;
+}): Promise<Blob | null> {
+  // Create file element
+  const fileEl = document.createElement("input");
+  fileEl.type = "file";
+  if (p.allowedTypes && p.allowedTypes.length > 0)
+    fileEl.accept = p.allowedTypes.join(",");
+  fileEl.click();
+
+  // Wait for a file to be chosen
+  await new Promise((res) =>
+    fileEl.addEventListener("change", () => res(null)),
+  );
+
+  if ((fileEl.files?.length ?? 0) === 0) return null;
+  const file = fileEl.files![0];
+
+  // Check file size
+  if (p.maxSize && file.size > p.maxSize) {
+    throw new Error(
+      `The file is too big ! (max accepted file size : ${filesize(p.maxSize)})`,
+    );
+  }
+
+  return file;
+}

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -2,6 +2,7 @@ import AddReactionIcon from "@mui/icons-material/AddReaction";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
 import EditIcon from "@mui/icons-material/Edit";
+import ReplyIcon from "@mui/icons-material/Reply";
 import {
   Box,
   Button,
@@ -40,6 +41,7 @@ export function RoomMessagesList(p: {
   room: Room;
   users: UsersMap;
   manager: RoomEventsManager;
+  onRequestReplyToMessage: (evt: Message) => void;
 }): React.ReactElement {
   const snackbar = useSnackbar();
 
@@ -63,7 +65,7 @@ export function RoomMessagesList(p: {
     try {
       const older = await MatrixApiEvent.GetRoomEvents(
         p.room,
-        p.manager.endToken
+        p.manager.endToken,
       );
       p.manager.processNewEvents(older);
     } catch (e) {
@@ -176,6 +178,7 @@ export function RoomMessagesList(p: {
               p.manager.messages.find((s) => s.event_id === m.inReplyTo)) ||
             undefined
           }
+          onRequestReplyToMessage={() => p.onRequestReplyToMessage(m)}
         />
       ))}
 
@@ -192,6 +195,7 @@ function RoomMessage(p: {
   firstMessageOfDay: boolean;
   receipts?: Receipt[];
   repliedMessage?: Message;
+  onRequestReplyToMessage: () => void;
 }): React.ReactElement {
   const theme = useTheme();
   const user = useUserInfo();
@@ -231,7 +235,7 @@ function RoomMessage(p: {
       await MatrixApiEvent.SetTextMessageContent(
         p.room,
         p.message.event_id,
-        editMessage!
+        editMessage!,
       );
       setEditMessage(undefined);
     } catch (e) {
@@ -259,7 +263,7 @@ function RoomMessage(p: {
 
   const handleToggleReaction = async (
     key: string,
-    reaction: MessageReaction | undefined
+    reaction: MessageReaction | undefined,
   ) => {
     try {
       if (!reaction)
@@ -339,7 +343,7 @@ function RoomMessage(p: {
           {p.repliedMessage && repliedMsgSender && (
             <div
               style={{
-                display: "inline-flex",
+                display: "flex",
                 alignItems: "center",
                 borderLeft: "1px red solid",
                 paddingLeft: "10px",
@@ -360,7 +364,7 @@ function RoomMessage(p: {
               src={MatrixApiEvent.GetEventFileURL(
                 p.room,
                 p.message.event_id,
-                true
+                true,
               )}
               style={{
                 maxWidth: "200px",
@@ -375,7 +379,7 @@ function RoomMessage(p: {
                 src={MatrixApiEvent.GetEventFileURL(
                   p.room,
                   p.message.event_id,
-                  false
+                  false,
                 )}
               />
             </audio>
@@ -388,7 +392,7 @@ function RoomMessage(p: {
                 src={MatrixApiEvent.GetEventFileURL(
                   p.room,
                   p.message.event_id,
-                  false
+                  false,
                 )}
               />
             </video>
@@ -400,7 +404,7 @@ function RoomMessage(p: {
               href={MatrixApiEvent.GetEventFileURL(
                 p.room,
                 p.message.event_id,
-                false
+                false,
               )}
               target="_blank"
               rel="noopener"
@@ -458,6 +462,10 @@ function RoomMessage(p: {
           <Button onClick={handleAddReaction}>
             <AddReactionIcon />
           </Button>
+          {/* Reply to message */}
+          <Button onClick={p.onRequestReplyToMessage}>
+            <ReplyIcon />
+          </Button>
           {/* Edit text message */}
           {p.message.account === user.info.matrix_user_id &&
             !p.message.file && (
@@ -479,7 +487,7 @@ function RoomMessage(p: {
         {[...p.message.reactions.keys()].map((r) => {
           const reactions = p.message.reactions.get(r)!;
           const userReaction = reactions.find(
-            (r) => r.account === user.info.matrix_user_id
+            (r) => r.account === user.info.matrix_user_id,
           );
           return (
             <Tooltip
@@ -537,7 +545,7 @@ function RoomMessage(p: {
           src={MatrixApiEvent.GetEventFileURL(
             p.room,
             p.message.event_id,
-            false
+            false,
           )}
         />
       </Dialog>
@@ -607,7 +615,7 @@ function ReactionButton(p: {
     p.message.reactions
       .get(p.emojiKey)
       ?.find(
-        (r) => r.key === p.emojiKey && r.account === user.info.matrix_user_id
+        (r) => r.key === p.emojiKey && r.account === user.info.matrix_user_id,
       ) !== undefined
   )
     return <></>;

matrixgw_frontend/src/widgets/messages/RoomWidget.tsx

@@ -3,7 +3,7 @@ import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
 import { useSnackbar } from "../../hooks/contexts_provider/SnackbarProvider";
-import { RoomEventsManager } from "../../utils/RoomEventsManager";
+import { type Message, RoomEventsManager } from "../../utils/RoomEventsManager";
 import { RoomMessagesList } from "./RoomMessagesList";
 import { SendMessageForm } from "./SendMessageForm";
 import { TypingNotice } from "./TypingNotice";
@@ -17,6 +17,10 @@ export function RoomWidget(p: {
 
   const receiptId = React.useRef<string | undefined>(undefined);
 
+  const [currMessageReply, setCurrMessageReply] = React.useState<
+    Message | undefined
+  >();
+
   const handleRoomClick = async () => {
     if (p.manager.messages.length === 0) return;
     const latest = p.manager.messages[p.manager.messages.length - 1];
@@ -36,9 +40,13 @@ export function RoomWidget(p: {
       style={{ display: "flex", flexDirection: "column", flex: 1 }}
       onClick={handleRoomClick}
     >
-      <RoomMessagesList {...p} />
+      <RoomMessagesList {...p} onRequestReplyToMessage={setCurrMessageReply} />
       <TypingNotice {...p} />
-      <SendMessageForm {...p} />
+      <SendMessageForm
+        {...p}
+        currMessageReply={currMessageReply}
+        setCurrReplyToMessage={setCurrMessageReply}
+      />
     </div>
   );
 }

matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx

@@ -1,18 +1,40 @@
+import AddReactionIcon from "@mui/icons-material/AddReaction";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import CloseIcon from "@mui/icons-material/Close";
+import ReplyIcon from "@mui/icons-material/Reply";
 import SendIcon from "@mui/icons-material/Send";
-import { IconButton, TextField } from "@mui/material";
+import {
-import React, { type FormEvent } from "react";
+  Button,
+  Dialog,
+  IconButton,
+  Paper,
+  TextField,
+  Tooltip,
+} from "@mui/material";
+import EmojiPicker, { EmojiStyle, Theme } from "emoji-picker-react";
+import React, { type SyntheticEvent } from "react";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { ServerApi } from "../../api/ServerApi";
 import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
 import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider";
+import { useSnackbar } from "../../hooks/contexts_provider/SnackbarProvider";
+import { selectFileToUpload } from "../../utils/FilesUtils";
+import type { Message } from "../../utils/RoomEventsManager";
 
-export function SendMessageForm(p: { room: Room }): React.ReactElement {
+export function SendMessageForm(p: {
+  room: Room;
+  currMessageReply?: Message;
+  setCurrReplyToMessage: (msg: Message | undefined) => void;
+}): React.ReactElement {
   const loadingMessage = useLoadingMessage();
   const alert = useAlert();
+  const snackbar = useSnackbar();
 
   const [text, setText] = React.useState("");
+  const [pickReaction, setPickReaction] = React.useState(false);
 
-  const handleTextSubmit = async (e: FormEvent) => {
+  const handleTextSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
 
     if (text === "") return;
@@ -20,9 +42,15 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
     loadingMessage.show("Sending message...");
 
     try {
-      await MatrixApiEvent.SendTextMessage(p.room, text);
+      await MatrixApiEvent.SendTextMessage(
+        p.room,
+        text,
+        p.currMessageReply?.event_id,
+      );
 
       setText("");
+
+      p.setCurrReplyToMessage(undefined);
     } catch (e) {
       console.error(`Failed to send message! ${e}`);
       alert(`Failed to send message! ${e}`);
@@ -31,8 +59,66 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
     }
   };
 
+  const handleAddReaction = () => setPickReaction(true);
+  const handleCancelAddReaction = () => setPickReaction(false);
+  const handleSelectEmoji = async (key: string) => {
+    setText((t) => t + key);
+    setPickReaction(false);
+  };
+
+  const handleFileSubmit = async () => {
+    try {
+      const file = await selectFileToUpload({
+        maxSize: ServerApi.Config.constraints.max_upload_file_size,
+      });
+
+      if (!file) return;
+
+      loadingMessage.show("Uploading file...");
+      await MatrixApiEvent.SendFileMessage(
+        p.room,
+        file,
+        p.currMessageReply?.event_id,
+      );
+
+      snackbar("The file was successfully uploaded!");
+
+      p.setCurrReplyToMessage(undefined);
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to upload file! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   return (
     <form onSubmit={handleTextSubmit}>
+      {/* Show replied message content */}
+      {p.currMessageReply && (
+        <Paper
+          variant="outlined"
+          style={{
+            display: "flex",
+            padding: "5px 10px",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <ReplyIcon />
+          <span style={{ flex: 1, marginLeft: "10px" }}>
+            {p.currMessageReply.content}
+          </span>
+          <Button
+            size="large"
+            onClick={() => p.setCurrReplyToMessage(undefined)}
+          >
+            <CloseIcon fontSize="inherit" />
+          </Button>
+        </Paper>
+      )}
+
+      {/* Input form */}
       <div
         style={{
           padding: "10px",
@@ -50,6 +136,19 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
           value={text}
           onChange={(e) => setText(e.target.value)}
         />
+        <span style={{ width: "10px" }}></span>
+        <Tooltip title="Add a reaction">
+          <IconButton size="small" onClick={handleAddReaction}>
+            <AddReactionIcon />
+          </IconButton>
+        </Tooltip>
+        <span style={{ width: "10px" }}></span>
+        <Tooltip title="Send a file">
+          <IconButton size="small" onClick={handleFileSubmit}>
+            <AttachFileIcon />
+          </IconButton>
+        </Tooltip>
+        <span style={{ width: "10px" }}></span>
         <IconButton
           size="small"
           style={{ visibility: text === "" ? "hidden" : "visible" }}
@@ -58,6 +157,15 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
           <SendIcon />
         </IconButton>
       </div>
+
+      {/* Pick reaction dialog */}
+      <Dialog open={pickReaction} onClose={handleCancelAddReaction}>
+        <EmojiPicker
+          emojiStyle={EmojiStyle.NATIVE}
+          theme={Theme.AUTO}
+          onEmojiClick={(emoji) => handleSelectEmoji(emoji.emoji)}
+        />
+      </Dialog>
     </form>
   );
 }