add audio playback

src/components/messageView/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    :viewBox="scrollView"
+    @click="emittMessage"
+  >
+    <g id="messageView" transform="translate(0, 20)">
+      <g v-for="(item, index) in renderArr" :key="index" preserverAspectRatio="none">
+        <transition
+          appear
+          v-on:before-appear="beforeEnter"
+          v-on:appear="enter"
+          v-on:after-enter="afterEnter"
+        >
+          <TextBubble :item="item" :key="index" />
+        </transition>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<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";
+import useMitt from "@/modules/mitt";
+import {
+  defineComponent,
+  reactive,
+  onMounted,
+  onUnmounted,
+  watch,
+} from "vue";
+
+export default defineComponent({
+  name: "MessageView",
+  components: { TextBubble },
+
+  setup() {
+    const { emitter } = useMitt();
+    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({
+      targetId: "messageView",
+    });
+
+    const render = (m: Message) => {
+      if (rendering.value) {
+        renderQ.enqueue(m);
+      } else {
+        renderArr.push(m);
+      }
+    };
+
+    watch(rendering, (rendering, _prevRendering) => {
+      if (!rendering) {
+        const m = renderQ.dequeue() as Message | null;
+        if (m) renderArr.push(m);
+      }
+    });
+
+    onMounted(() => {
+      // Call render function on event "render-message."
+      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(() => {
+      window.ipcRenderer.removeAllListeners("render-message");
+      emitter.all.clear();
+    });
+
+    return {
+      renderArr,
+      beforeEnter,
+      enter,
+      afterEnter,
+      scrollView,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+#messageView {
+  width: 1000px;
+  height: 100vh;
+  color: red;
+}
+</style>

src/components/taInput/inputController.ts

@@ -34,7 +34,7 @@ export default function useInputController() {
         emitter.emit("animate-send");
 
         // send message to backend
-        post('message', message);
+        if (input) post('message', message);
     }
 
     const {

src/components/textBubble/bubbleDetails/drawer.ts

@@ -0,0 +1,50 @@
+import { ref, onMounted } from "vue";
+import { Ref } from "@/types/vueRef/index";
+
+/**
+ * handles visualization of individual svg text bubbles
+ */
+export default function useBubbleDrawer({
+    mr,
+    tr,
+}: {
+    mr: Ref<string>;
+    tr: Ref<string>;
+}) {
+    const signatureTranslate = ref("");
+    let messageRect: SVGSVGElement & SVGRectElement;
+    let messageText: SVGSVGElement & SVGTextElement;
+
+    onMounted(async () => {
+        messageRect = (mr.value as unknown) as SVGSVGElement & SVGRectElement;
+        messageText = (tr.value as unknown) as SVGSVGElement & SVGTextElement;
+    });
+
+    function adjustMessageRect(): void {
+        // must get dimensions of text box to fit bubble around
+        const padding = 12.5;
+        const textBox = messageText.getBBox();
+        messageRect.setAttribute("x", String(textBox.x - padding));
+        messageRect.setAttribute("y", String(textBox.y - padding));
+        messageRect.setAttribute("width", String(textBox.width + 2 * padding));
+        messageRect.setAttribute("height", String(textBox.height + 2 * padding));
+    }
+
+    function translateMsgSignature(): void {
+        if (messageRect.getAttribute("height") !== null) {
+            const height = Number(messageRect.getAttribute("height"));
+            signatureTranslate.value = `translate(-10 ${height})`;
+        }
+    }
+
+    async function drawMessage() {
+        // ignore lint error: await needed for proper render
+        await adjustMessageRect();
+        translateMsgSignature();
+    }
+
+    return {
+        drawMessage,
+        signatureTranslate,
+    };
+}