@adatechnology/conversations-ui 0.1.0-rc.0 → 0.1.0-rc.10

package/src/preview/createMockConversationsApi.ts

@@ -0,0 +1,271 @@
+/**
+ * `ConversationsApi` servido pelo store em memória. Como o pacote é headless e recebe a API por
+ * injeção, o preview de atendimento humano não precisa de servidor, banco nem Meta: é só outra
+ * implementação deste mesmo contrato.
+ *
+ * Toda resposta é assíncrona e passa por um atraso configurável — API instantânea esconde estados
+ * de carregamento, e é neles que a inbox costuma mostrar defeito.
+ */
+
+import type { MessagePayload } from '../types'
+import type {
+  CompanyDocumentPage,
+  ConversationDocumentPage,
+  ConversationPage,
+  ConversationTemplate,
+  ConversationsApi,
+  ListConversationsParams,
+} from '../providers/types'
+import { PREVIEW_DOCUMENTS } from './previewFixtures'
+import { previewFileBase64, previewFileUrl } from './previewMediaSource'
+import type { PreviewStore } from './previewStore'
+
+export type CreateMockConversationsApiParams = {
+  readonly store: PreviewStore
+  readonly latencyMs?: number
+  readonly agentName?: string
+}
+
+const DEFAULT_LATENCY_MS = 120
+
+const PREVIEW_AGENT_ID = 'preview-agent'
+
+const PREVIEW_TEMPLATES: readonly ConversationTemplate[] = [
+  { 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' },
+]
+
+/**
+ * O mock satisfaz `ConversationsApi`, mas com o retorno de `fetchConversations` ESTREITADO para a
+ * forma paginada. Sem isto o contrato — que aceita array ou página — obrigaria todo consumidor do
+ * preview a desempacotar uma união que aqui nunca varia.
+ */
+export type MockConversationsApi = Omit<ConversationsApi, 'fetchConversations'> & {
+  fetchConversations(params?: ListConversationsParams): Promise<ConversationPage>
+}
+
+export function createMockConversationsApi(params: CreateMockConversationsApiParams): MockConversationsApi {
+  const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS
+
+  async function withLatency<TResult>(produce: () => TResult): Promise<TResult> {
+    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): Promise<ConversationPage> {
+      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): Promise<MessagePayload[]> {
+      return withLatency(() => {
+        const messages = params.store.listMessages(conversationId)
+        const limit = fetchParams?.limit
+        return limit ? messages.slice(-limit) : messages
+      })
+    },
+
+    sendMessage(conversationId, text): Promise<MessagePayload> {
+      return withLatency(() =>
+        params.store.appendMessage({ conversationId, content: text, direction: 'outbound', sender: 'agent' }),
+      )
+    },
+
+    sendMedia(conversationId, data): Promise<MessagePayload> {
+      return withLatency(() =>
+        params.store.appendMessage({
+          conversationId,
+          content: data.caption ?? data.filename,
+          direction: 'outbound',
+          sender: 'agent',
+        }),
+      )
+    },
+
+    sendTemplate(conversationId, data): Promise<void> {
+      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): Promise<void> {
+      return withLatency(() => params.store.markRead(conversationId))
+    },
+
+    getContext(conversationId): Promise<Record<string, unknown>> {
+      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): Promise<ConversationDocumentPage> {
+      return withLatency(() => {
+        let documents = [...(PREVIEW_DOCUMENTS[conversationId] ?? [])]
+
+        const search = documentParams?.search?.trim().toLowerCase()
+        if (search) {
+          documents = documents.filter((document) => document.filename.toLowerCase().includes(search))
+        }
+
+        // 'team' agrupa agent + bot, como o painel apresenta.
+        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),
+        )
+
+        // Total contado ANTES do corte — depois seria sempre o tamanho da página, e a paginação
+        // nunca sairia da primeira.
+        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): Promise<Blob> {
+      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)\n${names.join('\n')}`], { type: 'application/zip' })
+      })
+    },
+
+    /** 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 }
+      })
+    },
+
+    // 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> {
+      return withLatency(() =>
+        params.store.setMode({ conversationId, mode: 'human', assignedUserId: PREVIEW_AGENT_ID }),
+      )
+    },
+
+    release(conversationId): Promise<void> {
+      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): Promise<void> {
+      return withLatency(() => params.store.setMode({ conversationId, mode: 'bot' }))
+    },
+
+    markAllRead(): Promise<void> {
+      return withLatency(() => {
+        for (const conversation of params.store.listConversations()) {
+          params.store.markRead(conversation.id)
+        }
+      })
+    },
+
+    listTemplates(): Promise<ConversationTemplate[]> {
+      return withLatency(() => [...PREVIEW_TEMPLATES])
+    },
+  }
+}

package/src/preview/createMockSSEProvider.ts

@@ -0,0 +1,40 @@
+/**
+ * `SSEProvider` servido pelo store em memória. Mesmo mapeamento de canal do servidor
+ * (`conv:<conversationId>` e `global`), para que a UI não perceba a troca.
+ */
+
+import type { SSEProvider } from '../providers/types'
+import { createMockEventSource } from './mockEventSource'
+import { conversationChannel, GLOBAL_CHANNEL, type PreviewStore } from './previewStore'
+
+export type CreateMockSSEProviderParams = {
+  readonly store: PreviewStore
+}
+
+export function createMockSSEProvider(params: CreateMockSSEProviderParams): SSEProvider {
+  function connect(channel: string): ReturnType<typeof createMockEventSource> {
+    const source = createMockEventSource()
+    const unsubscribe = params.store.subscribe(channel, (emission) => {
+      source.emit(emission.event, emission.payload)
+    })
+
+    const close = source.close.bind(source)
+    // O unsubscribe tem de acontecer no close, senão cada remontagem de componente deixa um
+    // listener preso no store e a mesma mensagem chega duplicada na UI.
+    source.close = (): void => {
+      unsubscribe()
+      close()
+    }
+
+    return source
+  }
+
+  return {
+    connectConversationStream(conversationId: string) {
+      return connect(conversationChannel(conversationId))
+    },
+    connectGlobalStream() {
+      return connect(GLOBAL_CHANNEL)
+    },
+  }
+}

package/src/preview/createPreviewWebhookClient.test.ts

@@ -0,0 +1,105 @@
+/**
+ * O risco aqui não é o cliente montar o payload errado — é o HMAC do WebCrypto divergir do que o
+ * servidor calcula com `node:crypto`. Uma divergência de um byte transforma todo envio do preview
+ * em 401, então o teste compara as duas implementações diretamente.
+ */
+
+import { createHmac } from 'node:crypto'
+import { describe, expect, it } from 'bun:test'
+import {
+  assertPreviewEnvironment,
+  createPreviewWebhookClient,
+  PreviewInProductionError,
+  PreviewWebhookRejectedError,
+} from './createPreviewWebhookClient'
+
+const APP_SECRET = 'dev-app-secret'
+const FROM = '5511988887777'
+const WEBHOOK_URL = 'http://localhost:3000/v1/webhook/whatsapp'
+
+type CapturedRequest = {
+  body: string
+  signature: string
+}
+
+function createCapturingFetch(status = 200): { fetchImplementation: typeof fetch; captured: CapturedRequest[] } {
+  const captured: CapturedRequest[] = []
+
+  const fetchImplementation = (async (_url: string, init?: RequestInit) => {
+    const headers = init?.headers as Record<string, string>
+    captured.push({ body: String(init?.body), signature: headers['x-hub-signature-256'] ?? '' })
+    return { ok: status >= 200 && status < 300, status } as Response
+  }) as unknown as typeof fetch
+
+  return { fetchImplementation, captured }
+}
+
+describe('createPreviewWebhookClient', () => {
+  it('assina com o mesmo HMAC que o servidor calcula em node:crypto', async () => {
+    const { fetchImplementation, captured } = createCapturingFetch()
+    const client = createPreviewWebhookClient({
+      webhookUrl: WEBHOOK_URL,
+      appSecret: APP_SECRET,
+      from: FROM,
+      fetchImplementation,
+    })
+
+    await client.sendText('quero 2kg de arroz')
+
+    const request = captured[0]
+    const expected = `sha256=${createHmac('sha256', APP_SECRET)
+      .update(request?.body ?? '')
+      .digest('hex')}`
+    expect(request?.signature).toBe(expected)
+  })
+
+  it('envia exatamente os bytes que assinou', async () => {
+    const { fetchImplementation, captured } = createCapturingFetch()
+    const client = createPreviewWebhookClient({
+      webhookUrl: WEBHOOK_URL,
+      appSecret: APP_SECRET,
+      from: FROM,
+      fetchImplementation,
+    })
+
+    await client.sendButtonReply({ id: 'confirmar', title: 'Confirmar' })
+
+    const request = captured[0]
+    const reparsed = JSON.stringify(JSON.parse(request?.body ?? '{}'))
+    expect(request?.body).toBe(reparsed)
+  })
+
+  it('mensagens de texto idêntico produzem assinaturas distintas', async () => {
+    const { fetchImplementation, captured } = createCapturingFetch()
+    const client = createPreviewWebhookClient({
+      webhookUrl: WEBHOOK_URL,
+      appSecret: APP_SECRET,
+      from: FROM,
+      fetchImplementation,
+    })
+
+    await client.sendText('sim')
+    await client.sendText('sim')
+
+    expect(captured[0]?.signature).not.toBe(captured[1]?.signature)
+  })
+
+  it('propaga a recusa do webhook em vez de engolir', async () => {
+    const { fetchImplementation } = createCapturingFetch(401)
+    const client = createPreviewWebhookClient({
+      webhookUrl: WEBHOOK_URL,
+      appSecret: APP_SECRET,
+      from: FROM,
+      fetchImplementation,
+    })
+
+    await expect(client.sendText('oi')).rejects.toBeInstanceOf(PreviewWebhookRejectedError)
+  })
+})
+
+describe('assertPreviewEnvironment', () => {
+  it('recusa montar em produção', () => {
+    expect(() => assertPreviewEnvironment(true)).toThrow(PreviewInProductionError)
+    expect(() => assertPreviewEnvironment(false)).not.toThrow()
+  })
+})

package/src/preview/createPreviewWebhookClient.ts

@@ -0,0 +1,126 @@
+/**
+ * Cliente que entrega mensagens do preview no webhook real, assinadas com HMAC — a mesma validação
+ * de staging e produção, sem rota alternativa e sem bypass. Do ponto de vista da API, este cliente
+ * é indistinguível da Meta; o que muda é apenas quem assina.
+ *
+ * Assina com WebCrypto porque `node:crypto` não existe no navegador. Os builders vêm dos contratos
+ * (isomórficos) justamente para que o mesmo payload seja montado nos dois runtimes.
+ *
+ * ⚠️ Isto carrega o app secret de DESENVOLVIMENTO no bundle. Só existe para o docker local, e
+ * `assertPreviewEnvironment` recusa rodar em produção — um segredo de dev vazado é irrelevante,
+ * mas o hábito de embarcar segredo em frontend não é.
+ */
+
+import {
+  buildInboundAudioPayload,
+  buildInboundInteractivePayload,
+  buildInboundMediaPayload,
+  buildInboundTextPayload,
+  serializeWebhookPayload,
+  type InboundMediaType,
+  type InteractiveReplyOption,
+} from '@adatechnology/meta-whatsapp-contracts/testing'
+
+export type PreviewWebhookClient = {
+  sendText(text: string): Promise<void>
+  sendButtonReply(reply: InteractiveReplyOption): Promise<void>
+  sendListReply(reply: InteractiveReplyOption): Promise<void>
+  sendAudio(mediaId: string): Promise<void>
+  sendMedia(params: SendPreviewMediaParams): Promise<void>
+}
+
+export type SendPreviewMediaParams = {
+  readonly mediaType: InboundMediaType
+  /**
+   * Id que o host já usa para buscar o arquivo. Não é bytes: o webhook da Meta entrega mídia por
+   * referência, e o consumidor baixa depois — mandar base64 aqui simularia um payload que a Meta
+   * nunca produz, e o caminho testado deixaria de ser o de produção.
+   */
+  readonly mediaId: string
+  readonly mimeType?: string
+  readonly filename?: string
+  readonly caption?: string
+}
+
+export type CreatePreviewWebhookClientParams = {
+  readonly webhookUrl: string
+  readonly appSecret: string
+  readonly from: string
+  readonly phoneNumberId?: string
+  // Escape hatch para teste; em runtime real é sempre o fetch global.
+  readonly fetchImplementation?: typeof fetch
+}
+
+export class PreviewInProductionError extends Error {
+  constructor() {
+    super('O preview de conversa carrega um app secret e não pode ser montado em produção.')
+    this.name = 'PreviewInProductionError'
+  }
+}
+
+export class PreviewWebhookRejectedError extends Error {
+  constructor(readonly status: number) {
+    super(`O webhook recusou a entrega do preview (HTTP ${status}).`)
+    this.name = 'PreviewWebhookRejectedError'
+  }
+}
+
+/**
+ * Falha alto em vez de degradar em silêncio: um preview que "quase funciona" em produção é pior
+ * que um que se recusa a montar.
+ */
+export function assertPreviewEnvironment(isProduction: boolean): void {
+  if (isProduction) throw new PreviewInProductionError()
+}
+
+/**
+ * Assina um texto qualquer com o app secret, no mesmo formato do header da Meta.
+ *
+ * Exportada porque o preview precisa provar identidade em MAIS de um lugar: além de entregar a
+ * mensagem no webhook, ele lê o transcript de volta — e ler pela API de admin exigia uma sessão que
+ * a aba do simulador não tem. Assinar a leitura com o segredo que ele já carrega resolve sem token
+ * de admin e sem rota aberta.
+ */
+export async function signPreviewPayload(params: { rawBody: string; appSecret: string }): Promise<string> {
+  const encoder = new TextEncoder()
+  const key = await globalThis.crypto.subtle.importKey(
+    'raw',
+    encoder.encode(params.appSecret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+  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('')}`
+}
+
+const signWithWebCrypto = signPreviewPayload
+
+export function createPreviewWebhookClient(params: CreatePreviewWebhookClientParams): PreviewWebhookClient {
+  const sendPayload = async (payload: ReturnType<typeof buildInboundTextPayload>): Promise<void> => {
+    // Serializa uma vez só: assinar um texto e enviar outro (mesmo com o conteúdo igual) derruba a
+    // validação, porque o HMAC cobre os bytes exatos.
+    const rawBody = serializeWebhookPayload(payload)
+    const signature = await signWithWebCrypto({ rawBody, appSecret: params.appSecret })
+    const performRequest = params.fetchImplementation ?? fetch
+
+    const response = await performRequest(params.webhookUrl, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'x-hub-signature-256': signature },
+      body: rawBody,
+    })
+
+    if (!response.ok) throw new PreviewWebhookRejectedError(response.status)
+  }
+
+  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 })),
+    sendMedia: (media) => sendPayload(buildInboundMediaPayload({ ...envelope, ...media })),
+  }
+}

package/src/preview/index.ts

@@ -0,0 +1,54 @@
+/**
+ * Export separado (`@adatechnology/conversations-ui/preview`) para que fixtures e mocks nunca
+ * entrem no bundle de produção de quem consome o pacote.
+ */
+
+export { createPreviewStore, conversationChannel, GLOBAL_CHANNEL } from './previewStore'
+export type {
+  PreviewStore,
+  CreatePreviewStoreParams,
+  PreviewEmission,
+  PreviewStoreListener,
+  AppendMessageParams,
+  SetModeParams,
+  ListConversationsFilters,
+} from './previewStore'
+
+export { createMockEventSource } from './mockEventSource'
+export type { MockEventSource } from './mockEventSource'
+
+export { createMockConversationsApi } from './createMockConversationsApi'
+export type { CreateMockConversationsApiParams } from './createMockConversationsApi'
+
+export { createMockSSEProvider } from './createMockSSEProvider'
+export type { CreateMockSSEProviderParams } from './createMockSSEProvider'
+
+export { PREVIEW_CONVERSATIONS, PREVIEW_MESSAGES, PREVIEW_DOCUMENTS } from './previewFixtures'
+
+export { ConversationPreview } 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,
+  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)
+  })
+})