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

package/src/WhatsAppMessageEditor.tsx

@@ -1,7 +1,29 @@
 import { useRef, type ReactNode } from 'react'
 import { Bold, Italic, Strikethrough } from 'lucide-react'
 
+export interface WhatsAppMessageEditorLabels {
+  bold: string
+  /** Tooltip da negrito — traz a sintaxe do WhatsApp junto, por isso é separado do `aria-label`. */
+  boldHint: string
+  italic: string
+  italicHint: string
+  strikethrough: string
+  strikethroughHint: string
+  insertPlaceholder: (token: string) => string
+}
+
+export const DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS: WhatsAppMessageEditorLabels = {
+  bold: 'Negrito',
+  boldHint: 'Negrito (*texto*)',
+  italic: 'Itálico',
+  italicHint: 'Itálico (_texto_)',
+  strikethrough: 'Tachado',
+  strikethroughHint: 'Tachado (~texto~)',
+  insertPlaceholder: (token: string) => `Inserir ${token}`,
+}
+
 export interface WhatsAppMessageEditorProps {
+  labels?: Partial<WhatsAppMessageEditorLabels>
   value: string
   onChange: (value: string) => void
   placeholder?: string
@@ -56,7 +78,9 @@ export function WhatsAppMessageEditor({
   rows = 4,
   previewLabel = 'Prévia (como aparece no WhatsApp)',
   emptyPreviewText = 'Sua mensagem aparecerá aqui…',
+  labels,
 }: WhatsAppMessageEditorProps) {
+  const editorLabels = { ...DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, ...labels }
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   function wrapSelection(marker: string): void {
@@ -93,13 +117,13 @@ export function WhatsAppMessageEditor({
   return (
     <div>
       <div className="flex flex-wrap items-center gap-1.5 mb-2">
-        <button type="button" onClick={() => wrapSelection('*')} className={toolbarButtonClass} title="Negrito (*texto*)" aria-label="Negrito">
+        <button type="button" onClick={() => wrapSelection('*')} className={toolbarButtonClass} title={editorLabels.boldHint} aria-label={editorLabels.bold}>
           <Bold size={15} />
         </button>
-        <button type="button" onClick={() => wrapSelection('_')} className={toolbarButtonClass} title="Itálico (_texto_)" aria-label="Itálico">
+        <button type="button" onClick={() => wrapSelection('_')} className={toolbarButtonClass} title={editorLabels.italicHint} aria-label={editorLabels.italic}>
           <Italic size={15} />
         </button>
-        <button type="button" onClick={() => wrapSelection('~')} className={toolbarButtonClass} title="Tachado (~texto~)" aria-label="Tachado">
+        <button type="button" onClick={() => wrapSelection('~')} className={toolbarButtonClass} title={editorLabels.strikethroughHint} aria-label={editorLabels.strikethrough}>
           <Strikethrough size={15} />
         </button>
         {placeholders.length > 0 && (
@@ -111,7 +135,7 @@ export function WhatsAppMessageEditor({
                 type="button"
                 onClick={() => insertAtCursor(token)}
                 className="inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors"
-                title={`Inserir ${token}`}
+                title={editorLabels.insertPlaceholder(token)}
               >
                 {token}
               </button>

package/src/index.ts

@@ -3,16 +3,16 @@ export { ConversationWallpaper } from './Wallpaper'
 export { ConversationLocalesProvider, useConversationLocales } from './ConversationLocalesProvider'
 export { AudioPlayer } from './AudioPlayer'
 export { EmojiPicker } from './EmojiPicker'
-export { MessageComposer } from './MessageComposer'
-export { WhatsAppMessageEditor } from './WhatsAppMessageEditor'
+export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS } from './MessageComposer'
+export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
-export { Avatar } from './Avatar'
-export { ConversationListItem } from './ConversationListItem'
+export { Avatar, DEFAULT_AVATAR_LABELS } from './Avatar'
+export { ConversationListItem, DEFAULT_CONVERSATION_LIST_ITEM_LABELS } from './ConversationListItem'
 export { ToastProvider, useToast, toast } from './Toast'
 
 export { StatusTicks } from './StatusTicks'
-export { Lightbox } from './Lightbox'
+export { Lightbox, DEFAULT_LIGHTBOX_LABELS } from './Lightbox'
 export { MediaRenderer } from './MediaRenderer'
 export { FileIcon } from './FileIcon'
 export { MessageText } from './MessageText'
@@ -65,6 +65,10 @@ export type {
 } from './ConversationContextPanel'
 export { WindowExpiredNotice, isWindowBlocking, DEFAULT_WINDOW_EXPIRED_LABELS } from './WindowExpiredNotice'
 export type { WindowExpiredNoticeProps, WindowExpiredNoticeLabels } from './WindowExpiredNotice'
+export { DocumentsLibrary, DEFAULT_DOCUMENTS_LIBRARY_LABELS } from './DocumentsLibrary'
+export type { DocumentsLibraryProps, DocumentsLibraryLabels, DocumentsLibraryClassNames } from './DocumentsLibrary'
+export { DOCUMENT_SOURCE_FILTER } from './ConversationDocumentsPanel'
+export type { DocumentSourceFilter } from './ConversationDocumentsPanel'
 export type { ConversationDocumentsPanelClassNames } from './ConversationDocumentsPanel'
 export { ConversationDocumentsPanel, DEFAULT_CONVERSATION_DOCUMENTS_LABELS } from './ConversationDocumentsPanel'
 export type { ConversationDocumentsPanelProps, ConversationDocumentsPanelLabels } from './ConversationDocumentsPanel'
@@ -118,6 +122,8 @@ export type {
   ConversationDocument,
   ConversationPage,
   ConversationDocumentPage,
+  CompanyDocument,
+  CompanyDocumentPage,
   ConversationTemplate,
   ListConversationsParams,
   ListDocumentsParams,
@@ -129,14 +135,14 @@ export type { ConversationWallpaperProps } from './Wallpaper'
 export type { ConversationLocales, ConversationLocalesProviderProps } from './ConversationLocalesProvider'
 export type { AudioPlayerProps } from './AudioPlayer'
 export type { EmojiPickerProps } from './EmojiPicker'
-export type { MessageComposerProps, MessageComposerClassNames } from './MessageComposer'
-export type { WhatsAppMessageEditorProps } from './WhatsAppMessageEditor'
+export type { MessageComposerProps, MessageComposerClassNames, MessageComposerLabels } from './MessageComposer'
+export type { WhatsAppMessageEditorProps, WhatsAppMessageEditorLabels } from './WhatsAppMessageEditor'
 export type { SimpleEmojiPickerProps } from './SimpleEmojiPicker'
 export type { DateDividerProps, DateDividerClassNames } from './DateDivider'
-export type { AvatarProps } from './Avatar'
-export type { ConversationListItemProps } from './ConversationListItem'
+export type { AvatarProps, AvatarLabels } from './Avatar'
+export type { ConversationListItemProps, ConversationListItemLabels } from './ConversationListItem'
 export type { StatusTicksProps } from './StatusTicks'
-export type { LightboxProps } from './Lightbox'
+export type { LightboxProps, LightboxLabels } from './Lightbox'
 export type { MediaRendererProps, ResolveMediaUrl } from './MediaRenderer'
 export type { FileIconProps } from './FileIcon'
 export type { MessageTextProps } from './MessageText'
@@ -168,3 +174,4 @@ export type { UseConversationContextResult } from './hooks/useConversationContex
 export type { UseConversationDocumentsParams, UseConversationDocumentsResult } from './hooks/useConversationDocuments'
 export type { ConversationRealtimeHandler } from './hooks/useConversationRealtime'
 export type { AsyncResourceState } from './hooks/useAsyncResource'
+export { createMediaUrlResolver } from './lib/createMediaUrlResolver'

package/src/lib/createMediaUrlResolver.ts

@@ -0,0 +1,33 @@
+/**
+ * Resolve a mídia de uma mensagem numa URL exibível, usando só o `ConversationsApi`.
+ *
+ * Mora no pacote, e não em cada host, porque a regra não tem nada de específico de produto: é a
+ * tradução de `uploadId`/`mediaId` pelos dois métodos que o próprio contrato já declara. Deixá-la no
+ * host significava que todo projeto que adotasse o SDK reescreveria as mesmas oito linhas — e, na
+ * prática, ninguém escrevia: o `MediaRenderer` só busca mídia pela porta `onResolveMediaUrl`, então
+ * onde nada era injetado foto, vídeo e áudio ficavam no placeholder para sempre.
+ */
+
+import type { MessagePayload } from '../types'
+import type { ConversationsApi } from '../providers/types'
+import type { ResolveMediaUrl } from '../MediaRenderer'
+
+export function createMediaUrlResolver(
+  api: Pick<ConversationsApi, 'getDocumentUrl' | 'getMediaProxyUrl'>,
+): ResolveMediaUrl {
+  return async (message: MessagePayload): Promise<string | null> => {
+    // Mídia já copiada para o storage do host: sai por URL assinada e o binário não passa pela API.
+    // `inline` porque aqui o arquivo é para VER na tela — `attachment` faria o navegador baixar.
+    if (message.uploadId) return api.getDocumentUrl(message.uploadId, 'inline')
+
+    // Antes da ingestão só existe o id na Meta, cuja URL expira; o backend busca e devolve base64.
+    // Data URL serve de `src` para `<img>`/`<video>`/`<audio>`: o bloqueio do Chrome a `data:` vale
+    // para navegação de topo, não para carregar mídia dentro da página.
+    if (message.mediaId) {
+      const { mimeType, data } = await api.getMediaProxyUrl(message.mediaId)
+      return `data:${mimeType};base64,${data}`
+    }
+
+    return null
+  }
+}

package/src/preview/MediaTypesPreview.tsx

@@ -0,0 +1,87 @@
+/**
+ * Bancada de teste manual de mídia — montável em uma linha por qualquer projeto que adote o SDK.
+ *
+ * Existe porque o defeito que ela pega não é pegável por teste automatizado: "o PDF abre?" depende
+ * do leitor do navegador, "o vídeo toca?" do decodificador, e "a aba abre?" da política do Chrome
+ * sobre `data:` URL. Teste unitário confere bytes; só o olho confere que o arquivo abre. Sem uma
+ * superfície pronta no pacote, cada projeto teria de montar a sua — e, na prática, nenhum montava.
+ *
+ * Traz o próprio store, o próprio mock e o próprio provider: o host não injeta nada. E não passa
+ * `onResolveMediaUrl` em lugar nenhum de propósito — é o `MessageBubble` resolvendo mídia pelo
+ * `ConversationsApi` do contexto, então se essa resolução automática quebrar, esta tela mostra.
+ */
+
+import { useMemo } from 'react'
+import { ConversationsProvider } from '../providers/ConversationsProvider'
+import { DocumentsLibrary } from '../DocumentsLibrary'
+import { ConversationDocumentsPanel } from '../ConversationDocumentsPanel'
+import { MessageBubble } from '../MessageBubble'
+import { ConversationWallpaper } from '../Wallpaper'
+import { createMockConversationsApi } from './createMockConversationsApi'
+import { createMockSSEProvider } from './createMockSSEProvider'
+import { createPreviewStore } from './previewStore'
+import { PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_MESSAGES } from './previewFixtures'
+
+/** A conversa do fixture que carrega uma mensagem de cada tipo aceito. */
+export const MEDIA_TYPES_CONVERSATION_ID = '5511944443333'
+
+export type MediaTypesPreviewProps = {
+  /** Outra conversa do fixture, se o projeto tiver acrescentado a sua. */
+  conversationId?: string
+  className?: string
+}
+
+export function MediaTypesPreview({
+  conversationId = MEDIA_TYPES_CONVERSATION_ID,
+  className,
+}: MediaTypesPreviewProps) {
+  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 (
+    <ConversationsProvider api={api} sse={sse}>
+      <div className={className}>
+        <header className="border-b px-4 py-3 dark:border-gray-700">
+          <h1 className="text-lg font-semibold">Teste manual de mídia</h1>
+          <p className="text-sm text-gray-500">
+            {documents.length} arquivos, {mimeTypes.length} tipos. Clique no olho para abrir em aba nova e no
+            botão da bolha para carregar a mídia na thread — é o que teste automatizado não vê.
+          </p>
+        </header>
+
+        <div className="grid gap-4 p-4 lg:grid-cols-2">
+          <section className="space-y-3">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Biblioteca da empresa</h2>
+            {/* Sem paginar: a bancada serve para ver TODOS os tipos de uma vez. */}
+            <DocumentsLibrary perPage={documents.length || 20} />
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Painel da conversa</h2>
+            <ConversationDocumentsPanel conversationId={conversationId} open perPage={documents.length || 20} />
+
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Bolhas na thread</h2>
+            <ConversationWallpaper className="max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2">
+              {messages.map((message, index) => (
+                <MessageBubble
+                  key={message.id}
+                  message={message}
+                  isMine={message.direction === 'outbound'}
+                  isFirstInGroup={index === 0 || messages[index - 1]?.sender !== message.sender}
+                />
+              ))}
+            </ConversationWallpaper>
+          </section>
+        </div>
+      </div>
+    </ConversationsProvider>
+  )
+}

package/src/preview/createMockConversationsApi.ts

@@ -9,6 +9,7 @@
 
 import type { MessagePayload } from '../types'
 import type {
+  CompanyDocumentPage,
   ConversationDocumentPage,
   ConversationPage,
   ConversationTemplate,
@@ -16,12 +17,9 @@ import type {
   ListConversationsParams,
 } from '../providers/types'
 import { PREVIEW_DOCUMENTS } from './previewFixtures'
+import { previewFileBase64, previewFileUrl } from './previewMediaSource'
 import type { PreviewStore } from './previewStore'
 
-// PNG 1x1 transparente: o suficiente para o MediaRenderer ter algo válido para desenhar.
-const PREVIEW_IMAGE_BASE64 =
-  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYGD4DwABBAEAX+XyEgAAAABJRU5ErkJggg=='
-
 export type CreateMockConversationsApiParams = {
   readonly store: PreviewStore
   readonly latencyMs?: number
@@ -178,12 +176,68 @@ export function createMockConversationsApi(params: CreateMockConversationsApiPar
       })
     },
 
-    getDocumentUrl(): Promise<string> {
-      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): Promise<CompanyDocumentPage> {
+      return withLatency(() => {
+        let all = Object.entries(PREVIEW_DOCUMENTS).flatMap(([conversationId, docs]) =>
+          docs.map((document) => ({ ...document, conversationId })),
+        )
+
+        // Mesma regra do backend (`companyDocumentSearch`): o termo casa nome do arquivo OU
+        // telefone da conversa, e o telefone só pelos dígitos — o preview mostra o número
+        // formatado, então é assim que o atendente vai colá-lo na busca.
+        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(): Promise<{ mimeType: string; data: string }> {
-      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): Promise<string> {
+      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): Promise<{ mimeType: string; data: string }> {
+      return withLatency(() => {
+        const found = Object.values(PREVIEW_DOCUMENTS)
+          .flat()
+          .find((document) => document.id === `preview/inbound/${mediaId}`)
+        return previewFileBase64(found?.mimeType, found?.filename)
+      })
     },
 
     takeover(conversationId): Promise<void> {

package/src/preview/index.ts

@@ -38,3 +38,8 @@ export type { PreviewWebhookClient, CreatePreviewWebhookClientParams } from './c
 
 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/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)
+    }
+  })
+})