UI component refactor

src/components/UI/UIDetails/messageItem.vue

@@ -23,8 +23,8 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, reactive } from "vue";
-import useMessageItemComp from "@/composables/computed/useMessageItemComp";
-import useMessageItemAnims from "@/composables/anims/useMessageItemAnims";
+import useMessageItemComp from "@/composables/messageItem/useMessageItemComp";
+import useMessageItemAnims from "@/composables/messageItem/useMessageItemAnims";
 import useTextWrap from "@/composables/textWrap/useTextWrap";
 export default defineComponent({
   name: "MessageItem",

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,

src/components/UI/index.vue

@@ -14,15 +14,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, inject } from "vue";
 import AI from "../AI/index.vue";
+import MessageRenderer from "./UIDetails/messageRenderer.vue";
 import InputItem from "./UIDetails/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
-import MessageRenderer from "./UIDetails/messageRenderer.vue";
 import { Mitt } from "@/types/mitt/index";
+import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
-  name: "UIindex",
+  name: "UI",
   components: { AI, MessageRenderer, InputItem, TitleBar },
   setup() {
     const messages = Messages;