From 78fab7897dfd7df05339b1154f7e115b3e86675e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Dec 2023 13:47:41 +0530
Subject: [PATCH] feat: Use typing status from utils (#8589)

---
 .../components/widgets/WootWriter/Editor.vue  | 35 ++++++++-----------
 .../shared/components/ResizableTextArea.vue   | 32 +++++++----------
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++---
 4 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 33bca2e68..625fda78e 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -84,7 +84,10 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
-import { replaceVariablesInMessage } from '@chatwoot/utils';
+import {
+  replaceVariablesInMessage,
+  createTypingIndicator,
+} from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
@@ -140,6 +143,15 @@ export default {
   },
   data() {
     return {
+      typingIndicator: createTypingIndicator(
+        () => {
+          this.$emit('typing-on');
+        },
+        () => {
+          this.$emit('typing-off');
+        },
+        TYPING_INDICATOR_IDLE_TIME
+      ),
       showUserMentions: false,
       showCannedMenu: false,
       showVariables: false,
@@ -638,15 +650,6 @@ export default {
     hideMentions() {
       this.showUserMentions = false;
     },
-    resetTyping() {
-      this.$emit('typing-off');
-      this.idleTimer = null;
-    },
-    turnOffIdleTimer() {
-      if (this.idleTimer) {
-        clearTimeout(this.idleTimer);
-      }
-    },
     handleLineBreakWhenEnterToSendEnabled(event) {
       if (
         hasPressedEnterAndNotCmdOrShift(event) &&
@@ -666,14 +669,7 @@ export default {
       }
     },
     onKeyup() {
-      if (!this.idleTimer) {
-        this.$emit('typing-on');
-      }
-      this.turnOffIdleTimer();
-      this.idleTimer = setTimeout(
-        () => this.resetTyping(),
-        TYPING_INDICATOR_IDLE_TIME
-      );
+      this.typingIndicator.start();
       this.updateImgToolbarOnDelete();
     },
     onKeydown(event) {
@@ -685,8 +681,7 @@ export default {
       }
     },
     onBlur() {
-      this.turnOffIdleTimer();
-      this.resetTyping();
+      this.typingIndicator.stop();
       this.$emit('blur');
     },
     onFocus() {
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index bb3935f57..ddda31585 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -17,6 +17,7 @@ import {
   removeSignature,
   extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
+import { createTypingIndicator } from '@chatwoot/utils';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 export default {
@@ -54,7 +55,15 @@ export default {
   },
   data() {
     return {
-      idleTimer: null,
+      typingIndicator: createTypingIndicator(
+        () => {
+          this.$emit('typing-on');
+        },
+        () => {
+          this.$emit('typing-off');
+        },
+        TYPING_INDICATOR_IDLE_TIME
+      ),
     };
   },
   computed: {
@@ -137,28 +146,11 @@ 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
-      );
+      this.typingIndicator.start();
     },
     onBlur() {
-      this.turnOffIdleTimer();
-      this.resetTyping();
+      this.typingIndicator.stop();
       this.$emit('blur');
     },
     onFocus() {
diff --git a/package.json b/package.json
index fee47493e..b66405bd0 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
     "@chatwoot/prosemirror-schema": "1.0.3",
-    "@chatwoot/utils": "^0.0.20",
+    "@chatwoot/utils": "^0.0.21",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^1.36.5",
     "@radix-ui/colors": "^1.0.1",
diff --git a/yarn.lock b/yarn.lock
index d0fdf4d50..81cfe8f50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3177,10 +3177,10 @@
     prosemirror-utils "^0.9.6"
     prosemirror-view "^1.17.2"
 
-"@chatwoot/utils@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@chatwoot/utils/-/utils-0.0.20.tgz#d7cb407da434efcce4262178dbef55441f218489"
-  integrity sha512-rChMLxxbtzDpS2wePhnsdu+NDfRWbV+9Jw9eZ34jQRxkQ4LYVUoj6z5gC7a5+3izZQZ1XEwDSPHIiIvIUX4tzg==
+"@chatwoot/utils@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@chatwoot/utils/-/utils-0.0.21.tgz#f9116daac0514a8a8fa6ce594efff10062222be0"
+  integrity sha512-eUDJ1K5x1rFlBywRctU3hXXiJ1U0EZiklowNl/YJOh1/BWDns4It3DWrQmAcjvsNbEUNWMfY+ShJmjdeei71Cw==
   dependencies:
     date-fns "^2.29.1"