Acessando a Interface de Chat
Para abrir a interface de chat:- Na lista de conversas, clique na conversa desejada
- A interface de chat será aberta no painel direito ou central, dependendo do layout
Estrutura da Interface de Chat
A interface de chat ocupa a área central e direita da tela, exibindo os detalhes da conversa selecionada na lista lateral.
Barra de Navegação Superior
No topo da tela, há uma barra de navegação com:- Seletor de Contexto: No canto superior esquerdo, um seletor exibindo “Evolution” com ícone de prédio e uma seta para baixo, indicando o contexto ou ambiente atual
- Ícones de Controle: No canto superior direito:
- Ícone de sol/lua para alternar tema (claro/escuro)
- Ícone de sino para notificações
- Avatar do usuário (ex: “MS”)
Lista de Conversas (Coluna da Esquerda)
A coluna da esquerda exibe todas as conversas disponíveis:Barra de Pesquisa
- Campo de Busca: No topo da coluna, um campo com placeholder “Search conversations…” e ícone de lupa
- Funcionalidade: Permite buscar conversas por nome do contato ou palavras-chave
Contador e Filtros
Abaixo da barra de pesquisa:- Contador de Conversas: Exibe o número total de conversas encontradas (ex: “1 conversation”)
- Indicador de Filtros: Mostra quantos filtros estão ativos (ex: “1 filter”)
- Botão Filters: Com ícone de funil, permite abrir o modal de configuração de filtros
Conversa Selecionada
A conversa atualmente selecionada é destacada em um bloco verde-escuro:- Avatar: Foto de perfil do contato (ex: “Davidson Gomes”)
- Ícone do Canal: Pequeno ícone sobreposto ao avatar indicando o canal (ex: ícone azul de avião de papel para Telegram)
- Nome e Horário: Nome do contato seguido de “Evolu…” e indicação de tempo (ex: “Agora”)
- Preview da Mensagem: Última mensagem trocada na conversa (ex: “Ola”)
- Indicador de Status: Pequeno ícone de relógio amarelo, sugerindo status específico da conversa ou horário comercial
Interface de Chat Ativa (Coluna Principal à Direita)
A coluna principal à direita mostra a conversa selecionada:Cabeçalho da Conversa
- Informações do Contato:
- Nome do cliente e canal (ex: “Davidson Gomes - Evolution API”)
- Identificador interno (ex: “evoai-davidson”)
- Status da conversa (ex: “Status: Pendente”)
- Botões de Ação: No canto superior direito:
- Botão “Open Conversation” (verde com ícone de cadeado aberto)
- Ícone de três pontos verticais (menu de opções)
- Ícone “X” (fechar conversa)
Histórico de Mensagens
A área central exibe o fluxo cronológico das mensagens:- Marcador de Início: Uma linha horizontal centralizada com o texto “Start of conversation”
- Mensagem Recebida:
- Bolha de chat preta/cinza à esquerda
- Texto da mensagem (ex: “ola”)
- Timestamp abaixo (ex: “19 jan às 12:57”)
- Mensagem Enviada:
- Bolha de chat verde-água à direita
- Identificação do agente acima (ex: “Agent Davidson Gomes”)
- Texto da mensagem dentro da bolha (ex: “Ola”)
- Timestamp com checkmark (ex: “19 jan às 12:57 ✓”) indicando que a mensagem foi enviada/lida
Área de Composição de Mensagens (Inferior)
Na parte inferior da interface:- Abas de Modo:
- Reply: Aba desativada (cinza claro) para respostas públicas ao cliente
- Private Note: Aba ativada (verde) com ícone de cadeado para notas internas
- Texto informativo: “Visible only to agents” ao lado da aba Private Note
- Campo de Texto: Grande caixa de texto retangular com placeholder dinâmico baseado na aba selecionada
- Ícones de Ação (Inferior Esquerdo):
- Clipe de papel (anexar arquivos)
- Rosto sorridente (emojis)
- ”@” (menções)
- Documento/estrela (modelos de resposta rápida)
- Botões de Envio e Ferramentas (Inferior Direito):
- Microfone (gravação de áudio)
- Estrela/diamante brilhante (AI Assistance)
- Avião de papel (enviar mensagem)
Área de Composição de Mensagens
A área de composição permite aos agentes responderem e adicionarem notas internas. Esta seção é fundamental para a interação com os clientes.
Abas de Modo de Composição
Na parte superior da área de composição, há duas abas que determinam o tipo de mensagem:Reply (Responder)
- Função: Enviar mensagens públicas que serão visíveis ao cliente
- Quando usar: Para responder diretamente ao cliente
- Estilo: Aba destacada em verde quando ativa
- Placeholder: “Type your message… (type / for canned responses)“
Private Note (Nota Privada)
- Função: Adicionar notas internas visíveis apenas para outros agentes
- Quando usar: Para discussões internas sobre a conversa, repassar informações ou solicitar ajuda
- Visibilidade: Apenas visível para agentes e colaboradores da plataforma
- Estilo: Aba destacada em verde com ícone de cadeado quando ativa
- Placeholder: “Type your private note (pending conversation)…”
- Texto informativo: “Visible only to agents” ao lado da aba
Campo de Texto
A área principal para digitar mensagens:- Tamanho: Grande caixa de texto retangular
- Placeholder dinâmico:
- “Type your message… (type / for canned responses)” quando a aba Reply está ativa
- “Type your private note (pending conversation)…” quando a aba Private Note está ativa
- Atalho: Digite ”/” para acessar respostas prontas (canned responses)
Ícones de Ação e Formatação
No canto inferior esquerdo do campo de texto, há vários ícones:-
Anexo (Clipe de Papel):
- Permite anexar arquivos, imagens ou documentos
- Clique para selecionar arquivos do seu dispositivo
-
Emojis (Smiley Face):
- Abre o seletor de emojis
- Adiciona expressividade às mensagens
-
Menções (@):
- Permite mencionar outros agentes em notas privadas
- Útil para chamar atenção de membros específicos da equipe
-
Modelos de Resposta Rápida (Documento/Estrela):
- Acessa respostas prontas ou templates de mensagem
- Digite ”/” no campo de texto para atalho rápido
Botões de Envio e Ferramentas Adicionais
No canto inferior direito da área de composição:-
Microfone:
- Possível entrada de voz (se disponível)
- Permite gravar mensagens de áudio
-
AI Assistance (Estrela/Diamante):
- Ícone de diamante brilhante ou estrela estilizada
- Abre o modal de assistência de inteligência artificial
- Veja a seção “Assistência de IA” abaixo para mais detalhes
-
Enviar (Avião de Papel):
- Envia a mensagem digitada
- Também pode ser acionado pressionando Enter
Ação “Open Conversation”
O botão Open Conversation é crucial para o fluxo de trabalho da plataforma.
Informações da Conversa
No cabeçalho, você pode visualizar:- Nome do Contato e Canal: “Davidson Gomes - Evolution API” (nome do cliente e canal de comunicação)
- Identificador Interno: “evoai-davidson” (identificador único da conversa)
- Status da Conversa: “Status: Pendente” (estado atual da conversa)
Botão “Open Conversation”
O botão está localizado no canto superior direito do cabeçalho:- Aparência: Botão verde com texto “Open Conversation” e ícone de cadeado aberto
- Função: Altera o status da conversa de “Pendente” para “Aberta”
- Quando usar: Quando você está pronto para iniciar o atendimento ativo
- Importante: Este botão é crucial para o fluxo de trabalho, sinalizando que um agente está ativamente engajado na resolução
Outros Botões no Cabeçalho
À direita do botão “Open Conversation”, você encontra:- Menu de Opções: Ícone de três pontos verticais para opções adicionais relacionadas à conversa
- Fechar Conversa: Ícone “X” para fechar a visualização da conversa
Quando Usar
- Quando uma conversa está no status “Pendente”
- Quando você está pronto para iniciar o atendimento ativo
- Para sinalizar que um agente está engajado na resolução
Como Funciona
- Clique no botão Open Conversation no cabeçalho da conversa
- O status da conversa muda de “Pendente” para “Aberta”
- Isso indica que o atendimento foi iniciado e um agente está ativamente trabalhando na conversa
Importância
- Organização: Ajuda a rastrear quais conversas estão sendo atendidas
- Colaboração: Evita que múltiplos agentes trabalhem na mesma conversa simultaneamente
- Métricas: Contribui para relatórios e análises de desempenho
Notas Privadas
A funcionalidade de Private Note permite que a equipe se comunique internamente dentro do contexto de uma conversa específica.
Características
- Visibilidade: Apenas visível para outros agentes e colaboradores
- Cliente não vê: As notas privadas não aparecem para o cliente
- Contexto: Mantém o contexto da conversa específica
Quando Usar
- Discussões internas: Para discutir estratégias de atendimento
- Repasse de informações: Para deixar informações importantes para outros agentes
- Solicitar ajuda: Para pedir assistência de outros membros da equipe
- Anotações: Para registrar observações importantes sobre o cliente ou situação
Como Usar
- Clique na aba Private Note na área de composição
- Digite sua nota no campo de texto
- Opcionalmente, use ”@” para mencionar outros agentes
- Clique no botão de envio ou pressione Enter
Assistência de IA (AI Assistance)
O Evo CRM oferece ferramentas de inteligência artificial integradas para otimizar as interações com os clientes.
Acessando a Assistência de IA
Para abrir o modal de AI Assistance:- Na área de composição de mensagens, localize o ícone de AI Assistance (diamante brilhante ou estrela)
- Clique no ícone
- O modal AI Assistance será exibido no lado esquerdo da interface
Estrutura do Modal
O modal apresenta:- Título: “AI Assistance” com ícone de diamante brilhante verde ao lado
- Subtítulo: “Select an action to get started” (Selecione uma ação para começar)
- Botão de Fechar: Ícone “X” no canto superior direito
Ações Disponíveis
O modal apresenta uma série de cards clicáveis, cada um representando uma funcionalidade de IA:Reply suggestion (Sugestão de Resposta)
- Ícone: Diamante brilhante
- Descrição: “Generate reply suggestion” (Gerar sugestão de resposta)
- Uso: Gera sugestões de resposta baseadas no contexto da conversa
Summarize conversation (Resumir Conversa)
- Ícone: Letra ‘T’
- Descrição: “Create conversation summary” (Criar resumo da conversa)
- Uso: Cria um resumo automático de toda a conversa
Rephrase (Reescrever)
- Ícone: Diamante brilhante com setas duplas
- Descrição: “Rewrite the message in a different way” (Reescrever a mensagem de uma forma diferente)
- Uso: Reescreve uma mensagem mantendo o significado mas alterando a forma
Fix spelling (Corrigir Ortografia)
- Ícone: Documento com marca de verificação
- Descrição: “Correct grammatical and spelling errors” (Corrigir erros gramaticais e de ortografia)
- Uso: Corrige automaticamente erros de gramática e ortografia
Expand (Expandir)
- Ícone: Setas opostas se expandindo
- Descrição: “Make the message more detailed” (Tornar a mensagem mais detalhada)
- Uso: Expande uma mensagem curta em uma versão mais detalhada
Shorten (Resumir)
- Ícone: Setas opostas se contraindo
- Descrição: “Summarize the message” (Resumir a mensagem)
- Uso: Reduz uma mensagem longa em uma versão mais concisa
Make friendly (Tornar Amigável)
- Ícone: Rosto sorrindo
- Descrição: “Use a more casual and friendly tone” (Usar um tom mais casual e amigável)
- Uso: Adapta o tom da mensagem para ser mais casual e amigável
Make formal (Tornar Formal)
- Ícone: Chapéu de formatura/gravata
- Descrição: “Use a more professional tone” (Usar um tom mais profissional)
- Uso: Adapta o tom da mensagem para ser mais formal e profissional
Simplify (Simplificar)
- Ícone: Lâmpada
- Descrição: “Make it easier to understand” (Tornar mais fácil de entender)
- Uso: Simplifica a linguagem da mensagem para facilitar a compreensão
Analyze sentiment (Analisar Sentimento)
- Ícone: Escudo ou anel protetor
- Descrição: “Check if the message contains offensive or inappropriate content” (Verificar se a mensagem contém conteúdo ofensivo ou inapropriado)
- Uso: Analisa o sentimento e detecta conteúdo potencialmente problemático
Como Usar as Ações de IA
- Digite ou selecione a mensagem que deseja processar
- Clique no ícone de AI Assistance
- Selecione a ação desejada no modal
- A IA processará a mensagem conforme a ação selecionada
- Revise o resultado e use conforme necessário
Considerações Finais
- A interface de chat é projetada para uma interação eficiente e contextualizada
- O status da conversa pode ser facilmente gerenciado através do cabeçalho usando o botão “Open Conversation”
- A distinção entre Reply e Private Note é fundamental para comunicação eficaz com clientes e colaboração interna da equipe
- As informações do contato e o identificador único ajudam a manter o contexto da conversa
- As mensagens são sincronizadas em tempo real entre todos os agentes
- Você pode ver quando outros agentes estão digitando
- O histórico completo da conversa é mantido permanentemente
- As ferramentas de IA ajudam a otimizar a qualidade e eficiência das respostas
- Algumas funcionalidades podem variar dependendo do canal de comunicação
- Use as notas privadas para manter a comunicação interna organizada e contextualizada
Novidades do v1.0.0-rc3
- Telefone do contato visível na lista e no header. Antes era necessário abrir o detalhe do contato para ver o número. Agora o número aparece tanto no card de cada conversa na lista quanto no cabeçalho do chat (EVO-988).
- Reconexão ativa de WebSocket. Quando a conexão cai (rede instável, reinício do servidor), o frontend tenta reconectar em background com backoff exponencial. Ao restabelecer, exibe toast de sucesso. Antes a conexão caída ficava silenciosa e era preciso atualizar a página (EVO-1085).
- Upload de arquivos grandes. Limite elevado para 100MB. Arquivos grandes pulam o fluxo de fetch+blob e usam upload direto (EVO-1131).
- Scroll preservado na paginação. Ao paginar o histórico, o scroll fica fixo na posição em que você estava — não pula mais para o topo (EVO-1106).