> ## Documentation Index > Fetch the complete documentation index at: https://docs.evolutionfoundation.com.br/llms.txt > Use this file to discover all available pages before exploring further. # Interface de Chat A **Interface de Chat** é onde você visualiza e interage diretamente com as conversas, visualiza o histórico de mensagens, envia respostas e realiza ações específicas para cada interação com o cliente. Esta seção detalha os componentes da interface de chat, incluindo o cabeçalho da conversa, o histórico de mensagens, a área de composição de mensagens e as ferramentas de assistência de IA disponíveis. *** ## Acessando a Interface de Chat Para abrir a interface de chat: 1. Na lista de conversas, clique na conversa desejada 2. 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. Interface completa de chat A interface principal de conversas apresenta uma estrutura dividida em três colunas principais: ### 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. Área de composição de mensagens ### 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. Botão Open Conversation destacado O cabeçalho da interface de chat exibe o botão **Open Conversation** no canto superior direito, destacado em verde com ícone de cadeado aberto. ### 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 1. Clique no botão **Open Conversation** no cabeçalho da conversa 2. O status da conversa muda de **"Pendente"** para **"Aberta"** 3. 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. Modal de Assistência de IA ### 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 1. Clique na aba **Private Note** na área de composição 2. Digite sua nota no campo de texto 3. Opcionalmente, use "@" para mencionar outros agentes 4. 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. Modal de Assistência de IA ### Acessando a Assistência de IA Para abrir o modal de AI Assistance: 1. Na área de composição de mensagens, localize o ícone de **AI Assistance** (diamante brilhante ou estrela) 2. Clique no ícone 3. 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 1. Digite ou selecione a mensagem que deseja processar 2. Clique no ícone de **AI Assistance** 3. Selecione a ação desejada no modal 4. A IA processará a mensagem conforme a ação selecionada 5. 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). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.