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

package/dist/{chunk-CUYYYZWD.js → chunk-BJNRLLDO.js}

@@ -1601,6 +1601,85 @@ function phoneInitials(number) {
   return digits.slice(-2);
 }
 
+// src/conversationChannel.ts
+var CONVERSATION_CHANNEL = {
+  WHATSAPP: "whatsapp",
+  MESSENGER: "messenger",
+  INSTAGRAM: "instagram",
+  WEBCHAT: "webchat"
+};
+var DEFAULT_CONVERSATION_CHANNEL = CONVERSATION_CHANNEL.WHATSAPP;
+var REOPEN_MECHANISM = {
+  TEMPLATE: "template",
+  TAG: "tag",
+  NONE: "none"
+};
+var HANDLE_KIND = {
+  PHONE: "phone",
+  USERNAME: "username",
+  SESSION: "session"
+};
+var CHANNEL_CAPABILITIES = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: {
+    label: "WhatsApp",
+    icon: "\u{1F4AC}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TEMPLATE,
+    handleKind: HANDLE_KIND.PHONE
+  },
+  [CONVERSATION_CHANNEL.MESSENGER]: {
+    // Messenger também tem 24h, mas reabre com message tag — não com template aprovado.
+    label: "Messenger",
+    icon: "\u{1F4E8}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TAG,
+    handleKind: HANDLE_KIND.USERNAME
+  },
+  [CONVERSATION_CHANNEL.INSTAGRAM]: {
+    label: "Instagram",
+    icon: "\u{1F4F7}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TAG,
+    handleKind: HANDLE_KIND.USERNAME
+  },
+  [CONVERSATION_CHANNEL.WEBCHAT]: {
+    // Chat próprio: sem intermediário, sem janela. Bloquear o composer aqui seria inventar limite.
+    label: "Chat do site",
+    icon: "\u{1F310}",
+    hasSessionWindow: false,
+    windowHours: 0,
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION
+  }
+};
+function capabilitiesOf(channel) {
+  return CHANNEL_CAPABILITIES[channel ?? DEFAULT_CONVERSATION_CHANNEL];
+}
+var CHANNEL_FILTER_ALL = "all";
+function channelFiltersFor(conversations) {
+  const present = new Set(
+    conversations.map((conversation) => conversation.channel ?? DEFAULT_CONVERSATION_CHANNEL)
+  );
+  if (present.size < 2) return [];
+  const ordered = Object.keys(CHANNEL_CAPABILITIES).filter((channel) => present.has(channel));
+  return [
+    { value: CHANNEL_FILTER_ALL, label: "Todos" },
+    ...ordered.map((channel) => ({ value: channel, label: CHANNEL_CAPABILITIES[channel].label }))
+  ];
+}
+function formatContactHandle(params) {
+  const { handleKind } = capabilitiesOf(params.channel);
+  if (handleKind === HANDLE_KIND.PHONE) return formatPhone(params.handle);
+  if (handleKind === HANDLE_KIND.USERNAME) return params.handle.startsWith("@") ? params.handle : `@${params.handle}`;
+  return `Visitante ${params.handle.slice(-6)}`;
+}
+function contactFlag(params) {
+  return capabilitiesOf(params.channel).handleKind === HANDLE_KIND.PHONE ? phoneCountryFlag(params.handle) : "";
+}
+
 // src/hooks/useAsyncResource.ts
 import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef4, useState as useState9 } from "react";
 function useAsyncResource(fetcher, deps) {
@@ -2258,6 +2337,299 @@ function DocumentsLibrary({
   ] });
 }
 
