add splash screen on load

src/views/messenger.vue

@@ -3,74 +3,37 @@
     <TextAudioInput />
 
     <!-- List of message bubbles. -->
-    <div id="messenger">
-      
-      <!-- message box (view width) -->
-      <div 
-        class="message" 
-        :id="`${message.modifier}Message`"
-        v-for="message in messages"
-      >
-
-        <!-- Includes bubble and context. -->
-        <div class="messageBox" :id="`${message.modifier}MessageBox`">
-
-          <!-- message bubble -->
-          <div 
-            class="bubble"
-            :id="`${message.modifier}Bubble`"
-          >
-            {{ message.content }}
-          </div>
-
-          <!-- message context -->
-          <span class="context">
-
-            <!-- Render Crimata icon or initials. -->
-            <div v-if="message.avatar == 'crimata'" class="photo">
-              <img src="@/assets/crimata.svg"/>
-            </div>
-
-            <div v-else class="photo">
-              {{ message.avatar }}
-            </div>
-
-            {{ message.context }}
-
-          </span>
-
-        </div>
-
-      </div>
-
+    <div id="messenger" >
+      <MessageItem v-for="message in messages" :message="message" :key="message.id"/>
     </div>
-
+ 
 </template>
 
 <script lang="ts">
 
-import { defineComponent, computed, reactive, onMounted, ref } from "vue";
-
+import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
 import TextAudioInput from "@/components/taInput/index.vue";
 import { Message } from "@/types/message/index";
+import MessageItem from '@/components/messageItem.vue'
 
 export default defineComponent({
   name: "Messenger",
 
   components: {
-    TextAudioInput 
+    TextAudioInput,
+    MessageItem,
   },
 
-  setup(props) {
+  setup() {
 
     // List of messages in the view.
     // Oldest message first.
-    const messages: Message[] = reactive([])
+    const messages: Message[] = reactive([]);
 
     // Render a message.
     const render = (message: Message) => {
-      messages.push(message)
-      console.log(`Pushing: ${message.modifier}: ${message.avatar}, ${message.content}`)
+      messages.push(message);
+      console.log(`Pushing: ${message.modifier}: ${message.avatar}, ${message.content}`);
     }
 
     onMounted(() => {
@@ -82,6 +45,10 @@ export default defineComponent({
 
     })
 
+    onUnmounted(() => {
+        window.ipcRenderer.removeAllListeners('render-message');
+    })
+
     return {
       messages,
     }
@@ -112,91 +79,4 @@ export default defineComponent({
     display: none;
   }
 
-  .message {
-    width: 100vw;
-
-    display: flex;
-    flex-direction: column;
-
-    padding-top: 9px;
-    padding-bottom: 9px;
-
-  }
-
-  .message:first-child {
-    margin-top: 55px;
-  }
-
-  .message:last-child {
-    margin-bottom: 18px;
-  }
-
-  #aiMessage {
-    align-items: flex-start;
-  }
-
-  #sfMessage {
-    align-items: flex-end;
-  }
-
-  #aiMessageBox {
-    margin-left: 20px;
-  }
-
-  #sfMessageBox {
-    margin-right: 20px;
-  }
-
-  .bubble {
-    max-width: 66vw;
-
-    display: flex;
-    flex-direction: column;    
-
-    font-family: "SF Pro Text";
-    font-size: 14px;
-
-    padding: 10px;
-
-    border-radius: 10px;
-  }
-
-  #aiBubble {
-    background-color: white;
-  }
-
-  #sfBubble {
-    background-color: #58c4fd;
-    color: white;
-  }
-
-  .context {
-    display: flex;
-    align-items: center;
-
-    font-family: "SF Compact Display";
-    font-size: 12px;
-    font-weight: bold;
-    margin-left: 7px;
-    margin-top: 5px;
-  }
-
-  .photo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin-right: 5px;
-
-    width: 30px;
-    height: 30px;
-
-    font-size: 14px;
-
-    background-color: white;
-    border-radius: 15px;
-  }
-
-
-
 </style>