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

package/dist/preview/index.d.ts

@@ -1,7 +1,8 @@
-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 { 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 +113,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 +183,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 +214,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 +252,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 +284,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 = {
@@ -269,6 +354,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 +467,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, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewMediaUploaderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, 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),
@@ -1041,6 +1042,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 +1103,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 +1139,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 +1182,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 } : {}
   };
 }
 
@@ -1218,6 +1295,7 @@ export {
   AudioRecorderButton,
   ConversationPreview,
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MEDIA_UPLOAD_PATH,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,
   MEDIA_TYPES_CONVERSATION_ID,
@@ -1225,9 +1303,11 @@ export {
   PREVIEW_CONVERSATIONS,
   PREVIEW_DOCUMENTS,
   PREVIEW_FILE_SAMPLES,
+  PREVIEW_MEDIA_ID_PREFIX,
   PREVIEW_MESSAGES,
   PreviewBridgeRejectedError,
   PreviewInProductionError,
+  PreviewMediaUploadRejectedError,
   PreviewWebhookRejectedError,
   assertPreviewEnvironment,
   conversationChannel,
@@ -1235,7 +1315,9 @@ export {
   createMockEventSource,
   createMockSSEProvider,
   createPreviewBridgeClient,
+  createPreviewMediaPoster,
   createPreviewMediaResolver,
+  createPreviewMediaUploader,
   createPreviewStore,
   createPreviewWebhookClient,
   mediaTypeOf,

package/dist/styles.css

@@ -207,3 +207,33 @@
     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;
+}

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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.20",
+  "version": "0.1.0-rc.21",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.8"
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.9"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/AudioTranscription.test.tsx

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { AudioTranscription } from './AudioTranscription'
+import type { MessageTranscription } from './types'
+
+function render(props: {
+  transcription?: MessageTranscription | null
+  onTranscribe?: () => Promise<void>
+}): string {
+  return renderToStaticMarkup(<AudioTranscription {...props} />)
+}
+
+const noop = async () => undefined
+
+describe('AudioTranscription', () => {
+  it('mostra o texto e oferece copiar', () => {
+    const markup = render({ transcription: { status: 'done', text: 'quero dois pães na chapa' } })
+
+    expect(markup).toContain('quero dois pães na chapa')
+    expect(markup).toContain('Copiar')
+  })
+
+  it('deixa o texto selecionável — é o caminho de quem não tem clipboard disponível', () => {
+    const markup = render({ transcription: { status: 'done', text: 'oi' } })
+
+    expect(markup).toContain('select-all')
+  })
+
+  it('não oferece copiar quando não há texto para copiar', () => {
+    const markup = render({ transcription: { status: 'done', text: '' } })
+
+    expect(markup).not.toContain('Copiar')
+  })
+
+  // Silêncio processado é diferente de não transcrito: sem essa distinção o operador clica em
+  // transcrever de novo atrás de um texto que não existe.
+  it('diz "sem fala detectada" em áudio processado e vazio, sem oferecer transcrever', () => {
+    const markup = render({ transcription: { status: 'done', text: '   ' } })
+
+    expect(markup).toContain('Sem fala detectada')
+    expect(markup).not.toContain('Transcrever áudio')
+  })
+
+  it('oferece transcrever quando nada foi avaliado ainda', () => {
+    const markup = render({ transcription: null, onTranscribe: noop })
+
+    expect(markup).toContain('Transcrever áudio')
+  })
+
+  // Mesmo padrão de takeover/release: sem a porta, a afordância não existe — melhor que um botão
+  // que estoura no clique.
+  it('não desenha nada quando não há transcrição nem forma de pedir uma', () => {
+    expect(render({ transcription: null })).toBe('')
+    expect(render({})).toBe('')
+  })
+
+  it('mostra falha com convite a tentar de novo', () => {
+    const markup = render({ transcription: { status: 'failed' }, onTranscribe: noop })
+
+    expect(markup).toContain('Falha ao transcrever')
+  })
+
+  it('trata pendente como em andamento — já foi tentado e vai sair', () => {
+    const markup = render({ transcription: { status: 'pending' }, onTranscribe: noop })
+
+    expect(markup).toContain('Transcrevendo...')
+  })
+
+  it('avisa formato não suportado sem oferecer retry — retentar não conserta codec', () => {
+    const markup = render({ transcription: { status: 'unsupported' }, onTranscribe: noop })
+
+    expect(markup).toContain('não suportado')
+    expect(markup).not.toContain('Transcrever novamente')
+  })
+
+  /**
+   * Medido: 1147 caracteres produziram uma bolha de 854px, mais alta que a área visível da conversa.
+   * Sem o recolhimento, uma nota de voz longa esconde as mensagens seguintes.
+   */
+  it('recolhe transcrição longa e oferece ver o texto completo', () => {
+    const markup = render({ transcription: { status: 'done', text: 'palavra '.repeat(60).trim() } })
+
+    expect(markup).toContain('ver transcrição completa')
+    expect(markup).toContain('-webkit-line-clamp')
+  })
+
+  it('não recolhe transcrição curta', () => {
+    const markup = render({ transcription: { status: 'done', text: 'quero dois pães' } })
+
+    expect(markup).not.toContain('ver transcrição completa')
+    expect(markup).not.toContain('-webkit-line-clamp')
+  })
+
+  // Recolher é sobre altura na tela; o operador cola o pedido inteiro no sistema interno.
+  it('mantém o texto inteiro no DOM mesmo recolhido, para o copiar levar tudo', () => {
+    const markup = render({ transcription: { status: 'done', text: 'primeira ' + 'meio '.repeat(70) + 'ultima' } })
+
+    expect(markup).toContain('primeira')
+    expect(markup).toContain('ultima')
+  })
+
+  it('oferece retranscrever quando já há texto e o host sabe transcrever', () => {
+    const markup = render({ transcription: { status: 'done', text: 'ruim' }, onTranscribe: noop })
+
+    expect(markup).toContain('Transcrever novamente')
+  })
+
+  it('não oferece retranscrever quando o host não sabe transcrever', () => {
+    const markup = render({ transcription: { status: 'done', text: 'ok' } })
+
+    expect(markup).toContain('ok')
+    expect(markup).not.toContain('Transcrever novamente')
+  })
+})