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

package/dist/preview/index.js

@@ -1,9 +1,12 @@
 import {
+  ConversationDocumentsPanel,
   ConversationWallpaper,
+  ConversationsProvider,
   DateDivider,
+  DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-YWITIIHD.js";
+} from "../chunk-TGTBMMFC.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 };
+      });
     },
-    getMediaProxyUrl() {
-      return withLatency(() => ({ mimeType: "image/png", data: PREVIEW_IMAGE_BASE64 }));
+    // 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);
+      });
+    },
+    // 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(
@@ -599,9 +845,89 @@ function createMockSSEProvider(params) {
 }
 
 // src/preview/ConversationPreview.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/preview/AudioRecorderButton.tsx
+import { useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_AUDIO_RECORDER_BUTTON_LABELS = {
+  start: "Gravar \xE1udio",
+  stop: "Parar grava\xE7\xE3o",
+  unsupported: "Este navegador n\xE3o grava \xE1udio.",
+  denied: "Sem permiss\xE3o para usar o microfone."
+};
+var RECORDING_FORMATS = [
+  { mimeType: "audio/ogg;codecs=opus", uploadMimeType: "audio/ogg", extension: "ogg" },
+  { mimeType: "audio/mp4", uploadMimeType: "audio/mp4", extension: "m4a" },
+  { mimeType: "audio/webm", uploadMimeType: "audio/webm", extension: "webm" }
+];
+function resolveRecordingFormat() {
+  if (typeof MediaRecorder === "undefined") return void 0;
+  if (typeof MediaRecorder.isTypeSupported !== "function") return RECORDING_FORMATS[0];
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType));
+}
+function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }) {
+  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start;
+  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop;
+  const [isRecording, setIsRecording] = useState(false);
+  const recorderRef = useRef(null);
+  const stop = useCallback(() => {
+    recorderRef.current?.stop();
+  }, []);
+  const start = useCallback(async () => {
+    const format = resolveRecordingFormat();
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported);
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType });
+      const chunks = [];
+      recorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) chunks.push(event.data);
+      });
+      recorder.addEventListener("stop", () => {
+        stream.getTracks().forEach((track) => track.stop());
+        setIsRecording(false);
+        recorderRef.current = null;
+        const blob = new Blob(chunks, { type: format.uploadMimeType });
+        void onRecorded(
+          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType })
+        );
+      });
+      recorderRef.current = recorder;
+      recorder.start();
+      setIsRecording(true);
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
+    }
+  }, [labels?.denied, labels?.unsupported, onFailure, onRecorded]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: () => isRecording ? stop() : void start(),
+      title: isRecording ? stopLabel : startLabel,
+      "aria-label": isRecording ? stopLabel : startLabel,
+      "aria-pressed": isRecording,
+      className: `flex h-9 w-9 items-center justify-center rounded-full transition-colors ${isRecording ? "bg-red-100 text-red-600 dark:bg-red-900/40" : "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
+      children: isRecording ? "\u25A0" : "\u{1F3A4}"
+    }
+  );
+}
+
+// src/preview/ConversationPreview.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function mediaTypeOf(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  return "document";
+}
 var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
+var FOLLOW_UP_REFRESH_MS = [400, 1200, 3e3];
 function decorate(messages) {
   return messages.map((message, index) => {
     const previous = index > 0 ? messages[index - 1] : void 0;
@@ -614,23 +940,52 @@ function decorate(messages) {
     };
   });
 }
+function statusOf(error) {
+  if (typeof error !== "object" || error === null) return void 0;
+  const candidate = error;
+  const value = candidate.status ?? candidate.statusCode;
+  return typeof value === "number" ? value : void 0;
+}
+function isNotFound(error) {
+  return statusOf(error) === 404;
+}
+function describeLoadFailure(error) {
+  const status = statusOf(error);
+  if (status === 401 || status === 403) {
+    return "Sem sess\xE3o de administrador nesta aba: a mensagem \xE9 entregue no webhook, mas o transcript n\xE3o pode ser lido. Entre no painel nesta mesma aba e reabra o simulador.";
+  }
+  if (error instanceof Error && error.message) return `N\xE3o foi poss\xEDvel ler o transcript: ${error.message}`;
+  return "N\xE3o foi poss\xEDvel ler o transcript da conversa.";
+}
 function ConversationPreview({
   client,
   sse,
   conversationId,
   loadMessages,
-  placeholder
+  placeholder,
+  pollIntervalMs,
+  uploadMedia
 }) {
-  const [messages, setMessages] = useState([]);
-  const [failure, setFailure] = useState(void 0);
-  const loadMessagesRef = useRef(loadMessages);
-  const bottomRef = useRef(null);
+  const [messages, setMessages] = useState2([]);
+  const [failure, setFailure] = useState2(void 0);
+  const [loadFailure, setLoadFailure] = useState2(void 0);
+  const [pendingLocal, setPendingLocal] = useState2([]);
+  const loadMessagesRef = useRef2(loadMessages);
+  const bottomRef = useRef2(null);
   loadMessagesRef.current = loadMessages;
-  const refresh = useCallback(async () => {
+  const refresh = useCallback2(async () => {
     try {
-      setMessages(await loadMessagesRef.current(conversationId));
-    } catch {
-      setMessages([]);
+      const loaded = await loadMessagesRef.current(conversationId);
+      setMessages(loaded);
+      setLoadFailure(void 0);
+      if (loaded.length > 0) setPendingLocal([]);
+    } catch (error) {
+      if (isNotFound(error)) {
+        setMessages([]);
+        setLoadFailure(void 0);
+        return;
+      }
+      setLoadFailure(describeLoadFailure(error));
     }
   }, [conversationId]);
   useEffect(() => {
@@ -647,42 +1002,105 @@ function ConversationPreview({
       source.close();
     };
   }, [sse, conversationId, refresh]);
+  useEffect(() => {
+    if (!pollIntervalMs) return;
+    const timer = setInterval(() => void refresh(), pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [pollIntervalMs, refresh]);
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const rendered = useMemo(() => decorate(messages), [messages]);
+  const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal]);
+  async function refreshWithFollowUps() {
+    await refresh();
+    for (const atraso of FOLLOW_UP_REFRESH_MS) {
+      setTimeout(() => void refresh(), atraso);
+    }
+  }
   async function handleSend(text) {
     setFailure(void 0);
     try {
       await client.sendText(text);
-      await refresh();
+      setPendingLocal((current) => [
+        ...current,
+        {
+          id: `local-${current.length}-${text.length}`,
+          type: "text",
+          content: text,
+          // Do ponto de vista do servidor, mensagem do cliente é inbound — é assim que ela aparece
+          // como "minha" nesta visão.
+          direction: "inbound",
+          sender: "customer",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          status: "sent"
+        }
+      ]);
+      await refreshWithFollowUps();
     } catch (error) {
       setFailure(error instanceof Error ? error.message : "Falha ao entregar a mensagem no webhook.");
     }
   }
+  async function handleInteractiveSelect(selection) {
+    setFailure(void 0);
+    const reply = { id: selection.option.id, title: selection.option.title };
+    try {
+      await (selection.kind === "button" ? client.sendButtonReply(reply) : client.sendListReply(reply));
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a resposta no webhook.");
+    }
+  }
+  async function handleAttach(file) {
+    if (!uploadMedia) return;
+    setFailure(void 0);
+    try {
+      const uploaded = await uploadMedia(file);
+      await client.sendMedia({
+        mediaType: mediaTypeOf(uploaded.mimeType ?? file.type),
+        mediaId: uploaded.mediaId,
+        mimeType: uploaded.mimeType ?? file.type,
+        filename: uploaded.filename ?? file.name
+      });
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao enviar o arquivo.");
+    }
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
     /* @__PURE__ */ jsxs(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
       rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs("div", { children: [
-        showDateDivider ? /* @__PURE__ */ jsx(DateDivider, { iso: message.timestamp }) : null,
-        /* @__PURE__ */ jsx(
+        showDateDivider ? /* @__PURE__ */ jsx2(DateDivider, { iso: message.timestamp }) : null,
+        /* @__PURE__ */ jsx2(
           MessageBubble,
           {
             message,
             isMine: message.direction === "inbound",
-            isFirstInGroup
+            isFirstInGroup,
+            onInteractiveSelect: message.direction === "outbound" ? (selection) => void handleInteractiveSelect(selection) : void 0
           }
         )
       ] }, message.id)),
-      /* @__PURE__ */ jsx("div", { ref: bottomRef })
+      /* @__PURE__ */ jsx2("div", { ref: bottomRef })
     ] }),
-    failure ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
-    /* @__PURE__ */ jsx(
-      MessageComposer,
-      {
-        onSend: (text) => void handleSend(text),
-        placeholder: placeholder ?? "Escreva como o cliente\u2026"
-      }
-    )
+    failure ? /* @__PURE__ */ jsx2("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
+    loadFailure ? /* @__PURE__ */ jsx2("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
+      /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx2(
+        MessageComposer,
+        {
+          onSend: (text) => void handleSend(text),
+          onAttach: uploadMedia ? (file) => void handleAttach(file) : void 0,
+          placeholder: placeholder ?? "Escreva como o cliente\u2026"
+        }
+      ) }),
+      uploadMedia ? /* @__PURE__ */ jsx2(
+        AudioRecorderButton,
+        {
+          onRecorded: (file) => void handleAttach(file),
+          onFailure: (message) => setFailure(message)
+        }
+      ) : null
+    ] })
   ] });
 }
 
@@ -690,6 +1108,7 @@ function ConversationPreview({
 import {
   buildInboundAudioPayload,
   buildInboundInteractivePayload,
+  buildInboundMediaPayload,
   buildInboundTextPayload,
   serializeWebhookPayload
 } from "@adatechnology/meta-whatsapp-contracts/testing";
@@ -709,7 +1128,7 @@ var PreviewWebhookRejectedError = class extends Error {
 function assertPreviewEnvironment(isProduction) {
   if (isProduction) throw new PreviewInProductionError();
 }
-async function signWithWebCrypto(params) {
+async function signPreviewPayload(params) {
   const encoder = new TextEncoder();
   const key = await globalThis.crypto.subtle.importKey(
     "raw",
@@ -721,6 +1140,7 @@ async function signWithWebCrypto(params) {
   const signature = await globalThis.crypto.subtle.sign("HMAC", key, encoder.encode(params.rawBody));
   return `sha256=${[...new Uint8Array(signature)].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
 }
