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.
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup lang='ts'>
|
|
import AvatarComponent from './Avatar.vue'
|
|
import TextComponent from './Text.vue'
|
|
import { SvgIcon } from '@/components/common'
|
|
|
|
interface Props {
|
|
dateTime?: string
|
|
text?: string
|
|
inversion?: boolean
|
|
error?: boolean
|
|
loading?: boolean
|
|
}
|
|
|
|
interface Emit {
|
|
(ev: 'regenerate'): void
|
|
(ev: 'delete'): void
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const emit = defineEmits<Emit>()
|
|
|
|
function handleDelete() {
|
|
emit('delete')
|
|
}
|
|
|
|
function handleRegenerate() {
|
|
emit('regenerate')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
|
|
<div
|
|
class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
|
|
:class="[inversion ? 'ml-2' : 'mr-2']"
|
|
>
|
|
<AvatarComponent :image="inversion" />
|
|
</div>
|
|
<div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
|
|
<p class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
|
|
{{ dateTime }}
|
|
</p>
|
|
<div
|
|
class="flex items-end gap-2 mt-2"
|
|
:class="[inversion ? 'flex-row-reverse' : 'flex-row']"
|
|
>
|
|
<TextComponent
|
|
:inversion="inversion"
|
|
:error="error"
|
|
:text="text"
|
|
:loading="loading"
|
|
/>
|
|
<div class="flex flex-col">
|
|
<button
|
|
v-if="!inversion"
|
|
class="mb-2 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
|
|
@click="handleRegenerate"
|
|
>
|
|
<SvgIcon icon="ri:restart-line" />
|
|
</button>
|
|
<button
|
|
class="mb-1 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
|
|
@click="handleDelete"
|
|
>
|
|
<SvgIcon icon="ri:delete-bin-6-line" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|