@adatechnology/conversations-ui 0.6.1 → 0.7.0

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,22 @@ 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 { 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 +52,16 @@ 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
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -156,16 +86,23 @@ 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}
+      />
       {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 +110,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>
+  )
+}

package/src/participant/ParticipantThreadAvatarSequence.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, buildMessage } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import type { ParticipantTimelineItem } from './participantMessages'
+import { ParticipantThread } from './ParticipantThread'
+
+function ana(id: string, createdAt: string): ParticipantTimelineItem {
+  return { kind: 'server', message: buildMessage({ id, authorName: 'Ana Souza', createdAt }) }
+}
+
+function mine(id: string, createdAt: string): ParticipantTimelineItem {
+  return { kind: 'server', message: buildMessage({ id, direction: 'inbound', authorName: 'Ana Souza', createdAt }) }
+}
+
+function render(items: readonly ParticipantTimelineItem[]): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1' })}
+      items={items}
+      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 }}
+      newMessagesCount={0}
+      isSending={false}
+      avatars="initials"
+    />,
+  )
+}
+
+function countAvatars(markup: string): number {
+  return markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length ?? 0
+}
+
+describe('avatar sequence in the thread', () => {
+  it('shows one avatar for consecutive messages of the same author', () => {
+    const markup = render([ana('a', '2026-10-01T10:00:00.000Z'), ana('b', '2026-10-01T10:01:00.000Z')])
+    expect(countAvatars(markup)).toBe(1)
+  })
+
+  it('shows the avatar again after an own message of the same author in between', () => {
+    const markup = render([
+      ana('a', '2026-10-01T10:00:00.000Z'),
+      mine('b', '2026-10-01T10:01:00.000Z'),
+      ana('c', '2026-10-01T10:02:00.000Z'),
+    ])
+    expect(countAvatars(markup)).toBe(2)
+  })
+
+  it('shows the avatar again after the day separator', () => {
+    const markup = render([ana('a', '2026-10-01T10:00:00.000Z'), ana('b', '2026-10-03T10:00:00.000Z')])
+    expect(markup).toMatch(/role="separator" aria-label="[^"]+"/)
+    expect(countAvatars(markup)).toBe(2)
+  })
+
+  it('never draws the avatar on own messages', () => {
+    expect(render([mine('a', '2026-10-01T10:00:00.000Z')])).not.toContain('cv-p-avatar')
+  })
+})

package/src/participant/ParticipantThreadHeader.test.tsx

