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

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.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationWallpaper } from './Wallpaper'
+
+describe('ConversationWallpaper', () => {
+  it('desenha o fundo sozinho, sem depender do styles.css do host', () => {
+    const markup = renderToStaticMarkup(<ConversationWallpaper />)
+
+    expect(markup).toContain('background-color:#efeae2')
+    expect(markup).toContain('background-image:url(&quot;data:image/svg+xml,')
+    expect(markup).toContain('cv-wallpaper')
+  })
+
+  it('deixa o produto sobrescrever o fundo por style', () => {
+    const markup = renderToStaticMarkup(<ConversationWallpaper style={{ backgroundColor: '#123456' }} />)
+
+    expect(markup).toContain('background-color:#123456')
+    expect(markup).not.toContain('background-color:#efeae2')
+  })
+})

package/src/Wallpaper.tsx

@@ -1,15 +1,75 @@
-import type { ReactNode } from 'react'
+/**
+ * Fundo da conversa — a textura clara/escura do WhatsApp.
+ *
+ * O fundo vem embutido, e não da folha de estilo do pacote: `styles.css` é um import opcional que o
+ * host precisa lembrar de fazer, e esquecê-lo deixava a conversa sobre branco liso, sem erro nenhum
+ * para denunciar o problema. Fundo é identidade do componente, não tema do host.
+ *
+ * A classe `cv-wallpaper` continua no elemento para quem já sobrescreve por CSS.
+ */
+
+import { forwardRef, type CSSProperties, type ReactNode, type UIEvent } from 'react'
 
 import { cn } from './lib/cn'
+import { useIsDarkTheme } from './useDarkMode'
+
+/** Textura do WhatsApp: rabiscos esparsos que se repetem a cada 100px. */
+function doodlePattern(strokeColor: string, opacity: number): string {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>` +
+    `<g fill='none' stroke='${strokeColor}' stroke-width='1.2' opacity='${opacity}'>` +
+    `<circle cx='15' cy='15' r='3'/><path d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/>` +
+    `<circle cx='70' cy='28' r='2'/><path d='M18 55 l6 6 m-6 0 l6 -6'/>` +
+    `<circle cx='55' cy='68' r='2.5'/><path d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/>` +
+    `<circle cx='8' cy='85' r='2'/><path d='M65 90 l5 5 m-5 0 l5 -5'/>` +
+    `</g></svg>`
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`
+}
+
+const LIGHT_WALLPAPER: CSSProperties = {
+  backgroundColor: '#efeae2',
+  backgroundImage: doodlePattern('#d7cfc0', 0.7),
+  backgroundRepeat: 'repeat',
+  backgroundSize: '100px 100px',
+}
+
+const DARK_WALLPAPER: CSSProperties = {
+  backgroundColor: '#0b141a',
+  backgroundImage: doodlePattern('#19232a', 0.9),
+  backgroundRepeat: 'repeat',
+  backgroundSize: '100px 100px',
+}
 
 export interface ConversationWallpaperProps {
   children?: ReactNode
   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
 }
 
-// Requer o import de '@adatechnology/conversations-ui/styles.css' uma vez no host —
-// a classe `.cv-wallpaper` (e sua variante `.dark`) vive nesse stylesheet, não em CSS-in-JS,
-// para não depender da configuração de Tailwind do consumidor.
-export function ConversationWallpaper({ children, className }: ConversationWallpaperProps) {
-  return <div className={cn('cv-wallpaper', className)}>{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

@@ -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} data-cv-tooltip={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} data-cv-tooltip={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} data-cv-tooltip={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}`}
+                data-cv-tooltip={editorLabels.insertPlaceholder(token)} aria-label={editorLabels.insertPlaceholder(token)}
               >
                 {token}
               </button>
@@ -131,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/audioRecorderFormat.test.ts

@@ -0,0 +1,67 @@
+import { afterEach, describe, expect, it } from 'bun:test'
+
+import { resolveRecordingFormat } from './AudioRecorderButton'
+import { DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
+
+const originalMediaRecorder = (globalThis as Record<string, unknown>).MediaRecorder
+
+function stubMediaRecorder(supported: readonly string[] | undefined): void {
+  const stub = supported ? { isTypeSupported: (mimeType: string) => supported.includes(mimeType) } : {}
+  ;(globalThis as Record<string, unknown>).MediaRecorder = stub
+}
+
+afterEach(() => {
+  ;(globalThis as Record<string, unknown>).MediaRecorder = originalMediaRecorder
+})
+
+describe('resolveRecordingFormat', () => {
+  it('prefere ogg/opus, que o WhatsApp aceita, sobre webm', () => {
+    stubMediaRecorder(['audio/ogg;codecs=opus', 'audio/webm'])
+
+    expect(resolveRecordingFormat()?.uploadMimeType).toBe('audio/ogg')
+  })
+
+  it('cai para mp4 no navegador que não grava ogg', () => {
+    stubMediaRecorder(['audio/mp4', 'audio/webm'])
+
+    const format = resolveRecordingFormat()
+    expect(format?.uploadMimeType).toBe('audio/mp4')
+    expect(format?.extension).toBe('m4a')
+  })
+
+  it('devolve indefinido quando o navegador não grava nenhum formato', () => {
+    stubMediaRecorder([])
+
+    expect(resolveRecordingFormat()).toBeUndefined()
+  })
+
+  it('devolve indefinido sem MediaRecorder no ambiente', () => {
+    ;(globalThis as Record<string, unknown>).MediaRecorder = undefined
+
+    expect(resolveRecordingFormat()).toBeUndefined()
+  })
+})
+
+describe('DEFAULT_ACCEPTED_FILE_TYPES', () => {
+  it('cobre Word, Excel e PowerPoint nos dois formatos, legado e OpenXML', () => {
+    const accepted = DEFAULT_ACCEPTED_FILE_TYPES.split(',')
+
+    expect(accepted).toContain('application/msword')
+    expect(accepted).toContain('application/vnd.openxmlformats-officedocument.wordprocessingml.document')
+    expect(accepted).toContain('application/vnd.ms-excel')
+    expect(accepted).toContain('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+    expect(accepted).toContain('application/vnd.ms-powerpoint')
+    expect(accepted).toContain('application/vnd.openxmlformats-officedocument.presentationml.presentation')
+  })
+
+  it('cobre texto, PDF, áudio e vídeo, e não oferece formato que o WhatsApp recusa', () => {
+    const accepted = DEFAULT_ACCEPTED_FILE_TYPES.split(',')
+
+    expect(accepted).toContain('application/pdf')
+    expect(accepted).toContain('text/plain')
+    expect(accepted).toContain('audio/ogg')
+    expect(accepted).toContain('video/mp4')
+    expect(DEFAULT_ACCEPTED_FILE_TYPES).not.toContain('.zip')
+    expect(DEFAULT_ACCEPTED_FILE_TYPES).not.toContain('.rtf')
+  })
+})

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')
+  })
 })