remove user-message & agen-message event listeners

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;