Darwin AI — Detalhe da Conversa (Chat View)
URL:
https://app.getdarwin.ai/ou/{orgId}/conversations/{conversationId}Exemplo:/ou/4458/conversations/20448-5511978753355Tecnologia: Conexão WebSocket em tempo real viawss://live.app.getdarwin.ai/socket.io/
1. Estrutura da Página
A página de detalhe da conversa tem layout dividido em 3 áreas:
┌──────────────────────┬──────────────────────────────────────────────┐
│ │ │
│ Painel Esquerdo │ Painel de Conversa (Direito) │
│ (Lista de │ │
│ Conversas) │ ┌────────────────────────────────────────┐ │
│ │ │ Barra Superior do Chat │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ Área de Mensagens │ │
│ │ │ │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Barra de Ações (IA, Reset, etc.) │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Caixa de Input + Botões │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
└──────────────────────┴──────────────────────────────────────────────┘2. Painel Esquerdo — Lista de Conversas
Mesmo painel de filtros da página de Conversas, mas com a conversa atual destacada.
2.1 Item de Conversa na Lista
Cada conversa na lista exibe:
| Elemento | Descrição |
|---|---|
| Checkbox | Selecionar conversa para ações em lote |
| Avatar | Inicial do nome do contato (ex: "R") + ícone do canal (WhatsApp, Instagram, etc.) |
| Nome | Nome do contato (heading 6) |
| Prévia | Última mensagem da conversa (heading 6) |
| Horário | Hora da última mensagem (ex: "12:14") |
| Ações | Botão 3 pontos (menu de ações da conversa) |
3. Painel Direito — Detalhe da Conversa
3.1 Barra Superior do Chat
| Elemento | Tipo | Descrição |
|---|---|---|
| Ocultar lista | Button | Recolhe o painel esquerdo para expandir a área de chat |
| Avatar do contato | Ícone | Inicial do nome (ex: "R") |
| Ícone do canal | Ícone | Mostra a origem da conversa (ex: WhatsApp) |
| Ícone Meta/Facebook | Ícone | Indica canal da Meta |
| Nome do contato | Texto clicável | Nome do lead (ex: "Raphael") |
| Tipo de interação | Badge/Tag | "Inbound" (entrante) ou "Outbound" (campanha) |
| Atribuir a | Button | Atribuir/reassignar conversa a outro membro da equipe |
| Info do lead | Button | Abre painel lateral com informações detalhadas do lead |
| Mais opções | Button (3 pontos) | Menu de ações adicionais da conversa |
4. Área de Mensagens
4.1 Estrutura da Mensagem
Cada mensagem no chat exibe:
| Elemento | Descrição |
|---|---|
| Avatar circular | Inicial do remetente (ex: "R") |
| Conteúdo da mensagem | Texto da mensagem |
| Horário | Hora de envio (ex: "12:14") |
4.2 Separadores de Data
- Datas são agrupadas com separadores visuais
- Exemplo: "Hoje" — agrupa mensagens do dia atual
5. Barra de Ações da Conversa
Localizada entre a área de mensagens e o input:
| Ação | Tipo | Descrição |
|---|---|---|
| Chat | Tab (selecionada por padrão) | Modo de conversa normal — "Conversar com o lead" |
| Nota interna | Tab | "Enviar uma nota interna privada" — mensagens visíveis apenas para a equipe |
| Pausar IA | Button | Pausa o funcionário-IA, impedindo respostas automáticas |
| #Reset | Button | Reseta o contexto da conversa (ex: reiniciar pipeline) |
| Contador de caracteres | Indicador | Mostra "0" — contagem de caracteres da mensagem sendo digitada |
6. Caixa de Input de Mensagem
6.1 Campo de Texto
| Elemento | Descrição |
|---|---|
| Textbox | Campo de digitação com placeholder: "Digite uma mensagem... use / para abrir respostas rápidas" |
Atalho / | Abre o seletor de Respostas Rápidas |
6.2 Botões de Ação do Input
| Ação | Status | Descrição |
|---|---|---|
| Anexar documento | Ativo | Anexa arquivos/documentos à mensagem |
| Seletor de emojis | Ativo | Abre o painel de emojis |
| Adicionar localização | Ativo | Envia localização geográfica |
| Respostas Rápidas | Ativo | Abre menu de respostas pré-definidas (atalho: /) |
| Enviar mais tarde | Em breve (desabilitado) | Agendamento de envio de mensagem |
| Gerar resposta de IA | Em breve (desabilitado) | Sugestão de resposta gerada por IA |
6.3 Gravação de Voz
| Ação | Tipo | Descrição |
|---|---|---|
| Iniciar gravação | Button (microfone) | Grava e envia mensagem de áudio |
7. Ações Disponíveis no Chat
7.1 Ações por Conversa
| Ação | Como acessar |
|---|---|
| Atribuir/Reassignar | Botão "Atribuir a" na barra superior |
| Ver informações do lead | Botão de info do lead na barra superior |
| Pausar/Retomar IA | Botão "Pausar IA" na barra de ações |
| Resetar conversa | Botão "#Reset" na barra de ações |
| Mais opções | Menu 3 pontos na barra superior |
| Ocultar lista | Botão "Ocultar lista" para expandir chat |
7.2 Ações por Mensagem
| Ação | Descrição |
|---|---|
| Enviar mensagem | Digitar + Enter no campo de texto |
| Enviar nota interna | Selecionar tab "Nota interna" + digitar |
| Usar resposta rápida | Digitar / no campo de texto |
| Anexar documento | Botão de anexo (clipe) |
| Inserir emoji | Botão de emoji (smiley) |
| Enviar localização | Botão de localização (pin) |
| Gravar áudio | Botão de microfone |
7.3 Features Planejadas (Em Breve)
| Feature | Status |
|---|---|
| Enviar mais tarde | Desabilitado — agendamento de mensagens |
| Gerar resposta de IA | Desabilitado — sugestão automática de respostas |
8. Tecnologia em Tempo Real
| Componente | Descrição |
|---|---|
| WebSocket | Conexão via wss://live.app.getdarwin.ai/socket.io/ (Socket.IO v4) |
| Protocolo | EIO=4 (Engine.IO v4) com transporte WebSocket |
| Funcionalidade | Mensagens em tempo real, atualizações de status, indicadores de digitação |
9. Relacionamentos com Outros Módulos
| Módulo | Relação |
|---|---|
| Contatos | O lead da conversa é um contato na base |
| Workforce | O worker gerencia a conversa quando a IA não está pausada |
| Pipelines | A conversa segue o pipeline configurado (reset reinicia) |
| Canais | Conversas entram via WhatsApp, Instagram, etc. |
| Respostas Rápidas | Configuradas em Configurações, usadas com / |
| Campanhas | Conversas de outbound são originadas de campanhas |