@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/dist/preview/index.js

@@ -1,10 +1,23 @@
 import {
+  AudioRecorderButton,
+  ConversationDocumentsPanel,
+  ConversationPreview,
+  ConversationSimulatorPanel,
   ConversationWallpaper,
-  DateDivider,
+  ConversationsProvider,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  DocumentsLibrary,
   MessageBubble,
-  MessageComposer
-} from "../chunk-4R6Y43DQ.js";
-import "../chunk-OGRRHQQW.js";
+  SIMULATOR_FILE_MEDIA_KINDS,
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  mediaKindOf,
+  mediaTypeOf,
+  simulatorPanelLabelsOf,
+  toConversationSimulatorClient
+} from "../chunk-BJNRLLDO.js";
+import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts
 var GLOBAL_CHANNEL = "global";
@@ -135,108 +148,6 @@ function createMockEventSource() {
   };
 }
 
-// src/preview/createMockConversationsApi.ts
-var PREVIEW_IMAGE_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYGD4DwABBAEAX+XyEgAAAABJRU5ErkJggg==";
-var DEFAULT_LATENCY_MS = 120;
-function createMockConversationsApi(params) {
-  const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS;
-  async function withLatency(produce) {
-    await new Promise((resolve) => setTimeout(resolve, latencyMs));
-    return produce();
-  }
-  return {
-    fetchConversations(fetchParams) {
-      return withLatency(() => {
-        const conversations = params.store.listConversations({
-          waitingHuman: fetchParams?.waitingHuman,
-          search: fetchParams?.search
-        });
-        const limit = fetchParams?.limit ?? conversations.length;
-        const page = fetchParams?.page ?? 1;
-        return conversations.slice((page - 1) * limit, page * limit);
-      });
-    },
-    fetchMessages(conversationId, fetchParams) {
-      return withLatency(() => {
-        const messages = params.store.listMessages(conversationId);
-        const limit = fetchParams?.limit;
-        return limit ? messages.slice(-limit) : messages;
-      });
-    },
-    sendMessage(conversationId, text) {
-      return withLatency(
-        () => params.store.appendMessage({ conversationId, content: text, direction: "outbound", sender: "agent" })
-      );
-    },
-    sendMedia(conversationId, data) {
-      return withLatency(
-        () => params.store.appendMessage({
-          conversationId,
-          content: data.caption ?? data.filename,
-          direction: "outbound",
-          sender: "agent"
-        })
-      );
-    },
-    sendTemplate(conversationId, data) {
-      return withLatency(() => {
-        params.store.appendMessage({
-          conversationId,
-          content: `[template] ${data.templateName}`,
-          direction: "outbound",
-          sender: "agent"
-        });
-      });
-    },
-    markRead(conversationId) {
-      return withLatency(() => params.store.markRead(conversationId));
-    },
-    getContext(conversationId) {
-      return withLatency(() => {
-        const conversation = params.store.listConversations().find((item) => item.id === conversationId);
-        return {
-          currentState: conversation?.currentState ?? "unknown",
-          mode: conversation?.mode ?? "bot",
-          preview: true
-        };
-      });
-    },
-    getDocuments() {
-      return withLatency(() => []);
-    },
-    getDocumentUrl() {
-      return withLatency(() => `data:image/png;base64,${PREVIEW_IMAGE_BASE64}`);
-    },
-    getMediaProxyUrl() {
-      return withLatency(() => ({ mimeType: "image/png", data: PREVIEW_IMAGE_BASE64 }));
-    }
-  };
-}
-
-// src/preview/createMockSSEProvider.ts
-function createMockSSEProvider(params) {
-  function connect(channel) {
-    const source = createMockEventSource();
-    const unsubscribe = params.store.subscribe(channel, (emission) => {
-      source.emit(emission.event, emission.payload);
-    });
-    const close = source.close.bind(source);
-    source.close = () => {
-      unsubscribe();
-      close();
-    };
-    return source;
-  }
-  return {
-    connectConversationStream(conversationId) {
-      return connect(conversationChannel(conversationId));
-    },
-    connectGlobalStream() {
-      return connect(GLOBAL_CHANNEL);
-    }
-  };
-}
-
 // src/preview/previewFixtures.ts
 var BASE_DAY = "2026-07-26";
 function at(time) {
@@ -297,6 +208,24 @@ var PREVIEW_CONVERSATIONS = [
     waitingHuman: false,
     unread: 1,
     currentState: "list_import"
+  },
+  {
+    // Cobre TODO tipo que o composer aceita (DEFAULT_ACCEPTED_FILE_TYPES: image/*, video/*,
+    // audio/*, .pdf, .doc, .docx, .xls, .xlsx, .zip) mais sticker. Existe para que cada ramo do
+    // MediaRenderer e cada ícone/cor do FileIcon apareçam em algum lugar — ramo sem fixture é ramo
+    // que ninguém olha até quebrar em produção.
+    id: "5511944443333",
+    whatsappNumber: "5511944443333",
+    clientName: "Rita Documentos",
+    lastContent: "segue a planilha do pedido",
+    lastDirection: "inbound",
+    lastAt: at("15:10:00"),
+    lastInboundAt: at("15:10:00"),
+    mode: "human",
+    assignedUserId: "agent-1",
+    waitingHuman: false,
+    unread: 3,
+    currentState: "human_handling"
   }
 ];
 var PREVIEW_MESSAGES = {
@@ -375,104 +304,596 @@ var PREVIEW_MESSAGES = {
       sender: "customer",
       timestamp: at("13:31:00")
     }
+  ],
+  // Um tipo por mensagem, na ordem em que o MediaRenderer os trata.
+  "5511944443333": [
+    {
+      id: "fixture-doc-image",
+      type: "image",
+      mediaId: "preview-image-1",
+      mimeType: "image/png",
+      caption: "foto da prateleira",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:00:00")
+    },
+    {
+      id: "fixture-doc-video",
+      type: "video",
+      mediaId: "preview-video-1",
+      mimeType: "video/mp4",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:01:00")
+    },
+    {
+      id: "fixture-doc-audio",
+      type: "audio",
+      mediaId: "preview-audio-2",
+      mimeType: "audio/ogg",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:02:00")
+    },
+    {
+      id: "fixture-doc-sticker",
+      type: "sticker",
+      mediaId: "preview-sticker-1",
+      mimeType: "image/webp",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:03:00")
+    },
+    // Os cinco ramos do FileIcon: pdf, doc, xls, zip e o genérico do fallback.
+    {
+      id: "fixture-doc-pdf",
+      type: "document",
+      uploadId: "preview/documentos/nota-fiscal.pdf",
+      filename: "nota-fiscal.pdf",
+      mimeType: "application/pdf",
+      sizeBytes: 184320,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:04:00")
+    },
+    {
+      id: "fixture-doc-docx",
+      type: "document",
+      uploadId: "preview/documentos/contrato.docx",
+      filename: "contrato.docx",
+      mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      sizeBytes: 42112,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:05:00")
+    },
+    {
+      id: "fixture-doc-doc",
+      type: "document",
+      uploadId: "preview/documentos/procuracao.doc",
+      filename: "procuracao.doc",
+      mimeType: "application/msword",
+      sizeBytes: 31744,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:06:00")
+    },
+    {
+      id: "fixture-doc-xlsx",
+      type: "document",
+      uploadId: "preview/documentos/pedido.xlsx",
+      filename: "pedido.xlsx",
+      mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      sizeBytes: 15872,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:07:00")
+    },
+    {
+      id: "fixture-doc-xls",
+      type: "document",
+      uploadId: "preview/documentos/tabela-antiga.xls",
+      filename: "tabela-antiga.xls",
+      mimeType: "application/vnd.ms-excel",
+      sizeBytes: 9216,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:08:00")
+    },
+    {
+      id: "fixture-doc-zip",
+      type: "document",
+      uploadId: "preview/documentos/comprovantes.zip",
+      filename: "comprovantes.zip",
+      mimeType: "application/zip",
+      sizeBytes: 2355200,
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("15:09:00")
+    },
+    {
+      id: "fixture-doc-txt",
+      type: "document",
+      uploadId: "preview/documentos/lista-compras.txt",
+      filename: "lista-compras.txt",
+      mimeType: "text/plain",
+      sizeBytes: 1024,
+      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) => 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,
+    linkedAt: message.timestamp
+  }))
+};
 
