@adatechnology/conversations-ui 0.6.0 → 0.7.0

package/src/participant/ParticipantThreadHeader.tsx

@@ -0,0 +1,73 @@
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import { ParticipantBackButton } from './ParticipantBackButton'
+import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+import { resolveParticipantChannels } from './participantChannels'
+import { ParticipantConversationAvatar } from './ParticipantConversationAvatar'
+import { ParticipantProtocolBadge } from './ParticipantProtocolBadge'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { resolveConversationIcon } from './participantSubjectIcon'
+
+export type ParticipantThreadHeaderProps = {
+  readonly conversation: ParticipantConversationSummary
+  readonly labels: ParticipantConversationsLabels
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  readonly onBack?: () => void
+  readonly onOpenSubject?: (subject: ParticipantSubjectRef) => void
+}
+
+type TitleProps = Pick<ParticipantThreadHeaderProps, 'conversation' | 'labels' | 'onOpenSubject'>
+
+function Title({ conversation, labels, onOpenSubject }: TitleProps) {
+  const { subjectType, subjectId, subjectLabel } = conversation
+  return (
+    <h2 className="cv-p-thread__title">
+      {onOpenSubject ? (
+        <button
+          type="button"
+          className="cv-p-thread__title-button"
+          aria-label={`${labels.openSubject}: ${subjectLabel}`}
+          onClick={() => onOpenSubject({ subjectType, subjectId })}
+        >
+          <span className="cv-p-thread__title-text">{subjectLabel}</span>
+        </button>
+      ) : (
+        <span className="cv-p-thread__title-text">{subjectLabel}</span>
+      )}
+    </h2>
+  )
+}
+
+export function ParticipantThreadHeader({
+  conversation,
+  labels,
+  subjectGroups,
+  renderSubjectIcon,
+  onBack,
+  onOpenSubject,
+}: ParticipantThreadHeaderProps) {
+  const group = subjectGroups?.find((candidate) => candidate.subjectType === conversation.subjectType)
+  const icon = resolveConversationIcon({ conversation, group, renderSubjectIcon })
+  const hasChannels = resolveParticipantChannels(conversation.channels).length > 0
+
+  return (
+    <header className="cv-p-thread__header">
+      {onBack ? <ParticipantBackButton label={labels.back} onBack={onBack} /> : null}
+      {icon !== undefined ? <ParticipantConversationAvatar icon={icon} /> : null}
+      <div className="cv-p-thread__heading">
+        {icon === undefined && group ? <p className="cv-p-thread__eyebrow">{group.label}</p> : null}
+        <Title conversation={conversation} labels={labels} onOpenSubject={onOpenSubject} />
+        {conversation.protocol || hasChannels ? (
+          <div className="cv-p-thread__meta">
+            {conversation.protocol ? (
+              <ParticipantProtocolBadge protocol={conversation.protocol} labels={labels} />
+            ) : null}
+            <ParticipantChannelBadges channels={conversation.channels} labels={labels} variant="inline" iconSize={16} />
+          </div>
+        ) : null}
+      </div>
+    </header>
+  )
+}

package/src/participant/ParticipantThreadScreen.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState, type Dispatch, type MutableRefObject } fr
 
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
+import { ParticipantBackButton } from './ParticipantBackButton'
 import { ParticipantThread } from './ParticipantThread'
 import type { ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
 import { bindAttachmentUrlResolver } from './bindAttachmentUrlResolver'
@@ -24,9 +25,15 @@ export type ParticipantThreadScreenProps = Omit<ParticipantConversationsScreenPr
   readonly dispatchSendStates: Dispatch<ParticipantSendStatesAction>
 }
 
-type OpenedState = { readonly status: 'idle' | 'loading' | 'missing' } | { readonly status: 'found'; readonly conversation: ParticipantConversationSummary }
+type OpenedState =
+  | { readonly status: 'idle' | 'loading' | 'missing' }
+  | { readonly status: 'found'; readonly conversation: ParticipantConversationSummary }
 
