@adatechnology/conversations-ui 0.1.0-rc.34 → 0.1.0-rc.36

package/src/preview/ConversationSimulatorClient.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2026 Ada Technology. All rights reserved.
+ *
+ * This source code is proprietary and confidential. Unauthorized copying,
+ * modification, distribution, or use of this file, via any medium, is
+ * strictly prohibited without prior written permission from Ada Technology.
+ *
+ * Author: Anderson Filho <andersonfrfilho@gmail.com>
+ *
+ * Porta do simulador: o que a visão lado-cliente precisa saber fazer, sem canal no nome.
+ *
+ * O simulador nasceu falando WhatsApp — `PreviewWebhookClient`, payload assinado, mídia por
+ * `mediaId`. Só que a mesma casa atende pelo chat do próprio site, e simular ali não é uma segunda
+ * tela: é o mesmo painel, no mesmo lugar da conversa, com outro transporte. Sem esta porta cada
+ * canal novo viraria uma cópia da tela — e cópia de tela diverge, que é exatamente o que o
+ * `ConversationSimulatorPanel` existe para ter parado.
+ *
+ * O que é específico de canal fica no adaptador, nunca aqui:
+ * - **resposta de menu:** a Meta distingue `button_reply` de `list_reply`, e o roteador do fluxo lê
+ *   campos diferentes; o chat do site manda o rótulo como texto, que é literalmente o que o
+ *   visitante produz ao tocar no botão do widget. A porta entrega a seleção inteira e deixa cada
+ *   adaptador escolher a forma de fio.
+ * - **mídia:** a Meta entrega por REFERÊNCIA (sobe o arquivo primeiro, o webhook carrega o `id`); o
+ *   widget manda os BYTES no `FormData`. A porta trafega o `File` que a tela tem em mão — quem
+ *   tiver passo de upload faz o upload por dentro.
+ */
+
+import type { InteractiveSelection } from '../types'
+import type { PreviewUploadedMedia } from './createPreviewMediaUploader'
+import type { PreviewWebhookClient } from './createPreviewWebhookClient'
+
+/**
+ * Tipos de mídia que o cliente pode mandar de dentro do simulador.
+ *
+ * Subconjunto proposital do que a Meta aceita: `sticker` chega do aparelho, mas não há como
+ * escolher um no seletor de arquivo do navegador — oferecer o tipo aqui seria um caminho morto.
+ */
+export type SimulatorMediaKind = 'image' | 'video' | 'audio' | 'document'
+
+/** Os tipos que saem do seletor de arquivo. `audio` fica de fora: ele vem do microfone. */
+export const SIMULATOR_FILE_MEDIA_KINDS: readonly SimulatorMediaKind[] = ['image', 'video', 'document']
+
+/** Deriva o tipo de mídia a partir do MIME do arquivo escolhido. */
+export function mediaKindOf(mimeType: string): SimulatorMediaKind {
+  if (mimeType.startsWith('image/')) return 'image'
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  return 'document'
+}
+
+export type SendSimulatorMediaParams = {
+  readonly mediaKind: SimulatorMediaKind
+  /** O arquivo do disco ou o áudio recém-gravado. Referência × bytes é decisão do adaptador. */
+  readonly file: File
+  readonly mimeType?: string
+  readonly filename?: string
+  readonly caption?: string
+}
+
+export type ConversationSimulatorClient = {
+  sendText(text: string): Promise<void>
+  sendReply(selection: InteractiveSelection): Promise<void>
+  /**
+   * Ausente = este canal não recebe mídia do cliente, e o compositor não desenha clipe nem
+   * microfone. Melhor um botão que não existe do que um que falha ao ser tocado.
+   */
+  sendMedia?(params: SendSimulatorMediaParams): Promise<void>
+  /**
+   * Restringe o que `sendMedia` aceita. Ausente = todos os tipos.
+   *
+   * Existe porque canal com meia capacidade é comum: o chat do site sobe áudio (a API transcreve)
+   * mas não tem rota para imagem. Sem esta lista o clipe e o microfone apareciam juntos, e um dos
+   * dois falhava ao ser tocado.
+   */
+  readonly acceptedMediaKinds?: readonly SimulatorMediaKind[]
+}
+
+/** Responde se o compositor deve desenhar o affordance daquele tipo. */
+export function acceptsMediaKind(client: ConversationSimulatorClient, kind: SimulatorMediaKind): boolean {
+  if (!client.sendMedia) return false
+
+  return client.acceptedMediaKinds?.includes(kind) ?? true
+}
+
+export type ToSimulatorClientParams = {
+  readonly client: PreviewWebhookClient
+  /** Destino alternativo do upload. Sem isto, usa o do próprio `client`. */
+  readonly uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>
+}
+
+/**
+ * Distingue a porta neutra do cliente WhatsApp legado, que continua aceito na prop.
+ *
+ * Leitura estrutural e não `instanceof`: os dois são objetos literais devolvidos por fábrica, e o
+ * host pode ter montado o seu à mão.
+ */
+export function isConversationSimulatorClient(
+  candidate: ConversationSimulatorClient | PreviewWebhookClient,
+): candidate is ConversationSimulatorClient {
+  return typeof (candidate as ConversationSimulatorClient).sendReply === 'function'
+}
+
+/**
+ * Adapta o cliente WhatsApp (webhook assinado ou ponte) para a porta neutra.
+ *
+ * O upload vive aqui dentro porque ele é uma etapa DO CANAL: no caminho da Meta a mídia precisa
+ * existir como `id` antes do webhook citá-la. Sem passo de upload disponível, `sendMedia` sai
+ * ausente — é o que mantém o clipe escondido em host que não montou destino para o arquivo, o
+ * comportamento que já existia antes desta porta.
+ */
+export function toConversationSimulatorClient({
+  client,
+  uploadMedia,
+}: ToSimulatorClientParams): ConversationSimulatorClient {
+  const upload = uploadMedia ?? client.uploadMedia
+
+  const base: ConversationSimulatorClient = {
+    sendText: (text) => client.sendText(text),
+    sendReply: (selection) => {
+      const reply = { id: selection.option.id, title: selection.option.title }
+      return selection.kind === 'button' ? client.sendButtonReply(reply) : client.sendListReply(reply)
+    },
+  }
+
+  if (!upload) return base
+
+  return {
+    ...base,
+    sendMedia: async ({ mediaKind, file, mimeType, filename, caption }) => {
+      const uploaded = await upload(file)
+      await client.sendMedia({
+        // O tipo sai do MIME que o upload devolveu quando ele existe: host que normaliza o formato
+        // (áudio gravado em `webm` que sobe como `ogg`) mudava de tipo, e a mídia chegava como
+        // documento.
+        mediaType: uploaded.mimeType ? mediaKindOf(uploaded.mimeType) : mediaKind,
+        mediaId: uploaded.mediaId,
+        mimeType: uploaded.mimeType ?? mimeType ?? file.type,
+        filename: uploaded.filename ?? filename ?? file.name,
+        ...(caption ? { caption } : {}),
+      })
+    },
+  }
+}

