140 changed files with 17880 additions and 31288 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,38 @@
 module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": [
        "error",
        { "argsIgnorePattern": "^_" }
      ]
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
        "*.js"
      ],
      rules: {
        "@typescript-eslint/no-var-requires": "off",
      },
      env: {
        jest: true
      }
    }
  ]
 };
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,37 @@
 .DS_Store
-/node_modules
+node_modules
-/out
+/dist
 /crate/target/*
 /.log
-*.sublime-workspace
+crash.log
 # local env files
 .env.local
 .env.*.local
 .env
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 #Electron-builder output
 /dist_electron
 #Electron-builder config
 electron-builder.yml
 #Window and session states
 session.json
 window.json
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,63 @@
 stages:
  - Build
  - Upload
  - Release
 build:
  stage: Build
  tags:
    # Use a macos runner to build.
    - darwin
  before_script:
    - yarn
  script:
    - export VERSION=$(node -e "console.log(require('./package.json').version)")
    - echo "VERSION=$VERSION" >> variables.env
    - export APPNAME=$(node -e "console.log(require('./package.json').productName)")
    - echo "APPNAME=$APPNAME" >> variables.env
    - yarn build
  artifacts:
    reports:
      dotenv: variables.env
    name: $CI_COMMIT_REF_SLUG
    paths:
      - dist_electron/*.dmg
      - dist_electron/*.zip
      - dist_electron/*.yml
    when: on_success
  only:
    - main
 variables:
  PACKAGE: '${APPNAME}-${VERSION}.dmg'
  PACKAGE_REGISTRY_URL: '${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${APPNAME}/${VERSION}'
 # Upload package to gitlab registry.
 upload:
  stage: Upload
  needs:
    - job: build
      artifacts: true
  rules:
    - if: $CI_COMMIT_TAG
      when: never # Do not run this job when a tag is created manually
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Run this job when when commits are pushed to the default branch
  script:
    # Take the package we built and place it in the package registry.
    - 'curl --header "JOB-TOKEN: $CI_JOB_TOKEN" --upload-file "dist_electron/${PACKAGE}" "${PACKAGE_REGISTRY_URL}/${PACKAGE}"'
 auto-release-master:
  image: registry.gitlab.com/gitlab-org/release-cli
  needs:
    - job: build
      artifacts: true
    - job: upload
      artifacts: true
  stage: Release
  rules:
    - if: $CI_COMMIT_TAG
      when: never # Do not run this job when a tag is created manually
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Run this job when when commits are pushed to the default branch
  script:
    - echo "Release $VERSION"
    - release-cli create --name "Release $VERSION" --tag-name v$VERSION --description "Release $CI_COMMIT_TITLE" --ref $CI_COMMIT_SHA --assets-link "{\"name\":\"${APPNAME}\",\"url\":\"${PACKAGE_REGISTRY_URL}/${PACKAGE}\"}"
--- a/.npmrc
+++ b/.npmrc
@ -1,2 +0,0 @@
@crimata:registry=https://gitlab.com/api/v4/projects/28849281/packages/npm/
 //gitlab.com/api/v4/projects/28849281/packages/npm
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
 # crimata-electron
 ## Project setup
 ```
 yarn install
 ```
 ### Compiles and hot-reloads for development
 ```
 yarn electron:serve
 ```
 ### Compiles and minifies for production
 ```
 yarn electron:build
 ```
 <!-- ### Run your unit tests
 ```
 yarn test:unit
 ```
 ### Lints and fixes files
 ```
 yarn lint
 ``` -->
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/src/assets/icon.icns
+++ b/src/assets/icon.icns
--- a/build/icon_128x128.png
+++ b/build/icon_128x128.png
--- a/build/[email
+++ b/build/[email
--- a/build/icon_16x16.png
+++ b/build/icon_16x16.png
--- a/build/[email
+++ b/build/[email
--- a/build/icon_256x256.png
+++ b/build/icon_256x256.png
--- a/build/[email
+++ b/build/[email
--- a/build/icon_32x32.png
+++ b/build/icon_32x32.png
--- a/build/[email
+++ b/build/[email
--- a/build/icon_512x512.png
+++ b/build/icon_512x512.png
--- a/build/[email
+++ b/build/[email
--- a/electron.sublime-project
+++ b/electron.sublime-project
@ -1,8 +0,0 @@
 {
 	"folders":
 	[
 		{
 			"path": "."
 		}
 	]
 }
--- a/entitlements.plist
+++ b/entitlements.plist
@ -1,14 +0,0 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
  <dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.debugger</key>
    <true/>
    <key>com.apple.security.device.audio-input</key>
    <true/>
  </dict>
 </plist>
 <!--<key>com.apple.security.cs.disable-library-validation</key>
    <true/>-->
--- a/icon.png
+++ b/icon.png
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,6 @@
 module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
 }
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,6 @@
 {
  "typeAcquisition": {
    "enable": true
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,54 +1,105 @@
 {
-  "name": "crimata",
+  "name": "Crimata",
-  "version": "1.0.0",
+  "version": "1.0.0-beta.0",
-  "description": "Cross-platform messenger app (Electron, Vue3)",
+  "private": true,
-  "main": "src/main.js",
+  "description": "Cross-platform messenger application built with electron, vue3, and TS.",
  "author": {
    "name": "Enrique Hernandez",
    "name": "Andrew Gundersen"
  },
  "scripts": {
-    "start": "electron-forge start",
+    "build": "vue-cli-service electron:build",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vue-cli-service electron:serve",
-    "package": "electron-forge package",
+    "postinstall": "electron-builder install-app-deps",
-    "make": "electron-forge make"
+    "postuninstall": "electron-builder install-app-deps"
  },
  "author": "Andrew Gundersen",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.63",
    "@electron-forge/maker-deb": "^6.0.0-beta.63",
    "@electron-forge/maker-rpm": "^6.0.0-beta.63",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
    "@electron-forge/maker-zip": "^6.0.0-beta.63",
    "electron": "^18.2.3"
  },
  "main": "background.js",
  "dependencies": {
    "@google-cloud/speech": "^4.2.0",
    "@types/animejs": "^3.1.2",
    "@types/bindings": "^1.3.0",
    "@types/dom-mediacapture-record": "^1.0.7",
    "@types/node": "^14.14.25",
    "@types/uuid": "^8.3.0",
    "@types/ws": "^7.2.7",
    "animejs": "^3.2.0",
    "axios": "^0.21.1",
-    "base64-arraybuffer": "^1.0.1",
+    "core-js": "^3.6.5",
    "electron-is-dev": "^2.0.0",
    "electron-store": "^8.0.0",
-    "ws": "^7.3.1",
+    "electron-updater": "^4.3.8",
-    "electron-squirrel-startup": "^1.0.0"
+    "mitt": "^2.1.0",
    "naudiodon": "^2.3.2",
    "node-record-lpcm16": "^1.0.1",
    "update-electron-app": "^2.0.1",
    "uuid": "^8.3.2",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "ws": "^7.3.1"
  },
-  "config": {
+  "devDependencies": {
-    "forge": {
+    "@types/axios": "^0.14.0",
-      "packagerConfig": {},
+    "@types/electron-devtools-installer": "^2.2.0",
-      "makers": [
+    "@types/jest": "^24.0.19",
-        {
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
-          "name": "@electron-forge/maker-squirrel",
+    "@typescript-eslint/parser": "^2.33.0",
-          "config": {}
+    "@vue/cli-plugin-babel": "~4.5.0",
-        },
+    "@vue/cli-plugin-eslint": "~4.5.0",
-        {
+    "@vue/cli-plugin-router": "~4.5.0",
-          "name": "@electron-forge/maker-zip",
+    "@vue/cli-plugin-typescript": "~4.5.0",
-          "platforms": [
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
-            "darwin"
+    "@vue/cli-plugin-vuex": "~4.5.0",
-          ]
+    "@vue/cli-service": "~4.5.0",
-        },
+    "@vue/compiler-sfc": "^3.0.0-0",
-        {
+    "@vue/eslint-config-typescript": "^5.0.2",
-          "name": "@electron-forge/maker-deb",
+    "@vue/test-utils": "^2.0.0-0",
-          "config": {}
+    "@wasm-tool/wasm-pack-plugin": "^1.3.1",
-        },
+    "electron": "^8.3.3",
-        {
+    "electron-devtools-installer": "^3.1.0",
-          "name": "@electron-forge/maker-rpm",
+    "electron-log": "^4.3.4",
-          "config": {}
+    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "optimize-wasm-webpack-plugin": "^1.0.12",
    "sass-loader": "^8.0.2",
    "spectron": "11.0.0",
    "typescript": "~3.9.3",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "vue-jest": "^5.0.0-0"
  },
  "vue": {
    "lintOnSave": false,
    "pluginOptions": {
      "electronBuilder": {
        "mainProcessFile": "./src/init.ts",
        "rendererProcessFile": "./src/render/main.ts",
        "preload": "./src/render/preload.ts",
        "builderOptions": {
          "appId": "com.crimata.ElectronUpdaterApp",
          "artifactName": "${productName}-${version}.${ext}",
          "publish": {
            "provider": "generic",
            "url": "https://gitlab.com/api/v4/projects/25637892/jobs/artifacts/main/raw/dist_electron?job=build"
          }
        }
-      ]
+      }
    }
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "productName": "crimata-messenger",
  "repository": {
    "type": "git",
    "url": "https://gitlab.com/crimata/electron-app.git",
    "release": "latest"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
        <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/account.js
+++ b/src/account.js
@ -1,43 +0,0 @@
 const { ipcMain } = require("electron");
 const { post } = require("./api");
 const store = require("./utils/store");
 const { launchSession, endSession } = require("./session");
 const { backgroundMitt, ipcEmit } = require("./utils/emitter");
 store.set("account", process.env.ACCOUNT);
 async function auth(_e, creds) 
 {
    const { error, data } = await post("/auth", creds);
    if (error)
    {
        return data;
    }
    store.set("account", data);
    ipcEmit("account", data);
    launchSession(data);
 };
 function logout(_e, reason)
 {
    store.delete("account");
    ipcEmit("account", false, reason);
    endSession();
 };
 function initAccount()
 {
    ipcMain.handle("auth", auth);
    ipcMain.on("logout", logout);
    const account = store.get("account");
    if (account) launchSession(account);
 }
 backgroundMitt.on("logout", (reason) => logout(null, reason));
 exports.initAccount = initAccount;
--- a/src/account.ts
+++ b/src/account.ts
@ -0,0 +1,123 @@
 import { app } from "electron";
 import { parseAuthRes } from "@/auth";
 import { postAuth, postLogin, postLogout } from "@/api/account";
 import { updateAppUI, launchSession, endSession } from "@/session";
 import { getToken, setToken, clearToken } from "./store";
 import { backgroundMitt, ipcEmit } from "@/composables/useEmitter";
 /* 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 {
        if (token) {
            // attempt to login with token
            const res = await postAuth(token);
            const parsed = parseAuthRes(res);
            // save jwt token and profile
            setToken(parsed.token);
            account = parsed.crimataId
            // launch session
            launchSession(parsed.token);
        } else throw(new Error('Failed to authenticate (no token).'));
    } catch (e) {
        console.log(e);
        clearToken();
    } finally {
        // push state changes to the frontend
        updateAppState();
    }
 };
 export const accountLogin = async (payload: any): Promise<Error | void> => {
     const creds = payload as AccountCredentials;
     try {
         // attempt login with email password
         const res = await postLogin(creds.email, creds.password);
         const parsed = parseAuthRes(res);
         // save jwt token and profile
         setToken(parsed.token);
         account = parsed.crimataId;
         // launch session
         launchSession(parsed.token);
         // push state changes to the frontend
         updateAppState();
         return;
     } catch(e) {
         clearToken();
         throw e;
     }
 }
 export const accountLogout = async (): Promise<Error | void> => {
    try {
        // post logout to backend
        await postLogout();
        // remove key and account
        clearToken();
        account = null;
        // push account state to browser
        ipcEmit("set-account", account);
        // kill crimata platform session
        endSession();
        return;
    } catch(e) {
        console.log('[ACCOUNT]', e);
        return (new Error('Failed to logout. Please try again.'));
    }
 }
 // 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();
 }
--- a/src/api.js
+++ b/src/api.js
@ -1,38 +0,0 @@
 const axios = require('axios').default;
 const config = require("./config");
 async function post(route, body)
 {
    let error;
    let data;
    try
    {
        const res = await axios.post(config.API + route, body);
        data = res.data;
        error = false;
    }
    catch (e)
    {
        if (e.response)
        {
            data = e.response.data;
        }
        else if (e.request)
        {
            data = "Can't connect to the server."
        }
        else
        {
            data = "Unknown error occured."
        }
        error = true;
    }
    return { error, data };
 }
 exports.post = post;
--- a/src/api/account.ts
+++ b/src/api/account.ts
@ -0,0 +1,31 @@
 import useHttp from "@/composables/useHttp";
 import axios from "axios";
 import {config} from "@/config";
 const { post } = useHttp();
 export const postAuth = async (token: string) => (
    await axios({
        url: config.BUSINESS_URL + config.BUSINESS_PREFIX + '/account/authenticate',
        headers: {
            Cookie: `crimataCookie=${token}`
        },
        method: 'POST',
    })
 );
 export const postLogin = async (email: string, password: string) => (
    await post('/account/login', { email, password })
 );
 export const postLogout =
    async (): Promise<null | Error> => (await post('/account/logout'));
--- a/src/assets/tray/000.png
+++ b/src/assets/tray/000.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/001.png
+++ b/src/assets/tray/001.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/010.png
+++ b/src/assets/tray/010.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/011.png
+++ b/src/assets/tray/011.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/100.png
+++ b/src/assets/tray/100.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/101.png
+++ b/src/assets/tray/101.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/110.png
+++ b/src/assets/tray/110.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/assets/tray/111.png
+++ b/src/assets/tray/111.png
--- a/src/assets/tray/[email
+++ b/src/assets/tray/[email
--- a/src/audio.js
+++ b/src/audio.js
@ -1,134 +0,0 @@
 const nodeAudio = require("@crimata/nodeaudio");
 const { globalShortcut, ipcMain } = require("electron");
 const { sendMessage } = require("./io");
 const { updateTray } = require("./tray");
 const { encode, decode } = require("./codec");
 const { backgroundMitt, ipcEmit } = require("./utils/emitter");
 let inputDevice;
 let outputDevice;
 let setWriteId;
 let setStreamsId;
 let autoStopId; /* keep track of recording time */
 let playbackId; /* UID of the message being played */
 const streamState = { rec: false, pb: false };
 const /** @type {Int16Array[]} */ chunks = [];
 backgroundMitt.on("data", (int16Arr) => {
    if (streamState.rec) chunks.push(int16Arr);
 });
 backgroundMitt.on("write", (int16Arr) => {
    clearTimeout(setWriteId);
    setWriteId = setTimeout(() => {
        setPlaybackStatus(false);
    }, 500);
 });
 function setStreams() 
 {
    const defaultInput = nodeAudio.core.GetDefaultInputDevice();
    const defaultOutput = nodeAudio.core.GetDefaultOutputDevice();
    if (inputDevice !== defaultInput)
    {
        inputDevice = defaultInput;
        nodeAudio.core.CloseInputStream(inputDevice);
        nodeAudio.core.OpenInputStream(inputDevice);
    }
    if (outputDevice !== defaultOutput) 
    {
        outputDevice = defaultOutput;
        nodeAudio.core.CloseOutputStream(outputDevice);
        nodeAudio.core.OpenOutputStream(outputDevice);
    }
 }
 function startRecording()
 {
    setRecordingStatus(true);
    /* 15s recording time limit */
    autoStopId = setTimeout(stopRecording, 15000);
 }
 function stopRecording()
 {
    if (autoStopId)
    {
        clearTimeout(autoStopId);
    }
    setRecordingStatus(false);
    sendMessage({
        category: "audio",
        text: null,
        blob: encode(nodeAudio.utils.mergeChunks(chunks).buffer)
    });
    chunks.length = 0;
 }
 function initAudio()
 {
    nodeAudio.core.Initialize(backgroundMitt.emit.bind(backgroundMitt));
    setStreamsId = setInterval(setStreams, 2000);
    const res = globalShortcut.register('CommandOrControl+Return', () => {
        streamState.rec ? stopRecording() : startRecording();
    });
    if (!res) throw new Error("Failed to register recording shortcut");
 }
 function playback(base64String, id)
 {
    /* terminate any current playback */
    nodeAudio.core.CancelPlayback();
    ipcEmit("playback", playbackId, false);
    playbackId = id;
    setPlaybackStatus(true);
    nodeAudio.core.WriteToOutputStream(decode(base64String));
 }
 function terminateAudio()
 {
    globalShortcut.unregisterAll();
    /* Only terminate PA if initialized */
    if (setStreamsId)
    {
        clearInterval(setStreamsId);
        nodeAudio.core.Terminate();
    }
 }
 function setRecordingStatus(status)
 {
    streamState.rec = status;
    ipcEmit("record", status);
    updateTray("recording", streamState.rec);
 }
 function setPlaybackStatus(status)
 {
    console.log("Setting playback status: ", status);
    streamState.pb = status;
    ipcEmit("playback", playbackId, status);
    updateTray("playback", status);
 }
 exports.initAudio = initAudio;
 exports.terminateAudio = terminateAudio;
 exports.playback = playback;
 exports.streamState = streamState;
