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 for messages container

Browse Source
This commit is contained in:
Nemo Godebski-Pedersen 2025-02-28 15:19:14 +00:00
parent 9f4d695a92
commit 0c75b307db
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@ -38,6 +38,9 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElRow: typeof import('element-plus/es')['ElRow']
ElScollbar: typeof import('element-plus/es')['ElScollbar']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSrcollbar: typeof import('element-plus/es')['ElSrcollbar']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']
HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']

7
src/components/ChatMessage.vue
View File

@ -85,15 +85,17 @@ export default {
margin: 10px 0 10px 0;
display: flex;
flex-direction: column;
align-items: flex-end;
width: fit-content
}
.message-container.user {
width: auto;
max-width: 80%;
margin-left: auto;
margin-right: 0px;
border-radius: 10px 10px 0 10px;
align-items: flex-end;
flex-basis: content;
justify-content: flex-end;
}
.message-container.assistant {
@ -101,5 +103,6 @@ export default {
max-width: 80%;
margin-left: 0px;
margin-right: auto;
align-items: flex-start;
}
</style>

19
src/components/ChatWidget.vue
View File

@ -100,12 +100,13 @@ export default {
<el-container direction="vertical">
<el-header>
<img alt="Opey Logo" src="@/assets/opey-logo-inv.png">
Chat with Opey
<el-button type="danger" :icon="Close" @click="toggleChat" size="small" circle></el-button>
</el-header>
<el-main>
<div class="messages-container">
<ChatMessage v-for="message in opeyContext.messages" :key="message.id" :message="message" />
<el-scrollbar>
<ChatMessage v-for="message in opeyContext.messages" :key="message.id" :message="message" />
</el-scrollbar>
</div>
</el-main>
<el-footer>
@ -113,7 +114,6 @@ export default {
<div class="user-input">
<textarea v-model="input" type="textarea" placeholder="Type your message..." :disabled="opeyContext.status !== 'ready'" @keypress.enter="onSubmit" />
</div>
<el-button type="primary" @click="onSubmit" color="#253047" :icon="ElTop" circle></el-button>
</div>
</el-footer>
@ -147,8 +147,8 @@ export default {
position: fixed;
bottom: 20px;
right: 20px;
width: 390px;
height: 470px;
width: 650px;
height: 625px;
min-width: 390px;
min-height: 470px;
max-height: 90vh;
@ -161,6 +161,10 @@ export default {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}
.chat-header {
font-family: Roboto-Light, sans-serif;
}
.chat-container .el-header, .chat-container .el-footer, .chat-container .el-main {
display: flex;
justify-content: center;
@ -176,7 +180,8 @@ export default {
}
.chat-container .el-header img {
height: 50px;
height: 70%;
margin-left: -7px;
}
.chat-container .el-header, .chat-container .el-footer {
@ -201,6 +206,8 @@ export default {
.messages-container {
padding-left: 10px;
padding-right: 10px;
width: 100%;
height: 100%;
}
.user-input-container {