}
const ip = 'ws://127.0.0.1';
-const port = 8760;
+const port = 8081;
const reconnectTimeout = 3000; //ms
let socket: WebSocket;
let success = false;
}
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: 'agent-message',
- message: parsed
- });
- }
+ backgroundMitt.emit('ipc-renderer', {
+ endpoint: 'render-message',
+ message: parsed
+ });
};
-const asyncSend = (_event?, payload: TextMessage | Buffer): Promise<RenderMessage> => {
- 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));
- }
- });
-
+const sendMessage = (_event, payload: TextMessage): void => {
+ socket.send(JSON.stringify(payload));
}
-export const sendAudio = async (content: Buffer) => {
-
- const res = await asyncSend(null, content);
-
- backgroundMitt.emit('ipc-renderer', {
- endpoint: 'agent-message',
- message: res
- });
+export const sendAudio = (content: Buffer) => {
+ socket.send(content);
}
// Run every time we want to connect to backend.
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);
+ // handle user message event
+ ipcMain.removeAllListeners('message');
+ ipcMain.on('message', sendMessage);
// Connect to the backend.
socket.on('open', () => {
<script lang="ts">
import TextBubble from "@/components/textBubble/index.vue";
import { Message } from "@/types/message/index";
-import { useIpc } from "@/modules/ipc";
import { Queue } from "@/modules/queue";
import useTransitions from "./viewDetails/transitions";
import useScrollView from "@/modules/scrollView";
const renderArr: Message[] = reactive([]);
const renderQ = new Queue();
- const { invoke } = useIpc("message");
-
// Each method will be called on their respective lifecycle event.
const { beforeEnter, enter, afterEnter, rendering } = useTransitions();
const { scrollView } = useScrollView({
});
onMounted(() => {
- // Call render function on event "agent-message."
- window.ipcRenderer.on("agent-message", (event, payload) => {
+ window.ipcRenderer.on("render-message", (event, payload) => {
const m = payload.message;
if (m.content) render(m);
});
- emitter.on("user-message", async (message) => {
- try {
- const res = await invoke(message);
- render(res);
- } catch (e) {
- console.log("No response. Do not render.");
- }
- });
});
onUnmounted(() => {
/**
* 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
+ * 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
+ * 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.
*/
const paths = ref([]);
const audioBubbleWidth = ref(10);
const { emitter } = useMitt();
- const { post } = useIpc('update-recorder');
+ const { post } = useIpc();
// send message on ENTER
const enterCallback = (input: string) => {
audio: 0,
text: input
};
- emitter.emit("user-message", message);
+
+ // trigger send animation
+ emitter.emit("animate-send");
+
+ // send message to backend
+ post('message', message);
}
- const {
- visualizeStreamAsPaths,
- expandBubble
+ const {
+ visualizeStreamAsPaths,
+ expandBubble
} = useAudioVisualizer(visualizeStream);
const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
- const {
- textInputXoffset,
+ const {
+ textInputXoffset,
textInputYoffset,
- renderTextInput
+ renderTextInput
} = useTextVisualizer(input);
// stops stream recording on space key up
function keyupHandler(e: any) {
if (e.key === " " && visualizeStream.value) {
- post(false);
+ post('update-recorder', false);
visualizeStream.value = false;
paths.value = []
audioBubbleWidth.value = 10;
}
if (input === " " && visualizeStream.value === false) {
visualizeStream.value = true;
- post(true);
+ post('update-recorder', true);
expandBubble(audioBubbleWidth);
visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
return;
}
onMounted(() => {
- emitter.on("user-message", () => {
+ emitter.on("animate-send", () => {
const inputEl = document.getElementsByClassName("inputContainer");
const foreignEl = inputEl[0] as HTMLElement;
animateSend(foreignEl, inputHeight.value, input);
const calculateXoffset = async () => {
switch (m) {
case "sf":
- x.value = 800 - messageWidth.value - selfMessageMarginRight;
+ x.value = winW - messageWidth.value - selfMessageMarginRight;
break;
default:
x.value = paddingLeft;
const token = window.localStorage.getItem(AUTH_KEY);
const authToken = async () => {
- const { data, invoke } = useIpc('auth-session');
+ const { invoke } = useIpc();
try {
- await invoke(token);
- state.accessToken = data.value;
+ state.accessToken = await invoke('auth-session', token);
}
catch(e) {
state.error = e;
-import { ref, computed } from 'vue'
-export const useIpc = (endpoint: string) => {
- const data = ref();
- const error = ref();
-
- const errorMessage = computed(() => {
- console.log('ERROR', error.value);
- if (error.value) {
- return error.value.message
- }
- })
-
- const invoke = async (payload: any) => {
- error.value = undefined;
+export const useIpc = () => {
+ const invoke = async (endpoint: string, payload: any) => {
try {
const res = await window.ipcRenderer.invoke(endpoint, payload);
- return data.value = res;
+ return res;
} catch (e) {
- error.value = e;
throw e;
}
}
- const post = (payload: any) => {
+ const post = (endpoint: string, payload: any) => {
window.postMessage({
endpoint: endpoint,
content: payload
};
return {
- data,
- error,
- errorMessage,
invoke,
post
}
ipcRenderer.send("update-recorder", message.content);
}
+ if (message.endpoint === "message") {
+ ipcRenderer.send("message", message.content);
+ }
+
});
});
<input class="input" type="text" v-model="email" />
<div class="inputModifier">Email</div>
</div>
-
+
<!-- password -->
<div class="inputBox">
const password = ref("");
const rememberMe = ref(true);
- const { data, invoke } = useIpc('auth-session');
+ const { invoke } = useIpc();
const submit = async () => {
const payload = {
password: password.value
};
try {
- await invoke(payload);
- setToken(data.value);
+ const res = await invoke('auth-session', payload);
+ setToken(res);
router.push({ name: "home" });
} catch(e){
console.log('Error loging in.')
const password = ref("");
const password2 = ref("");
- const { invoke, data,} = useIpc("auth-session");
+ const { invoke } = useIpc();
const { setToken } = useAuth();
const router = useRouter();
if (validate()) {
try {
- await invoke(payload);
- setToken(data.value);
+ const res = await invoke('auth-session', payload);
+ setToken(res);
router.push({ name: "home" });
} catch(e) {
console.log('Failed to register.')
projects / mime-chat / commitdiff