From f397c0c087aacd9db78c15d915d65c8234802d69 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Fri, 27 Nov 2020 00:17:55 +0530
Subject: [PATCH] chore: Send typing events on keyup, not on focus (#1461)

---
 .../widgets/conversation/ReplyBox.vue         | 10 +++++--
 .../shared/components/ResizableTextArea.vue   | 29 +++++++++++++++++++
 .../widget/components/ChatInputWrap.vue       |  8 ++---
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index ba55a8a78..3c418f655 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -19,6 +19,8 @@
         class="input"
         :placeholder="messagePlaceHolder"
         :min-height="4"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -298,13 +300,17 @@ export default {
     hideCannedResponse() {
       this.showCannedResponsesList = false;
     },
+    onTypingOn() {
+      this.toggleTyping('on');
+    },
+    onTypingOff() {
+      this.toggleTyping('off');
+    },
     onBlur() {
       this.isFocused = false;
-      this.toggleTyping('off');
     },
     onFocus() {
       this.isFocused = true;
-      this.toggleTyping('on');
     },
     toggleTyping(status) {
       if (this.isAWebWidgetInbox && !this.isPrivate) {
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index c0547aba0..402ec0298 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -5,11 +5,14 @@
     :value="value"
     @input="onInput"
     @focus="onFocus"
+    @keyup="onKeyup"
     @blur="onBlur"
   />
 </template>
 
 <script>
+const TYPING_INDICATOR_IDLE_TIME = 4000;
+
 export default {
   props: {
     placeholder: {
@@ -25,6 +28,11 @@ export default {
       default: 2,
     },
   },
+  data() {
+    return {
+      idleTimer: null,
+    };
+  },
   watch: {
     value() {
       this.resizeTextarea();
@@ -42,7 +50,28 @@ export default {
       this.$emit('input', event.target.value);
       this.resizeTextarea();
     },
+    resetTyping() {
+      this.$emit('typing-off');
+      this.idleTimer = null;
+    },
+    turnOffIdleTimer() {
+      if (this.idleTimer) {
+        clearTimeout(this.idleTimer);
+      }
+    },
+    onKeyup() {
+      if (!this.idleTimer) {
+        this.$emit('typing-on');
+      }
+      this.turnOffIdleTimer();
+      this.idleTimer = setTimeout(
+        () => this.resetTyping(),
+        TYPING_INDICATOR_IDLE_TIME
+      );
+    },
     onBlur() {
+      this.turnOffIdleTimer();
+      this.resetTyping();
       this.$emit('blur');
     },
     onFocus() {
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 53bf55328..6c41630eb 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -4,8 +4,8 @@
       v-model="userInput"
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input"
-      @focus="onFocus"
-      @blur="onBlur"
+      @typing-off="onTypingOff"
+      @typing-on="onTypingOn"
     />
     <div class="button-wrap">
       <chat-attachment-button
@@ -111,10 +111,10 @@ export default {
     emojiOnClick(emoji) {
       this.userInput = `${this.userInput}${emoji} `;
     },
-    onBlur() {
+    onTypingOff() {
       this.toggleTyping('off');
     },
-    onFocus() {
+    onTypingOn() {
       this.toggleTyping('on');
     },
     toggleTyping(typingStatus) {