@adatechnology/conversations-ui 0.4.2 → 0.6.0

package/src/ChannelIcon.tsx

@@ -14,6 +14,8 @@ export const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>>
   [CONVERSATION_CHANNEL.WHATSAPP]: '#25D366',
   [CONVERSATION_CHANNEL.MESSENGER]: '#0084FF',
   [CONVERSATION_CHANNEL.INSTAGRAM]: '#E4405F',
+  [CONVERSATION_CHANNEL.APP]: '#7C3AED',
+  [CONVERSATION_CHANNEL.PORTAL]: '#0F766E',
   [CONVERSATION_CHANNEL.WEBCHAT]: '#64748B',
   [CONVERSATION_CHANNEL.EMAIL]: '#EA4335',
 }

package/src/MessageText.test.tsx

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageText } from './MessageText'
+import { MessageTextCopiedBadge } from './MessageTextCopiedBadge'
+import type { MessagePayload } from './types'
+
+const TEXT_MESSAGE: MessagePayload = {
+  id: 'msg-1',
+  type: 'text',
+  direction: 'inbound',
+  sender: 'customer',
+  timestamp: '2026-08-05T12:00:00.000Z',
+  content: 'Olá *mundo*',
+}
+
+describe('MessageText', () => {
+  it('com appearance="stylesheet" usa a classe cv-message-text e nenhuma utilitária Tailwind', () => {
+    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-message-text')
+    expect(markup).not.toContain('whitespace-pre-wrap')
+    expect(markup).not.toContain('select-all')
+    expect(markup).not.toContain('text-[')
+    expect(markup).not.toContain('[&_')
+  })
+
+  it('o badge em stylesheet usa a classe cv-message-text__copied e nenhuma utilitária Tailwind', () => {
+    const markup = renderToStaticMarkup(<MessageTextCopiedBadge appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-message-text__copied')
+    expect(markup).not.toContain('absolute')
+    expect(markup).not.toContain('bg-[')
+    expect(markup).not.toContain('px-1.5')
+    expect(markup).not.toContain('-translate-y-full')
+  })
+
+  it('por padrão é o div da 0.4.2: classes Tailwind, sem role nem tabindex', () => {
+    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} />)
+
+    expect(markup).toContain('select-all')
+    expect(markup).toContain('whitespace-pre-wrap')
+    expect(markup).not.toContain('role=')
+    expect(markup).not.toContain('tabindex')
+    expect(markup).not.toContain('cv-message-text')
+  })
+
+  it('com accessibleCopy liga role=button e tabindex', () => {
+    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} accessibleCopy />)
+
+    expect(markup).toContain('role="button"')
+    expect(markup).toContain('tabindex="0"')
+  })
+
+  it('em stylesheet a classe copiável (user-select) só aparece quando copia', () => {
+    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-message-text--copyable')
+  })
+
+  it('com copyOnClick={false} em stylesheet não copia: sem role, sem tabindex e sem classe copiável', () => {
+    const markup = renderToStaticMarkup(
+      <MessageText message={TEXT_MESSAGE} copyOnClick={false} accessibleCopy appearance="stylesheet" />,
+    )
+
+    expect(markup).not.toContain('role="button"')
+    expect(markup).not.toContain('tabindex')
+    expect(markup).not.toContain('cv-message-text--copyable')
+    expect(markup).toContain('class="cv-message-text"')
+  })
+
+  it('o badge usa "Copiado!" por padrão e aceita outro rótulo', () => {
+    expect(renderToStaticMarkup(<MessageTextCopiedBadge />)).toContain('Copiado!')
+    expect(renderToStaticMarkup(<MessageTextCopiedBadge label="Copied" />)).toContain('Copied')
+  })
+})

package/src/MessageText.tsx

@@ -1,41 +1,57 @@
 import { useCallback, useState } from 'react'
 import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import type { MessagePayload } from './types'
