@adatechnology/conversations-ui 0.6.1 → 0.7.0

package/src/participant/participantCopyAnnouncement.ts

@@ -0,0 +1,37 @@
+export type CopyAnnouncementState = { readonly text: string; readonly tick: number }
+
+export type CopyAnnouncementAction = { readonly type: 'announce'; readonly text: string } | { readonly type: 'expired' }
+
+export const INITIAL_COPY_ANNOUNCEMENT: CopyAnnouncementState = { text: '', tick: 0 }
+
+const REPEAT_MARKER = '​'
+
+/** The tick changes on every announcement so a repeat inside the window restarts the timer. */
+export function copyAnnouncementReducer(
+  state: CopyAnnouncementState,
+  action: CopyAnnouncementAction,
+): CopyAnnouncementState {
+  if (action.type === 'announce') return { text: action.text, tick: state.tick + 1 }
+  return { ...state, text: '' }
+}
+
+export type LiveTextResolution = {
+  readonly text: string
+  /** The notice that was already spoken when the copy took over the region; undefined while it is not suppressed. */
+  readonly baselineNotice: string | undefined
+}
+
+/** A zero-width character alternates so identical consecutive announcements still change the region. */
+export function resolveLiveText(params: {
+  readonly copy: CopyAnnouncementState
+  readonly notice: string
+  readonly baselineNotice: string | undefined
+}): LiveTextResolution {
+  const { copy, notice, baselineNotice } = params
+  if (copy.text !== '') {
+    const marker = copy.tick % 2 === 0 ? REPEAT_MARKER : ''
+    return { text: `${copy.text}${marker}`, baselineNotice: baselineNotice ?? notice }
+  }
+  if (baselineNotice !== undefined && baselineNotice === notice) return { text: '', baselineNotice }
+  return { text: notice, baselineNotice: undefined }
+}

package/src/participant/participantCss.test-helper.ts

@@ -0,0 +1,34 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { splitBlocks } from '../cssBlocks.test-helper'
+
+export const PARTICIPANT_CSS = readFileSync(join(import.meta.dir, '..', 'styles.css'), 'utf8').replace(
+  /\/\*[\s\S]*?\*\//g,
+  '',
+)
+
+/** Declarations of every top-level rule whose selector list contains `selector`, or of the rules inside `scope`. */
+export function declarationsIn(selector: string, scope: string = PARTICIPANT_CSS): Map<string, string> {
+  const declarations = new Map<string, string>()
+  for (const { prelude, body } of splitBlocks(scope)) {
+    if (body === undefined || prelude.startsWith('@')) continue
+    if (!prelude.split(',').some((entry) => entry.trim() === selector)) continue
+    for (const declaration of body.split(';')) {
+      const separator = declaration.indexOf(':')
+      if (separator === -1) continue
+      declarations.set(declaration.slice(0, separator).trim().toLowerCase(), declaration.slice(separator + 1).trim())
+    }
+  }
+  return declarations
+}
+
+/** Inner CSS of the `@media <query>` block, or undefined when it does not exist. */
+export function mediaBody(query: string): string | undefined {
+  return splitBlocks(PARTICIPANT_CSS).find(({ prelude }) => prelude === `@media ${query}`)?.body
+}
+
+export function toRem(value: string | undefined): number {
+  const match = /^(-?\d*\.?\d+)rem$/.exec(value ?? '')
+  return match ? Number(match[1]) : 0
+}

