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

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, MessageTranscription } 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,22 @@ 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
+  /**
+   * Pede a transcrição do áudio. Ausente, o balão usa `transcribeAudio` do `ConversationsApi` do
+   * contexto — passe apenas para sobrescrever. Sem nenhum dos dois, o bloco de transcrição só exibe
+   * o que já veio pronto do backend.
+   */
+  onTranscribeAudio?: (messageId: string) => Promise<MessageTranscription | void>
   className?: string
 }
 
@@ -39,15 +57,50 @@ 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, onTranscribeAudio, 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],
+  )
+
+  /**
+   * `undefined` quando nem o host nem o `ConversationsApi` sabem transcrever — é essa ausência que o
+   * bloco de transcrição consulta para decidir se desenha a afordância, mesmo padrão de
+   * `takeover`/`release`.
+   */
+  const requestTranscription = useMemo(() => {
+    const transcribe = onTranscribeAudio ?? context?.api?.transcribeAudio?.bind(context.api)
+    if (!transcribe) return undefined
+    // Devolve o resultado em vez de descartar: é o que o bloco exibe na hora, sem esperar refetch.
+    return () => transcribe(message.id)
+  }, [onTranscribeAudio, context?.api, message.id])
 
   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'
+
+  /**
+   * A legenda chega em `caption` quando o cliente manda, e em `content` quando somos nós — é lá que
+   * a API grava o texto do envio. Sem legenda a API repete o nome do arquivo em `content`, que não
+   * é conteúdo e não deve aparecer sob a mídia.
+   */
+  const mediaCaption = isMedia
+    ? [message.caption, message.content].find((text) => {
+        const trimmed = text?.trim()
+        return trimmed && trimmed !== message.filename
+      })
+    : undefined
   const displayName = message.sender === 'agent' && senderName ? senderName : bubble[message.sender] ?? message.sender
 
   const tooltipText = message.status === 'read' && message.readAt