-import { useConversations } from './providers/ConversationsProvider'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+import { resolveCopyInteraction } from './messageTextCopyInteraction'
+import { MessageTextCopiedBadge, type MessageTextAppearance } from './MessageTextCopiedBadge'
 
 export interface MessageTextProps {
   message: MessagePayload
+  /** Defaults to true (tap copies the text, as in 0.4.2); false disables copying. */
+  copyOnClick?: boolean
+  /** Opt-in: exposes the copy target as a keyboard-operable button (role, tabIndex, Enter/Space). Defaults to false. */
+  accessibleCopy?: boolean
+  /** Text of the badge shown after copying. Defaults to 'Copiado!', as in 0.4.2. */
+  copiedLabel?: string
+  /** 'tailwind' (default) keeps the 0.4.2 utility classes; 'stylesheet' uses the .cv-* rules from styles.css. */
+  appearance?: MessageTextAppearance
 }
 
-export function MessageText({ message }: MessageTextProps) {
+const TAILWIND_CLASS =
+  'text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through'
+
+function resolveClassName(appearance: MessageTextAppearance, copyOnClick: boolean): string {
+  if (appearance === 'tailwind') return TAILWIND_CLASS
+  return copyOnClick ? 'cv-message-text cv-message-text--copyable' : 'cv-message-text'
+}
+
+export function MessageText({
+  message, copyOnClick = true, accessibleCopy = false, copiedLabel, appearance = 'tailwind',
+}: MessageTextProps) {
   const [copied, setCopied] = useState(false)
 
   const handleCopy = useCallback(async () => {
-    if (!message.content) return
+    if (!copyOnClick || !message.content) return
     try {
       await navigator.clipboard.writeText(message.content)
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
-      // Clipboard not available
     }
-  }, [message.content])
+  }, [copyOnClick, message.content])
 
   if (message.type === 'template')
     return <p className={`text-sm italic ${CHAT_TEXT_SECONDARY_CLASS}`}>{message.content ?? 'Template message'}</p>
 
+  const interactionProps = resolveCopyInteraction({ copyOnClick, accessibleCopy, onCopy: handleCopy })
+
   return (
     <div
-      onClick={handleCopy}
-      className="text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through"
+      className={resolveClassName(appearance, copyOnClick)}
+      {...interactionProps}
     >
       <div>{parseWhatsAppFormatting(message.content ?? '')}</div>
-      {copied && (
-        <span className="absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg">
-          Copiado!
-        </span>
-      )}
+      {copied && <MessageTextCopiedBadge label={copiedLabel} appearance={appearance} />}
     </div>
   )
 }

package/src/MessageTextCopiedBadge.tsx

@@ -0,0 +1,15 @@
+export type MessageTextAppearance = 'tailwind' | 'stylesheet'
+
+export interface MessageTextCopiedBadgeProps {
+  label?: string
+  /** 'tailwind' (default) keeps the 0.4.2 utility classes; 'stylesheet' uses the .cv-* rules from styles.css. */
+  appearance?: MessageTextAppearance
+}
+
+const TAILWIND_CLASS =
+  'absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg'
+
+export function MessageTextCopiedBadge({ label = 'Copiado!', appearance = 'tailwind' }: MessageTextCopiedBadgeProps) {
+  const className = appearance === 'stylesheet' ? 'cv-message-text__copied' : TAILWIND_CLASS
+  return <span className={className}>{label}</span>
+}

package/src/StatusTicks.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { StatusTicks } from './StatusTicks'
+
+const TAILWIND_UTILITIES = ['text-sky-500', 'text-red-500', 'text-black/40', 'flex', 'cursor-help', 'leading-none']
+
+describe('StatusTicks', () => {
+  it('em stylesheet um status desconhecido cai em sent (um tique)', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="xyz" appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-status-ticks--sent')
+  })
+
+  it('em stylesheet renderiza o estado queued com relógio e rótulo acessível', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="queued" appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-status-ticks--queued')
+    expect(markup).toContain('aria-label="Queued"')
+  })
+
+  it('em stylesheet o rótulo de queued é configurável', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="queued" appearance="stylesheet" queuedLabel="Na fila" />)
+
+    expect(markup).toContain('aria-label="Na fila"')
+  })
+
+  it('em stylesheet trata bounced como failed', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="bounced" appearance="stylesheet" />)
+
+    expect(markup).toContain('cv-status-ticks--failed')
+    expect(markup).not.toContain('cv-status-ticks--bounced')
+  })
+
+  it('por padrão mantém as utilitárias Tailwind e nenhum aria-label (0.4.2)', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="read" />)
+
+    expect(markup).toContain('text-sky-500')
+    expect(markup).toContain('cursor-help')
+    expect(markup).not.toContain('cv-status-ticks')
+    expect(markup).not.toContain('aria-label')
+  })
+
+  it.each(['sent', 'delivered', 'read', 'failed', 'queued'])('em stylesheet usa só classes cv-* em %s', (status) => {
+    const markup = renderToStaticMarkup(<StatusTicks status={status} appearance="stylesheet" />)
+
+    expect(markup).toContain(`cv-status-ticks--${status}`)
+    for (const utility of TAILWIND_UTILITIES) expect(markup).not.toContain(utility)
+    expect(markup).not.toContain('text-[')
+  })
+})

