UI component refactor

src/components/UI/UIDetails/messageRenderer.vue

@@ -1,10 +1,10 @@
 <template>
-  <g id="cardsDiv">
+  <g id="messageRenderer">
     <g
       v-for="(item, index) in renderArr"
       :key="index"
       :id="index"
-      class="test"
+      class="messageList"
       transform="translate(0, 0)"
     >
       <transition
@@ -23,32 +23,27 @@
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
 import { defineComponent, reactive, ref, inject } from "vue";
 import MessageItem from "./messageItem.vue";
-import Messages from "./messages";
 import { Message } from "@/types/message/index";
+import { Mitt } from "@/types/mitt/index";
 export default defineComponent({
   name: "MessageRenderer",
   components: { MessageItem },
   setup() {
-    const emitter: any = inject("mitt");
     const renderArr: Message[] = reactive([]);
-    const messages = Messages;
-    const count = ref(0);
+
+    // imports mitt Emitter safely
+    let emitter: Mitt;
+    const emitterInject: Mitt | undefined = inject("mitt");
+    if (emitterInject) {
+      emitter = emitterInject;
+      emitter.on("renderMessage", (payload: Message | undefined) => {
+        if (payload) renderArr.push(payload);
+      });
+    }
 
     const { beforeEnter, enter, afterEnter } = useMessageRenderer();
 
-    emitter.on("renderMessage", (payload: any) => {
-      renderArr.push(payload);
-    });
-    function renderMessage() {
-      if (count.value < messages.length) {
-        renderArr.push(messages[count.value]);
-        count.value++;
-        return;
-      }
-    }
-
     return {
-      renderMessage,
       renderArr,
       beforeEnter,
       enter,