@adatechnology/conversations-ui 0.3.1 → 0.4.0

package/dist/preview/index.d.ts

@@ -1,5 +1,5 @@
-import { M as MessagePayload, C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-DmV8uaFE.js';
-export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, N as signPreviewPayload, O as simulatorPanelLabelsOf, Q as toConversationSimulatorClient } from '../ConversationSimulatorPanel-DmV8uaFE.js';
+import { M as MessagePayload, C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-DnXElfY8.js';
+export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, N as signPreviewPayload, O as simulatorPanelLabelsOf, Q as toConversationSimulatorClient } from '../ConversationSimulatorPanel-DnXElfY8.js';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 import * as react from 'react';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';

package/dist/preview/index.js

@@ -16,7 +16,7 @@ import {
   mediaTypeOf,
   simulatorPanelLabelsOf,
   toConversationSimulatorClient
-} from "../chunk-L4OE4ORQ.js";
+} from "../chunk-4P5KMWOI.js";
 import "../chunk-PJNR6UMN.js";
 
 // src/preview/previewStore.ts
@@ -705,7 +705,9 @@ function createMockConversationsApi(params) {
     },
     fetchMessages(conversationId, fetchParams) {
       return withLatency(() => {
-        const messages = params.store.listMessages(conversationId);
+        const allMessages = params.store.listMessages(conversationId);
+        const before = fetchParams?.before;
+        const messages = before ? allMessages.filter((message) => message.timestamp < before) : allMessages;
         const limit = fetchParams?.limit;
         return limit ? messages.slice(-limit) : messages;
       });

package/dist/styles.css

@@ -526,6 +526,22 @@
   font-size: 0.875rem;
   color: #6b7280;
 }
+.cv-workspace-load-older {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+.cv-workspace-load-older button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--cv-border, #e5e7eb);
+  padding: 0 0.75rem;
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+.cv-workspace-load-older button:disabled {
+  opacity: 0.6;
+}
 .dark .cv-workspace-notice {
   border-top-color: #374151;
   background: #1f2937;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.4.0"
+    "@adatechnology/meta-whatsapp-contracts": "0.4.0",
+    "@adatechnology/conversation-contracts": "0.3.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

package/src/AudioRecorderButton.test.tsx

@@ -27,4 +27,22 @@ describe('AudioRecorderButton', () => {
 
     expect(markup).toContain('h-10 w-10')
   })
+
+  // D3: a dica do controle desabilitado tem de ser legível por leitor de tela, não só `title` (que
+  // o pacote nem usa) nem só o tooltip visual (`data-cv-tooltip`, que não é lido por AT sozinho).
+  it('desabilitado com dica, expõe a dica via aria-describedby para leitor de tela', () => {
+    const markup = renderToStaticMarkup(
+      <AudioRecorderButton onRecorded={noop} disabled disabledHint="Este canal não grava áudio." />,
+    )
+
+    expect(markup).toContain('disabled=""')
+    expect(markup).toContain('aria-describedby=')
+    expect(markup).toContain('Este canal não grava áudio.')
+  })
+
+  it('sem dica, o botão desabilitado não ganha aria-describedby à toa', () => {
+    const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} disabled />)
+
+    expect(markup).not.toContain('aria-describedby=')
+  })
 })

package/src/AudioRecorderButton.tsx

@@ -8,7 +8,7 @@
  * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
 
 import { AudioPlayer } from './AudioPlayer'
 
@@ -56,6 +56,12 @@ export interface AudioRecorderButtonProps {
   maxDurationMilliseconds?: number
   labels?: Partial<AudioRecorderButtonLabels>
   disabled?: boolean
+  /**
+   * Por que o microfone está desabilitado (RF10, D3) — o canal atual não grava áudio. Sai como
+   * `aria-describedby`, não só `data-cv-tooltip`: o tooltip visual não é lido por leitor de tela
+   * sozinho, e uma dica que só aparece no hover falha exatamente para quem mais precisa dela.
+   */
+  disabledHint?: string
 }
 
 /**
@@ -96,9 +102,12 @@ export function AudioRecorderButton({
   maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
   labels,
   disabled,
+  disabledHint,
 }: AudioRecorderButtonProps) {
   const labelOf = (key: keyof AudioRecorderButtonLabels): string =>
     labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key]
+  const disabledHintId = useId()
+  const showDisabledHint = Boolean(disabled && disabledHint)
   const [isRecording, setIsRecording] = useState(false)
   const [pending, setPending] = useState<PendingRecording | undefined>(undefined)
   const recorderRef = useRef<MediaRecorder | null>(null)
@@ -226,8 +235,9 @@ export function AudioRecorderButton({
         type="button"
         disabled={disabled || pending !== undefined}
         onClick={() => (isRecording ? stop() : void start())}
-        data-cv-tooltip={toggleLabel}
+        data-cv-tooltip={showDisabledHint ? disabledHint : toggleLabel}
         aria-label={toggleLabel}
+        aria-describedby={showDisabledHint ? disabledHintId : undefined}
         aria-pressed={isRecording}
         /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está
            vazio, e qualquer diferença de tamanho faz a barra pular a cada letra digitada. */
