add input item to UI index

src/components/UI/UIDetails/messageItem.vue

@@ -72,10 +72,11 @@ import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
       const contentTag = ref(`content${msgID.value}`);
       let bubble: any;
       let content: any;
+      console.log(props)
 
       const textFill = computed(() => {
         switch (props.item.modifier) {
-          case "ai":
+          case "ai" || "sf":
             return "#fff";
           default:
             return "#000";

src/components/UI/index.vue

@@ -84,18 +84,13 @@
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, reactive } from "vue";
- import MessageItem from './UIDetails/messageItem.vue';
- import Messages from "./UIDetails/messages";
- export default defineComponent({
+import MessageItem from './UIDetails/messageItem.vue';
+import InputItem from "@/components/UI/UIDetails/inputItem.vue";
+import Messages from "./UIDetails/messages";
+export default defineComponent({
   name: 'UIindex',
-   components: { MessageItem },
+  components: { MessageItem, InputItem },
   setup() {
-
-      interface ProtectedRef {
-        readonly el: SVGElement | HTMLElement;
-        reference: any;
-        height: number | null;
-      }
       const anime: object | any = inject('animejs');
       const timeline: typeof anime = anime.timeline({ loop: true });
       const renderArr: Message[] = reactive([])
@@ -186,7 +181,6 @@ import { defineComponent, inject, onMounted, reactive } from "vue";
           runAnim();
       });
       return {
-           // timeline,
           renderArr,
           msgOffset,
           beforeEnter,
@@ -194,7 +188,7 @@ import { defineComponent, inject, onMounted, reactive } from "vue";
           leave
       }
   },
- });
+});
 </script>
 
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -1,25 +1,18 @@
 <template>
-    <!-- <UIindex />
-         <Microphone /> -->
-    <InputItem />
-
+    <UIindex />
 </template>
 
 <script lang="ts">
- import { defineComponent, inject } from 'vue';
- // import UIindex from "@/components/UI/index.vue";
- // import Microphone from "@/components/microphone/index.vue";
- import InputItem from "@/components/UI/UIDetails/inputItem.vue";
+import { defineComponent, inject } from 'vue';
+import UIindex from "@/components/UI/index.vue";
+// import Microphone from "@/components/microphone/index.vue";
 
- export default defineComponent({
+export default defineComponent({
   name: "HomeIndex",
-     components: { InputItem },
+  components: { UIindex },
   setup() {
     const emitter: any = inject("mitt");
     emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
   }
- });
-
+});
 </script>
-
-<style></style>