@adatechnology/conversations-ui 0.4.1 → 0.5.0

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -0,0 +1,165 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { findForeignClassTokens, findUtilityClassTokens, buildMessage } from './participantFixtures.test-helper'
+import type { ParticipantTimelineItem } from './participantMessages'
+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 {
+  const item: ParticipantTimelineItem = { kind: 'server', message }
+  return renderToStaticMarkup(
+    <ParticipantMessageBubble
+      item={item}
+      labels={LABELS}
+      confirmsRead={extra.confirmsRead ?? true}
+      resolveAttachmentUrl={resolveAttachmentUrl}
+      onRetry={extra.onRetry}
+    />,
+  )
+}
+
+function renderPending(
+  displayState: 'sending' | 'queued' | 'failed',
+  onRetry?: () => void,
+  extra: { onDiscard?: () => void; onEdit?: () => void } = {},
+): string {
+  const item: ParticipantTimelineItem = {
+    kind: 'pending',
+    origin: 'host',
+    displayState,
+    pending: {
+      clientMessageId: 'c1',
+      subject: { subjectType: 'invoice', subjectId: '1' },
+      text: 'Draft text',
+      createdAt: '2026-10-01T10:00:00.000Z',
+      state: displayState === 'sending' ? 'failed' : displayState,
+    },
+  }
+  return renderToStaticMarkup(
+    <ParticipantMessageBubble
+      item={item}
+      labels={LABELS}
+      confirmsRead
+      resolveAttachmentUrl={resolveAttachmentUrl}
+      onRetry={onRetry}
+      onDiscard={extra.onDiscard}
+      onEdit={extra.onEdit}
+    />,
+  )
+}
+
+describe('ParticipantMessageBubble', () => {
+  it('puts an inbound message on the own side and an outbound one on the other', () => {
+    expect(renderServer(buildMessage({ id: 'a', direction: 'inbound' }))).toContain('cv-p-bubble--mine')
+    expect(renderServer(buildMessage({ id: 'b', direction: 'outbound' }))).not.toContain('cv-p-bubble--mine')
+  })
+
+  it('shows the author name only when the message is not mine', () => {
+    const theirs = renderServer(buildMessage({ id: 'a', direction: 'outbound', authorName: 'Marina' }))
+    const mine = renderServer(buildMessage({ id: 'b', direction: 'inbound', authorName: 'Marina' }))
+
+    expect(theirs).toContain('Marina')
+    expect(mine).not.toContain('Marina')
+  })
+
+  it('renders a time element with the ISO dateTime', () => {
+    expect(renderServer()).toMatch(/<time[^>]*dateTime="2026-10-01T10:00:00.000Z"/)
+  })
+
+  it.each([
+    ['sent', 'cv-status-ticks--sent', 'Sent'],
+    ['delivered', 'cv-status-ticks--delivered', 'Delivered'],
+    ['read', 'cv-status-ticks--read', 'Read'],
+  ] as const)('shows the %s status on my message with accessible text', (status, ticksClass, text) => {
+    const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound', status }))
+
+    expect(markup).toContain(ticksClass)
+    expect(markup).toContain(text)
+  })
+
+  it('downgrades read to delivered when the channel does not confirm reads', () => {
+    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')
+  })
+
+  it('renders pending sending and queued with their texts', () => {
+    expect(renderPending('sending')).toContain('Sending')
+    const queued = renderPending('queued')
+    expect(queued).toContain('Queued — sends when back online')
+    expect(queued).toContain('cv-status-ticks--queued')
+  })
+
+  it('renders the retry button only for failed with onRetry', () => {
+    const withRetry = renderPending('failed', () => undefined)
+    const withoutRetry = renderPending('failed')
+
+    expect(withRetry).toContain('<button')
+    expect(withRetry).toContain('Failed — tap to retry')
+    expect(withoutRetry).not.toContain('<button')
+    expect(withoutRetry).toContain('cv-status-ticks--failed')
+  })
+
+  it('shows discard and edit on a failed pending only when the handlers exist', () => {
+    const none = renderPending('failed')
+    const both = renderPending('failed', () => undefined, { onDiscard: () => undefined, onEdit: () => undefined })
+    const notFailed = renderPending('queued', undefined, { onDiscard: () => undefined, onEdit: () => undefined })
+
+    expect(none).not.toContain('cv-p-bubble__action')
+    expect(both).toContain('>Discard<')
+    expect(both).toContain('>Edit<')
+    expect(notFailed).not.toContain('cv-p-bubble__action')
+  })
+
+  it('a failed server message shows only "Failed", with no button', () => {
+    const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound', status: 'failed' }))
+
+    expect(markup).toContain('Failed')
+    expect(markup).not.toContain('<button')
+  })
+
+  it('renders attachments by kind: audio controls, image alt, document link', () => {
+    const message = buildMessage({
+      id: 'a',
+      text: null,
+      attachments: [
+        { id: '1', kind: 'audio', filename: 'voice.ogg', mimeType: 'audio/ogg', sizeBytes: 10 },
+        { id: '2', kind: 'image', filename: 'photo.png', mimeType: 'image/png', sizeBytes: 10 },
+        { id: '3', kind: 'document', filename: 'note.pdf', mimeType: 'application/pdf', sizeBytes: 2048 },
+      ],
+    })
+    const markup = renderServer(message)
+
+    expect(markup).toContain('photo.png')
+    expect(markup).toContain('note.pdf')
+    expect(markup).toContain('voice.ogg')
+    expect(markup).toContain('cv-p-attachment--image')
+    expect(markup).toContain('cv-p-attachment--audio')
+    expect(markup).toContain('cv-p-attachment--document')
+  })
+
+  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).not.toContain('role="button"')
+    expect(markup).not.toContain('cv-message-text--copyable')
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = renderServer(buildMessage({ id: 'a', direction: 'inbound', status: 'read' }))
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+    expect(markup).toContain('cv-p-')
+  })
+})

