updated protocols

src/account.ts

@@ -1,66 +1,79 @@
 
+import { app } from "electron";
+import { parseAuthRes } from "@/auth";
 import { postAuth, postLogin, postLogout } from "@/api/account";
-import { endSession, launchSession } from "@/session";
+import { updateAppUI, launchSession, endSession } from "@/session";
-import { getToken,  setToken, setProfile, clearStore } from "./store";
+import { getToken, setToken, clearToken } from "./store";
-import { parseAuthRes } from "./auth";
+import { backgroundMitt, ipcEmit } from "@/composables/useEmitter";
-import { ipcEmit } from "@/composables/useEmitter";
 
-export const accountAuth = async (): Promise<Error | AuthState> => {
+
+/* Either null or a crimataId */
+let account: string | null = null;
+
+
+export const accountAuth = async (): Promise<void> => {
 
     /* attempt to get a login token from the store */
     const token = getToken();
 
-    /* try to login with it, returns platform secret and new token on success */
+    try {
-    if (token) {
-        try {
 
+        if (token) {
+
+            // attempt to login with token
             const res = await postAuth(token);
-
             const parsed = parseAuthRes(res);
 
-            setToken(parsed.token)
+            // save jwt token and profile
-            setProfile(parsed.profile);
+            setToken(parsed.token);
+            account = parsed.crimataId
 
-            return {
+            // launch session
-                profile: parsed.profile,
+            launchSession(parsed.token);
-                token: parsed.token
-            };
 
-        } catch(e) {
+        } else throw(new Error('Failed to authenticate (no token).'));
-            console.log('[ACCOUNT]', e);
+
-            clearStore();
+    } catch (e) {
-            throw(new Error('Failed to authenticate.'));
+        console.log(e);
+        clearToken();
+
+    } finally {
+
+        // push state changes to the frontend
+        updateAppState();
 
-        }
-    } else {
-        throw(new Error('Unable to authenticate.'));
     }
+
 };
 
-export const accountLogin: IpcHandlerCallback<AccountCredentials, Profile> = async (payload) => {
+export const accountLogin = async (payload: any): Promise<Error | void> => {
-     const account = payload as AccountCredentials;
+
+     const creds = payload as AccountCredentials;
+
      try {
 
          // attempt login with email password
-         const res = await postLogin(account.email, account.password);
+         const res = await postLogin(creds.email, creds.password);
          const parsed = parseAuthRes(res);
 
          // save jwt token and profile
          setToken(parsed.token);
-         setProfile(parsed.profile);
+         account = parsed.crimataId;
 
          // launch session
          launchSession(parsed.token);
 
-         // return profile to renderer
+         // push state changes to the frontend
-         return parsed.profile;
+         updateAppState();
+
+         return;
 
      } catch(e) {
-         clearStore();
+         clearToken();
          throw e;
      }
-}
 
+}
 
 export const accountLogout = async (): Promise<Error | void> => {
 
@@ -68,8 +81,12 @@ export const accountLogout = async (): Promise<Error | void> => {
         // post logout to backend
         await postLogout();
 
-        // remove key and crimataId
+        // remove key and account
-        clearStore();
+        clearToken();
+        account = null;
+
+        // push account state to browser
+        ipcEmit("set-account", account);
 
         // kill crimata platform session
         endSession();
@@ -83,4 +100,24 @@ export const accountLogout = async (): Promise<Error | void> => {
 
 }
 
+// logout when auth fails on platform end
+backgroundMitt.on("close-auth-fail", async (_payload: any) => {
+
+    await accountLogout();
+
+});
+
+// emits state of account, version, and UI
+export const updateAppState = () => {
+
+    ipcEmit("set-account", account);
+
+    ipcEmit("set-version", app.getVersion());
+
+    updateAppUI();
+
+}
+
+
+
 

src/audio.ts

@@ -1,187 +0,0 @@
-/* eslint @typescript-eslint/no-var-requires: "off" */
-
-"use strict";
-
-// where the audio goes
-let buffer: ArrayBuffer[] = [];
-
-// place audio data in buffer
-export const collect: IpcListenerCallback<ArrayBuffer> = (chunk) => {
-    if (chunk) buffer.push(chunk);
-}
-
-// return audio and clear buffer
-export const flush = async () => {
-    const bufferCopy = buffer;
-    buffer = [];
-    return bufferCopy;
-}
-
-// import { backgroundMitt } from '@/modules/emitter';
-// const portAudio = require('naudiodon');
-
-// // Audio in and out stream objects.
-// let ai: typeof portAudio.AudioIO | boolean = false;
-// let ao: typeof portAudio.AudioIO | boolean = false;
-
-// // Whether activly recording.
-// let record = false;
-
-// const audioContainer = {
-//     input: '',
-// }
-
-// const audioOptions = {
-//     channelCount: 1,
-//     sampleFormat: 16,
-//     sampleRate: 16000,
-//     deviceId: -1,
-//     closeOnError: false,
-// }
-
-// export const toggleRecord = (): void => { record = !record };
-
-
-// export const fetchAudioInput = (): Promise<Error | string> => (
-
-//     new Promise((resolve, reject) => {
-
-//         try {
-//             resolve(audioContainer.input);
-//             toggleRecord();
-//         } catch (e) {
-//             reject(new Error('Failed to fetch the audio.'))
-//         }
-
-//     })
-// )
-
-
-// // Main audio function run by run.ts module.
-// export function initAudioIO(): void {
-//     console.log("AUDIO:Starting io streams.")
-
-//     if (!ai) {
-
-//         // Initialize and start input stream.
-//         ai = new portAudio.AudioIO({ inOptions: audioOptions });
-//         ai.setEncoding("hex");
-//         ai.start();
-
-//         // On each data chunk...
-//         ai.on('data', (chunk: string) => {
-
-//             // If recording, we capture the data.
-//             if (record) {
-//                 console.log('AUDIO:Recording...')
-//                 audioContainer.input += chunk;
-//             }
-
-//             // Else, we don't capture and also clear audioContainer.
-//             else {
-//                 if (audioContainer.input.length) {
-//                     audioContainer.input = "";
-//                 }
-//             }
-
-//         });
-//     }
-
-//     if (!ao) {
-
-//         // Initialize and start input stream.
-//         ao = new portAudio.AudioIO({ outOptions: audioOptions });
-//         ao.start();
-
-//     }
-// }
-
-
-// // ---Audio playback--------------------------------------------
-
-// // Split Buffer into an array of len-sized Buffers.
-// function bufSplit(buf: Buffer, len: number): Array<Buffer> {
-//     const chunks = [];
-//     let i = 0;
-//     let L = len;
-
-//     while(i < buf.byteLength) {
-//       chunks.push(buf.slice(i, L));
-//       i = L;
-//       L += len;
-//     }
-
-//     return chunks;
-// }
-
-// // Audio playback.
-// export function play(input: string): void {
-
-//     // Format the audio.
-//     const audio = bufSplit(
-//         Buffer.from(input as string, 'hex'),
-//         8192
-//     );
-
-//     // Called on end of write.
-//     const callback = () => {
-
-//         // We stop audio playback anim.
-//         backgroundMitt.emit('ipc-renderer', {
-//             endpoint: 'stop-playback-anim'
-//         });
-
-//     }
-
-//     write();
-
-//     // Iterate through audio array and write buffers to portAudio writable.
-//     function write() {
-//         let chunk: Buffer;
-//         let ok = true;
-//         let i = 0;
-
-//         do {
-//             chunk = audio[i];
-//             if (i === audio.length - 1) {
-//                 // write last chunk.
-//                 ao.write(chunk, null, callback);
-//             } else {
-//                 // check for backpreassure.
-//                 ok = ao.write(chunk, null);
-//             }
-//             i++;
-//         } while (i < audio.length && ok);
-
-//         if (i < audio.length) {
-//             // Had to stop early!
-//             // Write some more once it drains.
-//             ao.once('drain', write);
-//         }
-//     }
-// }
-
-// // -------------------------------------------------------------
-
-// // Get's called on window close.
-// export async function stopStream() {
-//     console.log("AUDIO:Stopping audio stream.")
-//     if (ai) {
-//         try {
-//             await ai.quit()
-//         } catch(e){
-//             console.log('AUDIO: Failed to shutdown audio input.');
-//             throw e;
-//         }
-//     }
-//     if (ao) {
-//         try {
-//             await ao.quit()
-//         } catch(e){
-//             console.log('AUDIO: Failed to shutdown audio output.');
-//             throw e;
-//         }
-//     }
-// }
-
-

src/auth.ts

@@ -1,13 +1,5 @@
-
 export const parseAuthRes = (authRes: any) => {
     const token = authRes.headers['set-cookie'][0].split(";")[0].split("=")[1] as string;
-    const profile = authRes.data as Profile;
+    const crimataId = authRes.data as string;
-    return {
+    return {token, crimataId}
-        token,
+};
-        profile
-    }
-};
-
-
-
-

src/composables/useMessageCanvas.ts

@@ -1,36 +0,0 @@
-
-
-
-export default class Canvas {
-
-    messages: Message[];
-
-    /* seed canvas with messages on init */
-    constructor(messages: Message[]) {
-        this.messages = messages;
-        ipcEmit("seed-view", this.messages);
-    }
-
-    /* add a new message to the canvas */
-    add(message: Message) {
-        this.messages.push(message);
-        ipcEmit("update-view", message);
-    }
-
-    /* update an existing message */
-    update(message: Message) {
-
-        /* get the target message */
-        let target_message = this.messages.filter((m: Message) => {
-            return m.uid = message.uid;
-        })[0];
-
-        /* replace the target message */
-        if (target_message) {
-            target_message = message;
-            ipcEmit("update-view", message);
-        }
-
-    }
-
-}

src/composables/useWebsockets.ts

@@ -76,7 +76,6 @@ export default function useWebSockets(
                 setTimeout(() => {
                     connect(socketUrl, secret), _reconnectTimeout
                 });
-
             }
 
         });

src/ipc/handlers.ts

@@ -1,7 +1,7 @@
 
 "use strict";
 
-import { accountLogin, accountLogout, accountProfile } from "@/account";
+import { accountLogin, accountLogout } from "@/account";
 import { IpcHandler } from "@/composables/useIpcMain";
 import { flush } from "@/audio";
 
@@ -24,5 +24,3 @@ export const getAudioHandler = new IpcHandler({
     channel: GET_AUDIO_CHANNEL,
     handlerCallback: flush
 });
-
-

src/ipc/listeners.ts

@@ -2,25 +2,19 @@
 import { IpcListener } from "@/composables/useIpcMain"
 import { sendMessage } from '@/session';
 import { collect } from "@/audio";
-import { updateAppState } from "@/session";
+import { updateAppState } from "@/account";
 import { onNavBar } from "@/window";
+import { toggleRecord } from "@/audio";
 
 const CLIENT_MESSAGE_CHANNEL = "post-session-send"
-const GET_AUDIO_CHANNEL = "post-audio-collect";
 const APP_MOUNT_CHANNEL = "post-app-mount";
 const NAV_BAR_CHANNEL = "post-nav-bar";
-const WINDOW_BLUR_CHANNEL = "post-window-focus";
 
-export const messageListener = new IpcListener<Message>({
+export const messageListener = new IpcListener<Raw | Request>({
     channel: CLIENT_MESSAGE_CHANNEL,
     listenerCallback: sendMessage
 });
 
-export const audioChunkListener = new IpcListener<ArrayBuffer>({
-    channel: GET_AUDIO_CHANNEL,
-    listenerCallback: collect
-});
-
 export const appMountListener = new IpcListener<null>({
     channel: APP_MOUNT_CHANNEL,
     listenerCallback: updateAppState
@@ -31,16 +25,7 @@ export const navBarListener = new IpcListener({
     listenerCallback: onNavBar
 });
 
-
+export const recordingListener = new IpcListener({
-const onWindowFocus: IpcListenerCallback<{ isFocused: boolean }> = (payload) => {
+    channel: RECORDING_CHANNEL,
-    if (payload.isFocused) {
+    listenerCallback: toggleRecord
-        console.log('window is focused')
+});
-    } else {
-        console.log('window is blurred')
-    }
-}
-
-export const windowFocusListener = new IpcListener({
-    channel: WINDOW_BLUR_CHANNEL,
-    listenerCallback: onWindowFocus
-});

src/main.ts

@@ -11,10 +11,8 @@
 
 import initIpcMain from "@/ipc/index";
 import  { accountAuth } from "./account";
-import { launchSession, updateAppState } from "./session";
 import createWindow from "./window";
 
-let authState: AuthState | null;
 
 export default async function main() {
 
@@ -24,16 +22,7 @@ export default async function main() {
     /* launch browser window */
     await createWindow();
 
-    try {
+    /* try to authenticate with token */
-        authState = await accountAuth() as AuthState;
+    await accountAuth();
-    } catch(e) {
-        console.log('AUTH:', e);
-        authState = null;
-    } finally {
-        if (authState) {
-            launchSession(authState.token as string);
-        }
-        updateAppState();
-    }
 
 }

src/profile.ts

@@ -0,0 +1,22 @@
+import { ipcEmit } from "@/composables/useEmitter";
+
+
+export default class ProfileHandler {
+
+    profile: Profile;
+
+    constructor(profile: Profile) {
+        this.profile = profile;
+        this.emit();
+    }
+
+    emit() {
+        ipcEmit("set-profile", this.profile);
+    }
+
+    update(update: Update) {
+        this.profile = update.data as Profile;
+        this.emit()
+    }
+
+}

src/render/App.vue

@@ -1,15 +1,10 @@
 <template>
   <!-- Only render when profile has been set -->
-  <main id="app" v-if="authComplete">
+  <main id="app" v-if="ready">
 
     <Header />
 
-    <Messenger
+    <Messenger v-if="account"/>
-        v-if="profile"
-    />
-
-    <!-- Main Components
-    -->
     <Login v-else />
 
   </main>
@@ -21,15 +16,14 @@
 
 <script lang="ts">
 
-import { defineComponent, onMounted, onUnmounted } from "vue";
+import { defineComponent, onMounted } from "vue";
-import { IpcRendererEvent } from "electron";
 
 import Splash from "@/render/components/splash.vue";
 import Messenger from "@/render/components/messenger.vue";
 import Login from "@/render/components/login.vue";
 import Header from "@/render/components/header.vue";
 
-import { profile, authComplete } from "@/render/shared/profile";
+import { ready, account, setAccount, clearAccount } from "@/render/shared/account";
 import { postAppMount } from "@/render/ipc";
 
 export default defineComponent({
@@ -43,30 +37,15 @@ export default defineComponent({
 
   setup() {
 
-    const onFocus = () => {
-        console.log('window is focused');
-    }
-
-    const onBlur = () => {
-        console.log('window is blurred');
-    }
-
     onMounted(() => {
-        // subscribe to visibility change events
-        window.addEventListener('blur', onBlur);
-        window.addEventListener('focus', onFocus);
 
         postAppMount()
-    });
 
-    onUnmounted(() => {
-        window.removeEventListener("blur", onBlur);
-        window.removeEventListener("focus", onFocus);
     });
 
     return {
-        authComplete,
+        account,
-        profile
+        ready
     }
   }
 })

src/render/assets/connectLogo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24.87" height="23.001" viewBox="0 0 24.87 23.001">
+  <g id="Group_541" data-name="Group 541" 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 11.948)">
+          <circle id="Ellipse_50" data-name="Ellipse 50" cx="5.527" cy="5.527" r="5.527" transform="translate(0 0)" fill="#383838"/>
+          <circle id="Ellipse_51" data-name="Ellipse 51" cx="5.527" cy="5.527" r="5.527" transform="translate(13.817 0)" fill="#383838"/>
+        </g>
+        <circle id="Ellipse_52" data-name="Ellipse 52" cx="5.527" cy="5.527" r="5.527" transform="translate(6.898 0)" fill="#383838"/>
+        <path id="Path_150" data-name="Path 150" d="M36.27,83.67" transform="translate(-30.733 -66.196)" fill="#ff0"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/render/assets/crimataAvatar.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+  <g id="Group_604" data-name="Group 604" transform="translate(-366 -464)">
+    <circle id="Ellipse_69" data-name="Ellipse 69" cx="15" cy="15" r="15" transform="translate(366 464)" fill="#fff"/>
+    <g id="Group_603" data-name="Group 603">
+      <circle id="Ellipse_50" data-name="Ellipse 50" cx="3.116" cy="3.116" r="3.116" transform="translate(374 479.252)" fill="#383838"/>
+      <circle id="Ellipse_51" data-name="Ellipse 51" cx="3.116" cy="3.116" r="3.116" transform="translate(381.789 479.252)" fill="#383838"/>
+      <circle id="Ellipse_52" data-name="Ellipse 52" cx="3.116" cy="3.116" r="3.116" transform="translate(377.889 472.517)" fill="#383838"/>
+    </g>
+  </g>
+</svg>

src/render/assets/settingsIcon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="5" viewBox="0 0 25 5">
+  <g id="Group_611" data-name="Group 611" transform="translate(-4032 499)">
+    <circle id="Ellipse_71" data-name="Ellipse 71" cx="2.5" cy="2.5" r="2.5" transform="translate(4032 -499)" fill="#9b9b9b"/>
+    <circle id="Ellipse_72" data-name="Ellipse 72" cx="2.5" cy="2.5" r="2.5" transform="translate(4042 -499)" fill="#9b9b9b"/>
+    <circle id="Ellipse_73" data-name="Ellipse 73" cx="2.5" cy="2.5" r="2.5" transform="translate(4052 -499)" fill="#9b9b9b"/>
+  </g>
+</svg>

src/render/components/bubble.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="`bubble ${modifier}-bubble ${modifier}-${child}`">
-    {{ content }}
+    <div v-show="!seen" class="notify"></div>
+    {{ text }}
   </div>
 </template>
 
@@ -11,7 +12,7 @@
  export default defineComponent({
   name: "Bubble",
 
-  props: ["modifier", "content", "child"],
+  props: ["modifier", "text", "child", "seen"],
 
  })
 
@@ -70,4 +71,28 @@
   border-top-right-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);
+  }
+}
+
 </style>

src/render/components/connectionStatus.vue

@@ -1,20 +1,34 @@
 <template>
-    <div class="statusContainer">
+  <div id="container">
-        <div>{{status}}</div>
+    <img id="logo" src="@/render/assets/connectLogo.svg">
+    <div id="connect">
+      <div class="dot"></div>
     </div>
-
+  </div>
 </template>
 
 
 <script lang="ts">
 
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, watch } from 'vue'
-import { status } from "@/render/shared/connectionStatus";
+import { hiddenState, useAnim, status, show, hide } from "@/render/shared/connectionStatus";
 
 export default defineComponent({
     name: "ConnectionStatus",
 
     setup() {
+
+        watch(status, (val, _oldval) => {
+          if (val === "Connected" || val === "Nominal") {
+            if (!hiddenState) hide();
+          } else {
+            if (hiddenState)
+            show();
+          }
+        });
+
+        onMounted(useAnim);
+
         return {
             status
         }
@@ -25,13 +39,65 @@ export default defineComponent({
 </script>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
-.statusContainer {
+
-    width: 100vw;
+#container {
-    display: flex;
+  position: fixed;
-    justify-content: center;
+  width: 100vw;
-    :first-child {
+  height: 54px;
-        margin-right: 2px;
+  display: flex;
-    }
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
 }
+
+#connect {
+  opacity: 0;
+}
+
+shape {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #48E065;
+}
+
+.dot {
+  @extend shape;
+  position: relative;
+  transform: translateX(-15px);
+  animation: flashing 1s infinite linear alternate;
+  animation-delay: .25s;
+}
+
+.dot::before, .dot::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+}
+
+.dot::before {
+  @extend shape;
+  left: -9px;
+  animation: flashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.dot::after {
+  @extend shape;
+  left: 9px;
+  animation: flashing 1s infinite alternate;
+  animation-delay: 0.5s;
+}
+
+@keyframes flashing {
+  0% {
+    background-color: #48E065;
+  }
+  50%,
+  100% {
+    background-color: #9B9B9B;
+  }
+}
+
 </style>

src/render/components/context.vue

@@ -1,35 +1,27 @@
 <template>
+
   <span :class="`context ${modifier}-context`">
-    <div v-if="modifier==='ai'" class="avatar"></div>
+
-    {{ contextRef }}
+    <div v-if="context.img" class="avatar">      
+      <img v-if="context.img === 'crimata'" :src="require('@/render/assets/crimataAvatar.svg')">
+      <div v-else>{{ context.img }}</div>
+    </div>
+
+    {{ context.text == false ? " " : context.text }}
+
   </span>
+
 </template>
 
 <script lang='ts'>
 
- import { defineComponent, ref, watch } from 'vue';
+ import { defineComponent } from 'vue';
- import { annotateAnim } from "@/render/components/controllers/helpers";
 
  export default defineComponent({
   name: "Context",
 
   props: ["modifier", "context", "uid"],
 
-  setup(props) {
-
-    const contextRef = ref(" ");
-    contextRef.value = props.context;
-
-    watch(() => props.context, (val: string, _oldval: string) => {
-      annotateAnim(props.uid, val, contextRef);
-    });
-
-    return {
-      contextRef
-    };
-
-  }
-
  })
 
 </script>
@@ -56,11 +48,14 @@
 }
 
 .avatar {
-  margin-right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 30px;
   height: 30px;
   background-color: white;
   border-radius: 15px;
+  margin-right: 5px;
 }
 
 .playing {

src/render/components/controllers/helpers.ts

@@ -85,31 +85,6 @@ export function animateAudioInput () {
 
 }
 
-// animate a message annotation.
-//! probably could be improved.
-export function annotateAnim (uid: string, val: string, contextRef: Ref) {
-
-  anime({
-    targets: `#${uid} span`,
-    opacity: [1, 0],
-    duration: 250,
-    easing: 'easeOutExpo'
-  })
-
-  .finished.then(() => {
-    contextRef.value = val; 
-  })
-
-  .then(() => {
-    anime({
-      targets: `#${uid} span`,
-      opacity: [0, 1],
-      duration: 250,
-      easing: 'easeOutExpo'
-    })
-  })
-}
-
 // Given index and length of content, return message child status.
 export function calcChild (index: number, len: number) {
   if (len === 1) {

src/render/components/header.vue

@@ -9,7 +9,6 @@
         class="menuButton minimizeButton"
         @click.prevent="postNavBarMin"
       />
-      <connection-status />
     </span>
 </template>
 
@@ -19,11 +18,8 @@
     import { defineComponent } from "vue";
     import { postNavBar } from "@/render/ipc";
 
-    import ConnectionStatus from "./connectionStatus.vue";
-
     export default defineComponent({
         name: "Header",
-        components: { ConnectionStatus },
         setup() {
             const postNavBarExit = () => postNavBar('close');
             const postNavBarMin = () => postNavBar('min');

src/render/components/inputItem.vue

@@ -5,8 +5,9 @@
     :class="{ playing: recording }"
     :style="{ top: `${elementY}px`, left: `${elementX}px` }"
   >
-    <div>{{ initials }}</div>
 
+    <!-- show the profile photo in the center of the input item -->
+    <div>{{ profile.photo }}</div>
 
     <!-- Recording animation on space bar -->
     <span v-if="recording" class="play"></span>
@@ -28,7 +29,7 @@
 
 import { defineComponent } from "vue";
 import draggify from "@/render/composables/useDraggify";
-
+import { profile } from "@/render/shared/profile";
 
 import useTextInputController from
   "@/render/components/controllers/inputItem.control.text";
@@ -38,8 +39,6 @@ import useTextInputController from
 export default defineComponent({
   name: "InputItem",
 
-  props: ["initials"],
-
   setup() {
 
     // Default values for position.
@@ -55,6 +54,7 @@ export default defineComponent({
     const recording = false;
 
     return {
+      profile,
       elementX,
       elementY,
       recording

src/render/components/login.vue

@@ -1,14 +1,8 @@
 <template>
   <form id="login" @submit.prevent="submitForm">
 
-
-    <!-- login title -->
-    <div id="loginTitle">
-      <div>Login</div>
-    </div>
-
     <!-- username and password forms -->
-    <div id="loginBox">
+    <div id="form">
       <!-- username -->
       <div class="inputBox">
         <input class="input" type="text" v-model="usr" />
@@ -24,18 +18,15 @@
     </div>
 
     <!-- submit button; position: fixed -->
-    <button class="submitButton button" type="submit">Submit</button>
+    <button class="submit button" type="submit">Login</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 { setProfile } from '@/render/shared/profile';
 import { invokeLogin } from "@/render/ipc";
 
 export default defineComponent({
@@ -50,21 +41,26 @@ export default defineComponent({
     const submitForm = async () => {
 
       try {
-
+          await invokeLogin({email: usr.value, password: pwd.value});
-          const profile = await invokeLogin({
-              email: usr.value,
-              password: pwd.value
-          }) as Profile;
-
-          setProfile(profile)
-
-
       } catch(e) {
+          shake("form");
           console.log(e);
       }
 
     }
 
+    const shake = (elementId: string) => {
+      const el = document.getElementById(elementId);
+
+      if (el) 
+      el.classList.remove("shake");
+      
+      setTimeout(() => {
+        if (el) el.classList.add("shake");
+      }, 250);
+
+    }
+
     return {
       usr,
       pwd,
@@ -87,16 +83,7 @@ export default defineComponent({
   justify-content: center;
 }
 
-#loginTitle {
+#form {
-  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;
@@ -132,7 +119,7 @@ export default defineComponent({
   margin-left: 15px;
 }
 
-.submitButton {
+.submit {
   font-family: "SF Compact Display";
   position: fixed;
   margin-top: 141px;
@@ -144,21 +131,10 @@ export default defineComponent({
   font-weight: bold;
 }
 
-.submitButton:active {
+.submit: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;
@@ -169,12 +145,29 @@ export default defineComponent({
   cursor: pointer;
 }
 
-.invalid {
+.shake {
-    margin-bottom: 30px;
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-    font-family: "SF Compact Display";
+  transform: translate3d(0, 0, 0);
-    font-weight: bold;
+  backface-visibility: hidden;
-    font-size: 14px;
+  perspective: 1000px;
-    color: #F53737;
+}
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
 }
 
 </style>

src/render/components/message.vue

@@ -4,13 +4,14 @@
     <Bubble
       v-for="(val, index) in content"
       :modifier="modifier"
-      :content="val"
+      :text="val.text"
       :child="calcChild(index, content.length)"
+      :seen="seen"
     />
 
-    <Context
+    <Context 
       :modifier="modifier"
-      :context="context" 
+      :context="context"
       :uid="uid"
     />
 
@@ -19,7 +20,7 @@
 
 <script lang='ts'>
 
- import { defineComponent } from 'vue';
+ import { defineComponent, onMounted } from 'vue';
  import Bubble from "@/render/components/bubble.vue";
  import Context from "@/render/components/context.vue";
  import { calcChild } from "@/render/components/controllers/helpers";
@@ -27,7 +28,7 @@
  export default defineComponent({
   name: "Message",
 
-  props: ["modifier", "content", "context", "uid"],
+  props: ["modifier", "content", "context", "seen", "uid"],
 
   components: {
     Bubble,
@@ -36,6 +37,15 @@
 
   setup() {
 
+    onMounted(() => {
+
+      const messengerEl = document.getElementById("messenger");
+
+      if (messengerEl)
+      messengerEl.dispatchEvent(new CustomEvent('adjust-scroll'))
+
+    });
+
     return {
       calcChild
     };
@@ -55,7 +65,7 @@
   padding-top: 9px;
   padding-bottom: 9px;
   animation-name: message-init-anim;
-  animation-duration: 0.25s; 
+  animation-duration: 0.25s;
 }
 
 @keyframes message-init-anim {

src/render/components/messenger.vue

@@ -1,9 +1,10 @@
 <template>
 
   <!-- Position fixed items -->
-  <InputItem :initials="profile.initials"/>
   <Settings />
+  <ConnectionStatus />
   <div id="recIcon" />
+  <InputItem />
 
   <!-- List of message bubbles. -->
   <div id="messenger">
@@ -12,6 +13,7 @@
       :modifier="message.modifier"
       :content="message.content"
       :context="message.context"
+      :seen="message.seen"
       :uid="message.uid"
     />
   </div>
@@ -20,24 +22,63 @@
 
 <script lang="ts">
 
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, onUnmounted } from "vue";
 import InputItem from "@/render/components/inputItem.vue";
 import Settings from "@/render/components/settings.vue";
 import Message from "@/render/components/message.vue";
+import ConnectionStatus from "./connectionStatus.vue";
 
 import { profile } from "@/render/shared/profile";
 import { messages } from "@/render/shared/messages";
+import useScroll from "@/render/composables/useScroll";
+import { postMessage } from "@/render/ipc";
 
 export default defineComponent({
   name: "Messenger",
 
   components: {
+    ConnectionStatus,
     InputItem,
     Settings,
-    Message
+    Message,
   },
 
   setup() {
+
+    const onFocus = () => {
+        postMessage({
+          intent: "focus",
+          params: { "focus": true },
+          epic: false,
+          confidence: 1.0
+        } as PlatformRequest);
+    }
+
+    const onBlur = () => {
+        postMessage({
+          intent: "focus",
+          params: { "focus": false },
+          epic: false,
+          confidence: 1.0
+        } as PlatformRequest);
+    }
+
+    onMounted(() => {
+
+      useScroll("messenger");
+
+      window.addEventListener('blur', onBlur);
+      window.addEventListener('focus', onFocus);
+
+    });
+
+    onUnmounted(() => {
+
+        window.removeEventListener("blur", onBlur);
+        window.removeEventListener("focus", onFocus);
+
+    });
+
     return {
       messages,
       profile

src/render/components/settings.vue

@@ -1,35 +1,38 @@
 <template>
 
-  <!-- Settings icon. -->
+  <!-- Settings content -->
-  <button
+  <div v-if="toggleSettings" id="settings" >
-    class="settingsIcon"
-    v-if="toggleSettings == false"
-    @click="onActive"
-  >
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-  </button>
 
-  <!-- Settings div. -->
+    <p class="account">{{ `Hi, ${account}` }}</p>
-  <div id="settings" v-show="toggleSettings">
-  </div>
 
     <button
-      v-if="toggleSettings"
+      class="logout"
-      class="settingsOption"
       @click="onLogout"
     >
       Logout
     </button>
 
+    <p class="version">{{ `Version ${version}` }}</p>
+
+  </div>
+
+  <!-- Icon -->
+  <button
+    v-else
+    class="icon"
+    @click="onActive"
+  >
+    <img src="@/render/assets/settingsIcon.svg">
+  </button>
+
 </template>
 
 <script lang="ts">
 
   import { defineComponent, ref } from "vue";
-  import { clearProfile } from "@/render/shared/profile"
   import { invokeLogout } from "@/render/ipc";
+  import { version } from "@/render/shared/version";
+  import { ready, account, setAccount, clearAccount } from "@/render/shared/account";
 
   export default defineComponent({
     name: "Settings",
@@ -58,7 +61,6 @@
 
         try {
             await invokeLogout();
-            clearProfile();
         } catch(e) {
             console.log('error')
         }
@@ -66,6 +68,8 @@
       }
 
       return {
+        account,
+        version,
         onActive,
         toggleSettings,
         onLogout
@@ -79,67 +83,52 @@
 
 #settings {
   position: fixed;
-
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(235, 235, 235, 0.75);
+  z-index: 4;
   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
+    background-color: rgba(235, 235, 235, 0);
   }
   to {
-    opacity: 0.75
+    background-color: rgba(235, 235, 235, 0.75);
   }
 }
 
-.settingsIcon {
+.icon {
   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 {
+.icon:hover {
   cursor: pointer;
 }
 
-.settingsButtonDot {
+.account {
-  width: 5px;
+  font-size: 12px;
-  height: 5px;
+  font-weight: bold;
-
+  margin-bottom: 25px;
-  margin: 2px;
-  border-radius: 2.5px;
-  background-color: #9B9B9B;
-
 }
 
-.settingsOption {
+.logout {
   font-family: "SF Compact Display";
   background-color: #B7B7B7;
   padding: 10px 30px;
@@ -149,16 +138,21 @@
   border: none;
   outline: none;
   text-decoration: none;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5;
 }
 
-.settingsOption:hover {
+.logout:hover {
   cursor: pointer;
 }
 
+.version {
+  position: absolute;
+  left: 50%;
+  top: 75%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: #575757;
+}
+
 </style>
 

src/render/composables/useScroll.ts

@@ -1,33 +1,25 @@
 
-
 export default function useScroll(elementId: string) {
 
-  // Update isScrolledToBottom
+  const el = document.getElementById(elementId);
-  const isScrolledToBottom = () => {
-    const el = document.getElementById(elementId);
 
+  const isBottom = () => {
     if (el) {
-      return el.scrollHeight - el.clientHeight <= el.scrollTop + 30;
+      return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
     }
-
   }
 
-  // Adjust scroll after we add content to the messenger.
   const adjustScroll = () => {
-    const el = document.getElementById(elementId);
-
     if (el) {
       el.scrollTo({
         top: el.scrollHeight - el.clientHeight,
         behavior: 'smooth'
       });
     }
-
   }
 
-  return {
+  if (el)
-    isScrolledToBottom,
+  el.addEventListener('adjust-scroll', adjustScroll);
-    adjustScroll, 
+  window.addEventListener('resize', adjustScroll);
-  };
   
-}
+}

src/render/ipc.ts

@@ -12,7 +12,7 @@ const { post, invoke } = useIpc();
 
 
 export const invokeLogin = async (
-    payload: LoginPayload
+    payload: AccountCredentials
 ): Promise<Profile | Error> => (
     await invoke('invoke-account-login', payload)
 );
@@ -41,7 +41,7 @@ export const invokeReturnAudio = async (): Promise<ArrayBuffer[] | Error> => (
  *
  */
 
-export const postMessage = (payload: Raw): void => (
+export const postMessage = (payload: Raw | PlatformRequest): void => (
     post('post-session-send', payload)
 );
 

src/render/listeners.ts

@@ -3,11 +3,20 @@ import { IpcRendererListener } from "./composables/useIpcRend"
 /*
  * Shared state imports
  * */
-import { setProfile } from "./shared/profile";
+import { 
-import { setMessages, addMessage, updateMessage, deleteMessage } from "./shared/messages";
+    setMessages, 
+    addMessage, 
+    updateMessage, 
+    deleteMessage 
+} from "./shared/messages";
+import { setAccount } from "./shared/account";
+import { setProfile } from "./shared/profile"; 
+import { setVersion } from "./shared/version";
 import { setConnectionStatus } from "./shared/connectionStatus";
 
+const SET_ACCOUNT_CHANNEL = "set-account";
 const SET_PROFILE_CHANNEL = "set-profile";
+const SET_VERSION_CHANNEL = "set-version";
 
 const INIT_MESSAGES_CHANNEL = "init-messages";
 const ADD_MESSAGE_CHANNEL = "add-message";
@@ -15,6 +24,16 @@ const UPDATE_MESSAGE_CHANNEL = "update-message";
 const DELETE_MESSAGE_CHANNEL = "delete-message";
 const CONNECTION_STATUS_CHANNEL = "set-connection-status";
 
+export const setAccountListener = new IpcRendererListener({
+    channel: SET_ACCOUNT_CHANNEL,
+    listenerCallback: setAccount
+});
+
+export const setVersionListener = new IpcRendererListener({
+    channel: SET_VERSION_CHANNEL,
+    listenerCallback: setVersion
+});
+
 export const setProfileListener = new IpcRendererListener({
     channel: SET_PROFILE_CHANNEL,
     listenerCallback: setProfile
@@ -44,4 +63,4 @@ export const deleteMessagesListener = new IpcRendererListener({
 export const connectionStatusListener = new IpcRendererListener({
     channel: CONNECTION_STATUS_CHANNEL,
     listenerCallback: setConnectionStatus
-});
+});

src/render/shared/account.ts

@@ -0,0 +1,26 @@
+// shared
+import { ref } from "vue";
+
+export const ready = ref(false);
+export const account = ref();
+
+export const setAccount: IpcListenerCallback<string | null> = (payload) => {
+    payload ? account.value = payload : clearAccount();
+    showRender();
+};
+
+export const clearAccount = () => {
+    console.log("Clearing account");
+    account.value = null;
+}
+
+const showRender = () => {
+    ready.value = true;
+}
+
+export default {
+    ready,
+    account,
+    setAccount,
+    clearAccount
+};

src/render/shared/connectionStatus.ts

@@ -1,12 +1,65 @@
 // shared
 import { ref } from "vue";
+import anime from "animejs";
 
 export const status = ref("");
 
+export let hiddenState = true;
+
+let animateLogo: anime.AnimeInstance;
+let animateConnect: anime.AnimeInstance;
+
+export function useAnim() {
+
+    animateLogo = anime({
+        targets: '#logo',
+        translateX: [0, 15],
+        duration: 500,
+        autoplay: false,
+        easing: 'easeInOutBack'
+    });
+
+    animateConnect = anime({
+        targets: '#connect',
+        translateX: [0, -15],
+        opacity: [0, 1],
+        duration: 500,
+        autoplay: false,
+        easing: 'easeInOutBack'
+    });
+
+}
+
+export function show() {
+    if (animateLogo && animateConnect) {
+        animateLogo.direction = "normal";
+        animateConnect.direction = "normal";
+        animateLogo.play();
+        animateConnect.play();
+        hiddenState = false;
+    }
+}
+
+export function hide() {
+    if (animateLogo && animateConnect) {
+        animateLogo.direction = "reverse";
+        animateConnect.direction = "reverse";
+        animateLogo.play();
+        animateConnect.play();
+        hiddenState = true;
+    }
+}
+
 export const setConnectionStatus: IpcListenerCallback<string> = (payload) => {
     status.value = payload;
 };
 
 export default {
-    status
+    hiddenState,
+    useAnim,
+    status,
+    show,
+    hide
 };
+
+

src/render/shared/messages.ts

@@ -1,26 +1,14 @@
 // shared
 import { ref, Ref } from "vue";
-import useScroll from "@/render/composables/useScroll";
-
-const { isScrolledToBottom, adjustScroll } = useScroll("messenger");
 
 export const messages: Ref<Array<Message>> = ref([]);
 
 export const setMessages: IpcListenerCallback<Array<Message>> = (payload) => {
-    messages.value = payload as Array<Message>;
+    messages.value = payload;
-    setTimeout(() => {
-        adjustScroll();
-    }, 1000);
 }
 
 export const addMessage: IpcListenerCallback<Message> = (payload) => {
-    const bottom = isScrolledToBottom();
     messages.value.push(payload as Message);
-    if (bottom) {
-        setTimeout(() => {
-            adjustScroll();
-        }, 10);
-    }
 }
 
 export const updateMessage: IpcListenerCallback<Annotation> = (payload) => {
@@ -31,11 +19,15 @@ export const updateMessage: IpcListenerCallback<Annotation> = (payload) => {
         if (messages.value[i].uid == annotation.uid) {
 
             if (annotation.name == "content") {
-                messages.value[i].content = annotation.data as string[];
+                messages.value[i].content = annotation.data as Content[];
             }
 
             if (annotation.name == "context") {
-                messages.value[i].context = annotation.data as string;
+                messages.value[i].context = annotation.data as Context;
+            }
+
+            if (annotation.name == "seen") {
+                messages.value[i].seen = annotation.data as boolean;
             }
 
         }
@@ -56,6 +48,10 @@ export const deleteMessage: IpcListenerCallback<string> = (payload) => {
 
 }
 
+export const resetMessages = () => {
+    messages.value = [];
+}
+
 export default {
     messages,
     setMessages,

src/render/shared/profile.ts

@@ -1,27 +1,19 @@
 // shared
 import { ref } from "vue";
 
-export const profile = ref();
+class Profile implements Profile{
+    crimata_id = "";
+    name = "";
+    photo = "";
+}
 
-export const authComplete = ref(false);
+export const profile = ref(new Profile());
 
-export const setProfile: IpcListenerCallback<Profile | null> = (payload) => {
+export const setProfile: IpcListenerCallback<Profile> = (payload) => {
-    payload ? profile.value = payload : clearProfile();
+    profile.value = payload;
-    showRender();
-};
-
-export const clearProfile = () => {
-    profile.value = null;
-};
-
-export const showRender = () => {
-    authComplete.value = true;
 };
 
 export default {
-    setProfile,
-    clearProfile,
     profile,
-    showRender,
+    setProfile
-    authComplete,
+};
-};

src/render/shared/version.ts

@@ -0,0 +1,12 @@
+// shared
+import { ref } from "vue";
+
+export const version = ref();
+
+export const setVersion: IpcListenerCallback<Profile | null> = (payload) => {
+    version.value = payload;
+};
+
+export default {
+    setVersion
+}

src/session.ts

@@ -1,37 +1,28 @@
 
-
-
-
 // import useAudio from "@/audio";
-import Messages from "./messages";
+import UIState from "@/uiState";
-import { getProfile } from "./store";
+import { config } from "@/config";
 import useWebsockets from "./composables/useWebsockets";
-import {config} from "@/config";
+import { backgroundMitt, ipcEmit } from "@/composables/useEmitter";
-import { ipcEmit } from "@/composables/useEmitter";
 
-/* start and stop audio functionality */
+// UI state
-// const { initAudio, closeAudio } = useAudio();
+let uiState = new UIState()
 
-let messages: Messages;
+// let audio = new Audio();
 
 
 const onMessageCallback = (payload: string) => {
 
-    const message = JSON.parse(payload);
+    if (payload === "CLOSE_AUTH_FAIL") {
-
+        backgroundMitt.emit("close-auth-fail");
-    if (message === "CLOSE_AUTH_FAIL") {
+        return
-        console.log("deauthenticating");
     }
 
-    else if (message.header === "init") {
+    const message = JSON.parse(payload) as ClientProtocol;
-        messages = new Messages(message.body);
-    }
 
-    else {
+    if (message.header === "init") {
-        if (messages) {
+        uiState.set(message.body as Init);
-            messages.update(message.body);
+    } else uiState.update(message.body as Update);
-        }
-    }
 
 }
 
@@ -39,17 +30,6 @@ const connectionStatusCallback = (status: string) => {
     ipcEmit('set-connection-status', status);
 }
 
-
-export const updateAppState = (): void => {
-    const profile = getProfile();
-
-    ipcEmit("set-profile", profile);
-
-    if (messages)
-    messages.emit();
-
-}
-
 const statusOptions = {
    openMessage: "Connected",
    pongMessage: "Nominal",
@@ -63,14 +43,13 @@ const { connect, send, close } = useWebsockets(
     statusOptions
 );
 
-/* send a message to the platform */
+export const updateAppUI = (): void => {
-export function sendMessage<Message>(message: Message): void {
+    uiState.emit();
-
-    /* socket send */
-    send(message);
-
 }
 
+export function sendMessage<Message>(message: Raw | Request): void {
+    send(message);
+}
 
 /* launch a new session (the main process for authenticated users) */
 export function launchSession(platformKey: string) {
@@ -78,16 +57,15 @@ export function launchSession(platformKey: string) {
     /* connect to the platform */
     connect(config.PLATFORM_URL, platformKey);
 
-    /* initialize the audio streams */
+    //  initialize the audio streams 
-    // initAudio();
+    // audio.record();
 
 }
 
-
 export function endSession() {
 
-    // closeAudio();
-
     close();
 
+    uiState.reset();
+
 }

src/store.ts

@@ -3,8 +3,7 @@ const Store = require('electron-store');
 const schema = {
 	token: {
 		type: 'string',
-	},
+	}
-    profile: {}
 };
 
 const store = new Store({
@@ -12,20 +11,14 @@ const store = new Store({
     encryptionKey: "super user test"
 });
 
-export const getToken = (): string | undefined => (store.get("token"));
+export const setToken = (token: string): void => {
+    store.set("token", token);
+} 
 
-export const clearToken = (): void => (store.delete("token"));
+export const getToken = (): string | undefined => {
-
+    return store.get("token");
-export const setToken = (token: string): void => (store.set('token', token));
-
-export const setProfile = (profile: Profile): Profile => (store.set('profile', profile));
-
-export const getProfile = (): Profile => (store.get('profile'));
-
-export const clearProfile = (): void => (store.delete('profile'));
-
-export const clearStore = (): void => {
-    clearToken();
-    clearProfile();
 }
 
+export const clearToken = (): void => {
+    store.delete("token");
+}

src/types.ts

@@ -1,27 +1,76 @@
 
+/**
+ * Messages from platform except for CLOSE_AUTH_FAIL
+ */
+interface ClientProtocol {
+    header: string;
+    body: Init | Update
+}
+
+/**
+ * Initial message from platform to seed uiState
+ */
+interface Init {
+    profile: Profile;
+    messages: Message[];
+}
+
+/**
+ * Update something in uiState
+ */
 interface Update {
     name: string;
-    data: Message[] | Message | Annotation | string;
+    data: Profile | Message[] | Message | Annotation | string;
 }
 
+/**
+ * A standard message in Messenger
+ */
 interface Message {
     modifier: string;
-    content: string[];
+    content: Content[];
-    context: boolean | string;
+    context: Context;
+    seen: boolean;
     uid: string;
 }
 
+interface Content {
+    text: string;
+    audio: string | boolean;
+}
+
+interface Context {
+    img: string | boolean;
+    text: string | boolean;
+}
+
+/**
+ * Update a specific attribute in a given message
+ */
 interface Annotation {
     name: string;
-    data: string | string[];
+    data: Context | Content[] | boolean;
     uid: string;
 }
 
+/**
+ * Send raw, uncategorized data to the platform
+ */
 interface Raw {
     text: string | boolean;
     audio: string | boolean;
 }
 
+/**
+ * The oppisite of Raw, when you know exactly what needs to get done
+ */
+interface PlatformRequest {
+    intent: string;
+    params: any;
+    epic: string | boolean;
+    confidence: number;
+}
+
 interface WindowState {
     width: number;
     height: number;
@@ -30,19 +79,9 @@ interface WindowState {
 }
 
 interface Profile {
-    crimataId: string;
+    crimata_id: string;
-    alias: string;
+    name: string;
-    initials: string;
+    photo: string;
-}
-
-interface LoginPayload {
-    email: string;
-    password: string;
-}
-
-interface AuthState {
-    profile: Profile | null;
-    token: string  | null;
 }
 
 interface AccountCredentials {

src/uiState.ts

@@ -1,25 +1,43 @@
 import { ipcEmit } from "@/composables/useEmitter";
 
-export default class Messages {
+class Profile implements Profile{
+    crimata_id = "";
+    name = "";
+    photo = "";
+}
 
+export default class UIState {
+
+    profile: Profile;
     messages: Message[];
 
-    constructor(messages: Message[]) {
+    constructor() {
-        console.log(messages);
+        this.profile = new Profile();
-        this.messages = messages;
+        this.messages = [];
-        this.emit();
     }
 
     emit() {
+        ipcEmit("set-profile", this.profile);
         ipcEmit("init-messages", this.messages);
     }
 
+    set (message: Init) {
+        this.profile = message.profile;
+        this.messages = message.messages;
+        this.emit();
+    }
+
     update(update: Update) {
 
-        if (update.name === "add") {
+        if (update.name === "profile") {
+            this.profile = update.data as Profile;
+            ipcEmit("set-profile", this.profile);
+        }
+
+        else if (update.name === "add") {
             this.messages.push(update.data as Message);
             ipcEmit("add-message", update.data);
-        } 
+        }
 
         else if (update.name === "annotate") {
             this._annotate(update.data as Annotation);
@@ -33,18 +51,28 @@ export default class Messages {
 
     }
 
+    reset() {
+        this.profile = new Profile();
+        this.messages = [];
+        this.emit();
+    }
+
     _annotate(annotation: Annotation) {
 
-        for (let i in this.messages) {
+        for (const i in this.messages) {
 
             if (this.messages[i].uid == annotation.uid) {
 
                 if (annotation.name == "content") {
-                    this.messages[i].content = annotation.data as string[];
+                    this.messages[i].content = annotation.data as Content[];
                 }
 
                 if (annotation.name == "context") {
-                    this.messages[i].context = annotation.data as string;
+                    this.messages[i].context = annotation.data as Context;
+                }
+
+                if (annotation.name == "seen") {
+                    this.messages[i].seen = annotation.data as boolean;
                 }
 
                 ipcEmit("update-message", annotation);
@@ -56,7 +84,7 @@ export default class Messages {
     }
 
     _delete(uid: string) {
-        for (var i = 0; i < this.messages.length; i++) {
+        for (let i = 0; i < this.messages.length; i++) {
             if (this.messages[i].uid === uid) {
                 this.messages.splice(i, 1);
                 break;