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

package/dist/preview/index.js

@@ -1,14 +1,22 @@
 import {
   AudioRecorderButton,
   ConversationDocumentsPanel,
+  ConversationPreview,
+  ConversationSimulatorPanel,
   ConversationWallpaper,
   ConversationsProvider,
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
-  DateDivider,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
   DocumentsLibrary,
   MessageBubble,
-  MessageComposer
-} from "../chunk-CUYYYZWD.js";
+  SIMULATOR_FILE_MEDIA_KINDS,
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  mediaKindOf,
+  mediaTypeOf,
+  simulatorPanelLabelsOf,
+  toConversationSimulatorClient
+} from "../chunk-BJNRLLDO.js";
 import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts
@@ -846,226 +854,6 @@ function createMockSSEProvider(params) {
   };
 }
 
-// src/preview/ConversationPreview.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function mediaTypeOf(mimeType) {
-  if (mimeType.startsWith("image/")) return "image";
-  if (mimeType.startsWith("video/")) return "video";
-  if (mimeType.startsWith("audio/")) return "audio";
-  return "document";
-}
-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] = useState([]);
-  const [failure, setFailure] = useState(void 0);
-  const [loadFailure, setLoadFailure] = useState(void 0);
-  const [isRecording, setIsRecording] = useState(false);
-  const [pendingLocal, setPendingLocal] = useState([]);
-  const loadMessagesRef = useRef(loadMessages);
-  const bottomRef = useRef(null);
-  loadMessagesRef.current = loadMessages;
-  const refresh = useCallback(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]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  useEffect(() => {
-    const source = sse.connectConversationStream(conversationId);
-    const handler = () => {
-      void refresh();
-    };
-    source.addEventListener("message", handler);
-    return () => {
-      source.removeEventListener("message", handler);
-      source.close();
-    };
-  }, [sse, conversationId, refresh]);
-  useEffect(() => {
-    if (!pollIntervalMs) return;
-    const timer = setInterval(() => void refresh(), pollIntervalMs);
-    return () => clearInterval(timer);
-  }, [pollIntervalMs, refresh]);
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }, [messages]);
-  const rendered = useMemo(() => 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 client.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);
-    const reply = { id: selection.option.id, title: selection.option.title };
-    try {
-      await (selection.kind === "button" ? client.sendButtonReply(reply) : client.sendListReply(reply));
-      await refreshWithFollowUps();
-    } catch (error) {
-      setFailure(error instanceof Error ? error.message : "Falha ao entregar a resposta no webhook.");
-    }
-  }
-  const uploadFile = uploadMedia ?? client.uploadMedia;
-  async function handleAttach(file) {
-    if (!uploadFile) return;
-    setFailure(void 0);
-    try {
-      const uploaded = await uploadFile(file);
-      await client.sendMedia({
-        mediaType: mediaTypeOf(uploaded.mimeType ?? file.type),
-        mediaId: uploaded.mediaId,
-        mimeType: uploaded.mimeType ?? file.type,
-        filename: uploaded.filename ?? file.name
-      });
-      await refreshWithFollowUps();
-    } catch (error) {
-      setFailure(error instanceof Error ? error.message : "Falha ao enviar o arquivo.");
-    }
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
-      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs("div", { children: [
-        showDateDivider ? /* @__PURE__ */ jsx(DateDivider, { iso: message.timestamp }) : null,
-        /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message,
-            isMine: message.direction === "inbound",
-            isFirstInGroup,
-            onInteractiveSelect: message.direction === "outbound" ? (selection) => void handleInteractiveSelect(selection) : void 0
-          }
-        )
-      ] }, message.id)),
-      /* @__PURE__ */ jsx("div", { ref: bottomRef })
-    ] }),
-    failure ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
-    loadFailure ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
-    /* @__PURE__ */ jsx(
-      MessageComposer,
-      {
-        onSend: (text) => void handleSend(text),
-        onAttach: uploadFile ? (file) => void handleAttach(file) : void 0,
-        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para ouvir" : placeholder ?? "Escreva como o cliente\u2026",
-        idleAction: uploadFile ? /* @__PURE__ */ jsx(
-          AudioRecorderButton,
-          {
-            onRecorded: (file) => void handleAttach(file),
-            onFailure: (message) => setFailure(message),
-            onRecordingChange: setIsRecording
-          }
-        ) : void 0
-      }
-    )
-  ] });
-}
-
-// src/preview/ConversationSimulatorPanel.tsx
-import { jsx as jsx2, jsxs as jsxs2 } 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"
-};
-function ConversationSimulatorPanel({
-  onClose,
-  displayNumber,
-  labels,
-  headerActions,
-  ...previewProps
-}) {
-  const text = { ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, ...labels };
-  const subtitle = [displayNumber ?? previewProps.conversationId, text.destinationHint].join(" \xB7 ");
-  return /* @__PURE__ */ jsxs2("aside", { className: "cv-simulator-panel", "aria-label": text.title, children: [
-    /* @__PURE__ */ jsxs2("header", { className: "cv-simulator-panel__header", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "cv-simulator-panel__heading", children: [
-        /* @__PURE__ */ jsx2("h2", { className: "cv-simulator-panel__title", children: text.title }),
-        /* @__PURE__ */ jsx2("p", { className: "cv-simulator-panel__subtitle", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "cv-simulator-panel__actions", children: [
-        headerActions,
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, "data-cv-tooltip": text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "cv-simulator-panel__body", children: /* @__PURE__ */ jsx2(ConversationPreview, { ...previewProps, placeholder: text.placeholder }) })
-  ] });
-}
-
 // src/preview/createPreviewWebhookClient.ts
 import {
   buildInboundAudioPayload,
@@ -1275,42 +1063,42 @@ function startPreviewScript(params) {
 }
 
 // src/preview/MediaTypesPreview.tsx
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
 function MediaTypesPreview({
   conversationId = MEDIA_TYPES_CONVERSATION_ID,
   className
 }) {
-  const store = useMemo2(
+  const store = useMemo(
     () => createPreviewStore({ conversations: PREVIEW_CONVERSATIONS, messages: PREVIEW_MESSAGES }),
     []
   );
-  const api = useMemo2(() => createMockConversationsApi({ store }), [store]);
-  const sse = useMemo2(() => createMockSSEProvider({ store }), [store]);
+  const api = useMemo(() => createMockConversationsApi({ store }), [store]);
+  const sse = useMemo(() => createMockSSEProvider({ store }), [store]);
   const messages = PREVIEW_MESSAGES[conversationId] ?? [];
   const documents = PREVIEW_DOCUMENTS[conversationId] ?? [];
   const mimeTypes = [...new Set(documents.map((document) => document.mimeType))];
-  return /* @__PURE__ */ jsx3(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs3("div", { className, children: [
-    /* @__PURE__ */ jsxs3("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx3("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
-      /* @__PURE__ */ jsxs3("p", { className: "text-sm text-gray-500", children: [
+  return /* @__PURE__ */ jsx(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
         documents.length,
         " arquivos, ",
         mimeTypes.length,
         " tipos. Clique no olho para abrir em aba nova e no bot\xE3o da bolha para carregar a m\xEDdia na thread \u2014 \xE9 o que teste automatizado n\xE3o v\xEA."
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
-        /* @__PURE__ */ jsx3(DocumentsLibrary, { perPage: documents.length || 20 })
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
+        /* @__PURE__ */ jsx(DocumentsLibrary, { perPage: documents.length || 20 })
       ] }),
-      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
-        /* @__PURE__ */ jsx3(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
-        /* @__PURE__ */ jsx3(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
+        /* @__PURE__ */ jsx(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
+        /* @__PURE__ */ jsx(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx(
           MessageBubble,
           {
             message,
@@ -1343,6 +1131,8 @@ export {
   PreviewInProductionError,
   PreviewMediaUploadRejectedError,
   PreviewWebhookRejectedError,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  acceptsMediaKind,
   assertPreviewEnvironment,
   conversationChannel,
   createMockConversationsApi,
@@ -1354,10 +1144,14 @@ export {
   createPreviewMediaUploader,
   createPreviewStore,
   createPreviewWebhookClient,
+  isConversationSimulatorClient,
+  mediaKindOf,
   mediaTypeOf,
   previewFileBase64,
   previewFileUrl,
   resolvePreviewFileSample,
   signPreviewPayload,
-  startPreviewScript
+  simulatorPanelLabelsOf,
+  startPreviewScript,
+  toConversationSimulatorClient
 };

package/package.json

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

package/src/index.ts

@@ -251,9 +251,21 @@ export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WO
 export type {
   ConversationsWorkspaceProps,
   ConversationsWorkspaceSimulator,
+  SimulatorTransportFactory,
+  SimulatorTransportParams,
   ConversationsWorkspaceLabels,
   ConversationPaneProps,
   ConversationsInboxListProps,
   UseConversationsInboxParams,
   UseConversationsInboxResult,
 } from './workspace'
+
+// A porta do simulador entra no export principal como TIPO: `simulator.transports` é tipado por ela,
+// e obrigar o host a abrir o subpath `/preview` só para declarar a fábrica seria pedir que ele
+// importasse fixtures para escrever uma assinatura. `export type` é apagado no build — o `preview/`
+// continua fora do bundle de quem só declara o transporte.
+export type {
+  ConversationSimulatorClient,
+  SendSimulatorMediaParams,
+  SimulatorMediaKind,
+} from './preview/ConversationSimulatorClient'

package/src/preview/ConversationPreview.tsx

@@ -1,7 +1,11 @@
 /**
- * Visão lado-cliente: você digita como se fosse o cliente no WhatsApp e vê o bot responder. A
- * mensagem sai assinada para o webhook real, então o que roda aqui é o mesmo caminho de staging e
- * produção — webhook, parser, motor de conversa.
+ * Visão lado-cliente: você digita como se fosse o cliente e vê o bot responder. A mensagem sai pelo
+ * transporte real do canal — webhook assinado no WhatsApp, rota pública do widget no chat do site —,
+ * então o que roda aqui é o mesmo caminho de staging e produção: parser, motor de conversa, fluxo.
+ *
+ * O canal entra por `client` (a porta `ConversationSimulatorClient`), não por condicional aqui
+ * dentro: esta tela não sabe qual canal está simulando, e é o que permite o painel ficar no mesmo
+ * lugar da conversa para todos eles.
  *
  * É o layout de conversa de verdade (wallpaper, divisor de data, agrupamento de bolhas), não uma
  * casca de teste: o preview serve para julgar copy e fluxo, e isso só funciona se o que se vê
@@ -19,11 +23,24 @@ import { MessageBubble } from '../MessageBubble'
 import { MessageComposer } from '../MessageComposer'
 import { DateDivider } from '../DateDivider'
 import { ConversationWallpaper } from '../Wallpaper'
-import type { PreviewWebhookClient, SendPreviewMediaParams } from './createPreviewWebhookClient'
+import type { PreviewWebhookClient } from './createPreviewWebhookClient'
+import {
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  mediaKindOf,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  toConversationSimulatorClient,
+  type ConversationSimulatorClient,
+  type SimulatorMediaKind,
+} from './ConversationSimulatorClient'
 import { AudioRecorderButton } from '../AudioRecorderButton'
 
 export type ConversationPreviewProps = {
-  client: PreviewWebhookClient
+  /**
+   * Transporte do canal. `PreviewWebhookClient` continua aceito — é o caminho WhatsApp de antes
+   * desta porta, adaptado aqui dentro para não obrigar host nenhum a mudar de chamada.
+   */
+  client: ConversationSimulatorClient | PreviewWebhookClient
   sse: SSEProvider
   conversationId: string
   loadMessages: (conversationId: string) => Promise<MessagePayload[]>
@@ -35,12 +52,10 @@ export type ConversationPreviewProps = {
    */
   pollIntervalMs?: number
   /**
-   * Como transformar um arquivo do disco (ou o áudio gravado) na referência que o webhook carrega.
-   * O caminho da Meta entrega mídia por `id`, e quem sabe hospedar o arquivo é o host — a SDK não
-   * inventa um endpoint de upload. Ausente, o compositor não oferece anexo nem gravação: melhor um
-   * botão que não existe do que um que falha ao ser tocado.
+   * Destino alternativo do upload, no canal que sobe a mídia antes de citá-la (o caminho da Meta
+   * entrega mídia por `id`). Sem isto, usa o do próprio `client`. Canal que manda os bytes direto
+   * ignora esta prop: quem decide referência × bytes é o adaptador do canal.
    */
-  /** Destino alternativo do áudio gravado. Sem isto, usa o do próprio `client`. */
   uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>
 }
 
@@ -50,12 +65,9 @@ export type PreviewUploadedMedia = {
   readonly filename?: string
 }
 
-/** Deriva o tipo de mídia do WhatsApp a partir do MIME do arquivo escolhido. */
-export function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'] {
-  if (mimeType.startsWith('image/')) return 'image'
-  if (mimeType.startsWith('video/')) return 'video'
-  if (mimeType.startsWith('audio/')) return 'audio'
-  return 'document'
+/** @deprecated Use `mediaKindOf`, que não nomeia canal. Mantido para quem já importa. */
+export function mediaTypeOf(mimeType: string): SimulatorMediaKind {
+  return mediaKindOf(mimeType)
 }
 
 // Mesma janela usada pelo WhatsApp para colar bolhas do mesmo autor: acima disso, a mensagem
@@ -139,6 +151,14 @@ export function ConversationPreview({
   const bottomRef = useRef<HTMLDivElement>(null)
   loadMessagesRef.current = loadMessages
 
+  const simulator = useMemo(
+    () =>
+      isConversationSimulatorClient(client)
+        ? client
+        : toConversationSimulatorClient({ client, ...(uploadMedia ? { uploadMedia } : {}) }),
+    [client, uploadMedia],
+  )
+
   const refresh = useCallback(async (): Promise<void> => {
     try {
       const loaded = await loadMessagesRef.current(conversationId)
@@ -207,7 +227,7 @@ export function ConversationPreview({
   async function handleSend(text: string): Promise<void> {
     setFailure(undefined)
     try {
-      await client.sendText(text)
+      await simulator.sendText(text)
       setPendingLocal((current) => [
         ...current,
         {
@@ -235,12 +255,12 @@ export function ConversationPreview({
 
   async function handleInteractiveSelect(selection: InteractiveSelection): Promise<void> {
     setFailure(undefined)
-    const reply = { id: selection.option.id, title: selection.option.title }
     try {
-      // Botão e lista são payloads diferentes para a Meta (`button_reply` × `list_reply`), e o
-      // roteador do fluxo lê campos distintos: tratar os dois como um só faria o menu responder no
-      // simulador e falhar no aparelho do cliente.
-      await (selection.kind === 'button' ? client.sendButtonReply(reply) : client.sendListReply(reply))
+      // A seleção viaja inteira (botão × lista) porque a forma de fio é do canal: a Meta separa
+      // `button_reply` de `list_reply` e o roteador do fluxo lê campos distintos, enquanto o chat do
+      // site manda o rótulo como texto. Decidir isso aqui faria o menu responder no simulador e
+      // falhar no aparelho do cliente.
+      await simulator.sendReply(selection)
       await refreshWithFollowUps()
     } catch (error) {
       setFailure(error instanceof Error ? error.message : 'Falha ao entregar a resposta no webhook.')
@@ -248,23 +268,25 @@ export function ConversationPreview({
   }
 
   /**
-   * O cliente do preview sabe subir mídia sozinho; a prop é só para quem quer outro destino.
+   * O transporte do canal diz se aceita mídia do cliente; a tela só pergunta.
    *
    * Antes isto era `uploadMedia` puro, e o microfone só aparecia no produto que lembrasse de montar
-   * o upload — de onde veio a divergência entre dois simuladores da mesma casa.
+   * o upload — de onde veio a divergência entre dois simuladores da mesma casa. Agora quem responde
+   * é o adaptador: no WhatsApp ele precisa de um destino de upload, no chat do site manda os bytes.
    */
-  const uploadFile = uploadMedia ?? client.uploadMedia
+  const sendMedia = simulator.sendMedia
+  const canAttachFile = SIMULATOR_FILE_MEDIA_KINDS.some((kind) => acceptsMediaKind(simulator, kind))
+  const canRecordAudio = acceptsMediaKind(simulator, 'audio')
 
   async function handleAttach(file: File): Promise<void> {
-    if (!uploadFile) return
+    if (!sendMedia) return
     setFailure(undefined)
     try {
-      const uploaded = await uploadFile(file)
-      await client.sendMedia({
-        mediaType: mediaTypeOf(uploaded.mimeType ?? file.type),
-        mediaId: uploaded.mediaId,
-        mimeType: uploaded.mimeType ?? file.type,
-        filename: uploaded.filename ?? file.name,
+      await sendMedia({
+        mediaKind: mediaKindOf(file.type),
+        file,
+        mimeType: file.type,
+        filename: file.name,
       })
       await refreshWithFollowUps()
     } catch (error) {
@@ -312,7 +334,7 @@ export function ConversationPreview({
 
       <MessageComposer
         onSend={(text) => void handleSend(text)}
-        onAttach={uploadFile ? (file) => void handleAttach(file) : undefined}
+        onAttach={canAttachFile ? (file) => void handleAttach(file) : undefined}
         /* Gravando, o campo diz o que falta fazer: o botão é um interruptor e o segundo toque é
            que envia — sem esse aviso o operador grava, não vê nada acontecer e conclui que o
            microfone está quebrado. */
@@ -320,7 +342,7 @@ export function ConversationPreview({
           isRecording ? 'Gravando… toque no quadrado para ouvir' : (placeholder ?? 'Escreva como o cliente…')
         }
         idleAction={
-          uploadFile ? (
+          canRecordAudio ? (
             <AudioRecorderButton
               onRecorded={(file) => void handleAttach(file)}
               onFailure={(message) => setFailure(message)}