@adatechnology/conversations-ui 0.1.0-rc.5 → 0.1.0-rc.6

package/dist/preview/index.d.ts

@@ -1,4 +1,4 @@
-import { M as MessagePayload, k as ConversationSummary, i as ConversationEventSource, m as ConversationsApi, L as ListConversationsParams, j as ConversationPage, S as SSEProvider, g as ConversationDocument } from '../types-C2Yexi8A.js';
+import { v as MessagePayload, m as ConversationSummary, k as ConversationEventSource, o as ConversationsApi, L as ListConversationsParams, l as ConversationPage, S as SSEProvider, i as ConversationDocument, x as ResolveMediaUrl } from '../types-CeixG2Z9.js';
 import * as react from 'react';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 
@@ -109,11 +109,6 @@ declare function createMockSSEProvider(params: CreateMockSSEProviderParams): SSE
 
 declare const PREVIEW_CONVERSATIONS: readonly ConversationSummary[];
 declare const PREVIEW_MESSAGES: Readonly<Record<string, readonly MessagePayload[]>>;
-/**
- * A biblioteca de arquivos da conversa, como o backend a devolveria. Deriva das mensagens de
- * documento acima em vez de repetir os dados: fixture duplicada divergiria na primeira edição, e o
- * painel passaria a mostrar arquivo que a thread não tem.
- */
 declare const PREVIEW_DOCUMENTS: Readonly<Record<string, readonly ConversationDocument[]>>;
 
 /**
@@ -183,4 +178,84 @@ type StartPreviewScriptParams = {
 };
 declare function startPreviewScript(params: StartPreviewScriptParams): () => void;
 
-export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_MESSAGES, type PreviewEmission, PreviewInProductionError, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewWebhookClient, PreviewWebhookRejectedError, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewStore, createPreviewWebhookClient, startPreviewScript };
+/**
+ * Bytes de verdade para o preview abrir.
+ *
+ * O mock antes devolvia a MESMA imagem PNG para qualquer documento, então clicar em "visualizar" num
+ * PDF entregava um PNG rotulado `application/pdf` e o leitor dizia que o arquivo era inválido. Cada
+ * amostra aqui é um arquivo mínimo porém legítimo do seu tipo: as de mídia foram geradas com ffmpeg
+ * e conferidas com ffprobe, o PDF tem xref/startxref/%%EOF, e os pacotes Office são zips com as
+ * partes obrigatórias (`[Content_Types].xml`, `_rels/.rels`, o documento).
+ *
+ * Não há amostra de `audio/amr`, `video/3gp` nem dos formatos binários legados do Office
+ * (`application/msword`, `application/vnd.ms-excel`, `application/vnd.ms-powerpoint`): não há
+ * encoder para eles nesta máquina e forjar OLE2 à mão daria arquivo corrompido — exatamente o que
+ * este módulo existe para evitar. Esses caem no texto explicativo de `resolvePreviewFileSample`,
+ * que abre sem erro e diz o que é.
+ *
+ * GERADO — não editar à mão.
+ */
+declare const PREVIEW_FILE_SAMPLES: Readonly<Record<string, string>>;
+/**
+ * A data URL que o preview abre para um documento.
+ *
+ * Ordem: tipo exato → família (`audio/amr` toca como mp3, `video/3gp` como mp4) → nota em texto.
+ * A nota fecha o caso dos tipos sem amostra: abre num leitor de texto e explica, em vez de baixar
+ * um binário quebrado com extensão de Word.
+ */
+declare function resolvePreviewFileSample(mimeType: string | undefined, filename?: string): string;
+
+/**
+ * Como o preview entrega mídia para a UI abrir.
+ *
+ * Separado de `previewFileSamples` (que é gerado) porque aqui está a parte que depende do navegador:
+ * **blob URL, não data URL**. O Chrome bloqueia navegação de topo para `data:` desde a v60, então
+ * `window.open(dataUrl)` — que é o que os botões "visualizar" e "baixar" fazem — abre aba em branco
+ * mesmo com bytes perfeitamente válidos. Em `src` de `<img>`/`<video>` a data URL funcionaria; no
+ * `window.open` não, e o mesmo `getDocumentUrl` alimenta os dois.
+ */
+
+/** URL que o preview pode abrir em aba nova. Cai na data URL fora do navegador (teste, SSR). */
+declare function previewFileUrl(mimeType: string | undefined, filename?: string): string;
+/**
+ * A mesma amostra em base64 cru, como o proxy de mídia do backend a devolveria.
+ *
+ * Existe porque `getMediaProxyUrl` é o caminho da mídia AINDA NÃO ingerida (só existe o id na Meta),
+ * e o contrato pede `{ mimeType, data }` — não URL. Sem isto o mock devolvia o PNG 1x1 para
+ * qualquer id, e vídeo e áudio da thread apareciam quebrados apesar de haver amostra válida.
+ */
+declare function previewFileBase64(mimeType: string | undefined, filename?: string): {
+    mimeType: string;
+    data: string;
+};
+/**
+ * O `onResolveMediaUrl` que o `MessageBubble` espera.
+ *
+ * Sem ele, foto, vídeo e áudio da thread ficam parados no placeholder para sempre — o
+ * `MediaRenderer` só resolve `uploadId`/`mediaId` por esta porta, de propósito, para o pacote nunca
+ * chamar endpoint fixo. O preview não tinha resolvedor nenhum, então nenhuma mídia carregava.
+ */
+declare function createPreviewMediaResolver(): ResolveMediaUrl;
+
+/**
+ * Bancada de teste manual de mídia — montável em uma linha por qualquer projeto que adote o SDK.
+ *
+ * Existe porque o defeito que ela pega não é pegável por teste automatizado: "o PDF abre?" depende
+ * do leitor do navegador, "o vídeo toca?" do decodificador, e "a aba abre?" da política do Chrome
+ * sobre `data:` URL. Teste unitário confere bytes; só o olho confere que o arquivo abre. Sem uma
+ * superfície pronta no pacote, cada projeto teria de montar a sua — e, na prática, nenhum montava.
+ *
+ * Traz o próprio store, o próprio mock e o próprio provider: o host não injeta nada. E não passa
+ * `onResolveMediaUrl` em lugar nenhum de propósito — é o `MessageBubble` resolvendo mídia pelo
+ * `ConversationsApi` do contexto, então se essa resolução automática quebrar, esta tela mostra.
+ */
+/** A conversa do fixture que carrega uma mensagem de cada tipo aceito. */
+declare const MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
+type MediaTypesPreviewProps = {
+    /** Outra conversa do fixture, se o projeto tiver acrescentado a sua. */
+    conversationId?: string;
+    className?: string;
+};
+declare function MediaTypesPreview({ conversationId, className, }: MediaTypesPreviewProps): react.JSX.Element;
+
+export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, 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, type PreviewEmission, PreviewInProductionError, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewWebhookClient, PreviewWebhookRejectedError, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, previewFileBase64, previewFileUrl, resolvePreviewFileSample, startPreviewScript };

