@adatechnology/conversations-ui 0.5.0 → 0.6.0

package/dist/preview/index.js

@@ -16,9 +16,9 @@ import {
   mediaTypeOf,
   simulatorPanelLabelsOf,
   toConversationSimulatorClient
-} from "../chunk-JXJCPN34.js";
+} from "../chunk-FAQLC3TX.js";
 import "../chunk-MRVFFJEH.js";
-import "../chunk-RJMSM3YA.js";
+import "../chunk-O6457XHK.js";
 import "../chunk-CBYEHPX6.js";
 
 // src/preview/previewStore.ts

package/dist/styles.css

@@ -1527,6 +1527,46 @@
   text-transform: uppercase;
   color: var(--cv-p-i-accent);
 }
+.cv-p-inbox__icon {
+  color: var(--cv-p-i-accent);
+  font-size: 1rem;
+}
+.cv-p-inbox__icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.cv-p-row__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+}
+.cv-p-channels {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.cv-p-channel {
+  display: inline-grid;
+  place-items: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border: 1px solid var(--cv-p-i-border);
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-channel svg {
+  display: block;
+}
+.cv-p-channel--whatsapp {
+  color: var(--cv-p-channel-whatsapp, #20914f);
+}
+.cv-p-channel--app {
+  color: var(--cv-p-channel-app, var(--cv-p-i-accent));
+}
 .cv-p-row__body {
   display: flex;
   flex-direction: column;
@@ -1578,6 +1618,12 @@
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--cv-p-i-border);
 }
+.cv-p-thread__heading {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
 .cv-p-thread__title {
   flex: 1;
   margin: 0;
@@ -1823,7 +1869,59 @@
   font: inherit;
   cursor: pointer;
 }
+.cv-p-protocol {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font:
+    0.7rem "SFMono-Regular",
+    Consolas,
+    monospace;
+  letter-spacing: 0.04em;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-protocol--header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.cv-p-protocol__copy {
+  min-height: var(--cv-p-i-touch);
+  min-width: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  background: transparent;
+  border: 1px solid var(--cv-p-i-border);
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text);
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.cv-p-search {
+  padding: 0.625rem 1rem;
+  border-bottom: 1px solid var(--cv-p-i-border);
+}
+.cv-p-search__input {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--cv-p-i-text);
+  background: var(--cv-p-i-surface);
+  border: 1px solid var(--cv-p-i-border);
+  border-radius: var(--cv-p-i-radius);
+}
+.cv-p-search__input:focus-visible,
+.cv-p-protocol__copy:focus-visible {
+  outline: 2px solid var(--cv-p-i-accent);
+  outline-offset: 2px;
+}
 @media (prefers-reduced-motion: no-preference) {
+  .cv-p-protocol__copy,
+  .cv-p-search__input {
+    transition: border-color 0.12s, background-color 0.12s;
+  }
   .cv-p-row,
   .cv-p-button,
   .cv-p-chip {

package/package.json

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

package/src/MessageBubble.test.tsx

@@ -56,13 +56,13 @@ describe('MessageBubble e o selo de lida por canal (D4, CA04)', () => {
   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('cv-status-ticks--read')
+    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('cv-status-ticks--read')
+    expect(markup).toContain('text-sky-500')
   })
 
   it('sem channel, o padrão continua sendo whatsapp — comportamento de antes desta mudança', () => {

package/src/MessageText.test.tsx

@@ -15,8 +15,8 @@ const TEXT_MESSAGE: MessagePayload = {
 }
 
 describe('MessageText', () => {
-  it('usa a classe cv-message-text e nenhuma utilitária Tailwind', () => {
-    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} />)
+  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')
@@ -25,8 +25,8 @@ describe('MessageText', () => {
     expect(markup).not.toContain('[&_')
   })
 
-  it('o badge usa a classe cv-message-text__copied e nenhuma utilitária Tailwind', () => {
-    const markup = renderToStaticMarkup(<MessageTextCopiedBadge />)
+  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')
@@ -35,16 +35,33 @@ describe('MessageText', () => {
     expect(markup).not.toContain('-translate-y-full')
   })
 
-  it('por padrão copia ao toque: role=button, tabindex e classe copiável (user-select só aí)', () => {
+  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} não copia: sem role, sem tabindex e sem classe copiável', () => {
-    const markup = renderToStaticMarkup(<MessageText message={TEXT_MESSAGE} copyOnClick={false} />)
+  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')
@@ -52,8 +69,8 @@ describe('MessageText', () => {
     expect(markup).toContain('class="cv-message-text"')
   })
 
-  it('o badge usa "Copied" por padrão e aceita outro rótulo', () => {
-    expect(renderToStaticMarkup(<MessageTextCopiedBadge />)).toContain('Copied')
-    expect(renderToStaticMarkup(<MessageTextCopiedBadge label="Copiado!" />)).toContain('Copiado!')
+  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,18 +1,33 @@
-import { useCallback, useState, type KeyboardEvent } from 'react'
+import { useCallback, useState } from 'react'
 import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import type { MessagePayload } from './types'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
-import { MessageTextCopiedBadge } from './MessageTextCopiedBadge'
+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.3.1); false disables copying and its button semantics. */
+  /** Defaults to true (tap copies the text, as in 0.4.2); false disables copying. */
   copyOnClick?: boolean
-  /** Text of the badge shown after copying; absent means the package default ("Copied"). */
+  /** 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, copyOnClick = true, copiedLabel }: 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 () => {
@@ -22,28 +37,21 @@ export function MessageText({ message, copyOnClick = true, copiedLabel }: Messag
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
-      // Clipboard not available
     }
   }, [copyOnClick, message.content])
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return
-    event.preventDefault()
-    void handleCopy()
-  }
-
   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
-      className={copyOnClick ? 'cv-message-text cv-message-text--copyable' : 'cv-message-text'}
-      {...(copyOnClick
-        ? { role: 'button', tabIndex: 0, onClick: handleCopy, onKeyDown: handleKeyDown }
-        : {})}
+      className={resolveClassName(appearance, copyOnClick)}
+      {...interactionProps}
     >
       <div>{parseWhatsAppFormatting(message.content ?? '')}</div>
-      {copied && <MessageTextCopiedBadge label={copiedLabel} />}
+      {copied && <MessageTextCopiedBadge label={copiedLabel} appearance={appearance} />}
     </div>
   )
 }

package/src/MessageTextCopiedBadge.tsx

@@ -1,7 +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
 }
 
-export function MessageTextCopiedBadge({ label = 'Copied' }: MessageTextCopiedBadgeProps) {
-  return <span className="cv-message-text__copied">{label}</span>
+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

@@ -6,22 +6,43 @@ import { StatusTicks } from './StatusTicks'
 const TAILWIND_UTILITIES = ['text-sky-500', 'text-red-500', 'text-black/40', 'flex', 'cursor-help', 'leading-none']
 
 describe('StatusTicks', () => {
-  it('renderiza o estado queued com relógio e rótulo acessível', () => {
-    const markup = renderToStaticMarkup(<StatusTicks status="queued" />)
+  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('trata bounced como failed', () => {
-    const markup = renderToStaticMarkup(<StatusTicks status="bounced" />)
+  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.each(['sent', 'delivered', 'read', 'failed', 'queued'])('usa só classes cv-* em %s', (status) => {
-    const markup = renderToStaticMarkup(<StatusTicks status={status} />)
+  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)

package/src/StatusTicks.tsx

@@ -3,9 +3,20 @@ 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_MODIFIER: 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',
@@ -14,8 +25,6 @@ const STATUS_MODIFIER: Record<string, string> = {
   bounced: 'failed',
 }
 
-const QUEUED_LABEL = 'Queued'
-
 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">
@@ -30,17 +39,11 @@ 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).
-function StatusIcon({ modifier }: { modifier: string }) {
-  if (modifier === 'failed') return <AlertTriangle size={11} />
-  if (modifier === 'queued') return <Clock size={11} />
-  return <Ticks double={modifier !== 'sent'} />
-}
-
-export function StatusTicks({ status, title }: StatusTicksProps) {
-  const modifier = STATUS_MODIFIER[status] ?? 'sent'
-  const ariaLabel = modifier === 'queued' ? QUEUED_LABEL : undefined
+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
@@ -48,7 +51,19 @@ export function StatusTicks({ status, title }: StatusTicksProps) {
       data-cv-tooltip={title ?? ariaLabel}
       aria-label={ariaLabel}
     >
-      <StatusIcon modifier={modifier} />
+      {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}>
+      {status === 'failed' ? <AlertTriangle size={11} /> : <Ticks double={status !== 'sent'} />}
     </span>
   )
 }

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