adjust frontend to new backend

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">