​

Interfaz de chat

La Interfaz de chat es donde usted ve e interactúa directamente con las conversaciones, ve el historial de mensajes, envía respuestas y realiza acciones específicas para cada interacción con el cliente. Esta sección detalla los componentes de la interfaz de chat, incluido el encabezado de la conversación, el historial de mensajes, el área de redacción de mensajes y las herramientas de asistencia de IA disponibles.

---

​

Accediendo a la interfaz de chat

Para abrir la interfaz de chat:

1. En la lista de conversaciones, haga clic en la conversación deseada.
2. La interfaz de chat se abrirá en el panel derecho o central, según el diseño.

---

​

Estructura de la interfaz de chat

La interfaz de chat ocupa el área central y derecha de la pantalla, mostrando detalles de la conversación seleccionada de la lista de la barra lateral. La interfaz principal de conversaciones presenta una estructura dividida en tres columnas principales:

​

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 que muestra “WTO” con un ícono de edificio y una flecha hacia abajo, que indica el contexto o entorno actual.
• Iconos de control: En la esquina superior derecha:
• Icono de sol/luna para alternar el tema (claro/oscuro)
• Ícono de campana para notificaciones
• Avatar de usuario (por ejemplo, “MS”)

​

Lista de conversaciones (columna izquierda)

La columna de la izquierda muestra todas las conversaciones disponibles:

​

Barra de búsqueda

• Campo de búsqueda: En la parte superior de la columna, un campo con un marcador de posición “Buscar conversaciones…” y un ícono de lupa.
• Funcionalidad: Permite buscar conversaciones por nombre de contacto o palabras clave

​

Contador y filtros

Debajo de la barra de búsqueda:

• Contador de conversaciones: Muestra el número total de conversaciones encontradas (por ejemplo, “1 conversación”)
• Indicador de filtro: Muestra cuántos filtros están activos (por ejemplo, “1 filtro”)
• Botón Filtros: Con icono de embudo, permite abrir el modal de configuración de filtros

​

Conversación seleccionada

La conversación actualmente seleccionada está resaltada en un bloque verde oscuro:

• Avatar: Foto de perfil de contacto (p. ej., “Davidson Gomes”)
• Icono de canal: Pequeño ícono superpuesto en el avatar que indica el canal (por ejemplo, ícono de avión de papel azul para Telegram)
• Nombre y hora: Nombre del contacto seguido de “Evolu…” e indicación de hora (p. ej., “Ahora”)
• Vista previa del mensaje: Último mensaje intercambiado en la conversación (por ejemplo, “Ola”)
• Indicador de estado: Pequeño icono de reloj amarillo que sugiere un estado de conversación específico o un horario comercial

​

Interfaz de chat activo (columna principal a la derecha)

La columna principal de la derecha muestra la conversación seleccionada:

​

Encabezado de conversación

• Información de contacto:
• Nombre y canal del cliente (por ejemplo, “Davidson Gomes - WTO API”)
• Identificador interno (por ejemplo, “wtoai-davidson”)
• Estado de la conversación (por ejemplo, “Estado: Pendiente”)
• Botones de acción: En la esquina superior derecha:
• Botón “Abrir conversación” (verde con icono de candado abierto)
• Icono de tres puntos verticales (menú de opciones)
• Icono “X” (cerrar conversación)

​

Historial de mensajes

El área central muestra el flujo cronológico de mensajes:

• Marcador de inicio: Una línea horizontal centrada con el texto “Inicio de conversación”
• Mensaje recibido:
• Burbuja de chat negra/gris a la izquierda
• Texto del mensaje (por ejemplo, “ola”)
• Marca de tiempo a continuación (por ejemplo, “19 de enero a las 12:57”)
• Mensaje enviado:
• Burbuja de chat verde azulado a la derecha
• Identificación del agente arriba (por ejemplo, “Agente Davidson Gomes”)
• Texto del mensaje dentro de la burbuja (por ejemplo, “Ola”)
• Marca de tiempo con marca de verificación (por ejemplo, “19 de enero a las 12:57 ✓”) que indica que el mensaje fue enviado/leído

​

Área de composición de mensajes (abajo)

En la parte inferior de la interfaz:

• Pestañas de modo:
• Responder: Pestaña desactivada (gris claro) para respuestas públicas al cliente
• Nota privada: Pestaña activada (verde) con icono de candado para notas internas
• Texto informativo: “Visible sólo para agentes” junto a la pestaña Nota privada
• Campo de texto: Cuadro de texto rectangular grande con marcador de posición dinámico basado en la pestaña seleccionada
• Iconos de acción (abajo a la izquierda):
• Clip de papel (adjuntar archivos)
• Cara sonriente (emojis)
• ”@” (menciones)
• Documento/estrella (plantillas de respuesta rápida)
• Botones Enviar y Herramientas (abajo a la derecha):
• Micrófono (grabación de audio)
• Estrella/diamante brillante (Asistencia AI)
• 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 el cliente.

​

Pestañas del modo de composición

En la parte superior del área de redacción, hay dos pestañas que determinan el tipo de mensaje:

​

Responder