--- a/src/auth.ts
+++ b/src/auth.ts
@ -0,0 +1,5 @@
 export const parseAuthRes = (authRes: any) => {
    const token = authRes.headers['set-cookie'][0].split(";")[0].split("=")[1] as string;
    const crimataId = authRes.data as string;
    return {token, crimataId}
 };
--- a/src/codec.js
+++ b/src/codec.js
@ -1,13 +0,0 @@
 const { ipcMain } = require("electron");
 const { encode, decode } = require("base64-arraybuffer");
 ipcMain.handle("encode", (_e, arrayBuffer) => {
    return encode(arrayBuffer);
 });
 ipcMain.handle("decode", (_e, b64string) => {
    return decode(b64string);
 });
 exports.encode = encode;
 exports.decode = decode;
--- a/src/composables/autoUpdate.ts
+++ b/src/composables/autoUpdate.ts
@ -0,0 +1,31 @@
 const { autoUpdater } = require('electron-updater');
 let win: boolean;
 // Listen for window creation.
 backgroundMitt.on('window-active', (state: boolean) => {
    win = state;
 });
 // Auto updating.
 autoUpdater.requestHeaders = { 'PRIVATE-TOKEN': 'mvvgWYwWnot4bisiQMh_' }
 autoUpdater.on('update-available', (info: any) => {
    console.log(`Update available: ${info.version}`)
 })
 autoUpdater.on('update-downloaded', (info: any) => {
    const updateDialog = {
        type: 'info',
        buttons: ['Restart', 'Later'],
        title: 'Application Update',
        message: info.version,
        detail: 'A new version has been downloaded. Restart the application to apply the updates.'
    }
    dialog.showMessageBox(updateDialog).then((returnValue) => {
        if (returnValue.response === 0) autoUpdater.quitAndInstall()
    })
 })
