> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whatabot.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor de Fluxos

> O editor visual de arrastar e soltar para construir fluxos de conversa no WhatsApp.

## 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:

<CardGroup cols={2}>
  <Card title="Mensagens" icon="message">
    Envie texto, mídia e conteúdo interativo para o usuário.
  </Card>

  <Card title="Entrada do Usuário" icon="hand-pointer">
    Aguarde respostas do usuário com botões, listas ou menus de texto.
  </Card>

  <Card title="Lógica" icon="code-branch">
    Direcione a conversa com base em condições e valores de variáveis.
  </Card>

  <Card title="Integrações" icon="plug">
    Chame APIs externas e serviços de IA.
  </Card>

  <Card title="Dados" icon="database">
    Analise, filtre e transforme dados.
  </Card>

  <Card title="Ações" icon="flag-checkered">
    Transfira para agentes ou encerre a conversa.
  </Card>
</CardGroup>

## Conexões

Para conectar dois nós:

1. Passe o mouse sobre o **ponto de saída** de um nó
2. Clique e arraste até o **ponto de entrada** de outro nó
3. 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)