@adatechnology/conversations-ui 0.1.0-rc.20 → 0.1.0-rc.22

package/dist/preview/index.d.ts

@@ -1,7 +1,9 @@
-import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, K as ResolveMediaUrl } from '../types-O7kMP1Yn.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-O7kMP1Yn.js';
+import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, N as ResolveMediaUrl } from '../types-C6A_9edv.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-C6A_9edv.js';
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';
+export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';
 
 /**
  * Estado em memória que alimenta o preview de atendimento humano. Mock de API e mock de SSE
@@ -112,6 +114,52 @@ declare const PREVIEW_CONVERSATIONS: readonly ConversationSummary[];
 declare const PREVIEW_MESSAGES: Readonly<Record<string, readonly MessagePayload[]>>;
 declare const PREVIEW_DOCUMENTS: Readonly<Record<string, readonly ConversationDocument[]>>;
 
+/**
+ * Entrega ao simulador o `uploadMedia` que ele precisa para desenhar o microfone.
+ *
+ * O `ConversationPreview` esconde o gravador sem esta função, e com razão: microfone que grava sem
+ * ter onde guardar o arquivo faz o operador falar para o vazio. O que faltava era montar isto —
+ * lê o `File`, manda para a rota do host, devolve o `mediaId` prefixado que o webhook referencia.
+ *
+ * Fica no pacote porque a parte que erra é sempre a mesma em todo produto: converter o binário sem
+ * estourar a pilha e marcar o id com o prefixo que o backend reconhece. O que muda por produto é só
+ * a rota e o cliente HTTP — e é exatamente isso que entra por parâmetro.
+ */
+/**
+ * Do `contracts`, que este pacote já consome — não uma cópia.
+ *
+ * A convenção tem duas pontas (o front gera o id, o backend resolve) e a versão anterior disso vivia
+ * duplicada em dois pacotes de um produto, cada cópia com um comentário pedindo para não divergir.
+ * Contrato compartilhado é o que o `contracts` existe para guardar.
+ */
+
+type PreviewUploadedMedia$1 = {
+    readonly mediaId: string;
+    readonly mimeType?: string;
+    readonly filename?: string;
+};
+type PreviewMediaUploadRequest = {
+    readonly base64: string;
+    readonly mimeType: string;
+    readonly filename: string;
+};
+type CreatePreviewMediaUploaderParams = {
+    /**
+     * Envia o arquivo à rota do host e devolve o `uploadId` (sem prefixo) que o backend gerou.
+     *
+     * Recebe a função inteira, e não uma URL, porque autenticação varia: uma instalação assina com
+     * HMAC, outra manda token de admin, outra usa cookie de sessão. Pedir a URL obrigaria o pacote a
+     * escolher por elas.
+     */
+    readonly upload: (request: PreviewMediaUploadRequest) => Promise<{
+        uploadId: string;
+    }>;
+    /** Nome usado quando o gravador entrega o áudio sem nome próprio. */
+    readonly fallbackFilename?: string;
+    readonly fallbackMimeType?: string;
+};
+declare function createPreviewMediaUploader(params: CreatePreviewMediaUploaderParams): (file: File) => Promise<PreviewUploadedMedia$1>;
+
 /**
  * Cliente que entrega mensagens do preview no webhook real, assinadas com HMAC — a mesma validação
  * de staging e produção, sem rota alternativa e sem bypass. Do ponto de vista da API, este cliente
@@ -136,6 +184,19 @@ type PreviewWebhookClient = {
     sendListReply(reply: InteractiveReplyOption): Promise<void>;
     sendAudio(mediaId: string): Promise<void>;
     sendMedia(params: SendPreviewMediaParams): Promise<void>;
+    /**
+     * Guarda um arquivo gravado e devolve o `mediaId` já prefixado, pronto para `sendMedia`.
+     *
+     * Existe no cliente, e não como prop de quem monta a tela, porque isto é exatamente o que ele já
+     * sabe fazer: falar com ESTE host usando ESTE segredo. Enquanto era responsabilidade do produto,
+     * o resultado prático foi um produto com microfone no simulador e outro sem — não por decisão,
+     * por esquecimento. Cliente montado, microfone na tela.
+     *
+     * Opcional porque o cliente-ponte só consegue oferecer isto quando sabe a rota de mídia (ou quando
+     * o host injeta a função): sem destino, gravar áudio seria falar para o vazio, e aí a tela
+     * corretamente não desenha o gravador.
+     */
+    uploadMedia?(file: File): Promise<PreviewUploadedMedia$1>;
 };
 type SendPreviewMediaParams = {
     readonly mediaType: InboundMediaType;
@@ -154,8 +215,20 @@ type CreatePreviewWebhookClientParams = {
     readonly appSecret: string;
     readonly from: string;
     readonly phoneNumberId?: string;
+    /**
+     * Rota que guarda o áudio gravado. Por padrão, `/v1/preview/media` na mesma origem do webhook.
+     *
+     * O padrão cobre o caso normal — as duas rotas são do mesmo servidor — e a prop existe para quem
+     * publica a API em outro host ou versiona o caminho.
+     */
+    readonly mediaUploadUrl?: string;
     readonly fetchImplementation?: typeof fetch;
 };
+/** Falha da rota de upload, separada da do webhook: os dois lados quebram por motivos diferentes. */
+declare class PreviewMediaUploadRejectedError extends Error {
+    readonly status: number;
+    constructor(status: number);
+}
 declare class PreviewInProductionError extends Error {
     constructor();
 }
@@ -180,6 +253,18 @@ declare function signPreviewPayload(params: {
     rawBody: string;
     appSecret: string;
 }): Promise<string>;
+declare const DEFAULT_MEDIA_UPLOAD_PATH = "/v1/preview/media";
+/**
+ * O POST de mídia, sem a parte de assinatura — para os dois clientes usarem o mesmo caminho.
+ *
+ * O cliente-ponte autentica por sessão e o de webhook por HMAC; o que não muda é a rota, o formato
+ * do corpo e a leitura do `uploadId`. Duas cópias disso é como o prefixo de mídia divergiu antes.
+ */
+declare function createPreviewMediaPoster(params: {
+    readonly url: string;
+    readonly headers?: (mimeType: string) => Promise<Readonly<Record<string, string>>>;
+    readonly fetchImplementation?: typeof fetch;
+}): (file: File) => Promise<PreviewUploadedMedia$1>;
 declare function createPreviewWebhookClient(params: CreatePreviewWebhookClientParams): PreviewWebhookClient;
 
 type ConversationPreviewProps = {
@@ -200,6 +285,7 @@ type ConversationPreviewProps = {
      * 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 áudio gravado. Sem isto, usa o do próprio `client`. */
     uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>;
 };
 type PreviewUploadedMedia = {
@@ -211,6 +297,27 @@ type PreviewUploadedMedia = {
 declare function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'];
 declare function ConversationPreview({ client, sse, conversationId, loadMessages, placeholder, pollIntervalMs, uploadMedia, }: ConversationPreviewProps): react.JSX.Element;
 
+type ConversationSimulatorPanelLabels = {
+    readonly title: string;
+    /** Complementa o telefone no subtítulo, explicando para onde a mensagem realmente vai. */
+    readonly destinationHint: string;
+    readonly close: string;
+    readonly placeholder: string;
+};
+declare const DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS: ConversationSimulatorPanelLabels;
+type ConversationSimulatorPanelProps = Omit<ConversationPreviewProps, 'placeholder'> & {
+    readonly onClose: () => void;
+    /**
+     * Telefone já formatado para leitura. É o host que formata: máscara de telefone é convenção
+     * regional, e o pacote não tem como saber a do produto.
+     */
+    readonly displayNumber?: string;
+    readonly labels?: Partial<ConversationSimulatorPanelLabels>;
+    /** Ações extras no cabeçalho — roteiro automático, limpar conversa, trocar de contato. */
+    readonly headerActions?: ReactNode;
+};
+declare function ConversationSimulatorPanel({ onClose, displayNumber, labels, headerActions, ...previewProps }: ConversationSimulatorPanelProps): react.JSX.Element;
+
 /**
  * Cliente do preview que NÃO carrega segredo: em vez de montar e assinar o payload da Meta no
  * navegador, manda um comando semântico (`{ kind: 'text', text }`) para uma rota do próprio host,
@@ -269,6 +376,18 @@ type CreatePreviewBridgeClientParams = {
     readonly endpointUrl?: string;
     readonly headers?: Readonly<Record<string, string>>;
     readonly fetchImplementation?: typeof fetch;
+    /**
+     * Rota que guarda o áudio gravado. Por padrão, `/v1/preview/media` na origem do `endpointUrl`.
+     *
+     * Aqui não há assinatura a calcular: a ponte existe justamente para não ter segredo no navegador,
+     * e a rota é protegida pela sessão do painel — os mesmos `headers` do comando valem para o upload.
+     */
+    readonly mediaUploadUrl?: string;
+    /**
+     * Substitui o upload embutido. Necessário para host que só passa `sendCommand`: sem `endpointUrl`
+     * não há origem a derivar, e sem destino o gravador não é desenhado.
+     */
+    readonly uploadMedia?: (file: File) => Promise<PreviewUploadedMedia$1>;
 };
 declare function createPreviewBridgeClient(params: CreatePreviewBridgeClientParams): PreviewWebhookClient;
 
@@ -370,4 +489,4 @@ type MediaTypesPreviewProps = {
 };
 declare function MediaTypesPreview({ conversationId, className, }: MediaTypesPreviewProps): react.JSX.Element;
 
-export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, PreviewBridgeRejectedError, type PreviewEmission, PreviewInProductionError, type PreviewInboundCommand, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewInboundCommand, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewBridgeClient, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };
+export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, ConversationSimulatorPanel, type ConversationSimulatorPanelLabels, type ConversationSimulatorPanelProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewMediaUploaderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, DEFAULT_MEDIA_UPLOAD_PATH, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, PreviewBridgeRejectedError, type PreviewEmission, PreviewInProductionError, type PreviewInboundCommand, PreviewMediaUploadRejectedError, type PreviewMediaUploadRequest, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewInboundCommand, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewBridgeClient, createPreviewMediaPoster, createPreviewMediaResolver, createPreviewMediaUploader, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-OIDAIVCH.js";
+} from "../chunk-TV4OQRGH.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -980,11 +980,12 @@ function ConversationPreview({
       setFailure(error instanceof Error ? error.message : "Falha ao entregar a resposta no webhook.");
     }
   }
