Add replies support

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