package/src/participant/participantDay.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'bun:test'
+
+import { toDateTimeAttribute } from './participantDay'
+
+describe('toDateTimeAttribute', () => {
+  it('writes the local calendar day, zero padded', () => {
+    expect(toDateTimeAttribute(new Date(2026, 0, 5, 23, 59))).toBe('2026-01-05')
+    expect(toDateTimeAttribute(new Date(2026, 9, 12, 0, 1))).toBe('2026-10-12')
+  })
+
+  it('keeps the local day when the instant already crosses midnight UTC, in any timezone', () => {
+    const lateLocalEvening = new Date(2026, 9, 8, 23, 30)
+    const earlyLocalMorning = new Date(2026, 9, 9, 0, 30)
+    expect(toDateTimeAttribute(lateLocalEvening)).toBe('2026-10-08')
+    expect(toDateTimeAttribute(earlyLocalMorning)).toBe('2026-10-09')
+  })
+
+  it('never reads the UTC day, even in a timezone where it equals the local one', () => {
+    const date = Object.assign(new Date(2026, 9, 8, 23, 30), { toISOString: () => '2026-10-09T02:30:00.000Z' })
+    expect(toDateTimeAttribute(date)).toBe('2026-10-08')
+  })
+})

package/src/participant/participantDay.ts

@@ -0,0 +1,8 @@
+function pad(value: number): string {
+  return String(value).padStart(2, '0')
+}
+
+/** Local calendar day as the `datetime` of a `<time>`: the label shows the local day, so must the machine value. */
+export function toDateTimeAttribute(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}

package/src/participant/participantDocuments.ts

@@ -0,0 +1,45 @@
+const CNPJ_FIRST_WEIGHTS = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2] as const
+const CNPJ_SECOND_WEIGHTS = [6, ...CNPJ_FIRST_WEIGHTS] as const
+
+function charValue(character: string): number {
+  return character.charCodeAt(0) - 48
+}
+
+function isRepeatedSequence(value: string): boolean {
+  return new Set(value).size === 1
+}
+
+function weightedSum(characters: string, weights: readonly number[]): number {
+  let sum = 0
+  for (let index = 0; index < weights.length; index += 1) {
+    sum += charValue(characters.charAt(index)) * (weights[index] ?? 0)
+  }
+  return sum
+}
+
+function cnpjCheckDigit(characters: string, weights: readonly number[]): number {
+  const remainder = weightedSum(characters, weights) % 11
+  return remainder < 2 ? 0 : 11 - remainder
+}
+
+function cpfCheckDigit(digits: string, length: number): number {
+  const weights = Array.from({ length }, (_, index) => length + 1 - index)
+  return ((weightedSum(digits, weights) * 10) % 11) % 10
+}
+
+/** `digits` is the bare 11-digit CPF; repeated sequences such as 111.111.111-11 are rejected. */
+export function isValidCpf(digits: string): boolean {
+  if (!/^\d{11}$/.test(digits) || isRepeatedSequence(digits)) return false
+  return (
+    cpfCheckDigit(digits, 9) === charValue(digits.charAt(9)) &&
+    cpfCheckDigit(digits, 10) === charValue(digits.charAt(10))
+  )
+}
+
+/** `characters` is the bare 14-position CNPJ, numeric or alphanumeric ([A-Z0-9]{12}\d{2}). */
+export function isValidCnpj(characters: string): boolean {
+  if (!/^[A-Z0-9]{12}\d{2}$/.test(characters) || isRepeatedSequence(characters)) return false
+  const first = cnpjCheckDigit(characters, CNPJ_FIRST_WEIGHTS)
+  if (first !== charValue(characters.charAt(12))) return false
+  return cnpjCheckDigit(characters, CNPJ_SECOND_WEIGHTS) === charValue(characters.charAt(13))
+}

