fix: remove unused code from preload and config

Notification on focus

See merge request crimata/electron-app!9

package.json

@@ -1,10 +1,11 @@
 {
   "name": "Crimata",
-  "version": "0.9.9",
+  "version": "1.0.0-beta.0",
   "private": true,
   "description": "Cross-platform messenger application built with electron, vue3, and TS.",
   "author": {
-    "name": "Enrique Hernandez"
+    "name": "Enrique Hernandez",
+    "name": "Andrew Gundersen"
   },
   "scripts": {
     "build": "vue-cli-service electron:build",
@@ -12,7 +13,7 @@
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
-  "main": "init.js",
+  "main": "background.js",
   "dependencies": {
     "@google-cloud/speech": "^4.2.0",
     "@types/animejs": "^3.1.2",
@@ -54,7 +55,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
     "@wasm-tool/wasm-pack-plugin": "^1.3.1",
-    "electron": "^9.0.0",
+    "electron": "11.4.10",
     "electron-devtools-installer": "^3.1.0",
     "electron-log": "^4.3.4",
     "eslint": "^6.7.2",

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 { getToken,  setToken, setProfile, getProfile, clearStore } from "./store";
-import { parseAuthRes } from "./auth";
-import { ipcEmit } from "@/composables/useEmitter";
+import { updateAppUI, launchSession, endSession } from "@/session";
+import { getToken, setToken, clearToken } from "./store";
+import { backgroundMitt, 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 */
-    if (token) {
-        try {
+    try {
 
+        if (token) {
+
+            // attempt to login with token
             const res = await postAuth(token);
-
             const parsed = parseAuthRes(res);
 
-            setToken(parsed.token)
-            setProfile(parsed.profile);
+            // save jwt token and profile
+            setToken(parsed.token);
+            account = parsed.crimataId
 
-            return {
-                profile: parsed.profile,
-                token: parsed.token
-            };
+            // launch session
+            launchSession(parsed.token);
 
-        } catch(e) {
-            console.log('[ACCOUNT]', e);
-            clearStore();
-            throw(new Error('Failed to authenticate.'));
+        } else throw(new Error('Failed to authenticate (no token).'));
+
+    } catch (e) {
+        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) => {
-     const account = payload as AccountCredentials;
+export const accountLogin = async (payload: any): Promise<Error | void> => {
+
+     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
-         return parsed.profile;
+         // push state changes to the frontend
+         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
-        clearStore();
+        // remove key and account
+        clearToken();
+        account = null;
+
+        // push account state to browser
+        ipcEmit("set-account", account);
 
         // kill crimata platform session
         endSession();
@@ -83,13 +100,24 @@ export const accountLogout = async (): Promise<Error | void> => {
 
 }
 
-export const updateAppState = (): void => {
+// logout when auth fails on platform end
+backgroundMitt.on("close-auth-fail", async (_payload: any) => {
 
-    const profile = getProfile();
+    await accountLogout();
 
-    ipcEmit("set-profile", profile);
+});
 
-    // ipcEmit('messages') etc
+// 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;
-    return {
-        token,
-        profile
-    }
-};
-
-
-
-
+    const crimataId = authRes.data as string;
+    return {token, crimataId}
+};

src/composables/useIpcMain.ts

@@ -71,12 +71,10 @@ export class IpcListener<InputParam> implements IIpcListener<InputParam> {
       ipcMain.removeAllListeners(this.channel);
   }
 
-  private _onPost = (_e: IpcMainEvent, payload?: string | null): void => {
+  private _onPost = (_e: IpcMainEvent, payload: InputParam): void => {
 
       console.log(`[IPC] Post: ${this.channel}`);
-
-      const params = payload ? JSON.parse(payload) : null;
-      this._listenerCallback(params);
+      this._listenerCallback(payload);
   }
 
 }

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

@@ -11,7 +11,13 @@ let _connectionCheckInterval: ReturnType<typeof setTimeout>;
 
 export default function useWebSockets(
     messageCallback: (message: string) => void,
-    connectionStatusCallback: (alive: boolean) => void,
+    connectionStatusCallback: (status: string) => void,
+    statusOptions?: {
+       openMessage: string;
+       pongMessage: string;
+       closeMessage: string;
+       pingErrorMessage: string;
+    },
 ) {
 
     let socket: WebSocket;
@@ -41,13 +47,15 @@ export default function useWebSockets(
 
             socket.send(JSON.stringify({key: secret}));
 
+            connectionStatusCallback(statusOptions ? statusOptions.openMessage : "Connection Opened");
+
             // ping server
             _connectionCheckInterval = setInterval(() => {
 
                 socket.ping(null, true, (e: Error) => {
                     if (e) {
                         socket.close();
-                        connectionStatusCallback(false);
+                        connectionStatusCallback(statusOptions ? statusOptions.pingErrorMessage : "Connection Lost");
                         setTimeout(() => connect(socketUrl, secret), _reconnectTimeout);
                     }
                 });
@@ -61,24 +69,28 @@ export default function useWebSockets(
             messageCallback(event.toString())
         });
 
-        socket.on("close", (event: WebSocket.CloseEvent) => {
-            connectionStatusCallback(false);
+        socket.on("close", (code: number, reason: string) => {
+            connectionStatusCallback(statusOptions ? statusOptions.closeMessage : "Connection Closed");
             clearInterval(_connectionCheckInterval);
-            if (!event.wasClean) {
-                setTimeout(() => connect(socketUrl, secret), _reconnectTimeout);
+            if (code !== 1000 || reason !== 'session-logout') {
+                setTimeout(() => {
+                    connect(socketUrl, secret), _reconnectTimeout
+                });
             }
 
         });
 
-        socket.on("pong", () => connectionStatusCallback(true));
+        socket.on("pong", () => connectionStatusCallback(statusOptions ? statusOptions.pongMessage : "Pong"));
+
+        socket.on('error', () => {});
 
     }
 
-    const close = () => {
+    const close = (code: number, reason: string) => {
         if (socket) {
-            socket.close();
+            socket.close(code, reason);
         }
-    }
+    };
 
     return {
         connect,

src/config.ts

@@ -13,5 +13,5 @@ export const config = {
     PLATFORM_URL: `${PLATFORM_IP}:${PLATFORM_PORT}`,
     BUSINESS_URL: `${BUSINESS_IP}:${BUSINESS_PORT}`,
     BUSINESS_PREFIX: '/api',
-    configPath: app.getPath('userData')
+    configPath: app.getPath('userData'),
 }

src/init.ts

@@ -9,6 +9,7 @@ import { app, protocol } from "electron";
 import createWindow from "./window";
 import main from "./main";
 import { backgroundMitt } from '@/composables/useEmitter';
+import {setWindowOpen, getWindowOpen } from './store';
 
 console.log('Starting Crimata electron app.');
 
@@ -19,11 +20,9 @@ protocol.registerSchemesAsPrivileged([
 
 const isDev = require('electron-is-dev');
 
-let win: boolean;
-
 // Listen for window creation.
 backgroundMitt.on('window-active', (state: boolean) => {
-    win = state;
+    setWindowOpen(state)
 });
 
 /* Start main process on ready */
@@ -41,7 +40,7 @@ app.on("window-all-closed", () => {
 
 // When user clicks app icon (re-open)
 app.on("activate", () => {
-    if (!win) createWindow();
+    if (!getWindowOpen()) createWindow();
 });
 
 // Exit cleanly on request from parent process in development mode.

src/ipc/handlers.ts

@@ -1,14 +1,12 @@
 
 "use strict";
 
-import { accountLogin, accountLogout, accountProfile } from "@/account";
+import { accountLogin, accountLogout } from "@/account";
 import { IpcHandler } from "@/composables/useIpcMain";
-import { flush } from "@/audio";
 
 
 const LOGIN_CHANNEL = "invoke-account-login";
 const LOGOUT_CHANNEL = "invoke-account-logout";
-const GET_AUDIO_CHANNEL = "invoke-audio-flush";
 
 export const loginHandler =  new IpcHandler({
     channel: LOGIN_CHANNEL,
@@ -19,10 +17,3 @@ export const logoutHandler =  new IpcHandler({
     channel: LOGOUT_CHANNEL,
     handlerCallback: accountLogout
 });
-
-export const getAudioHandler = new IpcHandler({
-    channel: GET_AUDIO_CHANNEL,
-    handlerCallback: flush
-});
-
-

src/ipc/listeners.ts

@@ -1,24 +1,30 @@
-
 import { IpcListener } from "@/composables/useIpcMain"
 import { sendMessage } from '@/session';
-import { collect } from "@/audio";
 import { updateAppState } from "@/account";
+import { onNavBar } from "@/window";
+import { setWindowFocus } from '@/store';
 
 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 POST_WINDOW_FOCUS = '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
 });
+
+export const navBarListener = new IpcListener({
+    channel: NAV_BAR_CHANNEL,
+    listenerCallback: onNavBar
+});
+
+export const windowFocusListener = new IpcListener<FocusPayload>({
+    channel: POST_WINDOW_FOCUS,
+    listenerCallback: ({ isFocused }) => setWindowFocus(isFocused)
+});

src/main.ts

@@ -10,30 +10,22 @@
  */
 
 import initIpcMain from "@/ipc/index";
-import  { accountAuth, updateAppState } from "./account";
-import { launchSession } from "./session";
+import  { accountAuth } from "./account";
 import createWindow from "./window";
-
-let authState: AuthState | null;
+import { initTray } from './tray';
 
 export default async function main() {
 
-    /* initiate controls for frontend to use when needed */
+    /* initiate render process event listeners & handlers */
     initIpcMain();
 
+    /* initiate tray icon in default state */
+    initTray();
+
     /* launch browser window */
     await createWindow();
 
-    try {
-        authState = await accountAuth() as AuthState;
-    } catch(e) {
-        console.log('AUTH:', e);
-        authState = null;
-    } finally {
-        if (authState) {
-            launchSession(authState.token as string);
-        }
-        updateAppState();
-    }
+    /* try to authenticate with token */
+    accountAuth();
 
 }

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
-        v-if="profile"
-    />
-
-    <!-- Main Components
-    -->
+    <Messenger v-if="account"/>
     <Login v-else />
 
   </main>
@@ -22,14 +17,13 @@
 <script lang="ts">
 
 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/composables/useProfile";
+import { ready, account, setAccount, clearAccount } from "@/render/shared/account";
 import { postAppMount } from "@/render/ipc";
 
 export default defineComponent({
@@ -43,11 +37,15 @@ export default defineComponent({
 
   setup() {
 
-    onMounted(() => postAppMount());
+    onMounted(() => {
+
+        postAppMount()
+
+    });
 
     return {
-        authComplete,
-        profile
+        account,
+        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,53 +1,18 @@
 <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 :class="`bubble ${modifier}-bubble ${modifier}-${child}`">
+    <div v-show="!seen" class="notify"></div>
+    {{ text }}
   </div>
 </template>
 
 <script lang='ts'>
 
- import { defineComponent, ref, onMounted } from 'vue';
+ import { defineComponent } from 'vue';
 
  export default defineComponent({
   name: "Bubble",
 
-  props: ["text", "context", "type", "position"],
-
-  setup() {
-
-    const seen = ref(false);
-    /* initialize seen state */
-    if (document.visibilityState === "visible") {
-        seen.value = true;
-    } else seen.value = false;
-
-    onMounted(() => {
-
-      if(seen.value)
-      document.addEventListener("visibilitychange", () => {
-          seen.value = true
-      });
-
-    });
-
-    return {
-      seen
-    };
-
-  }
+  props: ["modifier", "text", "child", "seen"],
 
  })
 
@@ -55,277 +20,79 @@
 
 <style lang="scss" scoped>
 
-  .message {
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    padding-top: 9px;
-    padding-bottom: 9px;
+.bubble {
+  position: relative;
+  max-width: 66vw;
+  font-family: "SF Pro Text";
+  font-size: 14px;
+  padding: 10px;
+  border-radius: 18px;
+  margin-bottom: 4px;
+}
+
+.ai-bubble {
+  background-color: #FFFFFF;
+  margin-left: 15px;
+}
+
+.client-bubble {
+  color: white;
+  background-color: #58C4FD;
+  margin-right: 15px;
+}
+
+.ai-first-child {
+  border-bottom-left-radius: 9px;
+}
+
+.ai-middle-child {
+  border-top-left-radius: 9px;
+  border-bottom-left-radius: 9px;
+}
+
+.ai-last-child {
+  border-top-left-radius: 9px;
+}
+
+.client-first-child {
+  border-bottom-right-radius: 9px;
+}
+
+.client-middle-child {
+  border-top-right-radius: 9px;
+  border-bottom-right-radius: 9px;
+}
+
+.client-last-child {
+  border-top-right-radius: 9px;
+}
+
+.ai-none-child, .client-none-child {
+  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);
   }
-
-  .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;
+  100% {
     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>
-
-
+</style>

src/render/components/connectionStatus.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="container">
+    <img id="logo" src="@/render/assets/connectLogo.svg">
+    <div id="connect">
+      <div class="dot"></div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts">
+
+import { defineComponent, onMounted, watch } from 'vue'
+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
+        }
+    }
+
+});
+
+</script>
+
+
+<style lang="scss" scoped>
+
+#container {
+  position: fixed;
+  width: 100vw;
+  height: 54px;
+  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

@@ -0,0 +1,83 @@
+<template>
+
+  <span :class="`context ${modifier}-context`">
+
+    <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 } from 'vue';
+
+ export default defineComponent({
+  name: "Context",
+
+  props: ["modifier", "context", "uid"],
+
+ })
+
+</script>
+
+<style lang="scss" scoped>
+
+.context {
+  position: relative;
+  min-height: 14px;
+  display: flex;
+  align-items: center;
+  font-family: "SF Compact Display";
+  font-size: 12px;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+.ai-context {
+  margin-left: 15px;
+}
+
+.client-context {
+  margin-right: 15px;
+}
+
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  background-color: white;
+  border-radius: 15px;
+  margin-right: 5px;
+}
+
+.playing {
+  animation-name: message-playback-anim;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes message-playback-anim {
+  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);
+  }
+}
+
+</style>

src/render/components/controllers/helpers.ts

@@ -1,6 +1,5 @@
-import { ref } from "vue";
+import { ref, Ref } from "vue";
 import anime from "animejs";
-import { v4 as uuidv4 } from 'uuid';
 
 
 export function animateTextInput () {
@@ -86,17 +85,15 @@ export function animateAudioInput () {
 
 }
 
-
-export function newMessage ({
-    text=false,
-    audio=false,
-    context=false,
-    uid=uuidv4()
-}) {
-    return {
-        text: text,
-        audio: audio,
-        context: context,
-        uid: uid
-    };
-}
+// Given index and length of content, return message child status.
+export function calcChild (index: number, len: number) {
+  if (len === 1) {
+    return "none";
+  } else if (index === 0) {
+    return "first-child";
+  } else if (index === len - 1) {
+    return "last-child";
+  } else {
+    return "middle-child";
+  }
+}

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

@@ -1,6 +1,6 @@
 import { onMounted, onUnmounted, ref, Ref } from "vue";
 import { postMessage } from "@/render/ipc";
-import { newMessage, animateAudioInput } from "./helpers";
+import { animateAudioInput } from "./helpers";
 import { invokeReturnAudio, postAudioChunk } from "@/render/ipc";
 
 export default function useAudioInputController (typing: Ref) {

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

@@ -1,6 +1,6 @@
 import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
 import { postMessage } from "@/render/ipc";
-import { newMessage, animateTextInput } from "./helpers";
+import { animateTextInput } from "./helpers";
 
 
 export default function useTextInputController(elementX: Ref) {
@@ -36,11 +36,12 @@ export default function useTextInputController(elementX: Ref) {
         if (textInput) {
 
             // Send it to the backend for processing.
-            const message = newMessage({
-                text: false
-            });
+            const message: Raw = {
+                text: textInput.value,
+                audio: false
+            };
 
-            // postMessage(message);
+            postMessage(message);
 
             clearInput()
         }

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

@@ -1,38 +0,0 @@
-import { ref } from 'vue';
-import useScroll from "@/render/composables/useScroll";
-
-const messagesRef = ref();
-
-/* seed the canvas with messages */
-const seedCanvas = (messages: Message[]) => {
-  messagesRef.value = messages;
-}
-
-const addMessage = (message: Message) => {
-  messagesRef.value.push(message);
-}
-
-const updateMessage = (message: Message) => {
-
-  let target_message = messagesRef.value.filter((m: Message) => {
-      return m.uid = message.uid;
-  })[0];
-
-  if (target_message) {
-    target_message = message;
-  }
-
-}
-
-export default function useMessages() {
-
-  const { updateScrollRef, adjustScroll } = useScroll("messenger");
-
-  return {
-    messagesRef,
-    seedCanvas,
-    addMessage,
-    updateMessage
-  };
-
-}

src/render/components/header.vue

@@ -16,16 +16,17 @@
 
     // import { postNavBarExit, postNavBarMin } from "@/render/ipc";
     import { defineComponent } from "vue";
+    import { postNavBar } from "@/render/ipc";
 
     export default defineComponent({
         name: "Header",
         setup() {
-        const postNavBarExit = () => {};
-        const postNavBarMin = () => {};
-        return {
-            postNavBarExit,
-            postNavBarMin
-        }
+            const postNavBarExit = () => postNavBar('close');
+            const postNavBarMin = () => postNavBar('min');
+            return {
+                postNavBarExit,
+                postNavBarMin
+            }
         }
 
     });

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,18 +29,16 @@
 
 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";
-import useAudioInputController from
+// import useAudioInputController from
   "@/render/components/controllers/inputItem.control.audio";
 
 export default defineComponent({
   name: "InputItem",
 
-  props: ["initials"],
-
   setup() {
 
     // Default values for position.
@@ -51,9 +50,11 @@ export default defineComponent({
 
     // Controllers for text and audio.
     const { typing } = useTextInputController(elementX)
-    const { recording } = useAudioInputController(typing)
+    // const { recording } = useAudioInputController(typing)
+    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/composables/useProfile';
 import { invokeLogin } from "@/render/ipc";
 
 export default defineComponent({
@@ -50,21 +41,26 @@ export default defineComponent({
     const submitForm = async () => {
 
       try {
-
-          const profile = await invokeLogin({
-              email: usr.value,
-              password: pwd.value
-          }) as Profile;
-
-          setProfile(profile)
-
-
+          await invokeLogin({email: usr.value, password: pwd.value});
       } 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 {
-  font-family: "SF Pro Text";
-  min-width: 181px;
-  font-size: 24px;
-  font-weight: bold;
-  text-align: left;
-  padding-bottom: 10px;
-}
-
-#loginBox {
+#form {
   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 {
-    margin-bottom: 30px;
-    font-family: "SF Compact Display";
-    font-weight: bold;
-    font-size: 14px;
-    color: #F53737;
+.shake {
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@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

@@ -0,0 +1,99 @@
+<template>
+  <div :id="uid" :class="`${modifier}-message`">
+
+    <Bubble
+      v-for="(val, index) in content"
+      :modifier="modifier"
+      :text="val.text"
+      :child="calcChild(index, content.length)"
+      :seen="seen"
+    />
+
+    <Context 
+      :modifier="modifier"
+      :context="context"
+      :uid="uid"
+    />
+
+  </div>
+</template>
+
+<script lang='ts'>
+
+ 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";
+
+ export default defineComponent({
+  name: "Message",
+
+  props: ["modifier", "content", "context", "seen", "uid"],
+
+  components: {
+    Bubble,
+    Context
+  },
+
+  setup() {
+
+    onMounted(() => {
+
+      const messengerEl = document.getElementById("messenger");
+
+      if (messengerEl)
+      messengerEl.dispatchEvent(new CustomEvent('adjust-scroll'))
+
+    });
+
+    return {
+      calcChild
+    };
+
+  }
+
+ })
+
+</script>
+
+<style lang="scss" scoped>
+
+.message {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  animation-name: message-init-anim;
+  animation-duration: 0.25s;
+}
+
+@keyframes message-init-anim {
+  from {
+    opacity: 0;
+  } to {
+    opacity: 1;
+  }
+}
+
+.message:first-child {
+  margin-top: 55px;
+}
+
+.message:last-child {
+  margin-bottom: 6px;
+}
+
+.client-message {
+  @extend .message;
+  align-items: flex-end;
+}
+
+.ai-message {
+  @extend .message;
+  align-items: flex-start;
+}
+
+</style>
+
+

src/render/components/messenger.vue

@@ -1,17 +1,20 @@
 <template>
 
   <!-- Position fixed items -->
-  <InputItem :initials="profile.initials"/>
   <Settings />
+  <ConnectionStatus />
   <div id="recIcon" />
+  <InputItem />
 
   <!-- List of message bubbles. -->
   <div id="messenger">
-    <Bubble
+    <Message
       v-for="message in messages"
-      :text="message.content.text"
+      :modifier="message.modifier"
+      :content="message.content"
       :context="message.context"
-      :key="message[0]"
+      :seen="message.seen"
+      :uid="message.uid"
     />
   </div>
 
@@ -22,21 +25,62 @@
 import { defineComponent, onMounted, onUnmounted } from "vue";
 import InputItem from "@/render/components/inputItem.vue";
 import Settings from "@/render/components/settings.vue";
-import Bubble from "@/render/components/bubble.vue";
+import Message from "@/render/components/message.vue";
+import ConnectionStatus from "./connectionStatus.vue";
 
-import { profile } from "@/render/composables/useProfile";
-import { messages } from "@/render/composables/useMessages";
+import { profile } from "@/render/shared/profile";
+import { messages } from "@/render/shared/messages";
+import useScroll from "@/render/composables/useScroll";
+import { postMessage, postWindowFocus } from "@/render/ipc";
 
 export default defineComponent({
   name: "Messenger",
 
   components: {
+    ConnectionStatus,
     InputItem,
     Settings,
-    Bubble
+    Message,
   },
 
   setup() {
+
+    const onFocus = () => {
+        postWindowFocus({ isFocused: true });
+        postMessage({
+          intent: "focus",
+          params: { "focus": true },
+          epic: false,
+          confidence: 1.0
+        } as PlatformRequest);
+    }
+
+    const onBlur = () => {
+        postWindowFocus({ isFocused: false });
+        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. -->
-  <button
-    class="settingsIcon"
-    v-if="toggleSettings == false"
-    @click="onActive"
-  >
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-  </button>
+  <!-- Settings content -->
+  <div v-if="toggleSettings" id="settings" >
 
-  <!-- Settings div. -->
-  <div id="settings" v-show="toggleSettings">
-  </div>
+    <p class="account">{{ `Hi, ${account}` }}</p>
 
     <button
-      v-if="toggleSettings"
-      class="settingsOption"
+      class="logout"
       @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/composables/useProfile"
   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 {
-  width: 5px;
-  height: 5px;
-
-  margin: 2px;
-  border-radius: 2.5px;
-  background-color: #9B9B9B;
-
+.account {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 25px;
 }
 
-.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/useIpcRend.ts

@@ -25,7 +25,7 @@ export class IpcRendererListener<InputParam> implements IIpcListener<InputParam>
   }
 
   private _onPost = (_e: IpcRendererEvent, payload: InputParam): void => {
-      console.log(`[IPC] Post: ${this.channel}`);
+      console.log(`[IPC] Post: ${this.channel}`, payload);
       this._listenerCallback(payload);
   }
 
@@ -34,16 +34,16 @@ export class IpcRendererListener<InputParam> implements IIpcListener<InputParam>
 
 export default function useIpcRenderer () {
 
-    const invoke = async (endpoint: string, payload: any) => {
+    const invoke = async <T>(endpoint: string, payload: T) => {
         try {
-            const res = await window.ipcRenderer.invoke(endpoint, payload);
+            const res = await window.ipcRenderer.invoke(endpoint, payload? JSON.stringify(payload) : null);
             return res;
         } catch (e) {
             throw e;
         }
     }
 
-    const post = (endpoint: string, payload: any) => {
+    const post = <T>(endpoint: string, payload: T) => {
         window.ipcRenderer.send(endpoint, payload);
     };
 

src/render/composables/useMessages.ts

@@ -1,33 +0,0 @@
-// shared
-import { ref, Ref } from "vue";
-import useScroll from "@/render/composables/useScroll";
-
-export const messages: Ref<Array<Message>> = ref([]);
-
-export const setMessages: IpcListenerCallback<Array<Message>> = (payload) => {
-    messages.value = payload as Array<Message>;
-}
-
-export const addMessage: IpcListenerCallback<Message> = (payload) => {
-    messages.value.push(payload as Message);
-}
-
-export const updateMessage: IpcListenerCallback<Message> = (payload) => {
-    const message = payload as Message;
-
-    let targetMessage = messages.value.filter((m: Message) => {
-        return m.uid = message.uid;
-    })[0];
-
-    if (targetMessage) {
-        targetMessage = message;
-    }
-
-}
-
-export default {
-    messages,
-    setMessages,
-    addMessage,
-    updateMessage
-};

src/render/composables/useProfile.ts

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

src/render/composables/useScroll.ts

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

src/render/ipc.ts

@@ -12,9 +12,9 @@ const { post, invoke } = useIpc();
 
 
 export const invokeLogin = async (
-    payload: LoginPayload
+    payload: AccountCredentials
 ): Promise<Profile | Error> => (
-    await invoke('invoke-account-login', JSON.stringify(payload))
+    await invoke('invoke-account-login', payload)
 );
 
 export const invokeLogout = async (): Promise<void> => (
@@ -41,11 +41,7 @@ export const invokeReturnAudio = async (): Promise<ArrayBuffer[] | Error> => (
  *
  */
 
-export const invokeSession = async (cid: string): Promise<Profile | Error> => (
-    await invoke("messenger-init", cid)
-);
-
-export const postMessage = (payload: Message): void => (
+export const postMessage = (payload: Raw | PlatformRequest): void => (
     post('post-session-send', payload)
 );
 
@@ -53,6 +49,25 @@ export const postAppMount = (): void => (
     post('post-app-mount', null)
 );
 
+/**
+ *
+ * Nav bar endpoints
+ *
+ */
+
+export const postNavBar = (payload: string): void => (
+    post('post-nav-bar', payload)
+);
+
+/**
+ *
+ * Window focus endpoint
+ *
+ */
+
+export const postWindowFocus = (payload: { isFocused: boolean }): void => (
+    post('post-window-focus', payload)
+);
 
 /**
  *

src/render/listeners.ts

@@ -1,13 +1,38 @@
 
 import { IpcRendererListener } from "./composables/useIpcRend"
-import { setProfile } from "./composables/useProfile";
-import { setMessages, addMessage, updateMessage } from "./composables/useMessages";
+/*
+ * Shared state imports
+ * */
+import { 
+    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";
 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,
@@ -30,3 +55,12 @@ export const updateMessagesListener = new IpcRendererListener({
     listenerCallback: updateMessage
 });
 
+export const deleteMessagesListener = new IpcRendererListener({
+    channel: DELETE_MESSAGE_CHANNEL,
+    listenerCallback: deleteMessage
+});
+
+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

@@ -0,0 +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 {
+    hiddenState,
+    useAnim,
+    status,
+    show,
+    hide
+};
+
+

src/render/shared/messages.ts

@@ -0,0 +1,60 @@
+// shared
+import { ref, Ref } from "vue";
+
+export const messages: Ref<Array<Message>> = ref([]);
+
+export const setMessages: IpcListenerCallback<Array<Message>> = (payload) => {
+    messages.value = payload;
+}
+
+export const addMessage: IpcListenerCallback<Message> = (payload) => {
+    messages.value.push(payload as Message);
+}
+
+export const updateMessage: IpcListenerCallback<Annotation> = (payload) => {
+    const annotation = payload as Annotation;
+
+    for (const i in messages.value) {
+
+        if (messages.value[i].uid == annotation.uid) {
+
+            if (annotation.name == "content") {
+                messages.value[i].content = annotation.data as Content[];
+            }
+
+            if (annotation.name == "context") {
+                messages.value[i].context = annotation.data as Context;
+            }
+
+            if (annotation.name == "seen") {
+                messages.value[i].seen = annotation.data as boolean;
+            }
+
+        }
+
+    }
+
+}
+
+export const deleteMessage: IpcListenerCallback<string> = (payload) => {
+    const uid = payload as string;
+
+    for (let i = 0; i < messages.value.length; i++) {
+        if (messages.value[i].uid === uid) {
+            messages.value.splice(i, 1);
+            break;
+        }
+    }
+
+}
+
+export const resetMessages = () => {
+    messages.value = [];
+}
+
+export default {
+    messages,
+    setMessages,
+    addMessage,
+    updateMessage
+};

src/render/shared/profile.ts

@@ -0,0 +1,19 @@
+// shared
+import { ref } from "vue";
+
+class Profile implements Profile{
+    crimata_id = "";
+    name = "";
+    photo = "";
+}
+
+export const profile = ref(new Profile());
+
+export const setProfile: IpcListenerCallback<Profile> = (payload) => {
+    profile.value = payload;
+};
+
+export default {
+    profile,
+    setProfile
+};

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,84 +1,97 @@
 
-
-
-
 // import useAudio from "@/audio";
-import { ipcEmit } from "@/composables/useEmitter";
+import UIState from "@/uiState";
+import { config } from "@/config";
 import useWebsockets from "./composables/useWebsockets";
-import {config} from "@/config";
+import { backgroundMitt, ipcEmit } from "@/composables/useEmitter";
+import { Notification } from 'electron';
+import { getWindowFocus, getWindowOpen } from './store';
 
-/* data structure of messages that's tied to the UI */
-const uiState: any | null = null;
-
-/* start and stop audio functionality */
-// const { initAudio, closeAudio } = useAudio();
-
-const isInitMessage = (message: any): boolean => {
-    return true;
+export const CONNECTION_STATUS = {
+    connected: 'Connected',
+    nominal: 'Nominal',
+    reconnecting: 'Reconnecting',
+    lost: 'Connection Lost',
 };
 
-const deauthenticate = (): void => {
-    console.log('deauthenticating')
-};
+function showNotification (options: {
+    title: string;
+    subtitle?: string;
+    body: string;
+}) {
+    new Notification(
+        {
+            title: options.title,
+            subtitle: options.subtitle,
+            body: options.body,
+        }).show()
+}
 
-const isAddMessage = (message: any): boolean => {
-    return true;
-};
-
-/**
- * Controls for interfacing with the platform.
- * Takes an onMessage callback which we define below.
- */
+// UI state
+const uiState = new UIState();
 
+// let audio = new Audio();
 
 const onMessageCallback = (payload: string) => {
 
-    const message  = JSON.parse(payload);
-    console.log(typeof message);
-
-    /* if the platform fails to authenticate, we must back down */
-    if (message === "CLOSE_AUTH_FAIL") {
-        deauthenticate();
+    if (payload === "CLOSE_AUTH_FAIL") {
+        backgroundMitt.emit("close-auth-fail");
         return;
     }
 
-    ipcEmit("add-message", message)
-    return
+    const message = JSON.parse(payload) as ClientProtocol;
 
-    /* on init, platform sends state, used to init canvas */
-    if (isInitMessage(message)) {
-        ipcEmit("init-messages", message)
-    }
+    if (message.header === "init") {
+        uiState.set(message.body as Init);
+    } else {
+        const body = message.body as Update;
+        uiState.update(body);
 
+        const isFocused = getWindowFocus();
+        const isOpen = getWindowOpen();
+        // show notification if window is not active
+        if (!isFocused || !isOpen) {
+            if (body.name === "add") {
+                const data = body.data as Message;
+                showNotification({
+                    title: 'New Message',
+                    subtitle: data.context.text as string,
+                    body: data.content[0].text,
+                });
+            }
 
-    else if (isAddMessage(message)) {
-        ipcEmit("add-messages", message)
-    }
-
-    else {
-        ipcEmit("update-messages", message)
+        }
     }
 
 }
 
-const onConnectionStatusCallback = (alive: boolean) => {
-    // console.log('[Session]: Connection Alive: ', alive);
-    // ipcEmit('connection-state', alive);
+
+const connectionStatusCallback = (status: string) => {
+    // update icon
+    // backgroundMitt.emit("update-icon-status", status);
+    ipcEmit('set-connection-status', status);
+}
+
+const statusOptions = {
+   openMessage: CONNECTION_STATUS.connected,
+   pongMessage: CONNECTION_STATUS.nominal,
+   closeMessage: CONNECTION_STATUS.reconnecting,
+   pingErrorMessage: CONNECTION_STATUS.lost,
 }
 
 const { connect, send, close } = useWebsockets(
     onMessageCallback,
-    onConnectionStatusCallback
+    connectionStatusCallback,
+    statusOptions
 );
 
-/* send a message to the platform */
-export function sendMessage<Message>(message: Message): void {
-
-    /* socket send */
-    send(message);
-
+export const updateAppUI = (): void => {
+    uiState.emit();
 }
 
+export function sendMessage(message: Raw | Request): void {
+    send(message);
+}
 
 /* launch a new session (the main process for authenticated users) */
 export function launchSession(platformKey: string) {
@@ -86,16 +99,16 @@ export function launchSession(platformKey: string) {
     /* connect to the platform */
     connect(config.PLATFORM_URL, platformKey);
 
-    /* initialize the audio streams */
-    // initAudio();
+    //  initialize the audio streams
+    // audio.record();
 
 }
 
-
 export function endSession() {
 
-    // closeAudio();
+    close(1000, 'session-logout');
 
-    close();
+    uiState.reset();
 
 }
+

src/store.ts

@@ -4,7 +4,6 @@ const schema = {
 	token: {
 		type: 'string',
 	},
-    profile: {}
 };
 
 const store = new Store({
@@ -12,20 +11,48 @@ const store = new Store({
     encryptionKey: "super user test"
 });
 
-export const getToken = (): string | undefined => (store.get("token"));
-
-export const clearToken = (): void => (store.delete("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();
+/*
+ * Token state management
+* */
+export const setToken = (token: string): void => {
+    store.set("token", token);
 }
 
+export const getToken = (): string | undefined => {
+    return store.get("token");
+}
+
+export const clearToken = (): void => {
+    store.delete("token");
+}
+
+/*
+ * Window state management
+* */
+export const setWindowOpen = (state: boolean): void => {
+    store.set("window.isOpen", state);
+}
+
+export const getWindowOpen = (): boolean | undefined => {
+    return store.get("window.isOpen");
+}
+
+export const setWindowFocus = (state: boolean): void => {
+    store.set("window.isFocused", state);
+}
+
+export const getWindowFocus = (): boolean | undefined => {
+    return store.get("window.isFocused");
+}
+
+
+/*
+ * Icon state management
+* */
+export const setIconState = (state: string): void => {
+    store.set("iconStatus", state);
+}
+
+export const getIconState = (): string | undefined => {
+    return store.get("iconStatus");
+}

src/tray.ts

@@ -0,0 +1,90 @@
+
+"use strict";
+
+import fs from 'fs'
+import path from 'path'
+import { Tray } from 'electron';
+const nativeImage = require('electron').nativeImage
+import {NativeImage} from 'electron'
+import { backgroundMitt } from "@/composables/useEmitter";
+import { getIconState, setIconState } from "@/store";
+import { CONNECTION_STATUS } from '@/session';
+
+declare const __static: string;
+
+interface Icons {
+    [name: string]: NativeImage;
+}
+
+let tray: Tray | null = null;
+const TRAY_ICON_DIR = 'trayIcon';
+
+const ICON_NAMES = {
+    default: 'icon.png',
+    // TODO: need icons for different states
+    // TODO: need higher density icons @3x, @4x, @5x
+    // TODO: need to test with 20x20 & 24x24 icon sizes
+    recording: 'recording.png',
+    playback: 'playback.png',
+    connected: 'connected.png',
+    nominal: 'nominal.png',
+    reconnecting: 'reconnecting.png',
+    lost: 'lost.png',
+}
+
+const TRAY_STATUS = {
+    playback: 'playback',
+    recording: 'recording',
+    ...CONNECTION_STATUS
+};
+
+
+const ICONS: Icons = {
+    default: iconFactory(ICON_NAMES.default),
+    [TRAY_STATUS.recording]: iconFactory(ICON_NAMES.recording),
+    [TRAY_STATUS.playback]: iconFactory(ICON_NAMES.playback),
+    [TRAY_STATUS.connected]: iconFactory(ICON_NAMES.connected),
+    [TRAY_STATUS.nominal]: iconFactory(ICON_NAMES.nominal),
+    [TRAY_STATUS.reconnecting]: iconFactory(ICON_NAMES.reconnecting),
+    [TRAY_STATUS.lost]: iconFactory(ICON_NAMES.lost),
+};
+
+backgroundMitt.on('update-icon-status', (payload: string) => {
+    updateTray(payload);
+});
+
+const changeIcon = (icon: NativeImage): void => tray ? tray.setImage(icon): undefined;
+
+function iconFactory(iconName: string): NativeImage {
+    if (iconName !== 'icon.png') {
+        console.log('ERROR: Missing Icons: ', iconName);
+    }
+    // TODO: remove hard code, need icons for different states
+    const iconBuffer = fs.readFileSync(path.join(__static, TRAY_ICON_DIR,  'icon.png'));
+    const icon = nativeImage.createFromBuffer(iconBuffer);
+    return icon;
+}
+
+function updateTray(status: string): void {
+    // read icon state
+    const current = getIconState();
+    if (current !== status) {
+       setIconState(status);
+       if (status in ICONS) {
+           changeIcon(ICONS[status]);
+       } else {
+           changeIcon(ICONS.default);
+       }
+    }
+}
+
+export function initTray(): void {
+    if (!tray) {
+        try {
+            tray = new Tray(ICONS.default);
+        } catch(e) {
+            console.log('Error initilizing tray', e);
+        }
+    }
+}
+

src/types.ts

@@ -1,14 +1,74 @@
 
+/**
+ * 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: Profile | Message[] | Message | Annotation | string;
+}
+
+/**
+ * A standard message in Messenger
+ */
 interface Message {
-    text: boolean | string;
-    context: boolean | string;
-    audio: boolean | string;
-    type: 1 | 2 | 3;
+    modifier: string;
+    content: Content[];
+    context: Context;
+    seen: boolean;
     uid: string;
 }
 
-interface ViewMessage extends Message {
-    child: 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: 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 {
@@ -19,19 +79,9 @@ interface WindowState {
 }
 
 interface Profile {
-    crimataId: string;
-    alias: string;
-    initials: string;
-}
-
-interface LoginPayload {
-    email: string;
-    password: string;
-}
-
-interface AuthState {
-    profile: Profile | null;
-    token: string  | null;
+    crimata_id: string;
+    name: string;
+    photo: string;
 }
 
 interface AccountCredentials {
@@ -47,7 +97,7 @@ interface IpcHandlerCallback<I, O> {
 }
 
 interface IpcListenerCallback<T> {
-    (payload: T | null): void;
+    (payload: T): void;
 }
 
 interface IIpcHandler<I, O> {
@@ -75,3 +125,7 @@ interface IpcRendererEvent<T> {
   payload: T | null;
 }
 
+interface FocusPayload {
+    isFocused: boolean;
+}
+

src/uiState.ts

@@ -0,0 +1,95 @@
+import { ipcEmit } from "@/composables/useEmitter";
+
+class Profile implements Profile{
+    crimata_id = "";
+    name = "";
+    photo = "";
+}
+
+export default class UIState {
+
+    profile: Profile;
+    messages: Message[];
+
+    constructor() {
+        this.profile = new Profile();
+        this.messages = [];
+    }
+
+    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 === "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);
+            ipcEmit("update-message", update.data);
+        }
+
+        else {
+            this._delete(update.data as string);
+            ipcEmit("delete-message", update.data);
+        }
+
+    }
+
+    reset() {
+        this.profile = new Profile();
+        this.messages = [];
+        this.emit();
+    }
+
+    _annotate(annotation: Annotation) {
+
+        for (const i in this.messages) {
+
+            if (this.messages[i].uid == annotation.uid) {
+
+                if (annotation.name == "content") {
+                    this.messages[i].content = annotation.data as Content[];
+                }
+
+                if (annotation.name == "context") {
+                    this.messages[i].context = annotation.data as Context;
+                }
+
+                if (annotation.name == "seen") {
+                    this.messages[i].seen = annotation.data as boolean;
+                }
+
+                ipcEmit("update-message", annotation);
+
+            }
+
+        }
+
+    }
+
+    _delete(uid: string) {
+        for (let i = 0; i < this.messages.length; i++) {
+            if (this.messages[i].uid === uid) {
+                this.messages.splice(i, 1);
+                break;
+            }
+        }
+    }
+    
+}

src/window.ts

@@ -33,20 +33,20 @@ const loadWinState = (fileName: string): WindowState => {
 }
 
 // Called when a NavBar button is pressed.
-const onNavBar = (_event: any, action: string): void => {
+export const onNavBar: IpcListenerCallback<string> = (payload): void => {
   if (win) {
-    if (action === "close") {
-      win.close()
+    if (payload === "close") {
+      win.close();
     } else {
-      win.minimize()
+      win.minimize();
     }
   }
 }
 
 // Util function to render message on ipc-renderer event.
-const postToWindow = <T>(event: IpcRendererEvent<T>): void => {
+const postToWindow = <T>(e: IpcRendererEvent<T>): void => {
     if (win) {
-        win.webContents.send(event.channel, event.payload);
+        win.webContents.send(e.channel, e.payload);
     }
 }
 
@@ -75,10 +75,6 @@ const onWindowMount = (): void => {
     // Must tell initApp that window exists.
     backgroundMitt.emit('window-active', true);
 
-    // Handle win nav-bar event.
-    ipcMain.removeAllListeners("nav-bar") // avoid setting duplicate handlers
-    ipcMain.on("nav-bar", onNavBar);
-
     // Gateway for messages to the frontend.
     backgroundMitt.removeAllListeners("ipc-renderer")
     backgroundMitt.on("ipc-renderer", postToWindow);

yarn.lock

@@ -1482,9 +1482,9 @@
   integrity sha512-6QlRuqsQ/Ox/aJEQWBEJG7A9+u7oSYl3mem/K8IzxXG/kAGbV1YPD9Bg9Zw3vyxC/YP+zONKwy8hGkSt1jxFMw==
 
 "@types/node@^12.0.12":
-  version "12.19.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.3.tgz#a6e252973214079155f749e8bef99cc80af182fa"
-  integrity sha512-8Jduo8wvvwDzEVJCOvS/G6sgilOLvvhn1eMmK3TW8/T217O7u1jdrK6ImKLv80tVryaPSVeKu6sjDEiFjd4/eg==
+  version "12.20.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.17.tgz#ffd44c2801fc527a6fe6e86bc9b900261df1c87e"
+  integrity sha512-so8EHl4S6MmatPS0f9sE1ND94/ocbcEshW5OpyYthRqeRpiYyW2uXYTo/84kmfdfeNrDycARkvuiXl6nO40NGg==
 
 "@types/node@^12.12.47":
   version "12.19.15"
@@ -4898,11 +4898,6 @@ dotenv-expand@^5.1.0:
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
-dotenv@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
-  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
-
 dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
@@ -5082,10 +5077,10 @@ electron-updater@^4.3.8:
     lodash.isequal "^4.5.0"
     semver "^7.3.4"
 
-electron@^9.0.0:
-  version "9.3.3"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-9.3.3.tgz#99a6619d5df68f97697a5d1d82ef3a8a63fcdf36"
-  integrity sha512-xghKeUY1qgnEcJ5w2rXo/toH+8NT2Dktx2aAxBNPV7CIJr3mejJJAPwLbycwtddzr37tgKxHeHlc8ivfKtMkJQ==
+electron@11.4.10:
+  version "11.4.10"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-11.4.10.tgz#7bcbca82810b82c2f2765824c5e11e3061272ea4"
+  integrity sha512-aQTRgRdHwCW68gxz9qvGCfOUvR4NBbdecLB/mEWX8fMncDFvPMmm+dq2D6zSWWVEKywmsj3+wMMVn3UV2Cl2CQ==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"