You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
v-bind:class="[isUser ? 'mainUserMessage' : 'secondaryUserMessage']"
|
|
class="bubble bubble-bottom-left"
|
|
>
|
|
<p>{{ messageText }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
setup() {},
|
|
props: {
|
|
messageText: String,
|
|
isUser: Boolean,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mainUserMessage {
|
|
--chat-bg-color: #368dda;
|
|
--message-position: absolute;
|
|
--message-right: 0;
|
|
--message-border-right: 24px solid var(--chat-bg-color);
|
|
--message-border-left: 12px solid transparent;
|
|
--message-border-position-left: 70%;
|
|
}
|
|
.secondaryUserMessage {
|
|
--chat-bg-color: green;
|
|
--message-position: relative;
|
|
--message-right: none;
|
|
--message-border-right: 12px solid transparent;
|
|
--message-border-left: 24px solid var(--chat-bg-color);
|
|
--message-border-position-left: 12%;
|
|
}
|
|
|
|
.bubble {
|
|
position: var(--message-position);
|
|
right: var(--message-right);
|
|
font-family: sans-serif;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
width: 200px;
|
|
background: var(--chat-bg-color);
|
|
border-radius: 40px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: black;
|
|
}
|
|
|
|
.bubble-bottom-left:before {
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border-right: var(--message-border-right);
|
|
border-left: var(--message-border-left);
|
|
border-top: 12px solid var(--chat-bg-color) fff;
|
|
border-bottom: 25px solid transparent;
|
|
left: var(--message-border-position-left);
|
|
right: var(--message-border-position-right);
|
|
bottom: -24px;
|
|
}
|
|
</style>
|