@adatechnology/conversations-ui 0.4.2 → 0.6.0

package/src/participant/ParticipantProtocolBadge.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useReducer } from 'react'
+
+import type { ParticipantConversationsLabels } from './participantLabels'
+import {
+  INITIAL_PROTOCOL_COPY_STATE,
+  copyProtocolToClipboard,
+  protocolCopyReducer,
+  type ProtocolCopyState,
+} from './participantProtocolCopy'
+
+const COPIED_ANNOUNCEMENT_MS = 3000
+
+export type ParticipantProtocolBadgeProps = {
+  readonly protocol: string
+  readonly labels: ParticipantConversationsLabels
+}
+
+export type ParticipantProtocolBadgeViewProps = ParticipantProtocolBadgeProps & {
+  readonly copyState: ProtocolCopyState
+  readonly onCopy: () => void
+}
+
+export function ParticipantProtocolBadgeView({
+  protocol,
+  labels,
+  copyState,
+  onCopy,
+}: ParticipantProtocolBadgeViewProps) {
+  const { isCopied, copyCount } = copyState
+  return (
+    <>
+      <div 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>
+      </div>
+      <div className="cv-p-sr-only" role="status" aria-live="polite">
+        {isCopied ? <span key={copyCount}>{labels.protocolCopied}</span> : null}
+      </div>
+    </>
+  )
+}
+
+export function ParticipantProtocolBadge({ protocol, labels }: ParticipantProtocolBadgeProps) {
+  const [copyState, dispatch] = useReducer(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE)
+  const { isCopied, copyCount } = copyState
+
+  useEffect(() => {
+    if (!isCopied) return undefined
+    const timer = setTimeout(() => dispatch({ type: 'expired' }), COPIED_ANNOUNCEMENT_MS)
+    return () => clearTimeout(timer)
+  }, [isCopied, copyCount])
+
+  async function handleCopy(): Promise<void> {
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: 'copied' })
+  }
+
+  return (
+    <ParticipantProtocolBadgeView
+      protocol={protocol}
+      labels={labels}
+      copyState={copyState}
+      onCopy={() => void handleCopy()}
+    />
+  )
+}

package/src/participant/ParticipantProtocolView.test.tsx