package/dist/preview/index.js

@@ -1,9 +1,12 @@
 import {
+  ConversationDocumentsPanel,
   ConversationWallpaper,
+  ConversationsProvider,
   DateDivider,
+  DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-YWITIIHD.js";
+} from "../chunk-LITPZCWW.js";
 import "../chunk-OGRRHQQW.js";
 
 // src/preview/previewStore.ts
@@ -399,8 +402,7 @@ var PREVIEW_MESSAGES = {
       timestamp: at("15:09:00")
     },
     {
-      // Extensão fora do EXTENSION_STYLE: garante que o ícone genérico cinza também apareça.
-      id: "fixture-doc-generic",
+      id: "fixture-doc-txt",
       type: "document",
       uploadId: "preview/documentos/lista-compras.txt",
       filename: "lista-compras.txt",
@@ -409,13 +411,140 @@ var PREVIEW_MESSAGES = {
       direction: "inbound",
       sender: "customer",
       timestamp: at("15:10:00")
+    },
+    {
+      id: "fixture-doc-csv",
+      type: "document",
+      uploadId: "preview/documentos/planilha-do-pedido.csv",
+      filename: "planilha-do-pedido.csv",
+      mimeType: "text/csv",
+      sizeBytes: 2048,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:11:00")
+    },
+    {
+      id: "fixture-doc-pptx",
+      type: "document",
+      uploadId: "preview/documentos/apresentacao.pptx",
+      filename: "apresentacao.pptx",
+      mimeType: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      sizeBytes: 512e3,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:12:00")
+    },
+    {
+      id: "fixture-doc-ppt",
+      type: "document",
+      uploadId: "preview/documentos/antiga.ppt",
+      filename: "antiga.ppt",
+      mimeType: "application/vnd.ms-powerpoint",
+      sizeBytes: 348160,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:13:00")
+    },
+    // Mídia enviada COMO arquivo: aí a Meta manda o nome, então é onde a extensão de música e de
+    // vídeo aparece na lista. Mandada como `image`/`audio`/`video` (acima e abaixo) ela chega sem
+    // nome nenhum, e o rótulo vira o id da mídia — como em produção.
+    {
+      id: "fixture-doc-mp3",
+      type: "document",
+      uploadId: "preview/documentos/musica-do-anuncio.mp3",
+      filename: "musica-do-anuncio.mp3",
+      mimeType: "audio/mpeg",
+      sizeBytes: 3145728,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:14:00")
+    },
+    {
+      id: "fixture-doc-m4a",
+      type: "document",
+      uploadId: "preview/documentos/recado.m4a",
+      filename: "recado.m4a",
+      mimeType: "audio/mp4",
+      sizeBytes: 486400,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:15:00")
+    },
+    {
+      id: "fixture-doc-mp4-file",
+      type: "document",
+      uploadId: "preview/documentos/video-do-produto.mp4",
+      filename: "video-do-produto.mp4",
+      mimeType: "video/mp4",
+      sizeBytes: 8388608,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:16:00")
+    },
+    {
+      id: "fixture-doc-jpg",
+      type: "document",
+      uploadId: "preview/documentos/foto-do-recibo.jpg",
+      filename: "foto-do-recibo.jpg",
+      mimeType: "image/jpeg",
+      sizeBytes: 262144,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:17:00")
+    },
+    // As espécies restantes que a Meta aceita, sem nome de arquivo — fecham a lista de tipos
+    // aceitos e exercitam o fallback de ícone pela família do mimeType.
+    {
+      id: "fixture-media-jpeg",
+      type: "image",
+      mediaId: "preview-image-jpeg",
+      mimeType: "image/jpeg",
+      sizeBytes: 138240,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:18:00")
+    },
+    {
+      id: "fixture-media-3gp",
+      type: "video",
+      mediaId: "preview-video-3gp",
+      mimeType: "video/3gp",
+      sizeBytes: 921600,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:19:00")
+    },
+    {
+      id: "fixture-media-aac",
+      type: "audio",
+      mediaId: "preview-audio-aac",
+      mimeType: "audio/aac",
+      sizeBytes: 76800,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:20:00")
+    },
+    {
+      id: "fixture-media-amr",
+      type: "audio",
+      mediaId: "preview-audio-amr",
+      mimeType: "audio/amr",
+      sizeBytes: 24576,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:21:00")
     }
   ]
 };
