@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20

package/src/MediaRenderer.tsx

@@ -1,10 +1,30 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 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'
 
+/**
+ * Rótulo curto do tipo, para a linha de baixo da bolha de documento.
+ *
+ * O subtipo cru do Office é gigantesco — `vnd.openxmlformats-officedocument.wordprocessingml.document`
+ * vira uma linha de 58 caracteres em caixa alta que estica a bolha, empurra a coluna da conversa e
+ * quebra o layout de três painéis. A extensão do arquivo diz a mesma coisa em quatro letras.
+ */
+export function documentTypeLabel(filename?: string, mimeType?: string): string {
+  const extension = filename?.split('.').pop()
+  if (extension && extension.length <= 5 && extension !== filename) return extension.toUpperCase()
+
+  const subtype = mimeType?.split(';')[0]?.split('/')[1]
+  if (!subtype) return 'FILE'
+  // Sem extensão e com subtipo longo (áudio/vídeo sem nome), fica o sufixo depois do último ponto:
+  // `…wordprocessingml.document` -> `DOCUMENT`, que ainda informa e não estoura.
+  const compacto = subtype.split('.').pop() ?? subtype
+  return compacto.slice(0, 12).toUpperCase()
+}
+
 function resolveMediaSource(message: MessagePayload): string | null {
   if (message.mediaUrl) return message.mediaUrl
   if (message.base64) {
@@ -30,6 +50,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,29 +77,48 @@ 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)
   const src = eagerSrc ?? lazy.url
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl)
 
-  const lazyButtonClass = 'text-xs text-blue-600 underline flex items-center gap-1'
+  /**
+   * O carregamento sob demanda continua sendo um botão, mas com a forma da mídia que ele vai virar
+   * — um link sublinhado no meio da conversa lê como texto da mensagem, não como controle, e é a
+   * única bolha que não se parece com o que contém.
+   */
+  function LazyMediaButton({ icon, label }: { icon: ReactNode; label: string }) {
+    return (
+      <button
+        onClick={lazy.load}
+        disabled={lazy.loading}
+        className="flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15"
+      >
+        <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white">
+          {icon}
+        </span>
+        <span className="truncate text-xs text-gray-600 dark:text-gray-300">{label}</span>
+      </button>
+    )
+  }
 
   switch (message.type) {
     case 'image':
     case 'sticker': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewImage}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
+          />
         )
       }
       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>
@@ -89,9 +130,10 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
     case 'video': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewVideo}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
+          />
         )
       }
       return (
@@ -109,33 +151,34 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
     case 'audio': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.listenAudio}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="translate-x-0.5"><polygon points="5 3 19 12 5 21 5 3" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
+          />
         )
       }
       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>
       )
     }
     case 'document': {
-      const typeLabel = message.mimeType?.split('/')[1]?.toUpperCase() ?? 'FILE'
+      const typeLabel = documentTypeLabel(message.filename, message.mimeType)
       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-xs text-gray-500">{sizeLabel ? `${typeLabel} · ${sizeLabel}` : typeLabel}</p>
+            <p className="text-sm font-medium truncate">{message.filename ?? bubble.untitledDocument}</p>
+            <p className="truncate 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 +186,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,56 @@
-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'
 
+/**
+ * Mensagem pronta que o atendente cola no campo com um clique.
+ *
+ * `text` aceita string com `{{variavel}}` ou função: a string cobre o caso comum (copy fixa com o
+ * nome do cliente no meio) sem o host escrever código, e a função cobre o que precisa de lógica —
+ * escolher texto por produto, pluralizar, formatar moeda.
+ */
+export interface QuickReply {
+  key: string
+  /** O que aparece no chip, emoji incluso: `👋 Saudação`. */
+  label: string
+  text: string | ((variables: Readonly<Record<string, string>>) => string)
+}
+
+/**
+ * Troca `{{nome}}` pelos valores passados. Variável ausente vira string vazia, e não o literal
+ * `{{nome}}`: mandar "Olá {{nome}}!" para o cliente é pior que mandar "Olá !".
+ */
+export function applyQuickReplyVariables(
+  template: string,
+  variables: Readonly<Record<string, string>> = {},
+): string {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave: string) => variables[chave] ?? '')
+}
+
+export function resolveQuickReply(
+  quickReply: QuickReply,
+  variables: Readonly<Record<string, string>> = {},
+): string {
+  return typeof quickReply.text === 'function'
+    ? quickReply.text(variables)
+    : applyQuickReplyVariables(quickReply.text, variables)
+}
+
+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 +60,42 @@ 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
+  /** Mensagens prontas exibidas acima do campo. Vazio ou ausente, a faixa não é renderizada. */
+  quickReplies?: readonly QuickReply[]
+  /** Valores para `{{variavel}}` — tipicamente nome do cliente, produto, protocolo. */
+  quickReplyVariables?: Readonly<Record<string, string>>
+  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
+  quickReplies: string
+  quickReply: 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
@@ -27,12 +107,21 @@ export const MessageComposer = ({
   onAttach,
   value: externalValue,
   onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
   features,
   placeholder = 'Digite uma mensagem...',
   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 +223,41 @@ 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)}>
