import { backgroundMitt } from './emitter';
import { ipcMain } from "electron";
import { play } from './audio';
- import { UserCreds, ClientMessage } from "@/types/message/index";
- import { clientMessage } from '@/modules/message';
- import { v4 as uuidv4 } from 'uuid';
+ import { UserCreds, ClientMessage, RenderMessage, Annotation } from "@/types/message/index";
-import { clientMessage, initRenderMessageFromString } from '@/modules/message';
-import { v4 as uuidv4 } from 'uuid';
++import { clientMessage, renderMessage } from '@/modules/message';
const ip = 'ws://127.0.0.1';
const port = 8760;
});
};
- const onMessage = (message: string): void => {
-const onMessage = (message_str: string): void => {
++const onMessage = (messageStr: string): void => {
while (!auth) {
- backgroundMitt.emit('auth-res', message);
- backgroundMitt.emit('auth-res', message_str);
++ backgroundMitt.emit('auth-res', messageStr);
return;
}
- // Parse the message.
- const m = JSON.parse(message);
+ // Decode the message.
- const m = JSON.parse(message_str)
++ const m = JSON.parse(messageStr)
+ let message: RenderMessage | Annotation;
- // check to see if this is a Render Message.
+ // Check to see if this is a Render Message.
if (m.content) {
- message = initRenderMessageFromString(message_str)
++ message = renderMessage({
++ text: m.content.text,
++ audio: m.content.audio,
++ context: m.context,
++ modifier: m.modifier,
++ });
- // If there is audio, play it.
- if (m.content.audio) {
+ // Play audio if any.
+ if (message.content.audio) {
const audioBytes = Buffer.from(m.content.audio as string, 'hex');
m.content.audio = true;
play(audioBytes);
import { useIpc } from '@/modules/ipc';
import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
- import { RenderMessage, ClientMessage } from "@/types/message/index";
- import { v4 as uuidv4 } from 'uuid';
- import {clientMessage, renderMessage} from '@/modules/message';
-import {clientMessage, initRenderMessage} from '@/modules/message';
+import anime from "animejs";
++import { clientMessage, renderMessage } from '@/modules/message';
let textInput: HTMLInputElement | null;
- let m: RenderMessage | ClientMessage;
- let uid: string;
+// Animation functions for text input element.
+function expandInput() {
+ anime({
+ targets: textInput,
+ width: ['0px', '150px'],
+ duration: 500,
+ easing: 'easeOutExpo',
+ })
+}
+
+function retractInput() {
+ anime({
+ targets: textInput,
+ width: ['150px', '0px'],
+ duration: 500,
+ easing: 'easeOutExpo',
+ begin: function() {
+ if (textInput) textInput.blur();
+ }
+ })
+}
+
export default function useInputController() {
const { emitter } = useMitt();
const isRecording = ref(false);
const isTyping = ref(false);
const input = ref("");
+ const capsLock = ref(false);
+
++ // Utility function to render message.
++ const render = (text: string, audio: boolean | string, context: string, modifier: string): string => {
++ const m = renderMessage({ text, audio, context, modifier });
++ emitter.emit("self-message", m);
++ console.log(m.time)
++ return m.uid;
++ }
+
// send message on ENTER.
const onEnter = () => {
if (input.value) {
- // remove first character of input.
- const text = input.value.substring(1);
- uid = uuidv4();
-
- m = renderMessage(input.value, false, "sf", uid);
-
- // render user message.
- emitter.emit("self-message", m);
- // Render the message immediately.
- const message = initRenderMessage(text, "", "", "sf");
- emitter.emit("self-message", message);
++ // Render the message immediately and get its unique id.
++ const uid = render(input.value, false, "", "sf");
- m = clientMessage(m.content.text, m.content.audio, uid);
+ // Then send it to the backend for processing.
- const clientM = clientMessage(text, false, message.uid);
++ const clientM = clientMessage(input.value, false, uid);
+ post('client-message', clientM);
- // send message to main process.
- post('client-message', m);
-
- // reset text input.
+ // Reset the text input.
if (textInput) textInput.value = '';
input.value = " ";
}
isRecording.value = false;
- uid = uuidv4();
-
- // render audio message.
- m = renderMessage("", false, "sf", uid);
- emitter.emit("self-message", m);
- // Render the message immediately.
- const audioMessage = initRenderMessage("", "", "", "sf")
- emitter.emit("self-message", audioMessage);
--
- // stop stream recording.
- // Notify backend to stop recording and send audio to python backend for audio processing.
++ // // Render the message immediately and get its unique id.
++ const uid = render("", "", "", "sf");
++ // Notify main process to stop recording and send send audio to backend for analysis.
post('update-recorder', {
isRecording: isRecording.value,
- uid: audioMessage.uid
+ uid
});
+ // Reset input.
input.value = ''
}
+ else if (e.code === "CapsLock") {
+ capsLock.value = false;
+ }
}
onMounted(() => {
window.removeEventListener("keyup", onKeyUp);
});
-
- // watch keyboard input & update current state.
+ // watch keyboard input & update inputItem state.
watch(input, (input, prevInput) => {
+ if (isTyping.value && input.length === 0) {
+ retractInput();
+ }
+ // Do nothing if user is typing.
if (prevInput !== "" || prevInput.length > 0) {
- if (!isRecording.value) {
- isTyping.value = true;
- }
return;
}
import { RenderMessage, ClientMessage } from "@/types/message/index";
+ import { v4 as uuidv4 } from 'uuid';
- export const renderMessage = (text: string, audio: string | boolean, modifier: string, uid: string): RenderMessage => (
-// Create a RenderMessage object directly from json string.
-export function initRenderMessageFromString(messageStr: string) {
-
- // Parse the string.
- const m = JSON.parse(messageStr);
++interface RenderParams {
++ text: string;
++ audio: boolean | string;
++ context: string;
++ modifier: string;
++}
+
- // Auto set uid and time.
++function getTimeStamp(): number {
+ const currentdate = new Date();
-
- const message: RenderMessage = {
- content: m.content,
- context: m.context,
- modifier: m.modifier,
- time: currentdate.getTime(),
- uid: uuidv4(),
- isChild: "none"
- }
-
- return message
++ return currentdate.getTime();
+ }
+
+ // Create a RenderMessage object.
-export function initRenderMessage(text: string, audio: string, context: string, modifier: string) {
-
- // Auto set uid and time.
- const currentdate = new Date();
-
- const message: RenderMessage = {
++export const renderMessage = (params: RenderParams): RenderMessage => (
+ {
content: {
- audio,
- text
- text: text,
- audio: audio
++ text: params.text,
++ audio: params.audio
},
- context: "",
- modifier,
- uid
- context: context,
- modifier: modifier,
- time: currentdate.getTime(),
++ context: params.context,
++ modifier: params.modifier,
++ time: getTimeStamp(),
+ uid: uuidv4(),
+ isChild: "none"
}
-
- return message
-}
+)
export const clientMessage = (text: string, audio: string | boolean, uid: string): ClientMessage => (
{
projects / mime-chat / commitdiff