chore(deps): update rust crate ipnet to 2.12.0

matrixgw_backend/src/controllers/matrix/matrix_event_controller.rs

@@ -14,13 +14,15 @@ 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};
@@ -122,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(
@@ -134,8 +138,15 @@ 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);
-        .await?;
+
+    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())
 }
@@ -146,9 +157,16 @@ pub struct SendFileForm {
     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 {
@@ -182,8 +200,17 @@ pub async fn send_file(
         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, AttachmentConfig::new())
+    room.send_attachment(file_name, mime_type, buff, config)
         .await?;
 
     Ok(HttpResponse::Accepted().finish())
@@ -194,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/main.rs

@@ -190,6 +190,10 @@ async fn main() -> std::io::Result<()> {
                 "/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

@@ -37,7 +37,7 @@
     "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9.39.3",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -96,23 +96,33 @@ 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): Promise<void> {
+  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`,
+      uri:
+        `/matrix/room/${room.id}/send_file?` +
+        (inReplyTo ? `in_reply_to=${inReplyTo}` : ""),
       formData,
     });
   }

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,21 +1,38 @@
+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, Tooltip } from "@mui/material";
+import {
+  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 { selectFileToUpload } from "../../utils/FilesUtils";
-import { ServerApi } from "../../api/ServerApi";
 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: SyntheticEvent) => {
     e.preventDefault();
@@ -25,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}`);
@@ -36,6 +59,13 @@ 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({
@@ -45,9 +75,15 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
       if (!file) return;
 
       loadingMessage.show("Uploading file...");
-      await MatrixApiEvent.SendFileMessage(p.room, 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}`);
@@ -58,6 +94,31 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
 
   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",
@@ -76,6 +137,12 @@ export function SendMessageForm(p: { room: Room }): React.ReactElement {
           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 />
@@ -90,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>
   );
 }