[mirotalksfu] - add clean/paste Chat input txt

public/css/Room.css

@@ -471,7 +471,6 @@ body {
 .chat-msger-inputarea {
     display: flex;
     padding: 10px;
-    background: #1f1e1e;
 }
 
 .chat-msger-input {
@@ -479,15 +478,41 @@ body {
     padding: 10px;
     border: none;
     border-top-left-radius: 10px;
-    background: rgb(0, 0, 0);
+    background: rgb(7 7 7);
     color: #fff;
     resize: none;
 }
 
-.chat-msger-inputarea button {
+.chat-msger-input::-webkit-scrollbar {
+    width: 5px;
+}
+
+.chat-msger-input::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-msger-input::-webkit-scrollbar-thumb {
+    background: #404040;
+}
+
+/*--------------------------------------------------------------
+# Chat room buttons area
+--------------------------------------------------------------*/
+
+.chat-msger-buttons {
+    display: flex;
+    padding: 10px;
+}
+
+.chat-msger-buttons button {
     width: 32px;
 }
 
+#chatSendButton {
+    position: absolute;
+    right: 5px;
+}
+
 /*--------------------------------------------------------------
 # Chat room emoji picker
 --------------------------------------------------------------*/
@@ -495,7 +520,7 @@ body {
 emoji-picker {
     z-index: 0;
     position: absolute;
-    bottom: 70px;
+    bottom: 100px;
     width: 100%;
     height: 50%;
     --background: #16171b;

public/js/Room.js

@@ -146,6 +146,8 @@ function initClient() {
         setTippy('whiteboardEraserBtn', 'Eraser', 'top');
         setTippy('whiteboardCleanBtn', 'Clean', 'top');
         setTippy('chatMessage', 'Press enter to send', 'top-start');
+        setTippy('chatCleanTextButton', 'Clean', 'top');
+        setTippy('chatPasteButton', 'Paste', 'top');
         setTippy('chatSendButton', 'Send', 'top');
         setTippy('chatSpeechStartButton', 'Start speech recognition', 'top');
         setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top');
@@ -629,6 +631,8 @@ function roomIsReady() {
     BUTTONS.main.shareButton && show(shareButton);
     show(startRecButton);
     BUTTONS.main.chatButton && show(chatButton);
+    show(chatCleanTextButton);
+    show(chatPasteButton);
     show(chatSendButton);
     show(chatEmojiButton);
     show(chatMarkdownButton);
@@ -802,6 +806,12 @@ function handleButtons() {
     chatCloseButton.onclick = () => {
         rc.toggleChat();
     };
+    chatCleanTextButton.onclick = () => {
+        rc.cleanMessage();
+    };
+    chatPasteButton.onclick = () => {
+        rc.pasteMessage();
+    };
     chatSendButton.onclick = () => {
         rc.sendMessage();
     };

public/js/RoomClient.js

@@ -2029,6 +2029,22 @@ class RoomClient {
         this.getId('chatEmojiButton').style.color = this.isChatEmojiOpen ? '#FFFF00' : '#FFFFFF';
     }
 
+    cleanMessage() {
+        chatMessage.value = '';
+    }
+
+    pasteMessage() {
+        navigator.clipboard
+            .readText()
+            .then((text) => {
+                chatMessage.value = text;
+                isChatPasteTxt = true;
+            })
+            .catch((err) => {
+                console.error('Failed to read clipboard contents: ', err);
+            });
+    }
+
     sendMessage() {
         if (!this.thereIsParticipants()) {
             chatMessage.value = '';

public/views/Room.html

@@ -367,6 +367,8 @@
                         class="chat-msger-input"
                         placeholder="💬 Enter your message..."
                     ></textarea>
+                </div>
+                <div class="chat-msger-buttons">
                     <button id="chatEmojiButton" class="hidden">
                         <i class="fas fa-smile"></i>
                     </button>
@@ -382,6 +384,12 @@
                     <button id="chatSpeechStopButton" class="hidden">
                         <i class="fas fa-microphone"></i>
                     </button>
+                    <button id="chatCleanTextButton" class="hidden">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                    <button id="chatPasteButton" class="hidden">
+                        <i class="fas fa-paste"></i>
+                    </button>
                     <button id="chatSendButton" class="hidden">
                         <i class="fas fa-paper-plane"></i>
                     </button>