feat: WhatsApp Nucleo con Nuxt 4 + Baileys v7
Some checks failed
Build and Deploy / build-and-deploy (push) Failing after 6m46s
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
This commit is contained in:
68
app/components/messages/ChatItem.vue
Normal file
68
app/components/messages/ChatItem.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center gap-3 p-3 cursor-pointer transition-colors hover:bg-[var(--wa-bg-light)]"
|
||||
:class="{ 'bg-[var(--wa-bg-light)]': active }"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<UAvatar
|
||||
:alt="chat.name"
|
||||
size="md"
|
||||
:src="chat.profilePicture"
|
||||
/>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="font-medium text-[var(--wa-text)] truncate">{{ chat.name }}</p>
|
||||
<span class="text-xs text-[var(--wa-text-muted)]">{{ formatTime(chat.lastMessageAt) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-[var(--wa-text-muted)] truncate">{{ chat.lastMessage }}</p>
|
||||
<span
|
||||
v-if="chat.unreadCount > 0"
|
||||
class="bg-[var(--wa-green-light)] text-white text-xs rounded-full px-2 py-0.5"
|
||||
>
|
||||
{{ chat.unreadCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Chat {
|
||||
id: string
|
||||
name: string
|
||||
jid: string
|
||||
profilePicture?: string
|
||||
lastMessage: string
|
||||
lastMessageAt: Date
|
||||
unreadCount: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
chat: Chat
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<{
|
||||
click: []
|
||||
}>()
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const d = new Date(date)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - d.getTime()
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (days === 0) {
|
||||
return d.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })
|
||||
} else if (days === 1) {
|
||||
return 'Ayer'
|
||||
} else if (days < 7) {
|
||||
return d.toLocaleDateString('es-AR', { weekday: 'short' })
|
||||
} else {
|
||||
return d.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user