+  const uploadFile = uploadMedia ?? client.uploadMedia;
   async function handleAttach(file) {
-    if (!uploadMedia) return;
+    if (!uploadFile) return;
     setFailure(void 0);
     try {
-      const uploaded = await uploadMedia(file);
+      const uploaded = await uploadFile(file);
       await client.sendMedia({
         mediaType: mediaTypeOf(uploaded.mimeType ?? file.type),
         mediaId: uploaded.mediaId,
@@ -1018,9 +1019,9 @@ function ConversationPreview({
       MessageComposer,
       {
         onSend: (text) => void handleSend(text),
-        onAttach: uploadMedia ? (file) => void handleAttach(file) : void 0,
+        onAttach: uploadFile ? (file) => void handleAttach(file) : void 0,
         placeholder: isRecording ? "Gravando\u2026 toque no quadrado para ouvir" : placeholder ?? "Escreva como o cliente\u2026",
-        idleAction: uploadMedia ? /* @__PURE__ */ jsx(
+        idleAction: uploadFile ? /* @__PURE__ */ jsx(
           AudioRecorderButton,
           {
             onRecorded: (file) => void handleAttach(file),
@@ -1033,6 +1034,38 @@ function ConversationPreview({
   ] });
 }
 
+// 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, title: 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,
@@ -1041,6 +1074,38 @@ import {
   buildInboundTextPayload,
   serializeWebhookPayload
 } from "@adatechnology/meta-whatsapp-contracts/testing";
+
+// src/preview/createPreviewMediaUploader.ts
+import { PREVIEW_MEDIA_ID_PREFIX } from "@adatechnology/meta-whatsapp-contracts";
+import { toPreviewMediaId } from "@adatechnology/meta-whatsapp-contracts";
+var CHUNK_SIZE = 8192;
+async function fileToBase64(file) {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  let binary = "";
+  for (let offset = 0; offset < bytes.length; offset += CHUNK_SIZE) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + CHUNK_SIZE));
+  }
+  return btoa(binary);
+}
+function createPreviewMediaUploader(params) {
+  const fallbackMimeType = params.fallbackMimeType ?? "audio/ogg";
+  const fallbackFilename = params.fallbackFilename ?? "audio.ogg";
+  return async function uploadPreviewMedia(file) {
+    const mimeType = file.type || fallbackMimeType;
+    const filename = file.name || fallbackFilename;
+    const { uploadId } = await params.upload({ base64: await fileToBase64(file), mimeType, filename });
+    return { mediaId: toPreviewMediaId(uploadId), mimeType, filename };
+  };
+}
+
+// src/preview/createPreviewWebhookClient.ts
+var PreviewMediaUploadRejectedError = class extends Error {
+  constructor(status) {
+    super(`A rota de m\xEDdia do simulador recusou o upload (HTTP ${status}).`);
+    this.status = status;
+    this.name = "PreviewMediaUploadRejectedError";
+  }
+};
 var PreviewInProductionError = class extends Error {
   constructor() {
     super("O preview de conversa carrega um app secret e n\xE3o pode ser montado em produ\xE7\xE3o.");
@@ -1070,6 +1135,30 @@ async function signPreviewPayload(params) {
   return `sha256=${[...new Uint8Array(signature)].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
 }
 var signWithWebCrypto = signPreviewPayload;
+var DEFAULT_MEDIA_UPLOAD_PATH = "/v1/preview/media";
+function defaultMediaUploadUrl(webhookUrl) {
+  try {
+    return new URL(DEFAULT_MEDIA_UPLOAD_PATH, webhookUrl).toString();
+  } catch {
+    return DEFAULT_MEDIA_UPLOAD_PATH;
+  }
+}
+function createPreviewMediaPoster(params) {
+  return createPreviewMediaUploader({
+    upload: async (request) => {
+      const performRequest = params.fetchImplementation ?? fetch;
+      const extraHeaders = await params.headers?.(request.mimeType) ?? {};
+      const response = await performRequest(params.url, {
+        method: "POST",
+        headers: { "content-type": "application/json", ...extraHeaders },
+        body: JSON.stringify(request)
+      });
+      if (!response.ok) throw new PreviewMediaUploadRejectedError(response.status);
+      const body = await response.json();
+      return { uploadId: body.data.uploadId };
+    }
+  });
+}
 function createPreviewWebhookClient(params) {
   const sendPayload = async (payload) => {
     const rawBody = serializeWebhookPayload(payload);
@@ -1082,13 +1171,21 @@ function createPreviewWebhookClient(params) {
     });
     if (!response.ok) throw new PreviewWebhookRejectedError(response.status);
   };
+  const uploadMedia = createPreviewMediaPoster({
+    url: params.mediaUploadUrl ?? defaultMediaUploadUrl(params.webhookUrl),
+    headers: async (mimeType) => ({
+      "x-preview-signature": await signWithWebCrypto({ rawBody: mimeType, appSecret: params.appSecret })
+    }),
+    ...params.fetchImplementation ? { fetchImplementation: params.fetchImplementation } : {}
+  });
   const envelope = { from: params.from, phoneNumberId: params.phoneNumberId };
   return {
     sendText: (text) => sendPayload(buildInboundTextPayload({ ...envelope, text })),
     sendButtonReply: (reply) => sendPayload(buildInboundInteractivePayload({ ...envelope, buttonReply: reply })),
     sendListReply: (reply) => sendPayload(buildInboundInteractivePayload({ ...envelope, listReply: reply })),
     sendAudio: (mediaId) => sendPayload(buildInboundAudioPayload({ ...envelope, mediaId })),
-    sendMedia: (media) => sendPayload(buildInboundMediaPayload({ ...envelope, ...media }))
+    sendMedia: (media) => sendPayload(buildInboundMediaPayload({ ...envelope, ...media })),
+    uploadMedia
   };
 }
 
@@ -1117,15 +1214,27 @@ function buildFetchSender(params) {
     if (!response.ok) throw new PreviewBridgeRejectedError(response.status);
   };
 }
+function resolveBridgeUpload(params) {
+  if (params.uploadMedia) return params.uploadMedia;
+  const url = params.mediaUploadUrl ?? (params.endpointUrl ? defaultMediaUploadUrl(params.endpointUrl) : void 0);
+  if (!url) return void 0;
+  return createPreviewMediaPoster({
+    url,
+    ...params.headers ? { headers: async () => params.headers ?? {} } : {},
+    ...params.fetchImplementation ? { fetchImplementation: params.fetchImplementation } : {}
+  });
+}
 function createPreviewBridgeClient(params) {
   const send = params.sendCommand ?? buildFetchSender(params);
   const from = params.from;
+  const uploadMedia = resolveBridgeUpload(params);
   return {
     sendText: (text) => send({ kind: "text", from, text }),
     sendButtonReply: (reply) => send({ kind: "buttonReply", from, reply }),
     sendListReply: (reply) => send({ kind: "listReply", from, reply }),
     sendAudio: (mediaId) => send({ kind: "audio", from, mediaId }),
-    sendMedia: (media) => send({ kind: "media", from, ...media })
+    sendMedia: (media) => send({ kind: "media", from, ...media }),
+    ...uploadMedia ? { uploadMedia } : {}
   };
 }
 
@@ -1167,7 +1276,7 @@ function startPreviewScript(params) {
 
 // src/preview/MediaTypesPreview.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
 function MediaTypesPreview({
   conversationId = MEDIA_TYPES_CONVERSATION_ID,
@@ -1182,26 +1291,26 @@ function MediaTypesPreview({
   const messages = PREVIEW_MESSAGES[conversationId] ?? [];
   const documents = PREVIEW_DOCUMENTS[conversationId] ?? [];
   const mimeTypes = [...new Set(documents.map((document) => document.mimeType))];
-  return /* @__PURE__ */ jsx2(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs2("div", { className, children: [
-    /* @__PURE__ */ jsxs2("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
-      /* @__PURE__ */ jsxs2("p", { className: "text-sm text-gray-500", children: [
+  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: [
         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__ */ jsxs2("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs2("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
-        /* @__PURE__ */ jsx2(DocumentsLibrary, { perPage: documents.length || 20 })
+    /* @__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__ */ jsxs2("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
-        /* @__PURE__ */ jsx2(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
-        /* @__PURE__ */ jsx2(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx2(
+      /* @__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(
           MessageBubble,
           {
             message,
@@ -1217,7 +1326,10 @@ function MediaTypesPreview({
 export {
   AudioRecorderButton,
   ConversationPreview,
+  ConversationSimulatorPanel,
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  DEFAULT_MEDIA_UPLOAD_PATH,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,
   MEDIA_TYPES_CONVERSATION_ID,
@@ -1225,9 +1337,11 @@ export {
   PREVIEW_CONVERSATIONS,
   PREVIEW_DOCUMENTS,
   PREVIEW_FILE_SAMPLES,
+  PREVIEW_MEDIA_ID_PREFIX,
   PREVIEW_MESSAGES,
   PreviewBridgeRejectedError,
   PreviewInProductionError,
+  PreviewMediaUploadRejectedError,
   PreviewWebhookRejectedError,
   assertPreviewEnvironment,
   conversationChannel,
@@ -1235,7 +1349,9 @@ export {
   createMockEventSource,
   createMockSSEProvider,
   createPreviewBridgeClient,
+  createPreviewMediaPoster,
   createPreviewMediaResolver,
+  createPreviewMediaUploader,
   createPreviewStore,
   createPreviewWebhookClient,
   mediaTypeOf,

package/dist/styles.css

@@ -207,3 +207,115 @@
     max-width: calc(100vw - 1.5rem);
   }
 }
+.cv-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.cv-scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+.cv-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+.dark .cv-scrollbar-thin {
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+}
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+:where(button:not(:disabled), [role=button]:not(:disabled), summary) {
+  cursor: pointer;
+}
+.cv-simulator-panel {
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  flex-shrink: 0;
+  border-left: 1px solid rgb(229 231 235);
+  background: #fff;
+}
+.cv-simulator-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.cv-simulator-panel__heading {
+  min-width: 0;
+}
+.cv-simulator-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(17 24 39);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__subtitle {
+  font-size: 0.75rem;
+  color: rgb(156 163 175);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-simulator-panel__close {
+  display: inline-flex;
+  padding: 0.375rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: rgb(156 163 175);
+  transition: color 150ms, background-color 150ms;
+}
+.cv-simulator-panel__close:hover {
+  color: rgb(55 65 81);
+  background: rgb(243 244 246);
+}
+.cv-simulator-panel__body {
+  flex: 1;
+  min-height: 0;
+}
+.dark .cv-simulator-panel {
+  border-left-color: rgb(31 41 55);
+  background: rgb(17 24 39);
+}
+.dark .cv-simulator-panel__header {
+  border-bottom-color: rgb(31 41 55);
+}
+.dark .cv-simulator-panel__title {
+  color: rgb(243 244 246);
+}
+.dark .cv-simulator-panel__subtitle {
+  color: rgb(107 114 128);
+}
+.dark .cv-simulator-panel__close:hover {
+  color: rgb(229 231 235);
+  background: rgb(31 41 55);
+}
+@media (max-width: 1023px) {
+  .cv-simulator-panel {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    z-index: 40;
+    border-left: 0;
+  }
+}

package/dist/{types-O7kMP1Yn.d.ts → types-C6A_9edv.d.ts}

@@ -90,19 +90,49 @@ interface MessagePayload {
         isOffensive: boolean;
         terms: string[];
     } | null;
+    /**
+     * Transcrição do áudio, vinda do backend — a UI só exibe, nunca transcreve. Rodar STT no browser
+     * exigiria baixar modelo por aba e daria resultado diferente por versão de cliente.
+     *
+     * `null`/ausente = não avaliado, que é diferente de `'done'` com texto vazio (áudio em silêncio,
+     * já processado). É essa distinção que decide se o balão oferece "transcrever" ou "sem fala
+     * detectada".
+     */
+    transcription?: MessageTranscription | null;
     isFirstInGroup?: boolean;
     isLastInGroup?: boolean;
 }
+type TranscriptionStatus = 'pending' | 'done' | 'failed' | 'unsupported';
+/**
+ * Quando transcrever, escolhido nas configurações da empresa. Espelha o
+ * `TranscriptionMode` de `@adatechnology/meta-whatsapp-contracts`; declarado aqui para o pacote de
+ * UI não obrigar quem só desenha telas a instalar os contratos do backend.
+ */
+type TranscriptionMode = 'auto' | 'onDemand';
+interface MessageTranscription {
+    status: TranscriptionStatus;
+    text?: string | null;
+    /** ISO 639-1 ou nome do idioma, conforme o engine. Exibido como dica, não interpretado. */
+    language?: string | null;
+    engine?: string | null;
+}
 
 type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
 interface MediaRendererProps {
     message: MessagePayload;
     onLightbox: (src: string) => void;
     onResolveUrl?: ResolveMediaUrl;
+    /**
+     * Pede ao backend a transcrição do áudio desta mensagem. Ausente, o bloco de transcrição só exibe
+     * o que já veio pronto — sem oferecer um botão que o host não sabe atender.
+     *
+     * O que devolver é exibido na hora, sem esperar refetch da lista.
+     */
+    onTranscribeAudio?: () => Promise<MessageTranscription | void>;
     /** Aplicado no wrapper de cada tipo de mídia — imagem, vídeo, áudio e documento. */
     className?: string;
 }
-declare function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps): react.JSX.Element | null;
+declare function MediaRenderer({ message, onLightbox, onResolveUrl, onTranscribeAudio, className, }: MediaRendererProps): react.JSX.Element | null;
 
 /**
  * Gravação de áudio no simulador, pelo microfone do próprio navegador.
@@ -358,6 +388,16 @@ interface ConversationsApi {
         transcript: string;
         filename: string;
     }>;
+    /**
+     * Transcreve o áudio de uma mensagem e devolve o resultado.
+     *
+     * **Opcional por capacidade.** Um host em modo automático transcreve na ingestão e não expõe rota
+     * nenhuma; um host sem engine configurado não transcreve de jeito algum. Nos dois casos o balão
+     * simplesmente não desenha o botão, em vez de oferecer uma ação que estoura no clique.
+     *
+     * `messageId` e não `conversationId`: transcrição é por áudio, e uma conversa tem vários.
+     */
+    transcribeAudio?(messageId: string): Promise<MessageTranscription>;
 }
 /**
  * Superfície mínima de stream que o pacote consome — exatamente o que `useConversationRealtime`
@@ -413,4 +453,4 @@ interface ConversationDocument {
     linkedAt: string;
 }
 
-export { AudioRecorderButton as A, type ListDocumentsParams as B, CHANNEL_CAPABILITIES as C, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS as D, type MediaRendererProps as E, type FormatContactHandleParams as F, type MessagePayload as G, HANDLE_KIND as H, type InteractiveOption as I, type ReopenMechanism as J, type ResolveMediaUrl as K, type ListConversationsParams as L, MediaRenderer as M, capabilitiesOf as N, channelFiltersFor as O, contactFlag as P, formatContactHandle as Q, REOPEN_MECHANISM as R, type SSEProvider as S, type AudioRecorderButtonLabels as a, type AudioRecorderButtonProps as b, CHANNEL_FILTER_ALL as c, CONVERSATION_CHANNEL as d, type ChannelCapabilities as e, type ChannelFilter as f, type ChannelFilterOption as g, type CompanyDocument as h, type CompanyDocumentPage as i, type ConversationChannel as j, type ConversationDocument as k, type ConversationDocumentPage as l, type ConversationEventSource as m, type ConversationPage as n, type ConversationSummary as o, type ConversationTemplate as p, type ConversationsApi as q, type ConversationsFeatures as r, type ConversationsTheme as s, type ConversationsUIConfig as t, DEFAULT_CONVERSATION_CHANNEL as u, DEFAULT_MAX_RECORDING_MILLISECONDS as v, type HandleKind as w, type InteractivePayload as x, type InteractiveSection as y, type InteractiveSelection as z };
+export { AudioRecorderButton as A, type ListDocumentsParams as B, CHANNEL_CAPABILITIES as C, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS as D, type MediaRendererProps as E, type FormatContactHandleParams as F, type MessagePayload as G, HANDLE_KIND as H, type InteractiveOption as I, type MessageTranscription as J, type ReopenMechanism as K, type ListConversationsParams as L, MediaRenderer as M, type ResolveMediaUrl as N, type TranscriptionStatus as O, capabilitiesOf as P, channelFiltersFor as Q, REOPEN_MECHANISM as R, type SSEProvider as S, type TranscriptionMode as T, contactFlag as U, formatContactHandle as V, type AudioRecorderButtonLabels as a, type AudioRecorderButtonProps as b, CHANNEL_FILTER_ALL as c, CONVERSATION_CHANNEL as d, type ChannelCapabilities as e, type ChannelFilter as f, type ChannelFilterOption as g, type CompanyDocument as h, type CompanyDocumentPage as i, type ConversationChannel as j, type ConversationDocument as k, type ConversationDocumentPage as l, type ConversationEventSource as m, type ConversationPage as n, type ConversationSummary as o, type ConversationTemplate as p, type ConversationsApi as q, type ConversationsFeatures as r, type ConversationsTheme as s, type ConversationsUIConfig as t, DEFAULT_CONVERSATION_CHANNEL as u, DEFAULT_MAX_RECORDING_MILLISECONDS as v, type HandleKind as w, type InteractivePayload as x, type InteractiveSection as y, type InteractiveSelection as z };