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

package/src/InteractiveMessage.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { InteractiveMessage } from './InteractiveMessage'
+import type { InteractivePayload } from './types'
+
+function render(payload: InteractivePayload): string {
+  return renderToStaticMarkup(<InteractiveMessage payload={payload} />)
+}
+
+describe('InteractiveMessage', () => {
+  it('formata negrito no corpo, como o aparelho faz', () => {
+    const markup = render({ type: 'button', body: { text: 'Qual o *prazo desejado*?' } })
+
+    expect(markup).toContain('<strong>prazo desejado</strong>')
+    expect(markup).not.toContain('*prazo desejado*')
+  })
+
+  it('formata cabeçalho e rodapé também', () => {
+    const markup = render({
+      type: 'list',
+      header: { text: '*Menu*' },
+      body: { text: 'corpo' },
+      footer: { text: '_Selecione_' },
+    })
+
+    expect(markup).toContain('<strong>Menu</strong>')
+    expect(markup).toContain('<em>Selecione</em>')
+  })
+
+  it('deixa título de opção literal, porque o WhatsApp não formata ali', () => {
+    const markup = render({
+      type: 'button',
+      body: { text: 'corpo' },
+      action: { buttons: [{ reply: { id: 'sim', title: '*Sim*' } }] },
+    })
+
+    expect(markup).toContain('*Sim*')
+    expect(markup).not.toContain('<strong>Sim</strong>')
+  })
+})

package/src/InteractiveMessage.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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'
+import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+
+/** `parseWhatsAppFormatting` emite `<strong>`/`<em>`/`<del>`, que o reset do Tailwind zera. */
+const FORMATTING_CLASSES = '[&_strong]:font-bold [&_em]:italic [&_del]:line-through'
+
+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)}>
+      {/* Cabeçalho, corpo e rodapé passam pela formatação do WhatsApp — o aparelho renderiza
+          `*negrito*` neles como em qualquer texto. Título e descrição de opção NÃO: ali o WhatsApp
+          mostra os asteriscos literais, e formatá-los aqui deixaria o simulador mais bonito que o
+          aparelho, que é o tipo de divergência que só aparece com o cliente na frente. */}
+      {payload.header?.text ? (
+        <p className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', FORMATTING_CLASSES)}>
+          {parseWhatsAppFormatting(payload.header.text)}
+        </p>
+      ) : null}
+
+      {payload.body?.text ? (
+        <p
+          className={cn(
+            'whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100',
+            FORMATTING_CLASSES,
+          )}
+        >
+          {parseWhatsAppFormatting(payload.body.text)}
+        </p>
+      ) : null}
+
+      {payload.footer?.text ? (
+        <p className={cn('text-xs text-gray-500 dark:text-gray-400', FORMATTING_CLASSES)}>
+          {parseWhatsAppFormatting(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/MediaRenderer.tsx

@@ -3,6 +3,7 @@ import { AudioPlayer } from './AudioPlayer'
 import { FileIcon } from './FileIcon'
 import { useConversationLocales } from './ConversationLocalesProvider'
 import { formatFileSize } from './lib/format'
+import { cn } from './lib/cn'
 import type { MessagePayload } from './types'
 
 function resolveMediaSource(message: MessagePayload): string | null {
@@ -30,6 +31,8 @@ export interface MediaRendererProps {
   // loadUrl/loadMedia de financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx,
   // porém delegando o fetch ao host em vez de hardcodar `/uploads/:id/download-url`.
   onResolveUrl?: ResolveMediaUrl
+  /** Aplicado no wrapper de cada tipo de mídia — imagem, vídeo, áudio e documento. */
+  className?: string
 }
 
 function useLazyMediaUrl(message: MessagePayload, onResolveUrl?: ResolveMediaUrl) {
@@ -55,7 +58,7 @@ function useLazyMediaUrl(message: MessagePayload, onResolveUrl?: ResolveMediaUrl
   return { url, loading, error, load }
 }
 
-export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRendererProps) {
+export function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps) {
   const { bubble } = useConversationLocales()
   const eagerSrc = resolveMediaSource(message)
   const lazy = useLazyMediaUrl(message, onResolveUrl)
@@ -70,14 +73,14 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewImage}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
           </button>
         )
       }
       return (
         <div className="min-w-[200px]">
           {src ? (
-            <img src={src} alt={message.caption ?? 'Image'} className="w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity" onClick={() => onLightbox(src)} loading="lazy" />
+            <img src={src} alt={message.caption ?? bubble.imageAlt} className="w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity" onClick={() => onLightbox(src)} loading="lazy" />
           ) : (
             <div className="w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
@@ -90,7 +93,7 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewVideo}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
           </button>
         )
       }
@@ -110,14 +113,14 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.listenAudio}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
           </button>
         )
       }
       return (
         <div className="min-w-[200px]">
           {src ? <AudioPlayer src={src} isMine={message.direction === 'outbound'} /> : (
-            <div className="h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs">Audio unavailable</div>
+            <div className="h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs">{bubble.mediaUnavailable}</div>
           )}
         </div>
       )