@@ -0,0 +1,181 @@
+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 { buildConversation } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantProtocolBadgeView } from './ParticipantProtocolBadge'
+import { ParticipantThreadHeader, type ParticipantThreadHeaderProps } from './ParticipantThreadHeader'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+const GROUPS = [{ subjectType: 'invoice', label: 'Invoices' }]
+
+function render(overrides: Partial<ParticipantThreadHeaderProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThreadHeader
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Item 4521' })}
+      labels={LABELS}
+      {...overrides}
+    />,
+  )
+}
+
+function metaOf(markup: string): string {
+  const start = markup.indexOf('class="cv-p-thread__meta"')
+  const end = markup.indexOf('</header>', start)
+  return start === -1 ? '' : markup.slice(start, end)
+}
+
+describe('thread header structure', () => {
+  const conversation = buildConversation({
+    subjectId: '1',
+    subjectLabel: 'Item 4521',
+    protocol: '261009-K7M2',
+    channels: ['app', 'whatsapp'],
+  })
+
+  it('draws the eyebrow only when the subject type has a group', () => {
+    expect(render({ subjectGroups: GROUPS })).toContain('<p class="cv-p-thread__eyebrow">Invoices</p>')
+    expect(render()).not.toContain('cv-p-thread__eyebrow')
+    expect(render({ subjectGroups: [{ subjectType: 'other', label: 'Other' }] })).not.toContain('cv-p-thread__eyebrow')
+  })
+
+  it('draws the title, clickable only with onOpenSubject', () => {
+    expect(render()).toContain('Item 4521')
+    expect(render()).not.toContain('cv-p-thread__title-button')
+    expect(render({ onOpenSubject: () => undefined })).toContain('cv-p-thread__title-button')
+  })
+
+  it('keeps protocol, copy button and channel badges in one single meta line', () => {
+    const markup = render({ conversation })
+    expect(markup.match(/cv-p-thread__meta"/g)?.length).toBe(1)
+    const meta = metaOf(markup)
+    expect(meta).toContain('261009-K7M2')
+    expect(meta).toContain('cv-p-protocol__copy')
+    expect(meta).toContain('cv-p-channel--app')
+    expect(meta).toContain('cv-p-channel--whatsapp')
+    expect(markup.match(/cv-p-channels/g)?.length).toBe(1)
+    expect(markup.indexOf('cv-p-channels')).toBeGreaterThan(markup.indexOf('cv-p-thread__meta'))
+  })
+
+  it('does not draw a separate channels row', () => {
+    const markup = render({ conversation })
+    expect(markup).not.toContain('<ul')
+    expect(markup).toContain('<span class="cv-p-channels">')
+  })
+
+  it('draws the meta line with channels only when there is no protocol', () => {
+    const markup = render({ conversation: buildConversation({ subjectId: '1', channels: ['app'] }) })
+    expect(metaOf(markup)).toContain('cv-p-channel--app')
+    expect(markup).not.toContain('cv-p-protocol')
+  })
+
+  it('draws no meta line without protocol and without channels', () => {
+    const markup = render()
+    expect(markup).not.toContain('cv-p-thread__meta')
+    expect(markup).not.toContain('cv-p-protocol')
+    expect(markup).not.toContain('cv-p-channels')
+  })
+
+  it('draws the back button only with onBack', () => {
+    expect(render()).not.toContain('cv-p-thread__back')
+    expect(render({ onBack: () => undefined })).toContain('cv-p-thread__back')
+  })
+})
+
+describe('copy button as an icon', () => {
+  const view = (isCopied: boolean) =>
+    renderToStaticMarkup(
+      <ParticipantProtocolBadgeView
+        protocol="261009-K7M2"
+        labels={LABELS}
+        copyState={{ copyCount: isCopied ? 1 : 0, isCopied }}
+        onCopy={() => undefined}
+      />,
+    )
+
+  it('has the full accessible name and no visible text', () => {
+    const markup = view(false)
+    expect(markup).toContain('aria-label="Copy protocol 261009-K7M2"')
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+    expect(button).toContain('<svg')
+    expect(button.replace(/<[^>]+>/g, '')).toBe('')
+    expect(markup.replace(/aria-label="[^"]*"/g, '')).not.toContain('Copy protocol')
+  })
+
+  it('shows the short confirmation next to the icon while copied', () => {
+    const markup = view(true)
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+    expect(button).toContain(`<span class="cv-p-protocol__copied" aria-hidden="true">${LABELS.protocolCopied}</span>`)
+    expect(markup).toMatch(/aria-live="polite"><span>Protocol copied<\/span><\/div>/)
+  })
+
+  it('keeps the live region outside the protocol block', () => {
+    const markup = view(true)
+    const block = markup.slice(markup.indexOf('cv-p-protocol--header'), markup.indexOf('</button>'))
+    expect(block).not.toContain('aria-live')
+  })
+})
+
+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 toRem(value: string | undefined): number {
+  const match = /^(\d*\.?\d+)rem$/.exec(value ?? '')
+  return match ? Number(match[1]) : 0
+}
+
+describe('thread header CSS', () => {
+  it('lays the meta line out as a wrapping flex row', () => {
+    const meta = declarationsOf('.cv-p-thread__meta')
+    expect(meta.get('display')).toBe('flex')
+    expect(meta.get('flex-wrap')).toBe('wrap')
+  })
+
+  it('gives the copy button a wide touch area without inflating the line', () => {
+    const copy = declarationsOf('.cv-p-protocol__copy')
+    expect(toRem(copy.get('min-width'))).toBeGreaterThanOrEqual(2.75)
+    expect(toRem(copy.get('min-height'))).toBeGreaterThanOrEqual(2)
+    expect(copy.get('margin')).toMatch(/^-/)
+  })
+
+  it('sets a floor of 4rem on the header but never a fixed or maximum height', () => {
+    const header = declarationsOf('.cv-p-thread__header')
+    for (const property of ['height', 'max-height']) expect(header.has(property)).toBe(false)
+    expect(toRem(header.get('min-height'))).toBeGreaterThanOrEqual(4)
+  })
+
+  it('clamps the title to one line', () => {
+    expect(declarationsOf('.cv-p-thread__title-text').get('-webkit-line-clamp')).toBe('1')
+  })
+
+  it('draws the eyebrow like the list row kind label', () => {
+    const eyebrow = declarationsOf('.cv-p-thread__eyebrow')
+    expect(eyebrow.get('text-transform')).toBe('uppercase')
+    expect(eyebrow.get('font')).toContain('monospace')
+  })
+})
+
+describe('avatar CSS', () => {
+  it('draws a 2rem box that follows the host radius token', () => {
+    const avatar = declarationsOf('.cv-p-avatar')
+    expect(avatar.get('width')).toBe('2rem')
+    expect(avatar.get('height')).toBe('2rem')
+    expect(avatar.get('border-radius')).toBe('var(--cv-p-i-radius)')
+  })
+})

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}
     />
   )
 }