josedario87
26f755926b
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 51s
- Agregar boton debug en MessageBubble para ver objeto completo - Agregar boton debug en ChatItem para ver objeto completo - Crear useRealtime composable para conectar a SSE - Agregar indicador de estado SSE en mensajes - Agregar panel debug para ver ultimo evento SSE - Auto-recargar chats/mensajes cuando llegan nuevos mensajes
91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<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>
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-xs text-[var(--wa-text-muted)]">{{ formatTime(chat.lastMessageAt) }}</span>
|
|
<!-- Debug button -->
|
|
<button
|
|
@click.stop="showDebug = !showDebug"
|
|
class="text-xs text-[var(--wa-text-muted)] hover:text-[var(--wa-blue)] opacity-50 hover:opacity-100"
|
|
title="Debug info"
|
|
>
|
|
<UIcon name="i-lucide-bug" class="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Debug panel -->
|
|
<div
|
|
v-if="showDebug"
|
|
class="mx-2 mb-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono overflow-x-auto"
|
|
>
|
|
<pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(chat, null, 2) }}</pre>
|
|
</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 showDebug = ref(false)
|
|
|
|
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>
|