@@ -243,6 +253,11 @@ export function AudioRecorderButton({
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 11a7 7 0 0 1-14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>
         )}
       </button>
+      {showDisabledHint && (
+        <span id={disabledHintId} className="sr-only">
+          {disabledHint}
+        </span>
+      )}
     </div>
   )
 }

package/src/ChannelIcon.tsx

@@ -15,6 +15,7 @@ export const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>>
   [CONVERSATION_CHANNEL.MESSENGER]: '#0084FF',
   [CONVERSATION_CHANNEL.INSTAGRAM]: '#E4405F',
   [CONVERSATION_CHANNEL.WEBCHAT]: '#64748B',
+  [CONVERSATION_CHANNEL.EMAIL]: '#EA4335',
 }
 
 export interface ChannelIconProps {
@@ -60,6 +61,16 @@ function Glyph({ channel }: { channel: ConversationChannel }) {
     )
   }
 
+  if (channel === CONVERSATION_CHANNEL.EMAIL) {
+    return (
+      <>
+        <rect x="2" y="4" width="20" height="16" rx="3" fill={color} />
+        {/* Envelope aberto: o traço mínimo que ainda lê como e-mail numa fila de conversas. */}
+        <path d="M3.5 6.5 12 13l8.5-6.5" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
+      </>
+    )
+  }
+
   return (
     <>
       <circle cx="12" cy="12" r="11" fill={color} />

package/src/MessageBubble.test.tsx

@@ -39,3 +39,36 @@ describe('MessageBubble com mídia', () => {
     expect(markup).not.toContain('>planta-baixa.png<')
   })
 })
+
+// D4, CA04: o e-mail não confirma leitura — o selo de lida não pode aparecer, nem por engano se o
+// backend mandar `status: 'read'` por algum caminho antigo. A tela nunca finge o que o canal não sabe.
+describe('MessageBubble e o selo de lida por canal (D4, CA04)', () => {
+  const TEXT_MESSAGE: MessagePayload = {
+    id: 'msg-2',
+    type: 'text',
+    direction: 'outbound',
+    sender: 'agent',
+    timestamp: '2026-08-05T12:00:00.000Z',
+    content: 'Já enviamos a nota',
+    status: 'read',
+  }
+
+  it('email não confirma leitura — o selo de lida não aparece mesmo com status "read"', () => {
+    const markup = renderToStaticMarkup(<MessageBubble message={TEXT_MESSAGE} isMine channel="email" />)
+
+    expect(markup).not.toContain('text-sky-500')
+  })
+
+  it('whatsapp confirma leitura — o selo de lida aparece normalmente', () => {
+    const markup = renderToStaticMarkup(<MessageBubble message={TEXT_MESSAGE} isMine channel="whatsapp" />)
+
+    expect(markup).toContain('text-sky-500')
+  })
+
+  it('sem channel, o padrão continua sendo whatsapp — comportamento de antes desta mudança', () => {
+    const withChannel = renderToStaticMarkup(<MessageBubble message={TEXT_MESSAGE} isMine channel="whatsapp" />)
+    const withoutChannel = renderToStaticMarkup(<MessageBubble message={TEXT_MESSAGE} isMine />)
+
+    expect(withoutChannel).toEqual(withChannel)
+  })
+})

package/src/MessageBubble.tsx

@@ -2,6 +2,8 @@ import { useMemo, useState } from 'react'
 import { Check } from 'lucide-react'
 import type { InteractiveSelection, MessagePayload, MessageTranscription } from './types'
 import { useConversationLocales } from './ConversationLocalesProvider'
