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

package/src/EmojiPicker.tsx

@@ -1,39 +1,27 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useMemo } from 'react'
+import { EMOJI_CATEGORIES, searchEmojis, type EmojiEntry } from './emojiCatalog'
+
+export interface EmojiPickerLabels {
+  search: string
+  noResults: string
+}
+
+export const DEFAULT_EMOJI_PICKER_LABELS: EmojiPickerLabels = {
+  search: 'Buscar emoji',
+  noResults: 'Nenhum emoji encontrado',
+}
 
 export interface EmojiPickerProps {
   onSelect: (emoji: string) => void
+  labels?: Partial<EmojiPickerLabels>
   className?: string
 }
 
-const EMOJI_CATEGORIES: { name: string; emojis: string[] }[] = [
-  {
-    name: 'Smileys',
-    emojis: ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '😉', '😌', '😍', '🥰', '😘', '😗', '😋', '😛', '😜', '🤪'],
-  },
-  {
-    name: 'Gestures',
-    emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '🤝', '🙏', '✍️', '💅', '🤳'],
-  },
-  {
-    name: 'Hearts',
-    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '♥️'],
-  },
-  {
-    name: 'Food',
-    emojis: ['🍔', '🍟', '🍕', '🌭', '🍿', '🧂', '🥓', '🥚', '🍳', '🧇', '🥞', '🧈', '🍞', '🥐', '🥨', '🥯', '🥖', '🧀', '🥗', '🥙'],
-  },
-  {
-    name: 'Drinks',
-    emojis: ['☕', '🍵', '🍶', '🍾', '🍷', '🍸', '🍹', '🍺', '🍻', '🥂', '🥃', '🥤', '🧋', '🧃', '🧉', '🧊', '🥢', '🍽️', '🍴', '🥄'],
-  },
-  {
-    name: 'Objects',
-    emojis: ['🎁', '🎂', '🎈', '🎉', '🎊', '🎀', '📱', '💻', '⌚', '📷', '🔑', '💰', '💳', '📝', '📌', '📍', '✂️', '🔍', '💡', '🔔'],
-  },
-]
-
-export const EmojiPicker = ({ onSelect, className = '' }: EmojiPickerProps) => {
+export const EmojiPicker = ({ onSelect, labels, className = '' }: EmojiPickerProps) => {
+  const searchLabel = labels?.search ?? DEFAULT_EMOJI_PICKER_LABELS.search
+  const noResultsLabel = labels?.noResults ?? DEFAULT_EMOJI_PICKER_LABELS.noResults
   const [activeCategory, setActiveCategory] = useState(0)
+  const [query, setQuery] = useState('')
 
   const handleSelect = useCallback(
     (emoji: string) => {
@@ -42,36 +30,62 @@ export const EmojiPicker = ({ onSelect, className = '' }: EmojiPickerProps) => {
     [onSelect],
   )
 
+  // Buscando, as abas de categoria saem do caminho: o resultado atravessa todas elas, e manter uma
+  // aba destacada sugeriria que a busca está restrita àquela categoria.
+  const isSearching = query.trim().length > 0
+  const visibleEntries: readonly EmojiEntry[] = useMemo(
+    () => (isSearching ? searchEmojis(query) : EMOJI_CATEGORIES[activeCategory].entries),
+    [isSearching, query, activeCategory],
+  )
+
   return (
     <div className={`bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`}>
-      <div className="flex border-b border-gray-200 overflow-x-auto">
-        {EMOJI_CATEGORIES.map((category, index) => (
-          <button
-            key={category.name}
-            onClick={() => setActiveCategory(index)}
-            className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
-              activeCategory === index
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            {category.emojis[0]} {category.name}
-          </button>
-        ))}
+      <div className="p-2 border-b border-gray-200">
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder={searchLabel}
+          aria-label={searchLabel}
+          className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm outline-none focus:border-blue-500"
+        />
       </div>
 
-      <div className="grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto">
-        {EMOJI_CATEGORIES[activeCategory].emojis.map((emoji) => (
-          <button
-            key={emoji}
-            onClick={() => handleSelect(emoji)}
-            className="w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer"
-            aria-label={emoji}
-          >
-            {emoji}
-          </button>
-        ))}
-      </div>
+      {isSearching ? null : (
+        <div className="flex border-b border-gray-200 overflow-x-auto">
+          {EMOJI_CATEGORIES.map((category, index) => (
+            <button
+              key={category.name}
+              onClick={() => setActiveCategory(index)}
+              className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
+                activeCategory === index
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {category.entries[0].emoji} {category.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {visibleEntries.length === 0 ? (
+        <p className="px-3 py-6 text-center text-sm text-gray-500">{noResultsLabel}</p>
+      ) : (
+        <div className="grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto">
+          {visibleEntries.map((entry) => (
+            <button
+              key={entry.emoji}
+              onClick={() => handleSelect(entry.emoji)}
+              className="w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer"
+              aria-label={entry.emoji}
+              title={entry.keywords[0]}
+            >
+              {entry.emoji}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

package/src/FileIcon.test.ts

@@ -33,6 +33,51 @@ describe('resolveFileIconExtension', () => {
   })
 
   it('devolve algo fora do mapa para tipo desconhecido, caindo no ícone genérico', () => {
-    expect(resolveFileIconExtension('lista-compras.txt', 'text/plain')).toBe('plain')
+    expect(resolveFileIconExtension('backup', 'application/octet-stream')).toBe('octet-stream')
+  })
+
+  // Imagem, vídeo e áudio entram na biblioteca junto dos documentos — o backend linka as cinco
+  // espécies de mídia (image/audio/video/document/sticker), não só `document`.
+  const MEDIA_TYPES = [
+    { filename: 'foto.jpg', mimeType: 'image/jpeg', expected: 'jpg' },
+    { filename: 'prateleira.png', mimeType: 'image/png', expected: 'png' },
+    { filename: 'video-do-produto.mp4', mimeType: 'video/mp4', expected: 'mp4' },
+    { filename: 'antigo.3gp', mimeType: 'video/3gp', expected: '3gp' },
+    { filename: 'musica.mp3', mimeType: 'audio/mpeg', expected: 'mp3' },
+    { filename: 'recado.m4a', mimeType: 'audio/mp4', expected: 'm4a' },
+    { filename: 'lista-compras.txt', mimeType: 'text/plain', expected: 'txt' },
+    { filename: 'planilha.csv', mimeType: 'text/csv', expected: 'csv' },
+    {
+      filename: 'apresentacao.pptx',
+      mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      expected: 'pptx',
+    },
+  ]
+
+  for (const testCase of MEDIA_TYPES) {
+    it(`resolve ${testCase.expected}`, () => {
+      expect(resolveFileIconExtension(testCase.filename, testCase.mimeType)).toBe(testCase.expected)
+    })
+  }
+
+  // Áudio e sticker chegam da Meta sem nome de arquivo: o backend salva o id da mídia como rótulo,
+  // então a única pista de tipo é o mimeType.
+  it('resolve pela família quando o nome é o id da mídia, sem extensão', () => {
+    expect(resolveFileIconExtension('wamid-abc123', 'image/webp')).toBe('image')
+    expect(resolveFileIconExtension('wamid-abc123', 'video/mp4')).toBe('video')
+    expect(resolveFileIconExtension('wamid-abc123', 'audio/aac')).toBe('audio')
+  })
+
+  // `audio/ogg; codecs=opus` é o formato do áudio de WhatsApp. Com o parâmetro colado, o subtipo
+  // viria "ogg; codecs=opus" e o áudio cairia no ícone genérico.
+  it('descarta parâmetro do mimeType', () => {
+    expect(resolveFileIconExtension('wamid-audio', 'audio/ogg; codecs=opus')).toBe('audio')
+  })
+
+  // Pelo subtipo, `audio/mp4` casaria a chave `mp4` — que é vídeo. A família vem primeiro
+  // justamente para um m4a não aparecer com ícone de filme.
+  it('não confunde audio/mp4 com vídeo', () => {
+    expect(resolveFileIconExtension(undefined, 'audio/mp4')).toBe('audio')
+    expect(resolveFileIconExtension(undefined, 'video/mp4')).toBe('video')
   })
 })

package/src/FileIcon.tsx

@@ -1,4 +1,13 @@
-import { FileArchive, FileSpreadsheet, FileText, File as FileGeneric } from 'lucide-react'
+import {
+  FileArchive,
+  FileAudio,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  File as FileGeneric,
+  Presentation,
+} from 'lucide-react'
 
 import { cn } from './lib/cn'
 
@@ -9,26 +18,83 @@ export interface FileIconProps {
   className?: string
 }
 
-const EXTENSION_STYLE: Record<string, { Icon: typeof FileText; colorClass: string }> = {
+type IconStyle = { Icon: typeof FileText; colorClass: string }
+
+// Um estilo por família, reaproveitado por todas as extensões dela: assim o ícone de um `.jpg`
+// resolvido pelo nome é o mesmo de um `image/jpeg` resolvido pelo mimeType. Com cor por extensão, a
+// mesma foto trocaria de cor conforme o dado que chegou junto.
+const IMAGE_STYLE: IconStyle = { Icon: FileImage, colorClass: 'text-violet-500' }
+const VIDEO_STYLE: IconStyle = { Icon: FileVideo, colorClass: 'text-fuchsia-500' }
+const AUDIO_STYLE: IconStyle = { Icon: FileAudio, colorClass: 'text-amber-500' }
+const SHEET_STYLE: IconStyle = { Icon: FileSpreadsheet, colorClass: 'text-green-600' }
+const WORD_STYLE: IconStyle = { Icon: FileText, colorClass: 'text-blue-500' }
+const SLIDES_STYLE: IconStyle = { Icon: Presentation, colorClass: 'text-orange-600' }
+const TEXT_STYLE: IconStyle = { Icon: FileText, colorClass: 'text-gray-500' }
+
+const EXTENSION_STYLE: Record<string, IconStyle> = {
   pdf: { Icon: FileText, colorClass: 'text-red-500' },
-  doc: { Icon: FileText, colorClass: 'text-blue-500' },
-  docx: { Icon: FileText, colorClass: 'text-blue-500' },
-  xls: { Icon: FileSpreadsheet, colorClass: 'text-green-600' },
-  xlsx: { Icon: FileSpreadsheet, colorClass: 'text-green-600' },
+  doc: WORD_STYLE,
+  docx: WORD_STYLE,
+  xls: SHEET_STYLE,
+  xlsx: SHEET_STYLE,
+  csv: SHEET_STYLE,
+  ppt: SLIDES_STYLE,
+  pptx: SLIDES_STYLE,
   zip: { Icon: FileArchive, colorClass: 'text-orange-500' },
+  txt: TEXT_STYLE,
+  plain: TEXT_STYLE,
+
+  image: IMAGE_STYLE,
+  jpg: IMAGE_STYLE,
+  jpeg: IMAGE_STYLE,
+  png: IMAGE_STYLE,
+  webp: IMAGE_STYLE,
+  gif: IMAGE_STYLE,
+  heic: IMAGE_STYLE,
+
+  video: VIDEO_STYLE,
+  mp4: VIDEO_STYLE,
+  '3gp': VIDEO_STYLE,
+  '3gpp': VIDEO_STYLE,
+  mov: VIDEO_STYLE,
+  webm: VIDEO_STYLE,
+
+  audio: AUDIO_STYLE,
+  mp3: AUDIO_STYLE,
+  mpeg: AUDIO_STYLE,
+  ogg: AUDIO_STYLE,
+  oga: AUDIO_STYLE,
+  opus: AUDIO_STYLE,
+  aac: AUDIO_STYLE,
+  amr: AUDIO_STYLE,
+  m4a: AUDIO_STYLE,
+  wav: AUDIO_STYLE,
 }
 
+const MEDIA_FAMILIES = new Set(['image', 'video', 'audio'])
+
 /**
- * O nome do arquivo tem precedência sobre o mimeType porque o mapa é indexado por extensão curta:
- * o mimeType do Office é longo (`…wordprocessingml.document`) e nunca casaria, então quem passa só
- * mimeType perde o ícone de Word e de Excel.
+ * A chave de estilo do arquivo, na ordem em que cada dado é confiável.
+ *
+ * 1. **extensão do nome** — o mimeType do Office é longo (`…wordprocessingml.document`) e nunca
+ *    casaria, então quem olhasse só o mimeType perderia o ícone de Word e de Excel;
+ * 2. **família do mimeType** (`image/`, `video/`, `audio/`) — tem de vir ANTES do subtipo por causa
+ *    de `audio/mp4`: pelo subtipo, um áudio m4a ganharia o ícone de vídeo;
+ * 3. **subtipo** — cobre `application/pdf` e `application/zip`, que chegam sem nome de arquivo.
+ *
+ * Áudio de WhatsApp chega como `audio/ogg; codecs=opus`; o parâmetro depois do `;` é descartado,
+ * senão o subtipo viria `ogg; codecs=opus` e não casaria nada.
  *
  * Exportada para teste: é a regra que já regrediu uma vez no painel de documentos.
  */
 export function resolveFileIconExtension(filename?: string, mimeType?: string): string {
   const fromFilename = filename?.split('.').pop()?.toLowerCase()
   if (fromFilename && EXTENSION_STYLE[fromFilename]) return fromFilename
-  return mimeType?.split('/')[1]?.toLowerCase() ?? ''
+
+  const [family, subtype] = (mimeType ?? '').split(';')[0]!.toLowerCase().split('/')
+  if (family && MEDIA_FAMILIES.has(family)) return family
+
+  return subtype ?? ''
 }
 
 // Melhoria sobre a paridade da bolha de documento (T6.7 usava um único ícone genérico

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/Lightbox.tsx

@@ -1,16 +1,31 @@
+export interface LightboxLabels {
+  /** Texto alternativo quando a imagem não tem legenda — sem ele o leitor de tela anuncia a URL. */
+  imageAlt: string
+  close: string
+}
+
 export interface LightboxProps {
   imageUrl: string
   caption?: string
   onClose: () => void
+  labels?: Partial<LightboxLabels>
 }
 
-export function Lightbox({ imageUrl, caption, onClose }: LightboxProps) {
+export const DEFAULT_LIGHTBOX_LABELS: LightboxLabels = {
+  imageAlt: 'Imagem',
+  close: 'Fechar',
+}
+
+export function Lightbox({ imageUrl, caption, onClose, labels }: LightboxProps) {
+  const imageAltLabel = labels?.imageAlt ?? DEFAULT_LIGHTBOX_LABELS.imageAlt
+  const closeLabel = labels?.close ?? DEFAULT_LIGHTBOX_LABELS.close
+
   return (
     <div className="fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4" onClick={onClose}>
       <div className="max-w-[90vw] max-h-[90vh] flex flex-col items-center" onClick={(e) => e.stopPropagation()}>
-        <img src={imageUrl} alt={caption ?? 'Image'} className="max-w-full max-h-[80vh] object-contain rounded-lg" />
+        <img src={imageUrl} alt={caption ?? imageAltLabel} className="max-w-full max-h-[80vh] object-contain rounded-lg" />
         {caption && <p className="text-white text-sm mt-3 text-center">{caption}</p>}
-        <button onClick={onClose} className="mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors">Fechar</button>
+        <button onClick={onClose} className="mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors">{closeLabel}</button>
       </div>
     </div>
   )

package/src/MessageBubble.tsx

@@ -1,12 +1,15 @@
-import { useState } from 'react'
+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'
+import { useConversations } from './providers/ConversationsProvider'
 import { formatTimestamp, formatDateTime } from './lib/format'
 
 export interface MessageBubbleProps {
@@ -17,7 +20,16 @@ export interface MessageBubbleProps {
   isSelecting?: boolean
   isSelected?: boolean
   onToggleSelect?: () => void
+  /**
+   * Como buscar a mídia da mensagem. Ausente, o balão usa o `ConversationsApi` do
+   * `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
 }
 
@@ -39,15 +51,26 @@ 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)
+  const context = useConversations()
+
+  // Resolvedor pelo contexto quando o host não passa um: o contrato já declara `getDocumentUrl` e
+  // `getMediaProxyUrl`, então exigir que cada projeto ligasse esse fio só garantia que a mídia não
+  // carregasse em quem esquecesse. `useMemo` porque o resolvedor é a identidade de que o
+  // `MediaRenderer` depende para não refazer busca a cada render.
+  const resolveMediaUrl = useMemo(
+    () => onResolveMediaUrl ?? (context?.api ? createMediaUrlResolver(context.api) : undefined),
+    [onResolveMediaUrl, context?.api],
+  )
 
   const bubbleColor = BUBBLE_COLOR[message.sender] ?? BUBBLE_COLOR.customer
   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
@@ -115,7 +138,11 @@ export function MessageBubble({
         )}
 
         {isMedia ? (
-          <MediaRenderer message={message} onLightbox={setLightboxSrc} onResolveUrl={onResolveMediaUrl} />
+          <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

@@ -3,7 +3,20 @@ import type { ConversationsFeatures } from './types'
 import { cn } from './lib/cn'
 import { EmojiPicker } from './EmojiPicker'
 
+export interface MessageComposerLabels {
+  emoji: string
+  attach: string
+  send: string
+}
+
+export const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels = {
+  emoji: 'Emoji',
+  attach: 'Anexar',
+  send: 'Enviar',
+}
+
 export interface MessageComposerProps {
+  labels?: Partial<MessageComposerLabels>
   onSend: (text: string) => void
   onAttach?: (file: File) => void
   value?: string
@@ -22,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
@@ -42,7 +69,11 @@ export const MessageComposer = ({
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
   className,
   classNames,
+  labels,
 }: MessageComposerProps) => {
+  const emojiLabel = labels?.emoji ?? DEFAULT_MESSAGE_COMPOSER_LABELS.emoji
+  const attachLabel = labels?.attach ?? DEFAULT_MESSAGE_COMPOSER_LABELS.attach
+  const sendLabel = labels?.send ?? DEFAULT_MESSAGE_COMPOSER_LABELS.send
   const [internalText, setInternalText] = useState('')
   const [showEmoji, setShowEmoji] = useState(false)
   const [attachments, setAttachments] = useState<FilePreview[]>([])
@@ -168,7 +199,7 @@ export const MessageComposer = ({
       <div className={cn('flex items-end gap-1.5 rounded-xl bg-white px-3 py-2', classNames?.field)}>
         {showEmojiButton && (
           <div className="relative flex-shrink-0">
-            <button onClick={() => setShowEmoji(v => !v)} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors" aria-label="Emoji">
+            <button onClick={() => setShowEmoji(v => !v)} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors" aria-label={emojiLabel}>
               <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><circle cx="9" cy="9" r="0.5" fill="currentColor"/><circle cx="15" cy="9" r="0.5" fill="currentColor"/></svg>
             </button>
             {showEmoji && (
@@ -194,7 +225,7 @@ export const MessageComposer = ({
         {showAttachButton && (
           <>
             <input ref={fileInputRef} type="file" multiple accept={acceptedFileTypes} onChange={handleFileChange} className="hidden" />
-            <button onClick={() => fileInputRef.current?.click()} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors" aria-label="Anexar">
+            <button onClick={() => fileInputRef.current?.click()} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors" aria-label={attachLabel}>
               <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
             </button>
           </>
@@ -208,7 +239,7 @@ export const MessageComposer = ({
               ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
               : 'bg-gray-200 text-gray-400 cursor-not-allowed'
           }`}
-          aria-label="Enviar"
+          aria-label={sendLabel}
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
         </button>