@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.0

package/src/Tooltip.tsx

@@ -0,0 +1,167 @@
+/**
+ * Camada única de dicas do pacote.
+ *
+ * O `title` nativo existia em todos os botões e mesmo assim a dica "não aparecia": o navegador
+ * espera de 1 a 2 segundos antes de desenhar, o balão sai fora do tema e some ao menor movimento do
+ * mouse. Aqui a dica é do produto — aparece em 120ms, com o mesmo contraste do resto da interface.
+ *
+ * Um só ouvinte no documento atende a interface inteira: cada botão declara `data-cv-tooltip` e não
+ * precisa de estado, ref ou wrapper próprio. O balão é impresso em `document.body` via portal
+ * porque `overflow` de container (a régua de respostas rápidas rola na horizontal) recortaria um
+ * balão desenhado dentro do próprio botão.
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+/** Atributo que marca um elemento como portador de dica. */
+export const TOOLTIP_ATTRIBUTE = 'data-cv-tooltip'
+
+const TOOLTIP_DELAY_MS = 120
+const TOOLTIP_GAP_PX = 8
+/** Margem para o balão não colar na borda da janela quando o alvo está no canto. */
+const TOOLTIP_EDGE_PX = 72
+
+export type TooltipPlacement = 'top' | 'bottom'
+
+export interface TooltipPositionParams {
+  readonly targetRect: { top: number; bottom: number; left: number; width: number }
+  readonly viewportWidth: number
+}
+
+export interface TooltipPosition {
+  left: number
+  top: number
+  placement: TooltipPlacement
+}
+
+interface TooltipState extends TooltipPosition {
+  text: string
+}
+
+/** Separado do componente por ser a única parte com regra: o resto é ouvir evento e desenhar. */
+export function tooltipPositionOf({ targetRect, viewportWidth }: TooltipPositionParams): TooltipPosition {
+  // Sem espaço acima (botão no topo da tela), o balão desce em vez de sair da janela.
+  const placement: TooltipPlacement = targetRect.top < TOOLTIP_EDGE_PX ? 'bottom' : 'top'
+  const centerX = targetRect.left + targetRect.width / 2
+
+  return {
+    left: Math.min(Math.max(centerX, TOOLTIP_EDGE_PX), viewportWidth - TOOLTIP_EDGE_PX),
+    top: placement === 'top' ? targetRect.top - TOOLTIP_GAP_PX : targetRect.bottom + TOOLTIP_GAP_PX,
+    placement,
+  }
+}
+
+function tooltipStateFor(target: Element, text: string): TooltipState {
+  const position = tooltipPositionOf({
+    targetRect: target.getBoundingClientRect(),
+    viewportWidth: window.innerWidth,
+  })
+
+  return { text, ...position }
+}
+
+/**
+ * Só uma camada desenha por vez. A camada é montada por cada superfície do pacote (inbox, fluxos,
+ * documentos) para o host não precisar montá-la à mão; duas superfícies na mesma tela renderizariam
+ * dois balões sobrepostos sem essa trava.
+ */
+let layerOwner: object | undefined
+
+export function TooltipLayer() {
+  const identity = useRef({})
+  const [isOwner, setIsOwner] = useState(false)
+  const [tooltip, setTooltip] = useState<TooltipState | undefined>(undefined)
+
+  useEffect(() => {
+    const owned = identity.current
+    if (layerOwner && layerOwner !== owned) return undefined
+    layerOwner = owned
+    setIsOwner(true)
+
+    return () => {
+      if (layerOwner === owned) layerOwner = undefined
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isOwner) return undefined
+
+    let timer: ReturnType<typeof setTimeout> | undefined
+
+    function cancelPending() {
+      if (timer) clearTimeout(timer)
+      timer = undefined
+    }
+
+    function hide() {
+      cancelPending()
+      setTooltip(undefined)
+    }
+
+    function handleEnter(event: Event) {
+      const origin = event.target
+      if (!(origin instanceof Element)) return
+      // `Element`, e não `HTMLElement`: ícone é `<svg>`, que não é HTMLElement. Exigir HTMLElement
+      // fazia a dica de um ícone não só falhar — ela ENGOLIA a do card ao redor, porque o
+      // `closest` já tinha parado no svg e a busca não continuava para cima.
+      const target = origin.closest(`[${TOOLTIP_ATTRIBUTE}]`)
+      if (!target) {
+        hide()
+        return
+      }
+      const text = target.getAttribute(TOOLTIP_ATTRIBUTE)
+      if (!text) {
+        hide()
+        return
+      }
+      cancelPending()
+      timer = setTimeout(() => setTooltip(tooltipStateFor(target, text)), TOOLTIP_DELAY_MS)
+    }
+
+    // Sair da janela não dispara `pointerover` em elemento nenhum: sem isto, o balão ficaria aceso
+    // depois que o ponteiro já saiu da página.
+    function handleLeaveWindow(event: PointerEvent) {
+      if (!event.relatedTarget) hide()
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') hide()
+    }
+
+    document.addEventListener('pointerover', handleEnter)
+    document.addEventListener('pointerout', handleLeaveWindow)
+    document.addEventListener('focusin', handleEnter)
+    document.addEventListener('pointerdown', hide)
+    document.addEventListener('focusout', hide)
+    document.addEventListener('keydown', handleKeyDown)
+    // Captura: rolagem em qualquer container interno invalida a posição já medida.
+    window.addEventListener('scroll', hide, true)
+    window.addEventListener('resize', hide)
+
+    return () => {
+      cancelPending()
+      document.removeEventListener('pointerover', handleEnter)
+      document.removeEventListener('pointerout', handleLeaveWindow)
+      document.removeEventListener('focusin', handleEnter)
+      document.removeEventListener('pointerdown', hide)
+      document.removeEventListener('focusout', hide)
+      document.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('scroll', hide, true)
+      window.removeEventListener('resize', hide)
+    }
+  }, [isOwner])
+
+  if (!tooltip) return null
+
+  return createPortal(
+    <div
+      role="tooltip"
+      className={`cv-tooltip cv-tooltip--${tooltip.placement}`}
+      style={{ left: tooltip.left, top: tooltip.top }}
+    >
+      {tooltip.text}
+    </div>,
+    document.body,
+  )
+}

