josedario87
80d0042c7e
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m4s
- Agregar botón "Crear Webhook de Debug" en WebhookReceiverSection - Detectar si ya existe un webhook apuntando al receptor de debug - Permitir eliminar el webhook de debug - Incluir todos los eventos disponibles al crear el webhook - También incluye mejoras previas de manejo de media y mensajes
79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class="flex rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
|
|
:class="quoted.fromMe ? 'bg-[var(--wa-green-light)]/20' : 'bg-[var(--wa-bg-light)]'"
|
|
@click="$emit('click', quoted.id)"
|
|
>
|
|
<!-- Barra de color lateral -->
|
|
<div
|
|
class="w-1 flex-shrink-0"
|
|
:style="{ backgroundColor: barColor }"
|
|
/>
|
|
|
|
<div class="flex-1 px-2 py-1.5 min-w-0">
|
|
<!-- Nombre del autor -->
|
|
<p
|
|
class="text-xs font-medium truncate"
|
|
:style="{ color: barColor }"
|
|
>
|
|
{{ authorName }}
|
|
</p>
|
|
|
|
<!-- Contenido según tipo -->
|
|
<div class="flex items-center gap-1.5 mt-0.5">
|
|
<!-- Thumbnail si es media -->
|
|
<img
|
|
v-if="quoted.media?.thumbnail"
|
|
:src="`data:image/jpeg;base64,${quoted.media.thumbnail}`"
|
|
class="w-10 h-10 rounded object-cover flex-shrink-0"
|
|
/>
|
|
|
|
<!-- Icono de tipo si no es texto -->
|
|
<UIcon
|
|
v-if="quoted.type !== 'text' && !quoted.media?.thumbnail"
|
|
:name="typeIcon"
|
|
class="w-4 h-4 text-[var(--wa-text-muted)] flex-shrink-0"
|
|
/>
|
|
|
|
<!-- Texto o placeholder -->
|
|
<p class="text-sm text-[var(--wa-text-muted)] truncate">
|
|
{{ displayText }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { QuotedMessage } from '~/types/message'
|
|
import { getMessageTypePlaceholder, getMessageTypeIcon, stringToColor } from '~/types/message'
|
|
|
|
interface Props {
|
|
quoted: QuotedMessage
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
defineEmits<{
|
|
click: [id: string]
|
|
}>()
|
|
|
|
const authorName = computed(() => {
|
|
if (props.quoted.fromMe) return 'Tú'
|
|
return props.quoted.participantName || props.quoted.participant?.split('@')[0] || 'Desconocido'
|
|
})
|
|
|
|
const barColor = computed(() => {
|
|
if (props.quoted.fromMe) return 'var(--wa-green-dark)'
|
|
return stringToColor(props.quoted.participant || '')
|
|
})
|
|
|
|
const typeIcon = computed(() => getMessageTypeIcon(props.quoted.type))
|
|
|
|
const displayText = computed(() => {
|
|
if (props.quoted.content) return props.quoted.content
|
|
if (props.quoted.media?.filename) return props.quoted.media.filename
|
|
return getMessageTypePlaceholder(props.quoted.type)
|
|
})
|
|
</script>
|