--- a/src/composables/useEmitter.ts
+++ b/src/composables/useEmitter.ts
@ -0,0 +1,16 @@
 // Backend emitter
 //
 const EventEmitter = require('events');
 class BackgroundMitt extends EventEmitter { }
 export const backgroundMitt = new BackgroundMitt();
 export const ipcEmit = <T>(channel: string, payload: T) => {
    backgroundMitt.emit('ipc-renderer', {
        channel,
        payload
    });
 };
--- a/src/composables/useHttp.ts
+++ b/src/composables/useHttp.ts
@ -0,0 +1,51 @@
 import axios, { AxiosRequestConfig } from 'axios';
 import {config} from "@/config";
 const baseURL = config.BUSINESS_URL + config.BUSINESS_PREFIX;
 interface Request {
    endpoint: string;
    query?: Record<string, any>;
    config?: Record<string, any>;
 }
 const makeQuery = (reqQuery: Record<string, any>) => {
    let result = '';
    result = '?' + Object.entries(reqQuery)
        .map(([ key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
        .join('&')
    return result;
 };
 export default function useHttp() {
    const api = axios.create({
        baseURL,
        withCredentials: true,
    });
    const post = async (endpoint: string, payload?: Record<string, any>): Promise<any> => (
        await api.post(endpoint, payload)
    )
    const get = async (req: Request) => {
        if (req.query) {
            req.endpoint += makeQuery(req.query);
        }
        const res = await api.get(req.endpoint, req.config);
        return res;
    };
    return {
        get, post
    }
 }
--- a/src/composables/useIpcMain.ts
+++ b/src/composables/useIpcMain.ts
@ -0,0 +1,80 @@
 import { ipcMain, IpcMainInvokeEvent, IpcMainEvent } from "electron";
 export class IpcHandler<InputParam, ReturnType> implements IIpcHandler<InputParam, ReturnType> {
  readonly channel: string;
  readonly _handlerCallback: IpcHandlerCallback<InputParam, ReturnType>;
  constructor(options: {
      channel: string;
      handlerCallback: IpcHandlerCallback<InputParam, ReturnType>;
  }) {
    this.channel = options.channel;
    this._handlerCallback = options.handlerCallback;
  }
  handle() {
      this.remove();
      ipcMain.handle(this.channel, this._onInvoke);
  }
  remove() {
      ipcMain.removeHandler(this.channel);
  }
  private _onInvoke = (_e: IpcMainInvokeEvent, payload?: string | null): Promise<Error | ReturnType> => {
      return new Promise(async (resolve, reject) => {
          console.log(`[IPC] Handle:${this.channel}`);
          try {
              const params = payload ? JSON.parse(payload) : null;
              const res = await this._handlerCallback(params);
              resolve(res as unknown as ReturnType);
          } catch(e) {
              console.log(`[IPC] Error:${this.channel}`);
              reject(e);
          }
      });
  }
 }
 export class IpcListener<InputParam> implements IIpcListener<InputParam> {
  readonly channel: string;
  readonly _listenerCallback: IpcListenerCallback<InputParam>;
  constructor(options: {
      channel: string;
      listenerCallback: IpcListenerCallback<InputParam>;
  }) {
    this.channel = options.channel;
    this._listenerCallback = options.listenerCallback;
  }
  listen() {
      this.remove();
      ipcMain.on(this.channel, this._onPost);
  }
  remove() {
      ipcMain.removeAllListeners(this.channel);
  }
  private _onPost = (_e: IpcMainEvent, payload: InputParam): void => {
      console.log(`[IPC] Post: ${this.channel}`);
      this._listenerCallback(payload);
  }
 }
--- a/src/composables/useSaveToJSON.ts
+++ b/src/composables/useSaveToJSON.ts
@ -0,0 +1,13 @@
 import {config} from "@/config";
 import fs from 'fs';
 export const saveToJson = (fileName: string, data: any) => {
    fs.writeFile(config.configPath + fileName, JSON.stringify(data), (err) => {
        if (err) {
            console.log("Error when saving to json.")
        }
    })
 }
--- a/src/composables/useWebsockets.ts
+++ b/src/composables/useWebsockets.ts
@ -0,0 +1,101 @@
 "use strict";
 import WebSocket from 'ws';
 const _connectionCheckTimeout = 4000;
 const _reconnectTimeout = 1000;
 let _connectionCheckInterval: ReturnType<typeof setTimeout>;
 export default function useWebSockets(
    messageCallback: (message: string) => void,
    connectionStatusCallback: (status: string) => void,
    statusOptions?: {
       openMessage: string;
       pongMessage: string;
       closeMessage: string;
       pingErrorMessage: string;
    },
 ) {
    let socket: WebSocket;
    const send = async (data: Record<string, any>): Promise<boolean> => {
        return new Promise((resolve, reject) => {
            if (socket) {
                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(JSON.stringify(data));
                    resolve(true);
                }
            }
            reject(false);
        });
    }
    const connect = (socketUrl: string, secret: string) => {
        // avoid setting multiple interval;
        if (_connectionCheckInterval) clearInterval(_connectionCheckInterval);
        /* create a new socket */
        socket = new WebSocket(socketUrl);
        /* add event listeners */
        socket.on("open", () => {
            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(statusOptions ? statusOptions.pingErrorMessage : "Connection Lost");
                        setTimeout(() => connect(socketUrl, secret), _reconnectTimeout);
                    }
                });
            }, _connectionCheckTimeout);
        });
        socket.on("message", (event: WebSocket.MessageEvent) => {
            console.log("message received", event);
            messageCallback(event.toString())
        });
        socket.on("close", (code: number, reason: string) => {
            connectionStatusCallback(statusOptions ? statusOptions.closeMessage : "Connection Closed");
            clearInterval(_connectionCheckInterval);
            if (code !== 1000 || reason !== 'session-logout') {
                setTimeout(() => {
                    connect(socketUrl, secret), _reconnectTimeout
                });
            }
        });
        socket.on("pong", () => connectionStatusCallback(statusOptions ? statusOptions.pongMessage : "Pong"));
        socket.on('error', () => {});
    }
    const close = (code: number, reason: string) => {
        if (socket) {
            socket.close(code, reason);
        }
    };
    return {
        connect,
        send,
        close
    };
 }
--- a/src/config.js
+++ b/src/config.js
@ -1,11 +0,0 @@
 const { app } = require("electron");
 const DOMAIN = "crimata.com";
 /* If PROD env variable exists */
 const prod = process.env.PROD;
 module.exports = {
    PLATFORM: prod ? `https://app.${DOMAIN}` : `http://localhost:5000`,
    API: prod ? `https://${DOMAIN}/api` : `http://localhost:5001`
 }
--- a/src/config.ts
+++ b/src/config.ts
@ -0,0 +1,17 @@
 import { app } from "electron";
 const env = process.env;
 const PLATFORM_PORT = env.PLATFORM_PORT || 8760;
 const PLATFORM_IP = env.PLATFORM_IP || 'http://127.0.0.1';
 const BUSINESS_PORT = env.BUSINESS_PORT || 3000;
 const BUSINESS_IP = env.BUSINESS_IP || 'http://127.0.0.1';
 export const config = {
    PLATFORM_URL: `${PLATFORM_IP}:${PLATFORM_PORT}`,
    BUSINESS_URL: `${BUSINESS_IP}:${BUSINESS_PORT}`,
    BUSINESS_PREFIX: '/api',
    configPath: app.getPath('userData')
 }
