diff --git a/src/background/audio.ts b/src/background/audio.ts index 7a30f32..78fcff5 100644 --- a/src/background/audio.ts +++ b/src/background/audio.ts @@ -1,5 +1,9 @@ +"use strict"; +/* eslint @typescript-eslint/no-var-requires: "off" */ +import { sendAudio } from './session' const portAudio = require('naudiodon'); +let ia: typeof portAudio.AudioIO; let audioInput: string[] = []; function processAudio(audioInput: Array): Buffer { @@ -8,42 +12,39 @@ function processAudio(audioInput: Array): Buffer { return Buffer.from(audio, "base64"); } - -const updateRecorder = async (Event: any, record: boolean): void => { +export const updateRecorder = (_event, record: boolean): void => { if (record) { ia.resume(); } else { ia.pause(); const audio = processAudio(audioInput); - // emmit ws event with audio - // sendAudio(audio); + sendAudio(audio); audioInput = []; } } +export const initRecorder = () => { -const ia = new portAudio.AudioIO({ - inOptions: { - channelCount: 1, - sampleFormat: 16, - sampleRate: 16000, - deviceId: -1, - closeOnError: false, - } -}); -ia.setEncoding('base64'); -ia.start(); -ia.pause(); -ia.on('error', (e: Error) => { - console.log('Error recording audio', + e); -}); -ia.on('data', (chunk: string) => { - audioInput.push(chunk); -}); - -export function useIA() { - return { - ia, - processAudio + if (!ia) { + ia = new portAudio.AudioIO({ + inOptions: { + channelCount: 1, + sampleFormat: 16, + sampleRate: 16000, + deviceId: -1, + closeOnError: false, + } + }); + ia.setEncoding('base64'); + ia.start(); + ia.pause(); + ia.on('error', (e: Error) => { + console.log('Error recording audio', + e); + }); + ia.on('data', (chunk: string) => { + audioInput.push(chunk); + }); } } + + diff --git a/src/background/run.ts b/src/background/run.ts index fb237da..d3ab521 100644 --- a/src/background/run.ts +++ b/src/background/run.ts @@ -1,40 +1,10 @@ "use strict"; import { createWindow } from './window'; -import { ipcMain, BrowserWindow } from "electron"; import { initSession } from './session'; -import { backgroundMitt } from './emitter'; -// const portAudio = require('naudiodon'); +import { initRecorder } from './audio'; -interface RenderMessage { - content: string; - context: string; - subContext: string; - modifiers: string; - time: string; - id: string; -} - -interface IpcRendererPayload { - endpoint: string; - message: RenderMessage | null; -} - -let win: BrowserWindow | null; -let activeSession = false; - -backgroundMitt.on('ipc-renderer', (payload: IpcRendererPayload) => { - if (win) - win.webContents.send(payload.endpoint, { - message: payload.message - }); -}); - -const windowDismount = (): void => { - win = null; - backgroundMitt.emit('window-active', false); - ipcMain.removeAllListeners('send-message'); -} +let socket = false; /* * The main function will be run after electron app is ready. @@ -42,55 +12,17 @@ const windowDismount = (): void => { export async function main() { // create main window. - if (!win) win = await createWindow({ + await createWindow({ width: 350, height: 525, resizable: true }); // Instantiate socket session with crimata-platorm. - if (!activeSession) initSession(); + if (!socket) initSession(); + socket = true; - activeSession = true; + // Begin audio stream. + initRecorder(); - // Handle window close. - win.on("closed", windowDismount); - - // TODO: FIX recorder restart bug - // let audioInput: string[] = []; - // const updateRecorder = async (Event: any, record: boolean): void => { - // if (record) { - // ia.resume(); - // } else { - // ia.pause(); - // const audio = processAudio(audioInput); - // sendAudio(audio); - // audioInput = []; - // } - // } - - // function processAudio(audioInput: Array): Buffer { - // let audio = ''; - // audioInput.forEach(chunk => audio += chunk); - // return Buffer.from(audio, "base64"); - // } - - // const ia = new portAudio.AudioIO({ - // inOptions: { - // channelCount: 1, - // sampleFormat: 16, - // sampleRate: 16000, - // deviceId: -1, - // closeOnError: false, - // } - // }); - // ia.setEncoding('base64'); - // ia.start(); - // ia.pause(); - // ia.on('error', (e: Error) => { - // console.log('Error recording audio', + e); - // }); - // ia.on('data', (chunk: string) => { - // audioInput.push(chunk); - // }); } diff --git a/src/background/session.ts b/src/background/session.ts index 8fba658..5959e2e 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -8,7 +8,7 @@ interface RenderMessage { content: string; context: string; subContext: string; - modifiers: string; + modifier: string; time: string; id: string; } @@ -32,22 +32,29 @@ 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) => { + + backgroundMitt.once('auth-res', (res: string) => { + if (res === 'locked') { reject(res); } else { + console.log('Success!'); auth = true; resolve(res); } + }); + if (!payload) { socket.send('no-token'); - } else if (typeof payload === 'string' || payload instanceof String) { + } else if (payload instanceof String || typeof payload === 'string') { socket.send(payload); } else { socket.send(JSON.stringify(payload)); } + }); }; @@ -59,22 +66,52 @@ 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', { + endpoint: 'render-message', + message: parsed + }); + } + +}; + +const asyncSend = (_event?, payload: TextMessage | Buffer): Promise => { + return new Promise((resolve, reject) => { + + backgroundMitt.once('message-res', (res: RenderMessage) => { + if (res.content) { + resolve(res); + } else { + reject('ERROR: NO MESSAGE'); + } + + }); + + if (payload instanceof Buffer) { + socket.send(payload); + } else if (payload) { + socket.send(JSON.stringify(payload)); + } + }); + +} + +export const sendAudio = async (content: Buffer) => { + + const res = await asyncSend(null, content); backgroundMitt.emit('ipc-renderer', { endpoint: 'render-message', - message: parsed + message: res }); -}; - -export const sendMessage = (content: TextMessage | Buffer) => { - if (content instanceof Buffer) { - socket.send(content); - } else if (content) { - socket.send(JSON.stringify(content)); - } } +// Run every time we want to connect to backend. export const initSession = () => { + + // Close existing sockets. if (socket) { socket.removeAllListeners(); socket.terminate(); @@ -82,25 +119,33 @@ export const initSession = () => { success = false; } + // Init new socket. socket = new WebSocket(`${ip}:${port}`); socket.binaryType = 'arraybuffer'; // handle renderer auth-token event - ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers - ipcMain.handle('auth-user', authSession); + ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers + ipcMain.handle('auth-session', authSession); + // handle renderer send-message event + ipcMain.removeHandler('message'); // avoid setting duplicate handlers + ipcMain.handle('message', asyncSend); + + // Connect to the backend. socket.on('open', () => { - console.log('Success! Connected to Crimata Servers.'); + console.log('Connected to Crimata Servers.'); - // fetch token from renderer + // call auth renderer event on connection backgroundMitt.emit('ipc-renderer', { - endpoint: 'fetch-token', + endpoint: 'auth', message: null }); + success = true; }); + // Handle for failed connect, try again. socket.on('error', (_e) => { console.log('ERROR: Failed to connect.'); socket.removeAllListeners(); diff --git a/src/background/window.ts b/src/background/window.ts index 70bc7dc..8967dea 100644 --- a/src/background/window.ts +++ b/src/background/window.ts @@ -3,7 +3,7 @@ import { BrowserWindow, ipcMain } from "electron"; import { createProtocol } from "vue-cli-plugin-electron-builder/lib"; import { backgroundMitt } from './emitter'; -import { sendMessage } from './session'; +import { updateRecorder } from './audio'; import * as path from "path"; interface WindowSettings { @@ -12,23 +12,46 @@ interface WindowSettings { resizable: boolean; } -interface TextMessage { - audio: 0; - content: string; +interface RenderMessage { + content: string; + context: string; + subContext: string; + modifiers: string; + time: string; + id: string; } -const handleMessage = (_event, arg: TextMessage | Buffer ) => { - sendMessage(arg); +interface IpcRendererPayload { + endpoint: string; + message: RenderMessage | null; } +let win: BrowserWindow | null; + const windowMount = (): void => { backgroundMitt.emit('window-active', true); - ipcMain.on('send-message', handleMessage); + ipcMain.on('update-recorder', updateRecorder); } -export const createWindow = async (options: WindowSettings): Promise => { +const windowDismount = (): void => { + win = null; + backgroundMitt.emit('window-active', false); + ipcMain.removeAllListeners('update-recorder'); +} + +backgroundMitt.on('ipc-renderer', (payload: IpcRendererPayload) => { + if (win) + win.webContents.send(payload.endpoint, { + message: payload.message + }); +}); + +export const createWindow = async (options: WindowSettings): Promise => { return new Promise((resolve, _reject) => { - const win: BrowserWindow = new BrowserWindow({ + + if (win) resolve(); + + win = new BrowserWindow({ width: options.width, height: options.height, resizable: options.resizable, @@ -50,9 +73,12 @@ export const createWindow = async (options: WindowSettings): Promise { windowMount(); - resolve(win); + resolve(); }); }); diff --git a/src/components/home/index.vue b/src/components/home/index.vue deleted file mode 100644 index a85b92c..0000000 --- a/src/components/home/index.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - diff --git a/src/components/home/messageVisualizer/index.vue b/src/components/home/messageVisualizer/index.vue deleted file mode 100644 index 897285d..0000000 --- a/src/components/home/messageVisualizer/index.vue +++ /dev/null @@ -1,77 +0,0 @@ - - - - - diff --git a/src/components/home/messageVisualizer/viewDetails/anime.ts b/src/components/home/messageVisualizer/viewDetails/anime.ts deleted file mode 100644 index bb767ad..0000000 --- a/src/components/home/messageVisualizer/viewDetails/anime.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { inject } from "vue"; -import AnimeFunc from "@/types/animejs/index"; -import { MessageAnimeFunc } from '@/types/message/index'; - -/** - * anime js animations used by message renderer - */ -export default function useMessageViewAnims(): { - shiftAnimate: MessageAnimeFunc; - stackAnimate: MessageAnimeFunc; -} { - // 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) => { - anime({ - targets: el, - transform: transform.initialTranslate, - easing: "easeInOutQuad", - duration: 500, - begin: function() { - shiftList({ - targetList, - sv: shiftValue - }); - }, - 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) => { - anime({ - targets: el, - transform: transform.initialTranslate, - easing: "easeInOutQuad", - duration: 1000, - complete: function() { - anime({ - targets: el, - transform: transform.finalTranslate, - easing: "easeInOutQuad", - duration: 500, - offset: 1000 - }); - } - }); - } - - return { - shiftAnimate, - stackAnimate - }; -} diff --git a/src/components/home/messageVisualizer/viewDetails/visualizer.ts b/src/components/home/messageVisualizer/viewDetails/visualizer.ts deleted file mode 100644 index 756ca67..0000000 --- a/src/components/home/messageVisualizer/viewDetails/visualizer.ts +++ /dev/null @@ -1,72 +0,0 @@ -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 - */ -export default function useMessageVisualizer(): { - beforeEnter: VueTransitionCallback; - enter: VueTransitionCallback; - afterEnter: VueTransitionCallback; -} { - // uses offsetCalculator logic and renderer animations - 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})` - } - shift ? shiftAnimate(el, transform, shiftOffset, messageList) : stackAnimate(el, transform); - } - - const beforeEnter: VueTransitionCallback = () => { - const queryResult = document.querySelectorAll(".messageList"); - if (queryResult.length) messageList = queryResult; - } - - const enter: VueTransitionCallback = (el) => { - // query DOM for latest message as soon as it enters - 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; - } - if (el) { - if (shift) { - - console.log(messageOffset.y) - if (messageOffset.y < 445) { - shiftOffset -= 15; - } else { - shiftOffset -= el.getBBox().height + messagePadding; - } - } - animateMessage(el); - } - } - - return { - beforeEnter, - enter, - afterEnter - }; -} 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/messageView/index.vue b/src/components/messageView/index.vue new file mode 100644 index 0000000..261e718 --- /dev/null +++ b/src/components/messageView/index.vue @@ -0,0 +1,92 @@ + + + diff --git a/src/components/messageView/viewDetails/anime.ts b/src/components/messageView/viewDetails/anime.ts new file mode 100644 index 0000000..0e56eb4 --- /dev/null +++ b/src/components/messageView/viewDetails/anime.ts @@ -0,0 +1,60 @@ +import { inject } from "vue"; +import AnimeFunc from "@/types/animejs/index"; + +/** + * anime js animations used by message view transitions + */ +export default function useMessageViewAnims() { + // imports animejs safely + let anime: AnimeFunc; + const animeInject: AnimeFunc | undefined = inject("animejs"); + if (animeInject) anime = animeInject; + + // update message View bottom bound + const shiftView = (el: SVGGElement, transform: string) => { + anime({ + targets: el, + transform: transform, + easing: "easeInOutQuad", + duration: 500, + }); + } + + // stacks message from top to bottom + const stackAnimate = (el: Element, transform: string) => { + return new Promise((resolve, _reject) => { + anime({ + targets: el, + transform: transform, + easing: "easeInOutQuad", + duration: 1000, + complete: function() { + resolve(); + } + }); + }) + } + + // adds new message at the bottom of the list and shifts existing message list + const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => { + return new Promise((resolve, _reject) => { + anime({ + targets: el, + transform: transform, + easing: "easeInOutQuad", + duration: 800, + begin: function() { + shiftView(view, viewTransform); + }, + complete: function() { + resolve(); + } + }); + }) + } + + return { + shiftAnimate, + stackAnimate, + }; +} diff --git a/src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts b/src/components/messageView/viewDetails/offsetCalculator.ts similarity index 94% rename from src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts rename to src/components/messageView/viewDetails/offsetCalculator.ts index c31ba54..a04e5ab 100644 --- a/src/components/home/messageVisualizer/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/transitions.ts b/src/components/messageView/viewDetails/transitions.ts new file mode 100644 index 0000000..8d85701 --- /dev/null +++ b/src/components/messageView/viewDetails/transitions.ts @@ -0,0 +1,85 @@ +/** + * Do stuff before, on, and after message enters the view. + * Rendering Process consists of the execution of the above + * mentioned callbacks followed by the shift or stack animation. + * The animation called depends on the height of the message view + * relative to the window height. Additionally, the animation will + * always be called on the after enter callback, after all the neccesary + * calculations have been completed. While all of this is hapenning, + * the rendering state is updated throughout the process. + */ + +import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index'; +import useMessageViewAnims from "./anime"; +import useOffsetCalculator from './offsetCalculator'; +import { ref } from 'vue'; + +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 useTransitions() { + const { calculateMessageOffsets } = useOffsetCalculator(); + const { shiftAnimate, stackAnimate } = useMessageViewAnims(); + const rendering = ref(false); + + const animateMessage = async (el: SVGGElement) => { + + const elTransform = `translate(${messageOffset.x} ${messageOffset.y})`; + const viewTransform = `translate(0 ${-vB})`; + + if (shift) { + await shiftAnimate(el, elTransform, messageView, viewTransform); + } else { + await stackAnimate(el, elTransform) + } + rendering.value = false; + } + + const beforeEnter: VueTransitionCallback = () => { + rendering.value = true; + // 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 + if (el) { + message = document.getElementById(el.id); + } + } + + const afterEnter: VueTransitionCallback = (el) => { + + if (message) messageOffset = calculateMessageOffsets(message); + + if (el) { + // 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); + } + } + + return { + beforeEnter, + enter, + afterEnter, + rendering + }; +} 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/components/taInput/inputController.ts b/src/components/taInput/inputController.ts index fd89d2e..e7eda4c 100644 --- a/src/components/taInput/inputController.ts +++ b/src/components/taInput/inputController.ts @@ -1,37 +1,46 @@ -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'; - /* * 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 } = useMitt(); + const { post } = useIpc('update-recorder'); + + // send message on ENTER + const enterCallback = (input: string) => { + + const message = { + audio: 0, + text: input + }; + emitter.emit("user-message", message); + } - const { keyDownHandler, input } = useKeyDownHandler(); - const { textInputXoffset, renderTextInput } = useTextVisualizer(input); const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream); + const { keyDownHandler, input } = useKeyDownHandler(enterCallback); + const { textInputXoffset, renderTextInput } = useTextVisualizer(input); // stops stream recording on space key up function keyupHandler(e: any) { if (e.key === " " && visualizeStream.value) { - console.log("stop recording"); - - window.postMessage({ - myTypeField: 'update-recorder', - record: false - }, '*') + post(false); visualizeStream.value = false; paths.value = [] audioBubbleWidth.value = 10; @@ -39,15 +48,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) { @@ -57,14 +69,8 @@ export default function useInputController() { return; } if (input === " " && visualizeStream.value === false) { - console.log("record MediaStream"); visualizeStream.value = true; - - window.postMessage({ - myTypeField: 'update-recorder', - record: true - }, '*') - + post(true); expandBubble(audioBubbleWidth); visualizeStreamAsPaths(stream, paths, audioBubbleWidth); return; @@ -72,11 +78,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/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts index 6a27d48..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("newSelfMessage", async (payload: any) => { - 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/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 @@ + + diff --git a/src/views/login.vue b/src/views/login.vue index 1514604..41f9b37 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -18,10 +18,9 @@ - + - @@ -45,9 +44,9 @@ export default defineComponent({ const email = ref(""); const password = ref(""); - const rememberMe = ref(false); + const rememberMe = ref(true); - const { data, invoke } = useIpc('auth-user'); + const { data, invoke } = useIpc('auth-session'); const submit = async () => { const payload = { @@ -57,8 +56,7 @@ export default defineComponent({ }; try { await invoke(payload); - console.log('testing incoke', data.value) - setToken(data.value, rememberMe.value); + setToken(data.value); router.push({ name: "home" }); } catch(e){ console.log('Error loging in.') diff --git a/src/views/register.vue b/src/views/register.vue index 53cb9f8..777f7b4 100644 --- a/src/views/register.vue +++ b/src/views/register.vue @@ -6,42 +6,40 @@ -
+
- + - + - - -
+ + - - + + + + - + + \ No newline at end of file + + + \ No newline at end of file diff --git a/tests/mockMessages.ts b/tests/mockMessages.ts new file mode 100644 index 0000000..ac84a25 --- /dev/null +++ b/tests/mockMessages.ts @@ -0,0 +1,160 @@ +import { Message } from "@/types/message/index"; + +export const Messages: Message[] = [ + { + content: "Good morning Dave", + context: "launch", + subContext: "", + modifier: "ai", + id: "2", + time: "" + }, + { + content: + "add contact", + context: "addcontact", + subContext: "", + modifier: "sf", + id: "1", + time: "" + }, + { + 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", + id: "5", + time: "" + }, + { + content: "andrew gundersen", + context: "addcontact", + subContext: "", + modifier: "sf", + id: "6", + time: "" + }, + + { + content: "gundersena@xavier.edu", + context: "addcontact", + subContext: "", + modifier: "sf", + id: "3", + time: "" + }, + { + content: "I already have a contact forandrew gundersen. Are you sureyou want this?", + context: "addcontact", + 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: "" + }, +]; 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'); + } });