Visão geral
O Editor de Fluxos é uma tela visual onde você projeta fluxos de conversa posicionando nós e conectando-os com arestas. Ele é construído sobre o React Flow, proporcionando uma experiência suave e intuitiva de arrastar e soltar.Tela
A tela é seu espaço de trabalho. Você pode:- Mover — Clique e arraste no espaço vazio para navegar
- Zoom — Use a roda do mouse ou gesto de pinçar para ampliar/reduzir
- Selecionar — Clique em um nó para selecioná-lo
Barra de ferramentas
A barra de ferramentas contém todos os tipos de nós disponíveis organizados por categoria. Clique ou arraste um nó da barra de ferramentas para adicioná-lo à tela. Em dispositivos móveis, a barra de ferramentas se converte em um modal para facilitar o acesso.Nós
Todo fluxo começa com um nó Início. A partir dele, você conecta nós para definir o caminho da conversa. Cada tipo de nó tem uma função específica:Mensagens
Envie texto, mídia e conteúdo interativo para o usuário.
Entrada do Usuário
Aguarde respostas do usuário com botões, listas ou menus de texto.
Lógica
Direcione a conversa com base em condições e valores de variáveis.
Integrações
Chame APIs externas e serviços de IA.
Dados
Analise, filtre e transforme dados.
Ações
Transfira para agentes ou encerre a conversa.
Conexões
Para conectar dois nós:- Passe o mouse sobre o ponto de saída de um nó
- Clique e arraste até o ponto de entrada de outro nó
- Solte para criar a conexão
Regras de conexão
- O nó Início não pode receber conexões de entrada
- Nós com pontos de opção (Botão, Lista, Condição, Requisição API) devem usar seus pontos de saída específicos — não o genérico
- Cada ponto de opção suporta exatamente uma conexão de saída
- Auto-loops só são permitidos em nós de espera (Botão, Lista, Menu de Mensagem) via pontos de opção
- Conexões duplicadas entre os mesmos nós pelo mesmo ponto não são permitidas
Copiar e Colar
Você pode copiar nós selecionados e colá-los em outro lugar na tela. Os nós colados recebem novos IDs e mantêm suas posições relativas.Desfazer e Refazer
O editor suporta desfazer/refazer para a maioria das operações, permitindo que você experimente livremente.Design responsivo
O editor se adapta a diferentes tamanhos de tela:| Viewport | Largura | Largura do nó |
|---|---|---|
| Desktop | > 1024px | 340px |
| Tablet | 768-1024px | 260px |
| Mobile | ≤ 768px | 200px |
| Mobile pequeno | ≤ 480px | 140px |
Temas
O editor suporta modos claro e escuro. Alterne entre eles usando o seletor de tema no cabeçalho da aplicação.Idiomas
O editor está disponível em:- Inglês (en)
- Português - Brasil (pt-BR)