package/src/participant/participantHeaderA11y.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { declarationsIn, mediaBody, toRem } from './participantCss.test-helper'
+import { buildConversation } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantThreadHeader } from './ParticipantThreadHeader'
+
+function render(onOpenSubject?: () => void): string {
+  return renderToStaticMarkup(
+    <ParticipantThreadHeader
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521', protocol: 'CV-2026-0001' })}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      onOpenSubject={onOpenSubject}
+    />,
+  )
+}
+
+describe('clickable title focus ring', () => {
+  it('clamps the text in one inner span, inside the button and inside the plain heading', () => {
+    expect(render(() => undefined)).toMatch(
+      /<button[^>]*cv-p-thread__title-button[^>]*><span class="cv-p-thread__title-text">Invoice 4521<\/span><\/button>/,
+    )
+    expect(render()).toContain(
+      '<h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2>',
+    )
+  })
+
+  it('puts the only clamp on the inner span', () => {
+    const text = declarationsIn('.cv-p-thread__title-text')
+    expect(text.get('-webkit-line-clamp')).toBe('1')
+    expect(text.get('overflow')).toBe('hidden')
+    for (const selector of ['.cv-p-thread__title', '.cv-p-thread__title-button']) {
+      expect(declarationsIn(selector).has('-webkit-line-clamp')).toBe(false)
+    }
+  })
+
+  it('never clips the outline: no ancestor of the button hides overflow', () => {
+    const ancestors = [
+      '.cv-p-thread__title',
+      '.cv-p-thread__title-button',
+      '.cv-p-thread__heading',
+      '.cv-p-thread__header',
+    ]
+    for (const selector of ancestors) {
+      const overflow = declarationsIn(selector).get('overflow')
+      expect(overflow === undefined || overflow === 'visible').toBe(true)
+    }
+  })
+})
+
+describe('copy touch area', () => {
+  it('is at least 2.75rem wide and 2rem tall', () => {
+    const copy = declarationsIn('.cv-p-protocol__copy')
+    expect(toRem(copy.get('min-width'))).toBeGreaterThanOrEqual(2.75)
+    expect(toRem(copy.get('min-height'))).toBeGreaterThanOrEqual(2)
+  })
+
+  it('extends above the button no further than the padding the meta line reserves', () => {
+    const negativeTop = Math.abs(
+      Math.min(0, toRem(declarationsIn('.cv-p-protocol__copy').get('margin')?.split(/\s+/)[0])),
+    )
+    const reservedTop = toRem(declarationsIn('.cv-p-thread__meta').get('padding-top'))
+    expect(negativeTop).toBeGreaterThan(0)
+    expect(negativeTop).toBeLessThanOrEqual(reservedTop)
+  })
+})
+
+describe('bubble tail in forced colors and print', () => {
+  it('drops both triangles and restores the radius under forced-colors', () => {
+    const body = mediaBody('(forced-colors: active)') ?? ''
+    expect(body).not.toBe('')
+    const tails = declarationsIn('.cv-p-bubble::before', body)
+    expect(tails.get('content')).toBe('none')
+    expect(declarationsIn('.cv-p-bubble::after', body).get('content')).toBe('none')
+    expect(declarationsIn('.cv-p-bubble', body).get('border-radius')).toBe('var(--cv-p-i-radius)')
+    expect(declarationsIn('.cv-p-bubble--mine', body).get('border-radius')).toBe('var(--cv-p-i-radius)')
+  })
+
+  it('drops both triangles when printing', () => {
+    const body = mediaBody('print') ?? ''
+    expect(declarationsIn('.cv-p-bubble::before', body).get('content')).toBe('none')
+    expect(declarationsIn('.cv-p-bubble::after', body).get('content')).toBe('none')
+  })
+})

