Lizandro GuarnizoandClaude Opus 5
be01d95631
Dos mitades de la misma experiencia: el primer día y todos los días después. El primer día. Un agente recién creado mostraba tres avisos ámbar sueltos —"no atiende", "no sabe nada"— sin ningún orden: el dueño sabía que faltaban cosas pero no cuál iba primero. Ahora hay una guía de tres pasos (contale de tu negocio → hacele una pregunta → ponelo a atender) donde solo el siguiente paso pendiente se resalta, porque una guía donde todo grita a la vez no guía nada. Mientras falte algo, la guía reemplaza al estado — una sola voz por etapa; con los pasos hechos desaparece para siempre y el estado operativo toma su lugar. Todos los días. La bandeja de conversaciones mostraba el último mensaje de cada sesión —casi siempre la respuesta del bot, "¡Hola! ¿En qué te ayudo?" cincuenta veces— y el session_id crudo (tg:8812). Ahora cada conversación muestra lo que el visitante preguntó al abrir, que es el dato que le importa al dueño: qué le preguntan de verdad a su negocio. Con canal deducido del prefijo de la sesión (WhatsApp, Telegram, Tu web, Prueba), cantidad de mensajes, y fecha relativa. Las pruebas propias se separan detrás de un filtro: mezcladas inflan la lista y el dueño no distingue cuáles son clientes reales. El contador del estado cuenta solo las reales, por lo mismo — si arriba dice 4 y la lista muestra 3, el número parece roto. El hilo muestra la hora de cada mensaje, y el backend gana una consulta que agrupa por sesión con el primer mensaje del visitante en vez de mandar filas crudas; la vieja quedó sin usos y se fue. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
111 lines
4.1 KiB
Vue
111 lines
4.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import UiIcono from '../../components/ui/UiIcono.vue'
|
|
|
|
// Responde "¿está bien mi asistente?" sin hacer un solo clic.
|
|
//
|
|
// Antes había que entrar pestaña por pestaña para saberlo: si estaba atendiendo
|
|
// en algún lado, si sabía algo, si alguien le había escrito. Tres datos que el
|
|
// dueño quiere de un vistazo y que estaban repartidos en tres pantallas.
|
|
const props = defineProps({
|
|
canales: { type: Array, default: () => [] },
|
|
documentos: { type: Array, default: () => [] },
|
|
sesiones: { type: Array, default: () => [] },
|
|
eventos: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const emit = defineEmits(['ir'])
|
|
|
|
const canalesActivos = computed(() => props.canales.filter((c) => c.activo))
|
|
|
|
// Los tipos vienen en minúscula del backend; "Atendiendo en whatsapp" se lee
|
|
// como un error de tipeo.
|
|
const NOMBRES_CANAL = { whatsapp: 'WhatsApp', telegram: 'Telegram', web: 'tu web' }
|
|
const nombreCanal = (t) => NOMBRES_CANAL[t] || t
|
|
|
|
const fuentesListas = computed(() => props.documentos.filter((d) => d.estado === 'listo'))
|
|
|
|
// Dos meses es cuando una fuente empieza a ser sospechosa de estar vieja: es el
|
|
// mismo corte que usa la lista de conocimiento, para que no digan cosas
|
|
// distintas.
|
|
const fuentesViejas = computed(() =>
|
|
fuentesListas.value.filter(
|
|
(d) => d.procesado_at && Date.now() - new Date(d.procesado_at) > 60 * 86400000,
|
|
),
|
|
)
|
|
|
|
const problemas = computed(() => props.eventos.filter((e) => e.nivel === 'error').length)
|
|
|
|
// Solo conversaciones de clientes: la bandeja separa las pruebas propias, y si
|
|
// este número las incluyera diría una cosa distinta que la lista de al lado.
|
|
const reales = computed(() =>
|
|
props.sesiones.filter((s) => !String(s.session_id).startsWith('staff-preview')),
|
|
)
|
|
|
|
// Cada señal dice qué pasa y, cuando algo anda mal, a dónde ir a arreglarlo.
|
|
const señales = computed(() => [
|
|
{
|
|
clave: 'canales',
|
|
icono: 'mensaje',
|
|
bien: canalesActivos.value.length > 0,
|
|
texto: canalesActivos.value.length
|
|
? `Atendiendo en ${canalesActivos.value.map((c) => nombreCanal(c.tipo)).join(' y ')}`
|
|
: 'No está atendiendo en ningún lado',
|
|
destino: 'canales',
|
|
},
|
|
{
|
|
clave: 'conocimiento',
|
|
icono: 'escribir',
|
|
bien: fuentesListas.value.length > 0 && fuentesViejas.value.length === 0,
|
|
texto: !fuentesListas.value.length
|
|
? 'Todavía no sabe nada de tu negocio'
|
|
: fuentesViejas.value.length
|
|
? `${fuentesViejas.value.length} de ${fuentesListas.value.length} fuentes están viejas`
|
|
: `Sabe de ${fuentesListas.value.length} ${fuentesListas.value.length === 1 ? 'cosa' : 'cosas'}`,
|
|
destino: 'conocimiento',
|
|
},
|
|
{
|
|
clave: 'conversaciones',
|
|
icono: 'grafico',
|
|
// Que nadie haya escrito todavía no es un problema: es un dato.
|
|
bien: true,
|
|
neutro: reales.value.length === 0,
|
|
texto: reales.value.length
|
|
? `${reales.value.length} ${reales.value.length === 1 ? 'conversación' : 'conversaciones'}`
|
|
: 'Nadie escribió todavía',
|
|
destino: 'conversaciones',
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card p-1 mb-6 flex flex-wrap">
|
|
<button
|
|
v-for="s in señales"
|
|
:key="s.clave"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-elevado transition-colors text-left"
|
|
@click="emit('ir', s.destino)"
|
|
>
|
|
<UiIcono
|
|
:nombre="s.bien ? s.icono : 'alerta'"
|
|
:tam="16"
|
|
:class="s.neutro ? 'text-tenue' : s.bien ? 'text-brand' : 'text-amber-600 dark:text-amber-400'"
|
|
/>
|
|
<span :class="s.neutro ? 'text-tenue' : s.bien ? 'text-texto' : 'text-amber-700 dark:text-amber-400 font-medium'">
|
|
{{ s.texto }}
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
v-if="problemas"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-elevado transition-colors ml-auto"
|
|
@click="emit('ir', 'auditoria')"
|
|
>
|
|
<UiIcono nombre="alerta" :tam="16" class="text-red-600 dark:text-red-400" />
|
|
<span class="text-red-700 dark:text-red-400 font-medium">
|
|
{{ problemas }} {{ problemas === 1 ? 'problema' : 'problemas' }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|