-// src/preview/ConversationPreview.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
-function decorate(messages) {
-  return messages.map((message, index) => {
-    const previous = index > 0 ? messages[index - 1] : void 0;
-    const currentTime = new Date(message.timestamp).getTime();
-    const previousTime = previous ? new Date(previous.timestamp).getTime() : 0;
-    return {
-      message,
-      isFirstInGroup: !previous || previous.sender !== message.sender || currentTime - previousTime > GROUPING_WINDOW_MS,
-      showDateDivider: !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
-    };
-  });
+// 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,UEsDBBQAAAAIANFO/FxuYbgN/gAAAC0CAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbK2RzU7DMBCEX8XytYqdckAIJe2BnyNwKA+w2JvEiv/kdUv69jhp4YAKXDit7JnZb2Q328lZdsBEJviWr0XNGXoVtPF9y193j9UNZ5TBa7DBY8uPSHy7aXbHiMRK1lPLh5zjrZSkBnRAIkT0RelCcpDLMfUyghqhR3lV19dSBZ/R5yrPO/imuccO9jazh6lcn3oktMTZ3ck4s1oOMVqjIBddHrz+RqnOBFGSi4cGE2lVDFxeJMzKz4Bz7rk8TDIa2Quk/ASuuORk5XtI41sIo/h9yYWWoeuMQh3U3pWIoJgQNA2I2VmxTOHA+NXf/MVMchnrfy7ytf+zh1y+e/MBUEsDBBQAAAAIANFO/FyY2uuLrgAAACcBAAALAAAAX3JlbHMvLnJlbHONz8EOgjAMBuBXWXqXgQdjDIOLMeFq8AHmVgYB1mWbCm/vjmI8eGz69/vTsl7miT3Rh4GsgCLLgaFVpAdrBNzay+4ILERptZzIooAVA9RVecVJxnQS+sEFlgwbBPQxuhPnQfU4y5CRQ5s2HflZxjR6w51UozTI93l+4P7TgK3JGi3AN7oA1q4O/7Gp6waFZ1KPGW38UfGVSLL0BqOAZeIv8uOdaMwSCrwq+ebB6g1QSwMEFAAAAAgA0U78XEkKfby5AAAAGwEAAA8AAAB4bC93b3JrYm9vay54bWyNj7sOwjAMRX8l8g4pDAhVbVkQEhsDfEBoXBrR2JUdXn9PeO1Mfuke31ut7nEwVxQNTDXMpgUYpJZ9oFMNh/1msgSjyZF3AxPW8ECFVVPdWM5H5rPJctIa+pTG0lpte4xOpzwi5UvHEl3Ko5ysjoLOa4+Y4mDnRbGw0QWCD6GUfxjcdaHFNbeXiJQ+EMHBpWxe+zAqNNX7g36rIRez6R364DkHee22PucEI2XIjWz9DGxT2Z/M/pI1T1BLAwQUAAAACADRTvxcWv2Ca7EAAAAoAQAAGgAAAHhsL19yZWxzL3dvcmtib29rLnhtbC5yZWxzjc/JCsJADAbgVxlyt2k9iEinXkToVeoDDNN0oZ2Fybj07R08iAUPnkLyky+kPD7NLO4UeHRWQpHlIMhq1462l3Btzps9CI7Ktmp2liQsxHCsygvNKqYVHkbPIhmWJQwx+gMi64GM4sx5sinpXDAqpjb06JWeVE+4zfMdhm8D1qaoWwmhbgsQzeLpH9t13ajp5PTNkI0/TuDDhYkHophQFXqKEj4jxncpsqQCViWuPqxeUEsDBBQAAAAIANFO/FwcNOTnuQAAAP8AAAAYAAAAeGwvd29ya3NoZWV0cy9zaGVldDEueG1sTY5RTsMwDIavEvmdudsDmlCSaQhxAdgBotasEY1T2VYHO/3SgRAvlv1Zn/37w1eZ3EKiuXKA7aYDR9zXIfM5wOn99WEPTi3xkKbKFOCbFA7RX6p86khkrvmsAUaz+QlR+5FK0k2didvmo0pJ1kY5o85CabhLZcJd1z1iSZkh+jt7SZail3px0nI02q/NcQvOAmSeMtObSeNZo7eYROrVo0WPK8D+V3he1SXuPC4/FNvJVv/9wL/w8QZQSwECFAMUAAAACADRTvxcbmG4Df4AAAAtAgAAEwAAAAAAAAAAAAAAgAEAAAAAW0NvbnRlbnRfVHlwZXNdLnhtbFBLAQIUAxQAAAAIANFO/FyY2uuLrgAAACcBAAALAAAAAAAAAAAAAACAAS8BAABfcmVscy8ucmVsc1BLAQIUAxQAAAAIANFO/FxJCn28uQAAABsBAAAPAAAAAAAAAAAAAACAAQYCAAB4bC93b3JrYm9vay54bWxQSwECFAMUAAAACADRTvxcWv2Ca7EAAAAoAQAAGgAAAAAAAAAAAAAAgAHsAgAAeGwvX3JlbHMvd29ya2Jvb2sueG1sLnJlbHNQSwECFAMUAAAACADRTvxcHDTk57kAAAD/AAAAGAAAAAAAAAAAAAAAgAHVAwAAeGwvd29ya3NoZWV0cy9zaGVldDEueG1sUEsFBgAAAAAFAAUARQEAAMQEAAAAAA=="
+};
+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)}`;
 }
-function ConversationPreview({
-  client,
-  sse,
-  conversationId,
-  loadMessages,
-  placeholder
-}) {
-  const [messages, setMessages] = useState([]);
-  const [failure, setFailure] = useState(void 0);
-  const loadMessagesRef = useRef(loadMessages);
-  const bottomRef = useRef(null);
-  loadMessagesRef.current = loadMessages;
-  const refresh = useCallback(async () => {
-    try {
-      setMessages(await loadMessagesRef.current(conversationId));
-    } catch {
-      setMessages([]);
+
+// 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 });
     }
-  }, [conversationId]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  useEffect(() => {
-    const source = sse.connectConversationStream(conversationId);
-    const handler = () => {
-      void refresh();
-    };
-    source.addEventListener("message", handler);
-    return () => {
-      source.removeEventListener("message", handler);
-      source.close();
-    };
-  }, [sse, conversationId, refresh]);
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  const rendered = useMemo(() => decorate(messages), [messages]);
-  async function handleSend(text) {
-    setFailure(void 0);
-    try {
-      await client.sendText(text);
-      await refresh();
-    } catch (error) {
-      setFailure(error instanceof Error ? error.message : "Falha ao entregar a mensagem no webhook.");
+  }
+  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 DEFAULT_LATENCY_MS = 120;
+var PREVIEW_AGENT_ID = "preview-agent";
+var PREVIEW_TEMPLATES = [
+  { name: "retomada_atendimento", language: "pt_BR", status: "APPROVED", category: "UTILITY" },
+  { name: "lembrete_documentos", language: "pt_BR", status: "APPROVED", category: "UTILITY" },
+  { name: "promocao_taxa", language: "pt_BR", status: "PENDING", category: "MARKETING" }
+];
+function createMockConversationsApi(params) {
+  const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS;
+  async function withLatency(produce) {
+    await new Promise((resolve) => setTimeout(resolve, latencyMs));
+    return produce();
+  }
+  return {
+    // Devolve a forma paginada, não o array puro: é a que o contrato passou a oferecer e a que
+    // permite o preview desenhar controles de página. O total é contado ANTES do corte — depois
+    // dele seria sempre o tamanho da página, e a paginação nunca sairia da primeira.
+    fetchConversations(fetchParams) {
+      return withLatency(() => {
+        const conversations = params.store.listConversations({
+          waitingHuman: fetchParams?.waitingHuman,
+          search: fetchParams?.search
+        });
+        const limit = fetchParams?.limit ?? conversations.length;
+        const page = fetchParams?.page ?? 1;
+        return {
+          conversations: conversations.slice((page - 1) * limit, page * limit),
+          total: conversations.length
+        };
+      });
+    },
+    fetchMessages(conversationId, fetchParams) {
+      return withLatency(() => {
+        const messages = params.store.listMessages(conversationId);
+        const limit = fetchParams?.limit;
+        return limit ? messages.slice(-limit) : messages;
+      });
+    },
+    sendMessage(conversationId, text) {
+      return withLatency(
+        () => params.store.appendMessage({ conversationId, content: text, direction: "outbound", sender: "agent" })
+      );
+    },
+    sendMedia(conversationId, data) {
+      return withLatency(
+        () => params.store.appendMessage({
+          conversationId,
+          content: data.caption ?? data.filename,
+          direction: "outbound",
+          sender: "agent"
+        })
+      );
+    },
+    sendTemplate(conversationId, data) {
+      return withLatency(() => {
+        params.store.appendMessage({
+          conversationId,
+          // Sem nome, o host está pedindo o template padrão do backend — o mock representa isso
+          // pelo que o atendente veria, não por um nome inventado.
+          content: `[template] ${data.templateName ?? PREVIEW_TEMPLATES[0]?.name ?? "padrao"}`,
+          direction: "outbound",
+          sender: "agent"
+        });
+      });
+    },
+    markRead(conversationId) {
+      return withLatency(() => params.store.markRead(conversationId));
+    },
+    getContext(conversationId) {
+      return withLatency(() => {
+        const conversation = params.store.listConversations().find((item) => item.id === conversationId);
+        return {
+          currentState: conversation?.currentState ?? "unknown",
+          mode: conversation?.mode ?? "bot",
+          preview: true
+        };
+      });
+    },
+    /**
+     * Espelha o backend em busca, filtro de origem, ordenação E paginação. Mock que ignora params
+     * faz o painel parecer quebrado aqui e, pior, esconde o caso em que o backend também os ignora
+     * — foi exatamente assim que o filtro de origem passou a existir só no contrato.
+     */
+    getDocuments(conversationId, documentParams) {
+      return withLatency(() => {
+        let documents = [...PREVIEW_DOCUMENTS[conversationId] ?? []];
+        const search = documentParams?.search?.trim().toLowerCase();
+        if (search) {
+          documents = documents.filter((document) => document.filename.toLowerCase().includes(search));
+        }
+        const source = documentParams?.source;
+        if (source === "team") {
+          documents = documents.filter((document) => document.source === "agent" || document.source === "bot");
+        } else if (source) {
+          documents = documents.filter((document) => document.source === source);
+        }
+        documents.sort(
+          (left, right) => documentParams?.sortDirection === "asc" ? left.linkedAt.localeCompare(right.linkedAt) : right.linkedAt.localeCompare(left.linkedAt)
+        );
+        const total = documents.length;
+        const limit = documentParams?.limit ?? total;
+        const page = documentParams?.page ?? 1;
+        return { documents: documents.slice((page - 1) * limit, page * limit), total };
+      });
+    },
+    /**
+     * Zip de mentira: um texto listando o que entraria. Basta para exercitar seleção, botão e o
+     * caminho de download no preview, sem arrastar uma lib de compactação para o pacote.
+     */
+    downloadDocumentsArchive(conversationId, uploadIds) {
+      return withLatency(() => {
+        const known = PREVIEW_DOCUMENTS[conversationId] ?? [];
+        const names = uploadIds.map((id) => known.find((document) => document.id === id)?.filename ?? id);
+        return new Blob([`preview: ${names.length} arquivo(s)
+${names.join("\n")}`], { type: "application/zip" });
+      });
+    },
+    /** 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);
+      });
+    },
+    // 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(
+        () => params.store.setMode({ conversationId, mode: "human", assignedUserId: PREVIEW_AGENT_ID })
+      );
+    },
+    release(conversationId) {
+      return withLatency(() => params.store.setMode({ conversationId, mode: "bot" }));
+    },
+    // Encerrar devolve ao bot como o release, e é de propósito: a diferença entre os dois é a
+    // despedida, que o host manda antes de chamar aqui. O mock não a inventa.
+    finalize(conversationId) {
+      return withLatency(() => params.store.setMode({ conversationId, mode: "bot" }));
+    },
+    markAllRead() {
+      return withLatency(() => {
+        for (const conversation of params.store.listConversations()) {
+          params.store.markRead(conversation.id);
+        }
+      });
+    },
+    listTemplates() {
+      return withLatency(() => [...PREVIEW_TEMPLATES]);
     }
+  };
+}
+
+// src/preview/createMockSSEProvider.ts
+function createMockSSEProvider(params) {
+  function connect(channel) {
+    const source = createMockEventSource();
+    const unsubscribe = params.store.subscribe(channel, (emission) => {
+      source.emit(emission.event, emission.payload);
+    });
+    const close = source.close.bind(source);
+    source.close = () => {
+      unsubscribe();
+      close();
+    };
+    return source;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
-      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs("div", { children: [
-        showDateDivider ? /* @__PURE__ */ jsx(DateDivider, { iso: message.timestamp }) : null,
-        /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message,
-            isMine: message.direction === "inbound",
-            isFirstInGroup
-          }
-        )
-      ] }, message.id)),
-      /* @__PURE__ */ jsx("div", { ref: bottomRef })
-    ] }),
-    failure ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
-    /* @__PURE__ */ jsx(
-      MessageComposer,
-      {
-        onSend: (text) => void handleSend(text),
-        placeholder: placeholder ?? "Escreva como o cliente\u2026"
-      }
-    )
-  ] });
+  return {
+    connectConversationStream(conversationId) {
+      return connect(conversationChannel(conversationId));
+    },
+    connectGlobalStream() {
+      return connect(GLOBAL_CHANNEL);
+    }
+  };
 }
 
 // src/preview/createPreviewWebhookClient.ts
 import {
   buildInboundAudioPayload,
   buildInboundInteractivePayload,
+  buildInboundMediaPayload,
   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.");
@@ -489,7 +910,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",
@@ -501,6 +922,31 @@ 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;
+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);
@@ -513,12 +959,70 @@ 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 }))
+    sendAudio: (mediaId) => sendPayload(buildInboundAudioPayload({ ...envelope, mediaId })),
+    sendMedia: (media) => sendPayload(buildInboundMediaPayload({ ...envelope, ...media })),
+    uploadMedia
+  };
+}
+
+// src/preview/createPreviewBridgeClient.ts
+var PreviewBridgeRejectedError = class extends Error {
+  constructor(status) {
+    super(`A rota de preview do host recusou a entrega (HTTP ${status}).`);
+    this.status = status;
+    this.name = "PreviewBridgeRejectedError";
+  }
+};
+function buildFetchSender(params) {
+  const endpointUrl = params.endpointUrl;
+  if (!endpointUrl) {
+    throw new Error("createPreviewBridgeClient exige `sendCommand` ou `endpointUrl`.");
+  }
+  return async (command) => {
+    const performRequest = params.fetchImplementation ?? fetch;
+    const response = await performRequest(endpointUrl, {
+      method: "POST",
+      // `credentials` fica com o host via `headers`/`fetchImplementation`: sessão por cookie e por
+      // bearer não convivem numa escolha default sem quebrar um dos dois.
+      headers: { "content-type": "application/json", ...params.headers },
+      body: JSON.stringify(command)
+    });
+    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 }),
+    ...uploadMedia ? { uploadMedia } : {}
   };
 }
 
@@ -557,20 +1061,97 @@ function startPreviewScript(params) {
   }, intervalMs);
   return () => clearInterval(timer);
 }
+
+// src/preview/MediaTypesPreview.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
+function MediaTypesPreview({
+  conversationId = MEDIA_TYPES_CONVERSATION_ID,
+  className
+}) {
+  const store = useMemo(
+    () => createPreviewStore({ conversations: PREVIEW_CONVERSATIONS, messages: PREVIEW_MESSAGES }),
+    []
+  );
+  const api = useMemo(() => createMockConversationsApi({ store }), [store]);
+  const sse = useMemo(() => createMockSSEProvider({ store }), [store]);
+  const messages = PREVIEW_MESSAGES[conversationId] ?? [];
+  const documents = PREVIEW_DOCUMENTS[conversationId] ?? [];
+  const mimeTypes = [...new Set(documents.map((document) => document.mimeType))];
+  return /* @__PURE__ */ jsx(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+        documents.length,
+        " arquivos, ",
+        mimeTypes.length,
+        " tipos. Clique no olho para abrir em aba nova e no bot\xE3o da bolha para carregar a m\xEDdia na thread \u2014 \xE9 o que teste automatizado n\xE3o v\xEA."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
+        /* @__PURE__ */ jsx(DocumentsLibrary, { perPage: documents.length || 20 })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
+        /* @__PURE__ */ jsx(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
+        /* @__PURE__ */ jsx(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            message,
+            isMine: message.direction === "outbound",
+            isFirstInGroup: index === 0 || messages[index - 1]?.sender !== message.sender
+          },
+          message.id
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
 export {
+  AudioRecorderButton,
   ConversationPreview,
+  ConversationSimulatorPanel,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  DEFAULT_MEDIA_UPLOAD_PATH,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,
+  MEDIA_TYPES_CONVERSATION_ID,
+  MediaTypesPreview,
   PREVIEW_CONVERSATIONS,
+  PREVIEW_DOCUMENTS,
+  PREVIEW_FILE_SAMPLES,
+  PREVIEW_MEDIA_ID_PREFIX,
   PREVIEW_MESSAGES,
+  PreviewBridgeRejectedError,
   PreviewInProductionError,
+  PreviewMediaUploadRejectedError,
   PreviewWebhookRejectedError,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  acceptsMediaKind,
   assertPreviewEnvironment,
   conversationChannel,
   createMockConversationsApi,
   createMockEventSource,
   createMockSSEProvider,
+  createPreviewBridgeClient,
+  createPreviewMediaPoster,
+  createPreviewMediaResolver,
+  createPreviewMediaUploader,
   createPreviewStore,
   createPreviewWebhookClient,
-  startPreviewScript
+  isConversationSimulatorClient,
+  mediaKindOf,
+  mediaTypeOf,
+  previewFileBase64,
+  previewFileUrl,
+  resolvePreviewFileSample,
+  signPreviewPayload,
+  simulatorPanelLabelsOf,
+  startPreviewScript,
+  toConversationSimulatorClient
 };