From a4144dd39e0284d0582100832a074861680f86fe Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Sat, 13 Dec 2025 23:49:38 -0300
Subject: [PATCH] feat(automations): redesign da acao de enviar e-mail com UX
 melhorada
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cria componente EmailActionConfig dedicado para configuracao de e-mail
- Layout expandido (full-width) para melhor aproveitamento do espaco
- Variaveis como badges clicaveis que inserem no campo ativo
- Editor TipTap para mensagem com suporte a variaveis inline
- Autocomplete de variaveis ao digitar {{
- Organizacao visual melhorada com secoes claras

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../automations/automation-editor-dialog.tsx  | 156 +----
 .../automations/email-action-config.tsx       | 614 ++++++++++++++++++
 2 files changed, 630 insertions(+), 140 deletions(-)
 create mode 100644 src/components/automations/email-action-config.tsx

diff --git a/src/components/automations/automation-editor-dialog.tsx b/src/components/automations/automation-editor-dialog.tsx
index 383f2bf..0c03a39 100644
--- a/src/components/automations/automation-editor-dialog.tsx
+++ b/src/components/automations/automation-editor-dialog.tsx
@@ -19,6 +19,7 @@ import { Select, SelectContent, SelectEmptyState, SelectItem, SelectTrigger, Sel
 import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
+import { EmailActionConfig } from "@/components/automations/email-action-config"
 
 type AutomationRow = {
   id: Id<"ticketAutomations">
@@ -848,7 +849,19 @@ export function AutomationEditorDialog({
           </div>
 
           <div className="space-y-2">
-            {actions.map((a) => (
+            {actions.map((a) =>
+              a.type === "SEND_EMAIL" ? (
+                <div key={a.id} className="rounded-xl border border-slate-200 bg-white p-4">
+                  <EmailActionConfig
+                    action={a}
+                    onChange={(updated) =>
+                      setActions((prev) => prev.map((item) => (item.id === a.id ? updated : item)))
+                    }
+                    onRemove={() => handleRemoveAction(a.id)}
+                    agents={(agents ?? []).map((u) => ({ _id: String(u._id), name: u.name }))}
+                  />
+                </div>
+              ) : (
               <div key={a.id} className="rounded-xl border border-slate-200 bg-white p-3">
                 <div className="grid gap-3 md:grid-cols-[1.1fr_1.7fr_auto]">
                   <div className="space-y-1">
@@ -1043,144 +1056,6 @@ export function AutomationEditorDialog({
                           )}
                         </SelectContent>
                       </Select>
-                    ) : a.type === "SEND_EMAIL" ? (
-                      <div className="space-y-3">
-                        <div className="space-y-1.5">
-                          <Label className="text-xs">Assunto</Label>
-                          <Input
-                            value={a.subject}
-                            onChange={(e) =>
-                              setActions((prev) => prev.map((item) => (item.id === a.id ? { ...item, subject: e.target.value } : item)))
-                            }
-                            placeholder="Ex.: Atualização do chamado #{{ticket.reference}}"
-                          />
-                        </div>
-                        <div className="space-y-1.5">
-                          <Label className="text-xs">Mensagem</Label>
-                          <Textarea
-                            value={a.message}
-                            onChange={(e) =>
-                              setActions((prev) => prev.map((item) => (item.id === a.id ? { ...item, message: e.target.value } : item)))
-                            }
-                            placeholder="Escreva a mensagem do e-mail..."
-                            className="min-h-24"
-                          />
-                          <p className="text-[11px] text-muted-foreground">
-                            Variáveis: <code>{"{{ticket.reference}}"}</code>, <code>{"{{ticket.subject}}"}</code>,{" "}
-                            <code>{"{{ticket.status}}"}</code>, <code>{"{{ticket.priority}}"}</code>,{" "}
-                            <code>{"{{company.name}}"}</code>, <code>{"{{requester.name}}"}</code>,{" "}
-                            <code>{"{{assignee.name}}"}</code>.
-                          </p>
-                        </div>
-
-                        <div className="space-y-2">
-                          <Label className="text-xs">Destinatários</Label>
-                          <div className="grid gap-2 sm:grid-cols-2">
-                            <label className="flex items-center gap-2 text-sm text-neutral-700">
-                              <Checkbox
-                                checked={a.toRequester}
-                                onCheckedChange={(checked) =>
-                                  setActions((prev) =>
-                                    prev.map((item) => (item.id === a.id ? { ...item, toRequester: Boolean(checked) } : item))
-                                  )
-                                }
-                              />
-                              Solicitante do ticket
-                            </label>
-                            <label className="flex items-center gap-2 text-sm text-neutral-700">
-                              <Checkbox
-                                checked={a.toAssignee}
-                                onCheckedChange={(checked) =>
-                                  setActions((prev) =>
-                                    prev.map((item) => (item.id === a.id ? { ...item, toAssignee: Boolean(checked) } : item))
-                                  )
-                                }
-                              />
-                              Responsável do ticket
-                            </label>
-                          </div>
-
-                          <div className="grid gap-3 md:grid-cols-2">
-                            <div className="space-y-1.5">
-                              <Label className="text-xs">Agente específico (opcional)</Label>
-                              <Select
-                                value={a.toUserId}
-                                onValueChange={(value) => {
-                                  const nextValue = value === CLEAR_SELECT_VALUE ? "" : value
-                                  setActions((prev) =>
-                                    prev.map((item) => (item.id === a.id ? { ...item, toUserId: nextValue } : item))
-                                  )
-                                }}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Selecione" />
-                                </SelectTrigger>
-                                <SelectContent className="rounded-xl">
-                                  {(agents ?? []).length === 0 ? (
-                                    <SelectEmptyState
-                                      message="Nenhum agente disponível"
-                                      createLabel="Gerenciar usuários"
-                                      createHref="/admin/users"
-                                    />
-                                  ) : (
-                                    <>
-                                      <SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
-                                      {(agents ?? []).map((u) => (
-                                        <SelectItem key={u._id} value={String(u._id)}>
-                                          {u.name}
-                                        </SelectItem>
-                                      ))}
-                                    </>
-                                  )}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            <div className="space-y-1.5">
-                              <Label className="text-xs">E-mails adicionais</Label>
-                              <Input
-                                value={a.toEmails}
-                                onChange={(e) =>
-                                  setActions((prev) => prev.map((item) => (item.id === a.id ? { ...item, toEmails: e.target.value } : item)))
-                                }
-                                placeholder="ex.: cliente@empresa.com, outro@dominio.com"
-                              />
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="grid gap-3 md:grid-cols-2">
-                          <div className="space-y-1.5">
-                            <Label className="text-xs">Link do botão</Label>
-                            <Select
-                              value={a.ctaTarget}
-                              onValueChange={(value) =>
-                                setActions((prev) =>
-                                  prev.map((item) => (item.id === a.id ? { ...item, ctaTarget: value as EmailCtaTarget } : item))
-                                )
-                              }
-                            >
-                              <SelectTrigger>
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent className="rounded-xl">
-                                <SelectItem value="AUTO">Auto</SelectItem>
-                                <SelectItem value="PORTAL">Portal (cliente)</SelectItem>
-                                <SelectItem value="STAFF">Painel (agente)</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-                          <div className="space-y-1.5">
-                            <Label className="text-xs">Texto do botão</Label>
-                            <Input
-                              value={a.ctaLabel}
-                              onChange={(e) =>
-                                setActions((prev) => prev.map((item) => (item.id === a.id ? { ...item, ctaLabel: e.target.value } : item)))
-                              }
-                              placeholder="Abrir chamado"
-                            />
-                          </div>
-                        </div>
-                      </div>
                     ) : (
                       <Textarea
                         value={a.body}
@@ -1205,7 +1080,8 @@ export function AutomationEditorDialog({
                   </Button>
                 </div>
               </div>
-            ))}
+              )
+            )}
           </div>
         </div>
 
diff --git a/src/components/automations/email-action-config.tsx b/src/components/automations/email-action-config.tsx
new file mode 100644
index 0000000..74dbd5c
--- /dev/null
+++ b/src/components/automations/email-action-config.tsx
@@ -0,0 +1,614 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useEditor, EditorContent } from "@tiptap/react"
+import type { Editor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Placeholder from "@tiptap/extension-placeholder"
+import Mention from "@tiptap/extension-mention"
+import { ReactRenderer } from "@tiptap/react"
+import tippy, { type Instance, type Props as TippyProps } from "tippy.js"
+import { Braces, Trash2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectEmptyState, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+// Tipos
+type EmailCtaTarget = "AUTO" | "PORTAL" | "STAFF"
+
+type SendEmailAction = {
+  id: string
+  type: "SEND_EMAIL"
+  subject: string
+  message: string
+  toRequester: boolean
+  toAssignee: boolean
+  toUserId: string
+  toEmails: string
+  ctaTarget: EmailCtaTarget
+  ctaLabel: string
+}
+
+type Agent = {
+  _id: string
+  name: string
+}
+
+type EmailActionConfigProps = {
+  action: SendEmailAction
+  onChange: (action: SendEmailAction) => void
+  onRemove: () => void
+  agents: Agent[]
+}
+
+// Variaveis disponiveis para interpolacao
+const EMAIL_VARIABLES = [
+  { key: "ticket.reference", label: "Referencia", description: "Numero do chamado (ex: #1234)" },
+  { key: "ticket.subject", label: "Assunto", description: "Titulo do chamado" },
+  { key: "ticket.status", label: "Status", description: "Status atual do chamado" },
+  { key: "ticket.priority", label: "Prioridade", description: "Nivel de prioridade" },
+  { key: "company.name", label: "Empresa", description: "Nome da empresa do solicitante" },
+  { key: "requester.name", label: "Solicitante", description: "Nome de quem abriu o chamado" },
+  { key: "assignee.name", label: "Responsavel", description: "Nome do agente responsavel" },
+] as const
+
+type EmailVariable = (typeof EMAIL_VARIABLES)[number]
+
+const CLEAR_SELECT_VALUE = "__clear__"
+
+// Estilos do badge de variavel
+const VARIABLE_BADGE_CLASSES =
+  "inline-flex items-center gap-1 rounded bg-sky-50 border border-sky-200 px-1.5 py-0.5 text-xs font-mono text-sky-700 whitespace-nowrap"
+
+// Extensao TipTap para variaveis de e-mail
+const EmailVariableMentionExtension = Mention.extend({
+  name: "emailVariable",
+  priority: 1000,
+  group: "inline",
+  inline: true,
+  selectable: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      id: { default: null },
+      label: { default: null },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Backspace: ({ editor }: { editor: Editor }) => {
+        const { state } = editor
+        const { selection } = state
+        if (selection.empty) {
+          const { $from } = selection
+          const nodeBefore = $from.nodeBefore
+          if (nodeBefore?.type?.name === this.name) {
+            const from = $from.pos - nodeBefore.nodeSize
+            const to = $from.pos
+            editor.chain().focus().deleteRange({ from, to }).run()
+            return true
+          }
+        }
+        return false
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-email-variable]`,
+        getAttrs: (dom: HTMLElement | string) => {
+          if (dom instanceof HTMLElement) {
+            return {
+              id: dom.dataset.variableId ?? null,
+              label: dom.dataset.variableLabel ?? dom.textContent ?? null,
+            }
+          }
+          return {}
+        },
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+    const id = String(HTMLAttributes.id ?? "")
+    const label = String(HTMLAttributes.label ?? id)
+    return [
+      "span",
+      {
+        "data-email-variable": "true",
+        "data-variable-id": id,
+        "data-variable-label": label,
+        class: VARIABLE_BADGE_CLASSES,
+        contenteditable: "false",
+      },
+      `{{${id}}}`,
+    ]
+  },
+
+  addNodeView() {
+    return ({ node }) => {
+      const dom = document.createElement("span")
+      dom.className = VARIABLE_BADGE_CLASSES
+      dom.contentEditable = "false"
+      dom.dataset.emailVariable = "true"
+      dom.dataset.variableId = String(node.attrs.id ?? "")
+      dom.dataset.variableLabel = String(node.attrs.label ?? "")
+      dom.textContent = `{{${node.attrs.id}}}`
+      return { dom }
+    }
+  },
+}).configure({
+  suggestion: {
+    char: "{{",
+    allowSpaces: false,
+    startOfLine: false,
+    render: () => {
+      let component: ReactRenderer | null = null
+      let popup: Instance<TippyProps> | null = null
+      let keydownHandler: ((event: KeyboardEvent) => boolean) | null = null
+
+      const registerHandler = (handler: ((event: KeyboardEvent) => boolean) | null) => {
+        keydownHandler = handler
+      }
+
+      return {
+        onStart: (props) => {
+          component = new ReactRenderer(EmailVariableList, {
+            props: { ...props, onRegister: registerHandler },
+            editor: props.editor,
+          })
+
+          if (!props.clientRect) return
+
+          popup = tippy(document.body, {
+            getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+            zIndex: 99999,
+          })
+        },
+        onUpdate(props) {
+          component?.updateProps({ ...props, onRegister: registerHandler })
+          if (!props.clientRect) return
+          popup?.setProps({
+            getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
+          })
+        },
+        onKeyDown(props) {
+          if (props.event.key === "Escape") {
+            popup?.hide()
+            return true
+          }
+          if (keydownHandler?.(props.event)) {
+            return true
+          }
+          return false
+        },
+        onExit() {
+          popup?.destroy()
+          component?.destroy()
+          keydownHandler = null
+        },
+      }
+    },
+    items: ({ query }) => {
+      const q = query.toLowerCase().replace(/^\{*/, "")
+      return EMAIL_VARIABLES.filter(
+        (v) =>
+          v.key.toLowerCase().includes(q) ||
+          v.label.toLowerCase().includes(q) ||
+          v.description.toLowerCase().includes(q)
+      )
+    },
+  },
+})
+
+// Lista de sugestoes de variaveis
+type EmailVariableListProps = {
+  items: EmailVariable[]
+  command: (item: { id: string; label: string }) => void
+  onRegister?: (handler: ((event: KeyboardEvent) => boolean) | null) => void
+}
+
+function EmailVariableList({ items, command, onRegister }: EmailVariableListProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index]
+      if (item) {
+        command({ id: item.key, label: item.label })
+      }
+    },
+    [command, items]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((prev) => (prev + items.length - 1) % items.length)
+        return true
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((prev) => (prev + 1) % items.length)
+        return true
+      }
+      if (event.key === "Enter") {
+        selectItem(selectedIndex)
+        return true
+      }
+      return false
+    },
+    [items.length, selectItem, selectedIndex]
+  )
+
+  useEffect(() => {
+    onRegister?.(handleKeyDown)
+    return () => onRegister?.(null)
+  }, [handleKeyDown, onRegister])
+
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [items])
+
+  if (!items.length) {
+    return (
+      <div className="rounded-lg border bg-white p-3 text-sm text-muted-foreground shadow-lg">
+        Nenhuma variavel encontrada
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-h-64 min-w-[280px] overflow-y-auto rounded-lg border bg-white p-1 shadow-lg">
+      {items.map((item, index) => (
+        <button
+          key={item.key}
+          type="button"
+          className={cn(
+            "flex w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left transition",
+            index === selectedIndex ? "bg-sky-50" : "hover:bg-slate-50"
+          )}
+          onMouseEnter={() => setSelectedIndex(index)}
+          onMouseDown={(e) => {
+            e.preventDefault()
+            selectItem(index)
+          }}
+        >
+          <span className="font-mono text-sm text-sky-700">{`{{${item.key}}}`}</span>
+          <span className="text-xs text-muted-foreground">{item.description}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+// Converte HTML com badges para texto com {{variaveis}}
+function htmlToPlainVariables(html: string): string {
+  if (!html) return ""
+  // Remove tags HTML mantendo o texto
+  const div = document.createElement("div")
+  div.innerHTML = html
+  // Badges de variavel ja tem o texto {{variavel}} dentro
+  return div.textContent ?? ""
+}
+
+// Converte texto com {{variaveis}} para HTML com badges
+function plainVariablesToHtml(text: string): string {
+  if (!text) return ""
+  // Escapa HTML primeiro
+  const escaped = text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+  // Converte {{var}} para badges
+  return escaped.replace(/\{\{([^}]+)\}\}/g, (_, varKey) => {
+    const variable = EMAIL_VARIABLES.find((v) => v.key === varKey)
+    const label = variable?.label ?? varKey
+    return `<span data-email-variable="true" data-variable-id="${varKey}" data-variable-label="${label}" class="${VARIABLE_BADGE_CLASSES}">{{${varKey}}}</span>`
+  })
+}
+
+// Editor de mensagem com suporte a variaveis
+type MessageEditorProps = {
+  value: string
+  onChange: (value: string) => void
+  onInsertVariable: (ref: { insertVariable: (key: string) => void } | null) => void
+}
+
+function MessageEditor({ value, onChange, onInsertVariable }: MessageEditorProps) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- initialContent deve ser calculado apenas uma vez na montagem
+  const initialContent = useMemo(() => plainVariablesToHtml(value), [])
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        bulletList: false,
+        orderedList: false,
+        blockquote: false,
+        codeBlock: false,
+        heading: false,
+        horizontalRule: false,
+      }),
+      Placeholder.configure({ placeholder: "Escreva a mensagem do e-mail..." }),
+      EmailVariableMentionExtension,
+    ],
+    content: initialContent,
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm max-w-none focus:outline-none min-h-[100px] p-3 text-sm",
+      },
+    },
+    onUpdate({ editor }) {
+      const html = editor.getHTML()
+      const plain = htmlToPlainVariables(html)
+      onChange(plain)
+    },
+    immediatelyRender: false,
+  })
+
+  // Expoe metodo para inserir variavel externamente
+  useEffect(() => {
+    if (!editor) {
+      onInsertVariable(null)
+      return
+    }
+
+    onInsertVariable({
+      insertVariable: (key: string) => {
+        const variable = EMAIL_VARIABLES.find((v) => v.key === key)
+        if (!variable) return
+        editor
+          .chain()
+          .focus()
+          .insertContent({
+            type: "emailVariable",
+            attrs: { id: key, label: variable.label },
+          })
+          .run()
+      },
+    })
+
+    return () => onInsertVariable(null)
+  }, [editor, onInsertVariable])
+
+  // Sincroniza valor externo
+  useEffect(() => {
+    if (!editor) return
+    const currentPlain = htmlToPlainVariables(editor.getHTML())
+    if (currentPlain !== value) {
+      editor.commands.setContent(plainVariablesToHtml(value), { emitUpdate: false })
+    }
+  }, [value, editor])
+
+  if (!editor) return null
+
+  return (
+    <div className="rounded-lg border bg-white focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
+
+// Componente principal
+export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailActionConfigProps) {
+  const subjectInputRef = useRef<HTMLInputElement>(null)
+  const messageEditorRef = useRef<{ insertVariable: (key: string) => void } | null>(null)
+  const [activeField, setActiveField] = useState<"subject" | "message">("message")
+
+  const handleChange = useCallback(
+    <K extends keyof SendEmailAction>(key: K, value: SendEmailAction[K]) => {
+      onChange({ ...action, [key]: value })
+    },
+    [action, onChange]
+  )
+
+  const handleInsertVariable = useCallback(
+    (variable: EmailVariable) => {
+      if (activeField === "subject" && subjectInputRef.current) {
+        const input = subjectInputRef.current
+        const start = input.selectionStart ?? input.value.length
+        const end = input.selectionEnd ?? input.value.length
+        const varText = `{{${variable.key}}}`
+        const newValue = input.value.slice(0, start) + varText + input.value.slice(end)
+        handleChange("subject", newValue)
+        // Reposiciona cursor apos a variavel
+        requestAnimationFrame(() => {
+          input.focus()
+          const newPos = start + varText.length
+          input.setSelectionRange(newPos, newPos)
+        })
+      } else if (activeField === "message" && messageEditorRef.current) {
+        messageEditorRef.current.insertVariable(variable.key)
+      }
+    },
+    [activeField, handleChange]
+  )
+
+  return (
+    <div className="space-y-4">
+      {/* Header com tipo e botao de remover */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex size-8 items-center justify-center rounded-lg bg-sky-100">
+            <Braces className="size-4 text-sky-600" />
+          </div>
+          <span className="font-medium text-neutral-900">Enviar e-mail</span>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onRemove}
+          className="h-8 w-8 text-slate-500 hover:bg-red-50 hover:text-red-700"
+          title="Remover acao"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      </div>
+
+      {/* Assunto */}
+      <div className="space-y-1.5">
+        <Label className="text-sm font-medium">Assunto do e-mail</Label>
+        <Input
+          ref={subjectInputRef}
+          value={action.subject}
+          onChange={(e) => handleChange("subject", e.target.value)}
+          onFocus={() => setActiveField("subject")}
+          placeholder="Ex.: Atualizacao do chamado #{{ticket.reference}}"
+        />
+      </div>
+
+      {/* Mensagem */}
+      <div className="space-y-1.5">
+        <Label className="text-sm font-medium">Mensagem</Label>
+        <div onFocus={() => setActiveField("message")}>
+          <MessageEditor
+            value={action.message}
+            onChange={(v) => handleChange("message", v)}
+            onInsertVariable={(ref) => {
+              messageEditorRef.current = ref
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Paleta de variaveis */}
+      <div className="space-y-2">
+        <Label className="text-xs text-muted-foreground">
+          Variaveis disponiveis (clique para inserir no {activeField === "subject" ? "assunto" : "corpo"})
+        </Label>
+        <div className="flex flex-wrap gap-1.5">
+          {EMAIL_VARIABLES.map((variable) => (
+            <Tooltip key={variable.key}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => handleInsertVariable(variable)}
+                  className={cn(
+                    VARIABLE_BADGE_CLASSES,
+                    "cursor-pointer transition hover:bg-sky-100 hover:border-sky-300"
+                  )}
+                >
+                  {`{{${variable.key}}}`}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {variable.description}
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+
+      {/* Destinatarios */}
+      <div className="space-y-3 rounded-lg border border-slate-200 bg-slate-50/50 p-4">
+        <Label className="text-sm font-medium">Destinatarios</Label>
+
+        <div className="flex flex-wrap gap-4">
+          <label className="flex items-center gap-2 text-sm text-neutral-700">
+            <Checkbox
+              checked={action.toRequester}
+              onCheckedChange={(checked) => handleChange("toRequester", Boolean(checked))}
+            />
+            Solicitante do ticket
+          </label>
+          <label className="flex items-center gap-2 text-sm text-neutral-700">
+            <Checkbox
+              checked={action.toAssignee}
+              onCheckedChange={(checked) => handleChange("toAssignee", Boolean(checked))}
+            />
+            Responsavel do ticket
+          </label>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground">Agente especifico (opcional)</Label>
+            <Select
+              value={action.toUserId}
+              onValueChange={(value) => {
+                const nextValue = value === CLEAR_SELECT_VALUE ? "" : value
+                handleChange("toUserId", nextValue)
+              }}
+            >
+              <SelectTrigger className="bg-white">
+                <SelectValue placeholder="Selecione" />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl">
+                {agents.length === 0 ? (
+                  <SelectEmptyState
+                    message="Nenhum agente disponivel"
+                    createLabel="Gerenciar usuarios"
+                    createHref="/admin/users"
+                  />
+                ) : (
+                  <>
+                    <SelectItem value={CLEAR_SELECT_VALUE}>Nenhum</SelectItem>
+                    {agents.map((u) => (
+                      <SelectItem key={u._id} value={String(u._id)}>
+                        {u.name}
+                      </SelectItem>
+                    ))}
+                  </>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground">E-mails adicionais</Label>
+            <Input
+              value={action.toEmails}
+              onChange={(e) => handleChange("toEmails", e.target.value)}
+              placeholder="cliente@empresa.com, outro@dominio.com"
+              className="bg-white"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Botao do e-mail */}
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Link do botao</Label>
+          <Select
+            value={action.ctaTarget}
+            onValueChange={(value) => handleChange("ctaTarget", value as EmailCtaTarget)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="AUTO">Auto (detecta pelo destinatario)</SelectItem>
+              <SelectItem value="PORTAL">Portal (cliente)</SelectItem>
+              <SelectItem value="STAFF">Painel (agente)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Texto do botao</Label>
+          <Input
+            value={action.ctaLabel}
+            onChange={(e) => handleChange("ctaLabel", e.target.value)}
+            placeholder="Abrir chamado"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}