package/src/preview/ConversationSimulatorPanel.tsx

@@ -20,15 +20,20 @@
  *
  * O efeito de cada envio aparece na thread ao lado pelo mesmo stream que a inbox já assina — este
  * painel não abre conexão própria.
+ *
+ * A moldura é a mesma em todo canal — o que muda é o transporte, que entra pelo `client`, e duas
+ * frases do cabeçalho: dizer "entrega no webhook real" num chat de site descreveria um caminho que
+ * ali não existe, e "escreva como o cliente" num visitante anônimo nomeia alguém que ainda não é.
  */
 
 import type { ReactNode } from 'react'
 
+import { CONVERSATION_CHANNEL, DEFAULT_CONVERSATION_CHANNEL, type ConversationChannel } from '../conversationChannel'
 import { ConversationPreview, type ConversationPreviewProps } from './ConversationPreview'
 
 export type ConversationSimulatorPanelLabels = {
   readonly title: string
-  /** Complementa o telefone no subtítulo, explicando para onde a mensagem realmente vai. */
+  /** Complementa o identificador no subtítulo, explicando para onde a mensagem realmente vai. */
   readonly destinationHint: string
   readonly close: string
   readonly placeholder: string
@@ -41,12 +46,47 @@ export const DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS: ConversationSimulatorP
   placeholder: 'Escreva como o cliente…',
 }
 