@@ -126,16 +129,16 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       const typeLabel = message.mimeType?.split('/')[1]?.toUpperCase() ?? 'FILE'
       const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null
       return (
-        <div className="flex items-center gap-3 min-w-[200px]">
+        <div className={cn('flex items-center gap-3 min-w-[200px]', className)}>
           <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0">
             <FileIcon filename={message.filename} mimeType={message.mimeType} />
           </div>
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate">{message.filename ?? 'Document'}</p>
+            <p className="text-sm font-medium truncate">{message.filename ?? bubble.untitledDocument}</p>
             <p className="text-xs text-gray-500">{sizeLabel ? `${typeLabel} · ${sizeLabel}` : typeLabel}</p>
           </div>
           {src ? (
-            <a href={src} download={message.filename} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors" aria-label="Download">
+            <a href={src} download={message.filename} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors" aria-label={bubble.downloadFile}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
             </a>
           ) : canLazyLoad ? (
@@ -143,12 +146,12 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
               onClick={lazy.load}
               disabled={lazy.loading}
               className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50"
-              aria-label="Download"
+              aria-label={bubble.downloadFile}
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
             </button>
           ) : null}
-          {lazy.error && <span className="text-xs text-red-500 flex-shrink-0">Erro</span>}
+          {lazy.error && <span className="text-xs text-red-500 flex-shrink-0">{bubble.mediaError}</span>}
         </div>
       )
     }

package/src/MessageBubble.tsx

@@ -1,11 +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 {
@@ -16,7 +20,17 @@ 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
 }
 
 // Hex arbitrários (não os tokens `whatsapp.*` do Tailwind) — o pacote fica autocontido,
