fix layout in dashboard

frontend/src/App.vue

@@ -23,14 +23,18 @@ export default class App extends Vue {
 </script>
 
 <template>
+  <LocaleSaver/>
+  <DocumentLocaleSetter/>
   <div class="h-100 w-100 overflow-hidden">
-    <LocaleSaver/>
-    <DocumentLocaleSetter/>
-    <SideBar ref="sidebar" class="h-100 w-100 overflow-hidden" :toggled="sidebarToggled"
-             @close="sidebarToggled=false"/>
-    <div class="d-flex flex-column h-100 w-100 overflow-hidden">
-      <NavBar @toggleSidebar="sidebarToggled = !sidebarToggled"/>
-      <RouterView class="flex-grow-1"/>
+    <div class="h-100 w-100 d-flex flex-row">
+      <SideBar ref="sidebar" class="overflow-hidden" style="height: 100vh" :toggled="sidebarToggled"
+               @close="sidebarToggled=false"/>
+      <div class="flex-grow-1 overflow-hidden">
+        <div class="d-flex flex-column w-100 h-100">
+          <NavBar class="flex-grow-0" @toggleSidebar="sidebarToggled = !sidebarToggled"></NavBar>
+          <RouterView class="flex-grow-1 overflow-hidden"/>
+        </div>
+      </div>
     </div>
   </div>
 </template>

frontend/src/components/dashboard/AiInstanceComponent.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {Prop} from "vue-property-decorator";
-import type {AiInstance} from "@/data/models/AiInstance";
-import Discord from "@/components/dashboard/Discord.vue";
-import Chat from "@/components/dashboard/Chat.vue";
+import {Prop} from 'vue-property-decorator';
+import {AiInstanceVmV1} from 'ai-oas';
+import Discord from '@/components/dashboard/Discord.vue';
+import Chat from '@/components/dashboard/Chat.vue';
 
 @Options({
   name: 'AiInstanceComponent',
@@ -11,16 +11,20 @@ import Chat from "@/components/dashboard/Chat.vue";
 })
 export default class AiInstanceComponent extends Vue {
   @Prop({required: true})
-  readonly aiInstance!: AiInstance;
+  readonly aiInstance!: AiInstanceVmV1;
 }
 </script>
 
 <template>
-  <div>
+  <div class="d-flex flex-column overflow-y-hidden">
     <h3>Name: {{ aiInstance.configuration.name }}</h3>
-    <div class="d-flex flex-row">
-      <Chat class="flex-grow-1 me-2" style="width: 66.66%" :ai-instance="aiInstance"/>
-      <Discord class="flex-grow-1" style="width: 33.33%" :ai-instance="aiInstance"/>
+    <div class="flex-grow-1 d-flex flex-row overflow-y-hidden">
+      <div class="flex-grow-1 me-2 d-flex flex-column overflow-y-hidden" style="width: 66.66%">
+        <Chat :ai-instance="aiInstance"/>
+      </div>
+      <div class="flex-grow-1" style="width: 33.33%">
+        <Discord :ai-instance="aiInstance"/>
+      </div>
     </div>
   </div>
 </template>

frontend/src/components/dashboard/AiInstanceTabs.vue

@@ -28,7 +28,7 @@ export default class AiInstanceTabs extends Vue {
 </script>
 
 <template>
-  <div class="d-flex flex-column">
+  <div class="d-flex flex-column overflow-y-hidden">
     <!-- tabs -->
     <div class="d-flex flex-row">
       <div class="flex-grow-1 me-2">

frontend/src/components/dashboard/Chat.vue

@@ -1,8 +1,34 @@
+<template>
+  <div class="card overflow-y-hidden">
+    <div class="card-header">
+      <h5 class="card-title mb-0">Chat</h5>
+    </div>
+    <div class="card-body overflow-y-auto">
+      <div class="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">
+          <Spinner :style="'text-secondary'" :size="1"/>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer">
+      <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>
+</template>
+
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 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';
@@ -38,41 +64,3 @@ export default class Chat extends Vue {
   }
 }
 </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 :style="'text-secondary'" :size="1"/>
-          </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>

frontend/src/components/dashboard/DashBoard.vue

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

frontend/src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import DashBoard from '../components/dashboard/DashBoard.vue'
+import DashBoard from '../components/dashboard/DashBoard.vue';
 
 @Options({
   name: 'HomeView',
@@ -11,5 +11,5 @@ export default class HomeView extends Vue {
 </script>
 
 <template>
-  <DashBoard />
+  <DashBoard class="p-2"/>
 </template>