64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
ref="messageRef"
|
|
class="flex w-full overflow-hidden"
|
|
:class="[{ 'flex-row-reverse': inversion }]"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center flex-shrink-0 h-50px rounded-full basis-50px mt-0px"
|
|
:class="[inversion ? 'ml-19px' : 'mr-19px']"
|
|
>
|
|
<AvatarComponent :inversion="inversion" />
|
|
</div>
|
|
<div
|
|
class="overflow-hidden text-22px"
|
|
:class="[inversion ? 'items-end' : 'items-start']"
|
|
>
|
|
<div
|
|
class="flex items-end gap-1"
|
|
:class="[inversion ? 'flex-row-reverse' : 'flex-row']"
|
|
>
|
|
<TextComponent
|
|
ref="textRef"
|
|
v-if="type==='text' || !inversion"
|
|
:inversion="inversion"
|
|
:text="text"
|
|
:loading="loading"
|
|
:as-raw-text="asRawText"
|
|
/>
|
|
<FileComponent :file="file" v-else/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import TextComponent from './text.vue'
|
|
import AvatarComponent from './avatar.vue'
|
|
import FileComponent from './file.vue'
|
|
import { ref } from 'vue'
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
file: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
inversion: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const asRawText = ref(props.inversion)
|
|
</script>
|