refactor: handling keyboard shortcuts (#9242)

* fix: Resolve and go next keyboard shortcuts doesn't work

* refactor: use buildHotKeys instead of  hasPressedCommandPlusAltAndEKey

* feat: install tinykeys

* refactor: use tinykeys

* test: update buildKeyEvents

* fix: remove stray import

* feat: handle action list globally

* feat: allow configuring `allowOnFocusedInput`

* chore: Navigate chat list item

* chore: Navigate dashboard

* feat: Navigate editor top panel

* feat: Toggle file upload

* chore: More keyboard shortcuts

* chore: Update mention selection mixin

* chore: Phone input

* chore: Clean up

* chore: Clean up

* chore: Dropdown and editor

* chore: Enter key to send and clean up

* chore: Rename mixin

* chore: Review fixes

* chore: Removed unused shortcut from modal

* fix: Specs

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/superadmin_pages/views/playground/Index.vue

@@ -33,8 +33,8 @@
 </template>
 
 <script>
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import Header from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
@@ -47,7 +47,7 @@ export default {
     BotMessage,
     TypingIndicator,
   },
-  mixins: [messageFormatterMixin],
+  mixins: [messageFormatterMixin, keyboardEventListenerMixins],
   props: {
     componentData: {
       type: Object,
@@ -67,17 +67,17 @@ export default {
   },
   mounted() {
     this.focusInput();
-    document.addEventListener('keydown', this.handleKeyEvents);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleKeyEvents);
   },
   methods: {
-    handleKeyEvents(e) {
-      const keyCode = buildHotKeys(e);
-      if (['meta+enter', 'ctrl+enter'].includes(keyCode)) {
-        this.onMessageSend();
-      }
+    getKeyboardEvents() {
+      return {
+        '$mod+Enter': {
+          action: () => {
+            this.onMessageSend();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
     focusInput() {
       this.$refs.messageInput.focus();