--- a/src/images/icon.png
+++ b/src/images/icon.png
--- a/src/images/[email
+++ b/src/images/[email
--- a/src/images/icon_32x32.png
+++ b/src/images/icon_32x32.png
--- a/src/images/[email
+++ b/src/images/[email
--- a/src/init.ts
+++ b/src/init.ts
@ -0,0 +1,51 @@
 /**
 * Entry point for Crimata electron app.
 * "Look on my Works, ye Mighty, and despair!"
 */
 "use strict";
 import { app, protocol } from "electron";
 import createWindow from "./window";
 import main from "./main";
 import { backgroundMitt } from '@/composables/useEmitter';
 import {setWindow, getWindow } from './store';
 console.log('Starting Crimata electron app.');
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
    { scheme: "app", privileges: { secure: true, standard: true } }
 ]);
 const isDev = require('electron-is-dev');
 // Listen for window creation.
 backgroundMitt.on('window-active', (state: boolean) => {
    setWindow(state)
 });
 /* Start main process on ready */
 app.on("ready", async () => {
    await main();
 });
 // Must keep to ensure app doesn't quit on close.
 app.on("before-quit", async () => {
 });
 // Must keep to ensure app doesn't quit on close.
 app.on("window-all-closed", () => {
 });
 // When user clicks app icon (re-open)
 app.on("activate", () => {
    if (!getWindow()) createWindow();
 });
 // Exit cleanly on request from parent process in development mode.
 if (isDev) {
    process.on("SIGTERM", () => {
        app.quit();
    });
 }
--- a/src/io.js
+++ b/src/io.js
@ -1,69 +0,0 @@
 const WebSocket = require("ws");
 const { ipcMain } = require("electron");
 const config = require("./config");
 const { updateTray } = require("./tray");
 const { backgroundMitt, ipcEmit } = require("./utils/emitter");
 let connection = null;
 let pingId;
 let reconnectId;
 function connectToPlatform(account)
 {
    if (pingId) clearInterval(pingId);
    connection = new WebSocket(`${config.PLATFORM}/${account}`)
    .on("open", () => pingId = setInterval(() => connection.ping(null, true), 1000))
    .on("pong", () => setConnectionStatus(0))
    .on("error", () => {}) /** keep silent on error */
    .on("message", (payload) => backgroundMitt.emit("message", JSON.parse(payload)))
    .on("close", (_code, reason) => {
        setConnectionStatus(1);
        if (reason)
        {
            if (reason == "unauthorized")
            {
                backgroundMitt.emit("logout", reason);
            }
            return;
        }
        reconnectId = setTimeout(() => connectToPlatform(account), 500);
    });
 }
 function sendMessage(message)
 {
    if (connection.readyState === WebSocket.OPEN) {
        connection.send(JSON.stringify(message));
    } else console.log("Failed to send message");
 }
 function disconnectFromPlatform()
 {
   clearTimeout(reconnectId);
   if (connection.open) connection.close(1000, "logout");
 }
 function setConnectionStatus(status)
 {
    updateTray("disconnect", status);
    ipcEmit("ws", status);
 }
 ipcMain.on("message", (_e, message) => sendMessage(message));
 exports.connectToPlatform = connectToPlatform;
 exports.sendMessage = sendMessage;
 exports.disconnectFromPlatform = disconnectFromPlatform;
--- a/src/ipc/handlers.ts
+++ b/src/ipc/handlers.ts
@ -0,0 +1,19 @@
 "use strict";
 import { accountLogin, accountLogout } from "@/account";
 import { IpcHandler } from "@/composables/useIpcMain";
 const LOGIN_CHANNEL = "invoke-account-login";
 const LOGOUT_CHANNEL = "invoke-account-logout";
 export const loginHandler =  new IpcHandler({
    channel: LOGIN_CHANNEL,
    handlerCallback: accountLogin
 });
 export const logoutHandler =  new IpcHandler({
    channel: LOGOUT_CHANNEL,
    handlerCallback: accountLogout
 });
--- a/src/ipc/index.ts
+++ b/src/ipc/index.ts
@ -0,0 +1,33 @@
 "use strict";
 import * as handlers from "./handlers";
 import * as listeners from "./listeners";
 const ipcHandlers: IPCHandlers = {};
 const ipcListeners: IPCListeners = {};
 const _initHandlers = (): void => {
    for (const [key, handler] of Object.entries(handlers)) {
      if (!(key in ipcHandlers)) {
          ipcHandlers[key] = handler;
          handler.handle();
      }
    }
 };
 const _initListeners = (): void => {
    for (const [key, listener] of Object.entries(listeners)) {
      if (!(key in ipcListeners)) {
          ipcListeners[key] = listener;
          listener.listen();
      }
    }
 };
 export default function initIpcMain(): void {
    _initHandlers();
    _initListeners();
 }
--- a/src/ipc/listeners.ts
+++ b/src/ipc/listeners.ts
@ -0,0 +1,24 @@
 import { IpcListener } from "@/composables/useIpcMain"
 import { sendMessage } from '@/session';
 import { updateAppState } from "@/account";
 import { onNavBar } from "@/window";
 const CLIENT_MESSAGE_CHANNEL = "post-session-send"
 const APP_MOUNT_CHANNEL = "post-app-mount";
 const NAV_BAR_CHANNEL = "post-nav-bar";
 export const messageListener = new IpcListener<Raw | Request>({
    channel: CLIENT_MESSAGE_CHANNEL,
    listenerCallback: sendMessage
 });
 export const appMountListener = new IpcListener<null>({
    channel: APP_MOUNT_CHANNEL,
    listenerCallback: updateAppState
 });
 export const navBarListener = new IpcListener({
    channel: NAV_BAR_CHANNEL,
    listenerCallback: onNavBar
 });
--- a/src/main.js
+++ b/src/main.js
@ -1,28 +0,0 @@
 const { app, protocol, ipcMain, nativeTheme } = require("electron");
 const store = require("./utils/store");
 const { initTray } = require("./tray");
 const { createWin } = require("./window");
 const { initAccount } = require("./account"); 
 // const { terminateAudio } = require("./audio");
 // Assert a light theme
 nativeTheme.themeSource = "light";
 app.on("ready", () =>
 {
    initTray();
    createWin();
    initAccount();
 });
 // app.on("will-quit", terminateAudio);
 // When user clicks app icon (re-open)
 app.on("activate", createWin);
 // Prevents app from quitting on window close event
 app.on('window-all-closed', (e) => e.preventDefault());
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,56 @@
 /**
 * Where the background logic really begins, gets called by app.onReady().
 *
 * Handles authentication. If profile is set, we launch a session, which consis
 * of opening a connection with the platform, initializing the audio streams.
 *
 * The session is primarily an interface between the frontend and the platform,
 * relaying messages from one to the other.
 *
 */
 import initIpcMain from "@/ipc/index";
 import  { accountAuth } from "./account";
 import createWindow from "./window";
 import { Menu, Tray } from 'electron';
 const nativeImage = require('electron').nativeImage
 import path, {resolve} from 'path';
 let tray = null
 export default async function main() {
    // TODO: fix image paths
    // currently looking in dist-electron directory
    // should be looking in source
    console.log(resolve(__dirname, './images', 'icon.png'))
    console.log(path.join(__dirname, './images/icon.png'))
    try {
        const image = nativeImage.createFromPath(resolve(__dirname, 'images', 'icon_16x16.png'));
        const urlImage = nativeImage.createFromDataURL('https://github.com/vladimiry-playground/electron-quick-start-tray-issue/blob/master/icon.png');
            console.log(image)
            console.log(urlImage)
        tray = new Tray(resolve(__dirname, 'images', 'icon_16x16.png'))
    } catch(e) {
        console.log(e)
    }
    // const contextMenu = Menu.buildFromTemplate([
    //   { label: 'Item1', type: 'radio' },
    //   { label: 'Item2', type: 'radio' },
    //   { label: 'Item3', type: 'radio', checked: true },
    //   { label: 'Item4', type: 'radio' }
    // ])
    // tray.setToolTip('This is my application.')
    // tray.setContextMenu(contextMenu)
    /* initiate controls for frontend to use when needed */
    initIpcMain();
    /* launch browser window */
    await createWindow();
    /* try to authenticate with token */
    await accountAuth();
 }
--- a/src/profile.ts
+++ b/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()
    }
 }
--- a/src/render/App.vue
+++ b/src/render/App.vue
@ -0,0 +1,74 @@
 <template>
  <!-- Only render when profile has been set -->
  <main id="app" v-if="ready">
    <Header />
    <Messenger v-if="account"/>
    <Login v-else />
  </main>
  <!-- Show spash screen if ready is false -->
  <Splash v-else />
 </template>
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 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 { ready, account, setAccount, clearAccount } from "@/render/shared/account";
 import { postAppMount } from "@/render/ipc";
 export default defineComponent({
  components: {
    Splash,
    Messenger,
    Login,
    Header
  },
  setup() {
    onMounted(() => {
        postAppMount()
    });
    return {
        account,
        ready
    }
  }
 })
 </script>
 <style lang="scss">
 html, body {
  margin: 0;
  padding: 0;
 }
 #app {
  font-family: "SF Pro Text";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  width: 100vw;
  border-radius: 15px;
 }
 </style>
