@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/src/participant/ParticipantMessageText.test.tsx

@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantMessageText } from './ParticipantMessageText'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+
+function render(text: string | null | undefined, labels = LABELS): string {
+  return renderToStaticMarkup(<ParticipantMessageText text={text} labels={labels} />)
+}
+
+describe('ParticipantMessageText - markup', () => {
+  it('keeps plain text as minimal, stable markup', () => {
+    expect(render('Olá, tudo bem?')).toBe('<div class="cv-p-text">Olá, tudo bem?</div>')
+    expect(render('a\nb')).toBe('<div class="cv-p-text">a\nb</div>')
+  })
+
+  it('draws nothing for empty input', () => {
+    expect(render('')).toBe('')
+    expect(render('  ')).toBe('')
+    expect(render(null)).toBe('')
+  })
+
+  it('renders marks as semantic elements, nested', () => {
+    expect(render('*_a_* ~b~ `c`')).toBe(
+      '<div class="cv-p-text"><strong><em>a</em></strong> <del>b</del> <code class="cv-p-text__code">c</code></div>',
+    )
+  })
+
+  it('renders blocks as pre, blockquote and lists', () => {
+    expect(render('```\nx\n```')).toBe('<div class="cv-p-text"><pre class="cv-p-text__pre"><code>x</code></pre></div>')
+    expect(render('> q')).toContain('<blockquote class="cv-p-text__quote">q</blockquote>')
+    expect(render('- a\n- b')).toContain('<ul class="cv-p-text__list"><li>a</li><li>b</li></ul>')
+    expect(render('3. a')).toContain('<ol class="cv-p-text__list" start="3"><li>a</li></ol>')
+    expect(render('1. a')).toContain('<ol class="cv-p-text__list"><li>a</li></ol>')
+  })
+})
+
+describe('ParticipantMessageText - links', () => {
+  it('opens http links safely in a new tab, announces it, and offers a separate copy button', () => {
+    const markup = render('veja https://a.com/?a=1&b=2 já')
+    expect(markup).toContain('<a class="cv-p-text__link" href="https://a.com/?a=1&amp;b=2"')
+    expect(markup).toContain('rel="noopener noreferrer nofollow ugc"')
+    expect(markup).toContain('target="_blank"')
+    expect(markup).toContain('<span class="cv-p-sr-only"> (opens in a new tab)</span>')
+    expect(markup).toContain(
+      '<button type="button" class="cv-p-text__link-copy" aria-label="Copy https://a.com/?a=1&amp;b=2">',
+    )
+  })
+
+  it('never makes the whole link a copy button', () => {
+    const markup = render('https://a.com')
+    expect(markup).toMatch(/<a [^>]*>https:\/\/a\.com<span[^>]*>[^<]*<\/span><\/a>/)
+    expect(markup).not.toMatch(/<button[^>]*><a /)
+    expect(markup.slice(markup.indexOf('<a '), markup.indexOf('</a>'))).not.toContain('<button')
+    expect(markup.indexOf('</a>')).toBeLessThan(markup.indexOf('<button'))
+  })
+
+  it('uses the host label for the new-tab hint', () => {
+    expect(render('https://a.com', { ...LABELS, externalLinkHint: 'abre em nova aba' })).toContain('(abre em nova aba)')
+  })
+
+  it('never links unsafe protocols', () => {
+    for (const text of ['javascript:alert(1)', 'data:text/html,<b>x</b>', 'vbscript:x', 'JAVASCRIPT:alert(1)']) {
+      expect(render(text)).not.toContain('<a ')
+      expect(render(text)).not.toContain('href=')
+    }
+  })
+
+  it('escapes hostile text: no script element and no event-handler attribute', () => {
+    const markup = render('<script>alert(1)</script> <img src=x onerror=alert(1)> *<b onclick=x>*')
+    expect(markup).not.toContain('<script')
+    expect(markup).not.toContain('<img')
+    expect(markup).not.toMatch(/<[a-z]+[^>]*\son[a-z]+=/i)
+    expect(markup).toContain('&lt;script&gt;')
+  })
+})
+
+describe('ParticipantMessageText - copyable tokens', () => {
+  it('renders a token as an accessible button with the value as typed', () => {
+    const markup = render('CPF 529.982.247-25')
+    expect(markup).toContain(
+      '<button type="button" class="cv-p-copyable cv-p-copyable--cpf" aria-label="Copy 529.982.247-25">529.982.247-25</button>',
+    )
+  })
+
+  it('renders one button per kind and labels it from the host labels', () => {
+    const markup = render('a@b.co (16) 99999-0000 11.222.333/0001-81', { ...LABELS, copyValue: 'Copiar' })
+    expect(markup).toContain('cv-p-copyable--email')
+    expect(markup).toContain('cv-p-copyable--phone')
+    expect(markup).toContain('cv-p-copyable--cnpj')
+    expect(markup).toContain('aria-label="Copiar a@b.co"')
+  })
+
+  it('does not highlight code, money, dates or short numbers', () => {
+    expect(render('`529.982.247-25`')).not.toContain('cv-p-copyable')
+    expect(render('R$ 1.234,56 em 10/10/2026, NF 4521 (12345)')).not.toContain('cv-p-copyable')
+  })
+
+  it('uses no live region of its own and no innerHTML', () => {
+    const markup = render('a@b.co https://a.com')
+    expect(markup).not.toContain('aria-live')
+    expect(markup).not.toContain('dangerouslySetInnerHTML')
+  })
+})

