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,35 +2189,67 @@ function setSenderImage(set_sender_image_object)
 /* exported showTypingIndicator */
 function showTypingIndicator(contactUri, isTyping) {
 
-    var message_div = messages.lastChild.querySelector("#message_typing")
-    if (isTyping === 0) {
-        if (message_div) {
-            message_div.parentNode.removeChild(message_div)
-        }
-    } else if (!message_div) {
-        message_div = buildNewMessage({
-            "id":"typing",
-            "type":"text",
-            "text":"",
-            "direction":"in",
-            "delivery_status":"",
-            "sender_contact_method": contactUri
-        })
-
-        var previousMessage = messages.lastChild.lastChild
-        messages.lastChild.appendChild(message_div)
-        computeSequencing(previousMessage, message_div, null, true)
-        if (previousMessage) {
-            previousMessage.classList.remove("last_message")
-        }
-        message_div.classList.add("last_message")
-        let msg_text = message_div.querySelector(".message_text")
-        msg_text.innerHTML = " \
-                        <div class=\"typing-indicator\"> \
-                            <span></span> \
-                            <span></span> \
-                            <span></span> \
-                        </div>"
+    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)
+            }
+        } else if (!message_div) {
+            message_div = buildNewMessage({
+                "id":"typing",
+                "type":"text",
+                "text":"",
+                "direction":"in",
+                "delivery_status":"",
+                "sender_contact_method": contactUri
+            })
+
+            var previousMessage = messages.lastChild.lastChild
+            messages.lastChild.appendChild(message_div)
+            computeSequencing(previousMessage, message_div, null, true)
+            if (previousMessage) {
+                previousMessage.classList.remove("last_message")
+            }
+            message_div.classList.add("last_message")
+            let msg_text = message_div.querySelector(".message_text")
+            msg_text.innerHTML = " \
+                            <div class=\"typing-indicator\"> \
+                                <span></span> \
+                                <span></span> \
+                                <span></span> \
+                            </div>"
+        }
     }
     updateMesPos()
 }