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/widget/store/modules/conversation.js

@@ -4,6 +4,7 @@ import {
   sendMessageAPI,
   getConversationAPI,
   sendAttachmentAPI,
+  toggleTyping,
 } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
@@ -36,11 +37,13 @@ const state = {
   uiFlags: {
     allMessagesLoaded: false,
     isFetchingList: false,
+    isAgentTyping: false,
   },
 };
 
 export const getters = {
   getAllMessagesLoaded: _state => _state.uiFlags.allMessagesLoaded,
+  getIsAgentTyping: _state => _state.uiFlags.isAgentTyping,
   getConversation: _state => _state.conversations,
   getConversationSize: _state => Object.keys(_state.conversations).length,
   getEarliestMessage: _state => {
@@ -132,6 +135,18 @@ export const actions = {
   updateMessage({ commit }, data) {
     commit('pushMessageToConversation', data);
   },
+
+  toggleAgentTyping({ commit }, data) {
+    commit('toggleAgentTypingStatus', data);
+  },
+
+  toggleUserTyping: async (_, data) => {
+    try {
+      await toggleTyping(data);
+    } catch (error) {
+      // console error
+    }
+  },
 };
 
 export const mutations = {
@@ -192,6 +207,11 @@ export const mutations = {
       },
     };
   },
+
+  toggleAgentTypingStatus($state, { status }) {
+    const isTyping = status === 'on';
+    $state.uiFlags.isAgentTyping = isTyping;
+  },
 };
 
 export default {

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -33,6 +33,15 @@ describe('#actions', () => {
     });
   });
 
+  describe('#toggleAgentTyping', () => {
+    it('sends correct mutations', () => {
+      actions.toggleAgentTyping({ commit }, { status: true });
+      expect(commit).toBeCalledWith('toggleAgentTypingStatus', {
+        status: true,
+      });
+    });
+  });
+
   describe('#sendMessage', () => {
     it('sends correct mutations', () => {
       const mockDate = new Date(1466424490000);

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -48,10 +48,12 @@ describe('#getters', () => {
       uiFlags: {
         allMessagesLoaded: false,
         isFetchingList: false,
+        isAgentTyping: false,
       },
     };
     expect(getters.getAllMessagesLoaded(state)).toEqual(false);
     expect(getters.getIsFetchingList(state)).toEqual(false);
+    expect(getters.getIsAgentTyping(state)).toEqual(false);
   });
 
   it('uiFlags', () => {

app/javascript/widget/store/modules/specs/conversation/mutations.spec.js

@@ -93,6 +93,20 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#toggleAgentTypingStatus', () => {
+    it('sets isAgentTyping flag to true', () => {
+      const state = { uiFlags: { isAgentTyping: false } };
+      mutations.toggleAgentTypingStatus(state, { status: 'on' });
+      expect(state.uiFlags.isAgentTyping).toEqual(true);
+    });
+
+    it('sets isAgentTyping flag to false', () => {
+      const state = { uiFlags: { isAgentTyping: false } };
+      mutations.toggleAgentTypingStatus(state, { status: 'off' });
+      expect(state.uiFlags.isAgentTyping).toEqual(false);
+    });
+  });
+
   describe('#updateAttachmentMessageStatus', () => {
     it('Updates status of loading messages if payload is not empty', () => {
       const state = {