beginnings of refactor

src/render/components/bubble.vue

@@ -0,0 +1,330 @@
+<template>
+  <div :class="`${type}-message`">
+
+    <!-- message bubble -->
+    <div :class="`${type}-${child}-bubble`">
+      <div class="notification-dot"/>
+      <div class="error-dot"/>
+      {{ text }}
+    </div>
+
+    <!-- message context -->
+    <span class="context">
+      <div :class="`${type}-icon`">
+      {{ context }}
+    </span>
+
+  </div>
+</template>
+
+<script lang='ts'>
+
+ import { defineComponent, ref, onMounted } from 'vue';
+
+ export default defineComponent({
+  name: "MessageItem",
+
+  props: ["text", "context", "type", "position"],
+
+  setup() {
+
+    /* initialize seen state */
+    const seen = ref(() => {
+      if (document.visibilityState === "visible") {
+        return true;
+      } else return false;
+    });
+
+    onMounted(() => {
+
+      if (!seen) 
+      document.addEventListener("visibilitychange", () => seen = true);
+
+    });
+
+    return {
+      seen
+    };
+
+  }
+
+ })
+
+</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;
+  }
+
+  .sf-message {
+    @extend .message;
+    justify-content: flex-end;
+  }
+
+  .ai-message, .fr-message {
+    @extend .message;
+    justify-content: flex-start;
+  }
+
+  .bubble {
+    position: relative;
+    max-width: 66vw;
+    font-family: "SF Pro Text";
+    font-size: 14px;
+    padding: 10px;
+    border-radius: 18px;
+  }
+
+  .sf-bubble {
+    @extend .bubble;
+    background-color: #58c4fd;
+    color: white;
+  }
+
+
+
+
+
+
+
+
+  .firstChildMessage {
+    padding-bottom: 2px;
+  }
+
+  .middleChildMessage {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+
+  .lastChildMessage {
+    padding-top: 2px;
+  }
+
+  #aiMessage {
+    align-items: flex-start;
+  }
+
+  #sfMessage {
+    align-items: flex-end;
+  }
+
+  #frMessage {
+    align-items: flex-start;
+  }
+
+  .messageBox {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    // Animate on render.
+    animation-name: appear;
+    animation-duration: 0.25s;
+  }
+
+  #aiMessageBox {
+    margin-left: 20px;
+    align-items: flex-start;
+  }
+
+  #sfMessageBox {
+    margin-right: 20px;
+    align-items: flex-end;
+  }
+
+  #frMessageBox {
+    margin-left: 20px;
+    align-items: flex-start;
+  }
+
+  .bubble {
+    position: relative;
+
+    max-width: 66vw;
+
+    display: flex;
+    flex-direction: column;
+
+    font-family: "SF Pro Text";
+    font-size: 14px;
+
+    padding: 10px;
+
+    border-radius: 18px;
+  }
+
+  @keyframes appear {
+    10% {
+      transform: scale(0.3);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  #aiBubble {
+    background-color: white;
+  }
+
+  #sfBubble {
+    background-color: #58c4fd;
+    color: white;
+  }
+
+  #frBubble {
+    background-color: white;
+  }
+
+  .sf-firstChildBubble {
+    border-bottom-right-radius: 9px;
+  }
+
+  .sf-middleChildBubble {
+    border-top-right-radius: 9px;
+    border-bottom-right-radius: 9px;
+  }
+
+  .sf-lastChildBubble {
+    border-top-right-radius: 9px;
+  }
+
+  .ai-firstChildBubble, .fr-firstChildBubble {
+    border-bottom-left-radius: 9px;
+  }
+
+  .ai-middleChildBubble, .fr-middleChildBubble {
+    border-top-left-radius: 9px;
+    border-bottom-left-radius: 9px;
+  }
+
+  .ai-lastChildBubble, .fr-lastChildBubble {
+    border-top-left-radius: 9px;
+  }
+
+  .notify {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #58D9FF;
+    top: -5px;
+    left: -5px;
+    border: 2px solid #EBEBEB;
+    transform: scale(0);
+
+    animation-name: notify-anim;
+    animation-duration: 5s;
+  }
+
+  @keyframes notify-anim {
+    0%, 90% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  .context {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    font-family: "SF Compact Display";
+    font-size: 12px;
+    font-weight: bold;
+    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;
+  }
+
+  // Apply for audio message playback.
+  .playing {
+    animation-name: circle1;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes circle1 {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4), 0 0 0 0.25em rgba(195, 195, 195, 0.15);
+    }
+    25% {
+      box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15), 0 0 0 0.4em rgba(195, 195, 195, 0.3);
+    }
+    50% {
+      box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55), 0 0 0 0.15em rgba(195, 195, 195, 0.05);
+    }
+    75% {
+      box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25), 0 0 0 0.55em rgba(195, 195, 195, 0.45);
+    }
+  }
+
+  .contentLoader {
+    display: flex;
+  }
+
+  .contentLoaderDot {
+    width: 5px;
+    height: 5px;
+
+    margin: 2px;
+    border-radius: 2.5px;
+    background-color: #357CA2;
+  }
+
+  .questionMark {
+    font-weight: 900;
+    color: #357CA2;
+  }
+
+  // .divider {
+  //   width: 100vw;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+
+  //   font-family: "SF Compact Display";
+  //   font-size: 12px;
+  //   font-weight: bold;
+  //   color: #9B9B9B;
+
+  //   margin-bottom: 18px;
+  // }
+
+
+</style>
+
+