package/src/participant/participantHeaderDesign.test.tsx

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { declarationsIn, toRem } from './participantCss.test-helper'
+import { buildConversation } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantThreadHeader, type ParticipantThreadHeaderProps } from './ParticipantThreadHeader'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+
+function render(overrides: Partial<ParticipantThreadHeaderProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThreadHeader
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Item 4521' })}
+      labels={LABELS}
+      {...overrides}
+    />,
+  )
+}
+
+function backButtonOf(markup: string): string {
+  const start = markup.indexOf('<button')
+  return markup.slice(start, markup.indexOf('</button>', start))
+}
+
+describe('back button', () => {
+  const markup = render({ onBack: () => undefined })
+
+  it('is an icon with the back label as its accessible name and no visible text or glyph', () => {
+    const button = backButtonOf(markup)
+    expect(button).toContain('class="cv-p-thread__back"')
+    expect(button).toContain('aria-label="Back"')
+    expect(button).toContain('<svg')
+    expect(button.replace(/<[^>]+>/g, '')).toBe('')
+    expect(markup).not.toContain('‹')
+  })
+
+  it('is not the boxed secondary button any more', () => {
+    expect(markup).not.toContain('cv-p-button')
+    const back = declarationsIn('.cv-p-thread__back')
+    expect(back.get('border')).toBe('0')
+    expect(back.get('background')).toBe('transparent')
+  })
+
+  it('has a 44px touch area and keeps the focus ring', () => {
+    const back = declarationsIn('.cv-p-thread__back')
+    expect(back.get('min-width')).toBe('var(--cv-p-i-touch)')
+    expect(back.get('min-height')).toBe('var(--cv-p-i-touch)')
+    expect(declarationsIn('.cv-p :focus-visible').get('outline')).toContain('2px solid')
+  })
+
+  it('is absent without onBack', () => {
+    expect(render()).not.toContain('<button')
+  })
+
+  it('comes first, before the avatar and the title block', () => {
+    const withIcon = render({ onBack: () => undefined, renderSubjectIcon: () => <i /> })
+    expect(withIcon.indexOf('cv-p-thread__back')).toBeLessThan(withIcon.indexOf('cv-p-thread__avatar'))
+    expect(withIcon.indexOf('cv-p-thread__avatar')).toBeLessThan(withIcon.indexOf('cv-p-thread__heading'))
+  })
+})
+
+describe('conversation avatar', () => {
+  const group = { subjectType: 'invoice', label: 'Invoices', icon: <i>group</i> }
+
+  it('uses the host icon over the group icon', () => {
+    const markup = render({ subjectGroups: [group], renderSubjectIcon: () => <b>host</b> })
+    expect(markup).toContain('<span class="cv-p-thread__avatar" aria-hidden="true"><b>host</b></span>')
+    expect(markup).not.toContain('<i>group</i>')
+  })
+
+  it('falls back to the group icon when the host draws nothing', () => {
+    const markup = render({ subjectGroups: [group], renderSubjectIcon: () => null })
+    expect(markup).toContain('<span class="cv-p-thread__avatar" aria-hidden="true"><i>group</i></span>')
+  })
+
+  it('is absent without any icon, and the group label takes its place as the eyebrow', () => {
+    const markup = render({ subjectGroups: [{ subjectType: 'invoice', label: 'Invoices' }] })
+    expect(markup).not.toContain('cv-p-thread__avatar')
+    expect(markup).toContain('<p class="cv-p-thread__eyebrow">Invoices</p>')
+    expect(render()).not.toContain('cv-p-thread__avatar')
+  })
+
+  it('replaces the eyebrow: the tile stands for the group', () => {
+    expect(render({ subjectGroups: [group] })).not.toContain('cv-p-thread__eyebrow')
+  })
+
+  it('is a 2.5rem tile that follows the radius token', () => {
+    const avatar = declarationsIn('.cv-p-thread__avatar')
+    expect(toRem(avatar.get('width'))).toBe(2.5)
+    expect(toRem(avatar.get('height'))).toBe(2.5)
+    expect(avatar.get('border-radius')).toBe('var(--cv-p-i-radius)')
+    expect(avatar.get('flex')).toBe('0 0 auto')
+  })
+})
+
+describe('bar', () => {
+  it('is a raised surface with a 1px bottom border and a 4rem floor', () => {
+    const header = declarationsIn('.cv-p-thread__header')
+    expect(header.get('background')).toBe('var(--cv-p-i-surface-raised)')
+    expect(header.get('border-bottom')).toBe('1px solid var(--cv-p-i-border)')
+    expect(header.get('align-items')).toBe('center')
+  })
+
+  it('lets the title block shrink so nothing overflows at 320px', () => {
+    const heading = declarationsIn('.cv-p-thread__heading')
+    expect(heading.get('min-width')).toBe('0')
+    expect(declarationsIn('.cv-p-thread__meta').get('flex-wrap')).toBe('wrap')
+    expect(declarationsIn('.cv-p-thread__title-text').get('text-overflow')).toBe('ellipsis')
+  })
+})