package/src/participant/ParticipantMessageBubble.tsx

@@ -0,0 +1,185 @@
+import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+import { MessageText } from '../MessageText'
+import { StatusTicks } from '../StatusTicks'
+import { formatTimestamp } from '../lib/format'
+import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import {
+  isOwnMessage,
+  resolveOwnMessageStatus,
+  type ParticipantOwnMessageStatus,
+  type ParticipantPendingDisplayState,
+  type ParticipantTimelineItem,
+} from './participantMessages'
+
+export type ParticipantMessageBubbleProps = {
+  readonly item: ParticipantTimelineItem
+  readonly labels: ParticipantConversationsLabels
+  readonly confirmsRead: boolean
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  /** Absent means no retry button, even when the message failed. */
+  readonly onRetry?: () => void
+  /** Absent means no discard button. */
+  readonly onDiscard?: () => void
+  /** Absent means no edit button. */
+  readonly onEdit?: () => void
+}
+
+type BubbleContent = {
+  readonly isMine: boolean
+  readonly authorName?: string
+  readonly text?: string
+  readonly createdAt: string
+  readonly attachments: readonly ParticipantAttachment[]
+  readonly pendingFilenames: readonly string[]
+  readonly displayState?: ParticipantPendingDisplayState
+  readonly serverStatus?: MessageDeliveryStatus
+}
+
+function describeItem(item: ParticipantTimelineItem): BubbleContent {
+  if (item.kind === 'server') {
+    const { message } = item
+    return {
+      isMine: isOwnMessage(message),
+      authorName: message.authorName ?? undefined,
+      text: message.text ?? undefined,
+      createdAt: message.createdAt,
+      attachments: message.attachments,
+      pendingFilenames: [],
+      serverStatus: message.status,
+    }
+  }
+  return {
+    isMine: true,
+    text: item.pending.text,
+    createdAt: item.pending.createdAt,
+    attachments: [],
+    pendingFilenames: (item.pending.attachments ?? []).map((attachment) => attachment.filename),
+    displayState: item.displayState,
+  }
+}
+
+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" />
+        <span>{labels.statusFailed}</span>
+      </button>
+    )
+  }
+
+  const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
+  return (
+    <span className="cv-p-bubble__status">
+      <StatusTicks status={ticksStatus} />
+      <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,
+  }
+}
+
+export function ParticipantMessageBubble({
+  item,
+  labels,
+  confirmsRead,
+  resolveAttachmentUrl,
+  onRetry,
+  onDiscard,
+  onEdit,
+}: ParticipantMessageBubbleProps) {
+  const content = describeItem(item)
+  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'}>
+      {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} />
+      ) : null}
+      {content.attachments.map((attachment) => (
+        <ParticipantAttachmentItem
+          key={attachment.id}
+          attachment={attachment}
+          resolveAttachmentUrl={resolveAttachmentUrl}
+          labels={labels}
+        />
+      ))}
+      {content.pendingFilenames.map((filename, index) => (
+        <span key={`${filename}-${index}`} className="cv-p-attachment cv-p-attachment--pending">
+          {filename}
+        </span>
+      ))}
+      <span className="cv-p-bubble__meta">
+        <time className="cv-p-bubble__time" dateTime={content.createdAt}>
+          {formatTimestamp(content.createdAt)}
+        </time>
+        {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : null}
+      </span>
+      {ownStatus === 'failed' ? <FailedActions labels={labels} onDiscard={onDiscard} onEdit={onEdit} /> : null}
+    </div>
+  )
+}

package/src/participant/ParticipantThread.test.tsx

@@ -0,0 +1,132 @@
+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('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,174 @@
+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'
+
+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}
+      <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>
+    </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>
+  )
+}