From a958f53edc74038a33ce317b86b5db0511d0d024 Mon Sep 17 00:00:00 2001 From: Andrew Gundersen Date: Thu, 11 Feb 2021 15:32:00 -0600 Subject: [PATCH 01/18] moving splash code from components to views --- src/background/session.ts | 11 ++++ src/components/login/index.vue | 95 --------------------------------- src/components/splash/index.vue | 73 ------------------------- src/router.ts | 7 +++ src/views/splash.vue | 61 ++++++++++++++++++++- 5 files changed, 77 insertions(+), 170 deletions(-) delete mode 100644 src/components/login/index.vue delete mode 100644 src/components/splash/index.vue diff --git a/src/background/session.ts b/src/background/session.ts index 6fb80eb..80a74aa 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -32,15 +32,20 @@ let auth = false; const authSession = async (_event, payload: string | UserCreds | null): Promise => { return new Promise((resolve, reject) => { + console.log('authenticating...'); + backgroundMitt.on('auth-res', (res: string) => { + if (res === 'locked') { reject(res); } else { auth = true; resolve(res); } + }); + if (!payload) { socket.send('no-token'); } else if (typeof payload === 'string' || payload instanceof String) { @@ -74,7 +79,10 @@ export const sendMessage = (content: TextMessage | Buffer) => { } } +// Run every time we want to connect to backend. export const initSession = () => { + + // Close existing sockets. if (socket) { socket.removeAllListeners(); socket.terminate(); @@ -82,6 +90,7 @@ export const initSession = () => { success = false; } + // Init new socket. socket = new WebSocket(`${ip}:${port}`); socket.binaryType = 'arraybuffer'; @@ -89,6 +98,7 @@ export const initSession = () => { ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers ipcMain.handle('auth-user', authSession); + // Connect to the backend. socket.on('open', () => { console.log('Success! Connected to Crimata Servers.'); @@ -101,6 +111,7 @@ export const initSession = () => { }); + // Handle for failed connect, try again. socket.on('error', (_e) => { console.log('ERROR: Failed to connect.'); socket.removeAllListeners(); diff --git a/src/components/login/index.vue b/src/components/login/index.vue deleted file mode 100644 index c75d625..0000000 --- a/src/components/login/index.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/splash/index.vue b/src/components/splash/index.vue deleted file mode 100644 index 3b0a133..0000000 --- a/src/components/splash/index.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - diff --git a/src/router.ts b/src/router.ts index f8aa2bf..eedf589 100644 --- a/src/router.ts +++ b/src/router.ts @@ -5,12 +5,19 @@ import { RouteRecordRaw } from "vue-router"; import Home from "@/views/home.vue"; +import Splash from "@/views/splash.vue"; import { useAuth } from '@/modules/auth'; // Define the routes (/*) for the app here. const routes: Array = [ { path: "/", + name: "splash", + component: Splash, + meta: { requiresAuth: false }, + }, + { + path: "/home", name: "home", component: Home, meta: { requiresAuth: true }, diff --git a/src/views/splash.vue b/src/views/splash.vue index dbe7d0f..1db66eb 100644 --- a/src/views/splash.vue +++ b/src/views/splash.vue @@ -1,5 +1,47 @@ \ No newline at end of file + + + \ No newline at end of file From 7224f62f5a6d00b972004b8f6c4ed142db15e396 Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Thu, 11 Feb 2021 16:49:03 -0600 Subject: [PATCH 02/18] fix connection timeout issue --- src/background/session.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/background/session.ts b/src/background/session.ts index 6fb80eb..8fba658 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -23,8 +23,8 @@ interface TextMessage { content: string; } -const ip = 'ws://localhost'; -const port = 8080; +const ip = 'ws://127.0.0.1'; +const port = 8081; const reconnectTimeout = 3000; //ms let socket: WebSocket; let success = false; From ccc5e67948232804953e713c51371b5610dce284 Mon Sep 17 00:00:00 2001 From: Andrew Gundersen Date: Fri, 12 Feb 2021 10:39:42 -0600 Subject: [PATCH 03/18] fix event for login --- src/background/session.ts | 3 ++- src/router.ts | 12 ++++++------ src/views/login.vue | 4 ++-- src/views/register.vue | 4 ++-- src/views/splash.vue | 2 -- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/background/session.ts b/src/background/session.ts index 80a74aa..228f1cd 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -35,12 +35,13 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise< console.log('authenticating...'); - backgroundMitt.on('auth-res', (res: string) => { + backgroundMitt.once('auth-res', (res: string) => { if (res === 'locked') { reject(res); } else { auth = true; + console.log(res); resolve(res); } diff --git a/src/router.ts b/src/router.ts index eedf589..ea74f4e 100644 --- a/src/router.ts +++ b/src/router.ts @@ -12,16 +12,16 @@ import { useAuth } from '@/modules/auth'; const routes: Array = [ { path: "/", - name: "splash", - component: Splash, - meta: { requiresAuth: false }, - }, - { - path: "/home", name: "home", component: Home, meta: { requiresAuth: true }, }, + { + path: "/splash", + name: "splash", + component: Splash, + meta: { requiresAuth: false }, + }, { path: "/login", name: "login", diff --git a/src/views/login.vue b/src/views/login.vue index d63851a..5508f00 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -18,10 +18,10 @@ --> - + - + diff --git a/src/views/register.vue b/src/views/register.vue index 53cb9f8..6963d30 100644 --- a/src/views/register.vue +++ b/src/views/register.vue @@ -18,10 +18,10 @@ - + - + diff --git a/src/views/splash.vue b/src/views/splash.vue index 1db66eb..cb47283 100644 --- a/src/views/splash.vue +++ b/src/views/splash.vue @@ -47,12 +47,10 @@ - - diff --git a/src/components/home/messageVisualizer/index.vue b/src/components/home/messageVisualizer/index.vue deleted file mode 100644 index 57657eb..0000000 --- a/src/components/home/messageVisualizer/index.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - - - diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue new file mode 100644 index 0000000..56f04f0 --- /dev/null +++ b/src/components/messageView/index.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/components/home/messageVisualizer/viewDetails/anime.ts b/src/components/messageView/viewDetails/anime.ts similarity index 100% rename from src/components/home/messageVisualizer/viewDetails/anime.ts rename to src/components/messageView/viewDetails/anime.ts diff --git a/src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts b/src/components/messageView/viewDetails/offsetCalculator.ts similarity index 100% rename from src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts rename to src/components/messageView/viewDetails/offsetCalculator.ts diff --git a/src/components/home/messageVisualizer/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts similarity index 97% rename from src/components/home/messageVisualizer/viewDetails/visualizer.ts rename to src/components/messageView/viewDetails/visualizer.ts index 894b2f8..f99ddf4 100644 --- a/src/components/home/messageVisualizer/viewDetails/visualizer.ts +++ b/src/components/messageView/viewDetails/visualizer.ts @@ -6,7 +6,7 @@ import useOffsetCalculator from './offsetCalculator'; * handles visualization of view messages through * vue transition callbacks and anime-js animations */ -export default function useMessageVisualizer(): { +export default function useMessageView(): { beforeEnter: VueTransitionCallback; enter: VueTransitionCallback; afterEnter: VueTransitionCallback; diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts index 82b6931..8284999 100644 --- a/src/components/taInput/inputController.ts +++ b/src/components/taInput/inputController.ts @@ -17,24 +17,16 @@ export default function useInputController() { const paths = ref([]); const audioBubbleWidth = ref(10); let stream: MediaStream; - const emitter: any = inject("mitt"); + const emitter: any = inject("mitt"); // send message on ENTER const enterCallback = (input: string) => { const message = { - audio: 0, - text: input + audio: 0, + text: input }; - console.log('emit message on enter', message); emitter.emit("animateSend", message); - - // await response - // window.postMessage({ - // myTypeField: 'send-message', - // message: message - // }, '*') - } const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream); @@ -42,13 +34,13 @@ export default function useInputController() { const { textInputXoffset, renderTextInput } = useTextVisualizer(input); // stops stream recording on space key up - function keyupHandler(e: any) { + function keyupHandler(_e) { if (e.key === " " && visualizeStream.value) { console.log("stop recording"); window.postMessage({ - myTypeField: 'update-recorder', - record: false + myTypeField: 'update-recorder', + record: false }, '*') visualizeStream.value = false; @@ -80,8 +72,8 @@ export default function useInputController() { visualizeStream.value = true; window.postMessage({ - myTypeField: 'update-recorder', - record: true + myTypeField: 'update-recorder', + record: true }, '*') expandBubble(audioBubbleWidth); diff --git a/src/components/home/messageBubble/bubbleDetails/computed.ts b/src/components/textBubble/bubbleDetails/computed.ts similarity index 96% rename from src/components/home/messageBubble/bubbleDetails/computed.ts rename to src/components/textBubble/bubbleDetails/computed.ts index 4e28ec4..c3b4769 100644 --- a/src/components/home/messageBubble/bubbleDetails/computed.ts +++ b/src/components/textBubble/bubbleDetails/computed.ts @@ -49,7 +49,7 @@ export default function useComputedBubble(m: string, id: string) { } const startingOffset = computed(() => { - const parentView = document.getElementById('messageVisualizer'); + const parentView = document.getElementById('messageView'); if (parentView) { const rect = parentView.getBoundingClientRect(); let Y = 600; diff --git a/src/components/home/messageBubble/bubbleDetails/drawer.ts b/src/components/textBubble/bubbleDetails/drawer.ts similarity index 100% rename from src/components/home/messageBubble/bubbleDetails/drawer.ts rename to src/components/textBubble/bubbleDetails/drawer.ts diff --git a/src/components/home/messageBubble/index.vue b/src/components/textBubble/index.vue similarity index 97% rename from src/components/home/messageBubble/index.vue rename to src/components/textBubble/index.vue index 03041b1..a19ac84 100644 --- a/src/components/home/messageBubble/index.vue +++ b/src/components/textBubble/index.vue @@ -29,13 +29,11 @@ + + From a15a8650ded7b99110988b92387e16ad7f458b1d Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Mon, 15 Feb 2021 08:56:19 -0600 Subject: [PATCH 11/18] cleanup ipc + input controller --- src/background/session.ts | 28 ++++----- src/components/messageView/index.vue | 4 +- .../messageView/viewDetails/visualizer.ts | 9 +-- src/components/taInput/inputController.ts | 61 ++++++++++--------- src/modules/ipc.ts | 56 ++++++----------- src/modules/socket.ts | 17 ------ src/preload.ts | 8 +-- 7 files changed, 75 insertions(+), 108 deletions(-) delete mode 100644 src/modules/socket.ts diff --git a/src/background/session.ts b/src/background/session.ts index 36108c0..bb14979 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -68,8 +68,8 @@ const receiveMessage = (message: string): void => { const parsed: RenderMessage = JSON.parse(message); if (parsed.modifier === "sf") { backgroundMitt.emit('message-res', parsed); - } else if (parsed.modifier === "ai"){ - backgroundMitt.emit('ipc-renderer', { + } else if (parsed.modifier === "ai") { + backgroundMitt.emit('ipc-renderer', { endpoint: 'render-message', message: parsed }); @@ -77,16 +77,6 @@ const receiveMessage = (message: string): void => { }; -export const sendAudio = async (content: Buffer) => { - - const res = await asyncSend(null, content); - - backgroundMitt.emit('ipc-renderer', { - endpoint: 'render-message', - message: res - }); -} - const asyncSend = (_event?, payload: TextMessage | Buffer): Promise => { return new Promise((resolve, reject) => { @@ -109,6 +99,16 @@ const asyncSend = (_event?, payload: TextMessage | Buffer): Promise { + + const res = await asyncSend(null, content); + + backgroundMitt.emit('ipc-renderer', { + endpoint: 'render-message', + message: res + }); +} + // Run every time we want to connect to backend. export const initSession = () => { @@ -129,8 +129,8 @@ export const initSession = () => { ipcMain.handle('auth-session', authSession); // handle renderer send-message event - ipcMain.removeHandler('async-message'); // avoid setting duplicate handlers - ipcMain.handle('async-message', asyncSend); + ipcMain.removeHandler('message'); // avoid setting duplicate handlers + ipcMain.handle('message', asyncSend); // Connect to the backend. socket.on('open', () => { diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index 56f04f0..a93a69b 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -41,12 +41,12 @@ export default defineComponent({ setup() { const renderArr: Message[] = reactive([]); const { emitter } = useMitt(); - const { data, invoke } = useIpc("async-message"); + const { data, invoke } = useIpc("message"); onMounted(() => { window.ipcRenderer.on("render-message", (event, payload) => { const message = payload.message; - if (message) renderArr.push(message); + if (message.content) renderArr.push(message); }); emitter.on("animateSend", async (message) => { diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts index f99ddf4..33024da 100644 --- a/src/components/messageView/viewDetails/visualizer.ts +++ b/src/components/messageView/viewDetails/visualizer.ts @@ -1,11 +1,12 @@ -import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index'; -import useMessageViewAnims from "./anime"; -import useOffsetCalculator from './offsetCalculator'; - /** * handles visualization of view messages through * vue transition callbacks and anime-js animations */ + +import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index'; +import useMessageViewAnims from "./anime"; +import useOffsetCalculator from './offsetCalculator'; + export default function useMessageView(): { beforeEnter: VueTransitionCallback; enter: VueTransitionCallback; diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts index 8284999..f3c4ca9 100644 --- a/src/components/taInput/inputController.ts +++ b/src/components/taInput/inputController.ts @@ -1,23 +1,26 @@ -import { ref, watch, onUnmounted, onMounted, inject } from "vue"; -import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler"; -import useMediaStream from "@/modules/mediaStream"; -import useAudioVisualizer from './audioDetails/audioVisualizer'; -import useTextVisualizer from './textDetails/textVisualizer'; - /* * Controls which input to visualize * Will visualize text input by default as user types or * if user holds space bar down, input audio stream * will be visualized & recorded */ -// NOTE: input params should probably be input and MediaStream -// TODO: visualize audio stream from nodeJS background process + +import { ref, watch, onUnmounted, onMounted } from "vue"; +import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler"; +import useMediaStream from "@/modules/mediaStream"; +import useAudioVisualizer from './audioDetails/audioVisualizer'; +import useTextVisualizer from './textDetails/textVisualizer'; +import useMitt from "@/modules/mitt"; +import { useIpc } from '@/modules/ipc'; + +let stream: MediaStream; + export default function useInputController() { const visualizeStream = ref(false); const paths = ref([]); const audioBubbleWidth = ref(10); - let stream: MediaStream; - const emitter: any = inject("mitt"); + const { emitter } = useMitt(); + const { post } = useIpc('update-recorder'); // send message on ENTER const enterCallback = (input: string) => { @@ -34,14 +37,15 @@ export default function useInputController() { const { textInputXoffset, renderTextInput } = useTextVisualizer(input); // stops stream recording on space key up - function keyupHandler(_e) { + function keyupHandler(e: any) { if (e.key === " " && visualizeStream.value) { console.log("stop recording"); - window.postMessage({ - myTypeField: 'update-recorder', - record: false - }, '*') + post(false); + // window.postMessage({ + // myTypeField: 'update-recorder', + // record: false + // }, '*') visualizeStream.value = false; paths.value = [] @@ -50,15 +54,18 @@ export default function useInputController() { } } - // add window event keyboard listeners - window.addEventListener("keydown", keyDownHandler); - window.addEventListener('keyup', keyupHandler); - - // get stream & initialize recorder object on mount onMounted(async () => { stream = await useMediaStream({ audio: true }); + // add window event keyboard listeners + window.addEventListener("keydown", keyDownHandler); + window.addEventListener('keyup', keyupHandler); }) + onUnmounted(() => { + window.removeEventListener("keydown", keyDownHandler); + window.removeEventListener("keyup", keyupHandler); + }); + // determine whether to render text or audio based one the keyboard input watch(input, (input, prevInput) => { if (prevInput !== "" || prevInput.length > 0) { @@ -71,10 +78,11 @@ export default function useInputController() { console.log("record MediaStream"); visualizeStream.value = true; - window.postMessage({ - myTypeField: 'update-recorder', - record: true - }, '*') + post(true); + // window.postMessage({ + // myTypeField: 'update-recorder', + // record: true + // }, '*') expandBubble(audioBubbleWidth); visualizeStreamAsPaths(stream, paths, audioBubbleWidth); @@ -83,11 +91,6 @@ export default function useInputController() { renderTextInput(); }); - // remove Event Listeners on component unMount - onUnmounted(() => { - window.removeEventListener("keydown", keyDownHandler); - window.removeEventListener("keyup", keyupHandler); - }); return { input, diff --git a/src/modules/ipc.ts b/src/modules/ipc.ts index dbf191b..3018767 100644 --- a/src/modules/ipc.ts +++ b/src/modules/ipc.ts @@ -2,9 +2,7 @@ import { ref, computed } from 'vue' export const useIpc = (endpoint: string) => { const data = ref(); - const loading = ref(false); const error = ref(); - const listener = ref(false); const errorMessage = computed(() => { console.log('ERROR', error.value); @@ -13,54 +11,36 @@ export const useIpc = (endpoint: string) => { } }) - const invoke = (payload: any) => { - loading.value = true; + const invoke = async (payload: any) => { error.value = undefined; - - return window.ipcRenderer.invoke(endpoint, payload).then(res => { - data.value = res; - }).catch(e => { + try { + const res = await window.ipcRenderer.invoke(endpoint, payload); + return data.value = res; + } catch (e) { error.value = e; throw e; - }).finally(() => { - loading.value = false; - }) + } + + // return window.ipcRenderer.invoke(endpoint, payload).then(res => { + // data.value = res; + // }).catch(e => { + // error.value = e; + // throw e; + // }) } - const send = (payload?: Record, callback?: (arg: any) => void) => { - loading.value = true; - error.value = undefined; - - window.ipcRenderer.on(endpoint + '-reply', (event: any, arg: any | Error) => { - if (arg instanceof Error) { - error.value = arg; - throw arg; - } else { - data.value = arg; - loading.value = false; - } - }); - window.ipcRenderer.send(endpoint, payload); - }; - - const onEvent = (callback: (event: any, arg: any) => void) => { - listener.value = true; - window.ipcRenderer.on(endpoint, callback); - }; - - const post = (payload?: Record) => { + const post = (payload: any) => { window.postMessage({ - myTypeField: endpoint, - message: payload + endpoint: endpoint, + content: payload }, '*') }; return { - loading, data, error, errorMessage, - send, - invoke + invoke, + post } } diff --git a/src/modules/socket.ts b/src/modules/socket.ts deleted file mode 100644 index 07f3dbb..0000000 --- a/src/modules/socket.ts +++ /dev/null @@ -1,17 +0,0 @@ -interface SocketState { - connection: WebSocket | null; - auth: boolean; -} - -// Create WebSocket connection. -const socket = new WebSocket('ws://localhost:8080'); - -// Connection opened -socket.onopen = function (event) { - socket.send('Hello Server!'); -} - -socket.onmessage = function(event) { - console.debug("WebSocket message received:", event); -} - diff --git a/src/preload.ts b/src/preload.ts index ce5f0bf..72760c0 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -17,12 +17,12 @@ process.once("loaded", () => { // do something with custom event const message = event.data; - if (message.myTypeField === "update-menu-bar") { - ipcRenderer.send("update-menu-bar", message); + if (message.endpoint === "update-menu-bar") { + ipcRenderer.send("update-menu-bar", message.content); } - if (message.myTypeField === "update-recorder") { - ipcRenderer.send("update-recorder", message.record); + if (message.endpoint === "update-recorder") { + ipcRenderer.send("update-recorder", message.content); } }); From aa53013cc4567a0b79c8a4e05cfff46cd25ea3c0 Mon Sep 17 00:00:00 2001 From: riqo Date: Mon, 15 Feb 2021 09:26:36 -0600 Subject: [PATCH 12/18] add mock message test --- src/components/messageView/index.vue | 5 +- .../messageView/viewDetails/visualizer.ts | 7 +- src/modules/scrollView.ts | 2 +- src/views/home.vue | 17 +- src/views/mockMessages.ts | 160 ++++++++++++++++++ 5 files changed, 181 insertions(+), 10 deletions(-) create mode 100644 src/views/mockMessages.ts diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index a93a69b..c3d9c99 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -51,8 +51,9 @@ export default defineComponent({ emitter.on("animateSend", async (message) => { try { - await invoke(message); - renderArr.push(data.value); + renderArr.push(message) + // await invoke(message); + //renderArr.push(data.value); } catch (e) { console.log("No response. Do not render."); } diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts index 33024da..455381f 100644 --- a/src/components/messageView/viewDetails/visualizer.ts +++ b/src/components/messageView/viewDetails/visualizer.ts @@ -55,12 +55,7 @@ export default function useMessageView(): { if (el) { if (shift) { - console.log(messageOffset.y) - if (messageOffset.y < 445 && messageOffset.y < 500) { - shiftOffset -= 15; - } else { - shiftOffset -= el.getBBox().height + messagePadding; - } + shiftOffset -= el.getBBox().height + messagePadding; } animateMessage(el); } diff --git a/src/modules/scrollView.ts b/src/modules/scrollView.ts index 8fea63f..3032667 100644 --- a/src/modules/scrollView.ts +++ b/src/modules/scrollView.ts @@ -1,7 +1,7 @@ import { ref, computed, onMounted, onUnmounted } from "vue"; /** - * handles visualization of view messages through + * handles visualization of view messages through * vue transition callbacks and anime-js animations */ export default function useScrollView({ targetId }: { targetId: string }) { diff --git a/src/views/home.vue b/src/views/home.vue index 2250cc6..b57a56b 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -14,11 +14,26 @@ diff --git a/src/views/mockMessages.ts b/src/views/mockMessages.ts new file mode 100644 index 0000000..7cb4908 --- /dev/null +++ b/src/views/mockMessages.ts @@ -0,0 +1,160 @@ +import { Message } from "@/types/message/index"; + +export const Messages: Message[] = [ + { + content: "Welcome", + context: "ai", + subContext: "", + modifier: "ai", + id: "2", + time: "" + }, + { + content: + "add friend", + context: "launch", + subContext: "", + modifier: "sf", + id: "1", + time: "" + }, + { + content: "Did you mean to addcontact?", + context: "addcontact", + subContext: "", + modifier: "ai", + id: "5", + time: "" + }, + { + content: "yes", + context: "fulfill", + subContext: "", + modifier: "sf", + id: "6", + time: "" + }, + + { + content: "Hey Anna, did you get the paper done?", + context: "Mesage from Tommy McConville", + subContext: "New Conversation", + modifier: "ai", + id: "3", + time: "" + }, + { + content: "Hey do you know Enrique Hernandez?", + context: "Message from Crimata", + subContext: "", + modifier: "ai", + id: "7", + time: "" + }, + + { + content: "Yes posting it online soon.", + context: "You to Tommy McConville", + subContext: "", + modifier: "sf", + id: "4", + time: "" + }, + { + content: "Hey do you know Enrique Hernandez?", + context: "Message from Crimata", + subContext: "", + modifier: "ai", + id: "8", + time: "" + }, + { + content: "Hey Anna, did you get the paper done?", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "9", + time: "" + }, + { + content: "Hey Anna, did you get the paper done?", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "10", + time: "" + }, + { + content: "Yes posting it online soon.", + context: "Message from Tommy McConville", + subContext: "", + modifier: "sf", + id: "11", + time: "" + }, + { + content: + "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.", + context: "You to Tommy McConville", + subContext: "", + modifier: "sf", + id: "12", + time: "" + }, + { + content: "Hey Anna, did you get the paper done?", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "13", + time: "" + }, + { + content: "Hey Anna, did you get the paper done?", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "14", + time: "" + }, + { + content: "Yes posting it online soon.", + context: "You to Tommy McConville", + subContext: "", + modifier: "sf", + id: "15", + time: "" + }, + { + content: "Sweet, thanks!", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "16", + time: "" + }, + { + content: "Hey do you know Enrique Hernandez?", + context: "Message from Crimata AI", + subContext: "", + modifier: "ai", + id: "17", + time: "" + }, + { + content: "Yes posting it online soon.", + context: "You to Tommy McConville", + subContext: "", + modifier: "sf", + id: "18", + time: "" + }, + { + content: "Sweet, thanks!", + context: "Message from Tommy McConville", + subContext: "", + modifier: "ai", + id: "19", + time: "" + }, +]; From f0a89bd5e441e46aa290eda53acdfb91dd01dc2d Mon Sep 17 00:00:00 2001 From: riqo Date: Mon, 15 Feb 2021 09:49:01 -0600 Subject: [PATCH 13/18] add add contact mock messages --- src/background/run.ts | 6 ++--- src/components/messageView/index.vue | 4 +-- .../messageView/viewDetails/visualizer.ts | 6 ++++- src/views/home.vue | 2 +- src/views/mockMessages.ts | 26 +++++++++---------- 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/background/run.ts b/src/background/run.ts index d3ab521..1299f0a 100644 --- a/src/background/run.ts +++ b/src/background/run.ts @@ -19,10 +19,10 @@ export async function main() { }); // Instantiate socket session with crimata-platorm. - if (!socket) initSession(); - socket = true; + // if (!socket) initSession(); + // socket = true; // Begin audio stream. - initRecorder(); + // initRecorder(); } diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index c3d9c99..e210cc2 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -51,9 +51,9 @@ export default defineComponent({ emitter.on("animateSend", async (message) => { try { - renderArr.push(message) + renderArr.push(message) // await invoke(message); - //renderArr.push(data.value); + // renderArr.push(data.value); } catch (e) { console.log("No response. Do not render."); } diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts index 455381f..28ba6e7 100644 --- a/src/components/messageView/viewDetails/visualizer.ts +++ b/src/components/messageView/viewDetails/visualizer.ts @@ -54,8 +54,12 @@ export default function useMessageView(): { } if (el) { if (shift) { - shiftOffset -= el.getBBox().height + messagePadding; + // if (messageOffset.y < 445) { + // shiftOffset -= 15; + // } else { + // shiftOffset -= el.getBBox().height + messagePadding; + // } } animateMessage(el); } diff --git a/src/views/home.vue b/src/views/home.vue index b57a56b..9a48031 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -27,8 +27,8 @@ export default defineComponent({ const emittMessage = () => { console.log('testing') - counter.value++; emitter.emit('animateSend', Messages[counter.value]) + counter.value++; } return { emittMessage diff --git a/src/views/mockMessages.ts b/src/views/mockMessages.ts index 7cb4908..ac84a25 100644 --- a/src/views/mockMessages.ts +++ b/src/views/mockMessages.ts @@ -2,8 +2,8 @@ import { Message } from "@/types/message/index"; export const Messages: Message[] = [ { - content: "Welcome", - context: "ai", + content: "Good morning Dave", + context: "launch", subContext: "", modifier: "ai", id: "2", @@ -11,15 +11,15 @@ export const Messages: Message[] = [ }, { content: - "add friend", - context: "launch", + "add contact", + context: "addcontact", subContext: "", modifier: "sf", id: "1", time: "" }, { - content: "Did you mean to addcontact?", + content: "I'm looking for name, crimata_idto addcontact. Feel free toenter only a subset of thisinformation, but then let meknow when you are done", context: "addcontact", subContext: "", modifier: "ai", @@ -27,8 +27,8 @@ export const Messages: Message[] = [ time: "" }, { - content: "yes", - context: "fulfill", + content: "andrew gundersen", + context: "addcontact", subContext: "", modifier: "sf", id: "6", @@ -36,16 +36,16 @@ export const Messages: Message[] = [ }, { - content: "Hey Anna, did you get the paper done?", - context: "Mesage from Tommy McConville", - subContext: "New Conversation", - modifier: "ai", + content: "gundersena@xavier.edu", + context: "addcontact", + subContext: "", + modifier: "sf", id: "3", time: "" }, { - content: "Hey do you know Enrique Hernandez?", - context: "Message from Crimata", + content: "I already have a contact forandrew gundersen. Are you sureyou want this?", + context: "addcontact", subContext: "", modifier: "ai", id: "7", From 2831c11de34c144edc10ff26094644a9ef83fc03 Mon Sep 17 00:00:00 2001 From: riqo Date: Mon, 15 Feb 2021 16:24:33 -0600 Subject: [PATCH 14/18] add bottom bound to message visualizer --- src/background/run.ts | 4 +- src/components/messageView/index.vue | 23 ++---- .../messageView/viewDetails/anime.ts | 65 +++++----------- .../viewDetails/offsetCalculator.ts | 2 +- .../messageView/viewDetails/visualizer.ts | 76 ++++++++++--------- src/views/home.vue | 2 - 6 files changed, 66 insertions(+), 106 deletions(-) diff --git a/src/background/run.ts b/src/background/run.ts index 1299f0a..dc3e150 100644 --- a/src/background/run.ts +++ b/src/background/run.ts @@ -19,8 +19,8 @@ export async function main() { }); // Instantiate socket session with crimata-platorm. - // if (!socket) initSession(); - // socket = true; + if (!socket) initSession(); + socket = true; // Begin audio stream. // initRecorder(); diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index e210cc2..3447b35 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -4,13 +4,12 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :viewBox="scrollView" + id="test" > - + { try { - renderArr.push(message) - // await invoke(message); - // renderArr.push(data.value); + // renderArr.push(message) + await invoke(message); + renderArr.push(data.value); } catch (e) { console.log("No response. Do not render."); } @@ -80,13 +79,3 @@ export default defineComponent({ }, }); - - diff --git a/src/components/messageView/viewDetails/anime.ts b/src/components/messageView/viewDetails/anime.ts index bb767ad..3b82d36 100644 --- a/src/components/messageView/viewDetails/anime.ts +++ b/src/components/messageView/viewDetails/anime.ts @@ -5,76 +5,47 @@ import { MessageAnimeFunc } from '@/types/message/index'; /** * anime js animations used by message renderer */ -export default function useMessageViewAnims(): { - shiftAnimate: MessageAnimeFunc; - stackAnimate: MessageAnimeFunc; -} { +export default function useMessageViewAnims() { // imports animejs safely let anime: AnimeFunc; const animeInject: AnimeFunc | undefined = inject("animejs"); if (animeInject) anime = animeInject; - // shifts message list by a given value - function shiftList({ targetList, sv }: { targetList: NodeList | undefined; sv: number | undefined }) { - if (targetList) { - for (const element of targetList) { - const el = element.parentNode as HTMLElement; - anime({ - targets: el, - transform: `translate(0 ${sv})`, - easing: "easeInOutQuad", - duration: 500, - }); - } - } - } - // adds new message at the bottom of the list and shifts existing message list - const shiftAnimate: MessageAnimeFunc = (el, transform, shiftValue, targetList) => { + const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => { anime({ targets: el, - transform: transform.initialTranslate, + transform: transform, easing: "easeInOutQuad", - duration: 500, + duration: 800, begin: function() { - shiftList({ - targetList, - sv: shiftValue - }); + shiftView(view, viewTransform); }, - complete: function() { - anime({ - targets: el, - transform: transform.finalTranslate, - easing: "easeInOutQuad", - duration: 500, - offset: 1000 - }); - } }); } // stacks message from top to bottom - const stackAnimate: MessageAnimeFunc = (el, transform) => { + const stackAnimate = (el: Element, transform: string) => { anime({ targets: el, - transform: transform.initialTranslate, + transform: transform, easing: "easeInOutQuad", duration: 1000, - complete: function() { - anime({ - targets: el, - transform: transform.finalTranslate, - easing: "easeInOutQuad", - duration: 500, - offset: 1000 - }); - } + }); + } + + // update message View bottom bound + const shiftView = (el: SVGGElement, transform: string) => { + anime({ + targets: el, + transform: transform, + easing: "easeInOutQuad", + duration: 500, }); } return { shiftAnimate, - stackAnimate + stackAnimate, }; } diff --git a/src/components/messageView/viewDetails/offsetCalculator.ts b/src/components/messageView/viewDetails/offsetCalculator.ts index c31ba54..a04e5ab 100644 --- a/src/components/messageView/viewDetails/offsetCalculator.ts +++ b/src/components/messageView/viewDetails/offsetCalculator.ts @@ -9,7 +9,7 @@ export default function useOffsetCalculator() { let previousMessageHeight = 0; const messagePadding = 15; - function calculateX(message: HTMLElement): void { + function calculateX(message: HTMLElement| SVGGElement): void { const computedQuery = window.getComputedStyle(message); const matrix = new WebKitCSSMatrix(computedQuery.webkitTransform); xOffset.value = matrix.m41; diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts index 28ba6e7..5f82c61 100644 --- a/src/components/messageView/viewDetails/visualizer.ts +++ b/src/components/messageView/viewDetails/visualizer.ts @@ -7,60 +7,62 @@ import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index' import useMessageViewAnims from "./anime"; import useOffsetCalculator from './offsetCalculator'; -export default function useMessageView(): { - beforeEnter: VueTransitionCallback; - enter: VueTransitionCallback; - afterEnter: VueTransitionCallback; -} { - // uses offsetCalculator logic and renderer animations +const wH = 500; // window Height +const vP = 10; // view padding +const mP = 15; // message padding +let mH: number; // message Height +let vH: number; // view Height +let vB: number; // view Bottom Bound +let message: HTMLElement | null; +let messageOffset = { x: 0, y: 0 }; +let shift = false; +let beforeEnterVH: number; +let messageView: SVGGElement; + +export default function useMessageView() { const { calculateMessageOffsets } = useOffsetCalculator(); const { shiftAnimate, stackAnimate } = useMessageViewAnims(); - const messagePadding = 15; - let messageList: NodeList; - let message: HTMLElement | null; - let messageOffset = { x: 0, y: 0 }; - let shift = false; - let shiftOffset = 0; - - // animates message item to 'enter' renderView const animateMessage = (el: SVGGElement): void => { - const transform = { - initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`, - finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})` + const elTransform = `translate(${messageOffset.x} ${messageOffset.y})`; + const viewTransform = `translate(0 ${-vB})`; + + if (shift) { + shiftAnimate(el, elTransform, messageView, viewTransform); + } else { + stackAnimate(el, elTransform) } - shift ? shiftAnimate(el, transform, shiftOffset, messageList) : stackAnimate(el, transform); + } const beforeEnter: VueTransitionCallback = () => { - const queryResult = document.querySelectorAll(".messageList"); - console.log(queryResult) - if (queryResult.length) messageList = queryResult; + // query DOM for messageView element + const messageViewQuery = document.querySelectorAll("#messageView"); + messageView = messageViewQuery[0] as SVGGElement; + if (messageViewQuery){ + beforeEnterVH = messageView.getBBox().height; + } } const enter: VueTransitionCallback = (el) => { - // query DOM for latest message as soon as it enters + // query DOM for latest message if (el) { message = document.getElementById(el.id); } } - const afterEnter: VueTransitionCallback = (el) => { - // get message positioning & shift state before animating - if (message) { - messageOffset = calculateMessageOffsets(message); - shift = messageOffset.y > 400 ? true : false; - } + const afterEnter: VueTransitionCallback = async (el) => { + + if (message) messageOffset = calculateMessageOffsets(message); + if (el) { - if (shift) { - shiftOffset -= el.getBBox().height + messagePadding; - // if (messageOffset.y < 445) { - // shiftOffset -= 15; - // } else { - // shiftOffset -= el.getBBox().height + messagePadding; - // } - } + // calculate message & view heights, as well as view bottom bound + mH = el.getBoundingClientRect().height; + vH = mH + beforeEnterVH + mP; + vB = Math.abs(vH - wH) + vP; + + shift = vH > wH ? true : false; animateMessage(el); } } @@ -68,6 +70,6 @@ export default function useMessageView(): { return { beforeEnter, enter, - afterEnter + afterEnter, }; } diff --git a/src/views/home.vue b/src/views/home.vue index 9a48031..c502e36 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -4,7 +4,6 @@ version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - @click="emittMessage" > @@ -26,7 +25,6 @@ export default defineComponent({ const counter = ref(0); const emittMessage = () => { - console.log('testing') emitter.emit('animateSend', Messages[counter.value]) counter.value++; } From c27dd5ca958cb34c15109ea66fea6be1847864ef Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Tue, 16 Feb 2021 12:37:39 -0600 Subject: [PATCH 15/18] refactor messageView transitions --- src/components/messageView/index.vue | 12 ++++-------- .../viewDetails/{visualizer.ts => transitions.ts} | 4 ++-- 2 files changed, 6 insertions(+), 10 deletions(-) rename src/components/messageView/viewDetails/{visualizer.ts => transitions.ts} (96%) diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index 3447b35..9a31f27 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -7,11 +7,7 @@ id="test" > - + diff --git a/src/views/mockMessages.ts b/tests/mockMessages.ts similarity index 100% rename from src/views/mockMessages.ts rename to tests/mockMessages.ts From fd49d256967d5dec7e551a1bf2ae44b0da60e720 Mon Sep 17 00:00:00 2001 From: riqo Date: Tue, 16 Feb 2021 17:12:19 -0600 Subject: [PATCH 17/18] add async await response syntax to message view --- src/components/messageView/index.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index d6938c7..261e718 100644 --- a/src/components/messageView/index.vue +++ b/src/components/messageView/index.vue @@ -38,7 +38,7 @@ export default defineComponent({ const renderArr: Message[] = reactive([]); const renderQ = new Queue(); - const { data, invoke } = useIpc("message"); + const { invoke } = useIpc("message"); const { beforeEnter, enter, afterEnter, rendering } = useTransitions(); const { scrollView } = useScrollView({ targetId: "messageView", @@ -67,8 +67,8 @@ export default defineComponent({ emitter.on("user-message", async (message) => { try { - await invoke(message); - render(data.value) + const res = await invoke(message); + render(res) } catch (e) { console.log("No response. Do not render."); } From 1b6f278620d2326d9061932984d1d6cd83d5c437 Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Tue, 16 Feb 2021 18:22:17 -0600 Subject: [PATCH 18/18] remove user-message event listener on ta dismount --- .../taInput/textDetails/textVisualizer.ts | 26 ++++++++++++------- tests/server.js | 8 +++--- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts index 86ed1cc..4b3c89c 100644 --- a/src/components/taInput/textDetails/textVisualizer.ts +++ b/src/components/taInput/textDetails/textVisualizer.ts @@ -1,14 +1,16 @@ -import { ref, computed, inject } from 'vue'; -import useTextInputAnims from "./textAnime"; -import { Ref } from "@/types/vueRef/index"; /* * text rendering logic used by inputController */ + +import { ref, computed, onMounted, onUnmounted } from 'vue'; +import useTextInputAnims from "./textAnime"; +import { Ref } from "@/types/vueRef/index"; +import useMitt from "@/modules/mitt"; + export default function useTextVisualizer(input: Ref) { const inputHeight = ref(42); const inputWidth = ref(0); - - const emitter: any = inject("mitt"); + const { emitter } = useMitt(); const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims(); async function renderTextInput() { @@ -32,10 +34,16 @@ export default function useTextVisualizer(input: Ref) { } } - emitter.on("user-message", () => { - const inputEl = document.getElementsByClassName("inputContainer"); - const foreignEl = inputEl[0] as HTMLElement; - animateSend(foreignEl, inputHeight.value, input); + onMounted(() => { + emitter.on("user-message", () => { + const inputEl = document.getElementsByClassName("inputContainer"); + const foreignEl = inputEl[0] as HTMLElement; + animateSend(foreignEl, inputHeight.value, input); + }); + }); + + onUnmounted(() => { + emitter.all.clear(); }); const textInputXoffset = computed(() => { diff --git a/tests/server.js b/tests/server.js index a83c122..9a2787d 100644 --- a/tests/server.js +++ b/tests/server.js @@ -8,10 +8,10 @@ wss.on("connection", function connection(ws, req) { ws.on("message", function incoming(message) { console.log(message) - if (message === 'no-token' || message === 'undefined') { - console.log('no token to authenticate'); - ws.send('locked'); - } + if (message === 'no-token' || message === 'undefined') { + console.log('no token to authenticate'); + ws.send('success'); + } });