@@ -37,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,
+  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
@@ -73,7 +98,14 @@ export function MessageBubble({
   )
 
   return (
-    <div className={`flex items-end gap-1.5 ${isMine ? 'justify-end' : 'justify-start'} group ${isFirstInGroup ? 'mt-2' : 'mt-0.5'}`}>
+    <div
+      className={cn(
+        'flex items-end gap-1.5 group',
+        isMine ? 'justify-end' : 'justify-start',
+        isFirstInGroup ? 'mt-2' : 'mt-0.5',
+        className,
+      )}
+    >
       {isMine && checkbox}
       <div
         onClick={isSelecting ? onToggleSelect : undefined}
@@ -92,8 +124,25 @@ export function MessageBubble({
           </div>
         )}
 
+        {/* Sinaliza, não censura nem esconde: cliente xingando é cliente irritado, e o atendente
+            precisa ler o que foi dito para responder. A etiqueta serve para achar o caso na thread
+            e para justificar escalar. */}
+        {message.moderation?.isOffensive && (
+          <div
+            className="mb-1 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950/60 dark:text-amber-300"
+            title={message.moderation.terms.length > 0 ? message.moderation.terms.join(', ') : undefined}
+          >
+            <span aria-hidden>⚠️</span>
+            <span>{bubble.moderationFlagged}</span>
+          </div>
+        )}
+
         {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.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageComposer } from './MessageComposer'
+
+describe('MessageComposer', () => {
+  it('mostra a ação ociosa no lugar do enviar quando não há nada para enviar', () => {
+    const markup = renderToStaticMarkup(
+      <MessageComposer onSend={() => {}} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+
+    expect(markup).toContain('aria-label="Gravar áudio"')
+    expect(markup).not.toContain('aria-label="Enviar"')
+  })
+
+  it('mantém o botão de enviar quando não há ação ociosa', () => {
+    const markup = renderToStaticMarkup(<MessageComposer onSend={() => {}} />)
+
+    expect(markup).toContain('aria-label="Enviar"')
+  })
+
+  it('mostra o enviar assim que há texto, mesmo com ação ociosa configurada', () => {
+    const markup = renderToStaticMarkup(
+      <MessageComposer
+        onSend={() => {}}
+        value="oi"
+        onChange={() => {}}
+        idleAction={<button aria-label="Gravar áudio" />}
+      />,
+    )
+
+    expect(markup).toContain('aria-label="Enviar"')
+    expect(markup).not.toContain('aria-label="Gravar áudio"')
+  })
+})

package/src/MessageComposer.tsx

@@ -1,8 +1,22 @@
-import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent, type ReactNode } from 'react'
 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
@@ -12,10 +26,36 @@ export interface MessageComposerProps {
   maxLength?: number
   disabled?: boolean
   acceptedFileTypes?: string
+  /**
+   * Ocupa o lugar do botão de enviar enquanto não há nada para enviar — é onde o WhatsApp põe o
+   * microfone. Fora do campo, o botão vira um bloco solto ao lado do pill e quebra a barra.
+   */
+  idleAction?: ReactNode
+  className?: string
+  classNames?: Partial<MessageComposerClassNames>
 }
 
-// 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'
+export interface MessageComposerClassNames {
+  root: string
+  field: string
+}
+
+/**
+ * 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
@@ -32,7 +72,14 @@ export const MessageComposer = ({
   maxLength,
   disabled = false,
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  idleAction,
+  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[]>([])
@@ -134,7 +181,10 @@ export const MessageComposer = ({
   const remaining = maxLength ? maxLength - text.length : null
 
   return (
-    <div>
+    /* A barra é a superfície (cinza, largura cheia, sem raio) e o campo dentro é que arredonda —
+       ordem do WhatsApp. Invertido, o pill arredondado ia até a borda da tela e os cantos
+       descobriam o fundo branco da página, que lia como defeito. */
+    <div className={cn('bg-[#f0f2f5] px-2 py-2', className)}>
       {attachments.length > 0 && (
         <div className="flex gap-2 px-1 pb-2 overflow-x-auto">
           {attachments.map((a, i) => (
@@ -152,10 +202,10 @@ export const MessageComposer = ({
         </div>
       )}
 
-      <div className="flex items-end gap-1.5 bg-[#f0f2f5] rounded-xl px-3 py-2">
+      <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 && (
@@ -181,24 +231,28 @@ 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>
           </>
         )}
 
-        <button
-          onClick={sendMessage}
-          disabled={!canSend || disabled}
-          className={`w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${
-            canSend && !disabled
-              ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-          aria-label="Enviar"
-        >
-          <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>
+        {!canSend && idleAction ? (
+          <div className="flex-shrink-0">{idleAction}</div>
+        ) : (
+          <button
+            onClick={sendMessage}
+            disabled={!canSend || disabled}
+            className={`w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${
+              canSend && !disabled
+                ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
+                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+            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>
+        )}
       </div>
 
       {remaining !== null && (

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