fix layout in dashboard
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user