adjust frontend to new backend

frontend/src/components/dashboard/AiInstanceTabs.vue

@@ -1,31 +1,21 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import type {AiInstance} from "@/data/models/AiInstance";
-import AiInstanceApi from "@/data/api/AiInstanceApi";
-import AiInstanceComponent from "@/components/dashboard/AiInstanceComponent.vue";
+import AiInstanceComponent from '@/components/dashboard/AiInstanceComponent.vue';
+import Alert from '@/components/Bootstrap/Alert.vue';
+import {AiInstanceVmV1} from 'ai-oas';
+import {AiInstanceStore} from '@/stores/AiInstanceStore';
+import {storeToRefs} from 'pinia';
 
 @Options({
   name: 'AiInstanceTabs',
-  components: {AiInstanceComponent},
+  components: {Alert, AiInstanceComponent},
 })
 export default class AiInstanceTabs extends Vue {
-  readonly aiInstances: AiInstance[] = [];
-  readonly aiInstanceApi = new AiInstanceApi();
-  selectedAiInstance: AiInstance | null = null;
+  readonly aiInstanceStore = new AiInstanceStore();
+  selectedAiInstance: AiInstanceVmV1 | null = null;
 
   mounted(): void {
-    this.reload();
-  }
-
-  async reload(): Promise<void> {
-    const list = await this.aiInstanceApi.fetchAiInstances();
-    this.aiInstances.splice(0);
-    this.aiInstances.push(...list);
-    if (list.length > 0) {
-      this.selectedAiInstance = list[0];
-    } else {
-      this.selectedAiInstance = null;
-    }
+    this.aiInstanceStore.loadIfAbsent();
   }
 }
 </script>
@@ -34,19 +24,19 @@ export default class AiInstanceTabs extends Vue {
   <div class="d-flex flex-column">
     <!-- tabs -->
     <div class="d-flex flex-row">
-      <div class="flex-grow-1">
+      <div class="flex-grow-1 me-2">
         <!-- no ais warning -->
-        <div v-if="aiInstances.length == 0" class="mt-2 alert alert-warning" role="alert">
+        <Alert v-if="aiInstanceStore.aiInstances.length == 0" type="alert-warning" class="my-0">
           No AIs defined!
-        </div>
+        </Alert>
 
         <!-- actual tabs -->
-        <div class="btn-group">
-          <button v-for="aiInstance in aiInstances"
+        <div v-else class="btn-group">
+          <button v-for="aiInstance in aiInstanceStore.aiInstances"
                   :key="aiInstance.configuration.name"
                   class="btn" :class="{
                     'btn-secondary':         aiInstance === selectedAiInstance,
-                    'btn-secondary-outline': aiInstance !== selectedAiInstance
+                    'btn-outline-secondary': aiInstance !== selectedAiInstance
                   }"
                   @click="selectedAiInstance = aiInstance">
             {{ aiInstance.configuration.name }}
