fix layout in dashboard

This commit is contained in:
wea_ondara
2024-05-28 18:31:41 +02:00
parent 688f0252a1
commit 5c43ce6604
6 changed files with 62 additions and 65 deletions

View File

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