package/src/participant/ParticipantMessageText.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import { renderInlineNodes, type ParticipantTextLabels } from './ParticipantMessageNodes'
+import { parseParticipantMessage } from './participantMessageFormat'
+import type { FormatBlock } from './participantMessageFormat.types'
+
+export type ParticipantMessageTextProps = {
+  readonly text: string | null | undefined
+  readonly labels: ParticipantTextLabels
+}
+
+function renderBlock(block: FormatBlock, labels: ParticipantTextLabels, key: number) {
+  if (block.kind === 'paragraph') return <span key={key}>{renderInlineNodes(block.children, labels)}</span>
+  if (block.kind === 'pre') {
+    return (
+      <pre className="cv-p-text__pre" key={key}>
+        <code>{block.value}</code>
+      </pre>
+    )
+  }
+  if (block.kind === 'quote') {
+    return (
+      <blockquote className="cv-p-text__quote" key={key}>
+        {renderInlineNodes(block.children, labels)}
+      </blockquote>
+    )
+  }
+  const items = block.items.map((item, index) => <li key={index}>{renderInlineNodes(item, labels)}</li>)
+  if (block.ordered) {
+    return (
+      <ol className="cv-p-text__list" key={key} start={block.start === 1 ? undefined : block.start}>
+        {items}
+      </ol>
+    )
+  }
+  return (
+    <ul className="cv-p-text__list" key={key}>
+      {items}
+    </ul>
+  )
+}
+
+export function ParticipantMessageText({ text, labels }: ParticipantMessageTextProps) {
+  const blocks = useMemo(() => parseParticipantMessage(text), [text])
+  if (blocks.length === 0) return null
+  const [only] = blocks
+  const children =
+    blocks.length === 1 && only?.kind === 'paragraph'
+      ? renderInlineNodes(only.children, labels)
+      : blocks.map((block, key) => renderBlock(block, labels, key))
+  return <div className="cv-p-text">{children}</div>
+}

package/src/participant/ParticipantProtocolBadge.tsx

@@ -1,3 +1,4 @@
+import { Check, Copy } from 'lucide-react'
 import { useEffect, useReducer } from 'react'
 
 import type { ParticipantConversationsLabels } from './participantLabels'