+// src/preview/ConversationSimulatorClient.ts
+var SIMULATOR_FILE_MEDIA_KINDS = ["image", "video", "document"];
+function mediaKindOf(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  return "document";
+}
+function acceptsMediaKind(client, kind) {
+  if (!client.sendMedia) return false;
+  return client.acceptedMediaKinds?.includes(kind) ?? true;
+}
+function isConversationSimulatorClient(candidate) {
+  return typeof candidate.sendReply === "function";
+}
+function toConversationSimulatorClient({
+  client,
+  uploadMedia
+}) {
+  const upload = uploadMedia ?? client.uploadMedia;
+  const base = {
+    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 } : {}
+      });
+    }
+  };
+}
+
+// src/preview/ConversationPreview.tsx
+import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef6, useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function mediaTypeOf(mimeType) {
+  return mediaKindOf(mimeType);
+}
+var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
+var FOLLOW_UP_REFRESH_MS = [400, 1200, 3e3];
+function decorate(messages) {
+  return messages.map((message, index) => {
+    const previous = index > 0 ? messages[index - 1] : void 0;
+    const currentTime = new Date(message.timestamp).getTime();
+    const previousTime = previous ? new Date(previous.timestamp).getTime() : 0;
+    return {
+      message,
+      isFirstInGroup: !previous || previous.sender !== message.sender || currentTime - previousTime > GROUPING_WINDOW_MS,
+      showDateDivider: !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
+    };
+  });
+}
+function statusOf(error) {
+  if (typeof error !== "object" || error === null) return void 0;
+  const candidate = error;
+  const value = candidate.status ?? candidate.statusCode;
+  return typeof value === "number" ? value : void 0;
+}
+function isNotFound(error) {
+  return statusOf(error) === 404;
+}
+function describeLoadFailure(error) {
+  const status = statusOf(error);
+  if (status === 401 || status === 403) {
+    return "Sem sess\xE3o de administrador nesta aba: a mensagem \xE9 entregue no webhook, mas o transcript n\xE3o pode ser lido. Entre no painel nesta mesma aba e reabra o simulador.";
+  }
+  if (error instanceof Error && error.message) return `N\xE3o foi poss\xEDvel ler o transcript: ${error.message}`;
+  return "N\xE3o foi poss\xEDvel ler o transcript da conversa.";
+}
+function ConversationPreview({
+  client,
+  sse,
+  conversationId,
+  loadMessages,
+  placeholder,
+  pollIntervalMs,
+  uploadMedia
+}) {
+  const [messages, setMessages] = useState12([]);
+  const [failure, setFailure] = useState12(void 0);
+  const [loadFailure, setLoadFailure] = useState12(void 0);
+  const [isRecording, setIsRecording] = useState12(false);
+  const [pendingLocal, setPendingLocal] = useState12([]);
+  const loadMessagesRef = useRef6(loadMessages);
+  const bottomRef = useRef6(null);
+  loadMessagesRef.current = loadMessages;
+  const simulator = useMemo4(
+    () => isConversationSimulatorClient(client) ? client : toConversationSimulatorClient({ client, ...uploadMedia ? { uploadMedia } : {} }),
+    [client, uploadMedia]
+  );
+  const refresh = useCallback6(async () => {
+    try {
+      const loaded = await loadMessagesRef.current(conversationId);
+      setMessages(loaded);
+      setLoadFailure(void 0);
+      if (loaded.length > 0) setPendingLocal([]);
+    } catch (error) {
+      if (isNotFound(error)) {
+        setMessages([]);
+        setLoadFailure(void 0);
+        return;
+      }
+      setLoadFailure(describeLoadFailure(error));
+    }
+  }, [conversationId]);
+  useEffect5(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect5(() => {
+    const source = sse.connectConversationStream(conversationId);
+    const handler = () => {
+      void refresh();
+    };
+    source.addEventListener("message", handler);
+    return () => {
+      source.removeEventListener("message", handler);
+      source.close();
+    };
+  }, [sse, conversationId, refresh]);
+  useEffect5(() => {
+    if (!pollIntervalMs) return;
+    const timer = setInterval(() => void refresh(), pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [pollIntervalMs, refresh]);
+  useEffect5(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [messages]);
+  const rendered = useMemo4(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal]);
+  async function refreshWithFollowUps() {
+    await refresh();
+    for (const atraso of FOLLOW_UP_REFRESH_MS) {
+      setTimeout(() => void refresh(), atraso);
+    }
+  }
+  async function handleSend(text) {
+    setFailure(void 0);
+    try {
+      await simulator.sendText(text);
+      setPendingLocal((current) => [
+        ...current,
+        {
+          id: `local-${current.length}-${text.length}`,
+          type: "text",
+          content: text,
+          // Do ponto de vista do servidor, mensagem do cliente é inbound — é assim que ela aparece
+          // como "minha" nesta visão.
+          direction: "inbound",
+          sender: "customer",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          status: "sent"
+        }
+      ]);
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a mensagem no webhook.");
+    }
+  }
+  async function handleInteractiveSelect(selection) {
+    setFailure(void 0);
+    try {
+      await simulator.sendReply(selection);
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a resposta no webhook.");
+    }
+  }
+  const sendMedia = simulator.sendMedia;
+  const canAttachFile = SIMULATOR_FILE_MEDIA_KINDS.some((kind) => acceptsMediaKind(simulator, kind));
+  const canRecordAudio = acceptsMediaKind(simulator, "audio");
+  async function handleAttach(file) {
+    if (!sendMedia) return;
+    setFailure(void 0);
+    try {
+      await sendMedia({
+        mediaKind: mediaKindOf(file.type),
+        file,
+        mimeType: file.type,
+        filename: file.name
+      });
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao enviar o arquivo.");
+    }
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs13(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
+      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs13("div", { children: [
+        showDateDivider ? /* @__PURE__ */ jsx18(DateDivider, { iso: message.timestamp }) : null,
+        /* @__PURE__ */ jsx18(
+          MessageBubble,
+          {
+            message,
+            isMine: message.direction === "inbound",
+            isFirstInGroup,
+            onInteractiveSelect: message.direction === "outbound" ? (selection) => void handleInteractiveSelect(selection) : void 0
+          }
+        )
+      ] }, message.id)),
+      /* @__PURE__ */ jsx18("div", { ref: bottomRef })
+    ] }),
+    failure ? /* @__PURE__ */ jsx18("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
+    loadFailure ? /* @__PURE__ */ jsx18("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
+    /* @__PURE__ */ jsx18(
+      MessageComposer,
+      {
+        onSend: (text) => void handleSend(text),
+        onAttach: canAttachFile ? (file) => void handleAttach(file) : void 0,
+        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para ouvir" : placeholder ?? "Escreva como o cliente\u2026",
+        idleAction: canRecordAudio ? /* @__PURE__ */ jsx18(
+          AudioRecorderButton,
+          {
+            onRecorded: (file) => void handleAttach(file),
+            onFailure: (message) => setFailure(message),
+            onRecordingChange: setIsRecording
+          }
+        ) : void 0
+      }
+    )
+  ] });
+}
+
+// src/preview/ConversationSimulatorPanel.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS = {
+  title: "Simulador do cliente",
+  destinationHint: "entrega no webhook real",
+  close: "Fechar simulador",
+  placeholder: "Escreva como o cliente\u2026"
+};
+var SIMULATOR_PANEL_CHANNEL_WORDING = {
+  [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\u2026"
+  }
+};
+function simulatorPanelLabelsOf(channel) {
+  return {
+    ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+    ...SIMULATOR_PANEL_CHANNEL_WORDING[channel ?? DEFAULT_CONVERSATION_CHANNEL]
+  };
+}
+function ConversationSimulatorPanel({
+  onClose,
+  channel,
+  displayHandle,
+  displayNumber,
+  labels,
+  headerActions,
+  ...previewProps
+}) {
+  const text = { ...simulatorPanelLabelsOf(channel), ...labels };
+  const subtitle = [displayHandle ?? displayNumber ?? previewProps.conversationId, text.destinationHint].join(" \xB7 ");
+  return /* @__PURE__ */ jsxs14("aside", { className: "cv-simulator-panel", "aria-label": text.title, children: [
+    /* @__PURE__ */ jsxs14("header", { className: "cv-simulator-panel__header", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "cv-simulator-panel__heading", children: [
+        /* @__PURE__ */ jsx19("h2", { className: "cv-simulator-panel__title", children: text.title }),
+        /* @__PURE__ */ jsx19("p", { className: "cv-simulator-panel__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "cv-simulator-panel__actions", children: [
+        headerActions,
+        /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "data-cv-tooltip": text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx19("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx19("div", { className: "cv-simulator-panel__body", children: /* @__PURE__ */ jsx19(ConversationPreview, { ...previewProps, placeholder: text.placeholder }) })
+  ] });
+}
+
 export {
   ConversationLocalesProvider,
   useConversationLocales,
@@ -2302,8 +2674,17 @@ export {
   MessageComposer,
   DateDivider,
   formatPhone,
-  phoneCountryFlag,
   phoneInitials,
+  CONVERSATION_CHANNEL,
+  DEFAULT_CONVERSATION_CHANNEL,
+  REOPEN_MECHANISM,
+  HANDLE_KIND,
+  CHANNEL_CAPABILITIES,
+  capabilitiesOf,
+  CHANNEL_FILTER_ALL,
+  channelFiltersFor,
+  formatContactHandle,
+  contactFlag,
   useAsyncResource,
   conversationsOf,
   totalOf,
@@ -2313,5 +2694,15 @@ export {
   DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
   ConversationDocumentsPanel,
   DEFAULT_DOCUMENTS_LIBRARY_LABELS,
-  DocumentsLibrary
+  DocumentsLibrary,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  mediaKindOf,
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  toConversationSimulatorClient,
+  mediaTypeOf,
+  ConversationPreview,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  simulatorPanelLabelsOf,
+  ConversationSimulatorPanel
 };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import react__default, { ReactNode, CSSProperties, UIEvent, FormEvent, RefObject } from 'react';
-import { G as MessagePayload, N as ResolveMediaUrl, z as InteractiveSelection, J as MessageTranscription, x as InteractivePayload, r as ConversationsFeatures, o as ConversationSummary, j as ConversationChannel, L as ListConversationsParams, q as ConversationsApi, S as SSEProvider, T as TranscriptionMode, B as ListDocumentsParams, k as ConversationDocument, p as ConversationTemplate, f as ChannelFilter, g as ChannelFilterOption } from './types-De5aN-E_.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, C as CHANNEL_CAPABILITIES, c as CHANNEL_FILTER_ALL, d as CONVERSATION_CHANNEL, e as ChannelCapabilities, h as CompanyDocument, i as CompanyDocumentPage, l as ConversationDocumentPage, m as ConversationEventSource, n as ConversationPage, s as ConversationsTheme, t as ConversationsUIConfig, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, u as DEFAULT_CONVERSATION_CHANNEL, v as DEFAULT_MAX_RECORDING_MILLISECONDS, F as FormatContactHandleParams, H as HANDLE_KIND, w as HandleKind, I as InteractiveOption, y as InteractiveSection, M as MediaRenderer, E as MediaRendererProps, R as REOPEN_MECHANISM, K as ReopenMechanism, O as TranscriptionStatus, P as capabilitiesOf, Q as channelFiltersFor, U as contactFlag, V as formatContactHandle } from './types-De5aN-E_.js';
+import { U as MessagePayload, a3 as ResolveMediaUrl, P as InteractiveSelection, V as MessageTranscription, N as InteractivePayload, x as ConversationsFeatures, u as ConversationSummary, j as ConversationChannel, Q as ListConversationsParams, w as ConversationsApi, a5 as SSEProvider, aa as TranscriptionMode, R as ListDocumentsParams, k as ConversationDocument, v as ConversationTemplate, f as ChannelFilter, g as ChannelFilterOption, q as ConversationSimulatorClient, s as ConversationSimulatorPanelLabels, Z as PreviewUploadedMedia } from './ConversationSimulatorPanel--5fIzXWY.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, C as CHANNEL_CAPABILITIES, c as CHANNEL_FILTER_ALL, d as CONVERSATION_CHANNEL, e as ChannelCapabilities, h as CompanyDocument, i as CompanyDocumentPage, l as ConversationDocumentPage, m as ConversationEventSource, n as ConversationPage, y as ConversationsTheme, z as ConversationsUIConfig, E as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, F as DEFAULT_CONVERSATION_CHANNEL, H as DEFAULT_MAX_RECORDING_MILLISECONDS, J as FormatContactHandleParams, K as HANDLE_KIND, L as HandleKind, M as InteractiveOption, O as InteractiveSection, S as MediaRenderer, T as MediaRendererProps, a1 as REOPEN_MECHANISM, a2 as ReopenMechanism, a7 as SendSimulatorMediaParams, a8 as SimulatorMediaKind, ab as TranscriptionStatus, ae as capabilitiesOf, af as channelFiltersFor, ag as contactFlag, ak as formatContactHandle } from './ConversationSimulatorPanel--5fIzXWY.js';
+import '@adatechnology/meta-whatsapp-contracts/testing';
 
 interface MessageBubbleProps {
     message: MessagePayload;
@@ -1333,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;
@@ -1373,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;
@@ -1387,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.
@@ -1421,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[];
@@ -1681,13 +1711,38 @@ interface UseConversationsInboxResult {
 }
 declare function useConversationsInbox(params?: UseConversationsInboxParams): UseConversationsInboxResult;
 
+type SimulatorTransportParams = {
+    readonly conversationId: string;
+    readonly channel: ConversationChannel;
+    /** Identificador do contato no canal: telefone no WhatsApp, id de sessão no chat do site. */
+    readonly handle: string;
+};
+/**
+ * Fábrica do transporte daquele canal.
+ *
+ * É o único ponto onde o host precisa saber de canal: o painel, a moldura e o comportamento são os
+ * mesmos em todos. No WhatsApp devolve o cliente-ponte (assinatura no servidor do host); no chat do
+ * site, o cliente das rotas do widget.
+ */
+type SimulatorTransportFactory = (params: SimulatorTransportParams) => ConversationSimulatorClient;
 interface ConversationsWorkspaceSimulator {
     /**
-     * Desenha o painel do cliente. Fica com o host porque o simulador precisa da rota assinada no
-     * servidor DELE — e é o que mantém o `preview/` fora do bundle de quem não usa.
+     * Um transporte por canal — o workspace monta o painel com o da conversa selecionada.
+     *
+     * Canal sem transporte não desenha o botão: capacidade é opcional por ausência, e oferecer
+     * "simular" numa conversa que não tem como receber a mensagem é um botão que falha ao ser tocado.
+     */
+    readonly transports?: Partial<Record<ConversationChannel, SimulatorTransportFactory>>;
+    /**
+     * Válvula de escape: o host desenha o painel inteiro. Tem precedência sobre `transports`.
+     *
+     * Era a única porta antes de `transports`, quando o simulador só falava WhatsApp e cada produto
+     * remontava a moldura — o que fez duas telas da mesma casa divergirem. Continua aceito para não
+     * quebrar quem já a usa.
      */
-    render(params: {
+    render?(params: {
         conversationId: string;
+        channel: ConversationChannel;
         close: () => void;
     }): ReactNode;
     /** Ausente = ligado. Serve para esconder fora de desenvolvimento sem condicionar o JSX. */
@@ -1695,6 +1750,12 @@ interface ConversationsWorkspaceSimulator {
     /** Ícone da biblioteca (lucide) no utilitário do cabeçalho. Ausente, entra o frasco de teste. */
     readonly icon?: ReactNode;
     readonly label?: string;
+    /** Vocabulário do painel. O que muda de canal (destino, placeholder) já vem resolvido. */
+    readonly labels?: Partial<ConversationSimulatorPanelLabels>;
+    /** Destino do upload no canal que entrega mídia por referência (o caminho da Meta). */
+    readonly uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>;
+    /** Recarrega o transcript a cada N ms. Serve a host sem stream. */
+    readonly pollIntervalMs?: number;
 }
 interface ConversationsWorkspaceProps {
     readonly labels?: Partial<ConversationsWorkspaceLabels>;
@@ -1819,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, 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 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, 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 };