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/components/AgentTypingBubble.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="agent-message-wrap">
+    <div class="agent-message">
+      <div class="avatar-wrap"></div>
+      <div class="message-wrap">
+        <div class="typing-bubble chat-bubble agent">
+          <img
+            src="~widget/assets/images/typing.gif"
+            alt="Agent is typing a message"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentTypingBubble',
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.typing-bubble {
+  max-width: $space-medium;
+  padding: $space-smaller $space-small;
+  border-bottom-left-radius: $space-two;
+  border-top-left-radius: $space-small;
+
+  img {
+    width: 100%;
+  }
+}
+</style>

app/javascript/widget/components/ChatInputArea.vue

@@ -5,6 +5,8 @@
       :placeholder="placeholder"
       :value="value"
       @input="$emit('input', $event.target.value)"
+      @focus="onFocus"
+      @blur="onBlur"
     />
   </resizable-textarea>
 </template>
@@ -17,8 +19,25 @@ export default {
     ResizableTextarea,
   },
   props: {
-    placeholder: String,
-    value: String,
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onBlur() {
+      this.toggleTyping('off');
+    },
+    onFocus() {
+      this.toggleTyping('on');
+    },
+    toggleTyping(typingStatus) {
+      this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
+    },
   },
 };
 </script>

app/javascript/widget/components/ConversationWrap.vue

@@ -1,23 +1,29 @@
 <template>
   <div class="conversation--container">
-    <div class="conversation-wrap">
+    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
         <spinner></spinner>
       </div>
-      <div v-for="groupedMessage in groupedMessages" :key="groupedMessage.date">
+      <div
+        v-for="groupedMessage in groupedMessages"
+        :key="groupedMessage.date"
+        class="messages-wrap"
+      >
         <date-separator :date="groupedMessage.date"></date-separator>
-        <ChatMessage
+        <chat-message
           v-for="message in groupedMessage.messages"
           :key="message.id"
           :message="message"
         />
       </div>
+      <agent-typing-bubble v-if="isAgentTyping" />
     </div>
   </div>
 </template>
 
 <script>
 import ChatMessage from 'widget/components/ChatMessage.vue';
+import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
 import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import { mapActions, mapGetters } from 'vuex';
@@ -26,6 +32,7 @@ export default {
   name: 'ConversationWrap',
   components: {
     ChatMessage,
+    AgentTypingBubble,
     DateSeparator,
     Spinner,
   },
@@ -44,6 +51,7 @@ export default {
       allMessagesLoaded: 'conversation/getAllMessagesLoaded',
       isFetchingList: 'conversation/getIsFetchingList',
       conversationSize: 'conversation/getConversationSize',
+      isAgentTyping: 'conversation/getIsAgentTyping',
     }),
   },
   watch: {
@@ -109,3 +117,15 @@ export default {
   text-align: center;
 }
 </style>
+<style lang="scss">
+.conversation-wrap.is-typing .messages-wrap div:last-child {
+  .agent-message {
+    .agent-name {
+      display: none;
+    }
+    .user-thumbnail-box {
+      margin-top: 0;
+    }
+  }
+}
+</style>