Chat Interface

Interface completa para conversar com seus agentes, acompanhar execuções em tempo real e gerenciar sessões de chat

Visão Geral

A Interface de Chat é onde você interage diretamente com seus agentes de IA. Mais do que uma simples conversa, é uma ferramenta completa que permite:

• 💬 Conversar com qualquer agente criado
• 🔍 Acompanhar execuções em tempo real (debug)
• 📁 Gerenciar sessões com organização inteligente
• 🎤 Enviar áudio, texto e mídia para interação rica
• 🏷️ Organizar conversas com tags e filtros

Debug em Tempo Real: Mesmo em agentes complexos (Sequential, Workflow, Loop), você vê cada passo da execução, chamadas de funções e retornos em tempo real, facilitando debugging e otimização.

Navegando pela Interface de Chat

Passo 1: Acessando o Chat

Abrir interface de chat

1. No menu principal da Evo AI, clique em “Chat”
2. Você verá uma interface dividida em duas partes:
   • Painel esquerdo: Lista de todas as sessões de chat
   • Área principal: Chat ativo ou tela inicial
3. Para começar, você pode criar um novo chat ou abrir uma sessão existente

A interface salva automaticamente todas as conversas, permitindo que você retome qualquer sessão a qualquer momento.

Passo 2: Gerenciando Sessões

Lista de sessões

Painel esquerdo - Todas as suas conversas:

Cada sessão mostra:

• Nome da sessão (editável)
• Agente utilizado
• Última mensagem ou resumo
• Data da conversa
• Tags para organização

Funcionalidades da lista:

• 🔍 Busca rápida por nome, descrição ou conteúdo
• 🏷️ Filtro por tags para organizar por projeto/tipo
• 🤖 Filtro por agente para ver conversas específicas
• 📅 Ordenação por data, nome ou atividade recente
• ✅ Seleção múltipla para ações em lote

Filtros e busca avançada

Como usar os filtros:

Por Agente:

Dropdown "Agente": Selecione agente específico
Resultado: Mostra apenas conversas com aquele agente

Exemplo: Filtro por "Assistente Vendas"
→ Lista apenas chats com esse agente

Por Tags:

Campo "Tags": Digite tag específica
Resultado: Mostra sessões marcadas com essa tag

Exemplo: Tags "cliente-vip", "suporte", "vendas"
→ Organização por categoria de atendimento

Por Texto:

Campo "Buscar": Digite palavra-chave
Resultado: Busca em nomes, descrições e conteúdo

Exemplo: Busca por "notebook"
→ Encontra todas as conversas sobre notebooks

Combinação de filtros:

• Use múltiplos filtros simultaneamente
• Refine resultados progressivamente
• Salve filtros frequentes mentalmente

Seleção múltipla e ações em lote

Como selecionar múltiplas sessões:

1. Marque as checkboxes ao lado de cada sessão desejada
2. Barra de ações aparece no topo quando há seleção
3. Selecionar tudo: Checkbox geral para marcar todas visíveis

Ações em lote disponíveis:

🗑️ Deletar Selecionadas:

• Remove múltiplas sessões de uma vez
• Confirma antes de deletar permanentemente
• Útil para limpeza periódica

🏷️ Adicionar Tags:

• Aplica tags a múltiplas sessões
• Organiza conversas por projeto/cliente
• Facilita filtros futuros

📁 Mover para Pasta: (se disponível)

• Organiza em categorias
• Separa por cliente, projeto, tipo

💡 Dica: Use seleção múltipla para organizar sessões antigas, aplicar tags em lote ou fazer limpeza de conversas teste.

Passo 3: Criando Nova Sessão

Iniciar novo chat

Como criar uma nova conversa:

1. Clique em “New Chat” no painel esquerdo
2. Selecione o agente que deseja usar na conversa
3. Configure nome da sessão (opcional, pode alterar depois)
4. Adicione tags para organização (opcional)
5. Clique em “Criar” para iniciar

Configurações iniciais:

Nome da Sessão: "Atendimento Cliente João - Notebooks"
Agente: assistente_vendas_tech
Tags: cliente-joao, vendas, notebook, 2024

Resultado: Chat organizado e fácil de encontrar depois

Boas práticas para nomes:

• Use padrão consistente: “Tipo - Cliente - Assunto”
• Inclua data se relevante: “Suporte-15Jan-ProblemaLogin”
• Seja descritivo: “Demo-Produto-Cliente-ABC”
• Evite nomes genéricos: “Chat 1”, “Teste”

Passo 4: Editando Informações da Sessão

Como editar dados da sessão

Acessando opções de edição:

1. Na lista de sessões: Clique no ícone de “Editar” (✏️) ao lado da sessão
2. Ou dentro do chat: Menu de opções da sessão
3. Formulário de edição abre com campos editáveis

