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
-/out
+node_modules
+/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",
-  "version": "1.0.0",
-  "description": "Cross-platform messenger app (Electron, Vue3)",
-  "main": "src/main.js",
+  "name": "Crimata",
+  "version": "1.0.0-beta.0",
+  "private": true,
+  "description": "Cross-platform messenger application built with electron, vue3, and TS.",
+  "author": {
+    "name": "Enrique Hernandez",
+    "name": "Andrew Gundersen"
+  },
  "scripts": {
-    "start": "electron-forge start",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "package": "electron-forge package",
-    "make": "electron-forge make"
-  },
-  "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"
+    "build": "vue-cli-service electron:build",
+    "dev": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
  },
+  "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-squirrel-startup": "^1.0.0"
+    "electron-updater": "^4.3.8",
+    "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": {
-    "forge": {
-      "packagerConfig": {},
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
+  "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/electron-devtools-installer": "^2.2.0",
+    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@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",
+    "@vue/test-utils": "^2.0.0-0",
+    "@wasm-tool/wasm-pack-plugin": "^1.3.1",
+    "electron": "^8.3.3",
+    "electron-devtools-installer": "^3.1.0",
+    "electron-log": "^4.3.4",
+    "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">
-  <g id="Group_33" data-name="Group 33">
-    <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"/>
+<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>
-      <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