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 {