diff --git a/src/web-chatview/chatview-windows.css b/src/web-chatview/chatview-windows.css index 90c0775f8a957bf3e86033aa112a418f4e2692df..1d574e3a5fd903bb95d524c00453122a244b3c86 100644 --- a/src/web-chatview/chatview-windows.css +++ b/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; +} diff --git a/src/web-chatview/chatview.html b/src/web-chatview/chatview.html index 05c9f1db2633bc286d11df981ec4ae12a20e1d77..068cfafc9be759005486e1c0d92ce7a15e0b5840 100644 --- a/src/web-chatview/chatview.html +++ b/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 ▼</div> </div> diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js index 1f4ca43cc7e5e8ac75e2ae2b96cb399dd4db0343..37646b6de53405b0e982fb42bc8bfa9cb2e8b124 100644 --- a/src/web-chatview/chatview.js +++ b/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() }