src/render/components/controllers/helpers.ts

@@ -0,0 +1,102 @@
+import { ref } from "vue";
+import anime from "animejs";
+import { v4 as uuidv4 } from 'uuid';
+
+
+export function animateTextInput () {
+
+    const side = ref("right");
+
+    function show () {
+        const t1 = (side.value === "right") ? 50 : -70;
+        const t2 = (side.value === "right") ? 110 : -130;
+
+        anime({
+            targets: '#textInput',
+            opacity: [0, 1],
+            translateX: [t1, t2],
+            scale: [0.3, 1],
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    function hide () {
+        const t = (side.value === "right") ? 50 : -80;
+
+        anime({
+            targets: '#textInput',
+            opacity: [1, 0],
+            translateX: t,
+            scale: 0.3,
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    function switchSide () {
+        const t = (side.value === "right") ? -130 : 110;
+
+        anime({
+            targets: '#textInput',
+            translateX: t,
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    return {
+        side,
+        show,
+        hide,
+        switchSide
+    };
+
+}
+
+export function animateAudioInput () {
+
+    function show () {
+        anime({
+            targets: '#recIcon',
+            opacity: [0, 0.75],
+            scale: [0.0, 1],
+            duration: 250,
+            easing: 'linear',
+        })
+    }
+
+    function hide () {
+        anime({
+            targets: '#recIcon',
+            opacity: [0.75, 0],
+            scale: [1, 0],
+            duration: 250,
+            easing: 'linear',
+        })
+    }
+
+    return {
+        show,
+        hide
+    };
+
+}
+
+
+export function newMessage ({
+    text=false,
+    audio=false,
+    context=false,
+    uid=uuidv4()
+}): Message {
+    return {
+        text: text,
+        audio: audio,
+        context: context,
+        uid: uid
+    };
+}

src/render/components/controllers/inputItem.control.audio.ts

@@ -0,0 +1,79 @@
+import anime from "animejs";
+import { useIpc } from '@/modules/ipc';
+import { onMounted, onUnmounted, ref, Ref } from "vue";
+import { postMessage } from "@/ipc/session";
+import { newMessage, animateAudioInput } from "./helpers";
+import { invokeStopRecord, postAudioChunk } from "@/ipc/audio";
+
+export default function useAudioInputController (typing: Ref) {
+
+    const recording = ref(false);
+    let mediaRecorder: MediaRecorder;
+
+    const { show, hide } = animateAudioInput();
+
+    // initialize audio
+    const conf = {audio: true, video: false}
+    navigator.mediaDevices.getUserMedia(conf).then((stream: MediaStream) => {
+
+        const options = {mimeType: 'audio/webm'};
+        mediaRecorder = new MediaRecorder(stream, options);
+
+        // post any mew audio to backend
+        mediaRecorder.addEventListener('dataavailable', (e: BlobEvent) => {
+            e.data.arrayBuffer().then((buff: ArrayBuffer) => {
+                postAudioChunk(buff);
+            });
+        });
+
+        // get audio and post new message to backend
+        mediaRecorder.addEventListener('stop', (_e: Event) => {
+            invokeStopRecord().then((audio: ArrayBuffer[] | Error) => {
+                console.log(audio);
+                // postMessage(newMessage({audio: audio}));
+            });
+        });
+
+    });
+
+    // start recording on space bar
+    const record = () => {
+        console.log("INPT:Capturing audio...")
+        mediaRecorder.start();
+        recording.value = true;
+        show()
+    }
+
+    // stop recording and send on release
+    const stop = () => {
+        console.log("INPT:Stopping record.")
+        mediaRecorder.stop();
+        recording.value = false;
+        hide();
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        if (e.keyCode == 32 && !typing.value) record();
+    }
+
+    const onKeyUp = (e: KeyboardEvent) => {
+        if (e.keyCode == 32 && recording.value) stop();
+    }
+
+    //-----------------------------------------------------------
+
+    onMounted(() => {
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("keyup", onKeyUp);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("keyup", onKeyUp);
+    })
+
+    return {
+        recording
+    }
+
+}

src/render/components/controllers/inputItem.control.text.ts

@@ -0,0 +1,134 @@
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
+import { postMessage } from "@/ipc/session";
+import { newMessage, animateTextInput } from "./helpers";
+
+
+export default function useTextInputController(elementX: Ref) {
+    
+    let textInput: HTMLInputElement | null;
+
+    const { side, show, hide, switchSide } = animateTextInput();
+
+    let firstKey = true;
+    const typing = ref(false);
+
+    // Prep inputItem for typing.
+    const prepInput = () => {
+        show()
+        typing.value = true
+    }
+
+    // Clear and hide inputItem after done typing.
+    const clearInput = () => {
+
+        if (textInput) {
+            textInput.value = "";
+            textInput.blur();
+        }
+
+        hide()
+        firstKey = true;
+        typing.value = false;
+    }
+
+    // Send a message and clean up after.
+    const sendMessage = () => {
+        if (textInput) {
+
+            // Send it to the backend for processing.
+            const message = newMessage({
+                text: textInput.value
+            });
+
+            postMessage(message);
+
+            clearInput()
+        }
+    }
+
+    // Keys that are capable of opening the text input (numbers and letters).
+    const isHotKey = (key: number) => {
+        if (key >= 47 && key <= 91) { // a letter
+            return true
+        }
+    }
+
+    //---Callbacks-----------------------------------------------
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        const key = e.keyCode;
+
+        if (textInput) {
+
+            // Only runs on firstKey.
+            if (firstKey) {
+
+                if (!isHotKey(key)) {
+                    return
+                }
+
+                prepInput()
+            }
+
+            textInput.focus();
+
+            // Close input when no text or on ESC.
+            if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
+                clearInput()
+                return
+            }
+
+            if (key === 27) { // escape
+                clearInput()
+                return
+            }
+
+            // Close and send on enter.
+            if (key === 13) {
+                if (textInput.value) {
+                    sendMessage()
+                    return
+                }
+            }
+
+            if (firstKey) firstKey = false
+        }
+    }
+
+    //-----------------------------------------------------------
+
+    // Watch parent position and update side.
+    watch(elementX, (elementX, _previous) => {
+        const winW = window.innerWidth
+
+        // Logic depends on the side we are on.
+        if (side.value === "right") {
+            if (winW - elementX < 230) {
+                switchSide()
+                side.value = "left"
+            }
+        }
+
+        else {
+            if (winW - elementX > 230) {
+                switchSide()
+                side.value = "right"
+            }
+        }
+
+    });
+
+    onMounted(() => {
+        textInput = document.getElementById("textInput") as HTMLInputElement;
+        window.addEventListener("keydown", onKeyDown);
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+    });
+
+    return {
+        typing
+    }
+
+}

src/render/components/controllers/messenger.control.ts

@@ -0,0 +1,143 @@
+import { ref } from 'vue';
+import invokeSavedMessages from "@/render/ipc";
+import useScroll from "@/render/composables/scroll";
+
+const messages = ref(new Map());
+
+function getTimeStamp(): number {  
+  const currentdate = new Date();
+  return currentdate.getTime();
+}
+
+const newViewMessage = (message: Message): ViewMessage => {
+  return {
+    text: message.text,
+    context: message.context,
+    audio: message.audio,
+    from: message.from,
+    uid: message.uid,
+    time: getTimeStamp(),
+    isChild: "none",
+    seen: false,
+    newMessage: false
+  };
+}
+
+const addMessage = (message: Message, newMessage=false) => {
+  const viewMessage = newViewMessage(message);
+  if (newMessage) viewMessage.newMessage = true;
+  messages.value.set(viewMessage.uid, viewMessage);
+}
+
+const updateMessage = (message: Message) => {
+  const viewMessage = messages.value.get(message.uid);
+  viewMessage.context = message.context;
+  viewMessage.text = message.text;
+}
+
+const loadSavedMessages = async () => {
+  const messageData = await invokeSavedMessages();
+  messages.value = new Map(Object.entries(messageData));
+}
+
+const saveMessages = () => {
+  const messageData = Object.fromEntries(messages.value);
+  // must save to json.
+}
+
+const pruneMessages = (limit=200) => {
+  if (messages.value.size >= limit) {
+    const oldest = Array.from(messages.value.keys()).shift();
+    messages.value.delete(oldest);
+  }
+}
+
+const updateGrouping = () => {
+
+  const isSimmilar = (messageA: ViewMessage, messageB: ViewMessage) => {
+    if ((Math.abs(messageA.time - messageB.time) < 20000) && (messageA.from == messageB.from) && (messageA.context == messageB.context)) {
+      return true
+    }
+    return false
+  }
+
+  const refs = Array.from(messages.value.keys())
+
+  // Get the last three messages.
+  const first = messages.value.get(refs[refs.length - 1])
+  const second = messages.value.get(refs[refs.length - 2])
+  const third = messages.value.get(refs[refs.length - 3])
+
+  // If messages are simmilar, update the classes.
+  if ((first) && (second)) {
+    if (isSimmilar(first, second)) {
+      first.isChild = "last" // i.e. last in group.
+      second.isChild = "first"
+
+      if (third) {
+        if ((third.isChild == "first") || (third.isChild == "middle")) {
+          second.isChild = "middle"
+        }
+      }
+    }
+  }
+}
+
+export default function useMessages() {
+
+  const { updateScrollRef, adjustScroll } = useScroll("messenger");
+
+  /* Given new message object, update the view accordingly */
+  const updateMessageView = (newMessages: Message[]) => {
+
+    const bottom = updateScrollRef(); // see if the user is scrolled down
+
+    // take each message and apply view
+    newMessages.forEach((message: Message) => {
+
+      // add or update message depending
+      if (messages.value.has(message.uid)) {
+        updateMessage(message);
+      } else addMessage(message);
+
+      pruneMessages(); // pop off old messages from view
+      updateGrouping(); // group like message together
+
+      if (bottom) adjustScroll(); // only scroll if user was at bottom
+      
+      saveMessages();
+
+    });
+
+  }
+
+  return {
+    messages,
+    updateMessageView,
+    loadSavedMessages
+  }
+
+}
+
+
+  // // Seed message view with message history.
+  // const prepMessageView = async (newMessages: Message[]) => {
+  //   console.log("MSGR:Prepping messenger view.")
+
+  //   // Load and render saved messages and immediately scroll to bottom.
+  //   await loadSavedMessages();
+  //   setTimeout(setScroll.bind(false), 10);
+
+  //   // Render new messages, then wait 1s to scroll.
+  //   if (newMessages.length) {
+
+  //     console.log("MSGR:Adding new messages")
+
+  //     newMessages.forEach(message => {
+  //       addMessage(message, true);
+  //     })
+
+  //     setTimeout(setScroll.bind(true), 1000);
+
+  //   }
+  // }

src/render/components/header.vue

@@ -0,0 +1,81 @@
+<template>
+    <button id="titlebar" />
+    <span id="menu">
+      <button
+        class="menuButton exitButton"
+        @click.prevent="postNavBarExit"
+      />
+      <button
+        class="menuButton minimizeButton"
+        @click.prevent="postNavBarMin"
+      />
+    </span>
+</template>
+
+<script lang="ts">
+
+    import { postNavBarExit, postNavBarMin } from "@/render/ipc";
+    
+    setup() {
+        return {
+            postNavBarExit,
+            postNavBarMin
+        }
+    }
+
+</script>
+
+<style lang="scss">
+#titlebar {
+  position: fixed;
+
+  width: 100vw;
+  height: 54px;
+
+  opacity: 0.75;
+
+  background-color: #EBEBEB;
+
+  -webkit-app-region: drag;
+
+  border: none;
+  outline: none;
+
+  z-index: 1;
+
+}
+
+#menu {
+  position: fixed;
+  margin-left: 20px;
+  margin-top: 20px;
+
+  z-index: 2;
+
+}
+
+.menuButton {
+  border: none;
+  outline:none;
+  min-width: 14px;
+  min-height: 14px;
+  border-radius: 7px;
+}
+
+.exitButton {
+  background-color: #FF6157;
+}
+
+.exitButton:active {
+  background: #c14645;
+}
+
+.minimizeButton {
+  background-color: #FFC12F;
+  margin-left: 8px;
+}
+
+.minimizeButton:active {
+  background-color: #c08e38;
+}
+</style>

src/render/components/inputItem.vue

@@ -0,0 +1,225 @@
+<template>
+  <div
+    id="inputItem"
+    class="input-item"
+    :class="{ playing: recording }"
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
+  >
+    <div>{{ initials }}</div>
+    
+
+    <!-- Recording animation on space bar -->
+    <span v-if="recording" class="play"></span>
+    <span v-if="recording" class="pause"></span>
+
+    <!-- Show text input on key-down -->
+    <input 
+      id="textInput" 
+      type="text" 
+    />
+
+    <!-- Show suggestions menu on click -->
+    <!-- <Menu /> -->
+
+  </div>
+</template>
+
+<script lang="ts">
+
+import { defineComponent } from "vue";
+import draggify from "@/modules/draggify";
+
+import TextInput from "@/components/textInput.vue";
+
+import useTextInputController from 
+  "@/components/controllers/inputItem.control.audio";
+import useAudioInputController from 
+  "@/components/controllers/inputItem.control.text";
+
+export default defineComponent({
+  name: "InputItem",
+
+  props: ["initials"],
+
+  components: {
+    TextInput
+  },
+
+  setup() {
+
+    // Default values for position.
+    const xStart = 15;
+    const yStart = window.innerHeight - 200;
+
+    // Calculate position of inputItem on drag.
+    const { elementX, elementY } = draggify("inputItem", xStart, yStart, 15);
+
+    // Controllers for text and audio.
+    const { typing } = useTextInputController(elementX)
+    const { recording } = useAudioInputController(typing)
+
+    return {
+      elementX,
+      elementY,
+      recording
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+
+.input-item {
+  position: absolute;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+
+  width: 40px;
+  height: 40px;
+
+  z-index: 3;
+
+  // To prevent window drag when overlapping with titlebar.
+  -webkit-app-region: no-drag;
+
+  // border: 4px solid #C6C6C6;
+  border-radius: 50%;
+
+  // Set opacity here to not affect child.
+  background-color: rgba(235, 235, 235, 0.75);
+
+  cursor: pointer;
+
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
+
+  .play,
+  .pause {
+    z-index: 5;
+    &::before,
+    &::after {
+      -webkit-border-radius: 1000px;
+      -moz-border-radius: 1000px;
+      border-radius: 1000px;
+      content: "";
+      position: absolute;
+      height: 2.35em;
+      width: 2.35em;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      z-index: 0;
+    }
+  }
+  .play::before {
+    box-shadow: 0 0 0 rgba(195, 195, 195, 0);
+  }
+  .pause {
+    opacity: 0;
+  }
+  &.playing {
+    .play {
+      opacity: 0;
+    }
+    .pause {
+      opacity: 1;
+      &::before {
+        -moz-animation: circle1 1.5s infinite ease-in-out;
+        -o-animation: circle1 1.5s infinite ease-in-out;
+        -webkit-animation: circle1 1.5s infinite ease-in-out;
+        animation: circle1 1.5s infinite ease-in-out;
+      }
+      &::after {
+        -moz-animation: circle2 2.2s infinite ease-in-out;
+        -o-animation: circle2 2.2s infinite ease-in-out;
+        -webkit-animation: circle2 2.2s infinite ease-in-out;
+        animation: circle2 2.2s infinite ease-in-out;
+      }
+    }
+  }
+}
+
+.rec-icon {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: red;
+  transform: translate(14px);
+
+  animation-name: rec;
+  animation-duration: 0.5s;
+}
+
+@keyframes rec {
+  from {
+    transform: translate(14px) scale(0.3);
+  }
+  to {
+    transform: translate(14px) scale(1.0);
+  }
+}
+
+@keyframes circle1 {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
+  }
+  25% {
+    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
+  }
+  75% {
+    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
+  }
+}
+
+@keyframes circle2 {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
+  }
+  25% {
+    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
+  }
+  75% {
+    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
+  }
+}
+
+#textInput {
+  position: absolute;
+
+  opacity: 0;
+
+  min-width: 150px;
+  height: 16px;
+
+  border-radius: 18px;
+
+  padding: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+
+  outline: none;
+  border: none;
+  pointer-events: none;
+
+  background-color: white;
+
+  z-index: -1;
+
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
+
+  transform: translateX(50px) scale(0.3);
+
+}
+
+</style>

src/render/components/login.vue

@@ -0,0 +1,181 @@
+<template>
+  <form id="login" @submit.prevent="submitForm">
+
+
+    <!-- login title -->
+    <div id="loginTitle">
+      <div>Login</div>
+    </div>
+
+    <!-- username and password forms -->
+    <div id="loginBox">
+      <!-- username -->
+      <div class="inputBox">
+        <input class="input" type="text" v-model="usr" />
+        <div class="inputModifier">Email</div>
+      </div>
+
+
+      <!-- password -->
+      <div class="inputBox">
+        <input class="input" type="password" v-model="pwd" />
+        <div class="inputModifier">Password</div>
+      </div>
+    </div>
+
+    <!-- submit button; position: fixed -->
+    <button class="submitButton button" type="submit">Submit</button>
+
+  </form>
+
+    <!-- back to login button: position: fixed  -->
+<!--     <button class="createAccountButton button" @click.prevent="switchView">Create account</button> -->
+</template>
+
+<script lang="ts">
+
+import { defineComponent, ref } from "vue";
+import { useIpc } from "@/modules/ipc";
+import { authRequest } from '@/modules/message';
+import { useProfile } from '@/modules/auth';
+import { invokeLogin } from "@/ipcRend/account";
+import { postInitSession } from "@/ipcRend/session";
+
+export default defineComponent({
+  name: "Login",
+
+  setup() {
+
+    const usr = ref("");
+    const pwd = ref("");
+
+    // Submit login credentials to the backend.
+    const submitForm = async () => {
+
+      try {
+
+          const profile = await invokeLogin({
+              email: usr.value,
+              password: pwd.value
+          });
+
+          /* emit event to app.vue */
+          window.postMessage(profile);
+
+      } catch (e) console.log(e);
+
+    }
+
+    return {
+      usr,
+      pwd,
+      submitForm
+    }
+
+  },
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+#login {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#loginTitle {
+  font-family: "SF Pro Text";
+  min-width: 181px;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: left;
+  padding-bottom: 10px;
+}
+
+#loginBox {
+  font-family: "SF Compact Display";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.input {
+  background-color: #B9B9B9;
+  border: none;
+  outline: none;
+  padding: 16px;
+  text-decoration: none;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.inputModifier {
+  min-width: 181px;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  margin-left: 15px;
+}
+
+.submitButton {
+  font-family: "SF Compact Display";
+  position: fixed;
+  margin-top: 141px;
+  background-color: #58C4FD;
+  color: white;
+  padding: 10px 30px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.submitButton:active {
+  background-color: #4296C3;
+}
+
+.createAccountButton {
+  position: absolute;
+  border: none;
+  background-color: #EBEBEB;
+  text-decoration: none;
+  color: #58C4FD;
+  font-weight: bold;
+  bottom: 20px;
+  right: 20px;
+}
+
+.button {
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.invalid {
+    margin-bottom: 30px;
+    font-family: "SF Compact Display";
+    font-weight: bold;
+    font-size: 14px;
+    color: #F53737;
+}
+
+</style>

src/render/components/messenger.vue

@@ -0,0 +1,101 @@
+<template>
+
+  <!-- Position fixed items -->
+  <InputItem :initials="profile.initials"/>
+  <Settings />
+  <div id="recIcon" />
+
+  <!-- List of message bubbles. -->
+  <div id="messenger">
+    <Bubble
+      v-for="message in messages"
+      :text="message.text"
+      :context="message.context"
+      :key="message[0]"
+    />
+  </div>
+
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import Message from "@/render/components/message.vue";
+import InputItem from "@/render/components/inputItem.vue";
+import Settings from "@/render/components/settings.vue";
+import useMessages from "@/render/composables/messages";
+
+export default defineComponent({
+  name: "Messenger",
+
+  props: ["state"],
+
+  components: {
+    Message,
+    InputItem,
+    Settings
+  },
+
+  setup(props) {
+
+    // Handle messages in view.
+    const { messages, updateMessageView } = useMessages();
+
+    onMounted(() => {
+
+      /* populate the message view with existing messages */
+      updateMessageView(state.savedMessages, state.newMessages);
+
+      /* wait and listen for new messages to come in */
+      window.ipcRenderer.on("new-message", (_e: any, payload: any) => {
+        updateMessageView(payload.message);
+      });
+
+    });
+
+    onUnmounted(() => {
+      window.ipcRenderer.removeAllListeners("new-message");
+    });
+
+    return {
+      messages
+    };
+
+  },
+
+});
+</script>
+
+<style lang="scss" scoped>
+
+#messenger {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+}
+
+#messenger::-webkit-scrollbar {
+  display: none;
+}
+
+#recIcon {
+  position: fixed;
+  right: 0;
+
+  opacity: 0;
+  transform: scale(0.0);
+
+  margin-top: 24px;
+  margin-right: 66px;
+
+
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #FF3B3B;
+
+  z-index: 2;
+
+}
+
+</style>

src/render/components/settings.vue

@@ -0,0 +1,170 @@
+<template>
+
+  <!-- Settings icon. -->
+  <button
+    class="settingsIcon"
+    v-if="toggleSettings == false"
+    @click="onActive"
+  >
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+  </button>
+
+  <!-- Settings div. -->
+  <div id="settings" v-show="toggleSettings">
+  </div>
+
+    <button
+      v-if="toggleSettings"
+      class="settingsOption"
+      @click="onLogout"
+    >
+      Logout
+    </button>
+
+</template>
+
+<script lang="ts">
+
+  import { defineComponent, ref } from "vue";
+  import  { useIpc } from "@/modules/ipc";
+  import { logoutRequest } from '@/modules/message';
+  import { useProfile } from "@/modules/auth"
+  import { invokeLogout } from "@/ipcRend/account";
+
+  export default defineComponent({
+    name: "Settings",
+
+    setup() {
+      const toggleSettings = ref(false);
+
+      const { post, invoke } = useIpc();
+
+      const { clearProfile } = useProfile();
+
+      // Listen for escape key to close settings.
+      const onEscape = (e: any) => {
+        if(e.key === "Escape") {
+          toggleSettings.value = false;
+        }
+        window.removeEventListener("keydown", onEscape);
+      }
+
+      // When settings is showing.
+      const onActive = () => {
+        toggleSettings.value = true;
+        window.addEventListener("keydown", onEscape);
+      }
+
+      // We ask server to log us out.
+      const onLogout = async () => {
+
+        console.log("Submitting logout request.");
+
+        try {
+            clearProfile();
+            await invokeLogout();
+        } catch(e) {
+            console.log('error')
+        }
+
+      }
+
+      return {
+        onActive,
+        toggleSettings,
+        onLogout
+      }
+    }
+  })
+
+</script>
+
+<style lang="scss" scoped>
+
+#settings {
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #EBEBEB;
+
+  opacity: 0.75;
+
+  z-index: 4;
+
+  animation-name: appear;
+  animation-duration: 0.5s;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 0.75
+  }
+}
+
+.settingsIcon {
+  position: fixed;
+  right: 0;
+
+  border: none;
+  outline: none;
+
+  display: flex;
+  flex-direction: row;
+
+  padding: 5px;
+  margin-right: 20px;
+  margin-top: 19px;
+
+  z-index: 2;
+  background-color: Transparent;
+}
+
+.settingsIcon:hover {
+  cursor: pointer;
+}
+
+.settingsButtonDot {
+  width: 5px;
+  height: 5px;
+
+  margin: 2px;
+  border-radius: 2.5px;
+  background-color: #9B9B9B;
+
+}
+
+.settingsOption {
+  font-family: "SF Compact Display";
+  background-color: #B7B7B7;
+  padding: 10px 30px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.settingsOption:hover {
+  cursor: pointer;
+}
+
+</style>
+

src/render/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>