add async text messages

src/background/session.ts

@@ -8,7 +8,7 @@ interface RenderMessage {
     content: string;
     context: string;
     subContext: string;
-    modifiers: string;
+    modifier: string;
     time: string;
     id: string;
 }
@@ -66,11 +66,17 @@ const receiveMessage = (message: string): void => {
     }
 
     const parsed: RenderMessage = JSON.parse(message);
+    console.log('received message', parsed);
+    if (parsed.modifier === "sf") {
+        backgroundMitt.emit('message-res', parsed);
+    } else if  (parsed.modifier === "ai"){
+        console.log('ai message')
+         backgroundMitt.emit('ipc-renderer', {
+            endpoint: 'render-message',
+            message: parsed
+        });
+    }
 
-    backgroundMitt.emit('ipc-renderer', {
-        endpoint: 'render-message',
-        message: parsed
-    });
 };
 
 export const sendMessage = (content: TextMessage | Buffer) => {
@@ -81,6 +87,23 @@ export const sendMessage = (content: TextMessage | Buffer) => {
     }
 }
 
+const asyncSend = (_event, payload: any): Promise<RenderMessage> => {
+    return new Promise((resolve, reject) => {
+
+        backgroundMitt.once('message-res', (res: RenderMessage) => {
+            console.log(res)
+            if (res.content) {
+                resolve(res);
+            } else {
+                reject()
+            }
+
+        });
+        socket.send(JSON.stringify(payload));
+    });
+
+}
+
 // Run every time we want to connect to backend.
 export const initSession = () => {
 
@@ -100,6 +123,10 @@ export const initSession = () => {
     ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers
     ipcMain.handle('auth-session', authSession);
 
+    // handle renderer send-message event
+    ipcMain.removeHandler('async-message'); // avoid setting duplicate handlers
+    ipcMain.handle('async-message', asyncSend);
+
     // Connect to the backend.
     socket.on('open', () => {
         console.log('Connected to Crimata Servers.');

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);
 

src/modules/mitt.ts

@@ -0,0 +1,17 @@
+import { inject } from "vue";
+import { Mitt } from "@/types/mitt/index";
+
+let emitter: Mitt;
+
+export default function useMitt() {
+
+    const emitterInject: Mitt | undefined = inject("mitt");
+    if (emitterInject) {
+      emitter = emitterInject;
+    }
+    return {
+        emitter
+    }
+}
+
+