input

src/App.vue

@@ -53,12 +53,17 @@
     border: none;
     outline: none;
 
+    z-index: 1;
+
   }
 
   .menu {
     position: fixed;
     margin-left: 20px;
     margin-top: 20px;
+
+    z-index: 2;
+
   }
 
   .menuButton {

src/assets/crimata.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.795" height="12.759" viewBox="0 0 13.795 12.759">
+  <g id="Group_544" data-name="Group 544" transform="translate(-4127 -507)">
+    <g id="Group_33" data-name="Group 33" transform="translate(4127 507)">
+      <g id="Group_32" data-name="Group 32" transform="translate(0 0)">
+        <g id="Group_31" data-name="Group 31" transform="translate(0 6.627)">
+          <circle id="Ellipse_50" data-name="Ellipse 50" cx="3.066" cy="3.066" r="3.066" transform="translate(0 0)" fill="#383838"/>
+          <circle id="Ellipse_51" data-name="Ellipse 51" cx="3.066" cy="3.066" r="3.066" transform="translate(7.664 0)" fill="#383838"/>
+        </g>
+        <circle id="Ellipse_52" data-name="Ellipse 52" cx="3.066" cy="3.066" r="3.066" transform="translate(3.826 0)" fill="#383838"/>
+        <path id="Path_150" data-name="Path 150" d="M36.27,83.67" transform="translate(-33.199 -73.977)" fill="#ff0"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/background/session.ts

@@ -6,6 +6,7 @@ import { ipcMain } from "electron";
 
 interface RenderMessage {
     content: string;
+    avatar: string;
     context: string;
     subContext: string;
     modifier: string;

src/components/taInput/index.vue

@@ -9,9 +9,7 @@
 
   <TextInput 
     v-else 
-    :input="input" 
-    :textXoffset="textInputXoffset"
-    :textYoffset="textInputYoffset"
+    :input="input"
   />
 
 </template>
@@ -40,19 +38,12 @@ export default defineComponent({
     const {
       input,
       visualizeStream,
-
-      textInputXoffset,
-      textInputYoffset,
-
       audioBubbleWidth,
       paths,
     } = useInputController();
 
     return {
       input,
-      
-      textInputXoffset,
-      textInputYoffset,
 
       visualizeStream,
       audioBubbleWidth,

src/components/taInput/inputController.ts

@@ -96,8 +96,6 @@ export default function useInputController() {
     return {
         input,
         visualizeStream,
-        textInputXoffset,
-        textInputYoffset,
         audioBubbleWidth,
         paths
     }

src/components/taInput/textDetails/text.vue

@@ -1,20 +1,11 @@
 <template>
 
-  <foreignObject 
-    class="inputContainer" 
-    :x="textXoffset" 
-    :y="textYoffset" 
-    width="55%" 
-    height="50%"
-  >
-    <div xmlns="http://www.w3.org/1999/xhtml">
+    <div class="inputBox">
       <div class="inputBubble" v-show="input.length > 0">
         <p>{{ input }}</p>
       </div>
     </div>
 
-  </foreignObject>
-
 </template>
 
 <script lang="ts">
@@ -26,17 +17,28 @@ export default defineComponent({
   name: "TextInput",
   props: {
     input: String,
-    textXoffset: String,
-    textYoffset: String,
   },
 });
 
 </script>
 
 <style lang="scss" scoped>
-.inputBubble {
+
+.inputBox {
   position: fixed;
 
+  width: 100vw;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  bottom: 0;
+
+  z-index: 1;
+}
+
+.inputBubble {
   max-width: 180px;
   min-height: 32px;
 
@@ -48,14 +50,15 @@ export default defineComponent({
 
   font-size: 14px;
 
-  bottom: 20px;
-  margin-left: 50%;
-
   p {
     max-width: 150px;
     overflow-wrap: break-word;
     padding: 7px 10px 5px 10px;
     margin: 0;
   }
+
+  margin-bottom: 20px;
+
+  z-index: 1;
 }
 </style>

src/types/message/index.ts

@@ -1,5 +1,6 @@
 export interface Message {
     content: string;
+    avatar: string;
     context: string;
     subContext: string;
     modifier: string;
@@ -14,5 +15,4 @@ interface MessageTransform {
 
 export interface MessageAnimeFunc {
     (message: SVGElement, transform: MessageTransform, scrollHeight?: number | undefined, targetList?: NodeList | undefined): void;
-}
-
+}

src/views/messenger.vue

@@ -24,9 +24,20 @@
           </div>
 
           <!-- message context -->
-          <div class="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 }}
-          </div>
+
+          </span>
 
         </div>
 
@@ -59,7 +70,7 @@ export default defineComponent({
     // Render a message.
     const render = (message: Message) => {
       messages.push(message)
-      console.log(`Pushing: ${message.modifier}: ${message.content}`)
+      console.log(`Pushing: ${message.modifier}: ${message.avatar}, ${message.content}`)
     }
 
     onMounted(() => {
@@ -93,10 +104,12 @@ export default defineComponent({
 
     background-color: #EBEBEB;
 
-    top: 0;
     bottom: 0;
 
-    z-index: -1px;
+  }
+
+  #messenger::-webkit-scrollbar {
+    display: none;
   }
 
   .message {
@@ -158,6 +171,9 @@ export default defineComponent({
   }
 
   .context {
+    display: flex;
+    align-items: center;
+
     font-family: "SF Compact Display";
     font-size: 12px;
     font-weight: bold;
@@ -165,6 +181,22 @@ export default defineComponent({
     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>