@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20

package/src/emojiCatalog.ts

@@ -0,0 +1,189 @@
+/**
+ * Catálogo de emojis com palavras-chave em português, usado pela busca do seletor.
+ *
+ * Fica em módulo próprio (e não dentro do `EmojiPicker`) porque a busca precisa varrer TODAS as
+ * categorias, não só a aberta — o índice é montado uma vez, no carregamento, e não a cada tecla.
+ *
+ * As palavras-chave são de busca, não legendas: incluem sinônimos e formas sem acento, porque quem
+ * digita rápido escreve "coracao" e "polegar" com a mesma frequência que a forma correta.
+ */
+
+export type EmojiEntry = {
+  readonly emoji: string
+  readonly keywords: readonly string[]
+}
+
+export type EmojiCategory = {
+  readonly name: string
+  readonly entries: readonly EmojiEntry[]
+}
+
+export const EMOJI_CATEGORIES: readonly EmojiCategory[] = [
+  {
+    name: 'Smileys',
+    entries: [
+      { emoji: '😀', keywords: ['sorriso', 'feliz', 'alegre'] },
+      { emoji: '😃', keywords: ['sorriso', 'feliz', 'animado'] },
+      { emoji: '😄', keywords: ['sorriso', 'feliz', 'risada'] },
+      { emoji: '😁', keywords: ['sorriso', 'dentes', 'feliz'] },
+      { emoji: '😅', keywords: ['alivio', 'alívio', 'suor', 'nervoso'] },
+      { emoji: '😂', keywords: ['risada', 'chorando', 'engracado', 'engraçado'] },
+      { emoji: '🤣', keywords: ['risada', 'rolando', 'engracado', 'engraçado'] },
+      { emoji: '😊', keywords: ['sorriso', 'timido', 'tímido', 'feliz'] },
+      { emoji: '😇', keywords: ['anjo', 'inocente', 'santo'] },
+      { emoji: '🙂', keywords: ['sorriso', 'leve', 'ok'] },
+      { emoji: '😉', keywords: ['piscada', 'piscar', 'flerte'] },
+      { emoji: '😌', keywords: ['aliviado', 'calmo', 'tranquilo'] },
+      { emoji: '😍', keywords: ['amor', 'apaixonado', 'coracao', 'coração', 'olhos'] },
+      { emoji: '🥰', keywords: ['amor', 'apaixonado', 'carinho'] },
+      { emoji: '😘', keywords: ['beijo', 'amor', 'carinho'] },
+      { emoji: '😋', keywords: ['gostoso', 'delicia', 'delícia', 'lingua', 'língua'] },
+      { emoji: '😜', keywords: ['lingua', 'língua', 'brincadeira', 'piscada'] },
+      { emoji: '🤪', keywords: ['maluco', 'doido', 'brincadeira'] },
+      { emoji: '🤔', keywords: ['pensando', 'duvida', 'dúvida', 'hmm'] },
+      { emoji: '🤗', keywords: ['abraco', 'abraço', 'carinho'] },
+      { emoji: '😐', keywords: ['neutro', 'serio', 'sério', 'indiferente'] },
+      { emoji: '😴', keywords: ['dormindo', 'sono', 'cansado'] },
+      { emoji: '😭', keywords: ['chorando', 'triste', 'lagrima', 'lágrima'] },
+      { emoji: '😢', keywords: ['triste', 'chorando', 'lagrima', 'lágrima'] },
+      { emoji: '😡', keywords: ['raiva', 'bravo', 'irritado'] },
+      { emoji: '😱', keywords: ['susto', 'medo', 'assustado'] },
+      { emoji: '🤯', keywords: ['explodindo', 'chocado', 'surpresa'] },
+      { emoji: '😎', keywords: ['oculos', 'óculos', 'legal', 'estiloso'] },
+      { emoji: '🥳', keywords: ['festa', 'comemorar', 'aniversario', 'aniversário'] },
+      { emoji: '😷', keywords: ['mascara', 'máscara', 'doente', 'saude', 'saúde'] },
+    ],
+  },
+  {
+    name: 'Gestos',
+    entries: [
+      { emoji: '👍', keywords: ['joia', 'jóia', 'polegar', 'ok', 'positivo', 'curtir'] },
+      { emoji: '👎', keywords: ['polegar', 'negativo', 'ruim', 'nao', 'não'] },
+      { emoji: '👌', keywords: ['ok', 'certo', 'perfeito'] },
+      { emoji: '✌️', keywords: ['paz', 'vitoria', 'vitória', 'dois'] },
+      { emoji: '🤞', keywords: ['sorte', 'dedos', 'cruzados', 'torcendo'] },
+      { emoji: '🤙', keywords: ['chama', 'ligar', 'shaka'] },
+      { emoji: '👋', keywords: ['tchau', 'ola', 'olá', 'aceno', 'oi'] },
+      { emoji: '✋', keywords: ['mao', 'mão', 'parar', 'pare'] },
+      { emoji: '👏', keywords: ['palmas', 'aplauso', 'parabens', 'parabéns'] },
+      { emoji: '🙌', keywords: ['comemorar', 'maos', 'mãos', 'sucesso'] },
+      { emoji: '🤝', keywords: ['acordo', 'aperto', 'mao', 'mão', 'negocio', 'negócio', 'parceria'] },
+      { emoji: '🙏', keywords: ['obrigado', 'reza', 'oracao', 'oração', 'por favor'] },
+      { emoji: '✍️', keywords: ['escrever', 'assinar', 'assinatura'] },
+      { emoji: '💪', keywords: ['forca', 'força', 'musculo', 'músculo', 'braco', 'braço'] },
+      { emoji: '👇', keywords: ['abaixo', 'baixo', 'apontar', 'seta'] },
+      { emoji: '👉', keywords: ['direita', 'apontar', 'seta'] },
+      { emoji: '☝️', keywords: ['acima', 'cima', 'apontar', 'atencao', 'atenção'] },
+    ],
+  },
+  {
+    name: 'Corações',
+    entries: [
+      { emoji: '❤️', keywords: ['coracao', 'coração', 'amor', 'vermelho'] },
+      { emoji: '🧡', keywords: ['coracao', 'coração', 'laranja'] },
+      { emoji: '💛', keywords: ['coracao', 'coração', 'amarelo'] },
+      { emoji: '💚', keywords: ['coracao', 'coração', 'verde'] },
+      { emoji: '💙', keywords: ['coracao', 'coração', 'azul'] },
+      { emoji: '💜', keywords: ['coracao', 'coração', 'roxo'] },
+      { emoji: '🖤', keywords: ['coracao', 'coração', 'preto'] },
+      { emoji: '🤍', keywords: ['coracao', 'coração', 'branco'] },
+      { emoji: '💔', keywords: ['coracao', 'coração', 'partido', 'triste'] },
+      { emoji: '💕', keywords: ['coracao', 'coração', 'amor', 'casal'] },
+      { emoji: '💖', keywords: ['coracao', 'coração', 'brilho', 'amor'] },
+      { emoji: '💝', keywords: ['coracao', 'coração', 'presente', 'laco', 'laço'] },
+    ],
+  },
+  {
+    name: 'Negócios',
+    entries: [
+      { emoji: '🏠', keywords: ['casa', 'imovel', 'imóvel', 'residencia', 'residência', 'moradia'] },
+      { emoji: '🏡', keywords: ['casa', 'imovel', 'imóvel', 'jardim', 'moradia'] },
+      { emoji: '🏢', keywords: ['predio', 'prédio', 'empresa', 'escritorio', 'escritório'] },
+      { emoji: '🏦', keywords: ['banco', 'financiamento', 'agencia', 'agência'] },
+      { emoji: '🔑', keywords: ['chave', 'casa', 'entrega', 'imovel', 'imóvel'] },
+      { emoji: '📄', keywords: ['documento', 'papel', 'contrato', 'arquivo'] },
+      { emoji: '📋', keywords: ['prancheta', 'lista', 'documento', 'checklist'] },
+      { emoji: '📝', keywords: ['anotar', 'escrever', 'nota', 'formulario', 'formulário'] },
+      { emoji: '✅', keywords: ['ok', 'certo', 'aprovado', 'concluido', 'concluído', 'check'] },
+      { emoji: '❌', keywords: ['errado', 'negado', 'recusado', 'cancelar'] },
+      { emoji: '⚠️', keywords: ['atencao', 'atenção', 'alerta', 'cuidado'] },
+      { emoji: '💰', keywords: ['dinheiro', 'valor', 'saco', 'grana', 'pagamento'] },
+      { emoji: '💵', keywords: ['dinheiro', 'nota', 'valor', 'pagamento'] },
+      { emoji: '💳', keywords: ['cartao', 'cartão', 'credito', 'crédito', 'pagamento'] },
+      { emoji: '🧾', keywords: ['recibo', 'nota', 'fiscal', 'comprovante'] },
+      { emoji: '📊', keywords: ['grafico', 'gráfico', 'relatorio', 'relatório', 'dados'] },
+      { emoji: '📈', keywords: ['grafico', 'gráfico', 'subindo', 'crescimento', 'alta'] },
+      { emoji: '📉', keywords: ['grafico', 'gráfico', 'caindo', 'queda', 'baixa'] },
+      { emoji: '🗓️', keywords: ['calendario', 'calendário', 'data', 'agenda', 'prazo'] },
+      { emoji: '⏰', keywords: ['relogio', 'relógio', 'hora', 'prazo', 'alarme'] },
+      { emoji: '📞', keywords: ['telefone', 'ligar', 'contato', 'chamada'] },
+      { emoji: '📱', keywords: ['celular', 'telefone', 'whatsapp', 'contato'] },
+      { emoji: '📧', keywords: ['email', 'e-mail', 'mensagem', 'contato'] },
+      { emoji: '📎', keywords: ['anexo', 'clipe', 'arquivo'] },
+      { emoji: '🔍', keywords: ['buscar', 'procurar', 'lupa', 'pesquisa', 'consulta'] },
+      { emoji: '🤖', keywords: ['robo', 'robô', 'bot', 'assistente', 'automatico', 'automático'] },
+      { emoji: '💬', keywords: ['mensagem', 'conversa', 'balao', 'balão', 'chat'] },
+    ],
+  },
+  {
+    name: 'Objetos',
+    entries: [
+      { emoji: '🎁', keywords: ['presente', 'brinde', 'surpresa'] },
+      { emoji: '🎉', keywords: ['festa', 'comemorar', 'parabens', 'parabéns'] },
+      { emoji: '🎊', keywords: ['festa', 'confete', 'comemorar'] },
+      { emoji: '🎂', keywords: ['bolo', 'aniversario', 'aniversário', 'festa'] },
+      { emoji: '💡', keywords: ['ideia', 'ideía', 'lampada', 'lâmpada', 'dica'] },
+      { emoji: '🔔', keywords: ['sino', 'aviso', 'notificacao', 'notificação', 'lembrete'] },
+      { emoji: '⭐', keywords: ['estrela', 'favorito', 'avaliacao', 'avaliação'] },
+      { emoji: '🔥', keywords: ['fogo', 'quente', 'destaque', 'top'] },
+      { emoji: '🚀', keywords: ['foguete', 'rapido', 'rápido', 'lancamento', 'lançamento'] },
+      { emoji: '💻', keywords: ['computador', 'notebook', 'trabalho'] },
+      { emoji: '📷', keywords: ['foto', 'camera', 'câmera', 'imagem'] },
+      { emoji: '🚗', keywords: ['carro', 'veiculo', 'veículo', 'automovel', 'automóvel'] },
+      { emoji: '✈️', keywords: ['aviao', 'avião', 'viagem', 'voo'] },
+    ],
+  },
+  {
+    name: 'Comida',
+    entries: [
+      { emoji: '🍔', keywords: ['hamburguer', 'hambúrguer', 'lanche', 'comida'] },
+      { emoji: '🍕', keywords: ['pizza', 'comida', 'lanche'] },
+      { emoji: '🍟', keywords: ['batata', 'frita', 'lanche'] },
+      { emoji: '🍿', keywords: ['pipoca', 'cinema', 'filme'] },
+      { emoji: '🍞', keywords: ['pao', 'pão', 'padaria'] },
+      { emoji: '🧀', keywords: ['queijo', 'comida'] },
+      { emoji: '🥗', keywords: ['salada', 'saudavel', 'saudável', 'comida'] },
+      { emoji: '☕', keywords: ['cafe', 'café', 'bebida', 'quente'] },
+      { emoji: '🍺', keywords: ['cerveja', 'bebida', 'chopp'] },
+      { emoji: '🍷', keywords: ['vinho', 'bebida', 'taca', 'taça'] },
+      { emoji: '🥂', keywords: ['brinde', 'comemorar', 'champanhe'] },
+      { emoji: '🥤', keywords: ['refrigerante', 'bebida', 'copo'] },
+    ],
+  },
+] as const
+
+/**
+ * Índice achatado: a busca ignora categoria, porque quem digita "casa" quer o resultado venha de
+ * onde vier. A ordem preserva a das categorias, então o resultado sai agrupado por afinidade sem
+ * precisar ordenar.
+ */
+const ALL_ENTRIES: readonly EmojiEntry[] = EMOJI_CATEGORIES.flatMap((category) => category.entries)
+
+function normalize(value: string): string {
+  return value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .trim()
+}
+
+/**
+ * Busca por prefixo de palavra-chave, não por substring: "ca" traz "casa" e "cartão", mas "sa" não
+ * traz "casa" — casar no meio da palavra devolvia resultado que ninguém consegue explicar.
+ */
+export function searchEmojis(query: string): readonly EmojiEntry[] {
+  const term = normalize(query)
+  if (!term) return ALL_ENTRIES
+
+  return ALL_ENTRIES.filter((entry) => entry.keywords.some((keyword) => normalize(keyword).startsWith(term)))
+}