package/src/participant/participantLabels.ts

@@ -13,6 +13,8 @@ export type ParticipantConversationsLabels = {
   readonly me: string
   readonly newMessages: string
   readonly loadOlder: string
+  /** Accessible name of the floating button that returns to the end of the conversation. */
+  readonly scrollToLatest: string
   readonly closedNotice: string
   readonly messageInputLabel: string
   readonly messageInputPlaceholder: string
@@ -53,6 +55,11 @@ export type ParticipantConversationsLabels = {
   readonly channelEmail: string
   readonly channelPortal: string
   readonly channelWebchat: string
+  /** Spoken after a link that opens in a new tab. */
+  readonly externalLinkHint: string
+  /** Prefix of the accessible name of the copy buttons: "Copy 529.982.247-25". */
+  readonly copyValue: string
+  readonly valueCopied: string
 }
 
 export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsLabels = {
@@ -69,6 +76,7 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   me: 'Me',
   newMessages: 'New messages',
   loadOlder: 'Load older messages',
+  scrollToLatest: 'Scroll to latest message',
   closedNotice: 'This conversation is closed',
   messageInputLabel: 'Message',
   messageInputPlaceholder: 'Write a message…',
@@ -108,6 +116,9 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   channelEmail: 'Email',
   channelPortal: 'Portal',
   channelWebchat: 'Web chat',
+  externalLinkHint: 'opens in a new tab',
+  copyValue: 'Copy',
+  valueCopied: 'Copied',
 }
 
 export function formatParticipantLabel(template: string, count: number): string {

package/src/participant/participantMessageAtoms.ts

@@ -0,0 +1,53 @@
+import { findCopyableAtoms } from './participantMessageCopyables'
+import type { InlineAtom } from './participantMessageFormat.types'
+import { findLinkAtoms } from './participantMessageLinks'
+
+const TRIPLE_FENCE = '```'
+
+function spanAt(
+  text: string,
+  open: number,
+): { readonly contentStart: number; readonly close: number; readonly width: number } | undefined {
+  const isTriple = text.startsWith(TRIPLE_FENCE, open)
+  const width = isTriple ? 3 : 1
+  const close = text.indexOf(isTriple ? TRIPLE_FENCE : '`', open + width)
+  if (close === -1) return undefined
+  return { contentStart: open + width, close, width }
+}
+
+export function findCodeAtoms(text: string): InlineAtom[] {
+  const atoms: InlineAtom[] = []
+  let cursor = text.indexOf('`')
+  while (cursor !== -1) {
+    const span = spanAt(text, cursor)
+    if (span === undefined) {
+      if (!text.startsWith(TRIPLE_FENCE, cursor)) break
+      cursor = text.indexOf('`', cursor + 3)
+      continue
+    }
+    if (span.close === span.contentStart) {
+      cursor = text.indexOf('`', cursor + span.width)
+      continue
+    }
+    const end = span.close + span.width
+    atoms.push({ start: cursor, end, node: { kind: 'code', value: text.slice(span.contentStart, span.close) } })
+    cursor = text.indexOf('`', end)
+  }
+  return atoms
+}
+
+/** Code wins over links, links over copyable tokens; overlapping losers are dropped. */
+export function findInlineAtoms(text: string): InlineAtom[] {
+  const candidates = [...findCodeAtoms(text), ...findLinkAtoms(text), ...findCopyableAtoms(text)]
+  const ordered = candidates
+    .map((atom, rank) => ({ atom, rank }))
+    .sort((a, b) => a.atom.start - b.atom.start || a.rank - b.rank)
+  const accepted: InlineAtom[] = []
+  let lastEnd = 0
+  for (const { atom } of ordered) {
+    if (atom.start < lastEnd) continue
+    accepted.push(atom)
+    lastEnd = atom.end
+  }
+  return accepted
+}

package/src/participant/participantMessageCopyables.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'bun:test'
+
+import { isValidCnpj, isValidCpf } from './participantDocuments'
+import { show } from './participantMessageFormat.test-helper'
+import { parseInline } from './participantMessageInline'
+
+function inline(line: string): string {
+  return show(parseInline(line))
+}
+
+function copyable(kind: string, value: string): string {
+  return `⟦k:${kind}:${value}⟧`
+}
+
+describe('check digits', () => {
+  it('validates CPF', () => {
+    expect(isValidCpf('52998224725')).toBe(true)
+    expect(isValidCpf('52998224726')).toBe(false)
+    expect(isValidCpf('11111111111')).toBe(false)
+    expect(isValidCpf('1234567890')).toBe(false)
+  })
+
+  it('validates numeric and alphanumeric CNPJ', () => {
+    expect(isValidCnpj('11222333000181')).toBe(true)
+    expect(isValidCnpj('11222333000182')).toBe(false)
+    expect(isValidCnpj('12ABC34501DE35')).toBe(true)
+    expect(isValidCnpj('12ABC34501DE36')).toBe(false)
+    expect(isValidCnpj('00000000000000')).toBe(false)
+  })
+})
+
+describe('copyable - CPF', () => {
+  it('detects valid CPF with and without mask', () => {
+    expect(inline('CPF 529.982.247-25 ok')).toBe(`CPF ${copyable('cpf', '529.982.247-25')} ok`)
+    expect(inline('52998224725')).toBe(copyable('cpf', '52998224725'))
+    expect(inline('CPF: 529.982.247-25.')).toBe(`CPF: ${copyable('cpf', '529.982.247-25')}.`)
+  })
+
+  it('ignores repeated sequences and wrong check digits', () => {
+    expect(inline('111.111.111-11')).toBe('111.111.111-11')
+    expect(inline('11111111111')).toBe('11111111111')
+    expect(inline('529.982.247-26')).toBe('529.982.247-26')
+  })
+})
+
+describe('copyable - CNPJ', () => {
+  it('detects valid numeric CNPJ with and without mask', () => {
+    expect(inline('11.222.333/0001-81')).toBe(copyable('cnpj', '11.222.333/0001-81'))
+    expect(inline('11222333000181')).toBe(copyable('cnpj', '11222333000181'))
+  })
+
+  it('detects the new alphanumeric CNPJ', () => {
+    expect(inline('12.ABC.345/01DE-35')).toBe(copyable('cnpj', '12.ABC.345/01DE-35'))
+    expect(inline('12ABC34501DE35')).toBe(copyable('cnpj', '12ABC34501DE35'))
+  })
+
+  it('ignores invalid CNPJ and does not take it for a phone', () => {
+    expect(inline('11.222.333/0001-82')).toBe('11.222.333/0001-82')
+    expect(inline('12ABC34501DE36')).toBe('12ABC34501DE36')
+  })
+})
+
+describe('copyable - access key', () => {
+  const KEY = '35260112345678000195550010000012341000012345'
+
+  it('detects exactly 44 digits, bare or in groups of four', () => {
+    expect(KEY).toHaveLength(44)
+    expect(inline(`chave ${KEY}`)).toBe(`chave ${copyable('accessKey', KEY)}`)
+    const grouped = KEY.match(/\d{4}/g)?.join(' ') ?? ''
+    expect(inline(grouped)).toBe(copyable('accessKey', grouped))
+  })
+
+  it('ignores 43 and 45 digit runs', () => {
+    expect(inline(KEY.slice(1))).toBe(KEY.slice(1))
+    expect(inline(`${KEY}1`)).toBe(`${KEY}1`)
+  })
+
+  it('ignores a repeated sequence', () => {
+    expect(inline('1'.repeat(44))).toBe('1'.repeat(44))
+  })
+})
+
+describe('copyable - phone', () => {
+  it('detects five formats and keeps the mask as typed', () => {
+    expect(inline('(16) 99999-0000')).toBe(copyable('phone', '(16) 99999-0000'))
+    expect(inline('+55 16 99999-0000')).toBe(copyable('phone', '+55 16 99999-0000'))
+    expect(inline('16 99999-0000')).toBe(copyable('phone', '16 99999-0000'))
+    expect(inline('(16) 3333-4444')).toBe(copyable('phone', '(16) 3333-4444'))
+    expect(inline('+1 415 555 2671')).toBe(copyable('phone', '+1 415 555 2671'))
+  })
+
+  it('does not take bare 10 or 11 digits for a phone', () => {
+    expect(inline('pedido 1234567890')).toBe('pedido 1234567890')
+    expect(inline('16999990000')).toBe('16999990000')
+    expect(inline('1633334444')).toBe('1633334444')
+  })
+
+  it('accepts a bare number only with +55, a bracketed DDD or a separator after the DDD', () => {
+    expect(inline('+5516999990000')).toBe(copyable('phone', '+5516999990000'))
+    expect(inline('(16)999990000')).toBe(copyable('phone', '(16)999990000'))
+    expect(inline('16-999990000')).toBe(copyable('phone', '16-999990000'))
+  })
+
+  it('keeps the final dot outside', () => {
+    expect(inline('ligue (16) 99999-0000.')).toBe(`ligue ${copyable('phone', '(16) 99999-0000')}.`)
+  })
+})
+
+describe('copyable - e-mail', () => {
+  it('detects e-mail addresses', () => {
+    expect(inline('fale a@b.co.')).toBe(`fale ${copyable('email', 'a@b.co')}.`)
+    expect(inline('ana.souza+x@mail.example.com.br')).toBe(copyable('email', 'ana.souza+x@mail.example.com.br'))
+  })
+
+  it('ignores malformed addresses', () => {
+    expect(inline('@ana')).toBe('@ana')
+    expect(inline('a@b')).toBe('a@b')
+    expect(inline('a@.co')).toBe('a@.co')
+  })
+})
+
+describe('copyable - false positives avoided', () => {
+  it('does not highlight money, dates, short numbers or labels', () => {
+    expect(inline('R$ 1.234,56')).toBe('R$ 1.234,56')
+    expect(inline('10/10/2026')).toBe('10/10/2026')
+    expect(inline('2026-10-01')).toBe('2026-10-01')
+    expect(inline('12345')).toBe('12345')
+    expect(inline('NF 4521')).toBe('NF 4521')
+    expect(inline('total 1234567')).toBe('total 1234567')
+  })
+
+  it('does not detect inside inline code or inside a URL', () => {
+    expect(inline('`529.982.247-25`')).toBe('⟦c:529.982.247-25⟧')
+    expect(inline('`a@b.co`')).toBe('⟦c:a@b.co⟧')
+    expect(inline('https://a.com/52998224725')).toBe('⟦l:https://a.com/52998224725→https://a.com/52998224725⟧')
+  })
+
+  it('lets a mark wrap a token', () => {
+    expect(inline('*529.982.247-25*')).toBe(`⟦s:${copyable('cpf', '529.982.247-25')}⟧`)
+  })
+})

package/src/participant/participantMessageCopyables.ts

@@ -0,0 +1,76 @@
+import { isValidCnpj, isValidCpf } from './participantDocuments'
+import type { CopyableKind, InlineAtom } from './participantMessageFormat.types'
+
+type Scanner = { readonly copyKind: CopyableKind; readonly pattern: RegExp; readonly isValid: (raw: string) => boolean }
+
+const DOCUMENT_SEPARATORS = /[.\-/\s]/g
+const ACCESS_KEY_PATTERN = /\d{44}|\d{4}(?: \d{4}){10}/gu
+const CNPJ_PATTERN = /[A-Z0-9]{2}\.[A-Z0-9]{3}\.[A-Z0-9]{3}\/[A-Z0-9]{4}-\d{2}|[A-Z0-9]{12}\d{2}/gu
+const CPF_PATTERN = /\d{3}\.\d{3}\.\d{3}-\d{2}|\d{11}/gu
+const BRAZIL_PHONE_PATTERN = /(?:\+?55[\s.-]?)?(?:\([1-9][1-9]\)|[1-9][1-9])[\s.-]?(?:9\d{4}|[2-5]\d{3})[\s.-]?\d{4}/gu
+const INTERNATIONAL_PHONE_PATTERN = /\+\d{1,3}(?:[\s.-]?\d{2,5}){2,4}/gu
+const EMAIL_LOCAL = /^[\p{L}\p{N}._%+-]+$/u
+const EMAIL_DOMAIN = /^[\p{L}\p{N}-]+(?:\.[\p{L}\p{N}-]+)*\.\p{L}{2,}$/u
+
+function bare(raw: string): string {
+  return raw.replace(DOCUMENT_SEPARATORS, '')
+}
+
+function isWordCharacter(character: string | undefined): boolean {
+  return character !== undefined && /[\p{L}\p{N}]/u.test(character)
+}
+
+function hasPhoneDigitCount(raw: string): boolean {
+  const count = raw.replace(/\D/g, '').length
+  return count >= 10 && count <= 15
+}
+
+/** Bare 10/11 digits are order numbers as often as phones: demand +country, a bracketed DDD or a separator after it. */
+function isFormattedBrazilPhone(raw: string): boolean {
+  return /^\+|\(|^\d{2}[\s.-]/u.test(raw) && hasPhoneDigitCount(raw)
+}
+
+const SCANNERS: readonly Scanner[] = [
+  { copyKind: 'accessKey', pattern: ACCESS_KEY_PATTERN, isValid: (raw) => !/^(\d)\1+$/.test(bare(raw)) },
+  { copyKind: 'cnpj', pattern: CNPJ_PATTERN, isValid: (raw) => isValidCnpj(bare(raw)) },
+  { copyKind: 'cpf', pattern: CPF_PATTERN, isValid: (raw) => isValidCpf(bare(raw)) },
+  { copyKind: 'phone', pattern: BRAZIL_PHONE_PATTERN, isValid: isFormattedBrazilPhone },
+  {
+    copyKind: 'phone',
+    pattern: INTERNATIONAL_PHONE_PATTERN,
+    isValid: (raw) => hasPhoneDigitCount(raw) && !raw.startsWith('+55'),
+  },
+]
+
+function scan(text: string, scanner: Scanner): InlineAtom[] {
+  const atoms: InlineAtom[] = []
+  for (const match of text.matchAll(scanner.pattern)) {
+    const [value] = match
+    const start = match.index
+    const end = start + value.length
+    if (isWordCharacter(text[start - 1]) || isWordCharacter(text[end])) continue
+    if (!scanner.isValid(value)) continue
+    atoms.push({ start, end, node: { kind: 'copyable', copyKind: scanner.copyKind, value } })
+  }
+  return atoms
+}
+
+function findEmailAtoms(text: string): InlineAtom[] {
+  const atoms: InlineAtom[] = []
+  for (let at = text.indexOf('@'); at !== -1; at = text.indexOf('@', at + 1)) {
+    let start = at
+    while (start > 0 && /[\p{L}\p{N}._%+-]/u.test(text[start - 1] ?? '')) start -= 1
+    let end = at + 1
+    while (end < text.length && /[\p{L}\p{N}.-]/u.test(text[end] ?? '')) end += 1
+    while (end > at + 1 && /[.-]/.test(text[end - 1] ?? '')) end -= 1
+    const isValid = EMAIL_LOCAL.test(text.slice(start, at)) && EMAIL_DOMAIN.test(text.slice(at + 1, end))
+    if (isValid) {
+      atoms.push({ start, end, node: { kind: 'copyable', copyKind: 'email', value: text.slice(start, end) } })
+    }
+  }
+  return atoms
+}
+
+export function findCopyableAtoms(text: string): InlineAtom[] {
+  return [...SCANNERS.flatMap((scanner) => scan(text, scanner)), ...findEmailAtoms(text)]
+}