Campos editáveis:

Nome da Sessão:

• Altere para algo mais descritivo
• Útil quando conversa evoluiu para assunto diferente
• Ajuda na busca futura

Descrição:

• Resumo do que foi discutido
• Detalhes importantes da conversa
• Resultados ou próximos passos

Tags:

• Adicione novas tags conforme conversa evolui
• Remova tags irrelevantes
• Use tags para status: “resolvido”, “pendente”, “follow-up”

Agente: (se permitido)

• Troque agente durante conversa
• Útil para escalar para especialista

Exemplo de organização:

Antes: "Chat 1"
Depois: "Cliente João - Compra Notebook Gaming"

Tags: cliente-joao, vendas, notebook, gaming, orçamento-5k
Descrição: "Cliente interessado em notebook gaming até R$ 5.000. 
           Demonstrou interesse no modelo X. Aguardando proposta."

Conversando com os Agentes

Tipos de Entrada

Mensagens de texto

Entrada padrão mais comum:

• Digite sua mensagem na caixa de texto
• Pressione Enter para enviar
• Shift + Enter para quebra de linha
• Suporta texto longo e formatação simples

Dicas para melhores resultados:

✅ Seja específico: "Preciso de notebook para design gráfico, orçamento R$ 4000"
❌ Muito genérico: "Quero um computador"

✅ Forneça contexto: "Sou fotógrafo e preciso editar RAW de 50MB"
❌ Sem contexto: "O que é melhor?"

✅ Inclua preferências: "Prefiro marcas nacionais com boa garantia"
❌ Sem direcionamento: "Me ajude a escolher"

Envio de mídia

Anexar arquivos e imagens:

Formatos suportados:

• 🖼️ Imagens: PNG, JPG, JPEG, GIF, WebP
• 📄 Documentos: PDF, DOC, DOCX, TXT
• 📊 Planilhas: XLS, XLSX, CSV
• 🎵 Áudio: MP3, WAV, M4A, OGG

Como enviar:

1. Clique no ícone de “Anexar” (📎)
2. Selecione arquivo do seu computador
3. Ou arraste e solte diretamente no chat
4. Aguarde upload e processamento
5. Adicione texto explicativo se necessário

Casos de uso:

📷 Foto de produto com defeito para suporte
📄 Contrato para análise jurídica
📊 Planilha de dados para análise
🖼️ Design para feedback

Modelos que suportam mídia:

• GPT-4 Vision: Análise de imagens
• Gemini Pro Vision: Multimodal completo
• Claude 3: Documentos e imagens

Gravação de áudio

Funcionalidade de voz:

Como gravar:

1. Clique no ícone de “Microfone” (🎤)
2. Permita acesso ao microfone se solicitado
3. Fale sua mensagem - indicador mostra gravação ativa
4. Clique novamente para parar gravação
5. Áudio é enviado automaticamente

⚠️ Importante - Para áudio funcionar:

Opção 1: Modelo que aceita áudio

Use modelos nativos com suporte a áudio:
- Whisper (OpenAI) - especializado em transcrição
- Gemini Pro - multimodal com áudio
- Modelos específicos de cada provider

Opção 2: Tool Speech to Text

Configure tool speech_to_text no agente:
1. Vá em configurações do agente LLM
2. Seção "Tools" → Adicione "Speech to Text"  
3. Configure provider (OpenAI, Groq, Google)
4. Agente converte áudio → texto → processa

Qualidade do áudio:

• Ambiente silencioso para melhor transcrição
• Fale claramente e em ritmo normal
• Evite ruídos de fundo
• Teste com frases curtas primeiro

Casos de uso:

🎤 Reportar problema detalhado por voz
🗣️ Fazer pedido complexo falando
🎙️ Entrevista ou coleta de feedback
📞 Simular atendimento telefônico

Debug e Acompanhamento em Tempo Real

Funcionalidade de debug

O chat como ferramenta de debug:

A interface de chat não é apenas para conversar - é uma ferramenta completa de debug que mostra tudo que acontece “nos bastidores” da execução do agente.

O que você vê em tempo real:

• 🔄 Cada passo da execução em agentes Sequential
• 🌐 Chamadas para APIs e ferramentas externas
• 🤖 Decisões do LLM e raciocínio
• ⚙️ Execução de workflows passo a passo
• 🔁 Iterações de Loop Agents
• 📞 Chamadas de funções e retornos
• ⏱️ Tempos de execução de cada etapa

Debug de agentes Sequential

Acompanhando execução sequencial:

Exemplo: Agente de vendas com 3 sub-agentes

🚀 Iniciando execução...

📍 Passo 1: Qualificador de Leads
├── Analisando necessidades do cliente...
├── Identificando orçamento: R$ 5.000
├── Detectando urgência: Média
└── ✅ Qualificação concluída