package/src/flows/FlowGroupHeader.tsx

@@ -18,10 +18,20 @@ export function FlowGroupHeader({ data }: NodeProps) {
   return (
     <div className="flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap">
       <span>{label}</span>
-      <button type="button" onClick={onFocus} title={labels.flowGroup.focus} className="hover:text-blue-600 dark:hover:text-blue-400">
+      <button
+        type="button"
+        onClick={onFocus}
+        title={labels.flowGroup.focus}
+        className="hover:text-blue-600 dark:hover:text-blue-400"
+      >
         <Maximize2 size={12} />
       </button>
-      <button type="button" onClick={onClose} title={labels.flowGroup.close} className="hover:text-red-600 dark:hover:text-red-400">
+      <button
+        type="button"
+        onClick={onClose}
+        title={labels.flowGroup.close}
+        className="hover:text-red-600 dark:hover:text-red-400"
+      >
         <X size={12} />
       </button>
     </div>

package/src/flows/FlowMapCanvas.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { ReactFlow, Background, Controls, MarkerType, type Node, type Edge } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { useDarkMode } from '../useDarkMode'
+import { useIsDarkTheme } from '../useDarkMode'
 import { flowMapNodeTypes, type FlowMapNodeData } from './FlowMapNode'
 import { computeFlowMapLayout, crossFlowTargetsOf, type FlowGraphData } from './flowGraph'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
@@ -23,22 +23,25 @@ export interface FlowMapCanvasProps {
 // visão hierárquica onde cada fluxo é um único nó, ligado por saltos "flow:<key>".
 export function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }: FlowMapCanvasProps) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
-  const { isDark } = useDarkMode()
+  const isDark = useIsDarkTheme()
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey])
 
   const nodes = useMemo<Node[]>(
-    () => Object.values(graphs).map((g): Node => ({
-      id: g.key,
-      type: 'flowMapNode',
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key),
-      } satisfies FlowMapNodeData,
-    })),
+    () =>
+      Object.values(graphs).map(
+        (g): Node => ({
+          id: g.key,
+          type: 'flowMapNode',
+          position: positions[g.key] ?? { x: 0, y: 0 },
+          data: {
+            label: g.label,
+            nodeCount: Object.keys(g.nodes).length,
+            isRoot: g.key === rootKey,
+            labels,
+            onOpen: () => onOpenFlow(g.key),
+          } satisfies FlowMapNodeData,
+        }),
+      ),
     [graphs, positions, rootKey, onOpenFlow, labels],
   )
 

