css messages

src/views/messenger.vue

@@ -5,10 +5,32 @@
     <!-- List of message bubbles. -->
     <div id="messenger">
       
-      <MessageBubble id="message" v-for="(message, index) in messages"
-        :message="message" 
-        :anchor="getAnchor(index)"  
-      />
+      <!-- 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 -->
+          <div class="context">
+            {{ message.context }}
+          </div>
+
+        </div>
+
+      </div>
 
     </div>
 
@@ -19,14 +41,12 @@
 import { defineComponent, computed, reactive, onMounted, ref } from "vue";
 
 import TextAudioInput from "@/components/taInput/index.vue";
-import MessageBubble from "@/components/messageView/message/message.vue";
 import { Message } from "@/types/message/index";
 
 export default defineComponent({
   name: "Messenger",
 
   components: {
-    MessageBubble,
     TextAudioInput 
   },
 
@@ -42,18 +62,6 @@ export default defineComponent({
       console.log(`Pushing: ${message.modifier}: ${message.content}`)
     }
 
-    // Get the "anchor" message for a given message.
-    const getAnchor = (index: number) => {
-      let anchor = "none";
-
-      // If not the first message.
-      if (index > 0) {
-        anchor = messages[index - 1].id
-      }
-
-      return anchor
-    }
-
     onMounted(() => {
 
       // Listen for new messages to render.
@@ -65,7 +73,6 @@ export default defineComponent({
 
     return {
       messages,
-      getAnchor
     }
 
   }
@@ -77,16 +84,87 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #messenger {
+    position: fixed;
+
     width: 100vw;
     min-height: 100vh;
 
-    overflow: scroll;
+    overflow-y: scroll;
 
     background-color: #EBEBEB;
+
+    top: 0;
+    bottom: 0;
+
+    z-index: -1px;
   }
 
-  #message {
-    position: absolute;
+  .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 {
+    font-family: "SF Compact Display";
+    font-size: 12px;
+    font-weight: bold;
+    margin-left: 7px;
+    margin-top: 5px;
+  }
+
+
+
 </style>