+var signWithWebCrypto = signPreviewPayload;
 function createPreviewWebhookClient(params) {
   const sendPayload = async (payload) => {
     const rawBody = serializeWebhookPayload(payload);
@@ -738,7 +1158,8 @@ function createPreviewWebhookClient(params) {
     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 }))
+    sendAudio: (mediaId) => sendPayload(buildInboundAudioPayload({ ...envelope, mediaId })),
+    sendMedia: (media) => sendPayload(buildInboundMediaPayload({ ...envelope, ...media }))
   };
 }
 
@@ -777,12 +1198,67 @@ function startPreviewScript(params) {
   }, intervalMs);
   return () => clearInterval(timer);
 }
+
+// src/preview/MediaTypesPreview.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx3, 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__ */ jsx3(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__ */ jsx3("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__ */ 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__ */ 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,
+            isMine: message.direction === "outbound",
+            isFirstInGroup: index === 0 || messages[index - 1]?.sender !== message.sender
+          },
+          message.id
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
 export {
+  AudioRecorderButton,
   ConversationPreview,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,
+  MEDIA_TYPES_CONVERSATION_ID,
+  MediaTypesPreview,
   PREVIEW_CONVERSATIONS,
   PREVIEW_DOCUMENTS,
+  PREVIEW_FILE_SAMPLES,
   PREVIEW_MESSAGES,
   PreviewInProductionError,
   PreviewWebhookRejectedError,
@@ -791,7 +1267,13 @@ export {
   createMockConversationsApi,
   createMockEventSource,
   createMockSSEProvider,
+  createPreviewMediaResolver,
   createPreviewStore,
   createPreviewWebhookClient,
+  mediaTypeOf,
+  previewFileBase64,
+  previewFileUrl,
+  resolvePreviewFileSample,
+  signPreviewPayload,
   startPreviewScript
 };