chore: Replace eventBus with mitt.js [CW-3275] (#9539)

# Replace the deprecated `eventBus` with mitt.js

## Description

Since eventBus and it's respective methods are deprecated and removed
from all future releases of vue, this was blocking us from migrating.
This PR replaces eventBus with
[mitt](https://github.com/developit/mitt). I have created a wrapper
mitt.js to simulate the same old event names so it's backwards
compatible, without making a lot of changes.


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

1. Made sure all the places we're listening to bus events are working as
expected.
2. Respective specsf or the events from mitt.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

app/javascript/widget/components/AgentMessage.vue

@@ -93,6 +93,7 @@ import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';
 
 export default {
   name: 'AgentMessage',
@@ -224,7 +225,7 @@ export default {
       this.hasImageError = true;
     },
     toggleReply() {
-      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+      emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
     },
   },
 };

app/javascript/widget/components/Banner.vue

@@ -8,6 +8,7 @@
 
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';
 
 export default {
   data() {
@@ -18,7 +19,7 @@ export default {
     };
   },
   mounted() {
-    bus.$on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
+    emitter.on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
       this.bannerMessage = message;
       this.bannerType = type;
       this.showBannerMessage = true;

app/javascript/widget/components/ChatAttachment.vue

@@ -96,7 +96,7 @@ export default {
 
           upload.create((error, blob) => {
             if (error) {
-              window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+              this.$emitter.emit(BUS_EVENTS.SHOW_ALERT, {
                 message: error,
               });
             } else {
@@ -107,7 +107,7 @@ export default {
             }
           });
         } else {
-          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+          this.$emitter.emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('FILE_SIZE_LIMIT', {
               MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
             }),
@@ -130,7 +130,7 @@ export default {
             ...this.getLocalFileAttributes(file),
           });
         } else {
-          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+          this.$emitter.emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('FILE_SIZE_LIMIT', {
               MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
             }),

app/javascript/widget/components/ChatFooter.vue

@@ -147,12 +147,12 @@ export default {
       if (this.hasEmail) {
         try {
           await sendEmailTranscript();
-          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+          this.$emitter.emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
             type: 'success',
           });
         } catch (error) {
-          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+          this.$emitter.$emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'),
           });
         }