+var LIBRARY_MEDIA_TYPES = /* @__PURE__ */ new Set(["document", "image", "video", "audio", "sticker"]);
 var PREVIEW_DOCUMENTS = {
-  "5511944443333": (PREVIEW_MESSAGES["5511944443333"] ?? []).filter((message) => message.type === "document").map((message) => ({
-    id: message.uploadId ?? message.id,
-    filename: message.filename ?? message.id,
+  "5511944443333": (PREVIEW_MESSAGES["5511944443333"] ?? []).filter((message) => LIBRARY_MEDIA_TYPES.has(message.type)).map((message) => ({
+    // Mídia não tem `uploadId` na mensagem: o backend deriva a key do id da mídia na Meta, e o
+    // caminho abaixo imita esse formato para o download assinado receber algo do mesmo feitio.
+    id: message.uploadId ?? (message.mediaId ? `preview/inbound/${message.mediaId}` : message.id),
+    // Só documento chega nomeado. Para os outros o backend salva o id da mídia como rótulo —
+    // manter isso aqui é o que faz o ícone por família do mimeType ser exercitado de verdade.
+    filename: message.filename ?? message.mediaId ?? message.id,
     mimeType: message.mimeType ?? "application/octet-stream",
     sizeBytes: message.sizeBytes ?? 0,
     source: message.sender,
@@ -423,8 +552,85 @@ var PREVIEW_DOCUMENTS = {
   }))
 };
 
+// src/preview/previewFileSamples.ts
+var PREVIEW_FILE_SAMPLES = {
+  "application/pdf": "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgMjYwIDExMF0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggNjI+PnN0cmVhbQpCVCAvRjEgMTMgVGYgMTggNTUgVGQgKERvY3VtZW50byBkZSBleGVtcGxvIGRvIHByZXZpZXcpIFRqIEVUCmVuZHN0cmVhbWVuZG9iago1IDAgb2JqPDwvVHlwZS9Gb250L1N1YnR5cGUvVHlwZTEvQmFzZUZvbnQvSGVsdmV0aWNhPj5lbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTIgMDAwMDAgbiAKMDAwMDAwMDEwMSAwMDAwMCBuIAowMDAwMDAwMjExIDAwMDAwIG4gCjAwMDAwMDAzMTcgMDAwMDAgbiAKdHJhaWxlcjw8L1NpemUgNi9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjM3OAolJUVPRgo=",
+  "image/png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAACXBIWXMAAAABAAAAAQBPJcTWAAAATElEQVR4nO3OMRHAIAAAMbhDWo2hCYPdu/xIh0RB5rPP+JN1O/AlVISKUBEqQkWoCBWhIlSEilARKkJFqAgVoSJUhIpQESpCRagIlRcgDwI25HmPQAAAAABJRU5ErkJggg==",
+  "image/jpeg": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzYyLjExLjEwMAD/2wBDAAgEBAQEBAUFBQUFBQYGBgYGBgYGBgYGBgYHBwcICAgHBwcGBgcHCAgICAkJCQgICAgJCQoKCgwMCwsODg4RERT/xABMAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAAAAYQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/wAARCAAwADADASIAAhEAAxEA/9oADAMBAAIRAxEAPwCUBRpwAAAAAAAAAAAAAAAB/9k=",
+  "image/webp": "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
+  "video/mp4": "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAANdbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAASwAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAoh0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAASwAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAEAAAABAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAEsAAAIAAABAAAAAAIAbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAoAAAAEABVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAABq21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAWtzdGJsAAAAv3N0c2QAAAAAAAAAAQAAAK9hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAQABIAAAASAAAAAAAAAABFUxhdmM2Mi4xMS4xMDAgbGlieDI2NAAAAAAAAAAAAAAAGP//AAAANWF2Y0MBZAAK/+EAGGdkAAqs2UQmwEQAAAMABAAAAwBQPEiWWAEABmjr48siwP34+AAAAAAQcGFzcAAAAAEAAAABAAAAFGJ0cnQAAAAAAABO2gAAAAAAAAAYc3R0cwAAAAAAAAABAAAAAwAABAAAAAAUc3RzcwAAAAAAAAABAAAAAQAAAChjdHRzAAAAAAAAAAMAAAABAAAIAAAAAAEAAAwAAAAAAQAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAMAAAABAAAAIHN0c3oAAAAAAAAAAAAAAAMAAALbAAAADgAAAAwAAAAUc3RjbwAAAAAAAAABAAADjQAAAGF1ZHRhAAAAWW1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALGlsc3QAAAAkqXRvbwAAABxkYXRhAAAAAQAAAABMYXZmNjIuMy4xMDAAAAAIZnJlZQAAAv1tZGF0AAACrgYF//+q3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE2NSByMzIyMiBiMzU2MDVhIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAyNSAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTIgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEwIHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcmM9Y3JmIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcHN0ZXA9NCBpcF9yYXRpbz0xLjQwIGFxPTE6MS4wMACAAAAAJWWIhAA///7mdfgUoKykhh+DdK6xVynnAWznTQ4fVSgMZ1FwY28AAAAKQZoibEN//qePiAAAAAgBnkF5Df8HfQ==",
+  "audio/mpeg": "data:audio/mpeg;base64,SUQzBAAAAAAAIlRTU0UAAAAOAAADTGF2ZjYyLjMuMTAwAAAAAAAAAAAAAAD/40jAAAAAAAAAAAAASW5mbwAAAA8AAAAFAAAGwABVVVVVVVVVVVVVVVVVVVVVVVVVgICAgICAgICAgICAgICAgICAgICqqqqqqqqqqqqqqqqqqqqqqqqqqtXV1dXV1dXV1dXV1dXV1dXV1dXV//////////////////////////8AAAAATGF2YzYyLjExAAAAAAAAAAAAAAAAJALAAAAAAAAABsDR4nNFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/40jEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/40jEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/40jEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/40jEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/40jEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=",
+  "audio/ogg": "data:audio/ogg;base64,T2dnUwACAAAAAAAAAABXDTmmAAAAAKMnDKEBE09wdXNIZWFkAQE4AYC7AAAAAABPZ2dTAAAAAAAAAAAAAFcNOaYBAAAAZlPuKwE9T3B1c1RhZ3MMAAAATGF2ZjYyLjMuMTAwAQAAAB0AAABlbmNvZGVyPUxhdmM2Mi4xMS4xMDAgbGlib3B1c09nZ1MABLgmAAAAAAAAVw05pgIAAAA3uL6lCw8REhISEhISEhISeAvkwTbsxY2MSUaZpCaweAfJcifhROpV8fDA1d3pUmB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOB4B8l5yMlXwKISI/rvZ/NkwOA=",
+  "audio/mp4": "data:audio/mp4;base64,AAAAHGZ0eXBNNEEgAAACAE00QSBpc29taXNvMgAAAAhmcmVlAAAAQW1kYXTeAgBMYXZjNjIuMTEuMTAwAAIwQA4BGCAHARggBwEYIAcBGCAHARggBwEYIAcBGCAHARggBwEYIAcAAAMibW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAAMgAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAk10cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAMgAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAADIAAAEAAABAAAAAAHFbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAACsRAAAJnRVxAAAAAAALWhkbHIAAAAAAAAAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAABcG1pbmYAAAAQc21oZAAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABNHN0YmwAAABqc3RzZAAAAAAAAAABAAAAWm1wNGEAAAAAAAAAAQAAAAAAAAAAAAEAEAAAAACsRAAAAAAANmVzZHMAAAAAA4CAgCUAAQAEgICAF0AVAAAAAAB9AAAAB/oFgICABRIIVuUABoCAgAECAAAAIHN0dHMAAAAAAAAAAgAAAAkAAAQAAAAAAQAAAnQAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAoAAAABAAAAPHN0c3oAAAAAAAAAAAAAAAoAAAAVAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAFHN0Y28AAAAAAAAAAQAAACwAAAAac2dwZAEAAAByb2xsAAAAAgAAAAH//wAAABxzYmdwAAAAAHJvbGwAAAABAAAACgAAAAEAAABhdWR0YQAAAFltZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAACxpbHN0AAAAJKl0b28AAAAcZGF0YQAAAAEAAAAATGF2ZjYyLjMuMTAw",
+  "audio/aac": "data:audio/aac;base64,//FQQAOf/N4CAExhdmM2Mi4xMS4xMDAAAjBADv/xUEABf/wBGCAH//FQQAF//AEYIAf/8VBAAX/8ARggB//xUEABf/wBGCAH//FQQAF//AEYIAf/8VBAAX/8ARggB//xUEABf/wBGCAH//FQQAF//AEYIAf/8VBAAX/8ARggBw==",
+  "text/plain": "data:text/plain;base64,TGlzdGEgZGUgY29tcHJhcwotIGFycm96IDJrZwotIG9sZW8gMXVuCg==",
+  "text/csv": "data:text/csv;base64,cHJvZHV0byxxdWFudGlkYWRlLHByZWNvCmFycm96LDIsMjQuOTAKb2xlbywxLDcuNTAK",
+  "application/zip": "data:application/zip;base64,UEsDBBQAAAAIANFO/FwtmGOxGwAAABkAAAARAAAAY29tcHJvdmFudGUtMS50eHRLzs8tKMovS8wrSVVISVUoSExPzE3NK8nnAgBQSwMEFAAAAAgA0U78XCftV8YWAAAAFAAAABEAAABjb21wcm92YW50ZS0yLnR4dCtOTS/NS8lXSM7PLSjKL0vMK0nlAgBQSwECFAMUAAAACADRTvxcLZhjsRsAAAAZAAAAEQAAAAAAAAAAAAAAgAEAAAAAY29tcHJvdmFudGUtMS50eHRQSwECFAMUAAAACADRTvxcJ+1XxhYAAAAUAAAAEQAAAAAAAAAAAAAAgAFKAAAAY29tcHJvdmFudGUtMi50eHRQSwUGAAAAAAIAAgB+AAAAjwAAAAAA",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQAAAAIANFO/Fx5bjPX6AAAAK0BAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbH1QyU7DMBD9FWuuKHHggBCK0wPLETiUDxjZk8SqN3nc0v49Tlt6QIXjzFv1+tXeO7GjzDYGBbdtB4KCjsaGScHn+rV5AMEFg0EXAyk4EMNq6NeHRCyqNrCCuZT0KCXrmTxyGxOFiowxeyz1zJNMqDc4kbzrunupYygUSlMWDxj6Zxpx64p42df3qUcmxyCeTsQlSwGm5KzGUnG5C+ZXSnNOaKvyyOHZJr6pBJBXExbk74Cz7r0Ok60h8YG5vKGvLPkVs5Em6q2vyvZ/mys94zhaTRf94pZy1MRcF/euvSAebfjpL49zD99QSwMEFAAAAAgA0U78XJv9N+qtAAAAKQEAAAsAAABfcmVscy8ucmVsc43POw7CMAwG4KtE3mlaBoRQ0y4IqSsqB7ASN61oHkrCo7cnAwNFDIy2f3+W6/ZpZnanECdnBVRFCYysdGqyWsClP232wGJCq3B2lgQsFKFt6jPNmPJKHCcfWTZsFDCm5A+cRzmSwVg4TzZPBhcMplwGzT3KK2ri27Lc8fBpwNpknRIQOlUB6xdP/9huGCZJRydvhmz6ceIrkWUMmpKAhwuKq3e7yCzwpuarF5sXUEsDBBQAAAAIANFO/FyraIuoqgAAAOcAAAARAAAAd29yZC9kb2N1bWVudC54bWxFjksOwjAMBa8SZU9TWCBUNWWBxAngAKExbaTGjpzQz+1JyoLNPFt+Grm9rn4SM3B0hFoeq1oKwJ6sw0HL5+N+uEgRk0FrJkLQcoMor127NJb6jwdMIgswNouWY0qhUSr2I3gTKwqA+fYm9ibllQe1ENvA1EOM2e8ndarrs/LGoSzKF9mtZCjggtTdCBObRMKCgBV8mPJIIjDMDpZWlU4h7ww7fx71/7H7AlBLAQIUAxQAAAAIANFO/Fx5bjPX6AAAAK0BAAATAAAAAAAAAAAAAACAAQAAAABbQ29udGVudF9UeXBlc10ueG1sUEsBAhQDFAAAAAgA0U78XJv9N+qtAAAAKQEAAAsAAAAAAAAAAAAAAIABGQEAAF9yZWxzLy5yZWxzUEsBAhQDFAAAAAgA0U78XKtoi6iqAAAA5wAAABEAAAAAAAAAAAAAAIAB7wEAAHdvcmQvZG9jdW1lbnQueG1sUEsFBgAAAAADAAMAuQAAAMgCAAAAAA==",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,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"
+};
+var FAMILY_FALLBACK = {
+  image: "image/png",
+  video: "video/mp4",
+  audio: "audio/mpeg",
+  text: "text/plain"
+};
+function resolvePreviewFileSample(mimeType, filename) {
+  const normalized = (mimeType ?? "").split(";")[0].trim().toLowerCase();
+  const exact = PREVIEW_FILE_SAMPLES[normalized];
+  if (exact) return exact;
+  const family = FAMILY_FALLBACK[normalized.split("/")[0] ?? ""];
+  const byFamily = family ? PREVIEW_FILE_SAMPLES[family] : void 0;
+  if (byFamily) return byFamily;
+  const note = `Preview do SDK: nao existe amostra binaria valida para ${normalized || "tipo desconhecido"}${filename ? ` (${filename})` : ""}. Na tela real este arquivo vem do storage.`;
+  return `data:text/plain;charset=utf-8,${encodeURIComponent(note)}`;
+}
+
+// src/preview/previewMediaSource.ts
+var blobUrlCache = /* @__PURE__ */ new Map();
+function toBlob(dataUrl) {
+  const [head, payload] = dataUrl.split(",");
+  const mimeType = head.replace(/^data:/, "").replace(/;base64$/, "").replace(/;charset=.*$/, "");
+  if (!head.endsWith(";base64")) {
+    return new Blob([decodeURIComponent(payload)], { type: mimeType || "text/plain" });
+  }
+  const binary = atob(payload);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+  return new Blob([bytes], { type: mimeType });
+}
+function previewFileUrl(mimeType, filename) {
+  const dataUrl = resolvePreviewFileSample(mimeType, filename);
+  if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return dataUrl;
+  const cached = blobUrlCache.get(dataUrl);
+  if (cached) return cached;
+  const blobUrl = URL.createObjectURL(toBlob(dataUrl));
+  blobUrlCache.set(dataUrl, blobUrl);
+  return blobUrl;
+}
+function previewFileBase64(mimeType, filename) {
+  const dataUrl = resolvePreviewFileSample(mimeType, filename);
+  const [head, payload] = dataUrl.split(",");
+  const declared = head.replace(/^data:/, "").replace(/;base64$/, "").replace(/;charset=.*$/, "");
+  if (head.endsWith(";base64")) return { mimeType: declared, data: payload };
+  return { mimeType: declared, data: btoa(decodeURIComponent(payload)) };
+}
+function createPreviewMediaResolver() {
+  const byId = /* @__PURE__ */ new Map();
+  for (const documents of Object.values(PREVIEW_DOCUMENTS)) {
+    for (const document of documents) {
+      byId.set(document.id, { mimeType: document.mimeType, filename: document.filename });
+    }
+  }
+  return async (message) => {
+    const reference = message.uploadId ?? (message.mediaId ? `preview/inbound/${message.mediaId}` : void 0);
+    if (!reference) return null;
+    const known = byId.get(reference);
+    return previewFileUrl(known?.mimeType ?? message.mimeType, known?.filename ?? message.filename);
+  };
+}
+
 // src/preview/createMockConversationsApi.ts
-var PREVIEW_IMAGE_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYGD4DwABBAEAX+XyEgAAAABJRU5ErkJggg==";
 var DEFAULT_LATENCY_MS = 120;
 var PREVIEW_AGENT_ID = "preview-agent";
 var PREVIEW_TEMPLATES = [
@@ -542,11 +748,51 @@ function createMockConversationsApi(params) {
 ${names.join("\n")}`], { type: "application/zip" });
       });
     },
-    getDocumentUrl() {
-      return withLatency(() => `data:image/png;base64,${PREVIEW_IMAGE_BASE64}`);
+    /** Junta as bibliotecas de todas as conversas do fixture, com a origem de cada arquivo. */
+    getAllDocuments(documentParams) {
+      return withLatency(() => {
+        let all = Object.entries(PREVIEW_DOCUMENTS).flatMap(
+          ([conversationId, docs]) => docs.map((document) => ({ ...document, conversationId }))
+        );
+        const search = documentParams?.search?.trim().toLowerCase();
+        if (search) {
+          const digits = search.replace(/\D/g, "");
+          all = all.filter(
+            (document) => document.filename.toLowerCase().includes(search) || digits !== "" && document.conversationId.includes(digits)
+          );
+        }
+        const source = documentParams?.source;
+        if (source === "team") {
+          all = all.filter((document) => document.source === "agent" || document.source === "bot");
+        } else if (source) {
+          all = all.filter((document) => document.source === source);
+        }
+        all.sort(
+          (left, right) => documentParams?.sortDirection === "asc" ? left.linkedAt.localeCompare(right.linkedAt) : right.linkedAt.localeCompare(left.linkedAt)
+        );
+        const total = all.length;
+        const limit = documentParams?.limit ?? total;
+        const page = documentParams?.page ?? 1;
+        return { documents: all.slice((page - 1) * limit, page * limit), total };
+      });
+    },
+    // Devolve os bytes DO TIPO do documento, não uma imagem para tudo: antes, abrir um PDF entregava
+    // um PNG rotulado `application/pdf` e o leitor recusava o arquivo. O `uploadId` é a única pista
+    // que o contrato dá, então o tipo vem da própria biblioteca.
+    getDocumentUrl(uploadId) {
+      return withLatency(() => {
+        const found = Object.values(PREVIEW_DOCUMENTS).flat().find((document) => document.id === uploadId);
+        return previewFileUrl(found?.mimeType, found?.filename);
+      });
     },
-    getMediaProxyUrl() {
-      return withLatency(() => ({ mimeType: "image/png", data: PREVIEW_IMAGE_BASE64 }));
+    // Caminho da mídia ainda não ingerida: o backend busca na Meta e devolve base64. Resolve pelo
+    // id para a bolha receber os bytes DO TIPO dela — devolvendo um PNG para todo id, vídeo e áudio
+    // apareciam quebrados na thread mesmo havendo amostra válida do formato.
+    getMediaProxyUrl(mediaId) {
+      return withLatency(() => {
+        const found = Object.values(PREVIEW_DOCUMENTS).flat().find((document) => document.id === `preview/inbound/${mediaId}`);
+        return previewFileBase64(found?.mimeType, found?.filename);
+      });
     },
     takeover(conversationId) {
       return withLatency(
@@ -777,12 +1023,65 @@ function startPreviewScript(params) {
   }, intervalMs);
   return () => clearInterval(timer);
 }
+
+// src/preview/MediaTypesPreview.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
+function MediaTypesPreview({
+  conversationId = MEDIA_TYPES_CONVERSATION_ID,
+  className
+}) {
+  const store = useMemo2(
+    () => createPreviewStore({ conversations: PREVIEW_CONVERSATIONS, messages: PREVIEW_MESSAGES }),
+    []
+  );
+  const api = useMemo2(() => createMockConversationsApi({ store }), [store]);
+  const sse = useMemo2(() => createMockSSEProvider({ store }), [store]);
+  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: [
+        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__ */ 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(
+          MessageBubble,
+          {
+            message,
+            isMine: message.direction === "outbound",
+            isFirstInGroup: index === 0 || messages[index - 1]?.sender !== message.sender
+          },
+          message.id
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
 export {
   ConversationPreview,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,
+  MEDIA_TYPES_CONVERSATION_ID,
+  MediaTypesPreview,
   PREVIEW_CONVERSATIONS,
   PREVIEW_DOCUMENTS,
+  PREVIEW_FILE_SAMPLES,
   PREVIEW_MESSAGES,
   PreviewInProductionError,
   PreviewWebhookRejectedError,
@@ -791,7 +1090,11 @@ export {
   createMockConversationsApi,
   createMockEventSource,
   createMockSSEProvider,
+  createPreviewMediaResolver,
   createPreviewStore,
   createPreviewWebhookClient,
+  previewFileBase64,
+  previewFileUrl,
+  resolvePreviewFileSample,
   startPreviewScript
 };

package/dist/{types-C2Yexi8A.d.ts → types-CeixG2Z9.d.ts}

@@ -1,3 +1,5 @@
+import * as react from 'react';
+
 interface ConversationsUIConfig {
     apiBaseUrl: string;
     theme?: ConversationsTheme;
@@ -51,6 +53,16 @@ interface MessagePayload {
     isLastInGroup?: boolean;
 }
 
+type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
+interface MediaRendererProps {
+    message: MessagePayload;
+    onLightbox: (src: string) => void;
+    onResolveUrl?: ResolveMediaUrl;
+    /** 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;
+
 /**
  * Canal de origem da conversa e o que cada um permite.
  *
@@ -154,6 +166,14 @@ interface ListDocumentsParams {
     source?: string;
     sortDirection?: 'asc' | 'desc';
 }
+/** Arquivo na biblioteca da empresa: o mesmo da conversa, mais de qual conversa veio. */
+interface CompanyDocument extends ConversationDocument {
+    conversationId: string;
+}
+interface CompanyDocumentPage {
+    documents: CompanyDocument[];
+    total: number;
+}
 interface ConversationDocumentPage {
     documents: ConversationDocument[];
     total: number;
@@ -212,6 +232,13 @@ interface ConversationsApi {
      * lote em vez de oferecer um botão que falha.
      */
     downloadDocumentsArchive?(conversationId: string, uploadIds: readonly string[]): Promise<Blob>;
+    /**
+     * Biblioteca de TODAS as conversas, para uma tela de Documentos fora do atendimento.
+     *
+     * Opcional por capacidade: host que só expõe anexo dentro da conversa não implementa, e o
+     * componente de biblioteca simplesmente não é usável — melhor que uma tela que sempre erra.
+     */
+    getAllDocuments?(params?: ListDocumentsParams): Promise<CompanyDocumentPage>;
     getMediaProxyUrl(mediaId: string): Promise<{
         mimeType: string;
         data: string;
@@ -294,4 +321,4 @@ interface ConversationDocument {
     linkedAt: string;
 }
 
-export { CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type ListConversationsParams as L, type MessagePayload as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type ConversationChannel as f, type ConversationDocument as g, type ConversationDocumentPage as h, type ConversationEventSource as i, type ConversationPage as j, type ConversationSummary as k, type ConversationTemplate as l, type ConversationsApi as m, type ConversationsFeatures as n, type ConversationsTheme as o, type ConversationsUIConfig as p, type HandleKind as q, type ListDocumentsParams as r, type ReopenMechanism as s, capabilitiesOf as t, channelFiltersFor as u, contactFlag as v, formatContactHandle as w };
+export { contactFlag as A, formatContactHandle as B, CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type ListConversationsParams as L, MediaRenderer as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type CompanyDocument as f, type CompanyDocumentPage as g, type ConversationChannel as h, type ConversationDocument as i, type ConversationDocumentPage as j, type ConversationEventSource as k, type ConversationPage as l, type ConversationSummary as m, type ConversationTemplate as n, type ConversationsApi as o, type ConversationsFeatures as p, type ConversationsTheme as q, type ConversationsUIConfig as r, type HandleKind as s, type ListDocumentsParams as t, type MediaRendererProps as u, type MessagePayload as v, type ReopenMechanism as w, type ResolveMediaUrl as x, capabilitiesOf as y, channelFiltersFor as z };

package/package.json

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

package/src/Avatar.tsx

@@ -1,8 +1,18 @@
+export interface AvatarLabels {
+  /** Lido por leitor de tela quando não há nome nem imagem — a silhueta genérica. */
+  unnamedContact: string
+}
+
 export interface AvatarProps {
   name?: string | null
   avatarUrl?: string
   size?: 'sm' | 'md' | 'lg'
   className?: string
+  labels?: Partial<AvatarLabels>
+}
+
+export const DEFAULT_AVATAR_LABELS: AvatarLabels = {
+  unnamedContact: 'Contato sem nome',
 }
 
 const sizeClasses = {
@@ -36,8 +46,9 @@ function getBgColor(name: string | undefined | null): string {
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/Avatar.tsx —
 // mesmas iniciais (primeira+última letra), mesmo hash de cor, mesmas classes de tamanho.
-export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarProps) {
+export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }: AvatarProps) {
   const sizeClass = sizeClasses[size]
+  const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact
 
   if (avatarUrl) {
     return (
@@ -58,7 +69,7 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarP
       <div
         className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`}
         role="img"
-        aria-label="Contato sem nome"
+        aria-label={unnamedContactLabel}
       >
         <svg viewBox="0 0 24 24" fill="currentColor" className="h-[60%] w-[60%]" aria-hidden>
           <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />