Feature: Typing Indicator on widget and dashboard (#811)

* Adds typing indicator for widget
* typing indicator for agents in dashboard

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -27,10 +27,22 @@
         :data="message"
       />
     </ul>
-    <ReplyBox
-      :conversation-id="currentChat.id"
-      @scrollToMessage="focusLastMessage"
-    />
+    <div class="conversation-footer">
+      <div v-if="isAnyoneTyping" class="typing-indicator-wrap">
+        <div class="typing-indicator">
+          {{ typingUserNames }}
+          <img
+            class="gif"
+            src="~dashboard/assets/images/typing.gif"
+            alt="Someone is typing"
+          />
+        </div>
+      </div>
+      <ReplyBox
+        :conversation-id="currentChat.id"
+        @scrollToMessage="focusLastMessage"
+      />
+    </div>
   </div>
 </template>
 
@@ -42,6 +54,7 @@ import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
+import { getTypingUsersText } from '../../../helper/commons';
 
 export default {
   components: {
@@ -81,6 +94,27 @@ export default {
       loadingChatList: 'getChatListLoadingStatus',
     }),
 
+    typingUsersList() {
+      const userList = this.$store.getters[
+        'conversationTypingStatus/getUserList'
+      ](this.currentChat.id);
+      return userList;
+    },
+    isAnyoneTyping() {
+      const userList = this.typingUsersList;
+      return userList.length !== 0;
+    },
+    typingUserNames() {
+      const userList = this.typingUsersList;
+
+      if (this.isAnyoneTyping) {
+        const userListAsName = getTypingUsersText(userList);
+        return userListAsName;
+      }
+
+      return '';
+    },
+
     getMessages() {
       const [chat] = this.allConversations.filter(
         c => c.id === this.currentChat.id

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -20,8 +20,8 @@
         class="input"
         type="text"
         :placeholder="$t(messagePlaceHolder())"
-        @click="onClick()"
-        @blur="onBlur()"
+        @focus="onFocus"
+        @blur="onBlur"
       />
       <file-upload
         v-if="showFileUpload"
@@ -260,25 +260,16 @@ export default {
     onBlur() {
       this.toggleTyping('off');
     },
-    onClick() {
-      this.markSeen();
+    onFocus() {
       this.toggleTyping('on');
     },
-    markSeen() {
-      if (this.channelType === 'Channel::FacebookPage') {
-        this.$store.dispatch('markSeen', {
-          inboxId: this.currentChat.inbox_id,
-          contactId: this.currentChat.meta.sender.id,
-        });
-      }
-    },
 
     toggleTyping(status) {
-      if (this.channelType === 'Channel::FacebookPage') {
+      if (this.channelType === 'Channel::WebWidget' && !this.isPrivate) {
+        const conversationId = this.currentChat.id;
         this.$store.dispatch('toggleTyping', {
           status,
-          inboxId: this.currentChat.inbox_id,
-          contactId: this.currentChat.meta.sender.id,
+          conversationId,
         });
       }
     },