Add multi line messages supports

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)}
             />