added websocket updates

frontend/src/components/dashboard/DashBoard.vue

@@ -1,15 +1,19 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import AiInstanceTabs from "@/components/dashboard/AiInstanceTabs.vue";
+import WsUpdater from "@/components/dashboard/WsUpdater.vue";
 
 @Options({
   name: 'DashBoard',
-  components: {AiInstanceTabs},
+  components: {WsUpdater, AiInstanceTabs},
 })
 export default class DashBoard extends Vue {
 }
 </script>
 
 <template>
-  <AiInstanceTabs class="m-3"/>
+  <div>
+    <WsUpdater/>
+    <AiInstanceTabs class="m-3"/>
+  </div>
 </template>

frontend/src/components/dashboard/WsUpdater.vue

@@ -0,0 +1,78 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {AiInstanceStore} from '@/stores/AiInstanceStore';
+import {ChatMessageVmV1} from 'ai-oas';
+
+@Options({
+  name: 'WsUpdater',
+  components: {},
+})
+export default class WsUpdater extends Vue {
+  readonly baseurl = 'ws://' + window.location.host + '/';
+  private socket!: WebSocket;
+  private readonly aiInstanceStore = new AiInstanceStore();
+  private reconnect = false;
+
+  mounted() {
+    this.reconnect = true;
+    this.initSocket();
+  }
+
+  private initSocket(): void {
+    this.socket = new WebSocket(this.baseurl + 'ws/dashboard/');
+    this.socket.onmessage = (e) => {
+      const message = JSON.parse(e.data);
+      switch (message.type) {
+        case 'chatText': {
+          const aiInstanceId = message.aiInstance;
+          const ai = this.aiInstanceStore.aiInstances.find(e => e.configuration.id == aiInstanceId);
+          if (ai) {
+            ai.messages.push(ChatMessageVmV1.fromJson(message));
+          }
+          break;
+        }
+        case 'discordOnline': {
+          const aiInstanceId = message.aiInstance;
+          const ai = this.aiInstanceStore.aiInstances.find(e => e.configuration.id == aiInstanceId);
+          if (ai) {
+            ai.discord.online = message.online;
+          }
+          break;
+        }
+        case 'discordReactToChat': {
+          const aiInstanceId = message.aiInstance;
+          const ai = this.aiInstanceStore.aiInstances.find(e => e.configuration.id == aiInstanceId);
+          if (ai) {
+            ai.discord.reactToChat = message.reactToChat;
+          }
+          break;
+        }
+        default:
+          console.log('WsUpdater: Unknown message type', message);
+      }
+    };
+
+    this.socket.onopen = () => {
+      console.info('Chat socket connected');
+    }
+
+    this.socket.onclose = (event: CloseEvent) => {
+      if (this.reconnect) {
+        console.error('Chat socket closed unexpectedly. Reconnecting ...');
+        this.$nextTick(() => this.initSocket());
+      }
+    };
+  }
+
+  unmounted() {
+    this.reconnect = false;
+    this.socket.close();
+  }
+
+  sendMessage(message: any) {
+    this.socket.send(JSON.stringify(message));
+  }
+}
+</script>
+<template>
+</template>