Darwin AI — Detalle de la Conversación (Chat View)
URL:
https://app.getdarwin.ai/ou/{orgId}/conversations/{conversationId}Ejemplo:/ou/4458/conversations/20448-5511978753355Tecnología: Conexión WebSocket en tiempo real víawss://live.app.getdarwin.ai/socket.io/
1. Estructura de la Página
La página de detalle de la conversación tiene un layout dividido en 3 áreas:
┌──────────────────────┬──────────────────────────────────────────────┐
│ │ │
│ Panel Izquierdo │ Panel de Conversación (Derecho) │
│ (Lista de │ │
│ Conversaciones) │ ┌────────────────────────────────────────┐ │
│ │ │ Barra Superior del Chat │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ Área de Mensajes │ │
│ │ │ │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Barra de Acciones (IA, Reset, etc.) │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Caja de Entrada + Botones │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
└──────────────────────┴──────────────────────────────────────────────┘2. Panel Izquierdo — Lista de Conversaciones
Mismo panel de filtros de la página de Conversaciones, pero con la conversación actual destacada.
2.1 Ítem de Conversación en la Lista
Cada conversación en la lista muestra:
| Elemento | Descripción |
|---|---|
| Checkbox | Seleccionar la conversación para acciones en lote |
| Avatar | Inicial del nombre del contacto (ej.: "R") + ícono del canal (WhatsApp, Instagram, etc.) |
| Nombre | Nombre del contacto (heading 6) |
| Vista previa | Último mensaje de la conversación (heading 6) |
| Horario | Hora del último mensaje (ej.: "12:14") |
| Acciones | Botón de 3 puntos (menú de acciones de la conversación) |
3. Panel Derecho — Detalle de la Conversación
3.1 Barra Superior del Chat
| Elemento | Tipo | Descripción |
|---|---|---|
| Ocultar lista | Button | Contrae el panel izquierdo para expandir el área de chat |
| Avatar del contacto | Ícono | Inicial del nombre (ej.: "R") |
| Ícono del canal | Ícono | Muestra el origen de la conversación (ej.: WhatsApp) |
| Ícono Meta/Facebook | Ícono | Indica canal de Meta |
| Nombre del contacto | Texto clicable | Nombre del lead (ej.: "Raphael") |
| Tipo de interacción | Badge/Tag | "Inbound" (entrante) u "Outbound" (campaña) |
| Asignar a | Button | Asignar/reasignar la conversación a otro miembro del equipo |
| Info del lead | Button | Abre el panel lateral con información detallada del lead |
| Más opciones | Button (3 puntos) | Menú de acciones adicionales de la conversación |
4. Área de Mensajes
4.1 Estructura del Mensaje
Cada mensaje en el chat muestra:
| Elemento | Descripción |
|---|---|
| Avatar circular | Inicial del remitente (ej.: "R") |
| Contenido del mensaje | Texto del mensaje |
| Horario | Hora de envío (ej.: "12:14") |
4.2 Separadores de Fecha
- Las fechas se agrupan con separadores visuales
- Ejemplo: "Hoy" — agrupa los mensajes del día actual
5. Barra de Acciones de la Conversación
Ubicada entre el área de mensajes y la entrada:
| Acción | Tipo | Descripción |
|---|---|---|
| Chat | Tab (seleccionada por defecto) | Modo de conversación normal — "Conversar con el lead" |
| Nota interna | Tab | "Enviar una nota interna privada" — mensajes visibles solo para el equipo |
| Pausar IA | Button | Pausa al empleado-IA, impidiendo respuestas automáticas |
| #Reset | Button | Reinicia el contexto de la conversación (ej.: reiniciar pipeline) |
| Contador de caracteres | Indicador | Muestra "0" — conteo de caracteres del mensaje que se está escribiendo |
6. Caja de Entrada de Mensaje
6.1 Campo de Texto
| Elemento | Descripción |
|---|---|
| Textbox | Campo de escritura con placeholder: "Escribe un mensaje... usa / para abrir las respuestas rápidas" |
Atajo / | Abre el selector de Respuestas Rápidas |
6.2 Botones de Acción de la Entrada
| Acción | Estado | Descripción |
|---|---|---|
| Adjuntar documento | Activo | Adjunta archivos/documentos al mensaje |
| Selector de emojis | Activo | Abre el panel de emojis |
| Agregar ubicación | Activo | Envía ubicación geográfica |
| Respuestas Rápidas | Activo | Abre el menú de respuestas predefinidas (atajo: /) |
| Enviar más tarde | Próximamente (deshabilitado) | Programación de envío de mensaje |
| Generar respuesta de IA | Próximamente (deshabilitado) | Sugerencia de respuesta generada por IA |
6.3 Grabación de Voz
| Acción | Tipo | Descripción |
|---|---|---|
| Iniciar grabación | Button (micrófono) | Graba y envía un mensaje de audio |
7. Acciones Disponibles en el Chat
7.1 Acciones por Conversación
| Acción | Cómo acceder |
|---|---|
| Asignar/Reasignar | Botón "Asignar a" en la barra superior |
| Ver información del lead | Botón de info del lead en la barra superior |
| Pausar/Reanudar IA | Botón "Pausar IA" en la barra de acciones |
| Reiniciar conversación | Botón "#Reset" en la barra de acciones |
| Más opciones | Menú de 3 puntos en la barra superior |
| Ocultar lista | Botón "Ocultar lista" para expandir el chat |
7.2 Acciones por Mensaje
| Acción | Descripción |
|---|---|
| Enviar mensaje | Escribir + Enter en el campo de texto |
| Enviar nota interna | Seleccionar la tab "Nota interna" + escribir |
| Usar respuesta rápida | Escribir / en el campo de texto |
| Adjuntar documento | Botón de adjunto (clip) |
| Insertar emoji | Botón de emoji (smiley) |
| Enviar ubicación | Botón de ubicación (pin) |
| Grabar audio | Botón de micrófono |
7.3 Features Planeadas (Próximamente)
| Feature | Estado |
|---|---|
| Enviar más tarde | Deshabilitado — programación de mensajes |
| Generar respuesta de IA | Deshabilitado — sugerencia automática de respuestas |
8. Tecnología en Tiempo Real
| Componente | Descripción |
|---|---|
| WebSocket | Conexión vía wss://live.app.getdarwin.ai/socket.io/ (Socket.IO v4) |
| Protocolo | EIO=4 (Engine.IO v4) con transporte WebSocket |
| Funcionalidad | Mensajes en tiempo real, actualizaciones de estado, indicadores de escritura |
9. Relaciones con Otros Módulos
| Módulo | Relación |
|---|---|
| Contactos | El lead de la conversación es un contacto en la base |
| Workforce | El worker gestiona la conversación cuando la IA no está pausada |
| Pipelines | La conversación sigue el pipeline configurado (reset reinicia) |
| Canales | Las conversaciones entran vía WhatsApp, Instagram, etc. |
| Respuestas Rápidas | Configuradas en Configuración, usadas con / |
| Campañas | Las conversaciones de outbound se originan de campañas |