josedario87
faedec47d7
Some checks failed
Build and Deploy / build-and-deploy (push) Failing after 6m46s
Reemplazo completo de Evolution API por implementación directa con Baileys. Características: - Dashboard completo con Nuxt UI v4 - Soporte para múltiples instancias de WhatsApp - Conexión via QR code o pairing code - Persistencia de mensajes en PostgreSQL - API REST para integraciones externas - Webhooks con firma HMAC - SSE para actualizaciones en tiempo real - Autenticación con Authentik
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
class="flex"
|
|
:class="message.fromMe ? 'justify-end' : 'justify-start'"
|
|
>
|
|
<div
|
|
class="max-w-[70%] rounded-lg px-3 py-2"
|
|
:class="message.fromMe ? 'bubble-out' : 'bubble-in'"
|
|
>
|
|
<!-- Message content -->
|
|
<p class="text-[var(--wa-text)] whitespace-pre-wrap break-words">{{ message.content }}</p>
|
|
|
|
<!-- Image -->
|
|
<img
|
|
v-if="message.mediaUrl && message.type === 'image'"
|
|
:src="message.mediaUrl"
|
|
class="rounded-lg max-w-full mt-2"
|
|
/>
|
|
|
|
<!-- Caption for media -->
|
|
<p
|
|
v-if="message.caption"
|
|
class="text-[var(--wa-text)] mt-2"
|
|
>
|
|
{{ message.caption }}
|
|
</p>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-end gap-1 mt-1">
|
|
<span class="text-xs text-[var(--wa-text-muted)]">
|
|
{{ formatTime(message.timestamp) }}
|
|
</span>
|
|
<UIcon
|
|
v-if="message.fromMe"
|
|
:name="statusIcon"
|
|
class="w-4 h-4"
|
|
:class="statusColor"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Message {
|
|
id: string
|
|
content: string
|
|
type: 'text' | 'image' | 'video' | 'document' | 'audio'
|
|
mediaUrl?: string
|
|
caption?: string
|
|
fromMe: boolean
|
|
timestamp: Date
|
|
status: 'pending' | 'sent' | 'delivered' | 'read' | 'failed'
|
|
}
|
|
|
|
interface Props {
|
|
message: Message
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const formatTime = (date: Date) => {
|
|
return new Date(date).toLocaleTimeString('es-AR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
const statusIcon = computed(() => {
|
|
const icons: Record<string, string> = {
|
|
pending: 'i-lucide-clock',
|
|
sent: 'i-lucide-check',
|
|
delivered: 'i-lucide-check-check',
|
|
read: 'i-lucide-check-check',
|
|
failed: 'i-lucide-alert-circle'
|
|
}
|
|
return icons[props.message.status] || 'i-lucide-check'
|
|
})
|
|
|
|
const statusColor = computed(() => {
|
|
if (props.message.status === 'read') return 'text-[var(--wa-blue)]'
|
|
if (props.message.status === 'failed') return 'text-red-500'
|
|
return 'text-[var(--wa-text-muted)]'
|
|
})
|
|
</script>
|