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/helper/actionCable.js

@@ -4,6 +4,7 @@ import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnec
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
     super(app, pubsubToken);
+    this.CancelTyping = [];
     this.events = {
       'message.created': this.onMessageCreated,
       'message.updated': this.onMessageUpdated,
@@ -13,6 +14,8 @@ class ActionCableConnector extends BaseActionCableConnector {
       'user:logout': this.onLogout,
       'page:reload': this.onReload,
       'assignee.changed': this.onAssigneeChanged,
+      'conversation.typing_on': this.onTypingOn,
+      'conversation.typing_off': this.onTypingOff,
     };
   }
 
@@ -43,6 +46,44 @@ class ActionCableConnector extends BaseActionCableConnector {
   onStatusChange = data => {
     this.app.$store.dispatch('updateConversation', data);
   };
+
+  onTypingOn = ({ conversation, user }) => {
+    const conversationId = conversation.id;
+
+    this.clearTimer(conversationId);
+    this.app.$store.dispatch('conversationTypingStatus/create', {
+      conversationId,
+      user,
+    });
+    this.initTimer({ conversation, user });
+  };
+
+  onTypingOff = ({ conversation, user }) => {
+    const conversationId = conversation.id;
+
+    this.clearTimer(conversationId);
+    this.app.$store.dispatch('conversationTypingStatus/destroy', {
+      conversationId,
+      user,
+    });
+  };
+
+  clearTimer = conversationId => {
+    const timerEvent = this.CancelTyping[conversationId];
+
+    if (timerEvent) {
+      clearTimeout(timerEvent);
+      this.CancelTyping[conversationId] = null;
+    }
+  };
+
+  initTimer = ({ conversation, user }) => {
+    const conversationId = conversation.id;
+    // Turn off typing automatically after 30 seconds
+    this.CancelTyping[conversationId] = setTimeout(() => {
+      this.onTypingOff({ conversation, user });
+    }, 30000);
+  };
 }
 
 export default {