+      {/* Uma linha com scroll no celular e wrap no desktop: em 375px seis chips em wrap empurrariam
+          o campo para fora da tela, e o campo é a razão de a barra existir. */}
+      {quickReplies && quickReplies.length > 0 && (
+        <div
+          className={cn(
+            'mb-2 flex flex-nowrap gap-1 overflow-x-auto px-1 sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            classNames?.quickReplies,
+          )}
+        >
+          {quickReplies.map((quickReply) => (
+            <button
+              key={quickReply.key}
+              type="button"
+              // Preenche o campo em vez de enviar: mensagem pronta é ponto de partida, e quem
+              // atende quase sempre ajusta uma palavra antes de mandar. Enviar direto no clique
+              // transformaria um toque errado em mensagem entregue ao cliente.
+              onClick={() => {
+                setText(resolveQuickReply(quickReply, quickReplyVariables))
+                textareaRef.current?.focus()
+              }}
+              className={cn(
+                'whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 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',
+                classNames?.quickReply,
+              )}
+            >
+              {quickReply.label}
+            </button>
+          ))}
+        </div>
+      )}
+
       {attachments.length > 0 && (
         <div className="flex gap-2 px-1 pb-2 overflow-x-auto">
           {attachments.map((a, i) => (
@@ -152,10 +275,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 +304,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/RichMessageComposer.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { RichMessageComposer, type RichComposerQuickReply, type RichComposerVariable } from './RichMessageComposer'
+
+const noop = () => {}
+
+const QUICK_REPLIES: RichComposerQuickReply[] = [
+  { id: 'greeting', label: 'Saudação', text: 'Olá!', tooltip: 'Abre o atendimento' },
+]
+
+const VARIABLES: RichComposerVariable[] = [
+  { id: 'name', label: 'Nome do cliente', value: '{{nome}}' },
+]
+
+describe('RichMessageComposer', () => {
+  it('mostra as dicas padrão em todas as ações da barra', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} onAttachFiles={noop} />,
+    )
+
+    for (const tooltip of ['Negrito', 'Itálico', 'Tachado', 'Monoespaçado', 'Anexar arquivo', 'Enviar']) {
+      expect(markup).toContain(`title="${tooltip}"`)
+    }
+  })
+
+  it('deixa o host trocar o texto de uma dica sem mexer nas outras', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} tooltips={{ bold: 'Deixar em negrito' }} />,
+    )
+
+    expect(markup).toContain('title="Deixar em negrito"')
+    expect(markup).not.toContain('title="Negrito"')
+    expect(markup).toContain('title="Itálico"')
+  })
+
+  it('esconde só a ação que o host desligou', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} toolbar={{ monospace: false }} />,
+    )
+
+    expect(markup).not.toContain('title="Monoespaçado"')
+    expect(markup).toContain('title="Negrito"')
+  })
+
+  it('não desenha o anexo quando não há como anexar', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).not.toContain('title="Anexar arquivo"')
+  })
+
+  it('desenha os chips de resposta rápida com o rótulo e a dica do host', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} quickReplies={QUICK_REPLIES} />,
+    )
+
+    expect(markup).toContain('Saudação')
+    expect(markup).toContain('title="Abre o atendimento"')
+  })
+
+  it('só oferece variáveis quando o host manda alguma', () => {
+    const semVariaveis = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+    const comVariaveis = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} variables={VARIABLES} />,
+    )
+
+    expect(semVariaveis).not.toContain('title="Variáveis disponíveis"')
+    expect(comVariaveis).toContain('title="Variáveis disponíveis"')
+  })
+
+  it('cede o lugar do enviar à ação ociosa enquanto não há texto', () => {
+    const vazio = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+    const comTexto = renderToStaticMarkup(
+      <RichMessageComposer value="oi" onChange={noop} onSend={noop} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+
+    expect(vazio).toContain('aria-label="Gravar áudio"')
+    expect(vazio).not.toContain('title="Enviar"')
+    expect(comTexto).toContain('title="Enviar"')
+  })
+})