package/src/StatusTicks.tsx

@@ -1,17 +1,30 @@
-import { AlertTriangle } from 'lucide-react'
+import { AlertTriangle, Clock } from 'lucide-react'
 
 export interface StatusTicksProps {
   status: string
   title?: string
+  /** 'tailwind' (default) keeps the 0.4.2 markup; 'stylesheet' uses .cv-status-ticks--* and adds queued/bounced handling. */
+  appearance?: 'tailwind' | 'stylesheet'
+  /** Accessible label of the queued state (stylesheet appearance only). Defaults to 'Queued'. */
+  queuedLabel?: string
 }
 
-const STATUS_COLOR_CLASS: Record<string, string> = {
+const TAILWIND_COLOR_CLASS: Record<string, string> = {
   sent: 'text-black/40 dark:text-white/40',
   delivered: 'text-black/40 dark:text-white/40',
   read: 'text-sky-500',
   failed: 'text-red-500',
 }
 
+const STYLESHEET_MODIFIER: Record<string, string> = {
+  queued: 'queued',
+  sent: 'sent',
+  delivered: 'delivered',
+  read: 'read',
+  failed: 'failed',
+  bounced: 'failed',
+}
+
 function Ticks({ double }: { double: boolean }) {
   return (
     <svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -26,10 +39,27 @@ function Ticks({ double }: { double: boolean }) {
   )
 }
 
-// Paridade com financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx —
-// mesmo path de SVG, mesma cor por status (read → sky-500, failed → red-500 com AlertTriangle).
-export function StatusTicks({ status, title }: StatusTicksProps) {
-  const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent
+function StylesheetStatusTicks({ status, title, queuedLabel }: { status: string; title?: string; queuedLabel: string }) {
+  const modifier = STYLESHEET_MODIFIER[status] ?? 'sent'
+  const ariaLabel = modifier === 'queued' ? queuedLabel : undefined
+  const icon =
+    modifier === 'failed' ? <AlertTriangle size={11} /> : modifier === 'queued' ? <Clock size={11} /> : <Ticks double={modifier !== 'sent'} />
+
+  return (
+    <span
+      className={`cv-status-ticks cv-status-ticks--${modifier}`}
+      data-cv-tooltip={title ?? ariaLabel}
+      aria-label={ariaLabel}
+    >
+      {icon}
+    </span>
+  )
+}
+
+export function StatusTicks({ status, title, appearance = 'tailwind', queuedLabel = 'Queued' }: StatusTicksProps) {
+  if (appearance === 'stylesheet') return <StylesheetStatusTicks status={status} title={title} queuedLabel={queuedLabel} />
+
+  const colorClass = TAILWIND_COLOR_CLASS[status] ?? TAILWIND_COLOR_CLASS.sent
 
   return (
     <span className={`cursor-help leading-none flex items-center ${colorClass}`} data-cv-tooltip={title}>

package/src/buildOutput.test.ts

@@ -77,3 +77,44 @@ describe('o bundle do host não paga por @xyflow/react sem pedir', () => {
     expect(await distText('index.js')).not.toContain('@xyflow/react')
   })
 })
+
+describe('a visão do participante é leve e isolada', () => {
+  const PARTICIPANT_ENTRY_LIMIT_BYTES = 250 * 1024
+
+  async function participantBundle(): Promise<string> {
+    // O entry mais os chunks relativos que ele importa, transitivamente: é o que o host baixa.
+    const seen = new Set<string>()
+    const queue = ['participant/index.js']
+    let total = ''
+    while (queue.length > 0) {
+      const file = queue.shift() as string
+      if (seen.has(file)) continue
+      seen.add(file)
+      const text = await distText(file)
+      total += text
+      for (const match of text.matchAll(/(?:from|import)\s*"(\.[^"]+\.js)"/g)) {
+        const target = new URL(match[1] as string, `file:///${file}`).pathname.slice(1)
+        queue.push(target)
+      }
+    }
+    return total
+  }
+
+  it('não puxa o xyflow nem o ConversationsWorkspace', async () => {
+    const bundle = await participantBundle()
+
+    expect(bundle).not.toContain('xyflow')
+    expect(bundle).not.toContain('ConversationsWorkspace')
+  })
+
+  it('fica abaixo de 250 KB com os chunks que importa', async () => {
+    const bundle = await participantBundle()
+
+    expect(new TextEncoder().encode(bundle).length).toBeLessThan(PARTICIPANT_ENTRY_LIMIT_BYTES)
+  })
+
+  it('entrega a tela e os tipos no subpath /participant', async () => {
+    expect(await distText('participant/index.js')).toContain('ParticipantConversations')
+    expect(await distText('participant/index.d.ts')).toContain('ParticipantConversations')
+  })
+})

package/src/channelCapability.test.ts

@@ -45,3 +45,20 @@ describe('linhas da capacidade que a tela não pode fingir', () => {
     expect(CORE_CHANNEL_CAPABILITIES.portal.audio).toEqual({ plays: true, records: false })
   })
 })