--- a/src/render/assets/connectLogo.svg
+++ b/src/render/assets/connectLogo.svg
@ -1,12 +1,14 @@
-<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="24.87" height="23.001" viewBox="0 0 24.87 23.001">
+<svg xmlns="http://www.w3.org/2000/svg" width="24.87" height="23.001" viewBox="0 0 24.87 23.001">
-  <g id="Group_33" data-name="Group 33">
+  <g id="Group_541" data-name="Group 541" transform="translate(-4127 -507)">
-    <g id="Group_32" data-name="Group 32" transform="translate(0 0)">
+    <g id="Group_33" data-name="Group 33" transform="translate(4127 507)">
-      <g id="Group_31" data-name="Group 31" transform="translate(0 11.948)">
+      <g id="Group_32" data-name="Group 32" transform="translate(0 0)">
-        <circle id="Ellipse_50" data-name="Ellipse 50" cx="5.527" cy="5.527" r="5.527" transform="translate(0 0)" fill="#383838"/>
+        <g id="Group_31" data-name="Group 31" transform="translate(0 11.948)">
-        <circle id="Ellipse_51" data-name="Ellipse 51" cx="5.527" cy="5.527" r="5.527" transform="translate(13.817 0)" fill="#383838"/>
+          <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>
      <circle id="Ellipse_52" data-name="Ellipse 52" cx="5.527" cy="5.527" r="5.527" transform="translate(6.898)" 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>
 </svg>
--- a/src/render/assets/crimataAvatar.svg
+++ b/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>
--- a/src/render/assets/fonts/SF-Compact-Display-Bold.otf
+++ b/src/render/assets/fonts/SF-Compact-Display-Bold.otf
--- a/src/render/assets/fonts/SF-Compact-Rounded-Bold.otf
+++ b/src/render/assets/fonts/SF-Compact-Rounded-Bold.otf
--- a/src/render/assets/fonts/SF-Pro-Text-Regular.otf
+++ b/src/render/assets/fonts/SF-Pro-Text-Regular.otf
--- a/src/render/components/app.js
+++ b/src/render/components/app.js
@ -1,44 +0,0 @@
 import Login from "./login.js";
 import Splash from "./splash.js";
 import Header from "./header.js";
 import Messenger from "./messenger.js";
 const account = Vue.ref(null);
 const App =
 {
    components: {
        Splash,
        Header,
        Messenger,
        Login
    },
    setup()
    {
        return { account };
    },
    template: `
        <div id="app" v-if="account !== null">
            <Header />
            <Messenger v-if="account"/>
            <Login v-else />
        </div>
        <Splash v-else />`
 }
 window.mainApi.on("account", (value, reason) => {
    if (reason) alert(reason);
    account.value = value;
 });
 export default App;
 export { account };
 // Is called when window is about to close or reload
 window.onbeforeunload = () => console.log("beforeunload");
--- a/src/render/components/bubble.js
+++ b/src/render/components/bubble.js
@ -1,48 +0,0 @@
 const Bubble =
 {
    props: ["category", "text", "html", "blob", "modifier", "child"],
    setup(props)
    {
        const getUrl = () => {
            return `data:${props.category};base64,${props.blob}`;
        }
        Vue.onMounted(() => {
            const el = document.getElementById("messenger");
            setTimeout(() => {
                el.dispatchEvent(new CustomEvent('adjust-scroll'));
            }, 100);
        });
        if (!props.text) props.text = "..."; 
        return { getUrl };
    },
    template: `
        <div :class="'bubble ' + modifier + '-bubble ' + modifier +'-'+ child">
            <small class="bubble-notify" v-if="modifier=='ai'"></small>
            <p v-if="category=='text'">{{ text }}</p>
            <p v-else-if="category=='audio'">{{ text }}</p>
            <div v-else-if="category=='html'" v-html="html"></div>
            <img v-else-if="category == 'image'" :src="getUrl()" />
            <a v-else :download="text" :href="getUrl()">{{ text }}</a>
        </div>`
 };
 export default Bubble;
 // TODO: should include other styling/actions for audio bubbles
--- a/src/render/components/bubble.vue
+++ b/src/render/components/bubble.vue
@ -0,0 +1,98 @@
 <template>
  <div :class="`bubble ${modifier}-bubble ${modifier}-${child}`">
    <div v-show="!seen" class="notify"></div>
    {{ text }}
  </div>
 </template>
 <script lang='ts'>
 import { defineComponent } from 'vue';
 export default defineComponent({
  name: "Bubble",
  props: ["modifier", "text", "child", "seen"],
 })
 </script>
 <style lang="scss" scoped>
 .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);
  }
  100% {
    transform: scale(0);
  }
 }
 </style>
--- a/src/render/components/connectionStatus.vue
+++ b/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>
--- a/src/render/components/context.js
+++ b/src/render/components/context.js
@ -1,33 +0,0 @@
 const Context = 
 {
    props: ["modifier", "context", "avatar", "id"],
    setup(props) {
        const playback = Vue.ref(false);
        Vue.onMounted(() => {
            window.mainApi.on("playback", (id, status) => {
                if (id === props.id) {
                    playback.value = status;
                }
            });
        });
        return { playback };
    },
    template: `
        <span :class="'context ' + modifier + '-context'">
            <img v-show="avatar" class="context-avatar" 
                :class="{ audio: playback }"
                :src="'data:image/png;base64,' + avatar" 
            />
            {{ context }}
        </span> `
 }
 export default Context;
--- a/src/render/components/context.vue
+++ b/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>
--- a/src/render/components/control/draggify.js
+++ b/src/render/components/control/draggify.js
@ -1,195 +0,0 @@
 const saveLocation = "input_item_position";
 const defaultPosition = { x: 15, y: 400 };
 //---Dragabble Helper Funcs--------------------------------------
 // Calculate distance to nearest side.
 function calcSideProximity (elementX, elementLength, winW) {
  // Calc right short.
  let short = winW - elementX - elementLength;
  // See if it's left short.
  if (elementX + 20 < winW / 2) {
    short = elementX
  }
  return short
 }
 // Update elementX or elementY value on window resize
 function calcPosition (elementPosition, elementLength, percent, short, win) {
    // Is it close to the right/bottom side?
    if (percent > 0.75) {
        elementPosition = win - short - elementLength;
    }
    // Is it not close to a side?
    if (percent < 0.75 && percent > 0.25) {
        elementPosition = win * percent
    }
    return elementPosition
 }
 function draggify(elementId, parentId, margin) {
    let element;
    let parent;
    /* only compatible with elements having equal width and height */
    let elementLength;
    // Cords of inputItem.
    const elementX = Vue.ref();
    const elementY = Vue.ref();
    // Position of inputItem on terms of percentage of window.
    let percentX;
    let percentY;
    // How close inputItem is to closest X or Y side.
    let xShort;
    let yShort;
    //---Reposition Anime-----------------------------------------------
    // Move element to target smoothly.
    const repositionAnime = (xChange, yChange) => {
        const xStep = xChange / 1000;
        const yStep = yChange / 1000;
        for (let i = 1; i <= 1000; i++) {
          setTimeout(() => {
            elementX.value += xStep;
            elementY.value += yStep;
          }, 30) // 60fps
        }
    }
    //---Event Handlers-----------------------------------------------
    // Update the position of inputItem on mouse dragging.
    const onMouseMove = (e) => {
      e.preventDefault();
      elementX.value = element.offsetLeft + e.movementX;
      elementY.value = element.offsetTop + e.movementY;
    }
    // Add an event listener for dragging.
    const onMouseDown = (e) => {
      e.preventDefault();
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('mouseup', onMouseUp);
    }
    // Update position references when user is done moving targetEl.
    const onMouseUp = (e) => {
      e.preventDefault();
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
      // See if and calculate reposition.
      let x = 0; // vector change
      let y = 0;
      const winW = parent.clientWidth;
      const winH = parent.clientHeight;
      if (elementX.value < 0) {
        x = (elementX.value - margin)*-1
      }
      if (elementX.value > winW - elementLength) {
        const b = winW - elementLength - margin;
        x = (elementX.value - b)*-1
      }
      // Reposition y
      if (elementY.value < 0) {
        y = (elementY.value - margin)*-1
      }
      if (elementY.value > winH - elementLength) {
        const d = winH - elementLength - margin;
        y = (elementY.value - d)*-1
      }
      // Reposition if needed.
      if (x !== 0 || y !== 0) repositionAnime(x, y);
      xShort = calcSideProximity(elementX.value, elementLength, winW);
      yShort = calcSideProximity(elementY.value, elementLength, winH);
      // Update percentages.
      percentX = elementX.value / winW;
      percentY = elementY.value / winH;
      // Save position.
      savePosition();
    }
    // Update position of targetEl on windowResize.
    const onWindowResize = (_e) => {
      elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, parent.clientWidth);
      elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, parent.clientHeight);
      savePosition();
    }
    const savePosition = () => {
      window.localStorage.setItem(saveLocation, JSON.stringify({
        x: elementX.value,
        y: elementY.value
      }));
    }
    //---------------------------------------------------------------
    Vue.onMounted(() => {
      element = document.getElementById(elementId);
      parent = document.getElementById(parentId);
      elementLength = element.offsetWidth;
      // Initialize the positional references.
      percentX = elementX.value / parent.clientWidth;
      percentY = elementY.value / parent.clientHeight;
      xShort = calcSideProximity(elementX.value, elementLength, parent.clientWidth);
      yShort = calcSideProximity(elementX.value, elementLength, parent.clientHeight);
      // Then, we can listen for window resize (and mousedown).
      element.addEventListener("mousedown", onMouseDown);
      parent.addEventListener('resize', onWindowResize)
    });
    // remove event listeners on component dismount.
    Vue.onUnmounted(() => {
        element.removeEventListener('mousedown', onMouseDown);
        parent.removeEventListener('resize', onWindowResize)
        parent.removeEventListener('mouseup', onMouseUp)
        parent.removeEventListener('mousemove', onMouseMove);
    });
    // Try loading initPosition, otherwise set default values
    let initPosition;
    const rawData = window.localStorage.getItem("saveLocation")
    rawData ? initPosition = JSON.parse(rawData) : initPosition = defaultPosition;
    elementX.value = initPosition.x;
    elementY.value = initPosition.y;
    return { elementX, elementY };
 }
 export default draggify;