@@ -55,7 +45,7 @@ export default class AiInstanceTabs extends Vue {
       </div>
 
       <!-- reload -->
-      <button class="btn btn-secondary" @click="reload()">
+      <button class="btn btn-secondary" @click="aiInstanceStore.reload()">
         <i class="fa fa-refresh"/>
       </button>
     </div>

frontend/src/components/dashboard/Chat.vue

@@ -1,34 +1,34 @@
 <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";
+import {Prop} from 'vue-property-decorator';
+import {toast} from 'vue3-toastify';
+import {BSpinner} from 'bootstrap-vue-next';
+import {AiInstanceVmV1, ChatMessageVmV1} from 'ai-oas';
+import {ApiStore} from '@/stores/ApiStore';
+import Spinner from '@/components/Spinner.vue';
 
 @Options({
   name: 'Chat',
-  components: {BSpinner},
+  components: {
+    Spinner,
+  },
 })
 export default class Chat extends Vue {
   @Prop({required: true})
-  readonly aiInstance!: AiInstance;
-  readonly aiInstanceApi = new AiInstanceApi();
+  readonly aiInstance!: AiInstanceVmV1;
+  readonly apiStore = new ApiStore();
   user: string = 'alice';
   text: string = '';
   waiting: boolean = false;
-  message: ChatMessage | null = null;
+  message: ChatMessageVmV1 | null = null;
 
   async send(): Promise<void> {
     this.waiting = true;
     try {
-      this.message = {'role': 'user', 'name': this.user, 'content': this.text};
+      this.message = ChatMessageVmV1.fromJson({'role': 'user', 'name': this.user, 'content': this.text});
       this.text = '';
-      const response = await this.aiInstanceApi.chatText(this.aiInstance.configuration.name, this.message);
-      debugger;
+      await this.apiStore.aiApi.chatText(this.aiInstance.configuration.id, this.message);
       this.aiInstance.messages.push(this.message);
-      this.aiInstance.messages.push(response);
     } catch (e) {
       toast.error('Error while chatting: ' + JSON.stringify(e));
     } finally {
@@ -65,7 +65,7 @@ export default class Chat extends Vue {
           </div>
           <div v-if="waiting">
             <b>{{ message!.name }}</b>{{ ': ' + message!.content }}
-            <Spinner/>
+            <Spinner style="text-secondary" :size="1"/>
           </div>
         </div>
         <div class="input-group">

frontend/src/components/dashboard/Discord.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {Prop} from "vue-property-decorator";
-import type {AiInstance} from "@/data/models/AiInstance";
 import {getCurrentInstance} from "vue";
 import {toast} from "vue3-toastify";
-import AiInstanceApi from "@/data/api/AiInstanceApi";
+import {AiInstanceVmV1} from 'ai-oas';
+import {ApiStore} from '@/stores/ApiStore';
 
 @Options({
   name: 'Discord',
@@ -13,8 +13,8 @@ import AiInstanceApi from "@/data/api/AiInstanceApi";
 })
 export default class Discord extends Vue {
   @Prop({required: true})
-  readonly aiInstance!: AiInstance;
-  readonly aiInstanceApi = new AiInstanceApi();
+  readonly aiInstance!: AiInstanceVmV1;
+  readonly apiStore = new ApiStore();
 
   get online(): boolean {
     return this.aiInstance.discord.online;
@@ -23,22 +23,22 @@ export default class Discord extends Vue {
   set online(val: boolean) {
     const oldVal = this.online;
     this.aiInstance.discord.online = val;
-    this.aiInstanceApi.discordOnline(this.aiInstance.configuration.name, val).catch(e => {
+    this.apiStore.aiApi.discordOnline(this.aiInstance.configuration.id, val).catch(e => {
       toast.error('Error while set online status: ' + JSON.stringify(e));
       this.aiInstance.discord.online = oldVal;
     });
   }
 
-  get react_to_chat(): boolean {
-    return this.aiInstance.discord.react_to_chat;
+  get reactToChat(): boolean {
+    return this.aiInstance.discord.reactToChat;
   }
 
-  set react_to_chat(val: boolean) {
+  set reactToChat(val: boolean) {
     const oldVal = this.online;
-    this.aiInstance.discord.react_to_chat = val;
-    this.aiInstanceApi.discordReactToChat(this.aiInstance.configuration.name, val).catch(e => {
+    this.aiInstance.discord.reactToChat = val;
+    this.apiStore.aiApi.discordReactToChat(this.aiInstance.configuration.name, val).catch(e => {
       toast.error('Error while setting react_to_chat status: ' + JSON.stringify(e));
-      this.aiInstance.discord.react_to_chat = oldVal;
+      this.aiInstance.discord.reactToChat = oldVal;
     });
   }
 
@@ -59,7 +59,7 @@ export default class Discord extends Vue {
         <label class="form-check-label" :for="uid + '_online'">Online</label>
       </div>
       <div class="form-check form-switch">
-        <input class="form-check-input" type="checkbox" :id="uid + '_reactToChat'" v-model="react_to_chat">
+        <input class="form-check-input" type="checkbox" :id="uid + '_reactToChat'" v-model="reactToChat">
         <label class="form-check-label" :for="uid + '_reactToChat'">React to chat</label>
       </div>
     </div>