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, initRenderMessage} from '@/modules/message';
let textInput: HTMLInputElement | null;
-let uid: string;
export default function useInputController() {
emitter.emit("self-message", message);
// Then send it to the backend for processing.
- const clientMm = clientMessage(text, false, message.uid);
- post('client-message', message);
+ const clientM = clientMessage(text, false, message.uid);
+ post('client-message', clientM);
// Reset the text input.
if (textInput) textInput.value = '';
<template>
<div
class="message"
+ :class="`${message.isChild}ChildMessage`"
:id="`${message.modifier}Message`"
:key="message.id"
>
<!-- !denoted by the modifier attribute -->
<!-- Includes bubble and context. -->
- <div class="messageBox" :id="`${message.modifier}MessageBox`">
+ <div
+ :id="`${message.modifier}MessageBox`"
+ class="messageBox"
+ >
<!-- message bubble -->
<div
class="bubble"
+ :class="`${message.modifier}-${message.isChild}ChildBubble`"
:id="`${message.modifier}Bubble`"
>
<!-- Show loader when audio is being transcribed. -->
</div>
<!-- message context -->
- <span v-if="message.isChild === false" class="context">
+ <span v-if="message.isChild === 'last' || message.isChild === 'none'" class="context">
<!-- Render Crimata icon or friend's initials. -->
<div v-if="message.modifier == 'ai'" class="photo">
margin-bottom: 18px;
}
+ .firstChildMessage {
+ padding-bottom: 2px;
+ }
+
+ .middleChildMessage {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+
+ .lastChildMessage {
+ padding-top: 2px;
+ }
+
#aiMessage {
align-items: flex-start;
}
background-color: white;
}
+ .sf-firstChildBubble {
+ border-bottom-right-radius: 9px;
+ }
+
+ .sf-middleChildBubble {
+ border-top-right-radius: 9px;
+ border-bottom-right-radius: 9px;
+ }
+
+ .sf-lastChildBubble {
+ border-top-right-radius: 9px;
+ }
+
+ .ai-firstChildBubble, .fr-firstChildBubble {
+ border-bottom-left-radius: 9px;
+ }
+
+ .ai-middleChildBubble, .fr-middleChildBubble {
+ border-top-left-radius: 9px;
+ border-bottom-left-radius: 9px;
+ }
+
+ .ai-lastChildBubble, .fr-lastChildBubble {
+ border-top-left-radius: 9px;
+ }
+
.context {
display: flex;
align-items: center;
import { v4 as uuidv4 } from 'uuid';
// Create a RenderMessage object directly from json string.
-export function initRenderMessageFromString(message_str: string) {
+export function initRenderMessageFromString(messageStr: string) {
// Parse the string.
- const m = JSON.parse(message_str);
+ const m = JSON.parse(messageStr);
// Auto set uid and time.
- let currentdate = new Date();
+ const currentdate = new Date();
const message: RenderMessage = {
content: m.content,
modifier: m.modifier,
time: currentdate.getTime(),
uid: uuidv4(),
- isChild: false
+ isChild: "none"
}
return message
export function initRenderMessage(text: string, audio: string, context: string, modifier: string) {
// Auto set uid and time.
- let currentdate = new Date();
+ const currentdate = new Date();
const message: RenderMessage = {
content: {
modifier: modifier,
time: currentdate.getTime(),
uid: uuidv4(),
- isChild: false
+ isChild: "none"
}
return message
export default function useMessages() {
- const addMessage = (m: RenderMessage) => messages.value.set(m.uid, m);
-
- const updateMessage = (m: Annotation) => {
- // update message if in the map.
- if (messages.value.has(m.uid)) {
- messages.value.get(m.uid).context = m.context;
- messages.value.get(m.uid).content.text = m.text;
- }
+ // Add new message and update previous message if nessesary.
+ const addMessage = (m: RenderMessage) => {
+ console.log(`Adding message: ${m.content.text}`)
+ messages.value.set(m.uid, m);
+ }
+
+ const updateMessage = (a: Annotation) => {
+ console.log("Updating message...")
+
+ const m = messages.value.get(a.uid)
+ m.context = a.context
+ m.text = a.text
+
+ return m
}
const saveMessages = () => {
modifier: string;
time: number;
uid: string;
- isChild: boolean;
+ isChild: string;
}
export interface ClientMessage {
<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from "vue";
-import { RenderMessage } from "@/types/message/index";
import MessageItem from "@/components/messageItem.vue";
import InputItem from "@/components/inputItem/inputItem.vue";
import Settings from "@/components/settings.vue";
const { emitter } = useMitt();
const { messages, addMessage, updateMessage } = useMessages();
- // Reference to previous message for grouping purposes.
- let prevMessage: RenderMessage;
+ let prevRef: string; // ref to previous message
+ let activeGroup = false; // if active group exists.
+ // When backend has new message.
const onRenderMessage = (_event: any, payload: any) => {
- const message = payload.message; // cleaner
+ let message = payload.message; // cleaner
- // render message if there is content.
+ // Check type and handle accordingly.
if (message.content) {
addMessage(message);
- }
-
- // must be an annotation, update message.
- else {
- updateMessage(message);
+ } else {
+ message = updateMessage(message);
}
- // Also want to check if message should be grouped.
- // Message context and modifier needs to be same as previous message while also having close times (20s).
- if (message.time < prevMessage.time + 20000 && message.context == prevMessage.context && message.modifier == prevMessage.modifier) {
+ // Check for grouping.
+ if (prevRef) {
+ const prev = messages.value.get(prevRef)
+ const current = messages.value.get(message.uid)
+
+ console.log(`${message.modifier}, ${prev.modifier}`)
+ console.log(`${message.context}, ${prev.context}`)
+
+ // If last two messages go together...group accordingly.
+ if (current.time < prev.time + 20000 && current.modifier === prev.modifier && current.context === prev.context) {
+
+ if (activeGroup) {
+ prev.isChild = "middle"
+ } else {
+ prev.isChild = "first"
+ }
+
+ // Current always last child.
+ current.isChild = "last"
+ activeGroup = true
+ }
+
+ // Else...reset activeGroup.
+ else {
+ activeGroup = false
+ }
- prevMessage.isChild = true;
}
+ // Set previous message for next time.
+ prevRef = message.uid
+
}
onMounted(() => {
- // Listen for new messages to render.
+
+ // Front end listener.
emitter.on('self-message', (message) => addMessage(message));
+
+ // Back end listener.
window.ipcRenderer.on("render-message", onRenderMessage);
+
});
onUnmounted(() => {
projects / mime-chat / commitdiff