package/src/flows/FlowMapNode.tsx

@@ -21,7 +21,9 @@ export function FlowMapNode({ data }: NodeProps) {
       <div className="flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300">
         <GitBranch size={14} />
         <span className="text-sm font-semibold truncate">{label}</span>
-        {isRoot && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />}
+        {isRoot && (
+          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />
+        )}
       </div>
       <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{labels.flowMap.nodeCount(nodeCount)}</p>
       <button

package/src/flows/FlowNodeCard.tsx

@@ -1,5 +1,17 @@
 import { Handle, Position, type NodeProps } from '@xyflow/react'
-import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag, type LucideIcon } from 'lucide-react'
+import {
+  MessageCircleQuestion,
+  GitBranch,
+  Zap,
+  ListTree,
+  Diamond,
+  AlertTriangle,
+  AlertCircle,
+  Headset,
+  Clock3,
+  ShoppingBag,
+  type LucideIcon,
+} from 'lucide-react'
 import type { FlowEditorLabels } from './labels'
 import type { FlowNodeData, GraphIssue } from './flowGraph'
 
@@ -83,7 +95,9 @@ function sourceRows(node: FlowNodeData, labels: FlowEditorLabels): { id: string;
 function SourceRow({ label, isDefault, handleId }: { label: string; isDefault: boolean; handleId: string }) {
   return (
     <div className="relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3">
-      <span className={`text-xs truncate flex-1 ${isDefault ? 'italic text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}>
+      <span
+        className={`text-xs truncate flex-1 ${isDefault ? 'italic text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}
+      >
         {label}
       </span>
       <Handle
@@ -98,10 +112,14 @@ function SourceRow({ label, isDefault, handleId }: { label: string; isDefault: b
 }
 
 export function FlowNodeCard({ data }: NodeProps) {
-  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data as unknown as FlowNodeCardData
+  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } =
+    data as unknown as FlowNodeCardData
   const label = nodeLabel(node, labels)
   const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons }
-  const Icon = node.type === 'action' && node.actionKind ? (iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type]) : NODE_TYPE_ICON[node.type]
+  const Icon =
+    node.type === 'action' && node.actionKind
+      ? (iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type])
+      : NODE_TYPE_ICON[node.type]
   const rows = sourceRows(node, labels)
   const hasError = issues.some((i) => i.severity === 'error')
   const hasWarning = !hasError && issues.some((i) => i.severity === 'warning')

package/src/flows/FlowNodePanel.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { Plus, Trash2, Save, X, AlertTriangle, AlertCircle } from 'lucide-react'
 import { FlowWhatsAppPreview } from './FlowWhatsAppPreview'
 import { nodeLabel } from './FlowNodeCard'
-import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS } from './flowGraph'
+import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS, BUILT_IN_ACTION_KINDS } from './flowGraph'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import type { FlowGraphData, FlowNodeData, GraphIssue } from './flowGraph'
 
@@ -73,6 +73,14 @@ export interface FlowNodePanelProps {
   onChange: (updated: FlowNodeData) => void
   onDelete: (nodeId: string) => void
   labels?: Partial<FlowEditorLabels>
+  /**
+   * Seletor de arquivos do nó `send_media`, renderizado no lugar da mensagem direta.
+   *
+   * Slot, e não uma lista de arquivos por prop, porque a biblioteca é do host: upload, permissão e
+   * URL assinada são dele, e o painel não tem como buscar nada. Ausente, o nó continua editável —
+   * só não dá para anexar por aqui.
+   */
+  renderMediaPicker?: (node: FlowNodeData) => ReactNode
 }
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/flows/FlowNodePanel.tsx —
@@ -86,18 +94,26 @@ export function FlowNodePanel({
   onChange,
   onDelete,
   labels: labelsOverride,
+  renderMediaPicker,
 }: FlowNodePanelProps) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
   const [draft, setDraft] = useState<FlowNodeData>(node)
   const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id)
   const isFixedLogic = draft.type === 'entrada_choice'
   const isAction = draft.type === 'action'