+
+// App e portal são canais do contrato que a UI passou a exibir (T1.0a): a capacidade vem do
+// contrato, nunca da regra do WhatsApp, que daria janela de 24h e 100 MB onde não existem.
+describe('canais app e portal', () => {
+  it('app: anexo de 25 MB, grava áudio e não tem janela de sessão', () => {
+    const capability = channelCapabilityFor(CONVERSATION_CHANNEL.APP)
+
+    expect(capability).toBe(CORE_CHANNEL_CAPABILITIES.app)
+    expect(capability.attachments.maxBytes).toBe(25 * 1024 * 1024)
+    expect(capability.audio.records).toBe(true)
+    expect(capability.sessionWindowHours).toBeNull()
+  })
+
+  it('portal: ouve áudio e não grava', () => {
+    expect(channelCapabilityFor(CONVERSATION_CHANNEL.PORTAL).audio.records).toBe(false)
+  })
+})

package/src/conversationChannel.test.ts

@@ -1,5 +1,15 @@
 import { describe, expect, it } from 'bun:test'
-import { CONVERSATION_CHANNEL, CHANNEL_FILTER_ALL, channelFiltersFor } from './conversationChannel'
+import { CONVERSATION_CHANNEL as CORE_CONVERSATION_CHANNEL } from '@adatechnology/conversation-contracts'
+
+import {
+  CHANNEL_CAPABILITIES,
+  CHANNEL_FILTER_ALL,
+  CONVERSATION_CHANNEL,
+  HANDLE_KIND,
+  REOPEN_MECHANISM,
+  channelFiltersFor,
+  type ConversationChannel,
+} from './conversationChannel'
 
 describe('channelFiltersFor', () => {
   // O ponto do helper: a barra oferece só o que existe. Oferecer Instagram numa conta que só tem
@@ -51,3 +61,22 @@ describe('channelFiltersFor', () => {
     expect(first).toEqual(second)
   })
 })
+
+describe('canais do contrato exibidos pela UI', () => {
+  // Canal novo no contrato sem entrada aqui reprova no tsc (Record completo); este teste cobre o
+  // mesmo ponto em runtime, para o caso de o vocabulário ser alterado sem recompilar a UI.
+  it('todo canal do contrato tem entrada de exibição', () => {
+    for (const channel of CORE_CONVERSATION_CHANNEL) {
+      expect(CHANNEL_CAPABILITIES[channel as ConversationChannel]).toBeDefined()
+    }
+  })
+
+  it('app e portal existem como canais, com rótulo e sem reabertura por template ou tag', () => {
+    expect(CONVERSATION_CHANNEL.APP).toBe('app')
+    expect(CONVERSATION_CHANNEL.PORTAL).toBe('portal')
+    expect(CHANNEL_CAPABILITIES.app.reopenMechanism).toBe(REOPEN_MECHANISM.NONE)
+    expect(CHANNEL_CAPABILITIES.portal.reopenMechanism).toBe(REOPEN_MECHANISM.NONE)
+    expect(CHANNEL_CAPABILITIES.app.handleKind).toBe(HANDLE_KIND.SESSION)
+    expect(CHANNEL_CAPABILITIES.portal.handleKind).toBe(HANDLE_KIND.SESSION)
+  })
+})