--- a/src/render/components/control/drop.js
+++ b/src/render/components/control/drop.js
@ -1,24 +0,0 @@
 const onDrop = async (e) => {
    const file = e.dataTransfer.items[0].getAsFile();
    if (file.size >= 1 * 1000 * 1000) {
        alert("File must be under 1MB.");
        return;
    }
    const buffer = await file.arrayBuffer();
    const b64String = await window.mainApi.invoke("encode", buffer);
    let category = "file";
    if (file.type.startsWith("image/")) {
        category = "image"
    }
    window.mainApi.send("message", {
        category: category,
        text: file.name,
        blob: b64String
    });
 }
 export default onDrop;
--- a/src/render/components/control/scroll.js
+++ b/src/render/components/control/scroll.js
@ -1,20 +0,0 @@
 let el;
 const scroll = () => {
    if (!el) {
        el = document.getElementById("messenger");
        window.addEventListener('resize', scroll);
    }
    el.scrollTo({
      top: el.scrollHeight - el.clientHeight,
      behavior: 'smooth'
    });
 }
 export default scroll;
 // const isBottom = () => {
 //   if (el) {
 //     return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
 //   }
 // }
--- a/src/render/components/control/text.js
+++ b/src/render/components/control/text.js
@ -1,84 +0,0 @@
 const inputLength = 230;
 const metaKeys = [
    "Tab",
    "CapsLock",
    "Shift",
    "Control",
    "Alt",
    "Meta",
    " ",
    "ArrowLeft",
    "ArrowRight",
    "ArrowUp",
    "ArrowDown",
    "Enter",
    "Backspace",
    "Escape"
 ];
 function useText(elementId, parentId, left)
 {
    let el;
    let parent;
    const show = Vue.ref(false);
    const leftSide = Vue.ref(false);
    const calcSide = () => {
        parent.clientWidth - left.value < inputLength ? leftSide.value = true : leftSide.value = false;
    }
    /* handle user typing */
    Vue.onMounted(() => {
        el = document.getElementById(elementId);
        parent = document.getElementById(parentId);
        window.addEventListener("keydown", (e) => {
            if (!show.value && !metaKeys.includes(e.key) && !e.ctrlKey)
            {
                show.value = true;
            }
            else if (show.value && ((el.value.length === 1 && e.key === "Backspace") || e.key === "Escape"))
            {
                show.value = false;
            }
            if (e.key === "Enter" && el.value)
            {
                if (el.value.length >= 250) {
                    alert("250 character limit")
                    return;
                }
                window.mainApi.send("message", { 
                    category: "text", 
                    text: el.value,
                    blob: null
                });
                show.value = false;
            }
        });
        calcSide();
    });
    Vue.watch(left, calcSide);
    Vue.watch(show, (c, _p) => {
        if (c) { 
            el.focus();
        } else { 
            el.value = "";
            el.blur();
        }
    });
    return { leftSide, show };
 }
 export default useText;
--- a/src/render/components/control/valid.js
+++ b/src/render/components/control/valid.js
@ -1,23 +0,0 @@
 export const isEmail = (value) => {
    console.log(value);
    if (!/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(value)) {
        return "Not a valid email."
    }
 }
 export const isPassword = (value) => {
    if (!/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/.test(value)) {
        return "Password must have symbol, number, uppercase and be 6-16 length.";
    }
 }
 /**
 * Name is optional and therefore doesn't return error if no value.
 */
 export const isName = (value) => {
    if (value) {
        if (!/^([a-zA-Z ]){5,30}$/.test(value)) {
            return "Name must be at least 5 long.";
        }
    }
 }
--- a/src/render/components/controllers/helpers.ts
+++ b/src/render/components/controllers/helpers.ts
@ -0,0 +1,99 @@
 import { ref, Ref } from "vue";
 import anime from "animejs";
 export function animateTextInput () {
    const side = ref("right");
    function show () {
        const t1 = (side.value === "right") ? 50 : -70;
        const t2 = (side.value === "right") ? 110 : -130;
        anime({
            targets: '#textInput',
            opacity: [0, 1],
            translateX: [t1, t2],
            scale: [0.3, 1],
            duration: 500,
            easing: 'easeOutExpo',
        })
    }
    function hide () {
        const t = (side.value === "right") ? 50 : -80;
        anime({
            targets: '#textInput',
            opacity: [1, 0],
            translateX: t,
            scale: 0.3,
            duration: 500,
            easing: 'easeOutExpo',
        })
    }
    function switchSide () {
        const t = (side.value === "right") ? -130 : 110;
        anime({
            targets: '#textInput',
            translateX: t,
            duration: 500,
            easing: 'easeOutExpo',
        })
    }
    return {
        side,
        show,
        hide,
        switchSide
    };
 }
 export function animateAudioInput () {
    function show () {
        anime({
            targets: '#recIcon',
            opacity: [0, 0.75],
            scale: [0.0, 1],
            duration: 250,
            easing: 'linear',
        })
    }
    function hide () {
        anime({
            targets: '#recIcon',
            opacity: [0.75, 0],
            scale: [1, 0],
            duration: 250,
            easing: 'linear',
        })
    }
    return {
        show,
        hide
    };
 }
 // 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";
  }
 }
--- a/src/render/components/controllers/inputItem.control.audio.ts
+++ b/src/render/components/controllers/inputItem.control.audio.ts
@ -0,0 +1,77 @@
 import { onMounted, onUnmounted, ref, Ref } from "vue";
 import { postMessage } from "@/render/ipc";
 import { animateAudioInput } from "./helpers";
 import { invokeReturnAudio, postAudioChunk } from "@/render/ipc";
 export default function useAudioInputController (typing: Ref) {
    const recording = ref(false);
    let mediaRecorder: MediaRecorder;
    const { show, hide } = animateAudioInput();
    // initialize audio
    const conf = {audio: true, video: false}
    navigator.mediaDevices.getUserMedia(conf).then((stream: MediaStream) => {
        const options = {mimeType: 'audio/webm'};
        mediaRecorder = new MediaRecorder(stream, options);
        // post any mew audio to backend
        mediaRecorder.addEventListener('dataavailable', (e: BlobEvent) => {
            e.data.arrayBuffer().then((buff: ArrayBuffer) => {
                postAudioChunk(buff);
            });
        });
        // get audio and post new message to backend
        mediaRecorder.addEventListener('stop', (_e: Event) => {
            invokeReturnAudio().then((audio: ArrayBuffer[] | Error) => {
                console.log(audio);
                // postMessage(newMessage({audio: audio}));
            });
        });
    });
    // start recording on space bar
    const record = () => {
        console.log("INPT:Capturing audio...")
        mediaRecorder.start();
        recording.value = true;
        show()
    }
    // stop recording and send on release
    const stop = () => {
        console.log("INPT:Stopping record.")
        mediaRecorder.stop();
        recording.value = false;
        hide();
    }
    const onKeyDown = (e: KeyboardEvent) => {
        if (e.keyCode == 32 && !typing.value) record();
    }
    const onKeyUp = (e: KeyboardEvent) => {
        if (e.keyCode == 32 && recording.value) stop();
    }
    //-----------------------------------------------------------
    onMounted(() => {
        window.addEventListener("keydown", onKeyDown);
        window.addEventListener("keyup", onKeyUp);
    });
    onUnmounted(() => {
        window.removeEventListener("keydown", onKeyDown);
        window.removeEventListener("keyup", onKeyUp);
    })
    return {
        recording
    }
 }
