remove user-message & agen-message event listeners

src/background/session.ts

@@ -24,7 +24,7 @@ interface TextMessage {
 }
 
 const ip = 'ws://127.0.0.1';
-const port = 8760;
+const port = 8081;
 const reconnectTimeout = 3000; //ms
 let socket: WebSocket;
 let success = false;
@@ -66,46 +66,19 @@ const receiveMessage = (message: string): void => {
     }
 
     const parsed: RenderMessage = JSON.parse(message);
-    if (parsed.modifier === "sf") {
-        backgroundMitt.emit('message-res', parsed);
-    } else if (parsed.modifier === "ai") {
-        backgroundMitt.emit('ipc-renderer', {
-            endpoint: 'agent-message',
-            message: parsed
-        });
-    }
+    backgroundMitt.emit('ipc-renderer', {
+        endpoint: 'render-message',
+        message: parsed
+    });
 
 };
 
-const asyncSend = (_event?, payload: TextMessage | Buffer): Promise<RenderMessage> => {
-    return new Promise((resolve, reject) => {
-
-        backgroundMitt.once('message-res', (res: RenderMessage) => {
-            if (res.content) {
-                resolve(res);
-            } else {
-                reject('ERROR: NO MESSAGE');
-            }
-
-        });
-
-        if (payload instanceof Buffer) {
-            socket.send(payload);
-        } else if (payload) {
-            socket.send(JSON.stringify(payload));
-        }
-    });
-
+const sendMessage = (_event, payload: TextMessage): void => {
+    socket.send(JSON.stringify(payload));
 }
 
-export const sendAudio = async (content: Buffer) => {
-
-    const res = await asyncSend(null, content);
-
-    backgroundMitt.emit('ipc-renderer', {
-        endpoint: 'agent-message',
-        message: res
-    });
+export const sendAudio = (content: Buffer) => {
+    socket.send(content);
 }
 
 // Run every time we want to connect to backend.
@@ -127,9 +100,9 @@ export const initSession = () => {
     ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers
     ipcMain.handle('auth-session', authSession);
 
-    // handle renderer send-message event
-    ipcMain.removeHandler('message'); // avoid setting duplicate handlers
-    ipcMain.handle('message', asyncSend);
+    // handle user message event
+    ipcMain.removeAllListeners('message');
+    ipcMain.on('message', sendMessage);
 
     // Connect to the backend.
     socket.on('open', () => {

src/components/messageView/index.vue

@@ -24,7 +24,6 @@
 <script lang="ts">
 import TextBubble from "@/components/textBubble/index.vue";
 import { Message } from "@/types/message/index";
-import { useIpc } from "@/modules/ipc";
 import { Queue } from "@/modules/queue";
 import useTransitions from "./viewDetails/transitions";
 import useScrollView from "@/modules/scrollView";
@@ -40,8 +39,6 @@ export default defineComponent({
     const renderArr: Message[] = reactive([]);
     const renderQ = new Queue();
 
-    const { invoke } = useIpc("message");
-
     // Each method will be called on their respective lifecycle event.
     const { beforeEnter, enter, afterEnter, rendering } = useTransitions();
     const { scrollView } = useScrollView({
@@ -64,20 +61,11 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      // Call render function on event "agent-message."
-      window.ipcRenderer.on("agent-message", (event, payload) => {
+      window.ipcRenderer.on("render-message", (event, payload) => {
         const m = payload.message;
         if (m.content) render(m);
       });
 
-      emitter.on("user-message", async (message) => {
-        try {
-          const res = await invoke(message);
-          render(res);
-        } catch (e) {
-          console.log("No response. Do not render.");
-        }
-      });
     });
 
     onUnmounted(() => {

src/components/messageView/viewDetails/transitions.ts

@@ -1,10 +1,10 @@
 /**
  * Do stuff before, on, and after message enters the view.
- * Rendering Process consists of the execution of the above 
- * mentioned callbacks followed by the shift or stack animation. 
- * The animation called depends on the height of the message view 
+ * Rendering Process consists of the execution of the above
+ * mentioned callbacks followed by the shift or stack animation.
+ * The animation called depends on the height of the message view
  * relative to the window height. Additionally, the animation will
- * always be called on the after enter callback, after all the neccesary 
+ * always be called on the after enter callback, after all the neccesary
  * calculations have been completed. While all of this is hapenning,
  * the rendering state is updated throughout the process.
  */

src/components/taInput/inputController.ts

@@ -20,7 +20,7 @@ export default function useInputController() {
     const paths = ref([]);
     const audioBubbleWidth = ref(10);
     const { emitter } = useMitt();
-    const { post } = useIpc('update-recorder');
+    const { post } = useIpc();
 
     // send message on ENTER
     const enterCallback = (input: string) => {
@@ -29,27 +29,32 @@ export default function useInputController() {
             audio: 0,
             text: input
         };
-        emitter.emit("user-message", message);
+
+        // trigger send animation
+        emitter.emit("animate-send");
+
+        // send message to backend
+        post('message', message);
     }
 
-    const { 
-        visualizeStreamAsPaths, 
-        expandBubble 
+    const {
+        visualizeStreamAsPaths,
+        expandBubble
     } = useAudioVisualizer(visualizeStream);
 
     const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
 
-    const { 
-        textInputXoffset, 
+    const {
+        textInputXoffset,
         textInputYoffset,
-        renderTextInput 
+        renderTextInput
     } = useTextVisualizer(input);
 
     // stops stream recording on space key up
     function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {
 
-            post(false);
+            post('update-recorder', false);
             visualizeStream.value = false;
             paths.value = []
             audioBubbleWidth.value = 10;
@@ -79,7 +84,7 @@ export default function useInputController() {
         }
         if (input === " " && visualizeStream.value === false) {
             visualizeStream.value = true;
-            post(true);
+            post('update-recorder', true);
             expandBubble(audioBubbleWidth);
             visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
             return;

src/components/taInput/textDetails/textVisualizer.ts

@@ -35,7 +35,7 @@ export default function useTextVisualizer(input: Ref<string>) {
     }
 
     onMounted(() => {
-        emitter.on("user-message", () => {
+        emitter.on("animate-send", () => {
             const inputEl = document.getElementsByClassName("inputContainer");
             const foreignEl = inputEl[0] as HTMLElement;
             animateSend(foreignEl, inputHeight.value, input);

src/components/textBubble/bubbleDetails/computed.ts

@@ -40,7 +40,7 @@ export default function useComputedBubble(m: string, id: string) {
     const calculateXoffset = async () => {
         switch (m) {
             case "sf":
-                x.value = 800 - messageWidth.value - selfMessageMarginRight;
+                x.value = winW - messageWidth.value - selfMessageMarginRight;
                 break;
             default:
                 x.value = paddingLeft;

src/modules/auth.ts

@@ -16,10 +16,9 @@ const AUTH_KEY = 'crimata_token';
 const token = window.localStorage.getItem(AUTH_KEY);
 
 const authToken = async () => {
-   const { data, invoke  } = useIpc('auth-session');
+   const { invoke  } = useIpc();
     try {
-        await invoke(token);
-        state.accessToken = data.value;
+        state.accessToken = await invoke('auth-session', token);
     }
     catch(e) {
         state.error = e;

src/modules/ipc.ts

@@ -1,28 +1,15 @@
-import { ref, computed } from 'vue'
 
-export const useIpc = (endpoint: string) => {
-    const data = ref();
-    const error = ref();
-
-    const errorMessage = computed(() => {
-        console.log('ERROR', error.value);
-        if (error.value) {
-            return error.value.message
-        }
-    })
-
-    const invoke = async (payload: any) => {
-        error.value = undefined;
+export const useIpc = () => {
+    const invoke = async (endpoint: string, payload: any) => {
         try {
             const res = await window.ipcRenderer.invoke(endpoint, payload);
-            return data.value = res;
+            return res;
         } catch (e) {
-            error.value = e;
             throw e;
         }
     }
 
-    const post = (payload: any) => {
+    const post = (endpoint: string, payload: any) => {
         window.postMessage({
             endpoint: endpoint,
             content: payload
@@ -30,9 +17,6 @@ export const useIpc = (endpoint: string) => {
     };
 
     return {
-        data,
-        error,
-        errorMessage,
         invoke,
         post
     }

src/preload.ts

@@ -25,6 +25,10 @@ process.once("loaded", () => {
       ipcRenderer.send("update-recorder", message.content);
     }
 
+    if (message.endpoint === "message") {
+      ipcRenderer.send("message", message.content);
+    }
+
   });
 
 });

src/views/login.vue

@@ -13,7 +13,7 @@
         <input class="input" type="text" v-model="email" />
         <div class="inputModifier">Email</div>
       </div>
-      
+
 
       <!-- password -->
       <div class="inputBox">
@@ -53,7 +53,7 @@ export default defineComponent({
     const password = ref("");
     const rememberMe = ref(true);
 
-    const {  data,  invoke  } = useIpc('auth-session');
+    const { invoke } = useIpc();
 
     const submit = async () => {
         const payload = {
@@ -62,8 +62,8 @@ export default defineComponent({
           password: password.value
         };
         try {
-            await invoke(payload);
-            setToken(data.value);
+            const res = await invoke('auth-session', payload);
+            setToken(res);
             router.push({ name: "home" });
         } catch(e){
             console.log('Error loging in.')

src/views/register.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     const password = ref("");
     const password2 = ref("");
 
-    const { invoke, data,} = useIpc("auth-session");
+    const { invoke } = useIpc();
     const { setToken } = useAuth();
     const router = useRouter();
 
@@ -81,8 +81,8 @@ export default defineComponent({
 
       if (validate()) {
           try {
-              await invoke(payload);
-              setToken(data.value);
+              const res = await invoke('auth-session', payload);
+              setToken(res);
               router.push({ name: "home" });
           } catch(e) {
               console.log('Failed to register.')