• Función: Enviar mensajes públicos que serán visibles para el cliente.
• Cuándo utilizar: Para responder directamente al cliente
• Estilo: Pestaña resaltada en verde cuando está activa
• Marcador de posición: “Escriba su mensaje… (escriba / para respuestas predeterminadas)“

​

Nota privada

• Función: Agregar notas internas visibles solo para otros agentes
• Cuándo usarlo: Para debates internos sobre la conversación, transmitir información o solicitar ayuda.
• Visibilidad: Solo visible para agentes y colaboradores de la plataforma
• Estilo: Pestaña resaltada en verde con icono de candado cuando está activa
• Marcador de posición: “Escribe tu nota privada (conversación pendiente)…”
• Texto informativo: “Visible sólo para agentes” junto a la pestaña

​

Campo de texto

El área principal para escribir mensajes:

• Tamaño: Cuadro de texto rectangular grande
• Marcador de posición dinámico:
• “Escriba su mensaje… (escriba / para respuestas predeterminadas)” cuando la pestaña Responder esté activa
• “Escribe tu nota privada (conversación pendiente)…” cuando la pestaña Nota privada esté activa
• Atajo: Escriba ”/” para acceder a las respuestas predeterminadas

​

Iconos de acción y formato

En la esquina inferior izquierda del campo de texto, hay varios iconos:

• Adjunto (clip):
• Permite adjuntar archivos, imágenes o documentos
• Haga clic para seleccionar archivos de su dispositivo
• Emojis (Cara Sonriente):
• Abre el selector de emojis.
• Agrega expresividad a los mensajes.
• Menciones (@): *Permite mencionar a otros agentes en notas privadas
• Útil para llamar la atención de miembros específicos del equipo.
• Plantillas de respuesta rápida (Documento/Estrella):
• Accede a respuestas predefinidas o plantillas de mensajes.
• Escriba ”/” en el campo de texto para obtener un acceso directo 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
• Asistencia de IA (Estrella/Diamante):
• Diamante brillante o ícono de estrella estilizada
• Abre el modal de asistencia de inteligencia artificial.
• Consulte la sección “Asistencia de IA” a continuación para obtener más detalles.
• Enviar (Avión de papel): *Envía el mensaje escrito
• También se puede activar presionando Enter

---

​

Acción “Abrir conversación”

El botón Abrir conversación es crucial para el flujo de trabajo de la plataforma. El encabezado de la interfaz de chat muestra el botón Abrir conversación en la esquina superior derecha, resaltado en verde con un icono de candado abierto.

​

Información de conversación

En el encabezado, puedes ver:

• Nombre de Contacto y Canal: “Davidson Gomes - WTO API” (nombre del cliente y canal de comunicación)
• Identificador interno: “wtoai-davidson” (identificador único de conversación)
• Estado de la conversación: “Estado: Pendiente” (estado actual de la conversación)

​

Botón “Abrir conversación”

El botón está ubicado en la esquina superior derecha del encabezado:

• Apariencia: Botón verde con texto “Abrir conversación” e ícono de candado abierto
• Función: Cambia el estado de la conversación de “Pendiente” a “Abierta”
• Cuándo usarlo: Cuando esté listo para iniciar el soporte activo
• Importante: Este botón es crucial para el flujo de trabajo, ya que indica que un agente participa activamente en la resolución.

​

Otros botones en el encabezado

A la derecha del botón “Abrir conversación”, encontrará:

• Menú de opciones: Ícono de tres puntos verticales para opciones adicionales relacionadas con la conversación
• Cerrar conversación: Icono “X” para cerrar la vista de conversación

​

Cuándo utilizar

• Cuando una conversación está en estado “Pendiente”
• Cuando esté listo para iniciar el soporte activo
• Para señalar que un agente está involucrado en la resolución

​

Cómo funciona

1. Haga clic en el botón Abrir conversación en el encabezado de la conversación.
2. El estado de la conversación cambia de “Pendiente” a “Abierto”
3. Esto indica que se ha iniciado el soporte y que un agente está trabajando activamente en la conversación.

​

Importancia

• Organización: Ayuda a realizar un seguimiento de las conversaciones que se están manejando.
• Colaboración: Evita que varios agentes trabajen en la misma conversación simultáneamente
• Métricas: Contribuye a los informes y análisis de rendimiento.

---

​

Notas privadas

La funcionalidad Nota privada permite al equipo comunicarse internamente dentro del contexto de una conversación específica.

​

Características

• Visibilidad: Solo visible para otros agentes y colaboradores
• El cliente no ve: Las notas privadas no le aparecen al cliente
• Contexto: Mantiene el contexto de la conversación específica.

​

Cuándo utilizar

• Discusiones internas: Para discutir estrategias de apoyo.
• Transferencia de información: Para dejar información importante para otros agentes
• Solicitar ayuda: Para pedir ayuda a otros miembros del equipo
• Notas: Para registrar observaciones importantes sobre el cliente o la situación.

​

Cómo utilizar

1. Haga clic en la pestaña Nota privada en el área de composición.
2. Escribe tu nota en el campo de texto.
3. Opcionalmente, utilice ”@” para mencionar a otros agentes.
4. Haga clic en el botón enviar o presione Entrar

