Add reply to single message interface to chat

Add button to reply a message which was send by others
When click on reply button, open a box with the message to reply to.

static/galene.css

@@ -432,6 +432,27 @@ textarea.form-reply {
     margin-right: 0.33em;
 }
 
+.message-reply {
+    display: inline-block;
+    margin-left: 10px;
+    line-height: 1.2;
+    text-align: center;
+    vertical-align: middle;
+    font-size: .9em;
+    color: #a0a1a1;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity .5s ease-in-out
+}
+
+.message-reply:hover {
+    color: #676d70;
+}
+
+.message-row:hover .message-reply {
+    opacity: 1;
+}
+
 .video-container {
     height: calc(var(--vh, 1vh) * 100 - 56px);
     position: relative;
@@ -789,11 +810,58 @@ h1 {
 }
 
 #box {
+    position: relative;
     overflow: auto;
     height: calc(100% - 53px);
     padding: 10px;
 }
 
+#chatbox .box-reply {
+    /*reply box is visible, on top of input*/
+    height: calc(100% - 113px);
+}
+
+.replyto {
+    background: #eae7e5;
+    width: 100%;
+    height: 65px;
+    font-size: .85em;
+    margin-bottom: -5px
+}
+
+.reply-row {
+    border-left: 4px solid #a315c7;
+    height: 100%;
+    padding: 5px 10px;
+    position: relative;
+}
+
+.reply-user {
+    margin: 0;
+    font-weight: 600;
+    font-style: italic;
+    color: #a315c7;
+}
+
+.reply-message {
+    margin: 0;
+    display: block;
+    font-style: italic;
+    height: 40px;
+    overflow: hidden;
+    border-radius: 5px;
+}
+
+.reply-close {
+    position: absolute;
+    display: block;
+    line-height: .9;
+    padding: 5px;
+    cursor: pointer;
+    top: 3px;
+    right: 5px;
+}
+
 .close-chat {
     position: absolute;
     top: 2px;
@@ -805,6 +873,7 @@ h1 {
     color: #8f8f8f;
     cursor: pointer;
     border: 1px solid transparent;
+    z-index: 1001;
 }
 
 .close-chat:hover, .close-chat:active {
@@ -1302,6 +1371,14 @@ header .collapse {
         border-right: none;
     }
 
+    .message-reply {
+        opacity: 1;
+    }
+
+    .message-reply:hover {
+        color: #a0a1a1;
+    }
+
     .dropdown-content {
         margin-top: 10px;
     }

static/galene.html

@@ -87,6 +87,7 @@
                     <span class="close-icon"></span>
                   </div>
                   <div id="box"></div>
+                  <div id="replyto" class="replyto invisible"></div>
                   <div class="reply">
                     <form id="inputform">
                       <textarea id="input" class="form-reply" placeholder="Type /help to show commands"></textarea>

static/galene.js

@@ -292,6 +292,7 @@ function gotConnected() {
 function gotClose(code, reason) {
     delUpMediaKind(null);
     setConnected(false);
+    closeReplyMessage();
     if(code != 1000) {
         console.warn('Socket close', code, reason);
     }
@@ -1574,6 +1575,76 @@ function formatTime(time) {
 /** @type {lastMessage} */
 let lastMessage = {};
 
+/**
+ * @param {HTMLElement} message
+ */
+function addMessageReply(message) {
+    let div = document.createElement('div');
+    div.classList.add('message-reply');
+    let icon = document.createElement('i');
+    icon.classList.add('fas');
+    icon.classList.add('fa-reply');
+    div.appendChild(icon);
+    message.appendChild(div);
+    div.onclick = function (e) {
+        e.preventDefault();
+        closeReplyMessage(); //if there is a reply box, cancel it
+        let msg = /** @type{HTMLElement} */
+            (message.querySelector('.message-content'));
+        if(!msg) {
+            displayWarning("Cannot reply to empty message!");
+            return;
+        }
+        let input = document.getElementById('input');
+        input.focus();
+
+        let box = document.getElementById('box');
+        let replybox = document.getElementById('replyto');
+        box.classList.add('box-reply');
+        replybox.classList.remove('invisible');
+
+        let reply = document.createElement('div');
+        reply.classList.add('reply-row');
+        let sender = /** @type{HTMLElement} */
+            (message.querySelector('.message-user'));
+        if(sender) {
+            let header = document.createElement('p');
+            header.innerText = sender.innerText + ' said:';
+            header.classList.add('reply-user');
+            reply.appendChild(header);
+        }
+        let messagebox = document.createElement('p');
+        messagebox.classList.add('reply-message');
+        let replytext = msg.innerText;
+        if(replytext.length > 100) {
+            replytext = replytext.slice(0, 100) + '...';
+        }
+        messagebox.innerText = replytext;
+        let span = document.createElement('span');
+        span.classList.add('reply-close');
+        let icon = document.createElement('i');
+        icon.classList.add('fas');
+        icon.classList.add('fa-times');
+        span.appendChild(icon);
+        reply.appendChild(messagebox);
+        reply.appendChild(span);
+        replybox.appendChild(reply);
+        span.onclick = closeReplyMessage;
+    };
+}
+
+function closeReplyMessage () {
+    let reply = document.getElementById('replyto');
+    let row = reply.querySelector('.reply-row');
+    let box = document.getElementById('box');
+    if(row) {
+        box.classList.remove('box-reply');
+        reply.classList.add('invisible');
+        row.remove();
+    }
+}
+
+
 /**
  * @param {string} peerId
  * @param {string} nick
@@ -1590,12 +1661,16 @@ function addToChatbox(peerId, dest, nick, time, priviledged, kind, message) {
     row.appendChild(container);
     let footer = document.createElement('p');
     footer.classList.add('message-footer');
+    let reply = false;
     if(!peerId)
         container.classList.add('message-system');
-    if(userpass.username === nick)
+    else if(userpass.username === nick)
         container.classList.add('message-sender');
-    if(dest)
+    else if(dest)
         container.classList.add('message-private');
+    else
+        // can reply if not sender, not private and not system
+        reply = true;
 
     if(kind !== 'me') {
         let p = formatLines(message.split('\n'));
@@ -1658,6 +1733,8 @@ function addToChatbox(peerId, dest, nick, time, priviledged, kind, message) {
         lastMessage = {};
     }
 
+    if(reply)
+        addMessageReply(row);
     let box = document.getElementById('box');
     box.appendChild(row);
     if(box.scrollHeight > box.clientHeight) {
@@ -2054,12 +2131,14 @@ function handleInput() {
 document.getElementById('inputform').onsubmit = function(e) {
     e.preventDefault();
     handleInput();
+    closeReplyMessage();
 };
 
 document.getElementById('input').onkeypress = function(e) {
     if(e.key === 'Enter' && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
         e.preventDefault();
         handleInput();
+        closeReplyMessage();
     }
 };