83 lines
No EOL
1.6 KiB
Vue
83 lines
No EOL
1.6 KiB
Vue
<template>
|
|
|
|
<span :class="`context ${modifier}-context`">
|
|
|
|
<div v-if="context.img" class="avatar">
|
|
<img v-if="context.img === 'crimata'" :src="require('@/render/assets/crimataAvatar.svg')">
|
|
<div v-else>{{ context.img }}</div>
|
|
</div>
|
|
|
|
{{ context.text == false ? " " : context.text }}
|
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
<script lang='ts'>
|
|
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: "Context",
|
|
|
|
props: ["modifier", "context", "uid"],
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.context {
|
|
position: relative;
|
|
min-height: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "SF Compact Display";
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.ai-context {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.client-context {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.avatar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: white;
|
|
border-radius: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.playing {
|
|
animation-name: message-playback-anim;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes message-playback-anim {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4), 0 0 0 0.25em rgba(195, 195, 195, 0.15);
|
|
}
|
|
25% {
|
|
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15), 0 0 0 0.4em rgba(195, 195, 195, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55), 0 0 0 0.15em rgba(195, 195, 195, 0.05);
|
|
}
|
|
75% {
|
|
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25), 0 0 0 0.55em rgba(195, 195, 195, 0.45);
|
|
}
|
|
}
|
|
|
|
</style> |