[mirotalksfu] - improve chat messages UI

public/css/Room.css

@@ -481,6 +481,7 @@ body {
     border-top-left-radius: 10px;
     background: rgb(0, 0, 0);
     color: #fff;
+    resize: none;
 }
 
 .chat-msger-inputarea button {

public/js/Room.js

@@ -81,6 +81,7 @@ let isScreenAllowed = getScreen();
 let isAudioVideoAllowed = false;
 let isParticipantsListOpen = false;
 let isVideoControlsOn = false;
+let isChatPastTxt = false;
 let joinRoomWithoutAudioVideo = true;
 let initAudioButton = null;
 let initVideoButton = null;
@@ -1020,6 +1021,10 @@ function handleInputs() {
         }
     };
 
+    chatMessage.onpaste = () => {
+        isChatPastTxt = true;
+    };
+
     rc.getId('chatEmoji').addEventListener('emoji-click', (e) => {
         chatMessage.value += e.detail.emoji.unicode;
         rc.toggleChatEmoji();

public/js/RoomClient.js

@@ -2046,12 +2046,13 @@ class RoomClient {
 
     formatMsg(message) {
         if (this.isHtml(message)) return this.stripHtml(message);
-        let urlRegex = /(https?:\/\/[^\s]+)/g;
+        if (this.isValidHttpURL(message)) {
-        return message.replace(urlRegex, (url) => {
+            if (isImageURL(message)) return '<img src="' + message + '" alt="img" width="180" height="auto"/>';
-            if (message.match(/\.(jpeg|jpg|gif|png|tiff|bmp)$/))
+            return '<a href="' + message + '" target="_blank">' + message + '</a>';
-                return '<img src="' + url + '" alt="img" width="180" height="auto"/>';
+        }
-            return '<a href="' + url + '" target="_blank">' + url + '</a>';
+        message = isChatPastTxt ? '<pre>' + message + '</pre>' : message;
-        });
+        isChatPastTxt = false;
+        return message;
     }
 
     stripHtml(html) {
@@ -2068,6 +2069,16 @@ class RoomClient {
         return false;
     }
 
+    isValidHttpURL(str) {
+        let url;
+        try {
+            url = new URL(str);
+        } catch (_) {
+            return false;
+        }
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+
     collectMessages(time, from, msg) {
         this.chatMessages.push({
             time: time,

public/views/Room.html

@@ -358,12 +358,14 @@
                     <!-- chat messages -->
                 </main>
                 <div class="chat-msger-inputarea">
-                    <input
+                    <textarea
+                        rows="1"
+                        cols="1"
                         id="chatMessage"
                         class="chat-msger-input"
                         type="text"
                         placeholder="💬 Enter your message..."
-                    />
+                    ></textarea>
                     <button id="chatEmojiButton" class="hidden">
                         <i class="fas fa-smile"></i>
                     </button>