📍 Passo 2: Demonstrador de Produtos  
├── Consultando base de produtos...
├── Filtrando por orçamento R$ 5.000
├── Selecionando 3 opções adequadas
└── ✅ Demonstração concluída

📍 Passo 3: Especialista em Fechamento
├── Analisando dados da qualificação
├── Criando proposta personalizada  
├── Adicionando senso de urgência
└── ✅ Proposta final gerada

🎯 Execução finalizada em 8.2s

Informações visíveis:

• Status de cada sub-agente
• Tempo gasto em cada etapa
• Dados passados entre agentes
• Erros ou falhas (se houver)

Debug de Workflows

Acompanhando fluxos complexos:

Exemplo: Workflow de aprovação de proposta

🔄 Workflow: Análise de Proposta

🟦 Node: Receber Dados
├── Input: Proposta comercial recebida
├── Validando formato...
└── ✅ Dados válidos

🟦 Node: Agente Revisor
├── Executando análise de conteúdo...
├── Verificando valores e termos...
├── Score de qualidade: 8.5/10
└── ✅ Revisão aprovada

🔷 Node: Condição (Score > 8.0?)
├── Avaliando: 8.5 > 8.0
├── Resultado: TRUE
└── ➡️ Seguindo para aprovação

🟦 Node: Aprovação Automática
├── Gerando contrato final...
├── Aplicando templates...
└── ✅ Contrato gerado

⏸️ Node: Delay (5 segundos)
├── Aguardando processamento...
└── ✅ Delay concluído

💬 Node: Mensagem Final
└── ✅ "Proposta aprovada e contrato enviado!"

Detalhes mostrados:

• Tipo de cada node (Agent, Condition, Message, Delay)
• Dados fluindo entre nodes
• Decisões de condicionais
• Tempo de delays
• Erros em qualquer ponto

Debug de Loop Agents

Acompanhando iterações:

Exemplo: Loop de refinamento de conteúdo

🔁 Loop Agent: Refinador de Conteúdo

=== ITERAÇÃO 1 ===
📝 Gerador: Criando conteúdo inicial
├── Baseado no pedido do usuário
├── Gerando primeira versão...
└── ✅ Conteúdo v1 criado

📊 Analisador: Avaliando qualidade
├── Score clareza: 6.5/10
├── Score persuasão: 7.0/10  
├── Score geral: 6.8/10
└── ❌ Abaixo do threshold (8.0)

=== ITERAÇÃO 2 ===
📝 Gerador: Refinando conteúdo
├── Aplicando feedback da análise
├── Melhorando clareza...
└── ✅ Conteúdo v2 criado

📊 Analisador: Reavaliando
├── Score clareza: 8.2/10
├── Score persuasão: 8.5/10
├── Score geral: 8.4/10
└── ✅ Acima do threshold!

🛑 Verificador: Usando exit_loop()
└── ✅ Loop finalizado

📋 Finalizador: Gerando resposta final
└── ✅ Resultado consolidado

Visibilidade completa:

• Número da iteração atual
• Progresso de cada sub-agente
• Métricas de qualidade
• Condições de parada
• Momento exato do exit_loop

Debug de chamadas de função

Monitorando tools e APIs:

Exemplo: Agente usando ferramentas externas

🔧 Chamada de Função: load_knowledge
├── Parâmetros: {"query": "garantia notebook", "tags": ["suporte"]}
├── Buscando na knowledge base...
├── Resultado: 3 chunks encontrados
└── ✅ Conhecimento carregado

🔧 Chamada de Função: get_product_info  
├── Parâmetros: {"product_id": "NB001", "include_price": true}
├── Consultando API de produtos...
├── Status: 200 OK
├── Dados: {"name": "Notebook Pro", "price": 4500, "stock": 12}
└── ✅ Produto encontrado

🔧 Chamada de Função: send_email
├── Parâmetros: {"to": "[e-mail]", "subject": "Proposta"}
├── Conectando com servidor SMTP...
├── Status: Email enviado
└── ✅ Comunicação realizada

Informações detalhadas:

• Nome da função chamada
• Parâmetros enviados
• Status da execução
• Dados retornados
• Tempo de resposta
• Erros (se houver)

Vantagens para debugging:

• Identifica gargalos de performance
• Detecta falhas em integrações
• Valida parâmetros enviados
• Confirma retornos esperados

Gerenciamento Avançado de Sessões

Organização e Produtividade

Sistema de tags eficiente

Estratégias de organização:

Por cliente:

cliente-joao, cliente-empresa-abc, cliente-vip
→ Facilita localizar conversas específicas

Por tipo de atendimento:

vendas, suporte, onboarding, demo, follow-up
→ Organiza por categoria de atividade

Por status:

pendente, resolvido, aguardando-cliente, escalado
→ Controla workflow de atendimento