package/src/conversationChannel.ts

@@ -10,16 +10,22 @@
  * funcionando exatamente como antes.
  */
 
+import type { ConversationChannel as CoreConversationChannel } from '@adatechnology/conversation-contracts'
+
 import { formatPhone, phoneCountryFlag } from './lib/phone'
 
 export const CONVERSATION_CHANNEL = {
   WHATSAPP: 'whatsapp',
   MESSENGER: 'messenger',
   INSTAGRAM: 'instagram',
+  APP: 'app',
+  PORTAL: 'portal',
   WEBCHAT: 'webchat',
   EMAIL: 'email',
 } as const
-export type ConversationChannel = (typeof CONVERSATION_CHANNEL)[keyof typeof CONVERSATION_CHANNEL]
+
+/** O que o contrato conhece, mais os dois canais da Meta que a UI já servia antes dele. */
+export type ConversationChannel = CoreConversationChannel | 'messenger' | 'instagram'
 
 export const DEFAULT_CONVERSATION_CHANNEL: ConversationChannel = CONVERSATION_CHANNEL.WHATSAPP
 
@@ -75,6 +81,18 @@ export const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelC
     reopenMechanism: REOPEN_MECHANISM.TAG,
     handleKind: HANDLE_KIND.USERNAME,
   },
