Add replies support

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -15,8 +15,11 @@ export interface MatrixRoomMessage {
     body: string;
     msgtype: MessageType;
     "m.relates_to"?: {
-      event_id: string;
-      rel_type: "m.replace" | string;
+      event_id?: string;
+      rel_type?: "m.replace" | string;
+      "m.in_reply_to"?: {
+        event_id?: string;
+      };
     };
     url?: string;
     file?: {

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -21,6 +21,7 @@ export interface Message {
   time_sent: number;
   time_sent_dayjs: dayjs.Dayjs;
   modified: boolean;
+  inReplyTo?: string;
   reactions: Map<string, MessageReaction[]>;
   content: string;
   type: MessageType;
@@ -174,7 +175,7 @@ export class RoomEventsManager {
       // Message
       if (data.type === "m.room.message") {
         // Check if this message replaces another one
-        if (data.content["m.relates_to"]) {
+        if (data.content["m.relates_to"]?.rel_type === "replace") {
           const message = this.messages.find(
             (m) => m.event_id === data.content["m.relates_to"]?.event_id
           );
@@ -206,6 +207,7 @@ export class RoomEventsManager {
           event_id: evt.id,
           account: evt.sender,
           modified: false,
+          inReplyTo: data.content["m.relates_to"]?.["m.in_reply_to"]?.event_id,
           reactions: new Map(),
           time_sent: evt.time,
           time_sent_dayjs: dayjs.unix(evt.time / 1000),

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -149,6 +149,11 @@ export function RoomMessagesList(p: {
               p.manager.messages[idx - 1].time_sent_dayjs.startOf("day").unix()
           }
           receipts={p.manager.receiptsEventsMap.get(m.event_id)}
+          repliedMessage={
+            (m.inReplyTo &&
+              p.manager.messages.find((s) => s.event_id === m.inReplyTo)) ||
+            undefined
+          }
         />
       ))}
 
@@ -164,6 +169,7 @@ function RoomMessage(p: {
   previousFromSamePerson: boolean;
   firstMessageOfDay: boolean;
   receipts?: Receipt[];
+  repliedMessage?: Message;
 }): React.ReactElement {
   const theme = useTheme();
   const user = useUserInfo();
@@ -180,6 +186,8 @@ function RoomMessage(p: {
   const closeImageFullScreen = () => setShowImageFullScreen(false);
 
   const sender = p.users.get(p.message.account);
+  const repliedMsgSender =
+    p.repliedMessage && p.users.get(p.repliedMessage.account);
 
   const handleDeleteMessage = async () => {
     if (!(await confirm(`Do you really want to delete this message?`))) return;
@@ -298,6 +306,24 @@ function RoomMessage(p: {
 
         {/** Message itself */}
         <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap", flex: 1 }}>
+          {/** In case of reply */}
+          {p.repliedMessage && repliedMsgSender && (
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                borderLeft: "1px red solid",
+                paddingLeft: "10px",
+                overflow: "hidden",
+              }}
+            >
+              <AccountIcon user={repliedMsgSender} size={16} />
+              <div style={{ marginLeft: "10px" }}>
+                {p.repliedMessage?.content}
+              </div>
+            </div>
+          )}
+
           {/* Image */}
           {p.message.type === "m.image" && (
             <img