feat: Adds keyboard shortcuts for conversation actions (#2672)

* feat: Adds keyboard shortcuts for conversation actions

* Minor fixes

* Minor fixes

* Minor fixes and add new shortcut

* MInor fixes

* Review fixes

* Minor fixes

* Code cleanup

* Minor fixes

* Uses Alt or Option key instead of shift-key

* Review fixes

* Review fixes

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -74,6 +74,7 @@
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 
 import EmojiInput from 'shared/components/emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
@@ -105,7 +106,13 @@ export default {
     ReplyBottomPanel,
     WootMessageEditor,
   },
-  mixins: [clickaway, inboxMixin, uiSettingsMixin, alertMixin],
+  mixins: [
+    clickaway,
+    inboxMixin,
+    uiSettingsMixin,
+    alertMixin,
+    eventListenerMixins,
+  ],
   props: {
     selectedTweet: {
       type: [Object, String],
@@ -289,12 +296,6 @@ export default {
       }
     },
   },
-  mounted() {
-    document.addEventListener('keydown', this.handleKeyEvents);
-  },
-  destroyed() {
-    document.removeEventListener('keydown', this.handleKeyEvents);
-  },
   methods: {
     toggleUserMention(currentMentionState) {
       this.hasUserMention = currentMentionState;
@@ -353,6 +354,9 @@ export default {
       if (this.showRichContentEditor) {
         return;
       }
+      if (this.$refs.messageInput === undefined) {
+        return;
+      }
       this.$nextTick(() => this.$refs.messageInput.focus());
     },
     emojiOnClick(emoji) {