package/src/Wallpaper.tsx

@@ -8,7 +8,7 @@
  * A classe `cv-wallpaper` continua no elemento para quem já sobrescreve por CSS.
  */
 
-import type { CSSProperties, ReactNode } from 'react'
+import { forwardRef, type CSSProperties, type ReactNode, type UIEvent } from 'react'
 
 import { cn } from './lib/cn'
 import { useIsDarkTheme } from './useDarkMode'
@@ -45,17 +45,31 @@ export interface ConversationWallpaperProps {
   className?: string
   /** Ajusta ou substitui o fundo padrão — para produto com identidade visual própria. */
   style?: CSSProperties
+  /**
+   * Rolagem da área de mensagens. Par do `ref`: é este elemento que rola, então é aqui que
+   * `useScrollToLatestMessage` observa a posição para saber se o operador está acompanhando o fim.
+   */
+  onScroll?: (event: UIEvent<HTMLDivElement>) => void
 }
 
-export function ConversationWallpaper({ children, className, style }: ConversationWallpaperProps) {
-  const isDark = useIsDarkTheme()
-
-  return (
-    <div
-      className={cn('cv-wallpaper', className)}
-      style={{ ...(isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER), ...style }}
-    >
-      {children}
-    </div>
-  )
-}
+/**
+ * `forwardRef` porque quem controla a rolagem é de fora — o hook precisa do elemento para saltar
+ * até a última mensagem. `forwardRef` e não `ref` como prop: o pacote suporta React 18, onde
+ * ref-como-prop ainda não existe.
+ */
+export const ConversationWallpaper = forwardRef<HTMLDivElement, ConversationWallpaperProps>(
+  function ConversationWallpaper({ children, className, style, onScroll }, ref) {
+    const isDark = useIsDarkTheme()
+
+    return (
+      <div
+        ref={ref}
+        onScroll={onScroll}
+        className={cn('cv-wallpaper', className)}
+        style={{ ...(isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER), ...style }}
+      >
+        {children}
+      </div>
+    )
+  },
+)

