undo button - not functional yet but gives a good idea of what will happen

session.json

@@ -1 +1 @@
-{"key":"854fb3e1-9207-473d-82b8-b6385f47e895","newMessages":[]}
+{"key":"6cde67f6-6188-452d-a54e-9d38cabf2d63","newMessages":[]}

src/background/helpers.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import { backgroundMitt } from "@/modules/emitter";
-import { SessionState, WindowState } from "@/types/message"; 
+import { SessionState, WindowState } from "@/types"; 
 
 
 export const ipcEmit = (channel: string, payload: any) => {

src/background/init.ts

@@ -37,9 +37,11 @@ export function initApp(dev: boolean): void {
       main()
     });
 
+    // Must keep to ensure app doesn't quit on close.
     app.on("before-quit", () => {
     });
 
+    // Must keep to ensure app doesn't quit on close.
     app.on("window-all-closed", () => {
     });
 

src/background/session.ts

@@ -16,7 +16,7 @@ import useWebSockets from "@/modules/websockets";
 
 import { play } from "./audio";
 import { renderMessage } from "@/modules/message";
-import { AuthProtocol, SessionState, Profile } from "@/types/message"; 
+import { AuthProtocol, SessionState, Profile } from "@/types"; 
 
 let win = true;
 

src/background/window.ts

@@ -3,10 +3,9 @@
 import { BrowserWindow, ipcMain } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import { backgroundMitt } from '@/modules/emitter';
-import { RenderMessage, WindowState } from "@/types/message/index";
+import { RenderMessage, WindowState } from "@/types";
 import { loadWinState, saveToJson } from "./helpers";
 import * as path from "path";