Por produto/serviço:

notebook, smartphone, software, consultoria
→ Segmenta por área de negócio

Por prioridade:

urgente, alta, media, baixa
→ Prioriza atendimentos

Combinações úteis:

Exemplo: "cliente-vip + vendas + notebook + urgente"
→ Cliente VIP com demanda urgente de notebook

Busca avançada

Técnicas de busca eficiente:

Busca por conteúdo:

Digite palavras-chave do que foi discutido:
"problema login", "orçamento 5000", "garantia"

Busca por resultados:

"proposta enviada", "problema resolvido", "compra realizada"

Busca por datas:

Use filtros de data para período específico
"última semana", "dezembro 2024"

Combinação de filtros:

Agente: assistente_vendas
Tag: cliente-vip
Busca: "notebook gaming"
→ Conversas VIP sobre notebooks gaming

Análise de histórico

Extraindo insights das conversas:

Padrões de atendimento:

• Quais agentes são mais usados?
• Que tipos de dúvidas são mais comuns?
• Qual horário de maior atividade?

Performance dos agentes:

• Conversas que geraram vendas
• Problemas resolvidos com sucesso
• Tempo médio de resolução

Evolução do cliente:

• Histórico completo de interações
• Preferências identificadas ao longo do tempo
• Produtos ou serviços de interesse

Oportunidades:

• Clientes com potencial não explorado
• Problemas recorrentes para melhorar
• Agentes que precisam de ajustes

Melhores Práticas

Otimizando conversas

Para melhores resultados:

Preparação:

• Escolha o agente certo para cada tipo de conversa
• Configure nome e tags descritivas desde o início
• Tenha contexto claro do que quer alcançar

Durante a conversa:

• Seja específico e forneça contexto adequado
• Use mídia quando apropriado (imagens, documentos)
• Acompanhe o debug para entender o raciocínio
• Faça perguntas de follow-up para aprofundar

Após a conversa:

• Atualize tags baseado no que foi discutido
• Adicione descrição resumindo resultados
• Marque status (resolvido, pendente, etc.)
• Documente próximos passos se necessário

Gestão de dados e privacidade

Cuidados importantes:

Informações sensíveis:

• Evite compartilhar dados pessoais desnecessários
• Use códigos ou iniciais quando possível
• Considere implicações de privacidade

Organização segura:

• Use tags que não exponham informações confidenciais
• Seja criterioso com nomes de sessões
• Faça limpeza periódica de conversas antigas
• Configure retenção adequada de dados

Backup e continuidade:

• Exporte conversas importantes se necessário
• Documente insights valiosos externamente
• Mantenha histórico de decisões importantes

Trabalho em equipe

Compartilhando conhecimento:

Padronização:

• Use convenções consistentes de nomenclatura
• Defina padrão de tags para a equipe
• Documente boas práticas da organização

Colaboração:

• Compartilhe sessões relevantes quando apropriado
• Use tags de status para coordenação
• Documente aprendizados para reutilização

Treinamento:

• Use conversas de exemplo para treinar novos usuários
• Analise conversas bem-sucedidas para replicar
• Identifique padrões de sucesso

Resolução de Problemas

Problemas comuns

1. Áudio não funciona:

• ✅ Verifique permissões do microfone no navegador
• ✅ Configure tool speech_to_text no agente se modelo não suporta áudio nativo
• ✅ Teste com frase curta primeiro
• ✅ Verifique se provider de speech_to_text está configurado

2. Upload de mídia falha:

• ✅ Verifique tamanho do arquivo (limites por tipo)
• ✅ Confirme formato suportado
• ✅ Teste conexão de internet
• ✅ Tente arquivo menor para testar

3. Agente não responde como esperado:

• ✅ Use funcionalidade de debug para entender execução
• ✅ Verifique se agente está configurado corretamente
• ✅ Seja mais específico na pergunta
• ✅ Forneça mais contexto sobre o que precisa

4. Busca não encontra conversas:

• ✅ Experimente palavras-chave diferentes
• ✅ Verifique filtros ativos
• ✅ Use tags em vez de busca por texto
• ✅ Ajuste período de data se aplicável

5. Performance lenta:

• ✅ Limite número de sessões carregadas
• ✅ Use filtros para reduzir lista
• ✅ Faça limpeza de sessões antigas
• ✅ Verifique conexão de internet

Próximos Passos

Configurar Agentes

Crie e configure agentes para suas conversas

Knowledge Base

Configure base de conhecimento para agentes mais precisos

Agentes de Workflow

Entenda debug de workflows complexos

Configurações

Configure ferramentas e integrações

---

💬 Agora você domina a interface de chat! Use essas funcionalidades para ter conversas produtivas, debugar agentes complexos e organizar seu histórico de forma eficiente!