+type ChannelWording = Pick<ConversationSimulatorPanelLabels, 'destinationHint' | 'placeholder'>
+
+/** Só o que muda de canal para canal; o resto continua vindo do default. */
+const SIMULATOR_PANEL_CHANNEL_WORDING: Readonly<Record<ConversationChannel, ChannelWording>> = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder,
+  },
+  [CONVERSATION_CHANNEL.MESSENGER]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder,
+  },
+  [CONVERSATION_CHANNEL.INSTAGRAM]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder,
+  },
+  [CONVERSATION_CHANNEL.WEBCHAT]: {
+    destinationHint: 'entrega na API do chat do site',
+    placeholder: 'Escreva como o visitante…',
+  },
+}
+
+/** Rótulos do painel já resolvidos para o canal — útil para o host que monta o cabeçalho por fora. */
+export function simulatorPanelLabelsOf(channel: ConversationChannel | undefined): ConversationSimulatorPanelLabels {
+  return {
+    ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+    ...SIMULATOR_PANEL_CHANNEL_WORDING[channel ?? DEFAULT_CONVERSATION_CHANNEL],
+  }
+}
+
 export type ConversationSimulatorPanelProps = Omit<ConversationPreviewProps, 'placeholder'> & {
   readonly onClose: () => void
+  /** Ausente = WhatsApp, que era o único canal antes desta prop existir. */
+  readonly channel?: ConversationChannel
   /**
-   * Telefone já formatado para leitura. É o host que formata: máscara de telefone é convenção
+   * Identificador do contato já formatado para leitura — telefone no WhatsApp, apelido no Instagram,
+   * "Visitante 3f9c21" no chat do site. É o host que formata: máscara de telefone é convenção
    * regional, e o pacote não tem como saber a do produto.
    */
+  readonly displayHandle?: string
+  /** @deprecated Use `displayHandle` — o simulador deixou de ser só telefone. */
   readonly displayNumber?: string
   readonly labels?: Partial<ConversationSimulatorPanelLabels>
   /** Ações extras no cabeçalho — roteiro automático, limpar conversa, trocar de contato. */
@@ -55,13 +95,15 @@ export type ConversationSimulatorPanelProps = Omit<ConversationPreviewProps, 'pl
 
 export function ConversationSimulatorPanel({
   onClose,
+  channel,
+  displayHandle,
   displayNumber,
   labels,
   headerActions,
   ...previewProps
 }: ConversationSimulatorPanelProps) {
-  const text = { ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, ...labels }
-  const subtitle = [displayNumber ?? previewProps.conversationId, text.destinationHint].join(' · ')
+  const text = { ...simulatorPanelLabelsOf(channel), ...labels }
+  const subtitle = [displayHandle ?? displayNumber ?? previewProps.conversationId, text.destinationHint].join(' · ')
 
   return (
     <aside className="cv-simulator-panel" aria-label={text.title}>

package/src/preview/index.ts

@@ -25,9 +25,27 @@ export type { CreateMockSSEProviderParams } from './createMockSSEProvider'
 
 export { PREVIEW_CONVERSATIONS, PREVIEW_MESSAGES, PREVIEW_DOCUMENTS } from './previewFixtures'
 
-export { ConversationSimulatorPanel, DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS } from './ConversationSimulatorPanel'
+export {
+  ConversationSimulatorPanel,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  simulatorPanelLabelsOf,
+} from './ConversationSimulatorPanel'
 export type { ConversationSimulatorPanelProps, ConversationSimulatorPanelLabels } from './ConversationSimulatorPanel'
 
+export {
+  acceptsMediaKind,
+  mediaKindOf,
+  isConversationSimulatorClient,
+  toConversationSimulatorClient,
+  SIMULATOR_FILE_MEDIA_KINDS,
+} from './ConversationSimulatorClient'
+export type {
+  ConversationSimulatorClient,
+  SendSimulatorMediaParams,
+  SimulatorMediaKind,
+  ToSimulatorClientParams,
+} from './ConversationSimulatorClient'
+
 export { ConversationPreview } from './ConversationPreview'
 export { mediaTypeOf } from './ConversationPreview'
 export type { ConversationPreviewProps, PreviewUploadedMedia } from './ConversationPreview'

package/src/settings/MessagesWorkspace.tsx

@@ -18,10 +18,11 @@ import {
   WhatsAppTemplatesSettings,
   type WhatsAppTemplatesSettingsLabels,
 } from './WhatsAppTemplatesSettings'
-import type {
-  WhatsAppTemplateSummary,
-  WhatsAppTemplateVariableSuggestion,
-  WhatsAppTemplateSettingsFormLabels,
+import {
+  WhatsAppTemplateSettingsForm,
+  type WhatsAppTemplateSummary,
+  type WhatsAppTemplateVariableSuggestion,
+  type WhatsAppTemplateSettingsFormLabels,
 } from './WhatsAppTemplateSettingsForm'
 import type {
   WhatsAppCreateTemplateFormLabels,
@@ -46,6 +47,20 @@ export interface TemplateSettings {
   variables: string[]
 }
 
+/**
+ * Papel adicional de template (ex.: despedida) além do principal (`getTemplateSettings`/
+ * `saveTemplateSettings`). Cada papel ganha seu próprio formulário empilhado na mesma aba, com
+ * carregamento e salvamento independentes — é o que permite hosts com mais de um papel (o
+ * financiamento tem boas-vindas + despedida) convergirem para este componente em vez de remontar
+ * a tela à parte.
+ */
+export interface MessagesWorkspaceTemplateRole {
+  readonly key: string
+  readonly labels: { sectionTitle: string; sectionDescription: string }
+  getSettings(): Promise<TemplateSettings>
+  saveSettings(settings: TemplateSettings): Promise<void>
+}
+
 export interface TranscriptionSettings {
   enabled: boolean
   mode: TranscriptionMode
@@ -61,6 +76,8 @@ export interface MessagesWorkspaceApi {
   /** Sem este par, a aba de templates não é desenhada. */
   getTemplateSettings?(): Promise<TemplateSettings>
   saveTemplateSettings?(settings: TemplateSettings): Promise<void>
+  /** Papéis adicionais de template (ex.: despedida) além do principal acima. */
+  templateRoles?: MessagesWorkspaceTemplateRole[]
   /**
    * Lista de templates aprovados na Meta. Ausente, a aba ainda existe (dá para salvar o nome
    * escolhido), mas nasce sem opções e sem botão de recarregar.
@@ -150,6 +167,9 @@ export interface MessagesWorkspaceProps {
   readonly availableVariables?: WhatsAppTemplateVariableSuggestion[]
   /** Aviso do produto acima da aba de templates (ex.: rota da Graph API ainda não implementada). */
   readonly renderTemplatesNotice?: () => ReactNode
+  /** Repassados ao formulário de criação — mesma prévia que `WhatsAppCreateTemplateForm` já suporta. */
+  readonly createTemplatePreviewCompanyName?: string
+  readonly createTemplateVariableExamples?: readonly string[]
   readonly className?: string
 }
 
@@ -160,9 +180,12 @@ export function MessagesWorkspace({
   farewellPlaceholders,
   availableVariables,
   renderTemplatesNotice,
+  createTemplatePreviewCompanyName,
+  createTemplateVariableExamples,
   className,
 }: MessagesWorkspaceProps) {
   const labels = { ...DEFAULT_LABELS, ...labelsOverride }
+  const templateRoles = api.templateRoles ?? []
 
   const hasTopics = Boolean(api.getTopics && api.saveTopics)
   const hasTemplates = Boolean(api.getTemplateSettings && api.saveTemplateSettings)
@@ -186,6 +209,10 @@ export function MessagesWorkspace({
   const [savingTemplate, setSavingTemplate] = useState(false)
   const [templateSaved, setTemplateSaved] = useState(false)
 
+  const [roleSettings, setRoleSettings] = useState<Record<string, TemplateSettings>>({})
+  const [savingRole, setSavingRole] = useState<Record<string, boolean>>({})
+  const [roleSaved, setRoleSaved] = useState<Record<string, boolean>>({})
+
   const [createTemplate, setCreateTemplate] = useState<WhatsAppCreateTemplateState>(EMPTY_CREATE_TEMPLATE)
   const [creatingTemplate, setCreatingTemplate] = useState(false)
   const [createResult, setCreateResult] = useState<WhatsAppCreateTemplateResult | null>(null)
@@ -211,17 +238,21 @@ export function MessagesWorkspace({
     let active = true
     async function load(): Promise<void> {
       try {
-        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription] = await Promise.all([
-          api.getMessages(),
-          api.getTopics?.(),
-          api.getTemplateSettings?.(),
-          api.getTranscription?.(),
-        ])
+        const roles = api.templateRoles ?? []
+        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription, loadedRoleSettings] =
+          await Promise.all([
+            api.getMessages(),
+            api.getTopics?.(),
+            api.getTemplateSettings?.(),
+            api.getTranscription?.(),
+            Promise.all(roles.map((role) => role.getSettings())),
+          ])
         if (!active) return
         setMessages(loadedMessages)
         if (loadedTopics) setTopics(loadedTopics)
         if (loadedTemplateSettings) setTemplateSettings(loadedTemplateSettings)
         if (loadedTranscription) setTranscription(loadedTranscription)
+        setRoleSettings(Object.fromEntries(roles.map((role, index) => [role.key, loadedRoleSettings[index]])))
         setLoadState('ready')
       } catch {
         if (active) setLoadState('error')
@@ -279,6 +310,42 @@ export function MessagesWorkspace({
     }
   }
 
+  function handleSaveRole(role: MessagesWorkspaceTemplateRole): (event: FormEvent) => Promise<void> {
+    return async (event: FormEvent) => {
+      event.preventDefault()
+      const settings = roleSettings[role.key]
+      if (!settings) return
+      setSavingRole((previous) => ({ ...previous, [role.key]: true }))
+      try {
+        await role.saveSettings(settings)
+        setRoleSaved((previous) => ({ ...previous, [role.key]: true }))
+        setTimeout(() => setRoleSaved((previous) => ({ ...previous, [role.key]: false })), SAVE_FEEDBACK_MS)
+      } finally {
+        setSavingRole((previous) => ({ ...previous, [role.key]: false }))
+      }
+    }
+  }
+
+  function handleSelectRoleTemplate(
+    role: MessagesWorkspaceTemplateRole,
+    name: string,
+    template: WhatsAppTemplateSummary | undefined,
+  ): void {
+    setRoleSettings((previous) => {
+      const current = previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS
+      if (!template) return { ...previous, [role.key]: { ...current, templateName: name } }
+      const shouldSeedVariables = template.variableCount > 0 && current.variables.length === 0
+      return {
+        ...previous,
+        [role.key]: {
+          templateName: name,
+          templateLanguage: template.language,
+          variables: shouldSeedVariables ? Array.from({ length: template.variableCount }, () => '') : current.variables,
+        },
+      }
+    })
+  }
+
   async function handleCreateTemplate(event: FormEvent): Promise<void> {
     event.preventDefault()
     if (!api.createTemplate) return
@@ -443,9 +510,45 @@ export function MessagesWorkspace({
                     submitting: creatingTemplate,
                     result: createResult,
                     labels: labels.createTemplate,
+                    ...(createTemplatePreviewCompanyName ? { previewCompanyName: createTemplatePreviewCompanyName } : {}),
+                    ...(createTemplateVariableExamples ? { variableExamples: createTemplateVariableExamples } : {}),
                   },
                 }
               : {})}
+            {...(templateRoles.length > 0
+              ? {
+                  extraRoleForms: (
+                    <>
+                      {templateRoles.map((role) => {
+                        const settings = roleSettings[role.key] ?? EMPTY_TEMPLATE_SETTINGS
+                        return (
+                          <WhatsAppTemplateSettingsForm
+                            key={role.key}
+                            templates={templates}
+                            loadingTemplates={loadingTemplates}
+                            templatesError={templatesError}
+                            selectedTemplateName={settings.templateName}
+                            onSelectTemplate={(name, template) => handleSelectRoleTemplate(role, name, template)}
+                            variables={settings.variables}
+                            onVariablesChange={(variables) =>
+                              setRoleSettings((previous) => ({
+                                ...previous,
+                                [role.key]: { ...(previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS), variables },
+                              }))
+                            }
+                            onSave={handleSaveRole(role)}
+                            saving={Boolean(savingRole[role.key])}
+                            saveSuccess={Boolean(roleSaved[role.key])}
+                            labels={{ ...labels.templateSettings, ...role.labels }}
+                            {...(api.listTemplates ? { onRefreshTemplates: () => void reloadTemplates() } : {})}
+                            {...(availableVariables ? { availableVariables } : {})}
+                          />
+                        )
+                      })}
+                    </>
+                  ),
+                }
+              : {})}
           />
         </div>
       ) : null}

package/src/settings/WhatsAppTemplatesSettings.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { WhatsAppTemplatesSettings } from './WhatsAppTemplatesSettings'
+import type { WhatsAppTemplatesSettingsProps } from './WhatsAppTemplatesSettings'
+
+function render(overrides: Partial<WhatsAppTemplatesSettingsProps> = {}): string {
+  return renderToStaticMarkup(
+    <WhatsAppTemplatesSettings
+      templates={[]}
+      selectedTemplateName=""
+      onSelectTemplate={() => {}}
+      variables={[]}
+      onVariablesChange={() => {}}
+      onSave={() => {}}
+      {...overrides}
+    />,
+  )
+}
+
+describe('WhatsAppTemplatesSettings', () => {
+  it('renderiza os formulários extras de papel na aba de seleção', () => {
+    const markup = render({ extraRoleForms: <div>MARCADOR_PAPEL_EXTRA</div> })
+
+    expect(markup).toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('sem extraRoleForms, o comportamento é idêntico ao de antes', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('aceita previewCompanyName e variableExamples em create sem quebrar a tipagem', () => {
+    const markup = render({
+      create: {
+        value: {
+          name: '',
+          category: 'UTILITY',
+          language: 'pt_BR',
+          headerType: 'NONE',
+          headerText: '',
+          bodyText: '',
+          footerText: '',
+        },
+        onChange: () => {},
+        onSubmit: () => {},
+        previewCompanyName: 'Empresa Teste',
+        variableExamples: ['João', '123'],
+      },
+    })
+
+    expect(markup).toContain('Criar template')
+  })
+
+  it('sem create, a aba de criação não aparece', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('Criar template')
+  })
+})

package/src/settings/WhatsAppTemplatesSettings.tsx

@@ -8,7 +8,7 @@
  * Segue presentacional: nenhuma chamada de rede aqui. Templates, estado e handlers vêm por props.
  */
 
-import { useState, type FormEvent } from 'react'
+import { useState, type FormEvent, type ReactNode } from 'react'
 import {
   WhatsAppTemplateSettingsForm,
   type WhatsAppTemplateSummary,
@@ -59,16 +59,25 @@ export interface WhatsAppTemplatesSettingsProps {
     submitting?: boolean
     result?: WhatsAppCreateTemplateResult | null
     labels?: Partial<WhatsAppCreateTemplateFormLabels>
+    /** Nome exibido na prévia do template criado; sem isto o form usa seu próprio fallback. */
+    previewCompanyName?: string
+    variableExamples?: readonly string[]
   }
   labels?: Partial<WhatsAppTemplatesSettingsLabels>
   /** Vocabulário do formulário de seleção — separado de `labels`, que nomeia só as abas daqui. */
   settingsLabels?: Partial<WhatsAppTemplateSettingsFormLabels>
+  /**
+   * Formulários extras de seleção (um por papel adicional de template, ex.: despedida), empilhados
+   * abaixo do principal na mesma sub-aba. Ausente = só o papel principal, comportamento de sempre.
+   */
+  extraRoleForms?: ReactNode
 }
 
 export function WhatsAppTemplatesSettings({
   labels: labelsOverride,
   settingsLabels,
   create,
+  extraRoleForms,
   ...settingsProps
 }: WhatsAppTemplatesSettingsProps) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride }
@@ -105,7 +114,10 @@ export function WhatsAppTemplatesSettings({
       </nav>
 
       {tab === TEMPLATE_SETTINGS_TAB.SELECT ? (
-        <WhatsAppTemplateSettingsForm {...settingsProps} {...(settingsLabels ? { labels: settingsLabels } : {})} />
+        <div className="space-y-6">
+          <WhatsAppTemplateSettingsForm {...settingsProps} {...(settingsLabels ? { labels: settingsLabels } : {})} />
+          {extraRoleForms}
+        </div>
       ) : create ? (
         <WhatsAppCreateTemplateForm {...create} />
       ) : null}