added backend which maintains ai instances;

added frontend as control panel

frontend/src/components/dashboard/Chat.vue

@@ -0,0 +1,78 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop} from "vue-property-decorator";
+import AiInstanceApi from "@/data/api/AiInstanceApi";
+import type {AiInstance} from "@/data/models/AiInstance";
+import {toast} from "vue3-toastify";
+import type {ChatMessage} from "@/data/models/chat/ChatMessage";
+import {BSpinner} from "bootstrap-vue-next";
+
+@Options({
+  name: 'Chat',
+  components: {BSpinner},
+})
+export default class Chat extends Vue {
+  @Prop({required: true})
+  readonly aiInstance!: AiInstance;
+  readonly aiInstanceApi = new AiInstanceApi();
+  user: string = 'alice';
+  text: string = '';
+  waiting: boolean = false;
+  message: ChatMessage | null = null;
+
+  async send(): Promise<void> {
+    this.waiting = true;
+    try {
+      this.message = {'role': 'user', 'name': this.user, 'content': this.text};
+      this.text = '';
+      const response = await this.aiInstanceApi.chatText(this.aiInstance.configuration.name, this.message);
+      debugger;
+      this.aiInstance.messages.push(this.message);
+      this.aiInstance.messages.push(response);
+    } catch (e) {
+      toast.error('Error while chatting: ' + JSON.stringify(e));
+    } finally {
+      this.waiting = false;
+      this.message = null;
+    }
+  }
+}
+</script>
+<style scoped>
+.input-group-vertical :not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.input-group-vertical :not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>
+<template>
+  <div class="card">
+    <div class="card-header">
+      <h5 class="card-title mb-0">Chat</h5>
+    </div>
+    <div class="card-body">
+      <div class="input-group-vertical">
+        <div class="form-control overflow-y-auto">
+          <div v-if="aiInstance.messages.length === 0">
+            <i>No conversation history</i>
+          </div>
+          <div v-for="message in aiInstance.messages">
+            <b>{{ message.name }}</b>{{ ': ' + message.content }}
+          </div>
+          <div v-if="waiting">
+            <b>{{ message!.name }}</b>{{ ': ' + message!.content }}
+            <Spinner/>
+          </div>
+        </div>
+        <div class="input-group">
+          <input type="text" class="form-control" v-model="user" placeholder="Username" style="max-width: 10em"/>
+          <input type="text" class="form-control" v-model="text" placeholder="Type message here" @keydown.enter="send"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>