artin/API-Explorer-II
1
0
Fork 0
mirror of https://github.com/OpenBankProject/API-Explorer-II.git synced 2026-02-06 10:47:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling changes

Browse Source
This commit is contained in:
Nemo Godebski-Pedersen 2025-02-27 16:19:03 +00:00
parent 276bb0eb6a
commit de87e35309
2 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ChatMessage.vue
View File

@ -84,11 +84,22 @@ export default {
padding: 10px;
margin: 10px 0 10px 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.message-container.user {
justify-content: flex-end;
width: auto;
max-width: 80%;
margin-left: auto;
margin-right: 10px;
margin-right: 0px;
border-radius: 10px 10px 0 10px;
}
.message-container.assistant {
border-radius: 10px 10px 10px 0px;
max-width: 80%;
margin-left: 0px;
margin-right: auto;
}
</style>

54
src/components/ChatWidget.vue
View File

@ -4,7 +4,7 @@ placeholder for Opey II Chat widget
<script lang="ts">
import { ref, reactive } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { Close, Top as ElTop } from '@element-plus/icons-vue'
import ChatMessage from './ChatMessage.vue';
import { v4 as uuidv4 } from 'uuid';
import { OpeyStreamContext, OpeyMessage, sendOpeyMessage } from '@/obp/opey-functions';
@ -13,6 +13,7 @@ export default {
setup () {
return {
Close,
ElTop
}
},
data() {
@ -106,14 +107,10 @@ export default {
</div>
</el-main>
<el-footer>
<el-form :inline="true" @submit.prevent>
<el-form-item label="Message">
<el-input v-model="input" placeholder="Type your message..." :disabled="opeyContext.status !== 'ready'" @keypress.enter="onSubmit" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Send</el-button>
</el-form-item>
</el-form>
<div class="user-input-container">
<input v-model="input" type="textarea" class="user-input" placeholder="Type your message..." :disabled="opeyContext.status !== 'ready'" @keypress.enter="onSubmit" clearable />
<el-button type="primary" @click="onSubmit" color="#253047" :icon="ElTop" circle></el-button>
</div>
</el-footer>
</el-container>
</div>
@ -149,8 +146,8 @@ export default {
height: 470px;
min-width: 390px;
min-height: 470px;
max-height: 80vh;
max-width: 80vw;
max-height: 90vh;
max-width: 90vw;
background-color: tomato;
resize: both;
overflow: auto;
@ -182,6 +179,10 @@ export default {
background-color: #253047;
}
.chat-container .el-footer {
height: 150px;
}
.chat-container .el-main {
background-color:#151d30;
color: #fff;
@ -196,4 +197,35 @@ export default {
padding-left: 10px;
padding-right: 10px;
}
.user-input-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #151d30;
border-radius: 10px;
padding: 10px;
height: 70%;
color: #fff;
}
.user-input {
border-radius: 5px;
font-size: 14px;
border: none;
background-color: #151d30;
resize: none;
height: 100%;
margin-bottom: 0px;
}
.user-input-container input:focus {
border: none;
outline: 0;
}
.user-input-container button {
margin-bottom: 0px;
}
</style>