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

package/src/preview/index.ts

@@ -26,15 +26,29 @@ export type { CreateMockSSEProviderParams } from './createMockSSEProvider'
 export { PREVIEW_CONVERSATIONS, PREVIEW_MESSAGES, PREVIEW_DOCUMENTS } from './previewFixtures'
 
 export { ConversationPreview } from './ConversationPreview'
-export type { ConversationPreviewProps } from './ConversationPreview'
+export { mediaTypeOf } from './ConversationPreview'
+export type { ConversationPreviewProps, PreviewUploadedMedia } from './ConversationPreview'
+
+export { AudioRecorderButton, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from './AudioRecorderButton'
+export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from './AudioRecorderButton'
 
 export {
   createPreviewWebhookClient,
+  signPreviewPayload,
   assertPreviewEnvironment,
   PreviewInProductionError,
   PreviewWebhookRejectedError,
 } from './createPreviewWebhookClient'
-export type { PreviewWebhookClient, CreatePreviewWebhookClientParams } from './createPreviewWebhookClient'
+export type {
+  PreviewWebhookClient,
+  CreatePreviewWebhookClientParams,
+  SendPreviewMediaParams,
+} from './createPreviewWebhookClient'
 
 export { startPreviewScript, DEFAULT_PREVIEW_SCRIPT } from './startPreviewScript'
 export type { PreviewScriptStep, StartPreviewScriptParams } from './startPreviewScript'
+export { PREVIEW_FILE_SAMPLES, resolvePreviewFileSample } from './previewFileSamples'
+export { createPreviewMediaResolver, previewFileUrl } from './previewMediaSource'
+export { previewFileBase64 } from './previewMediaSource'
+export { MediaTypesPreview, MEDIA_TYPES_CONVERSATION_ID } from './MediaTypesPreview'
+export type { MediaTypesPreviewProps } from './MediaTypesPreview'

package/src/preview/mediaTypeOf.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'bun:test'
+import { mediaTypeOf } from './ConversationPreview'
+
+describe('mediaTypeOf', () => {
+  it('deriva imagem, vídeo e áudio pelo prefixo do MIME', () => {
+    expect(mediaTypeOf('image/jpeg')).toBe('image')
+    expect(mediaTypeOf('video/mp4')).toBe('video')
+    expect(mediaTypeOf('audio/webm')).toBe('audio')
+  })
+
+  it('trata o resto como documento, inclusive MIME desconhecido', () => {
+    expect(mediaTypeOf('application/pdf')).toBe('document')
+    expect(mediaTypeOf('')).toBe('document')
+  })
+})

package/src/preview/mockDocumentsSearch.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Guarda a busca da biblioteca no mock — que é a implementação de referência da UI do SDK e tem de
+ * casar com o `companyDocumentSearch` do backend, senão o preview ensina um comportamento que a
+ * tela real não entrega.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { createMockConversationsApi } from './createMockConversationsApi'
+import { createPreviewStore } from './previewStore'
+import { PREVIEW_CONVERSATIONS, PREVIEW_MESSAGES } from './previewFixtures'
+
+function buildApi() {
+  const store = createPreviewStore({ conversations: PREVIEW_CONVERSATIONS, messages: PREVIEW_MESSAGES })
+  return createMockConversationsApi({ store })
+}
+
+async function search(term: string): Promise<{ total: number; conversations: string[] }> {
+  const page = await buildApi().getAllDocuments!({ search: term })
+  return { total: page.total, conversations: [...new Set(page.documents.map((document) => document.conversationId))] }
+}
+
+describe('busca da biblioteca no mock', () => {
+  it('acha por nome do arquivo', async () => {
+    const result = await search('contrato')
+
+    expect(result.total).toBe(1)
+  })
+
+  it('acha por telefone da conversa', async () => {
+    const porNumero = await search('94444')
+
+    expect(porNumero.conversations).toEqual(['5511944443333'])
+    expect(porNumero.total).toBeGreaterThan(0)
+    // Discrimina de verdade: 98888 é conversa que existe nas fixtures, mas sem arquivo — se o
+    // predicado do telefone não estivesse valendo, esta busca devolveria a biblioteca inteira.
+    expect((await search('98888')).total).toBe(0)
+  })
+
+  // O caso real: o atendente copia o número como a tela o mostra.
+  it('acha com o telefone formatado, como aparece na tela', async () => {
+    const cru = await search('5511944443333')
+    const formatado = await search('+55 (11) 94444-3333')
+
+    expect(formatado.total).toBe(cru.total)
+    expect(formatado.total).toBeGreaterThan(0)
+  })
+
+  it('não devolve nada para número de outra conversa', async () => {
+    expect((await search('99999999999')).total).toBe(0)
+  })
+
+  // Sem dígito, o predicado do telefone não existe — senão qualquer palavra casaria toda conversa.
+  it('termo sem dígito filtra só por nome', async () => {
+    expect((await search('zzz-inexistente')).total).toBe(0)
+  })
+})

package/src/preview/previewFileSamples.test.ts

@@ -0,0 +1,151 @@
+/**
+ * Guarda que o preview entrega arquivo do tipo que promete.
+ *
+ * O defeito que motivou o arquivo: `getDocumentUrl` devolvia sempre a mesma imagem PNG, então
+ * "visualizar" num PDF abria um PNG rotulado `application/pdf` e o leitor dizia que o arquivo era
+ * inválido. Aqui os bytes são decodificados e conferidos pela assinatura de cada formato — teste que
+ * só olhasse o prefixo da data URL passaria com o bug de volta.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { PREVIEW_FILE_SAMPLES, resolvePreviewFileSample } from './previewFileSamples'
+import { PREVIEW_DOCUMENTS } from './previewFixtures'
+
+function decode(dataUrl: string): { mimeType: string; bytes: Uint8Array } {
+  const [head, payload] = dataUrl.split(',')
+  const mimeType = head!.replace(/^data:/, '').replace(/;base64$/, '')
+  if (!head!.endsWith(';base64')) {
+    return { mimeType, bytes: new TextEncoder().encode(decodeURIComponent(payload!)) }
+  }
+  return { mimeType, bytes: Uint8Array.from(atob(payload!), (char) => char.charCodeAt(0)) }
+}
+
+function startsWith(bytes: Uint8Array, signature: readonly number[], offset = 0): boolean {
+  return signature.every((byte, index) => bytes[offset + index] === byte)
+}
+
+const ascii = (text: string): number[] => [...text].map((char) => char.charCodeAt(0))
+
+// Assinatura real de cada formato, não o rótulo do mimeType.
+const SIGNATURES: Record<string, (bytes: Uint8Array) => boolean> = {
+  'application/pdf': (bytes) => startsWith(bytes, ascii('%PDF-')),
+  'image/png': (bytes) => startsWith(bytes, [0x89, 0x50, 0x4e, 0x47]),
+  'image/jpeg': (bytes) => startsWith(bytes, [0xff, 0xd8, 0xff]),
+  'image/webp': (bytes) => startsWith(bytes, ascii('RIFF')) && startsWith(bytes, ascii('WEBP'), 8),
+  'video/mp4': (bytes) => startsWith(bytes, ascii('ftyp'), 4),
+  'audio/mp4': (bytes) => startsWith(bytes, ascii('ftyp'), 4),
+  // ID3 quando há tag, ou o sync do primeiro frame MPEG.
+  'audio/mpeg': (bytes) => startsWith(bytes, ascii('ID3')) || (bytes[0] === 0xff && (bytes[1]! & 0xe0) === 0xe0),
+  'audio/ogg': (bytes) => startsWith(bytes, ascii('OggS')),
+  'audio/aac': (bytes) => bytes[0] === 0xff && (bytes[1]! & 0xf0) === 0xf0,
+  'text/plain': (bytes) => bytes.length > 0,
+  'text/csv': (bytes) => bytes.length > 0,
+  // Todo pacote Office é zip: assinatura PK\x03\x04.
+  'application/zip': (bytes) => startsWith(bytes, [0x50, 0x4b, 0x03, 0x04]),
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': (bytes) =>
+    startsWith(bytes, [0x50, 0x4b, 0x03, 0x04]),
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': (bytes) =>
+    startsWith(bytes, [0x50, 0x4b, 0x03, 0x04]),
+}
+
+describe('amostras de arquivo do preview', () => {
+  it('toda amostra declara o mimeType que anuncia', () => {
+    for (const [mimeType, dataUrl] of Object.entries(PREVIEW_FILE_SAMPLES)) {
+      expect(decode(dataUrl).mimeType).toBe(mimeType)
+    }
+  })
+
+  for (const [mimeType, isValid] of Object.entries(SIGNATURES)) {
+    it(`os bytes de ${mimeType} são realmente desse formato`, () => {
+      const sample = PREVIEW_FILE_SAMPLES[mimeType]
+      expect(sample).toBeDefined()
+      expect(isValid(decode(sample!).bytes)).toBe(true)
+    })
+  }
+
+  // O PDF sem xref/startxref é o caso que alguns leitores recusam de cara.
+  it('o PDF tem tabela xref e termina em %%EOF', () => {
+    const text = new TextDecoder().decode(decode(PREVIEW_FILE_SAMPLES['application/pdf']!).bytes)
+
+    expect(text).toContain('\nxref\n')
+    expect(text).toContain('startxref')
+    expect(text.trimEnd().endsWith('%%EOF')).toBe(true)
+  })
+})
+
+describe('resolvePreviewFileSample', () => {
+  it('descarta parâmetro do mimeType — áudio de WhatsApp chega com codecs', () => {
+    expect(resolvePreviewFileSample('audio/ogg; codecs=opus')).toBe(PREVIEW_FILE_SAMPLES['audio/ogg'])
+  })
+
+  // Tipos aceitos pela Meta sem amostra local (sem encoder amr/3gp nesta máquina): tocam pela
+  // família, em vez de devolver bytes de outro formato.
+  it('cai na família quando não há amostra do tipo exato', () => {
+    expect(resolvePreviewFileSample('audio/amr')).toBe(PREVIEW_FILE_SAMPLES['audio/mpeg'])
+    expect(resolvePreviewFileSample('video/3gp')).toBe(PREVIEW_FILE_SAMPLES['video/mp4'])
+    expect(resolvePreviewFileSample('image/heic')).toBe(PREVIEW_FILE_SAMPLES['image/png'])
+  })
+
+  // Office legado é OLE2, não zip: servir o docx aqui daria arquivo corrompido no Word. Melhor um
+  // texto que abre e se explica.
+  it('explica em texto quando não há como forjar o binário', () => {
+    const resolved = resolvePreviewFileSample('application/msword', 'procuracao.doc')
+
+    expect(resolved.startsWith('data:text/plain')).toBe(true)
+    expect(decodeURIComponent(resolved)).toContain('procuracao.doc')
+  })
+
+  it('não devolve vazio para tipo desconhecido', () => {
+    expect(resolvePreviewFileSample(undefined).length).toBeGreaterThan(0)
+    expect(resolvePreviewFileSample('application/octet-stream').length).toBeGreaterThan(0)
+  })
+})
+
+describe('biblioteca do preview', () => {
+  // A infidelidade que existia: a biblioteca listava só `document`, enquanto o backend linka as
+  // cinco espécies de mídia. Foto, vídeo, áudio e sticker apareciam na tela real e não no preview.
+  it('lista foto, vídeo, áudio e sticker junto dos documentos', () => {
+    const mimeTypes = (PREVIEW_DOCUMENTS['5511944443333'] ?? []).map((document) => document.mimeType)
+
+    expect(mimeTypes.some((mimeType) => mimeType.startsWith('image/'))).toBe(true)
+    expect(mimeTypes.some((mimeType) => mimeType.startsWith('video/'))).toBe(true)
+    expect(mimeTypes.some((mimeType) => mimeType.startsWith('audio/'))).toBe(true)
+    expect(mimeTypes).toContain('image/webp')
+  })
+
+  // Cada tipo que a Cloud API da Meta aceita para envio de mídia.
+  const ACCEPTED_BY_META = [
+    'image/jpeg',
+    'image/png',
+    'image/webp',
+    'video/mp4',
+    'video/3gp',
+    'audio/aac',
+    'audio/amr',
+    'audio/mpeg',
+    'audio/mp4',
+    'audio/ogg',
+    'application/pdf',
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-powerpoint',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    'text/plain',
+  ]
+
+  it('cobre todo tipo aceito pela Meta', () => {
+    const present = new Set((PREVIEW_DOCUMENTS['5511944443333'] ?? []).map((document) => document.mimeType))
+    const faltando = ACCEPTED_BY_META.filter((mimeType) => !present.has(mimeType))
+
+    expect(faltando).toEqual([])
+  })
+
+  it('todo item da biblioteca abre com bytes não vazios', () => {
+    for (const document of PREVIEW_DOCUMENTS['5511944443333'] ?? []) {
+      expect(decode(resolvePreviewFileSample(document.mimeType, document.filename)).bytes.length).toBeGreaterThan(0)
+    }
+  })
+})

package/src/preview/previewFileSamples.ts

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+export const PREVIEW_FILE_SAMPLES: Readonly<Record<string, string>> = {
+  '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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',
+}
+
+const FAMILY_FALLBACK: Readonly<Record<string, string>> = {
+  image: 'image/png',
+  video: 'video/mp4',
+  audio: 'audio/mpeg',
+  text: 'text/plain',
+}
+
+/**
+ * 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.
+ */
+export function resolvePreviewFileSample(mimeType: string | undefined, filename?: string): string {
+  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] : undefined
+  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)}`
+}

package/src/preview/previewFixtures.ts

@@ -275,8 +275,7 @@ export const PREVIEW_MESSAGES: Readonly<Record<string, readonly MessagePayload[]
       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',
@@ -286,20 +285,153 @@ export const PREVIEW_MESSAGES: Readonly<Record<string, readonly MessagePayload[]
       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: 2_048,
+      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: 512_000,
+      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: 348_160,
+      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: 3_145_728,
+      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: 486_400,
+      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: 8_388_608,
+      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: 262_144,
+      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: 138_240,
+      direction: 'inbound',
+      sender: 'customer',
+      timestamp: at('15:18:00'),
+    },
+    {
+      id: 'fixture-media-3gp',
+      type: 'video',
+      mediaId: 'preview-video-3gp',
+      mimeType: 'video/3gp',
+      sizeBytes: 921_600,
+      direction: 'inbound',
+      sender: 'customer',
+      timestamp: at('15:19:00'),
+    },
+    {
+      id: 'fixture-media-aac',
+      type: 'audio',
+      mediaId: 'preview-audio-aac',
+      mimeType: 'audio/aac',
+      sizeBytes: 76_800,
+      direction: 'inbound',
+      sender: 'customer',
+      timestamp: at('15:20:00'),
+    },
+    {
+      id: 'fixture-media-amr',
+      type: 'audio',
+      mediaId: 'preview-audio-amr',
+      mimeType: 'audio/amr',
+      sizeBytes: 24_576,
+      direction: 'inbound',
+      sender: 'customer',
+      timestamp: at('15:21:00'),
+    },
   ],
 }
 
 /**
- * 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.
+ * A biblioteca de arquivos da conversa, como o backend a devolveria. Deriva das mensagens 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.
+ *
+ * Entram as CINCO espécies de mídia, na mesma lista de `extractMediaDescriptor` no backend — não só
+ * `document`. Filtrar por documento era infidelidade grave do preview: `IngestInboundMedia` linka
+ * foto, vídeo, áudio e sticker na mesma tabela, então na tela real eles aparecem na biblioteca e no
+ * preview não apareciam.
  */
+const LIBRARY_MEDIA_TYPES = new Set(['document', 'image', 'video', 'audio', 'sticker'])
+
 export const PREVIEW_DOCUMENTS: Readonly<Record<string, readonly ConversationDocument[]>> = {
   '5511944443333': (PREVIEW_MESSAGES['5511944443333'] ?? [])
-    .filter((message) => message.type === 'document')
+    .filter((message) => LIBRARY_MEDIA_TYPES.has(message.type))
     .map((message) => ({
-      id: message.uploadId ?? message.id,
-      filename: message.filename ?? message.id,
+      // 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,

package/src/preview/previewMediaSource.test.ts

@@ -0,0 +1,62 @@
+/**
+ * Guarda o resolvedor de mídia do preview.
+ *
+ * As asserções comparam com `previewFileUrl(tipo)` em vez de com a data URL da amostra: o bun também
+ * tem `URL.createObjectURL`, então o retorno é `blob:` aqui como no navegador, e blob URL não expõe
+ * o conteúdo para comparar. O que este teste trava é o MAPEAMENTO — mensagem → amostra do tipo certo
+ * —, enquanto os bytes de cada tipo são conferidos em `previewFileSamples.test.ts`.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { createPreviewMediaResolver, previewFileUrl } from './previewMediaSource'
+import type { MessagePayload } from '../types'
+
+const resolve = createPreviewMediaResolver()
+
+function message(partial: Partial<MessagePayload>): MessagePayload {
+  return {
+    id: 'msg-1',
+    type: 'image',
+    direction: 'inbound',
+    sender: 'customer',
+    timestamp: '2026-07-26T15:00:00.000Z',
+    ...partial,
+  } as MessagePayload
+}
+
+describe('createPreviewMediaResolver', () => {
+  it('resolve mídia pelo mediaId, achando o tipo na biblioteca do fixture', async () => {
+    // preview-image-1 é a foto png da thread da Rita.
+    expect(await resolve(message({ mediaId: 'preview-image-1' }))).toBe(previewFileUrl('image/png'))
+  })
+
+  it('resolve documento pelo uploadId', async () => {
+    const resolved = await resolve(message({ type: 'document', uploadId: 'preview/documentos/nota-fiscal.pdf' }))
+
+    expect(resolved).toBe(previewFileUrl('application/pdf'))
+  })
+
+  // O sticker é webp e o áudio de voz é opus: dois tipos que o painel antes nem listava.
+  it('resolve sticker e áudio', async () => {
+    expect(await resolve(message({ mediaId: 'preview-sticker-1' }))).toBe(previewFileUrl('image/webp'))
+    expect(await resolve(message({ mediaId: 'preview-audio-2' }))).toBe(previewFileUrl('audio/ogg'))
+  })
+
+  // Mídia que não está na biblioteca ainda tem de abrir: cai no mimeType da própria mensagem.
+  it('usa o mimeType da mensagem quando o id é desconhecido', async () => {
+    const resolved = await resolve(message({ mediaId: 'nunca-visto', mimeType: 'image/jpeg' }))
+
+    expect(resolved).toBe(previewFileUrl('image/jpeg'))
+  })
+
+  // Sem referência nenhuma o MediaRenderer não deve receber URL — devolver algo aqui faria a bolha
+  // mostrar arquivo que a mensagem não tem.
+  it('devolve null para mensagem sem uploadId nem mediaId', async () => {
+    expect(await resolve(message({ type: 'text' }))).toBeNull()
+  })
+
+  it('reaproveita a mesma URL para o mesmo tipo', () => {
+    expect(previewFileUrl('application/pdf')).toBe(previewFileUrl('application/pdf'))
+  })
+})