add async text messages

src/components/home/messageVisualizer/index.vue

@@ -31,24 +31,43 @@ import useMessageVisualizer from "./viewDetails/visualizer";
 import useScrollView from "@/modules/scrollView";
 import MessageItem from "../messageBubble/index.vue";
 import { Message } from "@/types/message/index";
-import { Mitt } from "@/types/mitt/index";
-import { defineComponent, reactive, inject } from "vue";
+import {onMounted, defineComponent, reactive, inject, ref, watch, onUnmounted } from "vue";
+import useMitt from '@/modules/mitt';
+import { useIpc } from '@/modules/ipc';
 
 export default defineComponent({
   name: "MessageVisualizer",
   components: { MessageItem },
   setup() {
     const renderArr: Message[] = reactive([]);
+    const { emitter } = useMitt();
+    const { data, invoke } = useIpc('async-message')
+    const rendering = ref(false)
 
-    // 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);
-      });
-    }
+    onMounted(() => {
+
+        emitter.on("renderMessage", (payload: Message | undefined) => {
+          console.log('render ai message', payload)
+          if (payload) renderArr.push(payload);
+        });
+
+        emitter.on("animateSend", async (message) => {
+            console.log('caught message to send', message);
+            rendering.value = true;
+            try {
+                await invoke(message);
+                renderArr.push(data.value);
+            } catch(e) {
+                console.log('No response. Do not render.')
+            }
+            rendering.value = true;
+        })
+
+    })
+
+    onUnmounted(() => {
+        emitter.all.clear();
+    })
 
     const { beforeEnter, enter, afterEnter } = useMessageVisualizer();
     const { scrollView } = useScrollView({

src/components/home/messageVisualizer/viewDetails/visualizer.ts

@@ -3,7 +3,7 @@ import useMessageViewAnims from "./anime";
 import useOffsetCalculator from './offsetCalculator';
 
 /**
- * handles visualization of view messages through 
+ * handles visualization of view messages through
  * vue transition callbacks and anime-js animations
  */
 export default function useMessageVisualizer(): {
@@ -34,6 +34,7 @@ export default function useMessageVisualizer(): {
 
     const beforeEnter: VueTransitionCallback = () => {
         const queryResult = document.querySelectorAll(".messageList");
+        console.log(queryResult)
         if (queryResult.length) messageList = queryResult;
     }
 
@@ -54,7 +55,7 @@ export default function useMessageVisualizer(): {
             if (shift) {
 
                 console.log(messageOffset.y)
-                if (messageOffset.y < 445) {
+                if (messageOffset.y < 445 && messageOffset.y < 500) {
                     shiftOffset -= 15;
                 } else {
                     shiftOffset -= el.getBBox().height + messagePadding;

src/components/taInput/inputController.ts

@@ -17,9 +17,7 @@ export default function useInputController() {
     const paths = ref([]);
     const audioBubbleWidth = ref(10);
     let stream: MediaStream;
-
-    const emitter: any = inject("mitt");
-    const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
+     const emitter: any = inject("mitt");
 
     // send message on ENTER
     const enterCallback = (input: string) => {
@@ -28,16 +26,18 @@ export default function useInputController() {
           audio: 0,
           text: input
         };
+        console.log('emit message on enter', message);
         emitter.emit("animateSend", message);
 
         // await response
-        window.postMessage({
-          myTypeField: 'send-message',
-          message: message
-        }, '*')
+        // window.postMessage({
+        //   myTypeField: 'send-message',
+        //   message: message
+        // }, '*')
 
     }
 
+    const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
     const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
     const { textInputXoffset, renderTextInput } = useTextVisualizer(input);