add splash screen on load

src/components/messageItem.vue

@@ -0,0 +1,140 @@
+<template>  
+  <div
+    class="message"
+    :id="`${message.modifier}Message`"
+    :key="message.id"
+  >
+
+    <!-- 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>
+</template>
+
+<script lang='ts'>
+ import {defineComponent} from 'vue';
+ export default defineComponent({
+  name: "MessageItem",
+  props: {
+      message: {
+        type: Object,
+        required: true
+      } 
+  }
+ })
+</script>
+
+<style lang="scss" scoped>
+
+  .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>

src/components/splash.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="splash">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="57.046"
+      height="52.759"
+      viewBox="0 0 57.046 52.759"
+    >
+      <g transform="translate(-4127 -507)">
+        <g transform="translate(3949 332.206)">
+          <g transform="translate(178 174.794)">
+            <g transform="translate(0 27.405)">
+              <circle
+                cx="12.677"
+                cy="12.677"
+                r="12.677"
+                transform="translate(0 0)"
+                fill="#383838"
+              />
+              <circle
+                cx="12.677"
+                cy="12.677"
+                r="12.677"
+                transform="translate(31.692 0)"
+                fill="#383838"
+              />
+            </g>
+            <circle
+              cx="12.677"
+              cy="12.677"
+              r="12.677"
+              transform="translate(15.822 0)"
+              fill="#383838"
+            />
+            <path
+              d="M36.27,83.67"
+              transform="translate(-23.569 -43.588)"
+              fill="#ff0"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts">
+
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Splash",
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+  #splash {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+</style>