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

package/src/InteractiveMessage.tsx

@@ -0,0 +1,126 @@
+/**
+ * Menu interativo do WhatsApp — botões de resposta rápida e lista de opções.
+ *
+ * A mensagem é gravada com o payload cru que foi enviado à Meta, então a UI apenas o desenha; não
+ * há segunda fonte de verdade sobre quais opções existiam naquele momento. Sem isto, mensagem
+ * `interactive` aparecia como texto solto e o menu simplesmente sumia da conversa — inclusive no
+ * simulador, onde o operador precisa ver exatamente o que o cliente vê.
+ *
+ * `onSelect` é opcional de propósito: no histórico da inbox as opções são leitura (o operador não
+ * responde no lugar do cliente); no simulador elas são clicáveis.
+ */
+
+import { useState } from 'react'
+import type { InteractiveOption, InteractivePayload, InteractiveSelection } from './types'
+import { cn } from './lib/cn'
+
+export interface InteractiveMessageLabels {
+  /** Fallback do rótulo do botão que abre a lista, quando o payload não traz um. */
+  openList: string
+}
+
+export const DEFAULT_INTERACTIVE_MESSAGE_LABELS: InteractiveMessageLabels = {
+  openList: 'Ver opções',
+}
+
+export interface InteractiveMessageProps {
+  payload: InteractivePayload
+  onSelect?: (selection: InteractiveSelection) => void
+  labels?: Partial<InteractiveMessageLabels>
+  className?: string
+}
+
+function collectRows(payload: InteractivePayload): InteractiveOption[] {
+  return (payload.action?.sections ?? []).flatMap((section) => section.rows ?? [])
+}
+
+function collectButtons(payload: InteractivePayload): InteractiveOption[] {
+  return (payload.action?.buttons ?? [])
+    .map((button) => button.reply)
+    .filter((reply): reply is InteractiveOption => reply !== undefined)
+}
+
+export function InteractiveMessage({ payload, onSelect, labels, className }: InteractiveMessageProps) {
+  const openListLabel = labels?.openList ?? DEFAULT_INTERACTIVE_MESSAGE_LABELS.openList
+  const [isListOpen, setIsListOpen] = useState(false)
+
+  const buttons = collectButtons(payload)
+  const sections = payload.action?.sections ?? []
+  const hasRows = collectRows(payload).length > 0
+  const isInteractable = onSelect !== undefined
+
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      {payload.header?.text ? (
+        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{payload.header.text}</p>
+      ) : null}
+
+      {payload.body?.text ? (
+        <p className="whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100">
+          {payload.body.text}
+        </p>
+      ) : null}
+
+      {payload.footer?.text ? (
+        <p className="text-xs text-gray-500 dark:text-gray-400">{payload.footer.text}</p>
+      ) : null}
+
+      {buttons.length > 0 ? (
+        <div className="mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700">
+          {buttons.map((button) => (
+            <button
+              key={button.id}
+              type="button"
+              disabled={!isInteractable}
+              onClick={() => onSelect?.({ kind: 'button', option: button })}
+              className="rounded-md px-3 py-1.5 text-sm font-medium text-teal-700 transition-colors enabled:hover:bg-teal-50 disabled:cursor-default dark:text-teal-300 dark:enabled:hover:bg-teal-900/30"
+            >
+              {button.title}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {hasRows ? (
+        <div className="mt-1 border-t border-gray-200 pt-1 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={() => setIsListOpen((open) => !open)}
+            aria-expanded={isListOpen}
+            className="w-full rounded-md px-3 py-1.5 text-sm font-medium text-teal-700 transition-colors hover:bg-teal-50 dark:text-teal-300 dark:hover:bg-teal-900/30"
+          >
+            ☰ {payload.action?.button ?? openListLabel}
+          </button>
+
+          {isListOpen ? (
+            <div className="mt-1 flex flex-col gap-1">
+              {sections.map((section, sectionIndex) => (
+                <div key={section.title ?? sectionIndex} className="flex flex-col">
+                  {section.title ? (
+                    <p className="px-3 py-1 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">
+                      {section.title}
+                    </p>
+                  ) : null}
+                  {(section.rows ?? []).map((row) => (
+                    <button
+                      key={row.id}
+                      type="button"
+                      disabled={!isInteractable}
+                      onClick={() => onSelect?.({ kind: 'list', option: row })}
+                      className="rounded-md px-3 py-1.5 text-left text-sm text-gray-900 transition-colors enabled:hover:bg-gray-100 disabled:cursor-default dark:text-gray-100 dark:enabled:hover:bg-gray-700"
+                    >
+                      <span className="block">{row.title}</span>
+                      {row.description ? (
+                        <span className="block text-xs text-gray-500 dark:text-gray-400">{row.description}</span>
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/MessageBubble.tsx

@@ -1,10 +1,11 @@
 import { useMemo, useState } from 'react'
 import { Check } from 'lucide-react'
-import type { MessagePayload } from './types'
+import type { InteractiveSelection, MessagePayload } from './types'
 import { useConversationLocales } from './ConversationLocalesProvider'
 import { StatusTicks } from './StatusTicks'
 import { MediaRenderer, type ResolveMediaUrl } from './MediaRenderer'
 import { Lightbox } from './Lightbox'
+import { InteractiveMessage } from './InteractiveMessage'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
 import { cn } from './lib/cn'
 import { createMediaUrlResolver } from './lib/createMediaUrlResolver'
@@ -24,6 +25,11 @@ export interface MessageBubbleProps {
    * `ConversationsProvider` — passe apenas para sobrescrever (cache próprio, CDN, proxy do host).
    */
   onResolveMediaUrl?: ResolveMediaUrl
+  /**
+   * Toque numa opção do menu interativo. Ausente, as opções aparecem desabilitadas — que é o certo
+   * no histórico da inbox: o operador vê o que foi oferecido, sem responder no lugar do cliente.
+   */
+  onInteractiveSelect?: (selection: InteractiveSelection) => void
   className?: string
 }
 
@@ -45,7 +51,7 @@ const MEDIA_TYPES = new Set(['image', 'audio', 'video', 'document', 'sticker'])
 // tailwind.config do host expondo as cores `whatsapp.*` — ver Wallpaper.tsx e T6.2.
 export function MessageBubble({
   message, isMine, senderName, isFirstInGroup = true, isSelecting = false, isSelected = false, onToggleSelect,
-  onResolveMediaUrl, className,
+  onResolveMediaUrl, onInteractiveSelect, className,
 }: MessageBubbleProps) {
   const { bubble, selection } = useConversationLocales()
   const [lightboxSrc, setLightboxSrc] = useState<string | null>(null)
@@ -64,6 +70,7 @@ export function MessageBubble({
   const hasError = message.status === 'failed'
   const isMedia = MEDIA_TYPES.has(message.type)
   const isTemplate = message.type === 'template'
+  const isInteractive = message.type === 'interactive'
   const displayName = message.sender === 'agent' && senderName ? senderName : bubble[message.sender] ?? message.sender
 
   const tooltipText = message.status === 'read' && message.readAt
@@ -132,6 +139,10 @@ export function MessageBubble({
 
         {isMedia ? (
           <MediaRenderer message={message} onLightbox={setLightboxSrc} onResolveUrl={resolveMediaUrl} />
+        ) : isInteractive && message.payload ? (
+          // O texto da mensagem interativa mora dentro do payload (`body.text`), e `content` guarda
+          // só uma cópia achatada para busca — renderizar `content` aqui duplicaria o corpo.
+          <InteractiveMessage payload={message.payload} onSelect={onInteractiveSelect} />
         ) : (
           <>
             {isTemplate && (

package/src/MessageComposer.tsx

@@ -35,8 +35,22 @@ export interface MessageComposerClassNames {
   field: string
 }
 
-// Paridade com financiamento-imobiliario-bot/apps/web/src/pages/ConversationsPage.tsx:1490
-const DEFAULT_ACCEPTED_FILE_TYPES = 'image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.zip'
+/**
+ * Exatamente o que a Meta aceita em mensagem de mídia — imagem, sticker, áudio, vídeo e a lista
+ * fechada de documentos. Oferecer no seletor um formato que o WhatsApp recusa (`.zip`, `.rtf`)
+ * empurra a falha para depois do envio, quando já não dá para explicar ao operador o que houve.
+ * Produto com regra própria passa `acceptedFileTypes`.
+ */
+export const DEFAULT_ACCEPTED_FILE_TYPES = [
+  'image/jpeg,image/png,image/webp',
+  'audio/aac,audio/mp4,audio/mpeg,audio/amr,audio/ogg',
+  'video/mp4,video/3gpp',
+  'application/pdf,text/plain,text/csv',
+  'application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+].join(',')
 
 interface FilePreview {
   file: File

package/src/emojiCatalog.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test'
+import { EMOJI_CATEGORIES, searchEmojis } from './emojiCatalog'
+
+describe('searchEmojis', () => {
+  it('devolve o catálogo inteiro quando não há termo', () => {
+    const total = EMOJI_CATEGORIES.reduce((sum, category) => sum + category.entries.length, 0)
+    expect(searchEmojis('').length).toBe(total)
+    expect(searchEmojis('   ').length).toBe(total)
+  })
+
+  it('acha pela palavra sem acento e com acento', () => {
+    const semAcento = searchEmojis('coracao').map((entry) => entry.emoji)
+    const comAcento = searchEmojis('coração').map((entry) => entry.emoji)
+
+    expect(semAcento).toContain('❤️')
+    expect(comAcento).toContain('❤️')
+  })
+
+  it('ignora caixa e casa por prefixo, não pelo meio da palavra', () => {
+    expect(searchEmojis('CASA').map((entry) => entry.emoji)).toContain('🏠')
+    // "sa" está dentro de "casa", mas não é prefixo de nenhuma palavra-chave dela.
+    expect(searchEmojis('sa').map((entry) => entry.emoji)).not.toContain('🏠')
+  })
+
+  it('atravessa categorias, não só a aberta', () => {
+    const resultados = searchEmojis('pagamento').map((entry) => entry.emoji)
+
+    expect(resultados).toContain('💳')
+    expect(resultados.length).toBeGreaterThan(1)
+  })
+
+  it('devolve vazio quando nada casa, em vez de cair no catálogo inteiro', () => {
+    expect(searchEmojis('xyzabc')).toEqual([])
+  })
+})

package/src/emojiCatalog.ts

@@ -0,0 +1,189 @@
+/**
+ * Catálogo de emojis com palavras-chave em português, usado pela busca do seletor.
+ *
+ * Fica em módulo próprio (e não dentro do `EmojiPicker`) porque a busca precisa varrer TODAS as
+ * categorias, não só a aberta — o índice é montado uma vez, no carregamento, e não a cada tecla.
+ *
+ * As palavras-chave são de busca, não legendas: incluem sinônimos e formas sem acento, porque quem
+ * digita rápido escreve "coracao" e "polegar" com a mesma frequência que a forma correta.
+ */
+
+export type EmojiEntry = {
+  readonly emoji: string
+  readonly keywords: readonly string[]
+}
+
+export type EmojiCategory = {
+  readonly name: string
+  readonly entries: readonly EmojiEntry[]
+}
+
+export const EMOJI_CATEGORIES: readonly EmojiCategory[] = [
+  {
+    name: 'Smileys',
+    entries: [
+      { emoji: '😀', keywords: ['sorriso', 'feliz', 'alegre'] },
+      { emoji: '😃', keywords: ['sorriso', 'feliz', 'animado'] },
+      { emoji: '😄', keywords: ['sorriso', 'feliz', 'risada'] },
+      { emoji: '😁', keywords: ['sorriso', 'dentes', 'feliz'] },
+      { emoji: '😅', keywords: ['alivio', 'alívio', 'suor', 'nervoso'] },
+      { emoji: '😂', keywords: ['risada', 'chorando', 'engracado', 'engraçado'] },
+      { emoji: '🤣', keywords: ['risada', 'rolando', 'engracado', 'engraçado'] },
+      { emoji: '😊', keywords: ['sorriso', 'timido', 'tímido', 'feliz'] },
+      { emoji: '😇', keywords: ['anjo', 'inocente', 'santo'] },
+      { emoji: '🙂', keywords: ['sorriso', 'leve', 'ok'] },
+      { emoji: '😉', keywords: ['piscada', 'piscar', 'flerte'] },
+      { emoji: '😌', keywords: ['aliviado', 'calmo', 'tranquilo'] },
+      { emoji: '😍', keywords: ['amor', 'apaixonado', 'coracao', 'coração', 'olhos'] },
+      { emoji: '🥰', keywords: ['amor', 'apaixonado', 'carinho'] },
+      { emoji: '😘', keywords: ['beijo', 'amor', 'carinho'] },
+      { emoji: '😋', keywords: ['gostoso', 'delicia', 'delícia', 'lingua', 'língua'] },
+      { emoji: '😜', keywords: ['lingua', 'língua', 'brincadeira', 'piscada'] },
+      { emoji: '🤪', keywords: ['maluco', 'doido', 'brincadeira'] },
+      { emoji: '🤔', keywords: ['pensando', 'duvida', 'dúvida', 'hmm'] },
+      { emoji: '🤗', keywords: ['abraco', 'abraço', 'carinho'] },
+      { emoji: '😐', keywords: ['neutro', 'serio', 'sério', 'indiferente'] },
+      { emoji: '😴', keywords: ['dormindo', 'sono', 'cansado'] },
+      { emoji: '😭', keywords: ['chorando', 'triste', 'lagrima', 'lágrima'] },
+      { emoji: '😢', keywords: ['triste', 'chorando', 'lagrima', 'lágrima'] },
+      { emoji: '😡', keywords: ['raiva', 'bravo', 'irritado'] },
+      { emoji: '😱', keywords: ['susto', 'medo', 'assustado'] },
+      { emoji: '🤯', keywords: ['explodindo', 'chocado', 'surpresa'] },
+      { emoji: '😎', keywords: ['oculos', 'óculos', 'legal', 'estiloso'] },
+      { emoji: '🥳', keywords: ['festa', 'comemorar', 'aniversario', 'aniversário'] },
+      { emoji: '😷', keywords: ['mascara', 'máscara', 'doente', 'saude', 'saúde'] },
+    ],
+  },
+  {
+    name: 'Gestos',
+    entries: [
+      { emoji: '👍', keywords: ['joia', 'jóia', 'polegar', 'ok', 'positivo', 'curtir'] },
+      { emoji: '👎', keywords: ['polegar', 'negativo', 'ruim', 'nao', 'não'] },
+      { emoji: '👌', keywords: ['ok', 'certo', 'perfeito'] },
+      { emoji: '✌️', keywords: ['paz', 'vitoria', 'vitória', 'dois'] },
+      { emoji: '🤞', keywords: ['sorte', 'dedos', 'cruzados', 'torcendo'] },
+      { emoji: '🤙', keywords: ['chama', 'ligar', 'shaka'] },
+      { emoji: '👋', keywords: ['tchau', 'ola', 'olá', 'aceno', 'oi'] },
+      { emoji: '✋', keywords: ['mao', 'mão', 'parar', 'pare'] },
+      { emoji: '👏', keywords: ['palmas', 'aplauso', 'parabens', 'parabéns'] },
+      { emoji: '🙌', keywords: ['comemorar', 'maos', 'mãos', 'sucesso'] },
+      { emoji: '🤝', keywords: ['acordo', 'aperto', 'mao', 'mão', 'negocio', 'negócio', 'parceria'] },
+      { emoji: '🙏', keywords: ['obrigado', 'reza', 'oracao', 'oração', 'por favor'] },
+      { emoji: '✍️', keywords: ['escrever', 'assinar', 'assinatura'] },
+      { emoji: '💪', keywords: ['forca', 'força', 'musculo', 'músculo', 'braco', 'braço'] },
+      { emoji: '👇', keywords: ['abaixo', 'baixo', 'apontar', 'seta'] },
+      { emoji: '👉', keywords: ['direita', 'apontar', 'seta'] },
+      { emoji: '☝️', keywords: ['acima', 'cima', 'apontar', 'atencao', 'atenção'] },
+    ],
+  },
+  {
+    name: 'Corações',
+    entries: [
+      { emoji: '❤️', keywords: ['coracao', 'coração', 'amor', 'vermelho'] },
+      { emoji: '🧡', keywords: ['coracao', 'coração', 'laranja'] },
+      { emoji: '💛', keywords: ['coracao', 'coração', 'amarelo'] },
+      { emoji: '💚', keywords: ['coracao', 'coração', 'verde'] },
+      { emoji: '💙', keywords: ['coracao', 'coração', 'azul'] },
+      { emoji: '💜', keywords: ['coracao', 'coração', 'roxo'] },
+      { emoji: '🖤', keywords: ['coracao', 'coração', 'preto'] },
+      { emoji: '🤍', keywords: ['coracao', 'coração', 'branco'] },
+      { emoji: '💔', keywords: ['coracao', 'coração', 'partido', 'triste'] },
+      { emoji: '💕', keywords: ['coracao', 'coração', 'amor', 'casal'] },
+      { emoji: '💖', keywords: ['coracao', 'coração', 'brilho', 'amor'] },
+      { emoji: '💝', keywords: ['coracao', 'coração', 'presente', 'laco', 'laço'] },
+    ],
+  },
+  {
+    name: 'Negócios',
+    entries: [
+      { emoji: '🏠', keywords: ['casa', 'imovel', 'imóvel', 'residencia', 'residência', 'moradia'] },
+      { emoji: '🏡', keywords: ['casa', 'imovel', 'imóvel', 'jardim', 'moradia'] },
+      { emoji: '🏢', keywords: ['predio', 'prédio', 'empresa', 'escritorio', 'escritório'] },
+      { emoji: '🏦', keywords: ['banco', 'financiamento', 'agencia', 'agência'] },
+      { emoji: '🔑', keywords: ['chave', 'casa', 'entrega', 'imovel', 'imóvel'] },
+      { emoji: '📄', keywords: ['documento', 'papel', 'contrato', 'arquivo'] },
+      { emoji: '📋', keywords: ['prancheta', 'lista', 'documento', 'checklist'] },
+      { emoji: '📝', keywords: ['anotar', 'escrever', 'nota', 'formulario', 'formulário'] },
+      { emoji: '✅', keywords: ['ok', 'certo', 'aprovado', 'concluido', 'concluído', 'check'] },
+      { emoji: '❌', keywords: ['errado', 'negado', 'recusado', 'cancelar'] },
+      { emoji: '⚠️', keywords: ['atencao', 'atenção', 'alerta', 'cuidado'] },
+      { emoji: '💰', keywords: ['dinheiro', 'valor', 'saco', 'grana', 'pagamento'] },
+      { emoji: '💵', keywords: ['dinheiro', 'nota', 'valor', 'pagamento'] },
+      { emoji: '💳', keywords: ['cartao', 'cartão', 'credito', 'crédito', 'pagamento'] },
+      { emoji: '🧾', keywords: ['recibo', 'nota', 'fiscal', 'comprovante'] },
+      { emoji: '📊', keywords: ['grafico', 'gráfico', 'relatorio', 'relatório', 'dados'] },
+      { emoji: '📈', keywords: ['grafico', 'gráfico', 'subindo', 'crescimento', 'alta'] },
+      { emoji: '📉', keywords: ['grafico', 'gráfico', 'caindo', 'queda', 'baixa'] },
+      { emoji: '🗓️', keywords: ['calendario', 'calendário', 'data', 'agenda', 'prazo'] },
+      { emoji: '⏰', keywords: ['relogio', 'relógio', 'hora', 'prazo', 'alarme'] },
+      { emoji: '📞', keywords: ['telefone', 'ligar', 'contato', 'chamada'] },
+      { emoji: '📱', keywords: ['celular', 'telefone', 'whatsapp', 'contato'] },
+      { emoji: '📧', keywords: ['email', 'e-mail', 'mensagem', 'contato'] },
+      { emoji: '📎', keywords: ['anexo', 'clipe', 'arquivo'] },
+      { emoji: '🔍', keywords: ['buscar', 'procurar', 'lupa', 'pesquisa', 'consulta'] },
+      { emoji: '🤖', keywords: ['robo', 'robô', 'bot', 'assistente', 'automatico', 'automático'] },
+      { emoji: '💬', keywords: ['mensagem', 'conversa', 'balao', 'balão', 'chat'] },
+    ],
+  },
+  {
+    name: 'Objetos',
+    entries: [
+      { emoji: '🎁', keywords: ['presente', 'brinde', 'surpresa'] },
+      { emoji: '🎉', keywords: ['festa', 'comemorar', 'parabens', 'parabéns'] },
+      { emoji: '🎊', keywords: ['festa', 'confete', 'comemorar'] },
+      { emoji: '🎂', keywords: ['bolo', 'aniversario', 'aniversário', 'festa'] },
+      { emoji: '💡', keywords: ['ideia', 'ideía', 'lampada', 'lâmpada', 'dica'] },
+      { emoji: '🔔', keywords: ['sino', 'aviso', 'notificacao', 'notificação', 'lembrete'] },
+      { emoji: '⭐', keywords: ['estrela', 'favorito', 'avaliacao', 'avaliação'] },
+      { emoji: '🔥', keywords: ['fogo', 'quente', 'destaque', 'top'] },
+      { emoji: '🚀', keywords: ['foguete', 'rapido', 'rápido', 'lancamento', 'lançamento'] },
+      { emoji: '💻', keywords: ['computador', 'notebook', 'trabalho'] },
+      { emoji: '📷', keywords: ['foto', 'camera', 'câmera', 'imagem'] },
+      { emoji: '🚗', keywords: ['carro', 'veiculo', 'veículo', 'automovel', 'automóvel'] },
+      { emoji: '✈️', keywords: ['aviao', 'avião', 'viagem', 'voo'] },
+    ],
+  },
+  {
+    name: 'Comida',
+    entries: [
+      { emoji: '🍔', keywords: ['hamburguer', 'hambúrguer', 'lanche', 'comida'] },
+      { emoji: '🍕', keywords: ['pizza', 'comida', 'lanche'] },
+      { emoji: '🍟', keywords: ['batata', 'frita', 'lanche'] },
+      { emoji: '🍿', keywords: ['pipoca', 'cinema', 'filme'] },
+      { emoji: '🍞', keywords: ['pao', 'pão', 'padaria'] },
+      { emoji: '🧀', keywords: ['queijo', 'comida'] },
+      { emoji: '🥗', keywords: ['salada', 'saudavel', 'saudável', 'comida'] },
+      { emoji: '☕', keywords: ['cafe', 'café', 'bebida', 'quente'] },
+      { emoji: '🍺', keywords: ['cerveja', 'bebida', 'chopp'] },
+      { emoji: '🍷', keywords: ['vinho', 'bebida', 'taca', 'taça'] },
+      { emoji: '🥂', keywords: ['brinde', 'comemorar', 'champanhe'] },
+      { emoji: '🥤', keywords: ['refrigerante', 'bebida', 'copo'] },
+    ],
+  },
+] as const
+
+/**
+ * Índice achatado: a busca ignora categoria, porque quem digita "casa" quer o resultado venha de
+ * onde vier. A ordem preserva a das categorias, então o resultado sai agrupado por afinidade sem
+ * precisar ordenar.
+ */
+const ALL_ENTRIES: readonly EmojiEntry[] = EMOJI_CATEGORIES.flatMap((category) => category.entries)
+
+function normalize(value: string): string {
+  return value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .trim()
+}
+
+/**
+ * Busca por prefixo de palavra-chave, não por substring: "ca" traz "casa" e "cartão", mas "sa" não
+ * traz "casa" — casar no meio da palavra devolvia resultado que ninguém consegue explicar.
+ */
+export function searchEmojis(query: string): readonly EmojiEntry[] {
+  const term = normalize(query)
+  if (!term) return ALL_ENTRIES
+
+  return ALL_ENTRIES.filter((entry) => entry.keywords.some((keyword) => normalize(keyword).startsWith(term)))
+}

package/src/index.ts

@@ -1,9 +1,11 @@
 export { MessageBubble } from './MessageBubble'
+export { InteractiveMessage, DEFAULT_INTERACTIVE_MESSAGE_LABELS } from './InteractiveMessage'
 export { ConversationWallpaper } from './Wallpaper'
 export { ConversationLocalesProvider, useConversationLocales } from './ConversationLocalesProvider'
 export { AudioPlayer } from './AudioPlayer'
-export { EmojiPicker } from './EmojiPicker'
-export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS } from './MessageComposer'
+export { EmojiPicker, DEFAULT_EMOJI_PICKER_LABELS } from './EmojiPicker'
+export { EMOJI_CATEGORIES, searchEmojis } from './emojiCatalog'
+export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
 export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
@@ -114,6 +116,7 @@ export { formatPhone, phoneInitials } from './lib/phone'
 export { formatTimestamp, formatFileSize, formatDateTime, isSameDay } from './lib/format'
 
 export type { MessagePayload, ConversationsUIConfig, ConversationsTheme, ConversationsFeatures } from './types'
+export type { InteractivePayload, InteractiveSection, InteractiveOption, InteractiveSelection } from './types'
 export type {
   ConversationsApi,
   SSEProvider,
@@ -134,7 +137,9 @@ export type { MessageBubbleProps } from './MessageBubble'
 export type { ConversationWallpaperProps } from './Wallpaper'
 export type { ConversationLocales, ConversationLocalesProviderProps } from './ConversationLocalesProvider'
 export type { AudioPlayerProps } from './AudioPlayer'
-export type { EmojiPickerProps } from './EmojiPicker'
+export type { EmojiPickerProps, EmojiPickerLabels } from './EmojiPicker'
+export type { EmojiEntry, EmojiCategory } from './emojiCatalog'
+export type { InteractiveMessageProps, InteractiveMessageLabels } from './InteractiveMessage'
 export type { MessageComposerProps, MessageComposerClassNames, MessageComposerLabels } from './MessageComposer'
 export type { WhatsAppMessageEditorProps, WhatsAppMessageEditorLabels } from './WhatsAppMessageEditor'
 export type { SimpleEmojiPickerProps } from './SimpleEmojiPicker'
@@ -175,3 +180,4 @@ export type { UseConversationDocumentsParams, UseConversationDocumentsResult } f
 export type { ConversationRealtimeHandler } from './hooks/useConversationRealtime'
 export type { AsyncResourceState } from './hooks/useAsyncResource'
 export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
+export type { ConversationHeaderUtility } from './ConversationHeader'

package/src/preview/AudioRecorderButton.tsx

@@ -0,0 +1,117 @@
+/**
+ * Gravação de áudio no simulador, pelo microfone do próprio navegador.
+ *
+ * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
+ * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
+ *
+ * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
+ * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
+ */
+
+import { useCallback, useRef, useState } from 'react'
+
+export interface AudioRecorderButtonLabels {
+  start: string
+  stop: string
+  unsupported: string
+  denied: string
+}
+
+export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
+  start: 'Gravar áudio',
+  stop: 'Parar gravação',
+  unsupported: 'Este navegador não grava áudio.',
+  denied: 'Sem permissão para usar o microfone.',
+}
+
+export interface AudioRecorderButtonProps {
+  onRecorded: (file: File) => void | Promise<void>
+  onFailure?: (message: string) => void
+  labels?: Partial<AudioRecorderButtonLabels>
+  disabled?: boolean
+}
+
+/**
+ * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
+ * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
+ * do envio que o formato é inválido é pior do que gravar já no formato certo.
+ */
+const RECORDING_FORMATS = [
+  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
+  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
+  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
+] as const
+
+export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
+
+/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
+export function resolveRecordingFormat(): RecordingFormat | undefined {
+  if (typeof MediaRecorder === 'undefined') return undefined
+  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
+  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
+}
+
+export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }: AudioRecorderButtonProps) {
+  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start
+  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop
+  const [isRecording, setIsRecording] = useState(false)
+  const recorderRef = useRef<MediaRecorder | null>(null)
+
+  const stop = useCallback(() => {
+    recorderRef.current?.stop()
+  }, [])
+
+  const start = useCallback(async () => {
+    const format = resolveRecordingFormat()
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported)
+      return
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType })
+      const chunks: Blob[] = []
+
+      recorder.addEventListener('dataavailable', (event) => {
+        if (event.data.size > 0) chunks.push(event.data)
+      })
+      recorder.addEventListener('stop', () => {
+        // Solta o microfone assim que para: sem isto o indicador de gravação do navegador fica
+        // aceso depois do envio, e o operador acha que o simulador continua ouvindo.
+        stream.getTracks().forEach((track) => track.stop())
+        setIsRecording(false)
+        recorderRef.current = null
+        // O `File` sai com o MIME sem os parâmetros de codec: `audio/ogg;codecs=opus` serve ao
+        // gravador, mas quem valida upload compara com `audio/ogg` puro.
+        const blob = new Blob(chunks, { type: format.uploadMimeType })
+        void onRecorded(
+          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType }),
+        )
+      })
+
+      recorderRef.current = recorder
+      recorder.start()
+      setIsRecording(true)
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
+    }
+  }, [labels?.denied, labels?.unsupported, onFailure, onRecorded])
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => (isRecording ? stop() : void start())}
+      title={isRecording ? stopLabel : startLabel}
+      aria-label={isRecording ? stopLabel : startLabel}
+      aria-pressed={isRecording}
+      className={`flex h-9 w-9 items-center justify-center rounded-full transition-colors ${
+        isRecording ? 'bg-red-100 text-red-600 dark:bg-red-900/40' : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'
+      }`}
+    >
+      {isRecording ? '■' : '🎤'}
+    </button>
+  )
+}