-function useOpenedConversation(api: ParticipantConversationsApi, subject: ParticipantSubjectRef, isNeeded: boolean): OpenedState {
+function useOpenedConversation(
+  api: ParticipantConversationsApi,
+  subject: ParticipantSubjectRef,
+  isNeeded: boolean,
+): OpenedState {
   const [opened, setOpened] = useState<OpenedState>({ status: 'idle' })
   const { subjectType, subjectId } = subject
   const canOpen = api.openConversation !== undefined
@@ -47,16 +54,17 @@ function useOpenedConversation(api: ParticipantConversationsApi, subject: Partic
   return opened
 }
 
-function NotFound({ labels, onBack }: { readonly labels: ParticipantConversationsLabels; readonly onBack?: () => void }) {
+function NotFound({
+  labels,
+  onBack,
+}: {
+  readonly labels: ParticipantConversationsLabels
+  readonly onBack?: () => void
+}) {
   return (
     <div className="cv-p cv-p-thread">
       <header className="cv-p-thread__header">
-        {onBack ? (
-          <button type="button" className="cv-p-button cv-p-thread__back" onClick={onBack}>
-            <span aria-hidden="true">‹</span>
-            <span className="cv-p-sr-only">{labels.back}</span>
-          </button>
-        ) : null}
+        {onBack ? <ParticipantBackButton label={labels.back} onBack={onBack} /> : null}
       </header>
       <p className="cv-p-empty">{labels.notFound}</p>
     </div>
@@ -74,7 +82,8 @@ export function ParticipantThreadScreen(props: ParticipantThreadScreenProps) {
   if (conversation) return <LoadedThread {...props} conversation={conversation} />
   const isResolving = opened.status === 'loading' || (api.openConversation !== undefined && opened.status === 'idle')
   const isListLoading = inbox.status === 'idle' || inbox.status === 'loading'
-  if (isResolving || (api.openConversation === undefined && isListLoading)) return <div className="cv-p cv-p-thread" aria-busy="true" />
+  if (isResolving || (api.openConversation === undefined && isListLoading))
+    return <div className="cv-p cv-p-thread" aria-busy="true" />
   return <NotFound labels={labels} onBack={props.onBack} />
 }
 
@@ -130,6 +139,11 @@ function LoadedThread(props: LoadedThreadProps) {
       }}
       quickReplies={props.quickReplies}
       renderSubjectCard={props.renderSubjectCard}
+      subjectGroups={props.subjectGroups}
+      renderSubjectIcon={props.renderSubjectIcon}
+      avatars={props.avatars}
+      renderAuthorAvatar={props.renderAuthorAvatar}
+      tail={props.tail}
     />
   )
 }

package/src/participant/ParticipantTimeline.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react'
+
+import { channelCapabilityFor } from '../channelCapability'
+import type { ConversationChannel } from '../conversationChannel'
+import { isSameDay } from '../lib/format'
+import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { ParticipantAuthorAvatar, type ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantDayDivider } from './ParticipantDayDivider'
+import { ParticipantMessageBubble } from './ParticipantMessageBubble'
+import { shouldShowAvatar, type ParticipantAvatarAuthor } from './participantAvatar'
+import {
+  bindPendingActions,
+  resolveParticipantBubbleActions,
+  type ParticipantPendingActions,
+} from './participantBubbleActions'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { isOwnMessage, type ParticipantTimelineItem } from './participantMessages'
+
+export type ParticipantTimelineProps = {
+  readonly items: readonly ParticipantTimelineItem[]
+  readonly labels: ParticipantConversationsLabels
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly channel?: ConversationChannel
+  readonly locale?: string
+  readonly pendingActions?: ParticipantPendingActions
+  readonly avatars?: 'initials'
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  readonly tail?: boolean
+}
+
+function createdAtOf(item: ParticipantTimelineItem): string {
+  return item.kind === 'server' ? item.message.createdAt : item.pending.createdAt
+}
+
+function keyOf(item: ParticipantTimelineItem): string {
+  return item.kind === 'server' ? item.message.id : `pending:${item.pending.clientMessageId}`
+}
+
+type AuthorOfItem = { readonly isMine: boolean; readonly author: ParticipantAvatarAuthor }
+
+function authorOf(item: ParticipantTimelineItem): AuthorOfItem {
+  if (item.kind === 'pending') return { isMine: true, author: null }
+  return { isMine: isOwnMessage(item.message), author: item.message.authorName ?? null }
+}
+
+function resolveActions(item: ParticipantTimelineItem, pendingActions?: ParticipantPendingActions) {
+  if (!pendingActions || item.kind === 'server') return {}
+  return resolveParticipantBubbleActions(item, bindPendingActions(pendingActions, item.pending.clientMessageId))
+}
+
+type AvatarSlotParams = {
+  readonly isEnabled: boolean
+  readonly isMine: boolean
+  readonly showAvatar: boolean
+  readonly author: ParticipantAvatarAuthor
+  readonly render?: ParticipantAuthorAvatarRenderer
+}
+
+function resolveAvatarSlot({ isEnabled, isMine, showAvatar, author, render }: AvatarSlotParams): ReactNode {
+  if (!isEnabled || isMine) return undefined
+  return showAvatar ? <ParticipantAuthorAvatar name={author} render={render} /> : null
+}
+
+export function ParticipantTimeline(props: ParticipantTimelineProps) {
+  const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props
+  const confirmsRead = channelCapabilityFor(props.channel ?? 'app').confirmsRead
+  const isAvatarEnabled = props.avatars === 'initials' || props.renderAuthorAvatar !== undefined
+  const nodes: ReactNode[] = []
+  let previousDay: Date | undefined
+  let previousAuthor: ParticipantAvatarAuthor | undefined
+
+  for (const item of items) {
+    const day = new Date(createdAtOf(item))
+    if (previousDay === undefined || !isSameDay(previousDay, day)) {
+      nodes.push(<ParticipantDayDivider key={`day:${keyOf(item)}`} day={day} locale={locale} />)
+      previousAuthor = undefined
+    }
+    previousDay = day
+    const { isMine, author } = authorOf(item)
+    const showAvatar = shouldShowAvatar({ previousAuthor, author, isMine })
+    previousAuthor = isMine ? undefined : author
+    const avatar = resolveAvatarSlot({
+      isEnabled: isAvatarEnabled,
+      isMine,
+      showAvatar,
+      author,
+      render: props.renderAuthorAvatar,
+    })
+    nodes.push(
+      <ParticipantMessageBubble
+        key={keyOf(item)}
+        item={item}
+        labels={labels}
+        confirmsRead={confirmsRead}
+        resolveAttachmentUrl={resolveAttachmentUrl}
+        tail={props.tail}
+        avatar={avatar}
+        {...resolveActions(item, pendingActions)}
+      />,
+    )
+  }
+  return <div className="cv-p-thread__messages">{nodes}</div>
+}

package/src/participant/index.ts

@@ -1,4 +1,5 @@
 export { ParticipantConversations, type ParticipantConversationsProps } from './ParticipantConversations'
+export type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
 export { groupParticipantConversations } from './participantGrouping'
 export { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
 export type {

package/src/participant/participantAutoGrow.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'bun:test'
+
+import { fitTextareaHeight, type AutoGrowTarget } from './participantAutoGrow'
+
+describe('fitTextareaHeight', () => {
+  it('measures after resetting, so the field can also shrink', () => {
+    const heights: string[] = []
+    const target: AutoGrowTarget = {
+      style: {
+        get height() {
+          return heights.at(-1) ?? ''
+        },
+        set height(value: string) {
+          heights.push(value)
+        },
+      },
+      scrollHeight: 96,
+      offsetHeight: 96,
+      clientHeight: 96,
+    }
+    fitTextareaHeight(target)
+    expect(heights).toEqual(['auto', '96px'])
+  })
+
+  it('adds the border to the content height, so a border-box field does not overflow', () => {
+    const heights: string[] = []
+    const target: AutoGrowTarget = {
+      style: {
+        get height() {
+          return heights.at(-1) ?? ''
+        },
+        set height(value: string) {
+          heights.push(value)
+        },
+      },
+      scrollHeight: 61,
+      offsetHeight: 63,
+      clientHeight: 61,
+    }
+    fitTextareaHeight(target)
+    expect(heights.at(-1)).toBe('63px')
+  })
+})

package/src/participant/participantAutoGrow.ts

@@ -0,0 +1,12 @@
+export type AutoGrowTarget = {
+  readonly style: { height: string }
+  readonly scrollHeight: number
+  readonly offsetHeight: number
+  readonly clientHeight: number
+}
+
+/** Fits the field to its content plus its border (border-box), so no phantom scrollbar; the CSS max-height caps it. */
+export function fitTextareaHeight(target: AutoGrowTarget): void {
+  target.style.height = 'auto'
+  target.style.height = `${target.scrollHeight + (target.offsetHeight - target.clientHeight)}px`
+}

package/src/participant/participantAvatar.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'bun:test'
+
+import { authorInitials, shouldShowAvatar } from './participantAvatar'
+
+describe('authorInitials', () => {
+  it('takes the first letters of the first and last names', () => {
+    expect(authorInitials('Ana Souza')).toBe('AS')
+    expect(authorInitials('maria ana souza lima')).toBe('ML')
+  })
+
+  it('uses a single initial for a single name', () => {
+    expect(authorInitials('Ana')).toBe('A')
+  })
+
+  it('ignores prepositions and punctuation', () => {
+    expect(authorInitials('Maria da Silva')).toBe('MS')
+    expect(authorInitials('João de Souza e Silva')).toBe('JS')
+    expect(authorInitials('  (Ana)   -  Souza. ')).toBe('AS')
+  })
+
+  it('keeps an accented initial and upper-cases it', () => {
+    expect(authorInitials('élida ávila')).toBe('ÉÁ')
+  })
+
+  it('keeps the first word even when it looks like a particle', () => {
+    expect(authorInitials('Le Minh')).toBe('LM')
+    expect(authorInitials('Van Morrison')).toBe('VM')
+  })
+
+  it('composes accents before taking the initial', () => {
+    expect(authorInitials('e\u0301lida')).toBe('\u00c9')
+  })
+
+  it('falls back to the first word when only prepositions remain', () => {
+    expect(authorInitials('de da')).toBe('D')
+  })
+
+  it('returns undefined for missing, empty, question-mark or emoji-only names', () => {
+    expect(authorInitials(null)).toBeUndefined()
+    expect(authorInitials(undefined)).toBeUndefined()
+    expect(authorInitials('')).toBeUndefined()
+    expect(authorInitials('   ')).toBeUndefined()
+    expect(authorInitials('?')).toBeUndefined()
+    expect(authorInitials('😀')).toBeUndefined()
+  })
+
+  it('ignores a trailing emoji', () => {
+    expect(authorInitials('Ana 😀')).toBe('A')
+  })
+})
+
+describe('shouldShowAvatar', () => {
+  it('shows it on the first message of a sequence', () => {
+    expect(shouldShowAvatar({ previousAuthor: undefined, author: 'Ana', isMine: false })).toBe(true)
+  })
+
+  it('hides it while the same author keeps talking', () => {
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Ana', isMine: false })).toBe(false)
+  })
+
+  it('shows it again when the author changes', () => {
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Bruno', isMine: false })).toBe(true)
+  })
+
+  it('treats consecutive unnamed authors as one sequence', () => {
+    expect(shouldShowAvatar({ previousAuthor: null, author: null, isMine: false })).toBe(false)
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: null, isMine: false })).toBe(true)
+  })
+
+  it('never shows it on an own message', () => {
+    expect(shouldShowAvatar({ previousAuthor: undefined, author: null, isMine: true })).toBe(false)
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Ana', isMine: true })).toBe(false)
+  })
+})

package/src/participant/participantAvatar.ts

@@ -0,0 +1,48 @@
+const NAME_PARTICLES = new Set([
+  'a',
+  'e',
+  'o',
+  'da',
+  'das',
+  'de',
+  'del',
+  'di',
+  'do',
+  'dos',
+  'du',
+  'la',
+  'le',
+  'van',
+  'von',
+])
+
+export type ParticipantAvatarAuthor = string | null
+
+export type ShouldShowAvatarParams = {
+  /** Author of the previous message; undefined at the start of the list or right after an own message. */
+  readonly previousAuthor: ParticipantAvatarAuthor | undefined
+  readonly author: ParticipantAvatarAuthor
+  readonly isMine: boolean
+}
+
+function lettersOf(word: string): string {
+  return word.replace(/[^\p{L}\p{M}]/gu, '')
+}
+
+function firstLetter(word: string): string {
+  return (Array.from(word.normalize('NFC'))[0] ?? '').toUpperCase()
+}
+
+/** Up to two initials; undefined when the name has no letters, so the caller draws the neutral icon. */
+export function authorInitials(name: string | null | undefined): string | undefined {
+  const [first, ...rest] = (name ?? '').split(/\s+/).map(lettersOf).filter(Boolean)
+  if (first === undefined) return undefined
+  const last = rest.filter((word) => !NAME_PARTICLES.has(word.toLowerCase())).pop()
+  return `${firstLetter(first)}${last === undefined ? '' : firstLetter(last)}`
+}
+
+export function shouldShowAvatar({ previousAuthor, author, isMine }: ShouldShowAvatarParams): boolean {
+  if (isMine) return false
+  if (previousAuthor === undefined) return true
+  return previousAuthor !== author
+}

package/src/participant/participantBubbleTail.test.tsx

@@ -0,0 +1,107 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { splitBlocks } from '../cssBlocks.test-helper'
+import { buildMessage, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantMessageBubble, type ParticipantMessageBubbleProps } from './ParticipantMessageBubble'
+
+const CSS = readFileSync(join(import.meta.dir, '..', 'styles.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+
+function declarationsOf(selector: string): Map<string, string> {
+  const declarations = new Map<string, string>()
+  for (const { prelude, body } of splitBlocks(CSS)) {
+    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
+}
+
+function render(direction: 'inbound' | 'outbound', extra: Partial<ParticipantMessageBubbleProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantMessageBubble
+      item={{ kind: 'server', message: buildMessage({ id: 'm1', direction }) }}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      confirmsRead
+      resolveAttachmentUrl={async () => 'https://files.example/a.png'}
+      {...extra}
+    />,
+  )
+}
+
+describe('bubble tail CSS', () => {
+  it('draws two decorative triangles that never catch touches', () => {
+    for (const pseudo of ['::before', '::after']) {
+      const tail = declarationsOf(`.cv-p-bubble${pseudo}`)
+      expect(tail.get('content')).toBe("''")
+      expect(tail.get('pointer-events')).toBe('none')
+      expect(tail.get('position')).toBe('absolute')
+      expect(tail.get('border-style')).toBe('solid')
+    }
+    expect(declarationsOf('.cv-p-bubble').get('position')).toBe('relative')
+  })
+
+  it('puts the received tail on the left, edge colour under fill colour', () => {
+    expect(declarationsOf('.cv-p-bubble::before').get('left')).toBe('-10px')
+    expect(declarationsOf('.cv-p-bubble::after').get('left')).toBe('-8px')
+    expect(declarationsOf('.cv-p-bubble::before').get('border-bottom-color')).toBe('var(--cv-p-tail-edge)')
+    expect(declarationsOf('.cv-p-bubble::after').get('border-bottom-color')).toBe('var(--cv-p-tail-fill)')
+    expect(declarationsOf('.cv-p-bubble').get('border-bottom-left-radius')).toBe('0')
+  })
+
+  it('mirrors the own tail to the right with the own tokens', () => {
+    expect(declarationsOf('.cv-p-bubble--mine::before').get('right')).toBe('-10px')
+    expect(declarationsOf('.cv-p-bubble--mine::after').get('right')).toBe('-8px')
+    const mine = declarationsOf('.cv-p-bubble--mine')
+    expect(mine.get('border-bottom-right-radius')).toBe('0')
+    expect(mine.get('--cv-p-tail-edge')).toBe('var(--cv-p-i-accent)')
+    expect(mine.get('--cv-p-tail-fill')).toBe('var(--cv-p-i-highlight)')
+    expect(declarationsOf('.cv-p-bubble').get('--cv-p-tail-edge')).toBe('var(--cv-p-i-border)')
+    expect(declarationsOf('.cv-p-bubble').get('--cv-p-tail-fill')).toBe('var(--cv-p-i-surface-raised)')
+  })
+
+  it('turns the tail off and restores the corner with --no-tail', () => {
+    expect(declarationsOf('.cv-p-bubble--no-tail::before').get('content')).toBe('none')
+    expect(declarationsOf('.cv-p-bubble--no-tail::after').get('content')).toBe('none')
+    expect(declarationsOf('.cv-p-bubble--no-tail').get('border-radius')).toBe('var(--cv-p-i-radius)')
+  })
+
+  it('uses no fixed colour for the tail', () => {
+    const tailRules = splitBlocks(CSS).filter(({ prelude }) => /cv-p-bubble[^,{]*::(before|after)/.test(prelude))
+    expect(tailRules.length).toBeGreaterThan(0)
+    for (const { body } of tailRules) expect(body ?? '').not.toMatch(/#[0-9a-f]{3,8}|rgba?\(/i)
+  })
+})
+
+describe('bubble tail markup', () => {
+  it('keeps the default markup free of any new class', () => {
+    expect(render('outbound')).toContain('<div class="cv-p-bubble">')
+    expect(render('inbound')).toContain('<div class="cv-p-bubble cv-p-bubble--mine">')
+  })
+
+  it('adds --no-tail only when tail is false, on both sides', () => {
+    expect(render('outbound', { tail: false })).toContain('class="cv-p-bubble cv-p-bubble--no-tail"')
+    expect(render('inbound', { tail: false })).toContain('class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"')
+    expect(render('outbound', { tail: true })).not.toContain('--no-tail')
+  })
+
+  it('keeps the content and the avatar row unchanged by the tail flag', () => {
+    const withAvatar = render('outbound', { avatar: <b>A</b>, tail: false })
+    expect(withAvatar).toContain('cv-p-bubble-row')
+    expect(withAvatar).toContain('cv-p-bubble--no-tail')
+    expect(render('outbound', { tail: false })).toContain('cv-p-bubble__meta')
+  })
+
+  it('stays inside the participant namespace', () => {
+    const markup = render('outbound', { tail: false })
+    expect(findForeignClassTokens(markup)).toEqual([])
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+})