@@ -0,0 +1,208 @@
+import { describe, expect, it } from 'bun:test'
+import { readFileSync, readdirSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantInbox } from './ParticipantInbox'
+import { ParticipantProtocolBadgeView } from './ParticipantProtocolBadge'
+import { ParticipantThread } from './ParticipantThread'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+const WITH_PROTOCOL = buildConversation({ subjectId: '1', subjectLabel: 'Item 4521', protocol: '261009-K7M2' })
+const WITHOUT_PROTOCOL = buildConversation({ subjectId: '2', subjectLabel: 'Item 9999' })
+
+type InboxOverrides = {
+  search?: { value: string; isVisible: boolean }
+  hasMore?: boolean
+  filter?: string
+  hasMatchesOutsideFilter?: boolean
+}
+
+function renderInbox(conversations: readonly (typeof WITH_PROTOCOL)[], overrides: InboxOverrides = {}): string {
+  const view = {
+    ...groupParticipantConversations({ conversations, subjectGroups: [], filter: 'all' }),
+    ...(overrides.hasMatchesOutsideFilter === undefined
+      ? {}
+      : { hasMatchesOutsideFilter: overrides.hasMatchesOutsideFilter }),
+  }
+  return renderToStaticMarkup(
+    <ParticipantInbox
+      view={view}
+      subjectGroups={[]}
+      filter="all"
+      onFilterChange={() => undefined}
+      onSelect={() => undefined}
+      labels={LABELS}
+      status="ready"
+      refresh={() => undefined}
+      hasMore={overrides.hasMore ?? false}
+      loadMore={() => undefined}
+      search={overrides.search ? { ...overrides.search, onChange: () => undefined } : undefined}
+    />,
+  )
+}
+
+function renderThread(conversation: typeof WITH_PROTOCOL): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={conversation}
+      items={[]}
+      hasMore={false}
+      labels={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}
+    />,
+  )
+}
+
+describe('protocol in the inbox row', () => {
+  it('shows the protocol with an accessible name', () => {
+    const markup = renderInbox([WITH_PROTOCOL])
+    expect(markup).toContain('cv-p-protocol')
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('<span class="cv-p-sr-only">Protocol </span>261009-K7M2')
+    expect(markup).not.toMatch(/<span[^>]*aria-label/)
+  })
+
+  it('draws nothing when the protocol is absent', () => {
+    expect(renderInbox([WITHOUT_PROTOCOL])).not.toContain('cv-p-protocol')
+  })
+})
+
+describe('inbox search', () => {
+  it('is drawn with a label, placeholder and type=search when visible', () => {
+    const markup = renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: true } })
+    expect(markup).toContain('type="search"')
+    expect(markup).toContain('cv-p-search')
+    expect(markup).toContain(LABELS.searchLabel)
+    expect(markup).toContain(`placeholder="${LABELS.searchPlaceholder}"`)
+  })
+
+  it('is not drawn when hidden or when the prop is absent', () => {
+    expect(renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: false } })).not.toContain('cv-p-search')
+    expect(renderInbox([WITH_PROTOCOL])).not.toContain('cv-p-search')
+  })
+
+  it('shows the no-results state instead of the empty inbox when a query finds nothing', () => {
+    const markup = renderInbox([], { search: { value: 'zzz', isVisible: true } })
+    expect(markup).toContain(LABELS.noResults)
+    expect(markup).not.toContain(LABELS.emptyInbox)
+  })
+})
+
+describe('protocol in the thread header', () => {
+  it('shows the protocol and a copy button of at least a touch target', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('cv-p-protocol__copy')
+    expect(markup).toContain('type="button"')
+    expect(markup).toContain(LABELS.copyProtocol)
+  })
+
+  it('names the code with a visually hidden prefix and no aria-label on the generic span', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toContain(`<span class="cv-p-sr-only">${LABELS.protocolPrefix} </span>261009-K7M2`)
+    expect(markup).not.toMatch(/<span[^>]*aria-label/)
+  })
+
+  it('keeps an empty polite live region in the tree', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toMatch(/<div class="cv-p-sr-only" role="status" aria-live="polite"><\/div>/)
+    expect(markup).not.toContain(LABELS.protocolCopied)
+  })
+
+  it('draws neither protocol nor button nor live region when absent', () => {
+    const markup = renderThread(WITHOUT_PROTOCOL)
+    expect(markup).not.toContain('cv-p-protocol')
+    expect(markup.match(/aria-live="polite"/g)?.length).toBe(1)
+  })
+
+  it('does not nest a status region inside the protocol block', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    const block = markup.slice(
+      markup.indexOf('cv-p-protocol--header'),
+      markup.indexOf('</button>', markup.indexOf('cv-p-protocol__copy')),
+    )
+    expect(block).not.toContain('role="status"')
+    expect(block).not.toContain('aria-live')
+  })
+})
+
+describe('copy button', () => {
+  const render = (isCopied: boolean) =>
+    renderToStaticMarkup(
+      <ParticipantProtocolBadgeView
+        protocol="261009-K7M2"
+        labels={LABELS}
+        copyState={{ copyCount: isCopied ? 1 : 0, isCopied }}
+        onCopy={() => undefined}
+      />,
+    )
+
+  it('has a default visible label starting the accessible name', () => {
+    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>')
+  })
+
+  it('swaps the visible text for the confirmation while copied, hidden from assistive tech', () => {
+    const markup = render(true)
+    expect(markup).toContain(`<span aria-hidden="true">${LABELS.protocolCopied}</span>`)
+    expect(markup).toContain(`<span>${LABELS.protocolCopied}</span></div>`)
+  })
+
+  it('announces only through the live region, keyed by the copy count', () => {
+    expect(render(false)).toMatch(/aria-live="polite"><\/div>/)
+    expect(render(true)).toMatch(/aria-live="polite"><span>Protocol copied<\/span><\/div>/)
+  })
+})
+
+describe('inbox empty states', () => {
+  const search = { value: 'zzz', isVisible: true }
+
+  it('says the filter is the reason when the query matches in another subject', () => {
+    const markup = renderInbox([], { search, hasMatchesOutsideFilter: true })
+    expect(markup).toContain(LABELS.noResultsInFilter)
+    expect(markup).not.toContain(`>${LABELS.noResults}<`)
+  })
+
+  it('says the search covers only the loaded conversations when more exist', () => {
+    const markup = renderInbox([], { search, hasMore: true })
+    expect(markup).toContain(LABELS.noResultsLoadedOnly)
+    expect(markup).toContain(LABELS.loadMore)
+  })
+
+  it('keeps the plain message when nothing more can be loaded', () => {
+    expect(renderInbox([], { search })).toContain(`>${LABELS.noResults}<`)
+  })
+})
+
+describe('protocol markup hygiene', () => {
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup =
+      renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: true } }) + renderThread(WITH_PROTOCOL)
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+
+  it('keeps product vocabulary out of the new sources and labels', () => {
+    const files = readdirSync(fileURLToPath(new URL('.', import.meta.url))).filter(
+      (file) => /\.tsx?$/.test(file) && !/\.test(-helper)?\.tsx?$/.test(file),
+    )
+    const source = files.map((file) => readFileSync(new URL(file, import.meta.url), 'utf8')).join('\n')
+    expect(files.length).toBeGreaterThan(20)
+    expect(source).not.toMatch(
+      /\b(carga|entrega|frete|cte|nf-?e|transport\w*|nota|ocorr\w*|motorista|viagem|trip|driver)\b/i,
+    )
+  })
+})