--- a/src/render/components/controllers/inputItem.control.text.ts
+++ b/src/render/components/controllers/inputItem.control.text.ts
@ -0,0 +1,135 @@
 import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
 import { postMessage } from "@/render/ipc";
 import { animateTextInput } from "./helpers";
 export default function useTextInputController(elementX: Ref) {
    let textInput: HTMLInputElement | null;
    const { side, show, hide, switchSide } = animateTextInput();
    let firstKey = true;
    const typing = ref(false);
    // Prep inputItem for typing.
    const prepInput = () => {
        show()
        typing.value = true
    }
    // Clear and hide inputItem after done typing.
    const clearInput = () => {
        if (textInput) {
            textInput.value = "";
            textInput.blur();
        }
        hide()
        firstKey = true;
        typing.value = false;
    }
    // Send a message and clean up after.
    const sendMessage = () => {
        if (textInput) {
            // Send it to the backend for processing.
            const message: Raw = {
                text: textInput.value,
                audio: false
            };
            postMessage(message);
            clearInput()
        }
    }
    // Keys that are capable of opening the text input (numbers and letters).
    const isHotKey = (key: number) => {
        if (key >= 47 && key <= 91) { // a letter
            return true
        }
    }
    //---Callbacks-----------------------------------------------
    const onKeyDown = (e: KeyboardEvent) => {
        const key = e.keyCode;
        if (textInput) {
            // Only runs on firstKey.
            if (firstKey) {
                if (!isHotKey(key)) {
                    return
                }
                prepInput()
            }
            textInput.focus();
            // Close input when no text or on ESC.
            if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
                clearInput()
                return
            }
            if (key === 27) { // escape
                clearInput()
                return
            }
            // Close and send on enter.
            if (key === 13) {
                if (textInput.value) {
                    sendMessage()
                    return
                }
            }
            if (firstKey) firstKey = false
        }
    }
    //-----------------------------------------------------------
    // Watch parent position and update side.
    watch(elementX, (elementX, _previous) => {
        const winW = window.innerWidth
        // Logic depends on the side we are on.
        if (side.value === "right") {
            if (winW - elementX < 230) {
                switchSide()
                side.value = "left"
            }
        }
        else {
            if (winW - elementX > 230) {
                switchSide()
                side.value = "right"
            }
        }
    });
    onMounted(() => {
        textInput = document.getElementById("textInput") as HTMLInputElement;
        window.addEventListener("keydown", onKeyDown);
    })
    onUnmounted(() => {
        window.removeEventListener("keydown", onKeyDown);
    });
    return {
        typing
    }
 }
--- a/src/render/components/form.js
+++ b/src/render/components/form.js
@ -1,86 +0,0 @@
 // Basic debounce implentation
 const debounce = (fn, delay) => {
    let timeoutId;
    return (...args) => {
        if (timeoutId) clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            fn(...args);
        }, delay);
    }
 }
 /**
 * Dynamic form component with auto submission and validation.
 * 
 * props
 *     .fields => List of field objects
 *     .channel => e.g. "/login"
 *     .modifier => Form description
 */
 const SmartForm = 
 {
    props: ["fields", "channel", "modifier"],
    setup(props)
    {
        // Error log below form
        const log = Vue.ref(props.modifier);
        /**
         * Valid and submit form data to channel.
         */
        const submit = async () => {
            // Validate each field
            for (let field of props.fields) {
                const error = field.valid(field.value);
                if (error) return error;
            }
            // Reduce fields into the form
            const form = props.fields.reduce((v, n) => {
                v[n.name] = n.value;
                return v;
            }, {});
            console.log("Submitting =>", form);
            return await window.mainApi.invoke(props.channel, form);
        }
        /**
         * Wrapper for submit that is debounced and updates UI elements
         */
        const preSub = debounce(async () => {
            const error = await submit();
            log.value = error ? error : props.modifier
        }, 2000);
        return { preSub, log };
    },
    template: `
        <form id="smart-form" class="smart-form" v-on:input="preSub">
            <div v-for="field in fields" style="display:flex">
                <input type="text" class="text-field" 
                    v-model="field.value"
                    :name="field.name"
                    :placeholder="field.placeholder"
                />
            </div>
            <div class="smart-form-logs">{{ log }}</div>
        </form>`
 }
 export default SmartForm;
--- a/src/render/components/header.js
+++ b/src/render/components/header.js
@ -1,23 +0,0 @@
 const Header =
 {
    setup() {
        const onNavBar = (command) => window.mainApi.send("nav", command);
        return { onNavBar };
    },
    template: `
    <button id="header-titlebar" />
    <span id="header-menu">
        <button
            class="header-menu-button header-exit-button button"
            @click.prevent="onNavBar('close')"
        />
        <button
            class="header-menu-button header-min-button button"
            @click.prevent="onNavBar('min')"
        />
    </span> `
 }
 export default Header;
--- a/src/render/components/header.vue
+++ b/src/render/components/header.vue
@ -0,0 +1,90 @@
 <template>
    <button id="titlebar" />
    <span id="menu">
      <button
        class="menuButton exitButton"
        @click.prevent="postNavBarExit"
      />
      <button
        class="menuButton minimizeButton"
        @click.prevent="postNavBarMin"
      />
    </span>
 </template>
 <script lang="ts">
    // import { postNavBarExit, postNavBarMin } from "@/render/ipc";
    import { defineComponent } from "vue";
    import { postNavBar } from "@/render/ipc";
    export default defineComponent({
        name: "Header",
        setup() {
            const postNavBarExit = () => postNavBar('close');
            const postNavBarMin = () => postNavBar('min');
            return {
                postNavBarExit,
                postNavBarMin
            }
        }
    });
 </script>
 <style lang="scss">
 #titlebar {
  position: fixed;
  width: 100vw;
  height: 54px;
  opacity: 0.75;
  background-color: #EBEBEB;
  -webkit-app-region: drag;
  border: none;
  outline: none;
  z-index: 1;
 }
 #menu {
  position: fixed;
  margin-left: 20px;
  margin-top: 20px;
  z-index: 2;
 }
 .menuButton {
  border: none;
  outline:none;
  min-width: 14px;
  min-height: 14px;
  border-radius: 7px;
 }
 .exitButton {
  background-color: #FF6157;
 }
 .exitButton:active {
  background: #c14645;
 }
 .minimizeButton {
  background-color: #FFC12F;
  margin-left: 8px;
 }
 .minimizeButton:active {
  background-color: #c08e38;
 }
 </style>
--- a/src/render/components/input.js
+++ b/src/render/components/input.js
@ -1,55 +0,0 @@
 import useText from "./control/text.js";
 import draggify from "./control/draggify.js";
 const Input = 
 {
    props: ["person"],
    setup(props)
    {
        const initials = Vue.ref("");
        const recording = Vue.ref(false);
        const { elementX, elementY } =  draggify("input", "app", 15);
        const { leftSide, show } = useText("input-text", "app", elementX);
        window.mainApi.on("record", (status) => recording.value = status);
        Vue.watch(() => props.person, (c, _p) => initials.value = getInitials(c));
        return { initials, elementX, elementY, recording, leftSide, show };
    },
    template: `
        <div id="input" :class="{ audio: recording }"
            :style="{ top: elementY + 'px', left: elementX + 'px' }"
        >
            <div id="input-icon">{{ initials }}</div>
            <input 
                id="input-text" type="text"
                :class="[
                    { leftSide: leftSide }, 
                    { show: show }, 
                    { recording: recording }
                ]"
            />
        </div> `
 }
 function getInitials(name)
 {
    let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
    let initials = [...name.matchAll(rgx)] || [];
    return (
      (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
    ).toUpperCase();
 }
 export default Input;
--- a/src/render/components/inputItem.vue
+++ b/src/render/components/inputItem.vue
@ -0,0 +1,221 @@
 <template>
  <div
    id="inputItem"
    class="input-item"
    :class="{ playing: recording }"
    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
  >
    <!-- 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>
    <span v-if="recording" class="pause"></span>
    <!-- Show text input on key-down -->
    <input
      id="textInput"
      type="text"
    />
    <!-- Show suggestions menu on click -->
    <!-- <Menu /> -->
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
 import draggify from "@/render/composables/useDraggify";
 import { profile } from "@/render/shared/profile";
 import useTextInputController from
  "@/render/components/controllers/inputItem.control.text";
 // import useAudioInputController from
  "@/render/components/controllers/inputItem.control.audio";
 export default defineComponent({
  name: "InputItem",
  setup() {
    // Default values for position.
    const xStart = 15;
    const yStart = window.innerHeight - 200;
    // Calculate position of inputItem on drag.
    const { elementX, elementY } = draggify("inputItem", xStart, yStart, 15);
    // Controllers for text and audio.
    const { typing } = useTextInputController(elementX)
    // const { recording } = useAudioInputController(typing)
    const recording = false;
    return {
      profile,
      elementX,
      elementY,
      recording
    };
  },
 });
 </script>
 <style lang="scss" scoped>
 .input-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  z-index: 3;
  // To prevent window drag when overlapping with titlebar.
  -webkit-app-region: no-drag;
  // border: 4px solid #C6C6C6;
  border-radius: 50%;
  // Set opacity here to not affect child.
  background-color: rgba(235, 235, 235, 0.75);
  cursor: pointer;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  .play,
  .pause {
    z-index: 5;
    &::before,
    &::after {
      -webkit-border-radius: 1000px;
      -moz-border-radius: 1000px;
      border-radius: 1000px;
      content: "";
      position: absolute;
      height: 2.35em;
      width: 2.35em;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
      z-index: 0;
    }
  }
  .play::before {
    box-shadow: 0 0 0 rgba(195, 195, 195, 0);
  }
  .pause {
    opacity: 0;
  }
  &.playing {
    .play {
      opacity: 0;
    }
    .pause {
      opacity: 1;
      &::before {
        -moz-animation: circle1 1.5s infinite ease-in-out;
        -o-animation: circle1 1.5s infinite ease-in-out;
        -webkit-animation: circle1 1.5s infinite ease-in-out;
        animation: circle1 1.5s infinite ease-in-out;
      }
      &::after {
        -moz-animation: circle2 2.2s infinite ease-in-out;
        -o-animation: circle2 2.2s infinite ease-in-out;
        -webkit-animation: circle2 2.2s infinite ease-in-out;
        animation: circle2 2.2s infinite ease-in-out;
      }
    }
  }
 }
 .rec-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
  transform: translate(14px);
  animation-name: rec;
  animation-duration: 0.5s;
 }