-import fs from 'fs';
 
 interface IpcRendererPayload {
   endpoint: string;

src/components/message.vue

@@ -23,6 +23,14 @@
       class="messageBox"
     >
 
+      <!-- Render undo button for messages to friends. -->
+      <button 
+        v-if="undoOption === true"
+        class="undoButton"
+      >
+        undo
+      </button>
+
       <!-- message bubble -->
       <div
         class="bubble"
@@ -61,7 +69,11 @@
       </div>
 
       <!-- message context -->
-      <span v-if="message.isChild === 'last' || message.isChild === 'none'" class="context">
+      <span 
+        v-if="message.isChild === 'last' || message.isChild === 'none'"
+        class="context"
+        :class="{ 'context-undo-anim': undoOption }"
+      >
 
         <!-- Render Crimata icon or friend's initials. -->
         <div v-if="message.modifier == 'ai'" class="photo">
@@ -86,9 +98,9 @@
 
 <script lang='ts'>
 
- import {defineComponent, ref, onMounted} from 'vue';
- import { RenderMessage } from "@/types/message/index";
-
+ import { defineComponent, ref, onMounted, onBeforeUpdate } from 'vue';
+ import { clientRequest } from "@/modules/message";
+ import { useIpc } from "@/modules/ipc";
 
  export default defineComponent({
   name: "MessageItem",
@@ -99,10 +111,15 @@
 
     let addListener = false;
 
+    const undoOption = ref(false);
+
     const notify = ref(false)
     const isPlaying = ref(false);
 
+    const { post } = useIpc()
+
     if (!props.message.seen) {
+      console.log("MSG:Checking...")
 
       // newMessages always render with blue dot.
       if (props.message.newMessage) {
@@ -141,11 +158,24 @@
       }
     }
 
+    const onUndo = () => {
+      post("client-message", clientRequest("launch", {name: false}, "undo"))
+    }
+
     const onStopPlayback = (e: any) => {
       window.ipcRenderer.removeAllListeners("stop-playback-anim");
       isPlaying.value = false
     }
 
+    onBeforeUpdate(() => {
+
+      if (props.message.context.substring(0, 3) === 'To ') {
+        console.log("MSG:Applying undo anim")
+        undoOption.value = true;
+      }
+      
+    })
+
     onMounted(() => {
 
       // Listen for window focus event.
@@ -162,8 +192,10 @@
     })
 
     return {
+      onUndo,
       notify,
-      isPlaying
+      isPlaying,
+      undoOption
     }
   }
 
@@ -232,6 +264,8 @@
   }
 
   .messageBox {
+    position: relative;
+
     display: flex;
     flex-direction: column;
 
@@ -344,6 +378,8 @@
   }
 
   .context {
+    position: relative;
+
     display: flex;
     align-items: center;
 
@@ -353,6 +389,20 @@
     margin-top: 5px;
   }
 
+  .context-undo-anim {
+    animation-name: context-anim;
+    animation-duration: 3s;
+  }
+
+  @keyframes context-anim {
+    0%, 90% {
+      transform: translateX(-45px);
+    }
+    100% {
+      transform: translateX(0px);
+    }
+  }
+
   .photo {
     display: flex;
     justify-content: center;
@@ -410,4 +460,48 @@
     color: #357CA2;
   }
 
-</style>
+  .undoButton {
+    position: absolute;
+
+    bottom: 0px;
+    right: 0px;
+
+    opacity: 0;
+
+    border: none;
+    outline: none;
+
+    margin: 0px;
+    padding: 0px;
+
+    background-color: Transparent;
+
+    font-family: "SF Compact Display";
+    font-size: 12px;
+    font-weight: bold;
+    color: #9B9B9B;
+
+    animation-name: undo-anim;
+    animation-duration: 3s;
+}
+
+.undoButton:hover {
+  cursor: pointer;
+}
+
+@keyframes undo-anim {
+  0%, 90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+</style>
+<!-- 
+      // If this is a message to a friend, we render undo button.
+      if (props.message.context.substring(0, 3) === 'To ') {
+        console.log("MSG:Applying undo anim")
+        undoOption.value = true;
+      } -->

src/modules/emitter.ts

@@ -1,4 +1,11 @@
 /* eslint-disable */
+
+import { Emitter } from "mitt";
+
+// Backend emitter
+
+type Mitt = Emitter;
+
 const EventEmitter = require('events');
 
 class BackgroundMitt extends EventEmitter { }

src/modules/message.ts

@@ -1,4 +1,4 @@
-import { RenderMessage, ClientMessage, AuthRequest, LogoutRequest } from "@/types/message/index";
+import { RenderMessage, ClientMessage, ClientRequest, AuthRequest, LogoutRequest } from "@/types";
 import { v4 as uuidv4 } from 'uuid';
 
 function getTimeStamp(): number {  
@@ -31,6 +31,15 @@ export const clientMessage = (text: string, audio: string | boolean, uid: string
   }
 )
 
+export const clientRequest = (intent: string, params: object, epic: string | boolean): ClientRequest => (
+  {
+    intent: intent,
+    params: params,
+    epic: epic,
+    confidence: 1.0
+  }
+)
+
 export const authRequest = (key: boolean | string, usr: boolean | string, pwd: boolean | string): AuthRequest => (
   {
     key,

src/modules/messages.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import useScroll from "@/modules/scroll";
-import { RenderMessage, Annotation } from "@/types/message/index";
+import { RenderMessage, Annotation } from "@/types";
 
 const messages = ref(new Map());
 

src/modules/mitt.ts

@@ -1,5 +1,9 @@
 import { inject } from "vue";
-import { Mitt } from "@/types/mitt/index";
+import { Emitter } from "mitt";
+
+// Frontend emitter
+
+type Mitt = Emitter;
 
 let emitter: Mitt;
 

src/types.ts

@@ -18,6 +18,13 @@ export interface ClientMessage {
     uid: string;
 }
 
+export interface ClientRequest {
+    intent: string, 
+    params: object,
+    epic: string | boolean,
+    confidence: number
+}
+
 export interface SessionState {
     key: string | boolean;
     newMessages: RenderMessage[];

src/types/mitt/index.ts

@@ -1,3 +0,0 @@
-import { Emitter } from "mitt";
-
-export type Mitt = Emitter;

window.json

@@ -1 +1 @@
-{"width":386,"height":815,"x":1720,"y":495}
+{"width":609,"height":721,"x":1376,"y":517}