package/src/WhatsAppMessageEditor.tsx

@@ -117,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={editorLabels.boldHint} aria-label={editorLabels.bold}>
+        <button type="button" onClick={() => wrapSelection('*')} className={toolbarButtonClass} data-cv-tooltip={editorLabels.boldHint} aria-label={editorLabels.bold}>
           <Bold size={15} />
         </button>
-        <button type="button" onClick={() => wrapSelection('_')} className={toolbarButtonClass} title={editorLabels.italicHint} aria-label={editorLabels.italic}>
+        <button type="button" onClick={() => wrapSelection('_')} className={toolbarButtonClass} data-cv-tooltip={editorLabels.italicHint} aria-label={editorLabels.italic}>
           <Italic size={15} />
         </button>
-        <button type="button" onClick={() => wrapSelection('~')} className={toolbarButtonClass} title={editorLabels.strikethroughHint} aria-label={editorLabels.strikethrough}>
+        <button type="button" onClick={() => wrapSelection('~')} className={toolbarButtonClass} data-cv-tooltip={editorLabels.strikethroughHint} aria-label={editorLabels.strikethrough}>
           <Strikethrough size={15} />
         </button>
         {placeholders.length > 0 && (
@@ -135,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={editorLabels.insertPlaceholder(token)}
+                data-cv-tooltip={editorLabels.insertPlaceholder(token)} aria-label={editorLabels.insertPlaceholder(token)}
               >
                 {token}
               </button>
@@ -155,9 +155,12 @@ export function WhatsAppMessageEditor({
 
       <div className="mt-2">
         <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{previewLabel}</p>
-        <div className="rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3">
-          <div className="inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">
-            {value.trim() ? renderWhatsApp(value) : <span className="text-gray-400 dark:text-gray-500">{emptyPreviewText}</span>}
+        <div className="rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] p-3">
+          <div className="flex justify-end ml-auto" style={{ maxWidth: '85%' }}>
+            <div className="bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">
+              {value.trim() ? renderWhatsApp(value) : <span className="text-gray-400 dark:text-gray-500">{emptyPreviewText}</span>}
+              <p className="text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]">12:00 ✓✓</p>
+            </div>
           </div>
         </div>
       </div>

package/src/WindowExpiredNotice.tsx

@@ -6,7 +6,10 @@
  * cumpre. O caminho que resta — template — fica visível na mesma altura da tela.
  */
 
+import { AlarmClock, Send } from 'lucide-react'
+
 import { CONVERSATION_WINDOW, type ConversationWindow } from './conversationWindow'
+import { ICON_SIZE_ACTION, ICON_SIZE_INLINE } from './icon.constant'
 import { cn } from './lib/cn'
 
 export interface WindowExpiredNoticeLabels {
@@ -15,10 +18,11 @@ export interface WindowExpiredNoticeLabels {
   sendTemplate: string
 }
 
+// Sem emoji no rótulo: o ícone vem ao lado, da mesma biblioteca do resto da tela.
 export const DEFAULT_WINDOW_EXPIRED_LABELS: WindowExpiredNoticeLabels = {
-  title: '⏰ Janela de 24h expirada — o WhatsApp não aceita mensagens livres.',
+  title: 'Janela de 24h expirada — o WhatsApp não aceita mensagens livres.',
   description: 'Envie uma mensagem de template para reabrir a conversa com o cliente.',
-  sendTemplate: '📨 Enviar Template (HSM)',
+  sendTemplate: 'Enviar Template (HSM)',
 }
 
 export interface WindowExpiredNoticeProps {
@@ -38,10 +42,14 @@ export function WindowExpiredNotice({
 
   return (
     <div role="status" className={cn('border-t bg-yellow-50 px-4 py-3 text-sm dark:bg-yellow-950', className)}>
-      <p className="font-medium text-yellow-900 dark:text-yellow-200">{labels.title}</p>
+      <p className="flex items-center gap-2 font-medium text-yellow-900 dark:text-yellow-200">
+        <AlarmClock size={ICON_SIZE_INLINE} aria-hidden="true" className="shrink-0" />
+        {labels.title}
+      </p>
       <p className="text-yellow-800 dark:text-yellow-300">{labels.description}</p>
       {onSendTemplate ? (
-        <button type="button" onClick={onSendTemplate} disabled={disabled} className="cv-header-action mt-2">
+        <button data-cv-tooltip={labels.sendTemplate} aria-label={labels.sendTemplate} type="button" onClick={onSendTemplate} disabled={disabled} className="cv-header-action mt-2">
+          <Send size={ICON_SIZE_ACTION} aria-hidden="true" />
           {labels.sendTemplate}
         </button>
       ) : null}

package/src/{preview/audioRecorderFormat.test.ts → audioRecorderFormat.test.ts}

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from 'bun:test'
 
 import { resolveRecordingFormat } from './AudioRecorderButton'
-import { DEFAULT_ACCEPTED_FILE_TYPES } from '../MessageComposer'
+import { DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
 
 const originalMediaRecorder = (globalThis as Record<string, unknown>).MediaRecorder
 

package/src/buildOutput.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * O único teste que lê o `dist` em vez do fonte.
+ *
+ * Existe porque o `notification-ui@rc.1` saiu com 19 testes verdes e não renderizava. Dois defeitos,
+ * os dois invisíveis para quem importa o fonte:
+ *
+ * 1. `jsx: react-jsx` chegava ao tsup por um tsconfig com `extends`, e o esbuild NÃO segue `extends`
+ *    para essa opção. O bundle saiu com `React.createElement` sem `React` no escopo, e o produto
+ *    quebrou com `ReferenceError: React is not defined`.
+ * 2. `splitting: false` com dois entrypoints duplicou o módulo de contexto. O provider de um bundle
+ *    não era o mesmo objeto do consumidor no outro, e o hook acusava "usado fora do provider" estando
+ *    dentro de um.
+ *
+ * Nenhum teste de fonte pega isso: eles importam `./index`, não `dist`. Rode depois do build.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+const DIST = `${import.meta.dir}/../dist`
+
+async function distText(file: string): Promise<string> {
+  const handle = Bun.file(`${DIST}/${file}`)
+  expect(await handle.exists(), `${file} não existe — rode \`bun run build\` antes`).toBe(true)
+  return handle.text()
+}
+
+describe('transform de JSX', () => {
+  it('usa o runtime automático, e não React.createElement', async () => {
+    for (const file of ['index.js', 'flows/index.js', 'preview/index.js']) {
+      const content = await distText(file)
+
+      expect(content, `${file} com createElement`).not.toContain('React.createElement')
+      expect(content, `${file} sem jsx-runtime`).toContain('react/jsx-runtime')
+    }
+  })
+})
+
+describe('divisão de código entre entrypoints', () => {
+  it('os entrypoints compartilham chunk em vez de duplicar módulo', async () => {
+    // Sem `splitting: true`, cada entrypoint carrega a própria cópia dos módulos comuns — e um
+    // contexto do React duplicado deixa de ser o mesmo objeto entre provider e consumidor.
+    const chunks = [...new Bun.Glob('chunk-*.js').scanSync({ cwd: DIST })]
+
+    expect(chunks.length, 'nenhum chunk compartilhado gerado').toBeGreaterThan(0)
+  })
+})
+
+describe('telas compostas chegam ao pacote publicado', () => {
+  it('o subpath raiz entrega MessagesWorkspace, no js e nos tipos', async () => {
+    expect(await distText('index.js')).toContain('MessagesWorkspace')
+    expect(await distText('index.d.ts')).toContain('MessagesWorkspace')
+  })
+
+  it('o subpath /flows entrega FlowsWorkspace, no js e nos tipos', async () => {
+    // Export declarado no `index.ts` e ausente do `dist` é o modo de falhar mais barato de cometer e
+    // mais caro de descobrir: só aparece no produto, depois de publicar.
+    expect(await distText('flows/index.js')).toContain('FlowsWorkspace')
+    expect(await distText('flows/index.d.ts')).toContain('FlowsWorkspace')
+  })
+
+  it('o CSS publicado traz as classes que as telas consomem', async () => {
+    const css = await distText('styles.css')
+
+    // A inbox depende destas classes do pacote (o editor de fluxos e a tela de mensagens estilizam por
+    // utilitários do host). Publicar sem elas deixa a tela montada e sem layout — e nada falha.
+    expect(css).toContain('.cv-workspace')
+    expect(css).toContain('.cv-workspace-modal')
+  })
+})
+
+describe('o bundle do host não paga por @xyflow/react sem pedir', () => {
+  it('o subpath raiz não puxa o xyflow', async () => {
+    // É o motivo de o editor viver em `/flows`: quem só usa a inbox não carrega a biblioteca de
+    // canvas, que é a maior dependência do pacote.
+    expect(await distText('index.js')).not.toContain('@xyflow/react')
+  })
+})

package/src/composer.constant.ts

@@ -0,0 +1,33 @@
+/**
+ * Aparência da barra de composição, compartilhada pelo `MessageComposer` e pelo
+ * `RichMessageComposer`. São a mesma superfície na tela: divergir aqui é o que fazia a barra rica
+ * aparecer branca sobre o fundo branco da página, com os atalhos flutuando sem faixa própria.
+ */
+
+/** Faixa cinza de largura cheia; o campo de texto dentro dela é que arredonda — ordem do WhatsApp. */
+export const COMPOSER_BAR_CLASS = 'cv-composer-bar'
+
+/** Botão redondo da barra: formatação, emoji, variáveis e anexo têm o mesmo peso visual. */
+export const COMPOSER_TOOL_BUTTON_CLASS =
+  'flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-teal-50 hover:text-teal-600 dark:hover:bg-teal-900/30 dark:hover:text-teal-400'
+
+/** Formatação em vigor no cursor. Sem isto o operador não sabe se o próximo caractere sai em negrito. */
+export const COMPOSER_TOOL_BUTTON_ACTIVE_CLASS = 'bg-teal-50 text-teal-600 dark:bg-teal-900/40 dark:text-teal-400'
+
+export const COMPOSER_TOOL_BUTTON_IDLE_CLASS = 'text-gray-400 dark:text-gray-500'
+
+/** Marcação do monoespaçado dentro do campo — a mesma que o `waToHTML` escreve, para o trecho não
+ *  mudar de cara ao recarregar um rascunho. */
+export const COMPOSER_MONOSPACE_CLASS = 'bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm'
+
+/**
+ * Abaixo desta largura de barra (em px) os quatro botões de formatação recolhem num único botão com
+ * popover. Com todos abertos, sobram ~200px de barra para os oito controles e o campo de texto fica
+ * mais estreito que o próprio placeholder. É a largura da barra, não da janela: quem estreita a
+ * coluna é a prévia do simulador ao lado, com a janela intacta.
+ */
+export const COMPOSER_COMPACT_WIDTH = 480
+
+/** Atalho de resposta rápida: pílula branca, que só tem contraste porque a faixa é cinza. */
+export const QUICK_REPLY_PILL_CLASS =
+  'whitespace-nowrap rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-sm transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400'

package/src/conversationTranscript.test.ts

@@ -62,4 +62,61 @@ describe('buildTranscriptFilename', () => {
       `conversa-${NUMBER}-2026-07-27.txt`,
     )
   })
+
+  /**
+   * O áudio saía como `<audio>` no arquivo baixado. Um histórico onde o pedido do cliente aparece
+   * como marcador vazio é inútil justamente para o caso que motiva o download: auditoria e repasse.
+   */
+  it('escreve a transcrição do áudio no lugar do marcador de tipo', () => {
+    const texto = buildTranscriptText({
+      whatsappNumber: '5511999999999',
+      messages: [
+        {
+          id: '1',
+          type: 'audio',
+          direction: 'inbound',
+          sender: 'customer',
+          timestamp: '2026-07-31T12:00:00.000Z',
+          transcription: { status: 'done', text: 'quero dois quilos de arroz' },
+        },
+      ],
+    })
+
+    expect(texto).toContain('[áudio] quero dois quilos de arroz')
+    expect(texto).not.toContain('<audio>')
+  })
+
+  it('mantém o marcador de tipo quando o áudio não foi transcrito', () => {
+    const texto = buildTranscriptText({
+      whatsappNumber: '5511999999999',
+      messages: [
+        { id: '1', type: 'audio', direction: 'inbound', sender: 'customer', timestamp: '2026-07-31T12:00:00.000Z' },
+      ],
+    })
+
+    expect(texto).toContain('<audio>')
+  })
+
+  /**
+   * A rota de export do módulo devolve `createdAt`, não `sentAt` — quem mapeia esperando `sentAt`
+   * entrega `undefined` aqui, e o arquivo saía com "Invalid Date" em todas as linhas.
+   */
+  it('escreve "data indisponível" em vez de Invalid Date quando o horário não vem', () => {
+    const texto = buildTranscriptText({
+      whatsappNumber: '5511999999999',
+      messages: [
+        {
+          id: '1',
+          type: 'text',
+          direction: 'inbound',
+          sender: 'customer',
+          content: 'ola',
+          timestamp: undefined as unknown as string,
+        },
+      ],
+    })
+
+    expect(texto).toContain('data indisponível')
+    expect(texto).not.toContain('Invalid Date')
+  })
 })

package/src/conversationTranscript.ts

@@ -33,16 +33,41 @@ export function buildTranscriptText(params: BuildTranscriptTextParams): string {
   ]
 
   const lines = params.messages.map((message) => {
-    const stamp = new Date(message.timestamp).toLocaleString('pt-BR')
     const author = message.agentName ?? SENDER_LABEL[message.sender]
-    // Mídia sem legenda não tem texto nenhum; marcar o tipo evita uma linha vazia sem explicação.
-    const body = message.content ?? message.caption ?? `<${message.type}>`
-    return `[${stamp}] ${author}: ${body}`
+    return `[${formatStamp(message.timestamp)}] ${author}: ${bodyOf(message)}`
   })
 
   return [...header, ...lines].join('\n')
 }
 
+/**
+ * Corpo da linha no arquivo.
+ *
+ * Áudio transcrito entra com o TEXTO, não como `<audio>`. Quem baixa a conversa quer lê-la, e um
+ * histórico onde o pedido do cliente aparece como marcador vazio é inútil justamente para o caso que
+ * motiva o download: auditoria e repasse. O prefixo `[áudio]` fica na frente para a linha não passar
+ * por mensagem digitada — quem audita precisa saber que aquilo foi falado e transcrito por máquina.
+ */
+function bodyOf(message: MessagePayload): string {
+  const transcript = message.transcription?.text?.trim()
+  if (message.type === 'audio' && transcript) return `[áudio] ${transcript}`
+
+  // Mídia sem legenda não tem texto nenhum; marcar o tipo evita uma linha vazia sem explicação.
+  return message.content ?? message.caption ?? `<${message.type}>`
+}
+
+/**
+ * `Invalid Date` no arquivo é pior do que data ausente: parece dado corrompido e põe em dúvida o
+ * resto do transcript. E acontece de verdade — a rota de export do módulo devolve `createdAt`, não
+ * `sentAt`, então quem mapeia esperando `sentAt` recebe `undefined` aqui.
+ */
+function formatStamp(timestamp: string | undefined): string {
+  if (!timestamp) return 'data indisponível'
+
+  const parsed = new Date(timestamp)
+  return Number.isNaN(parsed.getTime()) ? 'data indisponível' : parsed.toLocaleString('pt-BR')
+}
+
 export function buildTranscriptFilename(whatsappNumber: string, generatedAt: Date): string {
   const stamp = generatedAt.toISOString().slice(0, 10)
   return `conversa-${whatsappNumber}-${stamp}.txt`

package/src/conversationWindow.ts

@@ -22,12 +22,14 @@ export const CONVERSATION_WINDOW = {
 } as const
 export type ConversationWindow = (typeof CONVERSATION_WINDOW)[keyof typeof CONVERSATION_WINDOW]
 
+// O tom pinta o próprio chip, em vez de uma bolinha ao lado do rótulo: a bolinha somava ~14px por
+// filtro e era o que fazia a fila de cinco quebrar em duas linhas na coluna da lista.
 export const WINDOW_FILTERS = [
-  { value: CONVERSATION_WINDOW.ALL, label: 'Todas', dotClass: '' },
-  { value: CONVERSATION_WINDOW.FRESH, label: '<12h', dotClass: 'bg-green-500' },
-  { value: CONVERSATION_WINDOW.WARNING, label: '12-21h', dotClass: 'bg-yellow-500' },
-  { value: CONVERSATION_WINDOW.CRITICAL, label: '21-24h', dotClass: 'bg-red-500' },
-  { value: CONVERSATION_WINDOW.EXPIRED, label: '>24h', dotClass: 'bg-gray-400' },
+  { value: CONVERSATION_WINDOW.ALL, label: 'Todas', tone: '' },
+  { value: CONVERSATION_WINDOW.FRESH, label: '<12h', tone: 'fresh' },
+  { value: CONVERSATION_WINDOW.WARNING, label: '12-21h', tone: 'warning' },
+  { value: CONVERSATION_WINDOW.CRITICAL, label: '21-24h', tone: 'critical' },
+  { value: CONVERSATION_WINDOW.EXPIRED, label: '>24h', tone: 'expired' },
 ] as const
 
 // Proporções da janela: 12h e 21h numa janela de 24h, mas expressas como fração para acompanharem

package/src/documentTypeLabel.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Guarda o rótulo de tipo da bolha de documento.
+ *
+ * O defeito que motivou: `mimeType.split('/')[1].toUpperCase()` transformava um `.docx` em
+ * `VND.OPENXMLFORMATS-OFFICEDOCUMENT.WORDPROCESSINGML.DOCUMENT` — 58 caracteres numa linha que não
+ * quebra, esticando a bolha até empurrar a coluna da conversa e estourar o layout de três painéis.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { documentTypeLabel } from './MediaRenderer'
+
+describe('documentTypeLabel', () => {
+  // O caso que quebrou a tela.
+  it('usa a extensão do arquivo em vez do subtipo gigante do Office', () => {
+    const rotulo = documentTypeLabel(
+      'contrato.docx',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+
+    expect(rotulo).toBe('DOCX')
+  })
+
+  it('serve para os tipos curtos também', () => {
+    expect(documentTypeLabel('nota-fiscal.pdf', 'application/pdf')).toBe('PDF')
+    expect(documentTypeLabel('lista.txt', 'text/plain')).toBe('TXT')
+  })
+
+  // Áudio e sticker chegam sem nome de arquivo: o rótulo vem do mimeType, ainda curto.
+  it('cai no sufixo do subtipo quando não há nome', () => {
+    expect(documentTypeLabel(undefined, 'application/vnd.ms-excel')).toBe('MS-EXCEL')
+    expect(documentTypeLabel(undefined, 'application/pdf')).toBe('PDF')
+  })
+
+  it('descarta parâmetro do mimeType', () => {
+    expect(documentTypeLabel(undefined, 'audio/ogg; codecs=opus')).toBe('OGG')
+  })
+
+  // Nome sem ponto não tem extensão — o id da mídia, por exemplo.
+  it('não confunde nome sem extensão com extensão', () => {
+    expect(documentTypeLabel('seed-media-03', 'application/zip')).toBe('ZIP')
+  })
+
+  it('tem rótulo para o caso sem nome e sem tipo', () => {
+    expect(documentTypeLabel()).toBe('FILE')
+  })
+
+  // Teto de tamanho: nenhum rótulo pode voltar a esticar a bolha.
+  it('nunca passa de 12 caracteres', () => {
+    const longo = documentTypeLabel(
+      undefined,
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    )
+
+    expect(longo.length).toBeLessThanOrEqual(12)
+  })
+})