@keyframes rec {
  from {
    transform: translate(14px) scale(0.3);
  }
  to {
    transform: translate(14px) scale(1.0);
  }
 }
@keyframes circle1 {
  0%,
  100% {
    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
  }
  25% {
    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
  }
  50% {
    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
  }
  75% {
    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
  }
 }
@keyframes circle2 {
  0%,
  100% {
    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
  }
  25% {
    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
  }
  50% {
    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
  }
  75% {
    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
  }
 }
 #textInput {
  position: absolute;
  opacity: 0;
  min-width: 150px;
  height: 16px;
  border-radius: 18px;
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  outline: none;
  border: none;
  pointer-events: none;
  background-color: white;
  z-index: -1;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  transform: translateX(50px) scale(0.3);
 }
 </style>
--- a/src/render/components/login.js
+++ b/src/render/components/login.js
@ -1,44 +0,0 @@
 import SmartForm from "./form.js";
 import { isEmail, isPassword, isName } from "./control/valid.js";
 const Login =
 {
    components: {
        SmartForm
    },
    setup()
    {
        return { isEmail, isPassword, isName };
    },
    template: `
        <div id="login">
            <SmartForm 
                :fields="[{
                    name: 'email',
                    value: null,
                    placeholder: 'Email',
                    valid: isEmail
                },
                {
                    name: 'password',
                    value: null,
                    placeholder: 'Password',
                    valid: isPassword
                },
                {
                    name: 'name',
                    value: null,
                    placeholder: 'Name',
                    valid: isName
                }]"
                :channel="'auth'"
                :modifier="'Login or enter name to register.'"
            />
        </div>`
 }
 export default Login;
--- a/src/render/components/login.vue
+++ b/src/render/components/login.vue
@ -0,0 +1,173 @@
 <template>
  <form id="login" @submit.prevent="submitForm">
    <!-- username and password forms -->
    <div id="form">
      <!-- username -->
      <div class="inputBox">
        <input class="input" type="text" v-model="usr" />
        <div class="inputModifier">Email</div>
      </div>
      <!-- password -->
      <div class="inputBox">
        <input class="input" type="password" v-model="pwd" />
        <div class="inputModifier">Password</div>
      </div>
    </div>
    <!-- submit button; position: fixed -->
    <button class="submit button" type="submit">Login</button>
  </form>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 import { invokeLogin } from "@/render/ipc";
 export default defineComponent({
  name: "Login",
  setup() {
    const usr = ref("");
    const pwd = ref("");
    // Submit login credentials to the backend.
    const submitForm = async () => {
      try {
          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,
      submitForm
    }
  },
 });
 </script>
 <style lang="scss" scoped>
 #login {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 #form {
  font-family: "SF Compact Display";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
 }
 .inputBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
 }
 .input {
  background-color: #B9B9B9;
  border: none;
  outline: none;
  padding: 16px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
 }
 .inputModifier {
  min-width: 181px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  margin-left: 15px;
 }
 .submit {
  font-family: "SF Compact Display";
  position: fixed;
  margin-top: 141px;
  background-color: #58C4FD;
  color: white;
  padding: 10px 30px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
 }
 .submit:active {
  background-color: #4296C3;
 }
 .button {
  border: none;
  outline: none;
  text-decoration: none;
 }
 .button:hover {
  cursor: pointer;
 }
 .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>
--- a/src/render/components/message.js
+++ b/src/render/components/message.js
@ -1,62 +0,0 @@
 import Bubble from "./bubble.js";
 import Context from "./context.js";
 const Message = 
 {
    components: {
        Bubble,
        Context
    },
    props: ["modifier", "content", "context", "avatar", "id", "seen"],
    setup(props)
    {
        return { calcChild };
    },
    template: `
        <div :id="id" :class="'message ' + modifier + '-message'">
            <Bubble 
                v-for="(c, index) in content"
                :id="'bubble-' + id + '-' + index"
                :category="c.category"
                :text="c.text"
                :html="c.html"
                :blob="c.blob"
                :modifier="modifier"
                :child="calcChild(index, content.length)"
            />
            <Context
                :modifier="modifier"
                :context="context"
                :avatar="avatar"
                :id="id"
            />
        </div> `
 }
 function calcChild(index, len)
 {
  if (len === 1)
  {
    return "none-child";
  } 
  else if (index === 0) 
  {
    return "first-child";
  } 
  else if (index === len - 1) 
  {
    return "last-child";
  } 
  else 
  {
    return "middle-child";
  }
 }
 export default Message;
--- a/src/render/components/message.vue
+++ b/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>
--- a/src/render/components/messenger.js
+++ b/src/render/components/messenger.js
@ -1,86 +0,0 @@
 import onDrop from "./control/drop.js";
 import scroll from "./control/scroll.js";
 import WS from "./ws.js";
 import Input from "./input.js";
 import Settings from "./settings.js";
 import Message from "./message.js";
 const Messenger = {
    components: {
        WS,
        Settings,
        Message,
        Input
    },
    setup()
    {
        const person = Vue.ref("");
        const messages = Vue.ref([]);
        let current = Vue.ref();
        Vue.onMounted(() => {
            window.mainApi.on("message", (update) => {
                if (update.person)
                {
                    person.value = update.person;
                    messages.value = update.messages;
                    current.value = messages.value.at(-1);
                }
                else if (update.name)
                {
                    person.value = update.name;
                }
                else if (update.modifier)
                {
                    messages.value.push(update); 
                    current.value = update;
                }
                else if (update.category)
                {
                    current.value.content.push(update);
                }
                else if (update.context)
                {
                    current.value.context = update.context;
                }
                else
                {
                    current.value.content.at(-1).text = update.text;
                }
                setTimeout(scroll, 10);
            });
            window.mainApi.send("messenger");
        });
        return { person, messages, onDrop };
    },
    template: `
        <Settings />
        <WS />
        <Input :person="person" />
        <div id="messenger"
            @drop="onDrop($event)"
            @dragover.prevent
            @dragenter.prevent
        >
            <Message 
                v-for="message in messages" 
                v-bind="message" 
            />
        </div>`
 }
 export default Messenger;
--- a/src/render/components/messenger.vue
+++ b/src/render/components/messenger.vue
@ -0,0 +1,124 @@
 <template>
  <!-- Position fixed items -->
  <Settings />
  <ConnectionStatus />
  <div id="recIcon" />
  <InputItem />
  <!-- List of message bubbles. -->
  <div id="messenger">
    <Message
      v-for="message in messages"
      :modifier="message.modifier"
      :content="message.content"
      :context="message.context"
      :seen="message.seen"
      :uid="message.uid"
    />
  </div>
 </template>
 <script lang="ts">
 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,
  },
  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
    };
  },
 });
 </script>
 <style lang="scss" scoped>
 #messenger {
  width: 100vw;
  height: 100vh;
  overflow: auto;
 }
 #messenger::-webkit-scrollbar {
  display: none;
 }
 #recIcon {
  position: fixed;
  right: 0;
  opacity: 0;
  transform: scale(0.0);
  margin-top: 24px;
  margin-right: 66px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF3B3B;
  z-index: 2;
 }
 </style>
--- a/src/render/components/settings.js
+++ b/src/render/components/settings.js
@ -1,40 +0,0 @@
 const Settings = 
 {
    setup() {
        const active = Vue.ref(false);
        function hideSettings(e) {
            if (e.key == "Escape") {
                active.value = false;
                window.removeEventListener("keydown", hideSettings);
            }
        }
        function showSettings() {
            active.value = true;
            window.addEventListener("keydown", hideSettings);
        }
        const logout = async () => {
            await window.mainApi.send("logout");
        }
        return { showSettings, active, logout, window };
    },
    template: `
        <div v-if="active" id="settings">
            <button class="settings-logout-button button" @click="logout">
                Logout
            </button>
        </div>
        <button v-else class="settings-icon" @click="showSettings">
            <img :src="window.path + 'assets/settingsIcon.svg'">
        </button>`
 }
 export default Settings;
--- a/Show more
+++ b/Show more
		`@ -1,2 +0,0 @@`
			`@crimata:registry=https://gitlab.com/api/v4/projects/28849281/packages/npm/`
			`//gitlab.com/api/v4/projects/28849281/packages/npm`