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 {

app/javascript/dashboard/helper/commons.js

@@ -9,3 +9,20 @@ export default () => {
     });
   }
 };
+
+export const getTypingUsersText = (users = []) => {
+  const count = users.length;
+  if (count === 1) {
+    const [user] = users;
+    return `${user.name} is typing`;
+  }
+
+  if (count === 2) {
+    const [first, second] = users;
+    return `${first.name} and ${second.name} are typing`;
+  }
+
+  const [user] = users;
+  const rest = users.length - 1;
+  return `${user.name} and ${rest} others are typing`;
+};

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -0,0 +1,26 @@
+import { getTypingUsersText } from '../commons';
+
+describe('#getTypingUsersText', () => {
+  it('returns the correct text is there is only one typing user', () => {
+    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual(
+      'Pranav is typing'
+    );
+  });
+
+  it('returns the correct text is there are two typing users', () => {
+    expect(
+      getTypingUsersText([{ name: 'Pranav' }, { name: 'Nithin' }])
+    ).toEqual('Pranav and Nithin are typing');
+  });
+
+  it('returns the correct text is there are more than two users are typing', () => {
+    expect(
+      getTypingUsersText([
+        { name: 'Pranav' },
+        { name: 'Nithin' },
+        { name: 'Subin' },
+        { name: 'Sojan' },
+      ])
+    ).toEqual('Pranav and 3 others are typing');
+  });
+});