@adatechnology/conversations-ui 0.4.2 → 0.6.0

package/src/legacyStyles.golden.test.ts

@@ -0,0 +1,121 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+
+// legacyStyles.fixture.css is the styles.css shipped by 0.4.2; the stylesheet is global, so anything
+// added since must be namespaced under .cv- and must not reach the host's own elements.
+const LEGACY_CSS = readFileSync(join(import.meta.dir, 'legacyStyles.fixture.css'), 'utf8')
+const CURRENT_CSS = readFileSync(join(import.meta.dir, 'styles.css'), 'utf8')
+
+const NESTED_AT_RULES = ['@media', '@supports']
+const ALLOWED_NEW_AT_RULES = ['@media', '@supports', '@keyframes']
+
+type Block = { readonly prelude: string; readonly body: string | undefined }
+type Inventory = { selectors: string[]; atRules: string[]; keyframeNames: string[] }
+
+function splitBlocks(css: string): Block[] {
+  const blocks: Block[] = []
+  let depth = 0
+  let start = 0
+  let bodyStart = 0
+  let prelude = ''
+  for (let index = 0; index < css.length; index += 1) {
+    const char = css[index]
+    if (depth === 0 && char === ';') {
+      blocks.push({ prelude: css.slice(start, index).trim(), body: undefined })
+      start = index + 1
+    }
+    if (char === '{') {
+      if (depth === 0) {
+        prelude = css.slice(start, index).trim()
+        bodyStart = index + 1
+      }
+      depth += 1
+    }
+    if (char === '}') {
+      depth -= 1
+      if (depth === 0) {
+        blocks.push({ prelude, body: css.slice(bodyStart, index) })
+        start = index + 1
+      }
+    }
+  }
+  return blocks
+}
+
+function splitSelectorList(prelude: string): string[] {
+  const parts: string[] = []
+  let parenthesisDepth = 0
+  let current = ''
+  for (const char of prelude) {
+    if (char === '(') parenthesisDepth += 1
+    if (char === ')') parenthesisDepth -= 1
+    if (char === ',' && parenthesisDepth === 0) {
+      parts.push(current.trim())
+      current = ''
+    } else {
+      current += char
+    }
+  }
+  parts.push(current.trim())
+  return parts.filter(Boolean)
+}
+
+function collect(css: string, inventory: Inventory): Inventory {
+  for (const { prelude, body } of splitBlocks(css.replace(/\/\*[\s\S]*?\*\//g, ''))) {
+    if (!prelude.startsWith('@')) {
+      inventory.selectors.push(...splitSelectorList(prelude))
+      continue
+    }
+    const atRuleName = prelude.split(/[\s(]/)[0] ?? prelude
+    inventory.atRules.push(atRuleName)
+    if (atRuleName === '@keyframes') inventory.keyframeNames.push(prelude.replace('@keyframes', '').trim())
+    if (NESTED_AT_RULES.includes(atRuleName) && body !== undefined) collect(body, inventory)
+  }
+  return inventory
+}
+
+function inventoryOf(css: string): Inventory {
+  return collect(css, { selectors: [], atRules: [], keyframeNames: [] })
+}
+
+function addedSince(legacy: readonly string[], current: readonly string[]): string[] {
+  const remaining = [...legacy]
+  return current.filter((entry) => {
+    const position = remaining.indexOf(entry)
+    if (position === -1) return true
+    remaining.splice(position, 1)
+    return false
+  })
+}
+
+describe('styles.css não vaza para o host desde a 0.4.2', () => {
+  const legacy = inventoryOf(LEGACY_CSS)
+  const current = inventoryOf(CURRENT_CSS)
+  const addedSelectors = addedSince(legacy.selectors, current.selectors)
+  const addedAtRules = addedSince(legacy.atRules, current.atRules)
+
+  it('G8: o parse enxerga as regras (guarda contra um parser que não acha nada)', () => {
+    expect(legacy.selectors.length).toBeGreaterThan(100)
+    expect(addedSelectors.length).toBeGreaterThan(20)
+  })
+
+  it('G8: todo seletor adicionado começa por .cv- ou .dark .cv-', () => {
+    const offenders = addedSelectors.filter((selector) => !/^(\.dark )?\.cv-/.test(selector))
+
+    expect(offenders).toEqual([])
+  })
+
+  it('G8: nenhum seletor global (:root, html, body, *) foi adicionado', () => {
+    const globals = addedSelectors.filter((selector) => /^(:root|html|body|\*)([\s.:#[>+~,]|$)/.test(selector))
+
+    expect(globals).toEqual([])
+  })
+
+  it('G8: nenhum @import, @layer ou outra at-rule nova além de @media, @supports e @keyframes', () => {
+    expect(addedAtRules.filter((rule) => !ALLOWED_NEW_AT_RULES.includes(rule))).toEqual([])
+    expect(addedSince(legacy.keyframeNames, current.keyframeNames).filter((name) => !name.startsWith('cv-'))).toEqual(
+      [],
+    )
+  })
+})

package/src/messageTextCopyInteraction.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'bun:test'
+
+import { resolveCopyInteraction } from './messageTextCopyInteraction'
+
+function buildKeyEvent(key: string): { key: string; preventDefault: () => void; wasPrevented: () => boolean } {
+  let prevented = false
+  return {
+    key,
+    preventDefault: () => {
+      prevented = true
+    },
+    wasPrevented: () => prevented,
+  }
+}
+
+describe('resolveCopyInteraction', () => {
+  it('por padrão devolve só o onClick de cópia', () => {
+    const onCopy = () => undefined
+    const props = resolveCopyInteraction({ copyOnClick: true, accessibleCopy: false, onCopy })
+
+    expect(props.onClick).toBe(onCopy)
+    expect('role' in props).toBe(false)
+    expect('tabIndex' in props).toBe(false)
+    expect('onKeyDown' in props).toBe(false)
+  })
+
+  it('com copyOnClick desligado devolve objeto vazio, mesmo com accessibleCopy', () => {
+    expect(resolveCopyInteraction({ copyOnClick: false, accessibleCopy: false, onCopy: () => undefined })).toEqual({})
+    expect(resolveCopyInteraction({ copyOnClick: false, accessibleCopy: true, onCopy: () => undefined })).toEqual({})
+  })
+
+  it('com accessibleCopy expõe role, tabIndex e o onClick', () => {
+    const onCopy = () => undefined
+    const props = resolveCopyInteraction({ copyOnClick: true, accessibleCopy: true, onCopy })
+
+    expect(props.role).toBe('button')
+    expect(props.tabIndex).toBe(0)
+    expect(props.onClick).toBe(onCopy)
+  })
+
+  it('Enter e Espaço copiam e previnem o default', () => {
+    let copies = 0
+    const props = resolveCopyInteraction({
+      copyOnClick: true,
+      accessibleCopy: true,
+      onCopy: () => {
+        copies += 1
+      },
+    })
+
+    for (const key of ['Enter', ' ']) {
+      const event = buildKeyEvent(key)
+      props.onKeyDown?.(event)
+      expect(event.wasPrevented()).toBe(true)
+    }
+    expect(copies).toBe(2)
+  })
+
+  it('outras teclas não copiam nem previnem o default', () => {
+    let copies = 0
+    const props = resolveCopyInteraction({
+      copyOnClick: true,
+      accessibleCopy: true,
+      onCopy: () => {
+        copies += 1
+      },
+    })
+    const event = buildKeyEvent('Tab')
+
+    props.onKeyDown?.(event)
+
+    expect(copies).toBe(0)
+    expect(event.wasPrevented()).toBe(false)
+  })
+})

package/src/messageTextCopyInteraction.ts

@@ -0,0 +1,37 @@
+export type CopyKeyboardEvent = {
+  readonly key: string
+  preventDefault: () => void
+}
+
+export type CopyInteractionProps = {
+  onClick?: () => void
+  role?: 'button'
+  tabIndex?: 0
+  onKeyDown?: (event: CopyKeyboardEvent) => void
+}
+
+export type ResolveCopyInteractionOptions = {
+  readonly copyOnClick: boolean
+  readonly accessibleCopy: boolean
+  readonly onCopy: () => void
+}
+
+export function resolveCopyInteraction({
+  copyOnClick,
+  accessibleCopy,
+  onCopy,
+}: ResolveCopyInteractionOptions): CopyInteractionProps {
+  if (!copyOnClick) return {}
+  if (!accessibleCopy) return { onClick: onCopy }
+
+  return {
+    onClick: onCopy,
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return
+      event.preventDefault()
+      onCopy()
+    },
+  }
+}

package/src/participant/ParticipantAttachmentItem.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+
+import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+import { formatFileSize } from '../lib/format'
+import { isSafeAttachmentUrl } from './participantAttachmentUrl'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ResolveParticipantAttachmentUrl = (
+  attachment: ParticipantAttachment,
+  disposition?: 'inline' | 'attachment',
+) => Promise<string>
+
+export type ParticipantAttachmentItemProps = {
+  readonly attachment: ParticipantAttachment
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly labels: ParticipantConversationsLabels
+}
+
+function useAttachmentUrl(
+  attachment: ParticipantAttachment,
+  resolveAttachmentUrl: ResolveParticipantAttachmentUrl,
+): string | undefined {
+  const [url, setUrl] = useState<string | undefined>(undefined)
+  const disposition = attachment.kind === 'document' ? 'attachment' : 'inline'
+
+  useEffect(() => {
+    let isCurrent = true
+    resolveAttachmentUrl(attachment, disposition).then(
+      (resolved) => {
+        if (isCurrent) setUrl(isSafeAttachmentUrl(resolved) ? resolved.trim() : undefined)
+      },
+      () => {
+        if (isCurrent) setUrl(undefined)
+      },
+    )
+    return () => {
+      isCurrent = false
+    }
+  }, [attachment, disposition, resolveAttachmentUrl])
+
+  return url
+}
+
+export function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }: ParticipantAttachmentItemProps) {
+  const url = useAttachmentUrl(attachment, resolveAttachmentUrl)
+
+  if (attachment.kind === 'image') {
+    return (
+      <figure className="cv-p-attachment cv-p-attachment--image">
+        {url ? <img className="cv-p-attachment__image" src={url} alt={attachment.filename} /> : null}
+        <figcaption className="cv-p-attachment__name">{attachment.filename}</figcaption>
+      </figure>
+    )
+  }
+
+  if (attachment.kind === 'audio') {
+    return (
+      <div className="cv-p-attachment cv-p-attachment--audio">
+        <span className="cv-p-attachment__name">{attachment.filename}</span>
+        <audio className="cv-p-attachment__audio" controls preload="none" src={url} />
+      </div>
+    )
+  }
+
+  return (
+    <a
+      className="cv-p-attachment cv-p-attachment--document"
+      href={url}
+      download={attachment.filename}
+      aria-label={`${labels.downloadAttachment}: ${attachment.filename}`}
+    >
+      <span className="cv-p-attachment__name">{attachment.filename}</span>
+      <span className="cv-p-attachment__size">{formatFileSize(attachment.sizeBytes)}</span>
+    </a>
+  )
+}

package/src/participant/ParticipantChannelBadges.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+import { findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+const render = (channels: readonly string[] | undefined, variant?: 'list' | 'inline') =>
+  renderToStaticMarkup(
+    <ParticipantChannelBadges
+      channels={channels}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      {...(variant === undefined ? {} : { variant })}
+    />,
+  )
+
+describe('ParticipantChannelBadges', () => {
+  it('draws nothing without channels, not even the list', () => {
+    expect(render(undefined)).toBe('')
+    expect(render([])).toBe('')
+    expect(render(['sms'])).toBe('')
+  })
+
+  it('draws one badge per channel in a stable order with accessible text', () => {
+    const markup = render(['whatsapp', 'app'])
+
+    expect(markup).toContain('<ul class="cv-p-channels"')
+    expect(markup).toContain('aria-label="Channels in this conversation"')
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">App</span>')
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+  })
+
+  it('hides the icons from assistive tech and uses no utility classes', () => {
+    const markup = render(['app', 'whatsapp', 'email', 'portal', 'webchat'])
+
+    expect(markup.match(/<svg[^>]*aria-hidden="true"/g)).toHaveLength(5)
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('inline variant draws spans only, with a group prefix and audible separators', () => {
+    const markup = render(['whatsapp', 'app', 'app'], 'inline')
+
+    expect(markup).not.toContain('<ul')
+    expect(markup).not.toContain('<li')
+    expect(markup).toContain('<span class="cv-p-channels">')
+    expect(markup).toContain('<span class="cv-p-sr-only">Channels in this conversation: </span>')
+    expect(markup.match(/class="cv-p-channel cv-p-channel--/g)).toHaveLength(2)
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">App, </span>')
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+    expect(markup.match(/<svg[^>]*aria-hidden="true"/g)).toHaveLength(2)
+  })
+
+  it('inline variant draws nothing without valid channels', () => {
+    expect(render(undefined, 'inline')).toBe('')
+    expect(render(['sms'], 'inline')).toBe('')
+  })
+})

package/src/participant/ParticipantChannelBadges.tsx

@@ -0,0 +1,75 @@
+import { Globe, Mail, MessageCircle, MessagesSquare, Smartphone } from 'lucide-react'
+import type { ComponentType } from 'react'
+
+import {
+  resolveParticipantChannelLabel,
+  resolveParticipantChannels,
+  type ParticipantChannelDescriptor,
+} from './participantChannels'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+const ICONS: Record<
+  ParticipantChannelDescriptor['iconName'],
+  ComponentType<{ size?: number; 'aria-hidden'?: boolean }>
+> = {
+  Smartphone,
+  MessageCircle,
+  Mail,
+  Globe,
+  MessagesSquare,
+}
+
+export type ParticipantChannelBadgesProps = {
+  readonly channels: readonly string[] | undefined
+  readonly labels: ParticipantConversationsLabels
+  /** 'list' draws ul/li; 'inline' draws spans only, valid inside a button. */
+  readonly variant?: 'list' | 'inline'
+}
+
+type BadgeProps = {
+  readonly descriptor: ParticipantChannelDescriptor
+  readonly labels: ParticipantConversationsLabels
+  readonly separator: string
+}
+
+function BadgeContent({ descriptor, labels, separator }: BadgeProps) {
+  const Icon = ICONS[descriptor.iconName]
+  return (
+    <>
+      <Icon size={14} aria-hidden={true} />
+      <span className="cv-p-sr-only">{`${resolveParticipantChannelLabel(descriptor, labels)}${separator}`}</span>
+    </>
+  )
+}
+
+export function ParticipantChannelBadges({ channels, labels, variant = 'list' }: ParticipantChannelBadgesProps) {
+  const descriptors = resolveParticipantChannels(channels)
+  if (descriptors.length === 0) return null
+
+  if (variant === 'inline') {
+    return (
+      <span className="cv-p-channels">
+        <span className="cv-p-sr-only">{`${labels.channelsGroup}: `}</span>
+        {descriptors.map((descriptor, index) => (
+          <span key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+            <BadgeContent
+              descriptor={descriptor}
+              labels={labels}
+              separator={index < descriptors.length - 1 ? ', ' : ''}
+            />
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  return (
+    <ul className="cv-p-channels" aria-label={labels.channelsGroup}>
+      {descriptors.map((descriptor) => (
+        <li key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+          <BadgeContent descriptor={descriptor} labels={labels} separator="" />
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/participant/ParticipantComposer.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import { findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantComposer, type ParticipantComposerProps } from './ParticipantComposer'
+
+const QUICK_REPLIES: readonly QuickReply[] = [
+  { id: '1', title: 'On my way', shortcut: 'way', body: 'I am on my way' },
+  { id: '2', title: 'Delivered', shortcut: 'done', body: 'Delivered' },
+]
+
+function render(overrides: Partial<ParticipantComposerProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantComposer
+      value=""
+      onChange={() => undefined}
+      files={[]}
+      onFilesChange={() => undefined}
+      onSend={() => undefined}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantComposer', () => {
+  it('renders a form with a labelled textarea and the maxLength prop', () => {
+    const markup = render({ maxLength: 500 })
+
+    expect(markup).toContain('<form')
+    expect(markup).toContain('<textarea')
+    expect(markup).toContain('maxLength="500"')
+    expect(markup).toContain('aria-label="Message"')
+  })
+
+  it('disables send without content and enables it with text or files', () => {
+    expect(render()).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+    expect(render({ value: 'hi' })).not.toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+    const file = new File(['x'], 'a.png', { type: 'image/png' })
+    expect(render({ files: [file] })).not.toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+  })
+
+  it('disables send when the composer is disabled even with text', () => {
+    expect(render({ value: 'hi', disabled: true })).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+  })
+
+  it('renders the hidden multiple file input with accept and the attach button', () => {
+    const markup = render({ acceptedTypes: ['image/*'] })
+
+    expect(markup).toContain('type="file"')
+    expect(markup).toContain('multiple')
+    expect(markup).toContain('accept="image/*"')
+    expect(markup).toContain('Attach')
+  })
+
+  it('lists chosen files with a remove button', () => {
+    const file = new File(['x'], 'photo.png', { type: 'image/png' })
+    const markup = render({ files: [file] })
+
+    expect(markup).toContain('photo.png')
+    expect(markup).toContain('Remove attachment')
+  })
+
+  it('renders quick reply chips only when quickReplies is non-empty', () => {
+    expect(render()).not.toContain('cv-p-quick')
+    expect(render({ quickReplies: [] })).not.toContain('cv-p-quick')
+    const markup = render({ quickReplies: QUICK_REPLIES })
+    expect(markup).toContain('cv-p-quick')
+    expect(markup).toContain('On my way')
+    expect(markup).toContain('type="button"')
+  })
+
+  it('renders chips as type=button so tapping one never submits the form', () => {
+    const markup = render({ quickReplies: QUICK_REPLIES })
+    const chips = [...markup.matchAll(/<button[^>]*class="cv-p-chip"[^>]*>/g)].map((match) => match[0])
+
+    expect(chips).toHaveLength(2)
+    for (const chip of chips) {
+      expect(chip).toContain('type="button"')
+      expect(chip).not.toContain('type="submit"')
+    }
+    expect(markup.match(/type="submit"/g)).toHaveLength(1)
+  })
+
+  it('has no microphone control', () => {
+    expect(render({ quickReplies: QUICK_REPLIES }).toLowerCase()).not.toMatch(/microphone|record/)
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = render({ quickReplies: QUICK_REPLIES, value: 'x' })
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})