Accediendo a la Interfaz de Chat
Para abrir la interfaz de chat:- En la lista de conversas, haz clic en la conversa deseada
- La interfaz de chat será abierta en el panel derecho o central, dependiendo del diseño
Estructura de la Interfaz de Chat
La interfaz de chat ocupa el área central y derecha de la pantalla, mostrando los detalles de la conversa seleccionada en la lista lateral.
Barra de Navegación Superior
En la parte superior de la pantalla, hay una barra de navegación con:- Selector de Contexto: En la esquina superior izquierda, un selector mostrando “Evolution” con ícono de edificio y una flecha hacia abajo, indicando el contexto o ambiente actual
- Íconos de Control: En la esquina superior derecha:
- Ícono de sol/luna para alternar tema (claro/oscuro)
- Ícono de campana para notificaciones
- Avatar del usuario (ej: “MS”)
Lista de Conversas (Columna de la Izquierda)
La columna de la izquierda muestra todas las conversas disponibles:Barra de Búsqueda
- Campo de Búsqueda: En la parte superior de la columna, un campo con placeholder “Search conversations…” e ícono de lupa
- Funcionalidad: Permite buscar conversas por nombre del contacto o palabras clave
Contador y Filtros
Debajo de la barra de búsqueda:- Contador de Conversas: Muestra el número total de conversas encontradas (ej: “1 conversation”)
- Indicador de Filtros: Muestra cuántos filtros están activos (ej: “1 filter”)
- Botón Filters: Con ícono de embudo, permite abrir el modal de configuración de filtros
Conversa Seleccionada
La conversa actualmente seleccionada está destacada en un bloque verde oscuro:- Avatar: Foto de perfil del contacto (ej: “Davidson Gomes”)
- Ícono del Canal: Pequeño ícono superpuesto al avatar indicando el canal (ej: ícono azul de avión de papel para Telegram)
- Nombre y Horario: Nombre del contacto seguido de “Evolu…” e indicación de tiempo (ej: “Ahora”)
- Vista Previa de la Mensaje: Última mensaje intercambiada en la conversa (ej: “Hola”)
- Indicador de Estado: Pequeño ícono de reloj amarillo, sugiriendo estado específico de la conversa o horario comercial
Interfaz de Chat Activa (Columna Principal a la Derecha)
La columna principal a la derecha muestra la conversa seleccionada:Encabezado de la Conversa
- Informaciones del Contacto:
- Nombre del cliente y canal (ej: “Davidson Gomes - Evolution API”)
- Identificador interno (ej: “evoai-davidson”)
- Estado de la conversa (ej: “Status: Pendiente”)
- Botones de Acción: En la esquina superior derecha:
- Botón “Open Conversation” (verde con ícono de candado abierto)
- Ícono de tres puntos verticales (menú de opciones)
- Ícono “X” (cerrar conversa)
Historial de Mensajes
El área central muestra el flujo cronológico de las mensajes:- Marcador de Inicio: Una línea horizontal centrada con el texto “Start of conversation”
- Mensaje Recibida:
- Burbuja de chat negra/gris a la izquierda
- Texto de la mensaje (ej: “hola”)
- Timestamp debajo (ej: “19 ene a las 12:57”)
- Mensaje Enviada:
- Burbuja de chat verde agua a la derecha
- Identificación del agente arriba (ej: “Agent Davidson Gomes”)
- Texto de la mensaje dentro de la burbuja (ej: “Hola”)
- Timestamp con checkmark (ej: “19 ene a las 12:57 ✓”) indicando que la mensaje fue enviada/leída
Área de Composición de Mensajes (Inferior)
En la parte inferior de la interfaz:- Pestañas de Modo:
- Reply: Pestaña desactivada (gris claro) para respuestas públicas al cliente
- Private Note: Pestaña activada (verde) con ícono de candado para notas internas
- Texto informativo: “Visible only to agents” al lado de la pestaña Private Note
- Campo de Texto: Gran caja de texto rectangular con placeholder dinámico basado en la pestaña seleccionada
- Íconos de Acción (Inferior Izquierdo):
- Clip de papel (adjuntar archivos)
- Cara sonriente (emojis)
- ”@” (menciones)
- Documento/estrella (plantillas de respuesta rápida)
- Botones de Envío y Herramientas (Inferior Derecho):
- Micrófono (grabación de audio)
- Estrella/diamante brillante (AI Assistance)
- Avión de papel (enviar mensaje)
Área de Composición de Mensajes
El área de composición permite a los agentes responder y agregar notas internas. Esta sección es fundamental para la interacción con los clientes.
Pestañas de Modo de Composición
En la parte superior del área de composición, hay dos pestañas que determinan el tipo de mensaje:Reply (Responder)
- Función: Enviar mensajes públicas que serán visibles al cliente
- Cuándo usar: Para responder directamente al cliente
- Estilo: Pestaña destacada en verde cuando está activa
- Placeholder: “Type your message… (type / for canned responses)“
Private Note (Nota Privada)
- Función: Agregar notas internas visibles solo para otros agentes
- Cuándo usar: Para discusiones internas sobre la conversa, pasar informaciones o solicitar ayuda
- Visibilidad: Solo visible para agentes y colaboradores de la plataforma
- Estilo: Pestaña destacada en verde con ícono de candado cuando está activa
- Placeholder: “Type your private note (pending conversation)…”
- Texto informativo: “Visible only to agents” al lado de la pestaña
Campo de Texto
El área principal para escribir mensajes:- Tamaño: Gran caja de texto rectangular
- Placeholder dinámico:
- “Type your message… (type / for canned responses)” cuando la pestaña Reply está activa
- “Type your private note (pending conversation)…” cuando la pestaña Private Note está activa
- Atajo: Escribe ”/” para acceder a respuestas listas (canned responses)
Íconos de Acción y Formato
En la esquina inferior izquierda del campo de texto, hay varios íconos:-
Adjunto (Clip de Papel):
- Permite adjuntar archivos, imágenes o documentos
- Haz clic para seleccionar archivos de tu dispositivo
-
Emojis (Cara Sonriente):
- Abre el selector de emojis
- Agrega expresividad a las mensajes
-
Menciones (@):
- Permite mencionar otros agentes en notas privadas
- Útil para llamar atención de miembros específicos del equipo
-
Plantillas de Respuesta Rápida (Documento/Estrella):
- Accede a respuestas listas o plantillas de mensaje
- Escribe ”/” en el campo de texto para atajo rápido
Botones de Envío y Herramientas Adicionales
En la esquina inferior derecha del área de composición:-
Micrófono:
- Posible entrada de voz (si está disponible)
- Permite grabar mensajes de audio
-
AI Assistance (Estrella/Diamante):
- Ícono de diamante brillante o estrella estilizada
- Abre el modal de asistencia de inteligencia artificial
- Ve la sección “Asistencia de IA” abajo para más detalles
-
Enviar (Avión de Papel):
- Envía la mensaje escrita
- También puede ser activado presionando Enter
Acción “Open Conversation”
El botón Open Conversation es crucial para el flujo de trabajo de la plataforma.
Informaciones de la Conversa
En el encabezado, puedes visualizar:- Nombre del Contacto y Canal: “Davidson Gomes - Evolution API” (nombre del cliente y canal de comunicación)
- Identificador Interno: “evoai-davidson” (identificador único de la conversa)
- Estado de la Conversa: “Status: Pendiente” (estado actual de la conversa)
Botón “Open Conversation”
El botón está ubicado en la esquina superior derecha del encabezado:- Apariencia: Botón verde con texto “Open Conversation” e ícono de candado abierto
- Función: Altera el estado de la conversa de “Pendiente” a “Abierta”
- Cuándo usar: Cuando estás listo para iniciar la atención activa
- Importante: Este botón es crucial para el flujo de trabajo, señalando que un agente está activamente comprometido en la resolución
Otros Botones en el Encabezado
A la derecha del botón “Open Conversation”, encuentras:- Menú de Opciones: Ícono de tres puntos verticales para opciones adicionales relacionadas con la conversa
- Cerrar Conversa: Ícono “X” para cerrar la visualización de la conversa
Cuándo Usar
- Cuando una conversa está en el estado “Pendiente”
- Cuando estás listo para iniciar la atención activa
- Para señalar que un agente está comprometido en la resolución
Cómo Funciona
- Haz clic en el botón Open Conversation en el encabezado de la conversa
- El estado de la conversa cambia de “Pendiente” a “Abierta”
- Esto indica que la atención fue iniciada y un agente está activamente trabajando en la conversa
Importancia
- Organización: Ayuda a rastrear qué conversas están siendo atendidas
- Colaboración: Evita que múltiples agentes trabajen en la misma conversa simultáneamente
- Métricas: Contribuye a reportes y análisis de desempeño
Notas Privadas
La funcionalidad de Private Note permite que el equipo se comunique internamente dentro del contexto de una conversa específica.
Características
- Visibilidad: Solo visible para otros agentes y colaboradores
- Cliente no ve: Las notas privadas no aparecen para el cliente
- Contexto: Mantiene el contexto de la conversa específica
Cuándo Usar
- Discusiones internas: Para discutir estrategias de atención
- Pasar informaciones: Para dejar informaciones importantes para otros agentes
- Solicitar ayuda: Para pedir asistencia de otros miembros del equipo
- Anotaciones: Para registrar observaciones importantes sobre el cliente o situación
Cómo Usar
- Haz clic en la pestaña Private Note en el área de composición
- Escribe tu nota en el campo de texto
- Opcionalmente, usa ”@” para mencionar otros agentes
- Haz clic en el botón de envío o presiona Enter
Asistencia de IA (AI Assistance)
El Evo CRM ofrece herramientas de inteligencia artificial integradas para optimizar las interacciones con los clientes.
Accediendo a la Asistencia de IA
Para abrir el modal de AI Assistance:- En el área de composición de mensajes, localiza el ícono de AI Assistance (diamante brillante o estrella)
- Haz clic en el ícono
- El modal AI Assistance será mostrado en el lado izquierdo de la interfaz
Estructura del Modal
El modal presenta:- Título: “AI Assistance” con ícono de diamante brillante verde al lado
- Subtítulo: “Select an action to get started” (Selecciona una acción para comenzar)
- Botón de Cerrar: Ícono “X” en la esquina superior derecha
Acciones Disponibles
El modal presenta una serie de tarjetas clicables, cada una representando una funcionalidad de IA:Reply suggestion (Sugerencia de Respuesta)
- Ícono: Diamante brillante
- Descripción: “Generate reply suggestion” (Generar sugerencia de respuesta)
- Uso: Genera sugerencias de respuesta basadas en el contexto de la conversa
Summarize conversation (Resumir Conversa)
- Ícono: Letra ‘T’
- Descripción: “Create conversation summary” (Crear resumen de la conversa)
- Uso: Crea un resumen automático de toda la conversa
Rephrase (Reescribir)
- Ícono: Diamante brillante con flechas dobles
- Descripción: “Rewrite the message in a different way” (Reescribir la mensaje de una forma diferente)
- Uso: Reescribe una mensaje manteniendo el significado pero alterando la forma
Fix spelling (Corregir Ortografía)
- Ícono: Documento con marca de verificación
- Descripción: “Correct grammatical and spelling errors” (Corregir errores gramaticales y de ortografía)
- Uso: Corrige automáticamente errores de gramática y ortografía
Expand (Expandir)
- Ícono: Flechas opuestas expandiéndose
- Descripción: “Make the message more detailed” (Tornar la mensaje más detallada)
- Uso: Expande una mensaje corta en una versión más detallada
Shorten (Resumir)
- Ícono: Flechas opuestas contrayéndose
- Descripción: “Summarize the message” (Resumir la mensaje)
- Uso: Reduce una mensaje larga en una versión más concisa
Make friendly (Tornar Amigable)
- Ícono: Cara sonriendo
- Descripción: “Use a more casual and friendly tone” (Usar un tono más casual y amigable)
- Uso: Adapta el tono de la mensaje para ser más casual y amigable
Make formal (Tornar Formal)
- Ícono: Sombrero de graduación/corbata
- Descripción: “Use a more professional tone” (Usar un tono más profesional)
- Uso: Adapta el tono de la mensaje para ser más formal y profesional
Simplify (Simplificar)
- Ícono: Bombilla
- Descripción: “Make it easier to understand” (Tornar más fácil de entender)
- Uso: Simplifica el lenguaje de la mensaje para facilitar la comprensión
Analyze sentiment (Analizar Sentimiento)
- Ícono: Escudo o anillo protector
- Descripción: “Check if the message contains offensive or inappropriate content” (Verificar si la mensaje contiene contenido ofensivo o inapropiado)
- Uso: Analiza el sentimiento y detecta contenido potencialmente problemático
Cómo Usar las Acciones de IA
- Escribe o selecciona la mensaje que deseas procesar
- Haz clic en el ícono de AI Assistance
- Selecciona la acción deseada en el modal
- La IA procesará la mensaje conforme la acción seleccionada
- Revisa el resultado y usa según sea necesario
Consideraciones Finales
- La interfaz de chat está diseñada para una interacción eficiente y contextualizada
- El estado de la conversa puede ser fácilmente gestionado a través del encabezado usando el botón “Open Conversation”
- La distinción entre Reply y Private Note es fundamental para comunicación eficaz con clientes y colaboración interna del equipo
- Las informaciones del contacto y el identificador único ayudan a mantener el contexto de la conversa
- Las mensajes son sincronizadas en tiempo real entre todos los agentes
- Puedes ver cuando otros agentes están escribiendo
- El historial completo de la conversa es mantenido permanentemente
- Las herramientas de IA ayudan a optimizar la calidad y eficiencia de las respuestas
- Algunas funcionalidades pueden variar dependiendo del canal de comunicación
- Usa las notas privadas para mantener la comunicación interna organizada y contextualizada
Novedades de v1.0.0-rc3
- Teléfono del contacto visible en la lista y en el header. Antes era necesario abrir el detalle del contacto para ver el número. Ahora el número aparece tanto en el card de cada conversa en la lista como en el encabezado del chat (EVO-988).
- Reconexión activa de WebSocket. Cuando la conexión cae (red inestable, reinicio del servidor), el frontend intenta reconectar en background con backoff exponencial. Al restablecer, muestra toast de éxito. Antes la conexión caída quedaba silenciosa y era necesario refrescar la página (EVO-1085).
- Upload de archivos grandes. Límite elevado a 100MB. Los archivos grandes saltan el flujo fetch+blob y usan upload directo (EVO-1131).
- Scroll preservado en la paginación. Al paginar el historial, el scroll queda fijo en la posición en la que estabas — ya no salta al tope (EVO-1106).