+  const isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA
   const isCondition = draft.type === 'condition'
   const isStart = graph.startNodeId === node.id
   const nodeIssues = issues.filter((i) => i.nodeId === node.id)
   // Chaves já usadas por perguntas deste fluxo — sugestão pro campo de variável da condição,
   // sem travar em texto livre (a variável pode ter vindo de outro fluxo ou de um cálculo derivado).
-  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key): key is string => !!key))]
+  const knownContextKeys = [
+    ...new Set(
+      Object.values(graph.nodes)
+        .map((n) => n.contextKey)
+        .filter((key): key is string => !!key),
+    ),
+  ]
   const conditionAnswerIds = isCondition ? ['true', 'false'] : (draft.options ?? []).map(([id]) => id)
 
   function updateNextString(value: string) {
@@ -106,7 +122,8 @@ export function FlowNodePanel({
 
   function updateNextByAnswer(answerId: string, value: string) {
     setDraft((prev) => {
-      const current = typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
+      const current =
+        typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
       return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } }
     })
   }
@@ -129,7 +146,10 @@ export function FlowNodePanel({
   }
 
   function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']] }))
+    setDraft((prev) => ({
+      ...prev,
+      options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']],
+    }))
   }
 
   function removeOption(index: number) {
@@ -140,12 +160,16 @@ export function FlowNodePanel({
     return (
       <>
         {otherNodeIds.map((id) => (
-          <option key={id} value={id}>{truncateLabel(nodeLabel(graph.nodes[id], labels))}</option>
+          <option key={id} value={id}>
+            {truncateLabel(nodeLabel(graph.nodes[id], labels))}
+          </option>
         ))}
         {otherFlows.length > 0 && (
           <optgroup label={labels.nodePanel.otherFlowsGroup}>
             {otherFlows.map((flow) => (
-              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>{flow.label}</option>
+              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>
+                {flow.label}
+              </option>
             ))}
           </optgroup>
         )}
@@ -157,13 +181,17 @@ export function FlowNodePanel({
     <div className="fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col">
       <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700">
         <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{labels.nodePanel.title}</h3>
-        <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X size={18} /></button>
+        <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <X size={18} />
+        </button>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {nodeIssues.length > 0 && (
           <div className="rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5">
-            {nodeIssues.map((issue, i) => <IssueRow key={i} issue={issue} />)}
+            {nodeIssues.map((issue, i) => (
+              <IssueRow key={i} issue={issue} />
+            ))}
           </div>
         )}
 
@@ -185,21 +213,33 @@ export function FlowNodePanel({
 
         {draft.contextKey && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.contextKey}</label>
-            <input value={draft.contextKey} disabled className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" />
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.contextKey}
+            </label>
+            <input
+              value={draft.contextKey}
+              disabled
+              className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500"
+            />
           </div>
         )}
 
         {!isFixedLogic && !isAction && !isCondition && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.questionType}</label>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.questionType}
+            </label>
             <select
               value={draft.questionType ?? 'text'}
-              onChange={(e) => setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))
+              }
               className={`w-full mt-1 ${SELECT_CLASSNAME}`}
             >
               {Object.entries(labels.questionTypeLabels).map(([key, label]) => (
-                <option key={key} value={key}>{label}</option>
+                <option key={key} value={key}>
+                  {label}
+                </option>
               ))}
             </select>
           </div>
@@ -218,7 +258,9 @@ export function FlowNodePanel({
         {isCondition && (
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionVariable}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionVariable}
+              </label>
               <input
                 value={draft.conditionContextKey ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value }))}
@@ -226,23 +268,36 @@ export function FlowNodePanel({
                 className={`w-full mt-1 ${INPUT_CLASSNAME}`}
               />
               <datalist id="condition-context-keys">
-                {knownContextKeys.map((key) => <option key={key} value={key} />)}
+                {knownContextKeys.map((key) => (
+                  <option key={key} value={key} />
+                ))}
               </datalist>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionOperator}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionOperator}
+              </label>
               <select
                 value={draft.conditionOperator ?? '>'}
-                onChange={(e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value as FlowNodeData['conditionOperator'] }))}
+                onChange={(e) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    conditionOperator: e.target.value as FlowNodeData['conditionOperator'],
+                  }))
+                }
                 className={`w-full mt-1 ${SELECT_CLASSNAME}`}
               >
                 {CONDITION_OPERATORS.map((operator) => (
-                  <option key={operator} value={operator}>{labels.conditionOperatorLabels[operator] ?? operator}</option>
+                  <option key={operator} value={operator}>
+                    {labels.conditionOperatorLabels[operator] ?? operator}
+                  </option>
                 ))}
               </select>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionValue}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionValue}
