From 5088699c15a8fd358e1890ae628f3a5efb11320e Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 3 Dec 2025 19:20:17 +0100
Subject: [PATCH] Add replies support

---
 .../src/api/matrix/MatrixApiEvent.ts          |  7 +++--
 .../src/utils/RoomEventsManager.ts            |  4 ++-
 .../src/widgets/messages/RoomMessagesList.tsx | 26 +++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts b/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts
index 34d31d7..28068e3 100644
--- a/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts
+++ b/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?: {
diff --git a/matrixgw_frontend/src/utils/RoomEventsManager.ts b/matrixgw_frontend/src/utils/RoomEventsManager.ts
index 2efb88a..3fa2ade 100644
--- a/matrixgw_frontend/src/utils/RoomEventsManager.ts
+++ b/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),
diff --git a/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx b/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
index 3fc340a..58e9f1b 100644
--- a/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
+++ b/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