package/src/participant/ParticipantThread.test.tsx

@@ -0,0 +1,149 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import {
+  buildConversation,
+  buildMessage,
+  findForeignClassTokens,
+  findUtilityClassTokens,
+} from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import type { ParticipantTimelineItem } from './participantMessages'
+import { ParticipantThread, type ParticipantThreadProps } from './ParticipantThread'
+
+const ITEMS: readonly ParticipantTimelineItem[] = [
+  { kind: 'server', message: buildMessage({ id: 'a', createdAt: '2026-10-01T10:00:00.000Z' }) },
+  { kind: 'server', message: buildMessage({ id: 'b', direction: 'inbound', createdAt: '2026-10-01T10:05:00.000Z' }) },
+  { kind: 'server', message: buildMessage({ id: 'c', createdAt: '2026-10-02T09:00:00.000Z' }) },
+]
+
+function render(overrides: Partial<ParticipantThreadProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })}
+      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}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantThread', () => {
+  it('renders the subject label as the title', () => {
+    expect(render()).toContain('Invoice 4521')
+  })
+
+  it('renders the back button only with onBack', () => {
+    expect(render()).not.toContain('cv-p-thread__back')
+    expect(render({ onBack: () => undefined })).toContain('cv-p-thread__back')
+  })
+
+  it('makes the title clickable only with onOpenSubject', () => {
+    expect(render()).not.toContain('cv-p-thread__title-button')
+    expect(render({ onOpenSubject: () => undefined })).toContain('cv-p-thread__title-button')
+  })
+
+  it('draws nothing for the subject card slot when renderSubjectCard is absent', () => {
+    expect(render()).not.toContain('cv-p-thread__subject-card')
+    const markup = render({ renderSubjectCard: () => <p>Card body</p> })
+    expect(markup).toContain('cv-p-thread__subject-card')
+    expect(markup).toContain('Card body')
+  })
+
+  it('shows channel badges in the header only with channels', () => {
+    expect(render()).not.toContain('cv-p-channels')
+    const markup = render({
+      conversation: buildConversation({ subjectId: '1', channels: ['email', 'app'] }),
+    })
+    expect(markup).toContain('cv-p-channel--app')
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--email'))
+  })
+
+  it('renders day dividers between days', () => {
+    expect(render().match(/cv-p-day"/g)?.length).toBe(2)
+  })
+
+  it('has a polite live region that announces new messages', () => {
+    const quiet = render()
+    const loud = render({ newMessagesCount: 2 })
+
+    expect(quiet).toContain('aria-live="polite"')
+    expect(quiet).not.toContain('New messages')
+    expect(loud).toContain('aria-live="polite"')
+    expect(loud).toContain('New messages')
+  })
+
+  it('while loading shows a busy skeleton', () => {
+    const markup = render({ items: [], status: 'loading' })
+
+    expect(markup).toContain('aria-busy="true"')
+    expect(markup).toContain('Loading…')
+    expect(render()).toContain('aria-busy="false"')
+  })
+
+  it('on error shows an alert with retry', () => {
+    const markup = render({ items: [], status: 'error' })
+
+    expect(markup).toContain('role="alert"')
+    expect(markup).toContain('Retry')
+    expect(markup).not.toContain('aria-busy="true"')
+  })
+
+  it('on success draws neither loading nor error', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('role="alert"')
+    expect(markup).not.toContain('cv-p-loading')
+  })
+
+  it('disables only the send button while sending, never the field', () => {
+    const markup = render({
+      isSending: true,
+      draft: { value: 'hi', onChange: () => undefined, files: [], onFilesChange: () => undefined },
+    })
+
+    expect(markup).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+    expect(markup).not.toMatch(/<textarea[^>]*disabled/)
+  })
+
+  it('shows load older only when hasMore and onLoadOlder exist', () => {
+    expect(render()).not.toContain('Load older messages')
+    expect(render({ hasMore: true, onLoadOlder: () => undefined })).toContain('Load older messages')
+  })
+
+  it('shows the closed notice and no composer when the conversation is closed', () => {
+    const markup = render({ conversation: buildConversation({ subjectId: '1', status: 'closed' }) })
+
+    expect(markup).toContain('This conversation is closed')
+    expect(markup).not.toContain('<form')
+    expect(markup).not.toContain('<textarea')
+  })
+
+  it('shows the composer when the conversation is open', () => {
+    const markup = render()
+
+    expect(markup).toContain('<form')
+    expect(markup).not.toContain('This conversation is closed')
+  })
+
+  it('renders quick replies only when given', () => {
+    expect(render()).not.toContain('cv-p-quick')
+    expect(render({ quickReplies: [{ id: '1', title: 'Hi', shortcut: 'hi', body: 'Hi' }] })).toContain('cv-p-quick')
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = render({ onBack: () => undefined, hasMore: true, onLoadOlder: () => undefined })
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/ParticipantThread.tsx

@@ -0,0 +1,184 @@
+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 { ParticipantComposer } from './ParticipantComposer'
+import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import {
+  bindPendingActions,
+  resolveParticipantBubbleActions,
+  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'
+
+export type ParticipantThreadDraft = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly files: readonly File[]
+  readonly onFilesChange: (files: readonly File[]) => void
+}
+
+export type ParticipantThreadProps = {
+  readonly conversation: ParticipantConversationSummary
+  readonly items: readonly ParticipantTimelineItem[]
+  readonly hasMore: boolean
+  readonly labels: ParticipantConversationsLabels
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly draft: ParticipantThreadDraft
+  readonly onSend: () => void
+  readonly status: ParticipantLoadStatus
+  readonly refresh: () => void
+  /** Ref and onScroll of the scrolling area; the hook that owns the rule is useParticipantThreadScroll. */
+  readonly scroll: ParticipantThreadScroll
+  /** Messages from the other side that arrived while the user was reading above. */
+  readonly newMessagesCount: number
+  /** A send is in flight: only the send button waits, the field stays editable. */
+  readonly isSending: boolean
+  readonly channel?: ConversationChannel
+  readonly locale?: string
+  readonly onBack?: () => void
+  readonly onOpenSubject?: (subject: ParticipantSubjectRef) => void
+  readonly onLoadOlder?: () => void
+  readonly pendingActions?: ParticipantPendingActions
+  readonly quickReplies?: readonly QuickReply[]
+  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>
+}
+
+function Footer({ props }: { readonly props: ParticipantThreadProps }) {
+  const { conversation, labels, draft } = props
+  if (conversation.status === 'closed') {
+    return <p className="cv-p-thread__closed">{labels.closedNotice}</p>
+  }
+  return (
+    <ParticipantComposer
+      value={draft.value}
+      onChange={draft.onChange}
+      files={draft.files}
+      onFilesChange={draft.onFilesChange}
+      onSend={props.onSend}
+      labels={labels}
+      channel={props.channel}
+      isSending={props.isSending}
+      maxLength={props.maxLength}
+      acceptedTypes={props.acceptedTypes}
+      quickReplies={props.quickReplies}
+    />
+  )
+}
+
+export function ParticipantThread(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} />
+      {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}>
+        {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
+        {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
+        {hasMore && onLoadOlder ? (
+          <button type="button" className="cv-p-thread__older" onClick={onLoadOlder}>
+            {labels.loadOlder}
+          </button>
+        ) : null}
+        <Timeline props={props} />
+      </div>
+      <div className="cv-p-thread__live" role="status" aria-live="polite">
+        {props.newMessagesCount > 0 ? labels.newMessages : ''}
+      </div>
+      <Footer props={props} />
+    </div>
+  )
+}