@adatechnology/conversations-ui 0.1.0-rc.35 → 0.1.0-rc.37

package/dist/index.d.ts

@@ -1334,12 +1334,20 @@ 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;
 }
-declare function WhatsAppTemplatesSettings({ labels: labelsOverride, settingsLabels, create, ...settingsProps }: WhatsAppTemplatesSettingsProps): react.JSX.Element;
+declare function WhatsAppTemplatesSettings({ labels: labelsOverride, settingsLabels, create, extraRoleForms, ...settingsProps }: WhatsAppTemplatesSettingsProps): react.JSX.Element;
 
 interface TopicItem {
     key: string;
@@ -1374,6 +1382,22 @@ interface TemplateSettings {
     templateLanguage: string;
     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.
+ */
+interface MessagesWorkspaceTemplateRole {
+    readonly key: string;
+    readonly labels: {
+        sectionTitle: string;
+        sectionDescription: string;
+    };
+    getSettings(): Promise<TemplateSettings>;
+    saveSettings(settings: TemplateSettings): Promise<void>;
+}
 interface TranscriptionSettings {
     enabled: boolean;
     mode: TranscriptionMode;
@@ -1388,6 +1412,8 @@ 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.
@@ -1422,9 +1448,12 @@ 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;
 }
-declare function MessagesWorkspace({ api, labels: labelsOverride, welcomePlaceholders, farewellPlaceholders, availableVariables, renderTemplatesNotice, className, }: MessagesWorkspaceProps): react.JSX.Element;
+declare function MessagesWorkspace({ api, labels: labelsOverride, welcomePlaceholders, farewellPlaceholders, availableVariables, renderTemplatesNotice, createTemplatePreviewCompanyName, createTemplateVariableExamples, className, }: MessagesWorkspaceProps): react.JSX.Element;
 
 interface UseConversationMessagesResult {
     messages: MessagePayload[];
@@ -1851,4 +1880,4 @@ interface ConversationsInboxListProps {
 }
 declare function ConversationsInboxList({ inbox, labels, className, renderFilters, renderBulkActions, renderRow, onSendTemplateToSelected, }: ConversationsInboxListProps): react.JSX.Element;
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, type MessagesWorkspaceTemplateRole, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };

package/dist/index.js

@@ -3267,6 +3267,7 @@ function WhatsAppTemplatesSettings({
   labels: labelsOverride,
   settingsLabels,
   create,
+  extraRoleForms,
   ...settingsProps
 }) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
@@ -3300,7 +3301,10 @@ function WhatsAppTemplatesSettings({
         }
       ) : null
     ] }),
-    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx22(WhatsAppTemplateSettingsForm, { ...settingsProps, ...settingsLabels ? { labels: settingsLabels } : {} }) : create ? /* @__PURE__ */ jsx22(WhatsAppCreateTemplateForm, { ...create }) : null
+    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsxs20("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx22(WhatsAppTemplateSettingsForm, { ...settingsProps, ...settingsLabels ? { labels: settingsLabels } : {} }),
+      extraRoleForms
+    ] }) : create ? /* @__PURE__ */ jsx22(WhatsAppCreateTemplateForm, { ...create }) : null
   ] });
 }
 
@@ -3390,7 +3394,7 @@ function TopicsForm({
 
 // src/settings/MessagesWorkspace.tsx
 import { useCallback as useCallback6, useEffect as useEffect9, useState as useState14 } from "react";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_LABELS7 = {
   title: "Mensagens",
   subtitle: "Mensagens do bot e templates do WhatsApp.",
@@ -3439,9 +3443,12 @@ function MessagesWorkspace({
   farewellPlaceholders,
   availableVariables,
   renderTemplatesNotice,
+  createTemplatePreviewCompanyName,
+  createTemplateVariableExamples,
   className
 }) {
   const labels = { ...DEFAULT_LABELS7, ...labelsOverride };
+  const templateRoles = api.templateRoles ?? [];
   const hasTopics = Boolean(api.getTopics && api.saveTopics);
   const hasTemplates = Boolean(api.getTemplateSettings && api.saveTemplateSettings);
   const hasTranscription = Boolean(api.getTranscription && api.saveTranscription);
@@ -3459,6 +3466,9 @@ function MessagesWorkspace({
   const [templatesError, setTemplatesError] = useState14(false);
   const [savingTemplate, setSavingTemplate] = useState14(false);
   const [templateSaved, setTemplateSaved] = useState14(false);
+  const [roleSettings, setRoleSettings] = useState14({});
+  const [savingRole, setSavingRole] = useState14({});
+  const [roleSaved, setRoleSaved] = useState14({});
   const [createTemplate, setCreateTemplate] = useState14(EMPTY_CREATE_TEMPLATE);
   const [creatingTemplate, setCreatingTemplate] = useState14(false);
   const [createResult, setCreateResult] = useState14(null);
@@ -3481,17 +3491,20 @@ function MessagesWorkspace({
     let active = true;
     async function load() {
       try {
-        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription] = await Promise.all([
+        const roles = api.templateRoles ?? [];
+        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription, loadedRoleSettings] = await Promise.all([
           api.getMessages(),
           api.getTopics?.(),
           api.getTemplateSettings?.(),
-          api.getTranscription?.()
+          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");
@@ -3541,6 +3554,36 @@ function MessagesWorkspace({
       setSavingTemplate(false);
     }
   }
+  function handleSaveRole(role) {
+    return async (event) => {
+      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, name, template) {
+    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) {
     event.preventDefault();
     if (!api.createTemplate) return;
@@ -3671,8 +3714,37 @@ function MessagesWorkspace({
               onSubmit: handleCreateTemplate,
               submitting: creatingTemplate,
               result: createResult,
-              labels: labels.createTemplate
+              labels: labels.createTemplate,
+              ...createTemplatePreviewCompanyName ? { previewCompanyName: createTemplatePreviewCompanyName } : {},
+              ...createTemplateVariableExamples ? { variableExamples: createTemplateVariableExamples } : {}
             }
+          } : {},
+          ...templateRoles.length > 0 ? {
+            extraRoleForms: /* @__PURE__ */ jsx24(Fragment6, { children: templateRoles.map((role) => {
+              const settings = roleSettings[role.key] ?? EMPTY_TEMPLATE_SETTINGS;
+              return /* @__PURE__ */ jsx24(
+                WhatsAppTemplateSettingsForm,
+                {
+                  templates,
+                  loadingTemplates,
+                  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 } : {}
+                },
+                role.key
+              );
+            }) })
           } : {}
         }
       )
@@ -4591,7 +4663,7 @@ function useConversationsInbox(params = {}) {
 }
 
 // src/workspace/ConversationsWorkspace.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function ConversationsWorkspace({
   labels: labelsOverride,
   filters,
@@ -4764,7 +4836,7 @@ function ConversationsWorkspace({
     ] }),
     inbox.loadFailure ? /* @__PURE__ */ jsxs26("p", { role: "alert", className: "cv-workspace-failure", children: [
       inbox.loadFailure,
-      signInHref ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+      signInHref ? /* @__PURE__ */ jsxs26(Fragment7, { children: [
         " ",
         /* @__PURE__ */ jsx28("a", { href: signInHref, className: "cv-workspace-failure__link", children: labels.signIn })
       ] }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.35",
+  "version": "0.1.0-rc.37",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -146,6 +146,7 @@ export type {
   MessagesWorkspaceProps,
   MessagesWorkspaceApi,
   MessagesWorkspaceLabels,
+  MessagesWorkspaceTemplateRole,
   BotMessages,
   TemplateSettings,
   TranscriptionSettings,

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}