@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/src/participant/ParticipantConversations.tsx

@@ -5,6 +5,7 @@ import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@ada
 import type { ConversationChannel } from '../conversationChannel'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ConversationsTheme } from '../types'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
 import type {
   ParticipantConversationsClassNames,
@@ -34,6 +35,12 @@ export type ParticipantConversationsProps = {
   renderSubjectIcon?: ParticipantSubjectIconRenderer
   renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
   onOpenSubject?: (subject: ParticipantSubjectRef) => void
+  /** Absent draws no avatar. The SDK has no photo: the host supplies it through renderAuthorAvatar. */
+  avatars?: 'initials'
+  /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
+  renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
+  tail?: boolean
 }
 
 export function ParticipantConversations(props: ParticipantConversationsProps) {

package/src/participant/ParticipantConversationsOptions.test.tsx

@@ -0,0 +1,87 @@
+import { afterAll, beforeAll, describe, expect, it, mock } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { ParticipantConversationsApi } from './participantApi.types'
+import { buildConversation, buildMessage } from './participantFixtures.test-helper'
+import type { ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
+import * as realThreadModule from './useParticipantThread'
+
+const MESSAGES = [
+  buildMessage({ id: 'a', authorName: 'Ana Souza', createdAt: '2026-10-01T10:00:00.000Z' }),
+  buildMessage({ id: 'b', direction: 'inbound', createdAt: '2026-10-01T10:01:00.000Z' }),
+]
+const realUseParticipantThread = realThreadModule.useParticipantThread
+let isInjecting = false
+
+const API: ParticipantConversationsApi = {
+  listConversations: async () => ({ data: [] }),
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  markRead: async () => undefined,
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+let ParticipantConversationsScreen: typeof import('./ParticipantConversationsScreen').ParticipantConversationsScreen
+
+beforeAll(async () => {
+  // Server rendering runs no effects, so the messages are injected over the real hook.
+  mock.module('./useParticipantThread', () => ({
+    ...realThreadModule,
+    useParticipantThread: (...args: Parameters<typeof realUseParticipantThread>) => {
+      const result = realUseParticipantThread(...args)
+      return isInjecting ? { ...result, messages: MESSAGES, status: 'ready' as const } : result
+    },
+  }))
+  ParticipantConversationsScreen = (await import('./ParticipantConversationsScreen')).ParticipantConversationsScreen
+  isInjecting = true
+})
+
+afterAll(() => {
+  isInjecting = false
+})
+
+function renderThread(overrides: Partial<ParticipantConversationsScreenProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantConversationsScreen
+      api={API}
+      subjectGroups={[{ subjectType: 'invoice', label: 'Invoices' }]}
+      selected={{ subjectType: 'invoice', subjectId: '1' }}
+      onSelect={() => undefined}
+      inbox={{
+        status: 'ready',
+        conversations: [buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })],
+        hasMore: false,
+        refresh: async () => undefined,
+        loadMore: async () => undefined,
+        markSubjectRead: () => undefined,
+      }}
+      {...overrides}
+    />,
+  )
+}
+
+describe('participant options reach the DOM through the screen', () => {
+  it('injects the messages (sanity)', () => {
+    expect(renderThread()).toContain('cv-p-bubble--mine')
+  })
+
+  it('draws the group eyebrow from subjectGroups', () => {
+    expect(renderThread()).toContain('<p class="cv-p-thread__eyebrow">Invoices</p>')
+  })
+
+  it('draws no avatar by default and the initials with avatars="initials"', () => {
+    expect(renderThread()).not.toContain('cv-p-avatar')
+    expect(renderThread({ avatars: 'initials' })).toContain('class="cv-p-avatar" aria-hidden="true">AS<')
+  })
+
+  it('draws the host slot through renderAuthorAvatar', () => {
+    const markup = renderThread({ renderAuthorAvatar: () => <i>PHOTO</i> })
+    expect(markup).toContain('<i>PHOTO</i>')
+  })
+
+  it('keeps the tail by default and removes it from every bubble with tail={false}', () => {
+    expect(renderThread()).not.toContain('cv-p-bubble--no-tail')
+    const markup = renderThread({ tail: false })
+    expect(markup.match(/cv-p-bubble--no-tail/g)?.length).toBe(2)
+  })
+})

package/src/participant/ParticipantCopyAnnouncer.tsx

@@ -0,0 +1,48 @@
+import { createContext, useCallback, useContext, useEffect, useReducer, useRef, type ReactNode } from 'react'
+
+import {
+  INITIAL_COPY_ANNOUNCEMENT,
+  copyAnnouncementReducer,
+  resolveLiveText,
+  type CopyAnnouncementState,
+} from './participantCopyAnnouncement'
+
+const ANNOUNCEMENT_MS = 3000
+
+const AnnounceContext = createContext<(text: string) => void>(() => undefined)
+const AnnouncementContext = createContext<CopyAnnouncementState>(INITIAL_COPY_ANNOUNCEMENT)
+
+export function useAnnounceCopy(): (text: string) => void {
+  return useContext(AnnounceContext)
+}
+
+/** Holds the text of the conversation's single polite region; the copy buttons announce through it. */
+export function ParticipantCopyAnnouncer({ children }: { readonly children: ReactNode }) {
+  const [announcement, dispatch] = useReducer(copyAnnouncementReducer, INITIAL_COPY_ANNOUNCEMENT)
+  const announce = useCallback((text: string): void => dispatch({ type: 'announce', text }), [])
+
+  useEffect(() => {
+    if (announcement.text === '') return undefined
+    const timer = setTimeout(() => dispatch({ type: 'expired' }), ANNOUNCEMENT_MS)
+    return () => clearTimeout(timer)
+  }, [announcement.tick, announcement.text])
+
+  return (
+    <AnnounceContext.Provider value={announce}>
+      <AnnouncementContext.Provider value={announcement}>{children}</AnnouncementContext.Provider>
+    </AnnounceContext.Provider>
+  )
+}
+
+/** The one aria-live region of the thread: new-message notice, or the last copy announcement. */
+export function ParticipantThreadLive({ notice }: { readonly notice: string }) {
+  const copy = useContext(AnnouncementContext)
+  const baselineNotice = useRef<string | undefined>(undefined)
+  const resolution = resolveLiveText({ copy, notice, baselineNotice: baselineNotice.current })
+  baselineNotice.current = resolution.baselineNotice
+  return (
+    <div className="cv-p-thread__live" role="status" aria-live="polite">
+      {resolution.text}
+    </div>
+  )
+}

package/src/participant/ParticipantCopyableToken.tsx

@@ -0,0 +1,51 @@
+import { Check, Copy } from 'lucide-react'
+
+import { useParticipantCopyFeedback } from './useParticipantCopyFeedback'
+import type { CopyableKind } from './participantMessageFormat.types'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+type CopyLabels = Pick<ParticipantConversationsLabels, 'copyValue' | 'valueCopied'>
+
+export type ParticipantCopyableTokenProps = {
+  readonly copyKind: CopyableKind
+  readonly value: string
+  readonly labels: CopyLabels
+}
+
+export function ParticipantCopyableToken({ copyKind, value, labels }: ParticipantCopyableTokenProps) {
+  const { isCopied, copy } = useParticipantCopyFeedback()
+  return (
+    <button
+      type="button"
+      className={`cv-p-copyable cv-p-copyable--${copyKind}`}
+      aria-label={`${labels.copyValue} ${value}`}
+      onClick={() => copy(value, labels.valueCopied)}
+    >
+      {value}
+      {isCopied ? (
+        <span className="cv-p-copyable__done" aria-hidden="true">
+          <Check size={12} aria-hidden={true} /> {labels.valueCopied}
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+export type ParticipantLinkCopyButtonProps = {
+  readonly value: string
+  readonly labels: CopyLabels
+}
+
+export function ParticipantLinkCopyButton({ value, labels }: ParticipantLinkCopyButtonProps) {
+  const { isCopied, copy } = useParticipantCopyFeedback()
+  return (
+    <button
+      type="button"
+      className="cv-p-text__link-copy"
+      aria-label={`${labels.copyValue} ${value}`}
+      onClick={() => copy(value, labels.valueCopied)}
+    >
+      {isCopied ? <Check size={14} aria-hidden={true} /> : <Copy size={14} aria-hidden={true} />}
+    </button>
+  )
+}

package/src/participant/ParticipantDayDivider.tsx

@@ -0,0 +1,18 @@
+import { toDateTimeAttribute } from './participantDay'
+
+export type ParticipantDayDividerProps = {
+  readonly day: Date
+  readonly locale?: string
+}
+
+export function ParticipantDayDivider({ day, locale }: ParticipantDayDividerProps) {
+  const label = day.toLocaleDateString(locale, { weekday: 'short', day: '2-digit', month: '2-digit' })
+
+  return (
+    <div className="cv-p-day" role="separator" aria-label={label}>
+      <time className="cv-p-day__label" dateTime={toDateTimeAttribute(day)}>
+        {label}
+      </time>
+    </div>
+  )
+}

package/src/participant/ParticipantInbox.tsx

@@ -12,6 +12,7 @@ import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadVi
 import { ParticipantInboxRow } from './ParticipantInboxRow'
 import { ParticipantInboxSearchField, type ParticipantInboxSearch } from './ParticipantInboxSearchField'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+import { useRevealActiveChip } from './useRevealActiveChip'
 
 export type ParticipantInboxProps = {
   readonly view: ParticipantInboxView
@@ -54,8 +55,9 @@ type FiltersProps = {
 }
 
 function Filters({ filters, active, labels, onChange }: FiltersProps) {
+  const strip = useRevealActiveChip(active)
   return (
-    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup}>
+    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup} ref={strip}>
       {filters.map((filter) => (
         <button
           key={filter.subjectType}

package/src/participant/ParticipantInboxRow.tsx

@@ -4,6 +4,7 @@ import { formatTimestamp, isSameDay } from '../lib/format'
 import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
 import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
 import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+import { isDrawable, resolveConversationIcon } from './participantSubjectIcon'
 
 export type ParticipantInboxRowProps = {
   readonly conversation: ParticipantConversationSummary
@@ -21,17 +22,18 @@ function formatRowTime(iso: string, locale: string | undefined): string {
 }
 
 function RowIcon({ props, kind }: { readonly props: ParticipantInboxRowProps; readonly kind: string }) {
-  const custom = props.renderSubjectIcon?.(props.conversation)
-  if (custom !== null && custom !== undefined && custom !== false && custom !== '') {
+  const { conversation, group, renderSubjectIcon } = props
+  const hostIcon = renderSubjectIcon?.(conversation)
+  if (isDrawable(hostIcon)) {
     return (
       <span className="cv-p-row__icon cv-p-inbox__icon" aria-hidden="true">
-        {custom}
+        {hostIcon}
       </span>
     )
   }
   return (
     <span className="cv-p-row__icon" aria-hidden="true">
-      {props.group?.icon ?? kind.slice(0, 2)}
+      {resolveConversationIcon({ conversation, group }) ?? kind.slice(0, 2)}
     </span>
   )
 }

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'bun:test'
+import type { ReactNode } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 
 import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
@@ -9,7 +10,10 @@ import { ParticipantMessageBubble } from './ParticipantMessageBubble'
 const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
 const resolveAttachmentUrl = async (): Promise<string> => 'https://files.example/a.png'
 
-function renderServer(message = buildMessage({ id: 'm1' }), extra: { onRetry?: () => void; confirmsRead?: boolean } = {}): string {
+function renderServer(
+  message = buildMessage({ id: 'm1' }),
+  extra: { onRetry?: () => void; confirmsRead?: boolean } = {},
+): string {
   const item: ParticipantTimelineItem = { kind: 'server', message }
   return renderToStaticMarkup(
     <ParticipantMessageBubble
@@ -82,14 +86,18 @@ describe('ParticipantMessageBubble', () => {
   })
 
   it('downgrades read to delivered when the channel does not confirm reads', () => {
-    const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound', status: 'read' }), { confirmsRead: false })
+    const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound', status: 'read' }), {
+      confirmsRead: false,
+    })
 
     expect(markup).toContain('cv-status-ticks--delivered')
     expect(markup).not.toContain('cv-status-ticks--read')
   })
 
   it('shows no status on the other side', () => {
-    expect(renderServer(buildMessage({ id: 'a', direction: 'outbound', status: 'read' }))).not.toContain('cv-status-ticks')
+    expect(renderServer(buildMessage({ id: 'a', direction: 'outbound', status: 'read' }))).not.toContain(
+      'cv-status-ticks',
+    )
   })
 
   it('renders pending sending and queued with their texts', () => {
@@ -152,9 +160,9 @@ describe('ParticipantMessageBubble', () => {
   it('o texto do participante não é botão nem copia ao toque', () => {
     const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound' }))
 
-    expect(markup).toContain('class="cv-message-text"')
+    expect(markup).toContain('class="cv-p-text"')
     expect(markup).not.toContain('role="button"')
-    expect(markup).not.toContain('cv-message-text--copyable')
+    expect(markup).not.toContain('cv-p-text--copyable')
   })
 
   it('uses only cv-p-* classes and no Tailwind utilities', () => {
@@ -165,3 +173,42 @@ describe('ParticipantMessageBubble', () => {
     expect(markup).toContain('cv-p-')
   })
 })
+
+describe('ParticipantMessageBubble avatar slot', () => {
+  const GOLDEN_RECEIVED =
+    '<div class="cv-p-bubble"><span class="cv-p-bubble__author">Ana Souza</span><div class="cv-p-text">Hi</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T10:00:00.000Z">HH:MM</time></span></div>'
+
+  function renderWith(direction: 'inbound' | 'outbound', avatar?: ReactNode): string {
+    const message = buildMessage({ id: 'm', direction, authorName: 'Ana Souza', text: 'Hi' })
+    return renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={{ kind: 'server', message }}
+        labels={LABELS}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+        avatar={avatar}
+      />,
+    ).replace(/>\d\d:\d\d</, '>HH:MM<')
+  }
+
+  it('keeps the markup identical to the one before the prop existed when avatar is absent', () => {
+    expect(renderWith('outbound')).toBe(GOLDEN_RECEIVED)
+  })
+
+  it('puts the avatar to the left of a received bubble inside a row', () => {
+    const markup = renderWith('outbound', <span className="cv-p-avatar">AS</span>)
+    expect(markup).toBe(
+      `<div class="cv-p-bubble-row"><span class="cv-p-bubble-row__avatar"><span class="cv-p-avatar">AS</span></span>${GOLDEN_RECEIVED}</div>`,
+    )
+  })
+
+  it('reserves the avatar space when the slot is null', () => {
+    expect(renderWith('outbound', null)).toContain('<span class="cv-p-bubble-row__avatar"></span>')
+  })
+
+  it('never draws the avatar on an own message', () => {
+    const own = renderWith('inbound', <span className="cv-p-avatar">AS</span>)
+    expect(own).not.toContain('cv-p-avatar')
+    expect(own).not.toContain('cv-p-bubble-row')
+  })
+})

package/src/participant/ParticipantMessageBubble.tsx

@@ -1,14 +1,16 @@
+import type { ReactNode } from 'react'
+
 import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 
-import { MessageText } from '../MessageText'
-import { StatusTicks } from '../StatusTicks'
 import { formatTimestamp } from '../lib/format'
+import { FailedActions, OwnStatus } from './ParticipantBubbleStatus'
+import { ParticipantMessageText } from './ParticipantMessageText'
 import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
 import {
   isOwnMessage,
   resolveOwnMessageStatus,
-  type ParticipantOwnMessageStatus,
   type ParticipantPendingDisplayState,
   type ParticipantTimelineItem,
 } from './participantMessages'
@@ -24,6 +26,12 @@ export type ParticipantMessageBubbleProps = {
   readonly onDiscard?: () => void
   /** Absent means no edit button. */
   readonly onEdit?: () => void
+  /** Opt-in slot to the left of a received bubble; null reserves the space, absent changes nothing. */
+  readonly avatar?: ReactNode
+  /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
+  readonly tail?: boolean
+  /** Who is looking; absent is the participant. The operator owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
 }
 
 type BubbleContent = {
@@ -37,11 +45,11 @@ type BubbleContent = {
   readonly serverStatus?: MessageDeliveryStatus
 }
 
-function describeItem(item: ParticipantTimelineItem): BubbleContent {
+function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPerspective): BubbleContent {
   if (item.kind === 'server') {
     const { message } = item
     return {
-      isMine: isOwnMessage(message),
+      isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
       createdAt: message.createdAt,
@@ -60,79 +68,11 @@ function describeItem(item: ParticipantTimelineItem): BubbleContent {
   }
 }
 
-function statusText(status: ParticipantOwnMessageStatus, labels: ParticipantConversationsLabels): string {
-  const byStatus: Record<ParticipantOwnMessageStatus, string> = {
-    sending: labels.statusSending,
-    queued: labels.statusQueued,
-    sent: labels.statusSent,
-    delivered: labels.statusDelivered,
-    read: labels.statusRead,
-    failed: labels.statusFailed,
-  }
-  return byStatus[status]
-}
-
-type OwnStatusProps = {
-  readonly status: ParticipantOwnMessageStatus
-  readonly labels: ParticipantConversationsLabels
-  readonly onRetry?: () => void
-}
-
-function OwnStatus({ status, labels, onRetry }: OwnStatusProps) {
-  const ticksStatus = status === 'sending' ? 'queued' : status
-  const isVisibleText = status === 'sending' || status === 'queued' || status === 'failed'
-
-  if (status === 'failed' && onRetry) {
-    return (
-      <button type="button" className="cv-p-bubble__retry" onClick={onRetry}>
-        <StatusTicks status="failed" appearance="stylesheet" />
-        <span>{labels.statusFailed}</span>
-      </button>
-    )
-  }
-
-  const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
-  return (
-    <span className="cv-p-bubble__status">
-      <StatusTicks status={ticksStatus} appearance="stylesheet" />
-      <span className={isVisibleText ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
-    </span>
-  )
-}
-
-type FailedActionsProps = {
-  readonly labels: ParticipantConversationsLabels
-  readonly onDiscard?: () => void
-  readonly onEdit?: () => void
-}
-
-function FailedActions({ labels, onDiscard, onEdit }: FailedActionsProps) {
-  if (!onDiscard && !onEdit) return null
-  return (
-    <span className="cv-p-bubble__actions">
-      {onEdit ? (
-        <button type="button" className="cv-p-bubble__action" onClick={onEdit}>
-          {labels.edit}
-        </button>
-      ) : null}
-      {onDiscard ? (
-        <button type="button" className="cv-p-bubble__action" onClick={onDiscard}>
-          {labels.discard}
-        </button>
-      ) : null}
-    </span>
-  )
-}
-
-function toTextPayload(text: string, createdAt: string, isMine: boolean) {
-  return {
-    id: createdAt,
-    type: 'text' as const,
-    content: text,
-    direction: isMine ? ('inbound' as const) : ('outbound' as const),
-    sender: isMine ? ('customer' as const) : ('agent' as const),
-    timestamp: createdAt,
-  }
+function bubbleClassName(isMine: boolean, hasTail: boolean): string {
+  const classes = ['cv-p-bubble']
+  if (isMine) classes.push('cv-p-bubble--mine')
+  if (!hasTail) classes.push('cv-p-bubble--no-tail')
+  return classes.join(' ')
 }
 
 export function ParticipantMessageBubble({
@@ -143,23 +83,24 @@ export function ParticipantMessageBubble({
   onRetry,
   onDiscard,
   onEdit,
+  avatar,
+  tail = true,
+  perspective,
 }: ParticipantMessageBubbleProps) {
-  const content = describeItem(item)
+  const content = describeItem(item, perspective)
   const { isMine } = content
   const ownStatus = isMine
     ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead })
     : undefined
 
-  return (
-    <div className={isMine ? 'cv-p-bubble cv-p-bubble--mine' : 'cv-p-bubble'}>
+  const bubble = (
+    <div className={bubbleClassName(isMine, tail)}>
       {isMine ? (
         <span className="cv-p-sr-only">{labels.me}</span>
       ) : content.authorName ? (
         <span className="cv-p-bubble__author">{content.authorName}</span>
       ) : null}
-      {content.text ? (
-        <MessageText message={toTextPayload(content.text, content.createdAt, isMine)} copyOnClick={false} appearance="stylesheet" />
-      ) : null}
+      {content.text ? <ParticipantMessageText text={content.text} labels={labels} /> : null}
       {content.attachments.map((attachment) => (
         <ParticipantAttachmentItem
           key={attachment.id}
@@ -182,4 +123,11 @@ export function ParticipantMessageBubble({
       {ownStatus === 'failed' ? <FailedActions labels={labels} onDiscard={onDiscard} onEdit={onEdit} /> : null}
     </div>
   )
+  if (avatar === undefined || isMine) return bubble
+  return (
+    <div className="cv-p-bubble-row">
+      <span className="cv-p-bubble-row__avatar">{avatar}</span>
+      {bubble}
+    </div>
+  )
 }

package/src/participant/ParticipantMessageNodes.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+
+import { ParticipantCopyableToken, ParticipantLinkCopyButton } from './ParticipantCopyableToken'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import type { InlineNode } from './participantMessageFormat.types'
+
+export type ParticipantTextLabels = Pick<
+  ParticipantConversationsLabels,
+  'externalLinkHint' | 'copyValue' | 'valueCopied'
+>
+
+const LINK_REL = 'noopener noreferrer nofollow ugc'
+
+function renderLink(
+  node: Extract<InlineNode, { kind: 'link' }>,
+  labels: ParticipantTextLabels,
+  key: number,
+): ReactNode {
+  const isExternal = /^https?:/i.test(node.href)
+  return (
+    <span className="cv-p-text__link-group" key={key}>
+      <a className="cv-p-text__link" href={node.href} rel={LINK_REL} target={isExternal ? '_blank' : undefined}>
+        {node.label}
+        {isExternal ? <span className="cv-p-sr-only"> ({labels.externalLinkHint})</span> : null}
+      </a>
+      <ParticipantLinkCopyButton value={node.href} labels={labels} />
+    </span>
+  )
+}
+
+export function renderInlineNodes(nodes: readonly InlineNode[], labels: ParticipantTextLabels): ReactNode[] {
+  return nodes.map((node, key): ReactNode => {
+    switch (node.kind) {
+      case 'text':
+        return node.value
+      case 'strong':
+        return <strong key={key}>{renderInlineNodes(node.children, labels)}</strong>
+      case 'em':
+        return <em key={key}>{renderInlineNodes(node.children, labels)}</em>
+      case 'del':
+        return <del key={key}>{renderInlineNodes(node.children, labels)}</del>
+      case 'code':
+        return (
+          <code className="cv-p-text__code" key={key}>
+            {node.value}
+          </code>
+        )
+      case 'link':
+        return renderLink(node, labels, key)
+      case 'copyable':
+        return <ParticipantCopyableToken key={key} copyKind={node.copyKind} value={node.value} labels={labels} />
+    }
+  })
+}