Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/v3/components/SnackBar/Container.vue

@@ -0,0 +1,55 @@
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import SnackbarItem from './Item.vue';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  components: { SnackbarItem },
+  props: {
+    duration: {
+      type: Number,
+      default: 2500,
+    },
+  },
+
+  data() {
+    return {
+      snackbarAlertMessages: [],
+    };
+  },
+
+  mounted() {
+    emitter.on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  unmounted() {
+    emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  methods: {
+    onNewToastMessage({ message, action }) {
+      this.snackbarAlertMessages.push({
+        key: new Date().getTime(),
+        message,
+        action,
+      });
+      window.setTimeout(() => {
+        this.snackbarAlertMessages.splice(0, 1);
+      }, this.duration);
+    },
+  },
+};
+</script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <SnackbarItem
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>