+              </label>
               <input
                 value={draft.conditionValue ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value }))}
@@ -262,7 +317,21 @@ export function FlowNodePanel({
           />
         )}
 
-        {isAction && draft.actionKind !== 'send_product_list' && (
+        {/* Os arquivos moram na biblioteca, não no grafo — trocar o material não repassa pelo editor. */}
+        {isSendMedia && (
+          <div>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.media}</label>
+            <div className="mt-1">
+              {renderMediaPicker?.(node) ?? (
+                <p className="text-xs text-gray-400">{labels.nodePanel.mediaUnavailable}</p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* `send_media` fica de fora: o handler do módulo só envia os anexos, então um campo de
+            mensagem aqui seria texto que o cliente nunca recebe. A legenda é por arquivo. */}
+        {isAction && draft.actionKind !== 'send_product_list' && !isSendMedia && (
           <WhatsAppTextField
             label={labels.nodePanel.directMessage}
             value={draft.directMessage ?? ''}
@@ -283,11 +352,21 @@ export function FlowNodePanel({
             <div className="space-y-2">
               {(draft.options ?? []).map(([id, label], i) => (
                 <div key={i} className="flex items-center gap-2">
-                  <input value={id} onChange={(e) => updateOption(i, 0, e.target.value)} placeholder={labels.nodePanel.optionId}
-                    className={`w-16 ${INPUT_CLASSNAME}`} />
-                  <input value={label} onChange={(e) => updateOption(i, 1, e.target.value)} placeholder={labels.nodePanel.optionLabel}
-                    className={`flex-1 ${INPUT_CLASSNAME}`} />
-                  <button onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600"><Trash2 size={14} /></button>
+                  <input
+                    value={id}
+                    onChange={(e) => updateOption(i, 0, e.target.value)}
+                    placeholder={labels.nodePanel.optionId}
+                    className={`w-16 ${INPUT_CLASSNAME}`}
+                  />
+                  <input
+                    value={label}
+                    onChange={(e) => updateOption(i, 1, e.target.value)}
+                    placeholder={labels.nodePanel.optionLabel}
+                    className={`flex-1 ${INPUT_CLASSNAME}`}
+                  />
+                  <button onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600">
+                    <Trash2 size={14} />
+                  </button>
                 </div>
               ))}
             </div>
@@ -299,8 +378,11 @@ export function FlowNodePanel({
             <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.next}</label>
             <p className="text-[11px] text-gray-400 dark:text-gray-500 mb-1">{labels.nodePanel.nextHint}</p>
             {typeof draft.next !== 'object' && !isCondition ? (
-              <select value={typeof draft.next === 'string' ? draft.next : ''} onChange={(e) => updateNextString(e.target.value)}
-                className={`w-full mt-1 ${SELECT_CLASSNAME}`}>
+              <select
+                value={typeof draft.next === 'string' ? draft.next : ''}
+                onChange={(e) => updateNextString(e.target.value)}
+                className={`w-full mt-1 ${SELECT_CLASSNAME}`}
+              >
                 <option value="">—</option>
                 {nextNodeOptions()}
               </select>
@@ -309,10 +391,17 @@ export function FlowNodePanel({
                 {conditionAnswerIds.map((id) => (
                   <div key={id} className="flex items-center gap-2">
                     <span className="text-xs text-gray-500 w-32 shrink-0">
-                      {isCondition ? (id === 'true' ? labels.nodePanel.conditionTrue : labels.nodePanel.conditionFalse) : labels.nodePanel.nextByAnswer(id)}
+                      {isCondition
+                        ? id === 'true'
+                          ? labels.nodePanel.conditionTrue
+                          : labels.nodePanel.conditionFalse
+                        : labels.nodePanel.nextByAnswer(id)}
                     </span>
-                    <select value={draft.next && typeof draft.next === 'object' ? draft.next.byAnswer[id] ?? '' : ''} onChange={(e) => updateNextByAnswer(id, e.target.value)}
-                      className={`flex-1 ${SELECT_CLASSNAME}`}>
+                    <select
+                      value={draft.next && typeof draft.next === 'object' ? (draft.next.byAnswer[id] ?? '') : ''}
+                      onChange={(e) => updateNextByAnswer(id, e.target.value)}
+                      className={`flex-1 ${SELECT_CLASSNAME}`}
+                    >
                       <option value="">—</option>
                       {nextNodeOptions()}
                     </select>
@@ -322,8 +411,11 @@ export function FlowNodePanel({
                   <span className="text-xs text-gray-500 w-32 shrink-0">
                     {isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault}
                   </span>
-                  <select value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''} onChange={(e) => updateNextDefault(e.target.value)}
-                    className={`flex-1 ${SELECT_CLASSNAME}`}>
+                  <select
+                    value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''}
+                    onChange={(e) => updateNextDefault(e.target.value)}
+                    className={`flex-1 ${SELECT_CLASSNAME}`}
+                  >
                     <option value="">—</option>
                     {nextNodeOptions()}
                   </select>
@@ -335,12 +427,17 @@ export function FlowNodePanel({
       </div>
 
       <div className="p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2">
-        <button onClick={() => onChange(draft)} className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+        <button
+          onClick={() => onChange(draft)}
+          className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
           <Save size={14} /> {labels.nodePanel.save}
         </button>
         {!isStart && (
           <button
-            onClick={() => { if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id) }}
+            onClick={() => {
+              if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id)
+            }}
             title={labels.nodePanel.delete}
             className="px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg"
           >