From 123e069d188fc3b69a2813be1eba64e9774aa66c Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Fri, 28 Nov 2025 17:15:33 +0100
Subject: [PATCH] Add multi line messages supports

---
 .../src/widgets/messages/RoomMessagesList.tsx | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx b/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
index 7b7d03c..d7b0b0f 100644
--- a/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
+++ b/matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx
@@ -44,7 +44,7 @@ export function RoomMessagesList(p: {
   // Automatically scroll to bottom when number of messages change
   React.useEffect(() => {
     if (messagesEndRef)
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+      messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
   }, [p.mgr.messages.length]);
 
   return (
@@ -200,6 +200,8 @@ function RoomMessage(p: {
           maxWidth: "100%",
           transition: "all 0.01s ease-in",
           position: "relative",
+          display: "flex",
+          flexDirection: "row",
         }}
         component="div"
         sx={{
@@ -214,23 +216,26 @@ function RoomMessage(p: {
       >
         <Typography variant="caption">
           &nbsp; {p.message.time_sent_dayjs.format("HH:mm")}
-        </Typography>{" "}
-        &nbsp;&nbsp;&nbsp;
-        {p.message.image ? (
-          <img
-            onClick={() => setShowImageFullScreen(true)}
-            src={MatrixApiEvent.GetEventFileURL(
-              p.room,
-              p.message.event_id,
-              true
-            )}
-            style={{
-              maxWidth: "200px",
-            }}
-          />
-        ) : (
-          p.message.content
-        )}
+        </Typography>
+
+        {/** Message itself */}
+        <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap" }}>
+          {p.message.image ? (
+            <img
+              onClick={() => setShowImageFullScreen(true)}
+              src={MatrixApiEvent.GetEventFileURL(
+                p.room,
+                p.message.event_id,
+                true
+              )}
+              style={{
+                maxWidth: "200px",
+              }}
+            />
+          ) : (
+            p.message.content
+          )}
+        </div>
         <ButtonGroup
           className="buttons"
           size="small"
@@ -362,6 +367,7 @@ function RoomMessage(p: {
               type="text"
               fullWidth
               variant="standard"
+              multiline
               value={editMessage}
               onChange={(e) => setEditMessage(e.target.value)}
             />