99 lines
1.5 KiB
Vue
99 lines
1.5 KiB
Vue
<template>
|
|
<div :id="uid" :class="`${modifier}-message`">
|
|
|
|
<Bubble
|
|
v-for="(val, index) in content"
|
|
:modifier="modifier"
|
|
:text="val.text"
|
|
:child="calcChild(index, content.length)"
|
|
:seen="seen"
|
|
/>
|
|
|
|
<Context
|
|
:modifier="modifier"
|
|
:context="context"
|
|
:uid="uid"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang='ts'>
|
|
|
|
import { defineComponent, onMounted } from 'vue';
|
|
import Bubble from "@/render/components/bubble.vue";
|
|
import Context from "@/render/components/context.vue";
|
|
import { calcChild } from "@/render/components/controllers/helpers";
|
|
|
|
export default defineComponent({
|
|
name: "Message",
|
|
|
|
props: ["modifier", "content", "context", "seen", "uid"],
|
|
|
|
components: {
|
|
Bubble,
|
|
Context
|
|
},
|
|
|
|
setup() {
|
|
|
|
onMounted(() => {
|
|
|
|
const messengerEl = document.getElementById("messenger");
|
|
|
|
if (messengerEl)
|
|
messengerEl.dispatchEvent(new CustomEvent('adjust-scroll'))
|
|
|
|
});
|
|
|
|
return {
|
|
calcChild
|
|
};
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.message {
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 9px;
|
|
padding-bottom: 9px;
|
|
animation-name: message-init-anim;
|
|
animation-duration: 0.25s;
|
|
}
|
|
|
|
@keyframes message-init-anim {
|
|
from {
|
|
opacity: 0;
|
|
} to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.message:first-child {
|
|
margin-top: 55px;
|
|
}
|
|
|
|
.message:last-child {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.client-message {
|
|
@extend .message;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.ai-message {
|
|
@extend .message;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
</style>
|
|
|
|
|