Acessando a interface de bate-papo
Para abrir a interface de bate-papo:- 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 bate-papo
A interface de chat ocupa a área central e direita da tela, exibindo detalhes da conversa selecionada na lista da barra lateral.
Barra de navegação superior
Na parte superior da tela, há uma barra de navegação com:- Seletor de Contexto: No canto superior esquerdo, um seletor exibindo “WTO” com ícone de construção e uma seta para baixo, indicando o contexto ou ambiente atual
- Ícones de controle: No canto superior direito:
- Ícone sol/lua para alternar tema (claro/escuro)
- Ícone de sino para notificações
- Avatar do usuário (por exemplo, “MS”)
Lista de conversas (coluna da esquerda)
A coluna da esquerda exibe todas as conversas disponíveis:Barra de pesquisa
- Campo de pesquisa: no topo da coluna, um campo com espaço reservado “Pesquisar conversas…” e ícone de lupa
- Funcionalidade: Permite pesquisar conversas por nome de contato ou palavras-chave
Contador e Filtros
Abaixo da barra de pesquisa:- Contador de conversas: Exibe o número total de conversas encontradas (por exemplo, “1 conversa”)
- Indicador de Filtro: Mostra quantos filtros estão ativos (por exemplo, “1 filtro”)
- Botão Filtros: 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 do perfil do contato (por exemplo, “Davidson Gomes”)
- Ícone do canal: Pequeno ícone sobreposto no avatar indicando o canal (por exemplo, ícone de avião de papel azul para Telegram)
- Nome e Horário: Nome do contato seguido de “Evolu…” e indicação de horário (ex.: “Agora”)
- Visualização da mensagem: Última mensagem trocada na conversa (por exemplo, “Ola”)
- Indicador de status: Pequeno ícone de relógio amarelo, sugerindo status específico de conversa ou horário comercial
Interface de chat ativo (coluna principal à direita)
A coluna principal à direita mostra a conversa selecionada:Cabeçalho da conversa
- Informações de contato:
- Nome e canal do cliente (ex.: “Davidson Gomes - WTO API”)
- Identificador interno (por exemplo, “wtoai-davidson”)
- Status da conversa (por exemplo, “Status: Pendente”)
- Botões de ação: No canto superior direito:
- Botão “Abrir conversa” (verde com ícone de cadeado aberto)
- Ícone de três pontos verticais (menu de opções)
- Ícone “X” (conversa próxima)
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 “Início da conversa”
- Mensagem recebida:
- Balão de bate-papo preto/cinza à esquerda
- Texto da mensagem (por exemplo, “ola”)
- Carimbo de data e hora abaixo (por exemplo, “19 de janeiro às 12h57”)
- Mensagem enviada:
- Bolha de bate-papo azul-petróleo à direita *Identificação do agente acima (ex.: “Agente Davidson Gomes”)
- Texto da mensagem dentro do balão (por exemplo, “Ola”)
- Carimbo de data e hora com marca de seleção (por exemplo, “19 de janeiro às 12h57 ✓”) indicando que a mensagem foi enviada/lida
Área de composição de mensagens (parte inferior)
Na parte inferior da interface:- Guias de modo:
- Resposta: Aba desativada (cinza claro) para respostas públicas ao cliente
- Nota privada: Aba ativada (verde) com ícone de cadeado para notas internas
- Texto informativo: “Visível apenas para agentes” ao lado da aba Nota Privada
- Campo de texto: Grande caixa de texto retangular com espaço reservado dinâmico baseado na guia selecionada
- Ícones de ação (canto inferior esquerdo):
- Clipe de papel (anexar arquivos)
- Rosto sorridente (emojis)
- ”@” (menções)
- Documento/estrela (modelos de resposta rápida)
- Botões Enviar e Ferramentas (canto inferior direito):
- Microfone (gravação de áudio)
- Estrela/diamante brilhante (Assistência AI)
- Avião de papel (enviar mensagem)
Área de composição de mensagens
A área de composição permite que os agentes respondam e adicionem notas internas. Esta seção é fundamental para a interação com o cliente.
Guias do modo de composição
Na parte superior da área de composição, existem duas guias que determinam o tipo de mensagem:Responder
- Função: Enviar mensagens públicas que ficarão visíveis para o cliente
- Quando usar: Para responder diretamente ao cliente
- Estilo: Guia destacada em verde quando ativa
- Espaço reservado: “Digite sua mensagem… (digite / para respostas automáticas)“
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: visível apenas para agentes e colaboradores da plataforma
- Estilo: Guia destacada em verde com ícone de cadeado quando ativa
- Espaço reservado: “Digite sua nota privada (conversa pendente)…”
- Texto informativo: “Visível apenas para agentes” ao lado da guia
Campo de texto
A área principal para digitação de mensagens:- Tamanho: Caixa de texto retangular grande
- Espaço reservado dinâmico:
- “Digite sua mensagem… (digite / para respostas automáticas)” quando a guia Responder estiver ativa
- “Digite sua nota privada (conversa pendente)…” quando a aba Nota Privada estiver ativa
- Atalho: Digite ”/” para acessar as respostas automáticas
Ícones de ação e formatação
No canto inferior esquerdo do campo de texto, existem vários ícones:- Anexo (clipe de papel):
- Permite anexar arquivos, imagens ou documentos
- Clique para selecionar arquivos do seu dispositivo
- Emojis (Cara Sorridente):
- Abre o seletor de emojis
- Adiciona expressividade às mensagens
- Menções (@):
- Permite mencionar outros agentes em notas privadas
- Útil para chamar a atenção de membros específicos da equipe
- Modelos de resposta rápida (documento/estrela):
- Acessa respostas prontas ou modelos de mensagens
- Digite ”/” no campo de texto para um 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
- Assistência IA (Estrela/Diamante):
- Diamante brilhante ou ícone de estrela estilizado
- Abre o modal de assistência à inteligência artificial
- Consulte a seção “Assistência AI” abaixo para obter mais detalhes
- Enviar (avião de papel):
- Envia a mensagem digitada
- Também pode ser acionado pressionando Enter
Ação “Conversa Aberta”
O botão Conversa aberta é crucial para o fluxo de trabalho da plataforma.
Informações sobre conversas
No cabeçalho, você pode visualizar:- Nome e Canal de Contato: “Davidson Gomes - WTO API” (nome do cliente e canal de comunicação)
- Identificador interno: “wtoai-davidson” (identificador exclusivo de conversa)
- Status da conversa: “Status: Pendente” (estado atual da conversa)
Botão “Abrir conversa”
O botão está localizado no canto superior direito do cabeçalho:- Aparência: Botão verde com o texto “Conversa aberta” e ícone de cadeado aberto
- Função: Altera o status da conversa de “Pendente” para “Aberta”
- Quando usar: Quando você estiver pronto para iniciar o suporte ativo
- Importante: Este botão é crucial para o fluxo de trabalho, sinalizando que um agente está ativamente envolvido na resolução
Outros botões no cabeçalho
À direita do botão “Abrir conversa”, 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ê estiver pronto para iniciar o suporte ativo
- Para sinalizar que um agente está envolvido na resolução
Como funciona
- Clique no botão Abrir conversa no cabeçalho da conversa
- O status da conversa muda de “Pendente” para “Aberta”
- Isso indica que o suporte foi iniciado e um agente está trabalhando ativamente na conversa
Importância
- Organização: ajuda a rastrear quais conversas estão sendo tratadas
- Colaboração: evita que vários agentes trabalhem na mesma conversa simultaneamente
- Métricas: contribui para relatórios e análises de desempenho
Notas Privadas
A funcionalidade Nota Privada permite que a equipe se comunique internamente no contexto de uma conversa específica.
Características
- Visibilidade: visível apenas para outros agentes e colaboradores
- O cliente não vê: 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 suporte
- Transferência de informações: Para deixar informações importantes para outros agentes
- Solicitar ajuda: Para pedir ajuda de outros membros da equipe
- Notas: Para registrar observações importantes sobre o cliente ou situação
Como usar
- Clique na guia Nota privada na área de composição
- Digite sua nota no campo de texto
- Opcionalmente, use “@” para mencionar outros agentes
- Clique no botão enviar ou pressione Enter
Assistência de IA
WTO CRM oferece ferramentas integradas de inteligência artificial para otimizar as interações com o cliente.
Acessando a Assistência de IA
Para abrir o modal AI Assistance:- Na área de composição da mensagem, localize o ícone AI Assistance (diamante ou estrela brilhante)
- Clique no ícone
- O modal AI Assistance será exibido no lado esquerdo da interface
Estrutura Modal
O modal apresenta:- Título: “Assistência AI” com ícone de diamante verde brilhante próximo a ele
- Subtítulo: “Selecione uma ação para começar”
- Botão Fechar: Ícone “X” no canto superior direito
Ações disponíveis
O modal apresenta uma série de cartões clicáveis, cada um representando uma funcionalidade de IA:Sugestão de resposta
- Ícone: Diamante brilhante
- Descrição: “Gerar sugestão de resposta”
- Uso: gera sugestões de resposta com base no contexto da conversa
Resumir a conversa
- Ícone: Letra ‘T’
- Descrição: “Criar resumo da conversa”
- Uso: Cria um resumo automático de toda a conversa
Reformular
- Ícone: Diamante brilhante com setas duplas
- Descrição: “Reescreva a mensagem de uma maneira diferente”
- Uso: Reescreve uma mensagem mantendo o significado, mas alterando a forma
Corrigir ortografia
- Ícone: Documento com marca de seleção
- Descrição: “Corrigir erros gramaticais e ortográficos”
- Uso: corrige automaticamente erros gramaticais e ortográficos
Expandir
- Ícone: Setas opostas se expandindo
- Descrição: “Deixe a mensagem mais detalhada”
- Uso: Expande uma mensagem curta em uma versão mais detalhada
Encurtar
- Ícone: Setas opostas se contraindo
- Descrição: “Resuma a mensagem”
- Uso: Reduz uma mensagem longa para uma versão mais concisa
Faça amizade
- Ícone: Rosto sorridente
- Descrição: “Use um tom mais casual e amigável”
- Uso: Adapta o tom da mensagem para ser mais casual e amigável
Tornar formal
- Ícone: Boné/gravata de formatura
- Descrição: “Use um tom mais profissional”
- Uso: Adapta o tom da mensagem para ser mais formal e profissional
Simplifique
- Ícone: Lâmpada
- Descrição: “Facilite a compreensão”
- Uso: Simplifica a linguagem da mensagem para facilitar a compreensão
Analise o sentimento
- Ícone: Escudo ou anel protetor
- Descrição: “Verifique se a mensagem contém conteúdo ofensivo ou inapropriado”
- Uso: analisa sentimentos e detecta conteúdo potencialmente problemático
Como usar ações de IA
- Digite ou selecione a mensagem que deseja processar
- Clique no ícone Assistência AI
- Selecione a ação desejada no modal
- A IA processará a mensagem de acordo com a ação selecionada
- Revise o resultado e use conforme necessário
Considerações Finais
- A interface de chat foi projetada para interação eficiente e contextualizada
- O status da conversa pode ser facilmente gerenciado através do cabeçalho usando o botão “Abrir conversa”
- A distinção entre Resposta e Nota privada é fundamental para uma comunicação eficaz com o cliente e colaboração da equipe interna
- As informações de contato e o identificador exclusivo 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 a eficiência da resposta *Algumas funcionalidades podem variar dependendo do canal de comunicação
- Utilize notas privadas para manter a comunicação interna organizada e contextualizada
O que há de novo na v1.0.0-rc3
- Telefone de contato visível na lista e no cabeçalho. Anteriormente, você precisava abrir os detalhes do contato para ver o número. Agora o número aparece em cada cartão de conversa da lista e no cabeçalho do chat (WTO-988).
- Reconexão ativa do WebSocket. Quando a conexão cai (rede instável, reinicialização do servidor), o frontend tenta se reconectar em segundo plano com espera exponencial. Após a recuperação, faz um brinde de sucesso. Anteriormente, a conexão interrompida era silenciosa e era necessária uma atualização de página (WTO-1085).
- Uploads de arquivos grandes. Limite aumentado para 100MB. Arquivos grandes ignoram o fluxo fetch+blob e usam upload direto (WTO-1131).
- Rolagem preservada na paginação. Ao paginar o histórico, a rolagem permanece fixa na posição em que você estava — sem mais saltos para o topo (WTO-1106).