+import { channelCapabilityFor } from './channelCapability'
+import type { ConversationChannel } from './conversationChannel'
 import { StatusTicks } from './StatusTicks'
 import { MediaRenderer, type ResolveMediaUrl } from './MediaRenderer'
 import { Lightbox } from './Lightbox'
@@ -36,6 +38,12 @@ export interface MessageBubbleProps {
    * o que já veio pronto do backend.
    */
   onTranscribeAudio?: (messageId: string) => Promise<MessageTranscription | void>
+  /**
+   * Canal da conversa (RF10, D4). Ausente = `whatsapp`, o comportamento de antes desta mudança.
+   * E-mail não confirma leitura (CA04): o selo de lida nunca aparece nesse canal, mesmo que o
+   * status chegue como `read` por algum caminho antigo — a tela não finge o que o canal não sabe.
+   */
+  channel?: ConversationChannel
   className?: string
 }
 
@@ -57,8 +65,13 @@ 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, onInteractiveSelect, onTranscribeAudio, className,
+  onResolveMediaUrl, onInteractiveSelect, onTranscribeAudio, channel, className,
 }: MessageBubbleProps) {
+  // D4, CA04: sem confirmação de leitura no canal, `read` nunca aparece — mesmo que chegue assim do
+  // backend. Rebaixar para `delivered` em vez de esconder o tick inteiro preserva sent/delivered/
+  // failed, que continuam informação válida em qualquer canal.
+  const confirmsRead = channelCapabilityFor(channel).confirmsRead
+  const displayStatus = message.status === 'read' && !confirmsRead ? 'delivered' : message.status
   const { bubble, selection } = useConversationLocales()
   const [lightboxSrc, setLightboxSrc] = useState<string | null>(null)
   const context = useConversations()
@@ -103,9 +116,9 @@ export function MessageBubble({
     : undefined
   const displayName = message.sender === 'agent' && senderName ? senderName : bubble[message.sender] ?? message.sender
 
-  const tooltipText = message.status === 'read' && message.readAt
+  const tooltipText = displayStatus === 'read' && message.readAt
     ? `${bubble.readAt}${formatDateTime(message.readAt)}`
-    : message.status === 'failed'
+    : displayStatus === 'failed'
       ? bubble.windowExpired
       : undefined
 
@@ -205,8 +218,8 @@ export function MessageBubble({
           <span className="text-xs text-black/40 dark:text-white/40 font-medium">
             {formatTimestamp(message.timestamp)}
           </span>
-          {isMine && message.status && (
-            <StatusTicks status={message.status} title={tooltipText} />
+          {isMine && displayStatus && (
+            <StatusTicks status={displayStatus} title={tooltipText} />
           )}
         </div>
       </div>

package/src/MessageComposer.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
 
-import { MessageComposer } from './MessageComposer'
+import { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS } from './MessageComposer'
 
 describe('MessageComposer', () => {
   it('mostra a ação ociosa no lugar do enviar quando não há nada para enviar', () => {
@@ -47,3 +47,41 @@ describe('MessageComposer', () => {
     expect(withoutPort).not.toContain('role="combobox"')
   })
 })
+
+// RF10, D3: recurso que o canal não tem aparece desabilitado com dica legível por leitor de tela —
+// nunca escondido sem explicação, e nunca só com `title` (inacessível a leitor de tela).
+describe('MessageComposer e a capacidade do canal (RF10, D3)', () => {
+  it('webchat não grava áudio — o microfone vem desabilitado com dica em aria-describedby', () => {
+    const markup = renderToStaticMarkup(<MessageComposer onSend={() => {}} onAttach={() => {}} channel="webchat" />)
+
+    expect(markup).toContain('aria-describedby=')
+    expect(markup).toContain(DEFAULT_MESSAGE_COMPOSER_LABELS.audioDisabledHint)
+  })
+
+  it('whatsapp grava áudio — o microfone continua habilitado, sem a dica de bloqueio', () => {
+    const markup = renderToStaticMarkup(<MessageComposer onSend={() => {}} onAttach={() => {}} channel="whatsapp" />)
+
+    expect(markup).not.toContain(DEFAULT_MESSAGE_COMPOSER_LABELS.audioDisabledHint)
+  })
+
+  it('todo canal atual aceita anexo e resposta rápida — os dois continuam habilitados', () => {
+    const markup = renderToStaticMarkup(
+      <MessageComposer
+        onSend={() => {}}
+        onAttach={() => {}}
+        channel="email"
+        savedQuickReplies={{ listQuickReplies: async () => [], conversationId: 'c1' }}
+      />,
+    )
+
+    expect(markup).not.toContain(DEFAULT_MESSAGE_COMPOSER_LABELS.attachDisabledHint)
+    expect(markup).not.toContain(DEFAULT_MESSAGE_COMPOSER_LABELS.quickRepliesDisabledHint)
+  })
+
+  it('sem channel, o padrão continua sendo whatsapp — nada muda para quem já usava o pacote', () => {
+    const withChannel = renderToStaticMarkup(<MessageComposer onSend={() => {}} onAttach={() => {}} channel="whatsapp" />)
+    const withoutChannel = renderToStaticMarkup(<MessageComposer onSend={() => {}} onAttach={() => {}} />)
+
+    expect(withoutChannel).toEqual(withChannel)
+  })
+})

package/src/MessageComposer.tsx

@@ -9,6 +9,8 @@ import {
   type ReactNode,
 } from 'react'
 import { AudioRecorderButton } from './AudioRecorderButton'
+import { channelCapabilityFor } from './channelCapability'
+import type { ConversationChannel } from './conversationChannel'
 import type { ConversationsFeatures } from './types'
 import { cn } from './lib/cn'
 import { COMPOSER_BAR_CLASS, QUICK_REPLY_PILL_CLASS } from './composer.constant'
@@ -53,6 +55,12 @@ export interface MessageComposerLabels {
   send: string
   removeAttachment: string
   quickReplies: string
+  /** RF10, D3: por que o anexo está desabilitado no canal atual. */
+  attachDisabledHint: string
+  /** RF10, D3: por que o microfone está desabilitado no canal atual. */
+  audioDisabledHint: string
+  /** RF10, D3: por que a mensagem pronta está desabilitada no canal atual. */
+  quickRepliesDisabledHint: string
 }
 
 export const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels = {
@@ -61,6 +69,9 @@ export const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels = {
   send: 'Enviar',
   removeAttachment: 'Remover anexo',
   quickReplies: 'Mensagens prontas',
+  attachDisabledHint: 'Este canal não aceita anexo.',
+  audioDisabledHint: 'Este canal não grava áudio.',
+  quickRepliesDisabledHint: 'Este canal não aceita mensagem pronta.',
 }
 
 /**
@@ -90,6 +101,12 @@ export interface MessageComposerProps {
   value?: string
   onChange?: (value: string) => void
   features?: ConversationsFeatures
+  /**
+   * Canal da conversa (RF10, D3). Ausente = `whatsapp`, o comportamento de antes desta mudança.
+   * Decide o que aparece desabilitado com dica: anexo, microfone e mensagem pronta que o canal não
+   * suporta nunca somem sem explicação — ficam visíveis e desabilitados.
+   */
+  channel?: ConversationChannel
   placeholder?: string
   maxLength?: number
   disabled?: boolean
@@ -147,6 +164,7 @@ export const MessageComposer = ({
   quickReplyVariables,
   savedQuickReplies,
   features,
+  channel,
   placeholder = 'Digite uma mensagem...',
   maxLength,
   disabled = false,
@@ -161,6 +179,16 @@ export const MessageComposer = ({
   const sendLabel = labels?.send ?? DEFAULT_MESSAGE_COMPOSER_LABELS.send
   const removeAttachmentLabel = labels?.removeAttachment ?? DEFAULT_MESSAGE_COMPOSER_LABELS.removeAttachment
   const quickRepliesLabel = labels?.quickReplies ?? DEFAULT_MESSAGE_COMPOSER_LABELS.quickReplies
+  const attachDisabledHintLabel = labels?.attachDisabledHint ?? DEFAULT_MESSAGE_COMPOSER_LABELS.attachDisabledHint
+  const audioDisabledHintLabel = labels?.audioDisabledHint ?? DEFAULT_MESSAGE_COMPOSER_LABELS.audioDisabledHint
+  const quickRepliesDisabledHintLabel =
+    labels?.quickRepliesDisabledHint ?? DEFAULT_MESSAGE_COMPOSER_LABELS.quickRepliesDisabledHint
+  const capability = channelCapabilityFor(channel)
+  const attachmentsAllowed = capability.attachments.accepted
+  const audioRecordingAllowed = capability.audio.records
+  const quickRepliesAllowed = capability.quickReplies
+  const attachHintId = useId()
+  const quickRepliesHintId = useId()
   const [internalText, setInternalText] = useState('')
   const [showEmoji, setShowEmoji] = useState(false)
   const [attachments, setAttachments] = useState<FilePreview[]>([])
@@ -397,7 +425,14 @@ export const MessageComposer = ({
    * duração ou revisão diferentes) não muda de comportamento ao atualizar.
    */
   const effectiveIdleAction =
-    idleAction ?? (onAttach ? <AudioRecorderButton onRecorded={(file) => onAttach(file)} /> : undefined)
+    idleAction ??
+    (onAttach ? (
+      <AudioRecorderButton
+        onRecorded={(file) => onAttach(file)}
+        disabled={!audioRecordingAllowed}
+        disabledHint={audioRecordingAllowed ? undefined : audioDisabledHintLabel}
+      />
+    ) : undefined)
 
   const canSend = text.trim().length > 0 || attachments.length > 0
   const remaining = maxLength ? maxLength - text.length : null
@@ -546,18 +581,27 @@ export const MessageComposer = ({
         </div>
 
         {showQuickRepliesButton && (
-          <button
-            ref={quickRepliesTriggerRef}
-            type="button"
-            data-cv-tooltip={quickRepliesLabel}
-            aria-label={quickRepliesLabel}
-            onClick={openQuickRepliesViaButton}
-            className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-            </svg>
-          </button>
+          <>
+            <button
+              ref={quickRepliesTriggerRef}
+              type="button"
+              disabled={!quickRepliesAllowed}
+              data-cv-tooltip={quickRepliesAllowed ? quickRepliesLabel : quickRepliesDisabledHintLabel}
+              aria-label={quickRepliesLabel}
+              aria-describedby={quickRepliesAllowed ? undefined : quickRepliesHintId}
+              onClick={openQuickRepliesViaButton}
+              className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+              </svg>
+            </button>
+            {!quickRepliesAllowed && (
+              <span id={quickRepliesHintId} className="sr-only">
+                {quickRepliesDisabledHintLabel}
+              </span>
+            )}
+          </>
         )}
 
         {showAttachButton && (
@@ -571,15 +615,22 @@ export const MessageComposer = ({
               className="hidden"
             />
             <button
-              data-cv-tooltip={attachLabel}
+              disabled={!attachmentsAllowed}
+              data-cv-tooltip={attachmentsAllowed ? attachLabel : attachDisabledHintLabel}
               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-describedby={attachmentsAllowed ? undefined : attachHintId}
+              className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
               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>
+            {!attachmentsAllowed && (
+              <span id={attachHintId} className="sr-only">
+                {attachDisabledHintLabel}
+              </span>
+            )}
           </>
         )}
 

package/src/channelCapability.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'bun:test'
+import {
+  CONVERSATION_CHANNEL as CORE_CONVERSATION_CHANNEL,
+  CHANNEL_CAPABILITIES as CORE_CHANNEL_CAPABILITIES,
+} from '@adatechnology/conversation-contracts'
+
+import { CONVERSATION_CHANNEL } from './conversationChannel'
+import { channelCapabilityFor } from './channelCapability'
+
+const UI_CHANNELS: readonly string[] = Object.values(CONVERSATION_CHANNEL)
+
+describe('channelCapabilityFor', () => {
+  // O ponto da spec 211 (RF10): "duas verdades sobre capacidade de canal" é o risco que o plano
+  // registra. Para canal que o contrato conhece, a capacidade tem de ser exatamente o objeto do
+  // contrato — nunca uma cópia redeclarada aqui, porque cópia diverge no dia em que só uma muda.
+  it('para canal que o contrato conhece, devolve o objeto do contrato — nunca redeclarado', () => {
+    for (const channel of CORE_CONVERSATION_CHANNEL) {
+      if (!UI_CHANNELS.includes(channel)) continue
+
+      expect(channelCapabilityFor(channel as never)).toBe(CORE_CHANNEL_CAPABILITIES[channel])
+    }
+  })
+
+  // Messenger e Instagram são canais que a UI já servia antes do núcleo existir, e o contrato não
+  // os conhece (RF1). Convivência decidida: eles caem no fallback documentado do WhatsApp, o outro
+  // canal da Meta com a mesma janela de 24h — não ganham tabela própria.
+  it('canal que o contrato não conhece cai no fallback documentado, não numa tabela própria', () => {
+    expect(channelCapabilityFor(CONVERSATION_CHANNEL.MESSENGER)).toBe(CORE_CHANNEL_CAPABILITIES.whatsapp)
+    expect(channelCapabilityFor(CONVERSATION_CHANNEL.INSTAGRAM)).toBe(CORE_CHANNEL_CAPABILITIES.whatsapp)
+  })
+
+  it('ausência de canal continua sendo whatsapp, como antes desta mudança', () => {
+    expect(channelCapabilityFor(undefined)).toBe(CORE_CHANNEL_CAPABILITIES.whatsapp)
+  })
+})
+
+// As duas linhas que a tela usa para não mentir (D3, D4) — fixadas contra o contrato para que uma
+// mudança futura nele quebre este teste em vez de quebrar a tela em silêncio.
+describe('linhas da capacidade que a tela não pode fingir', () => {
+  it('email não confirma leitura — não existe pixel de rastreio aqui (D4)', () => {
+    expect(CORE_CHANNEL_CAPABILITIES.email.confirmsRead).toBe(false)
+  })
+
+  it('portal ouve áudio e não grava — Permissions-Policy nega o microfone lá (ADR-0073 §2)', () => {
+    expect(CORE_CHANNEL_CAPABILITIES.portal.audio).toEqual({ plays: true, records: false })
+  })
+})

package/src/channelCapability.ts

@@ -0,0 +1,37 @@
+/**
+ * Capacidade **comportamental** do canal (RF10, D3): confirma leitura, tem janela de sessão (e de
+ * quantas horas), aceita anexo e de que tamanho, aceita áudio, aceita resposta rápida, precisa de
+ * transporte próprio. Vem de `@adatechnology/conversation-contracts`, nunca redeclarada aqui — é a
+ * "duas verdades sobre capacidade de canal" que o plano da spec 211 lista como risco.
+ *
+ * `messenger` e `instagram` são os dois canais que esta UI já servia antes do núcleo de conversa
+ * existir, e que o contrato não conhece (ele nasceu do que a spec 183 exercitava: `email`,
+ * `whatsapp`, `app`, `portal`, `webchat`). Convivência decidida aqui: o vocabulário de canal desta
+ * UI (`conversationChannel.ts`) é a união dos dois, e a capacidade comportamental de Messenger e
+ * Instagram cai no fallback do WhatsApp — o outro canal da Meta, com a mesma janela de 24h, a mesma
+ * confirmação de leitura e o mesmo anexo/áudio. Não é aproximação arbitrária: as três plataformas
+ * (WhatsApp, Messenger, Instagram) compartilham a política de sessão de 24h da Meta.
+ */
+import {
+  CHANNEL_CAPABILITIES as CORE_CHANNEL_CAPABILITIES,
+  CONVERSATION_CHANNEL as CORE_CONVERSATION_CHANNEL,
+  type ChannelCapability,
+  type ConversationChannel as CoreConversationChannel,
+} from '@adatechnology/conversation-contracts'
+
+import { DEFAULT_CONVERSATION_CHANNEL, type ConversationChannel } from './conversationChannel'
+
+const CORE_CHANNELS: readonly string[] = CORE_CONVERSATION_CHANNEL
+
+function isCoreChannel(channel: ConversationChannel): channel is ConversationChannel & CoreConversationChannel {
+  return CORE_CHANNELS.includes(channel)
+}
+
+/** Fallback documentado para os canais da Meta que o contrato ainda não descreve. */
+const META_ONLY_CHANNEL_CAPABILITY: ChannelCapability = CORE_CHANNEL_CAPABILITIES.whatsapp
+
+export function channelCapabilityFor(channel: ConversationChannel | undefined): ChannelCapability {
+  const resolved = channel ?? DEFAULT_CONVERSATION_CHANNEL
+
+  return isCoreChannel(resolved) ? CORE_CHANNEL_CAPABILITIES[resolved] : META_ONLY_CHANNEL_CAPABILITY
+}

package/src/conversationChannel.ts

@@ -17,6 +17,7 @@ export const CONVERSATION_CHANNEL = {
   MESSENGER: 'messenger',
   INSTAGRAM: 'instagram',
   WEBCHAT: 'webchat',
+  EMAIL: 'email',
 } as const
 export type ConversationChannel = (typeof CONVERSATION_CHANNEL)[keyof typeof CONVERSATION_CHANNEL]
 
@@ -35,14 +36,21 @@ export const HANDLE_KIND = {
   PHONE: 'phone',
   USERNAME: 'username',
   SESSION: 'session',
+  EMAIL: 'email',
 } as const
 export type HandleKind = (typeof HANDLE_KIND)[keyof typeof HANDLE_KIND]
 
+/**
+ * Só o que é **exibição** do canal — rótulo, ícone, como reabrir, como mostrar o identificador.
+ * Capacidade de **comportamento** (confirma leitura, tem janela e de quantas horas, aceita anexo e
+ * áudio, precisa de transporte próprio) não mora mais aqui: para canal que
+ * `@adatechnology/conversation-contracts` conhece, ela vem de `channelCapabilityFor` (RF10). Manter
+ * os dois tipos de capacidade juntos foi o que criou a "janela" duplicada (`windowHours`) que a
+ * spec 211 mandou apagar — a mesma verdade não pode morar em dois lugares.
+ */
 export type ChannelCapabilities = {
   readonly label: string
   readonly icon: string
-  readonly hasSessionWindow: boolean
-  readonly windowHours: number
   readonly reopenMechanism: ReopenMechanism
   readonly handleKind: HandleKind
 }
@@ -51,8 +59,6 @@ export const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelC
   [CONVERSATION_CHANNEL.WHATSAPP]: {
     label: 'WhatsApp',
     icon: '💬',
-    hasSessionWindow: true,
-    windowHours: 24,
     reopenMechanism: REOPEN_MECHANISM.TEMPLATE,
     handleKind: HANDLE_KIND.PHONE,
   },
@@ -60,16 +66,12 @@ export const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelC
     // Messenger também tem 24h, mas reabre com message tag — não com template aprovado.
     label: 'Messenger',
     icon: '📨',
-    hasSessionWindow: true,
-    windowHours: 24,
     reopenMechanism: REOPEN_MECHANISM.TAG,
     handleKind: HANDLE_KIND.USERNAME,
   },
   [CONVERSATION_CHANNEL.INSTAGRAM]: {
     label: 'Instagram',
     icon: '📷',
-    hasSessionWindow: true,
-    windowHours: 24,
     reopenMechanism: REOPEN_MECHANISM.TAG,
     handleKind: HANDLE_KIND.USERNAME,
   },
@@ -77,11 +79,16 @@ export const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelC
     // Chat próprio: sem intermediário, sem janela. Bloquear o composer aqui seria inventar limite.
     label: 'Chat do site',
     icon: '🌐',
-    hasSessionWindow: false,
-    windowHours: 0,
     reopenMechanism: REOPEN_MECHANISM.NONE,
     handleKind: HANDLE_KIND.SESSION,
   },
+  [CONVERSATION_CHANNEL.EMAIL]: {
+    // RF10: e-mail entra no vocabulário; ele não reabre por template nem por tag — é só resposta.
+    label: 'E-mail',
+    icon: '✉️',
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.EMAIL,
+  },
 }
 
 export function capabilitiesOf(channel: ConversationChannel | undefined): ChannelCapabilities {
@@ -135,6 +142,8 @@ export function formatContactHandle(params: FormatContactHandleParams): string {
 
   if (handleKind === HANDLE_KIND.PHONE) return formatPhone(params.handle)
   if (handleKind === HANDLE_KIND.USERNAME) return params.handle.startsWith('@') ? params.handle : `@${params.handle}`
+  // Endereço de e-mail já é o identificador exibível — nem telefone, nem "@usuário".
+  if (handleKind === HANDLE_KIND.EMAIL) return params.handle
 
   // Sessão de chat de site é um id opaco: mostrar o hash inteiro não ajuda ninguém.
   return `Visitante ${params.handle.slice(-6)}`