@@ -29,18 +30,25 @@ export function ParticipantProtocolBadgeView({
   const { isCopied, copyCount } = copyState
   return (
     <>
-      <div className="cv-p-protocol cv-p-protocol--header">
+      <span className="cv-p-protocol cv-p-protocol--header">
         <span className="cv-p-protocol__code">
           <span className="cv-p-sr-only">{labels.protocolPrefix} </span>
           {protocol}
         </span>
-        <button type="button" className="cv-p-protocol__copy" onClick={onCopy}>
-          <span aria-hidden="true">{isCopied ? labels.protocolCopied : labels.copyProtocol}</span>
-          <span className="cv-p-sr-only">
-            {labels.copyProtocol} {protocol}
-          </span>
+        <button
+          type="button"
+          className="cv-p-protocol__copy"
+          aria-label={`${labels.copyProtocol} ${protocol}`}
+          onClick={onCopy}
+        >
+          {isCopied ? <Check size={18} aria-hidden={true} /> : <Copy size={18} aria-hidden={true} />}
+          {isCopied ? (
+            <span className="cv-p-protocol__copied" aria-hidden="true">
+              {labels.protocolCopied}
+            </span>
+          ) : null}
         </button>
-      </div>
+      </span>
       <div className="cv-p-sr-only" role="status" aria-live="polite">
         {isCopied ? <span key={copyCount}>{labels.protocolCopied}</span> : null}
       </div>

package/src/participant/ParticipantProtocolView.test.tsx

@@ -148,16 +148,14 @@ describe('copy button', () => {
       />,
     )
 
-  it('has a default visible label starting the accessible name', () => {
+  it('has a default accessible name that starts with the visible action and carries the code', () => {
     expect(LABELS.copyProtocol).toBe('Copy protocol')
-    const markup = render(false)
-    expect(markup).toContain('<span aria-hidden="true">Copy protocol</span>')
-    expect(markup).toContain('<span class="cv-p-sr-only">Copy protocol 261009-K7M2</span>')
+    expect(render(false)).toContain('aria-label="Copy protocol 261009-K7M2"')
   })
 
-  it('swaps the visible text for the confirmation while copied, hidden from assistive tech', () => {
+  it('shows the confirmation next to the icon while copied, hidden from assistive tech', () => {
     const markup = render(true)
-    expect(markup).toContain(`<span aria-hidden="true">${LABELS.protocolCopied}</span>`)
+    expect(markup).toContain(`<span class="cv-p-protocol__copied" aria-hidden="true">${LABELS.protocolCopied}</span>`)
     expect(markup).toContain(`<span>${LABELS.protocolCopied}</span></div>`)
   })
 

package/src/participant/ParticipantScrollToLatest.test.tsx

@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'bun:test'
+import type { ReactElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import {
+  buildConversation,
+  buildMessage,
+  findForeignClassTokens,
+  findUtilityClassTokens,
+} from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
+import { ParticipantThread, type ParticipantThreadProps } from './ParticipantThread'
+
+const LABEL = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS.scrollToLatest
+
+function renderButton(overrides: Partial<Parameters<typeof ParticipantScrollToLatest>[0]> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantScrollToLatest
+      label={LABEL}
+      isAwayFromBottom
+      hasMessages
+      newMessagesCount={0}
+      onClick={() => undefined}
+      {...overrides}
+    />,
+  )
+}
+
+function renderThread(overrides: Partial<ParticipantThreadProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1' })}
+      items={[{ kind: 'server', message: buildMessage({ id: 'a', createdAt: '2026-10-01T10:00:00.000Z' }) }]}
+      hasMore={false}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      resolveAttachmentUrl={async () => 'https://files.example/a'}
+      draft={{ value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined }}
+      onSend={() => undefined}
+      status="ready"
+      refresh={() => undefined}
+      scroll={{
+        ref: { current: null },
+        onScroll: () => undefined,
+        isAwayFromBottom: true,
+        scrollToLatest: () => undefined,
+      }}
+      newMessagesCount={0}
+      isSending={false}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantScrollToLatest', () => {
+  it('has a generic English default label', () => {
+    expect(LABEL).toBe('Scroll to latest message')
+  })
+
+  it('draws nothing near the end of the conversation', () => {
+    expect(renderButton({ isAwayFromBottom: false })).toBe('')
+  })
+
+  it('draws nothing without messages', () => {
+    expect(renderButton({ hasMessages: false })).toBe('')
+  })
+
+  it('is a named button that does not submit anything', () => {
+    const markup = renderButton()
+    expect(markup).toContain(`aria-label="${LABEL}"`)
+    expect(markup).toContain('type="button"')
+    expect(markup).toContain('class="cv-p-thread__latest-button"')
+  })
+
+  it('keeps the icon decorative', () => {
+    expect(renderButton()).toContain('aria-hidden="true"')
+  })
+
+  it('shows the count of new incoming messages in a badge hidden from the accessibility tree', () => {
+    expect(renderButton({ newMessagesCount: 3 })).toContain(
+      '<span class="cv-p-thread__latest-badge" aria-hidden="true">3</span>',
+    )
+  })
+
+  it('has no badge with zero new messages', () => {
+    expect(renderButton({ newMessagesCount: 0 })).not.toContain('cv-p-thread__latest-badge')
+  })
+
+  it('has the aria-label exactly as the label, without the count', () => {
+    expect(renderButton({ newMessagesCount: 3 })).toContain(`aria-label="${LABEL}"`)
+  })
+})
+
+describe('ParticipantScrollToLatest focus', () => {
+  it('moves focus to the scroller before scrolling, since the button unmounts on click', () => {
+    const order: string[] = []
+    const root = ParticipantScrollToLatest({
+      label: LABEL,
+      isAwayFromBottom: true,
+      hasMessages: true,
+      newMessagesCount: 0,
+      onClick: () => void order.push('scroll'),
+    }) as ReactElement<{ children: ReactElement<{ onClick: (event: unknown) => void }> }>
+    const button = root.props.children
+    button.props.onClick({
+      currentTarget: { closest: () => ({ focus: () => void order.push('focus') }) },
+    })
+    expect(order).toEqual(['focus', 'scroll'])
+  })
+
+  it('makes the scroller focusable by script only', () => {
+    expect(renderThread()).toMatch(/<div class="cv-p-thread__scroll" tabindex="-1">/)
+  })
+})
+
+describe('ParticipantThread with the scroll-to-latest button', () => {
+  it('draws the button inside the scroller, after the messages', () => {
+    const markup = renderThread()
+    const scroller = markup.indexOf('cv-p-thread__scroll')
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeGreaterThan(markup.indexOf('cv-p-thread__messages'))
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeGreaterThan(scroller)
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeLessThan(markup.indexOf('cv-p-thread__live'))
+  })
+
+  it('does not draw it while the reader is at the end', () => {
+    const scroll = { ref: { current: null }, onScroll: () => undefined, isAwayFromBottom: false }
+    expect(renderThread({ scroll })).not.toContain('cv-p-thread__latest')
+  })
+
+  it('does not draw it for a host that gives no away state', () => {
+    expect(renderThread({ scroll: { ref: { current: null }, onScroll: () => undefined } })).not.toContain(
+      'cv-p-thread__latest',
+    )
+  })
+
+  it('announces only the new-messages label, never the count or the button label', () => {
+    const markup = renderThread({ newMessagesCount: 2 })
+    expect(markup).toContain('role="status" aria-live="polite">New messages</div>')
+    expect(markup.split('New messages').length - 1).toBe(1)
+    expect(markup.match(/aria-live/g)).toHaveLength(1)
+  })
+
+  it('lets the host translate the label', () => {
+    const labels = { ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, scrollToLatest: 'Ir para a última mensagem' }
+    expect(renderThread({ labels })).toContain('aria-label="Ir para a última mensagem"')
+  })
+
+  it('stays inside the participant namespace with no utility classes', () => {
+    const markup = renderThread({ newMessagesCount: 2 })
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/ParticipantScrollToLatest.tsx

@@ -0,0 +1,40 @@
+import { ChevronDown } from 'lucide-react'
+
+import { focusScrollerOf } from './participantScrollFocus'
+import { resolveScrollToLatestView } from './participantScrollView'
+
+export type ParticipantScrollToLatestProps = {
+  readonly label: string
+  readonly isAwayFromBottom: boolean
+  readonly hasMessages: boolean
+  readonly newMessagesCount: number
+  /** Absent (a host that does not own the scroller) draws nothing. */
+  readonly onClick: (() => void) | undefined
+}
+
+export function ParticipantScrollToLatest({
+  label,
+  isAwayFromBottom,
+  hasMessages,
+  newMessagesCount,
+  onClick,
+}: ParticipantScrollToLatestProps) {
+  const { isVisible, badge } = resolveScrollToLatestView({ isAwayFromBottom, newMessagesCount, hasMessages })
+  if (!isVisible || onClick === undefined) return null
+  return (
+    <div className="cv-p-thread__latest">
+      <button type="button" className="cv-p-thread__latest-button" aria-label={label} onClick={(event) => {
+          focusScrollerOf(event.currentTarget)
+          onClick()
+        }}
+      >
+        <ChevronDown size={24} aria-hidden="true" focusable="false" />
+        {badge ? (
+          <span className="cv-p-thread__latest-badge" aria-hidden="true">
+            {badge}
+          </span>
+        ) : null}
+      </button>
+    </div>
+  )
+}

package/src/participant/ParticipantThread.test.tsx

@@ -146,4 +146,41 @@ describe('ParticipantThread', () => {
     expect(findUtilityClassTokens(markup)).toEqual([])
     expect(findForeignClassTokens(markup)).toEqual([])
   })
+
+  it('draws no avatar by default', () => {
+    expect(render()).not.toContain('cv-p-avatar')
+    expect(render()).not.toContain('cv-p-bubble-row')
+  })
+
+  it('draws initials on the first received message of each sequence, never on own messages', () => {
+    const markup = render({
+      avatars: 'initials',
+      items: [
+        { kind: 'server', message: buildMessage({ id: 'a', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'b', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'c', direction: 'inbound' }) },
+        { kind: 'server', message: buildMessage({ id: 'd', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'e', authorName: 'Bruno Lima' }) },
+      ],
+    })
+    expect(markup.match(/class="cv-p-bubble-row"/g)?.length).toBe(4)
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length).toBe(2)
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">BL</g)?.length).toBe(1)
+  })
+
+  it('uses the neutral icon when the author has no usable name', () => {
+    const markup = render({ avatars: 'initials' })
+    expect(markup).toContain('class="cv-p-avatar" aria-hidden="true"><svg')
+  })
+
+  it('gives the host slot precedence over initials, even without the avatars prop', () => {
+    const markup = render({
+      avatars: 'initials',
+      renderAuthorAvatar: ({ name }) => <img alt="" src={`https://photos.example/${name ?? 'none'}.png`} />,
+      items: [{ kind: 'server', message: buildMessage({ id: 'a', authorName: 'Ana Souza' }) }],
+    })
+    expect(markup).toContain('src="https://photos.example/Ana Souza.png"')
+    expect(markup).not.toContain('>AS<')
+    expect(render({ renderAuthorAvatar: () => <i>x</i> })).toContain('<i>x</i>')
+  })
 })

package/src/participant/ParticipantThread.tsx

@@ -2,25 +2,23 @@ import type { ReactNode } from 'react'
 
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
-import { channelCapabilityFor } from '../channelCapability'
 import type { ConversationChannel } from '../conversationChannel'
-import { isSameDay } from '../lib/format'
 import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ParticipantTimelineItem } from './participantMessages'
 import { ParticipantComposer } from './ParticipantComposer'
+import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
-import {
-  bindPendingActions,
-  resolveParticipantBubbleActions,
-  type ParticipantPendingActions,
-} from './participantBubbleActions'
+import type { ParticipantPendingActions } from './participantBubbleActions'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+import type { ParticipantPerspective } from './participantPerspective'
 import type { ParticipantThreadScroll } from './useStickToBottom'
-import type { ParticipantTimelineItem } from './participantMessages'
-import { ParticipantMessageBubble } from './ParticipantMessageBubble'
-import { ParticipantChannelBadges } from './ParticipantChannelBadges'
-import { ParticipantProtocolBadge } from './ParticipantProtocolBadge'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
+import { ParticipantTimeline } from './ParticipantTimeline'
+import { ParticipantThreadHeader } from './ParticipantThreadHeader'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
 
 export type ParticipantThreadDraft = {
   readonly value: string
@@ -55,83 +53,22 @@ export type ParticipantThreadProps = {
   readonly acceptedTypes?: readonly string[]
   readonly maxLength?: number
   readonly renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
-}
-
-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}`
-}
-
-function resolveActions(item: ParticipantTimelineItem, pendingActions?: ParticipantPendingActions) {
-  if (!pendingActions || item.kind === 'server') return {}
-  return resolveParticipantBubbleActions(item, bindPendingActions(pendingActions, item.pending.clientMessageId))
-}
-
-function Header({ props }: { readonly props: ParticipantThreadProps }) {
-  const { conversation, labels, onBack, onOpenSubject } = props
-  const { subjectType, subjectId } = conversation
-
-  return (
-    <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}
-      <div className="cv-p-thread__heading">
-        <h2 className="cv-p-thread__title">
-          {onOpenSubject ? (
-            <button
-              type="button"
-              className="cv-p-thread__title-button"
-              aria-label={`${labels.openSubject}: ${conversation.subjectLabel}`}
-              onClick={() => onOpenSubject({ subjectType, subjectId })}
-            >
-              {conversation.subjectLabel}
-            </button>
-          ) : (
-            conversation.subjectLabel
-          )}
-        </h2>
-        {conversation.protocol ? <ParticipantProtocolBadge protocol={conversation.protocol} labels={labels} /> : null}
-        <ParticipantChannelBadges channels={conversation.channels} labels={labels} />
-      </div>
-    </header>
-  )
-}
-
-function Timeline({ props }: { readonly props: ParticipantThreadProps }) {
-  const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props
-  const confirmsRead = channelCapabilityFor(props.channel ?? 'app').confirmsRead
-  const nodes: ReactNode[] = []
-  let previousDay: Date | undefined
-
-  for (const item of items) {
-    const day = new Date(createdAtOf(item))
-    if (previousDay === undefined || !isSameDay(previousDay, day)) {
-      nodes.push(
-        <div key={`day:${keyOf(item)}`} className="cv-p-day" role="separator">
-          {day.toLocaleDateString(locale, { weekday: 'short', day: '2-digit', month: '2-digit' })}
-        </div>,
-      )
-    }
-    previousDay = day
-    nodes.push(
-      <ParticipantMessageBubble
-        key={keyOf(item)}
-        item={item}
-        labels={labels}
-        confirmsRead={confirmsRead}
-        resolveAttachmentUrl={resolveAttachmentUrl}
-        {...resolveActions(item, pendingActions)}
-      />,
-    )
-  }
-  return <div className="cv-p-thread__messages">{nodes}</div>
+  /** Source of the eyebrow above the title: the label of the group of the conversation's subject type. */
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  /** Absent draws no avatar. The SDK has no photo: the host supplies it through renderAuthorAvatar. */
+  readonly avatars?: 'initials'
+  /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Host icon of the conversation avatar in the header; absent or empty falls back to the subject group icon. */
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
+  readonly tail?: boolean
+  /** Who is looking; absent is the participant, so nothing changes for the existing screen. */
+  readonly perspective?: ParticipantPerspective
+  /** Short line under the title, written by the host. */
+  readonly counterpartLabel?: string
+  /** Host slot at the end of the header bar (close, reopen...). */
+  readonly headerActions?: ReactNode
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -156,16 +93,25 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
   )
 }
 
-export function ParticipantThread(props: ParticipantThreadProps) {
+function ThreadBody(props: ParticipantThreadProps) {
   const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props
   const subjectCard = renderSubjectCard?.(conversation)
   const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 })
 
   return (
     <div className="cv-p cv-p-thread" aria-busy={loadView.isLoading}>
-      <Header props={props} />
+      <ParticipantThreadHeader
+        conversation={conversation}
+        labels={labels}
+        subjectGroups={props.subjectGroups}
+        renderSubjectIcon={props.renderSubjectIcon}
+        onBack={props.onBack}
+        onOpenSubject={props.onOpenSubject}
+        counterpartLabel={props.counterpartLabel}
+        actions={props.headerActions}
+      />
       {subjectCard ? <div className="cv-p-thread__subject-card">{subjectCard}</div> : null}
-      <div className="cv-p-thread__scroll" ref={props.scroll.ref} onScroll={props.scroll.onScroll}>
+      <div className="cv-p-thread__scroll" ref={props.scroll.ref} onScroll={props.scroll.onScroll} tabIndex={-1}>
         {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
         {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
         {hasMore && onLoadOlder ? (
@@ -173,12 +119,25 @@ export function ParticipantThread(props: ParticipantThreadProps) {
             {labels.loadOlder}
           </button>
         ) : null}
-        <Timeline props={props} />
-      </div>
-      <div className="cv-p-thread__live" role="status" aria-live="polite">
-        {props.newMessagesCount > 0 ? labels.newMessages : ''}
+        <ParticipantTimeline {...props} />
+        <ParticipantScrollToLatest
+          label={labels.scrollToLatest}
+          isAwayFromBottom={props.scroll.isAwayFromBottom === true}
+          hasMessages={props.items.length > 0}
+          newMessagesCount={props.newMessagesCount}
+          onClick={props.scroll.scrollToLatest}
+        />
       </div>
+      <ParticipantThreadLive notice={props.newMessagesCount > 0 ? labels.newMessages : ''} />
       <Footer props={props} />
     </div>
   )
 }
+
+export function ParticipantThread(props: ParticipantThreadProps) {
+  return (
+    <ParticipantCopyAnnouncer>
+      <ThreadBody {...props} />
+    </ParticipantCopyAnnouncer>
+  )
+}