---

​

Asistencia de IA

WTO CRM ofrece herramientas de inteligencia artificial integradas para optimizar las interacciones con los clientes.

​

Acceso a la asistencia de IA

Para abrir el modo Asistencia AI:

1. En el área de redacción del mensaje, ubique el ícono Asistencia AI (diamante brillante o estrella)
2. Haga clic en el icono
3. La modalidad Asistencia AI se mostrará en el lado izquierdo de la interfaz.

​

Estructura modal

El modal presenta:

• Título: “Asistencia de IA” con un ícono de diamante verde brillante al lado
• Subtítulo: “Seleccione una acción para comenzar”
• Botón Cerrar: Icono “X” en la esquina superior derecha

​

Acciones disponibles

El modal presenta una serie de tarjetas en las que se puede hacer clic, cada una de las cuales representa una funcionalidad de IA:

​

Sugerencia de respuesta

• Icono: Diamante brillante
• Descripción: “Generar sugerencia de respuesta”
• Uso: Genera sugerencias de respuesta basadas en el contexto de la conversación.

​

Resumir la conversación

• Icono: Letra ‘T’
• Descripción: “Crear resumen de conversación”
• Uso: Crea un resumen automático de toda la conversación.

​

Reformular

• Icono: Diamante brillante con flechas dobles
• Descripción: “Reescribe el mensaje de una manera diferente”
• Uso: Reescribe un mensaje manteniendo el significado pero cambiando la forma.

​

Corregir ortografía

• Icono: Documento con marca de verificación
• Descripción: “Corregir errores gramaticales y ortográficos”
• Uso: Corrige automáticamente errores gramaticales y ortográficos.

​

Expandir

• Icono: Flechas opuestas expandiéndose
• Descripción: “Hacer el mensaje más detallado”
• Uso: Expande un mensaje corto a una versión más detallada

​

Acortar

• Icono: Flechas opuestas contrayéndose
• Descripción: “Resumir el mensaje”
• Uso: Reduce un mensaje largo a una versión más concisa

​

Hazte amigable

• Icono: Cara sonriente
• Descripción: “Usa un tono más informal y amigable”
• Uso: Adapta el tono del mensaje para que sea más informal y amigable.

​

Hacer formal

• Icono: Birrete/corbata de graduación
• Descripción: “Usa un tono más profesional”
• Uso: Adapta el tono del mensaje para que sea más formal y profesional.

​

Simplificar

• Icono: Bombilla
• Descripción: “Hazlo más fácil de entender”
• Uso: Simplifica el lenguaje del mensaje para facilitar la comprensión.

​

Analizar sentimiento

• Icono: Escudo o anillo protector
• Descripción: “Comprueba si el mensaje contiene contenido ofensivo o inapropiado”
• Uso: Analiza la opinión y detecta contenido potencialmente problemático.

​

Cómo utilizar acciones de IA

1. Escribe o selecciona el mensaje que deseas procesar
2. Haga clic en el ícono Asistencia AI
3. Seleccione la acción deseada en el modal.
4. La IA procesará el mensaje según la acción seleccionada.
5. Revise el resultado y utilícelo según sea necesario.

---

​

Consideraciones finales

• La interfaz de chat está diseñada para una interacción eficiente y contextualizada.
• El estado de la conversación se puede administrar fácilmente a través del encabezado usando el botón “Abrir conversación”
• La distinción entre Responder y Nota privada es fundamental para una comunicación eficaz con el cliente y la colaboración interna del equipo.
• La información de contacto y el identificador único ayudan a mantener el contexto de la conversación.
• Los mensajes se sincronizan en tiempo real entre todos los agentes.
• Puedes ver cuando otros agentes están escribiendo
• El historial completo de conversaciones se mantiene permanentemente
• Las herramientas de IA ayudan a optimizar la calidad y la eficiencia de la respuesta *Algunas funcionalidades pueden variar dependiendo del canal de comunicación
• Utilice notas privadas para mantener la comunicación interna organizada y contextualizada.

---

​

Novedades de v1.0.0-rc3

• Teléfono de contacto visible en la lista y el encabezado. Anteriormente era necesario abrir los detalles del contacto para ver el número. Ahora el número aparece tanto en cada tarjeta de conversación de la lista como en el encabezado del chat (WTO-988).
• Reconexión activa de WebSocket. Cuando la conexión se interrumpe (red inestable, reinicio del servidor), la interfaz intenta volver a conectarse en segundo plano con un retroceso exponencial. Al recuperarse, muestra un brindis de éxito. Anteriormente, la conexión interrumpida era silenciosa y era necesaria una actualización de la página (WTO-1085).
• Carga de archivos grandes. Límite elevado a 100 MB. Los archivos grandes omiten el flujo de búsqueda+blob y utilizan la carga directa (WTO-1131).
• Desplazamiento conservado en la paginación. Al paginar el historial, el desplazamiento permanece fijo en la posición en la que se encontraba, ya no es necesario saltar a la parte superior (WTO-1106).