chatview: add typing indicator div for qt client to avoid recomputing message sequence

Change-Id: I44e3ee88b928178164b12818e4259b32012f97b5

src/web-chatview/chatview-windows.css

@@ -238,3 +238,9 @@ pre {
     font-family: Verdana;
     color: #c0c0c0;
 }
+
+#typing_indicator_container {
+    display: none;
+    padding-bottom: 1.5em !important;
+    margin-top: 4px;
+}

src/web-chatview/chatview.html

@@ -87,6 +87,8 @@
     <div id="container">
         <div id="messages" onscroll="onScrolled()"></div>
 
+        <div id="typing_indicator_container"></div>
+
         <div id="back_to_bottom_button_container">
             <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
         </div>

src/web-chatview/chatview.js

@@ -2189,7 +2189,38 @@ function setSenderImage(set_sender_image_object)
 /* exported showTypingIndicator */
 function showTypingIndicator(contactUri, isTyping) {
 
+    if (use_qt) {
+        var typing_indicator_container_div = document.getElementById("typing_indicator_container")
+
+        if (isTyping === 0) {
+            typing_indicator_container_div.style.display = "none";
+        } else if (typing_indicator_container_div.style.display !== "block") {
+            typing_indicator_container_div.style.display = "block";
+            var message_div = typing_indicator_container_div.querySelector("#message_typing")
+
+            if (!message_div){
+                message_div = buildNewMessage({
+                    "id":"typing",
+                    "type":"text",
+                    "text":"",
+                    "direction":"in",
+                    "delivery_status":"",
+                    "sender_contact_method": contactUri
+                })
+                message_div.classList.add("single_message")
+                let msg_text = message_div.querySelector(".message_text")
+                msg_text.innerHTML = " \
+                                <div class=\"typing-indicator\"> \
+                                    <span></span> \
+                                    <span></span> \
+                                    <span></span> \
+                                </div>"
+                typing_indicator_container_div.appendChild(message_div)
+            }
+        }
+    } else {
         var message_div = messages.lastChild.querySelector("#message_typing")
+
         if (isTyping === 0) {
             if (message_div) {
                 message_div.parentNode.removeChild(message_div)
@@ -2219,6 +2250,7 @@ function showTypingIndicator(contactUri, isTyping) {
                                 <span></span> \
                             </div>"
         }
+    }
     updateMesPos()
 }