ui enhancements, transparent title bar and custom exit buttons

src/components/messageView/index.vue

@@ -4,6 +4,7 @@
     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">
@@ -21,6 +22,12 @@
 </template>
 
 <script lang="ts">
+
+
+// mock messages
+import Messages from "./mockMessages";
+
+
 import TextBubble from "@/components/textBubble/index.vue";
 import { Message } from "@/types/message/index";
 import useTransitions from "./viewDetails/transitions";
@@ -28,11 +35,12 @@ import useScrollView from "@/modules/scrollView";
 import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
 import { Queue } from '@/modules/queue';
-import { defineComponent, reactive, onMounted, onUnmounted, watch } from "vue";
+import { defineComponent, reactive, onMounted, onUnmounted, watch, ref } from "vue";
 
 export default defineComponent({
   name: "MessageView",
   components: { TextBubble },
+  
   setup() {
     const { emitter } = useMitt();
     const renderArr: Message[] = reactive([]);
@@ -44,6 +52,19 @@ export default defineComponent({
       targetId: "messageView",
     });
 
+
+    const messages = Messages;
+    const count = ref(0);
+
+    function emittMessage() {
+      console.log("emitting mock message")
+      if (count.value < messages.length) {
+        emitter.emit("render-message", messages[count.value]);
+        count.value++;
+        return;
+      }
+    }
+
     const render = (m: Message) => {
       if (rendering.value) {
         renderQ.enqueue(m);
@@ -86,6 +107,7 @@ export default defineComponent({
       enter,
       afterEnter,
       scrollView,
+      emittMessage,
     };
   },
 });

src/components/messageView/mockMessages.ts

@@ -0,0 +1,161 @@
+import { Message } from "@/types/message/index";
+
+const Messages: Message[] = [
+    {
+        content: "Welcome",
+        context: "ai",
+        subContext: "",
+        modifier: "ai",
+        id: "2",
+        time: ""
+    },
+    {
+        content:
+            "add friend",
+        context: "launch",
+        subContext: "",
+        modifier: "sf",
+        id: "1",
+        time: ""
+    },
+    {
+        content: "Did you mean to addcontact?",
+        context: "addcontact",
+        subContext: "",
+        modifier: "ai",
+        id: "5",
+        time: ""
+    },
+    {
+        content: "yes",
+        context: "fulfill",
+        subContext: "",
+        modifier: "sf",
+        id: "6",
+        time: ""
+    },
+
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Mesage from Tommy McConville",
+        subContext: "New Conversation",
+        modifier: "ai",
+        id: "3",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata",
+        subContext: "",
+        modifier: "ai",
+        id: "7",
+        time: ""
+    },
+
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "4",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata",
+        subContext: "",
+        modifier: "ai",
+        id: "8",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "9",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "10",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "11",
+        time: ""
+    },
+    {
+        content:
+            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "12",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "13",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "14",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "15",
+        time: ""
+    },
+    {
+        content: "Sweet, thanks!",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "16",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata AI",
+        subContext: "",
+        modifier: "ai",
+        id: "17",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "18",
+        time: ""
+    },
+    {
+        content: "Sweet, thanks!",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "19",
+        time: ""
+    },
+];
+export default Messages;

src/components/taInput/textDetails/text.vue

@@ -1,7 +1,7 @@
 <template>
   <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <div class="inputBubble" contenteditable v-show="input.length > 0">
+      <div class="inputBubble" contenteditable v-show="input.length > 0" font-family="SF Pro">
         <p>{{ input }}</p>
       </div>
     </div>