Panel de soporte
El panel de soporte es la interfaz principal del módulo de Chat en el frontend (/app/chat/). Funciona como hub central de operaciones, integrando chat, tickets, encuestas, usuarios, propiedades y analytics.
La navegación lateral organiza las herramientas por frecuencia de uso diario:
| # | ID | Label | Icono | Ruta |
|---|
| 1 | chats | Chats | MessageSquare | /app/chat |
| 2 | tickets | Tickets | Ticket | /app/chat/tickets |
| 3 | users | Usuarios | Users | /app/chat/users |
| 4 | properties | Propiedades | Building2 | /app/chat/properties |
| 5 | surveys | Encuestas | ClipboardList | /app/chat/surveys |
| 6 | analytics | Analítica | BarChart3 | /app/chat/analytics |
| 7 | news | Novedades | Megaphone | /app/chat/news |
| 8 | settings | Configuración | Settings | /app/chat/settings |
Vistas principales
Lista de canales
Ruta: /app/chat/
Panel lateral redimensionable (320px por defecto, rango 240-600px) que muestra la lista de canales con:
- Scroll virtualizado con paginación infinita (50 canales por página)
- Filtros: por propiedad, agente, tipo de canal
- Búsqueda de mensajes a través de canales
- Conteo de no leídos en tiempo real por canal
- Marcar como no leído: menú contextual (kebab, visible al pasar el cursor) en cada canal que lo devuelve al estado no leído (badge = 1), persistente tras refrescar y solo para la agente que lo marca. Usa
markUnread nativo de Stream vía PATCH /chat/channels/:channelId/mark-unread. Solo disponible para agentes con identidad de chat propia (no para viewers, que comparten la identidad vivla-admin).
- Pestañas para diferentes vistas de canales
- Asistente de creación de canales (wizard multi-paso)
Conversación
Ruta: /app/chat/$channelId
Vista principal de la conversación con:
- Lista de mensajes con scroll virtualizado
- Búsqueda en conversación con navegación entre resultados
- Sidebar de respuestas rápidas (quick replies)
- Modo de selección de mensajes para crear tickets o agregar a tickets existentes
- Sidebar lateral con metadata del canal (propiedad, booking, información del huésped)
- En canales asociados a una propiedad o reserva se muestra esa casa con el desplegable Información de la casa (WiFi, acceso, alarma, parking).
- En canales sin propiedad propia (novedades, feedback, incidencias), si el usuario principal tiene casas se listan todas bajo Propiedades de nombre, cada una con su mismo desplegable de información, para conservar contexto en cualquier canal.
- Seguimiento de estado de lectura, con acción Marcar como no leído en la cabecera (junto a Archivar): deselecciona el canal para que
stream-chat-react no lo vuelva a marcar leído y el badge reaparezca en la lista.
- Salto a mensaje (jump-to-message)
Tickets
Ruta: /app/chat/tickets/
Panel de administración de tickets con:
- Filtros por estado, prioridad, propiedad y agente
- Paginación (100 tickets por página)
- Búsqueda rápida por ID o título
- Badges de prioridad y estado
- Vista detallada por ticket (
/app/chat/tickets/$ticketId) con comentarios
Usuarios
Ruta: /app/chat/users/
Vista de usuarios promovida desde Settings al sidebar principal. Incluye lista de usuarios con vista detallada por usuario (/app/chat/users/$userId).
Propiedades
Ruta: /app/chat/properties/
Vista de propiedades promovida desde Settings al sidebar principal. Muestra un grid de tarjetas con imagen de portada, nombre, ubicación, selector de agente asignado y botón “Ver NPS” que navega a /app/chat/surveys/results?property={id}. Soporta modo batch para asignaciones masivas.
Encuestas
Ruta: /app/chat/surveys/
Hub de encuestas integrado en el panel de soporte. Incluye 5 sub-secciones con navegación propia:
| # | ID | Label | Icono | Ruta | Exact |
|---|
| 1 | activity | Actividad | Activity | /app/chat/surveys | true |
| 2 | admin | Administrar | PenTool | /app/chat/surveys/admin | false |
| 3 | results | Resultados | BarChart3 | /app/chat/surveys/results | false |
| 4 | action-plans | Planes de Acción | FileCheck | /app/chat/surveys/action-plans | false |
| 5 | rewards | Rewards | Trophy | /app/chat/surveys/rewards | false |
Actividad
Administrar
Resultados
Planes de Acción
Rewards
/app/chat/surveysTabla de respuestas con filtros (búsqueda, tipo encuesta, destino, rango de fechas con DateRangePicker), quick actions (generador inline de deep links, resumen de rewards) y exportación CSV.
/app/chat/surveys/adminTipos de encuesta agrupados por scope (Casa / Reserva) en layout de 2 columnas. Cada tipo muestra sus versiones con acciones: publicar, duplicar, editar. El builder (/app/chat/surveys/admin/$surveyTypeId/edit/$surveyId) permite crear y editar encuestas con 5 tipos de pregunta, condicionales múltiples, i18n (ES/EN) y preview en vivo.
/app/chat/surveys/resultsGrid de 2 columnas con una tarjeta por tipo de encuesta. Incluye DateRangePicker (default 30 días), filtro por propiedad, resultados agregados del Home Review (responses, promedio, peor espacio, ratings por espacio, últimas 10 respuestas) y vista legacy de resultados desde Firestore.
/app/chat/surveys/action-plansLista de planes de acción con vista de detalle: stats grid, action items, y botones de aprobar/enviar. Los planes se generan automáticamente por consenso (75% participación + 75% acuerdo).
/app/chat/surveys/rewardsGráfico de barras de usuarios por nivel de reward (1-5) y configuración del premio de nivel 5.
Configuración (Settings)
Todas las rutas bajo /app/chat/settings/. Reducido a 4 secciones (Usuarios y Propiedades promovidos al sidebar principal):
Agentes
Canales
Turnos
Sincronización
/app/chat/settings/agentsGestión de agentes de soporte: crear, editar, quitar y asignar a canales.
- Crear / convertir: el modal permite crear un agente nuevo (con invitación por email) o convertir a un usuario existente. El buscador del picker consulta todos los usuarios por nombre o email (con debounce), sin filtrar por tipo, de modo que también aparece el personal de Vivla que solo tiene usuario
client (creado por el login de la app). Las opciones de tipo client se marcan con un badge Cliente. Solo se ofrecen los roles Moderador y Administrador: el rol viewer se retiró de esta superficie porque el CHECK de la tabla users solo admite admin/moderator/user y guardarlo fallaba.
- Quitar agente: baja el rol de la persona a
user, así deja de ser asignable a canales y tickets y pierde los permisos de agente CX. Conserva su usuario y su historial de chat (no se borra el usuario en Stream ni Auth0) y se le puede volver a convertir en agente más adelante. No puedes quitarte a ti mismo, ni quitar al último administrador de chat. El diálogo incluye “Quitar también de todos los canales” (activado por defecto): al confirmarlo se le saca como moderador de todos los canales no archivados que atendía (DELETE /chat/users/agents/:id?removeFromChannels=true). Los canales donde es el agente activo o por defecto se respetan y se listan en el aviso: reasígnalos primero y vuelve a quitarlo. El toast de éxito informa de cuántos canales se limpiaron y cuántos se saltaron.
/app/chat/settings/channelsTres pestañas:
- Todos los canales: búsqueda, filtros (tipo/agente/propiedad/ubicación), operaciones batch (cambiar agente activo/default, agregar moderadores, eliminar)
- Bookings: gestión de reservas con vista de calendario
- Tipos: (solo admin) crear y editar tipos de canal
/app/chat/settings/shiftsProgramación de turnos de agentes de soporte.
/app/chat/settings/sync (solo admin)Visualización de jobs de sincronización, logs y trigger manual.
News (Notificaciones embebidas)
Sección de broadcast y notificaciones integrada en el módulo de chat, bajo /app/chat/news/:
| Ruta | Descripción |
|---|
/app/chat/news/ | Hub principal de noticias |
/app/chat/news/dashboard | Dashboard de analytics |
/app/chat/news/templates | Templates de mensajes |
/app/chat/news/send | Envío manual de notificaciones |
/app/chat/news/history | Historial de mensajes enviados |
/app/chat/news/deep-links | Configuración de deep links |
/app/chat/news/automations | Reglas de automatización |
/app/chat/news/settings | Configuración general de news |
Analytics
Ruta: /app/chat/analytics
Métricas de uso del chat: actividad por canal, por usuario y estadísticas generales.
El acceso a las secciones está controlado por el sistema de permisos. Los agentes con rol editor en tool-chat pueden gestionar canales, tickets y encuestas. Las operaciones de configuración avanzada (tipos de canal, sync) requieren rol admin.