+  [CONVERSATION_CHANNEL.APP]: {
+    label: 'App',
+    icon: '📱',
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION,
+  },
+  [CONVERSATION_CHANNEL.PORTAL]: {
+    label: 'Portal',
+    icon: '🔗',
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION,
+  },
   [CONVERSATION_CHANNEL.WEBCHAT]: {
     // Chat próprio: sem intermediário, sem janela. Bloquear o composer aqui seria inventar limite.
     label: 'Chat do site',

package/src/legacyChannels.golden.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'bun:test'
+
+import type { ChannelCapability } from '@adatechnology/conversation-contracts'
+
+import { channelCapabilityFor } from './channelCapability'
+import { CHANNEL_FILTER_ALL, channelFiltersFor, type ConversationChannel } from './conversationChannel'
+
+const MEGABYTE = 1024 * 1024
+
+// Values published by conversation-contracts 0.3.0 (b9f1ef6), read by the 0.4.2 UI.
+const LEGACY_WHATSAPP_CAPABILITY: ChannelCapability = {
+  confirmsRead: true,
+  sessionWindowHours: 24,
+  attachments: { accepted: true, maxBytes: 100 * MEGABYTE, maxTotalBytes: null },
+  audio: { plays: true, records: true },
+  quickReplies: true,
+  requiresTransport: false,
+  reachableStatuses: ['queued', 'sent', 'delivered', 'read', 'failed'],
+}
+
+const LEGACY_EMAIL_CAPABILITY: ChannelCapability = {
+  confirmsRead: false,
+  sessionWindowHours: null,
+  attachments: { accepted: true, maxBytes: 10 * MEGABYTE, maxTotalBytes: 25 * MEGABYTE },
+  audio: { plays: true, records: true },
+  quickReplies: true,
+  requiresTransport: true,
+  reachableStatuses: ['queued', 'sent', 'delivered', 'failed', 'bounced'],
+}
+
+const LEGACY_WEBCHAT_CAPABILITY: ChannelCapability = {
+  confirmsRead: false,
+  sessionWindowHours: null,
+  attachments: { accepted: true, maxBytes: 10 * MEGABYTE, maxTotalBytes: null },
+  audio: { plays: false, records: false },
+  quickReplies: true,
+  requiresTransport: false,
+  reachableStatuses: ['queued', 'delivered', 'failed'],
+}
+
+describe('channelCapabilityFor mantém os valores da 0.4.2', () => {
+  it('G9: whatsapp', () => {
+    expect(channelCapabilityFor('whatsapp')).toEqual(LEGACY_WHATSAPP_CAPABILITY)
+  })
+
+  it('G9: email', () => {
+    expect(channelCapabilityFor('email')).toEqual(LEGACY_EMAIL_CAPABILITY)
+  })
+
+  it('G9: webchat', () => {
+    expect(channelCapabilityFor('webchat')).toEqual(LEGACY_WEBCHAT_CAPABILITY)
+  })
+
+  it('G9: messenger cai na capacidade do WhatsApp', () => {
+    expect(channelCapabilityFor('messenger')).toEqual(LEGACY_WHATSAPP_CAPABILITY)
+  })
+
+  it('G9: instagram cai na capacidade do WhatsApp', () => {
+    expect(channelCapabilityFor('instagram')).toEqual(LEGACY_WHATSAPP_CAPABILITY)
+  })
+
+  it('G9: canal ausente cai na capacidade do WhatsApp', () => {
+    expect(channelCapabilityFor(undefined)).toEqual(LEGACY_WHATSAPP_CAPABILITY)
+  })
+})
+
+describe('channelFiltersFor com canais antigos mantém lista e ordem da 0.4.2', () => {
+  it('G9: os cinco canais antigos saem na ordem do catálogo, não na de chegada', () => {
+    const channels: ConversationChannel[] = ['email', 'webchat', 'instagram', 'messenger', 'whatsapp']
+
+    expect(channelFiltersFor(channels.map((channel) => ({ channel })))).toEqual([
+      { value: CHANNEL_FILTER_ALL, label: 'Todos' },
+      { value: 'whatsapp', label: 'WhatsApp' },
+      { value: 'messenger', label: 'Messenger' },
+      { value: 'instagram', label: 'Instagram' },
+      { value: 'webchat', label: 'Chat do site' },
+      { value: 'email', label: 'E-mail' },
+    ])
+  })
+
+  it('G9: conversa sem canal conta como WhatsApp e um canal só não gera filtro', () => {
+    expect(channelFiltersFor([{}, { channel: 'whatsapp' }])).toEqual([])
+    expect(channelFiltersFor([{}, { channel: 'email' }])).toEqual([
+      { value: CHANNEL_FILTER_ALL, label: 'Todos' },
+      { value: 'whatsapp', label: 'WhatsApp' },
+      { value: 'email', label: 'E-mail' },
+    ])
+  })
+})

package/src/legacyDefaults.golden.test.tsx

@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageBubble } from './MessageBubble'
+import { MessageText } from './MessageText'
+import { MessageTextCopiedBadge } from './MessageTextCopiedBadge'
+import { StatusTicks } from './StatusTicks'
+import type { MessagePayload } from './types'
+
+// Literal markup rendered by @adatechnology/conversations-ui 0.4.2 (b9f1ef6): the default appearance of
+// these shared components must never drift, because hosts upgrade without touching their markup.
+const LEGACY_TEXT_MARKUP =
+  '<div class="text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&amp;_strong]:font-bold [&amp;_em]:italic [&amp;_del]:line-through"><div><strong>oi</strong></div></div>'
+
+const LEGACY_TEMPLATE_MARKUP = '<p class="text-sm italic text-[#667781] dark:text-[#8696a0]">Olá modelo</p>'
+
+const LEGACY_TICKS_SENT =
+  '<span class="cursor-help leading-none flex items-center text-black/40 dark:text-white/40"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>'
+
+const LEGACY_TICKS_DELIVERED =
+  '<span class="cursor-help leading-none flex items-center text-black/40 dark:text-white/40"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>'
+
+const LEGACY_TICKS_READ =
+  '<span class="cursor-help leading-none flex items-center text-sky-500"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>'
+
+const LEGACY_TICKS_FAILED =
+  '<span class="cursor-help leading-none flex items-center text-red-500"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span>'
+
+const LEGACY_TICKS_READ_WITH_TITLE =
+  '<span class="cursor-help leading-none flex items-center text-sky-500" data-cv-tooltip="x"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>'
+
+const LEGACY_COPIED_BADGE_MARKUP =
+  '<span class="absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg">Copiado!</span>'
+
+const LEGACY_UNKNOWN_STATUS_MARKUP = LEGACY_TICKS_DELIVERED
+
+function buildMessage(type: MessagePayload['type'], content: string): MessagePayload {
+  return {
+    id: 'msg-1',
+    type,
+    direction: 'inbound',
+    sender: 'customer',
+    timestamp: '2026-08-05T12:00:00.000Z',
+    content,
+  }
+}
+
+describe('MessageText mantém o markup da 0.4.2 por padrão', () => {
+  it('G1: texto comum é um div clicável sem role, tabindex nem teclado', () => {
+    const markup = renderToStaticMarkup(<MessageText message={buildMessage('text', '*oi*')} />)
+
+    expect(markup).toBe(LEGACY_TEXT_MARKUP)
+    expect(markup).not.toContain('role=')
+    expect(markup).not.toContain('tabindex')
+  })
+
+  it('G2: template continua sendo o parágrafo em itálico', () => {
+    const markup = renderToStaticMarkup(<MessageText message={buildMessage('template', 'Olá modelo')} />)
+
+    expect(markup).toBe(LEGACY_TEMPLATE_MARKUP)
+  })
+
+  it('G3: o selo de cópia é "Copiado!" com a classe Tailwind exata', () => {
+    expect(renderToStaticMarkup(<MessageTextCopiedBadge />)).toBe(LEGACY_COPIED_BADGE_MARKUP)
+  })
+})
+
+describe('StatusTicks mantém o markup da 0.4.2 por padrão', () => {
+  it('G4: sent', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="sent" />)).toBe(LEGACY_TICKS_SENT)
+  })
+
+  it('G4: delivered', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="delivered" />)).toBe(LEGACY_TICKS_DELIVERED)
+  })
+
+  it('G4: read', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="read" />)).toBe(LEGACY_TICKS_READ)
+  })
+
+  it('G4: failed', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="failed" />)).toBe(LEGACY_TICKS_FAILED)
+  })
+
+  it('G5: status desconhecido desenha dois tiques cinza', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="pending" />)).toBe(LEGACY_UNKNOWN_STATUS_MARKUP)
+    expect(renderToStaticMarkup(<StatusTicks status="xyz" />)).toBe(LEGACY_UNKNOWN_STATUS_MARKUP)
+  })
+
+  it('G5: queued e bounced, que a 0.4.2 nunca recebia, também caem nos dois tiques cinza', () => {
+    expect(renderToStaticMarkup(<StatusTicks status="queued" />)).toBe(LEGACY_UNKNOWN_STATUS_MARKUP)
+    expect(renderToStaticMarkup(<StatusTicks status="bounced" />)).toBe(LEGACY_UNKNOWN_STATUS_MARKUP)
+  })
+
+  it('G6: title vira data-cv-tooltip e nunca aria-label', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="read" title="x" />)
+
+    expect(markup).toBe(LEGACY_TICKS_READ_WITH_TITLE)
+    expect(markup).toContain('data-cv-tooltip="x"')
+    expect(markup).not.toContain('aria-label')
+  })
+})
+
+describe('MessageBubble mantém o selo da 0.4.2', () => {
+  it('G7: mensagem enviada e lida contém o StatusTicks idêntico ao da 0.4.2', () => {
+    const message: MessagePayload = {
+      ...buildMessage('text', 'oi'),
+      direction: 'outbound',
+      sender: 'agent',
+      status: 'read',
+    }
+
+    expect(renderToStaticMarkup(<MessageBubble message={message} isMine />)).toContain(LEGACY_TICKS_READ)
+  })
+
+  it('G7: bounced no balão não vira falha: sem anel de erro e com dois tiques cinza', () => {
+    const message: MessagePayload = {
+      ...buildMessage('text', 'oi'),
+      direction: 'outbound',
+      sender: 'agent',
+      status: 'bounced',
+    }
+    const markup = renderToStaticMarkup(<MessageBubble message={message} isMine />)
+
+    expect(markup).toContain(LEGACY_TICKS_DELIVERED)
+  })
+})