@@ -63,7 +116,7 @@ export function MessageBubble({
   const checkbox = (
     <button
       onClick={(e) => { e.stopPropagation(); onToggleSelect?.() }}
-      title={selection.select}
+      data-cv-tooltip={selection.select} aria-label={selection.select}
       className={`
         flex-shrink-0 self-end mb-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
         ${isSelected ? 'bg-teal-600 border-teal-600' : 'bg-white/80 dark:bg-black/40 border-black/20 dark:border-white/30'}
@@ -107,7 +160,7 @@ export function MessageBubble({
         {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}
+            data-cv-tooltip={message.moderation.terms.length > 0 ? message.moderation.terms.join(', ') : undefined}
           >
             <span aria-hidden>⚠️</span>
             <span>{bubble.moderationFlagged}</span>
@@ -115,7 +168,23 @@ export function MessageBubble({
         )}
 
         {isMedia ? (
-          <MediaRenderer message={message} onLightbox={setLightboxSrc} onResolveUrl={onResolveMediaUrl} />
+          <>
+            <MediaRenderer
+              message={message}
+              onLightbox={setLightboxSrc}
+              onResolveUrl={resolveMediaUrl}
+              {...(requestTranscription ? { onTranscribeAudio: requestTranscription } : {})}
+            />
+            {mediaCaption ? (
+              <div className="mt-1 text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]">
+                {parseWhatsAppFormatting(mediaCaption)}
+              </div>
+            ) : null}
+          </>
+        ) : 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,9 +1,60 @@
-import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent, type ReactNode } from 'react'
+import { AudioRecorderButton } from './AudioRecorderButton'
 import type { ConversationsFeatures } from './types'
 import { cn } from './lib/cn'
+import { COMPOSER_BAR_CLASS, QUICK_REPLY_PILL_CLASS } from './composer.constant'
 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
+  removeAttachment: string
+}
+
+export const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels = {
+  emoji: 'Emoji',
+  attach: 'Anexar',
+  send: 'Enviar',
+  removeAttachment: 'Remover anexo',
+}
+
 export interface MessageComposerProps {
+  labels?: Partial<MessageComposerLabels>
   onSend: (text: string) => void
   onAttach?: (file: File) => void
   value?: string
@@ -13,17 +64,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>
 }
 
 export interface MessageComposerClassNames {
   root: string
+  quickReplies: string
+  quickReply: string
   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
@@ -35,14 +111,22 @@ 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 removeAttachmentLabel = labels?.removeAttachment ?? DEFAULT_MESSAGE_COMPOSER_LABELS.removeAttachment
   const [internalText, setInternalText] = useState('')
   const [showEmoji, setShowEmoji] = useState(false)
   const [attachments, setAttachments] = useState<FilePreview[]>([])
@@ -140,6 +224,24 @@ export const MessageComposer = ({
     }
   }, [text, setText])
 
+  /**
+   * Microfone por padrão, sem o host precisar compor nada.
+   *
+   * Antes o gravador era só um componente exportado e um slot vazio: cada inbox tinha que lembrar de
+   * juntar os dois. Dois produtos, dois resultados — um ligou, o outro não, e a ausência não dava
+   * erro nenhum. Um composer de WhatsApp sem microfone está incompleto, então o default certo é ter.
+   *
+   * Depende de `onAttach` porque áudio gravado é um arquivo para entregar, e microfone que grava sem
+   * ter para onde mandar é pior que microfone nenhum — o operador fala e o áudio evapora. É a mesma
+   * regra de capacidade usada no resto do pacote: sem a porta, a afordância não aparece.
+   *
+   * `idleAction` continua vencendo: quem já compunha o próprio gravador (com rótulos, limite de
+   * duração ou revisão diferentes) não muda de comportamento ao atualizar.
+   */
+  const effectiveIdleAction =
+    idleAction ??
+    (onAttach ? <AudioRecorderButton onRecorded={(file) => onAttach(file)} /> : undefined)
+
   const canSend = text.trim().length > 0 || attachments.length > 0
   const remaining = maxLength ? maxLength - text.length : null
 
@@ -147,7 +249,36 @@ export const MessageComposer = ({
     /* 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)}>
+    <div className={cn(COMPOSER_BAR_CLASS, 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
+              data-cv-tooltip={quickReply.label} aria-label={quickReply.label}
+              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(QUICK_REPLY_PILL_CLASS, 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) => (
@@ -159,7 +290,7 @@ export const MessageComposer = ({
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                 </div>
               )}
-              <button onClick={() => removeAttachment(i)} className="absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs">✕</button>
+              <button data-cv-tooltip={removeAttachmentLabel} aria-label={removeAttachmentLabel} onClick={() => removeAttachment(i)} className="absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs">✕</button>
             </div>
           ))}
         </div>
@@ -168,7 +299,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 data-cv-tooltip={emojiLabel} 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,24 +325,29 @@ 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 data-cv-tooltip={attachLabel} 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 && effectiveIdleAction ? (
+          <div className="flex-shrink-0">{effectiveIdleAction}</div>
+        ) : (
+          <button
+            data-cv-tooltip={sendLabel}
+            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,113 @@
+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(`data-cv-tooltip="${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('data-cv-tooltip="Deixar em negrito"')
+    expect(markup).not.toContain('data-cv-tooltip="Negrito"')
+    expect(markup).toContain('data-cv-tooltip="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('data-cv-tooltip="Monoespaçado"')
+    expect(markup).toContain('data-cv-tooltip="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('data-cv-tooltip="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('data-cv-tooltip="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('data-cv-tooltip="Variáveis disponíveis"')
+    expect(comVariaveis).toContain('data-cv-tooltip="Variáveis disponíveis"')
+  })
+
+  it('nasce com toda formatação apagada, e diz isso ao leitor de tela', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).toContain('aria-pressed="false"')
+    expect(markup).not.toContain('aria-pressed="true"')
+  })
+
+  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('data-cv-tooltip="Enviar"')
+    expect(comTexto).toContain('data-cv-tooltip="Enviar"')
+  })
+
+  it('desenha as quatro formatações abertas enquanto a barra não foi medida', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).toContain('data-cv-tooltip="Negrito"')
+    // O botão que recolhe as quatro só aparece com a barra medida e estreita.
+    expect(markup).not.toContain('data-cv-tooltip="Formatação"')
+  })
+
+  it('mostra o enviar com anexo na fila e nenhum texto, senão a imagem fica presa', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer
+        value=""
+        onChange={noop}
+        onSend={noop}
+        hasQueuedAttachments
+        idleAction={<button aria-label="Gravar áudio" />}
+      />,
+    )
+
+    expect(markup).toContain('data-cv-tooltip="Enviar"')
+    expect(markup).not.toContain('aria-label="Gravar áudio"')
+  })
+})