@adatechnology/conversations-ui 0.4.2 → 0.6.0

package/src/participant/ParticipantInbox.tsx

@@ -0,0 +1,149 @@
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import type {
+  ParticipantInboxFilter,
+  ParticipantInboxSection,
+  ParticipantInboxView,
+  ParticipantSubjectGroup,
+  ParticipantSubjectIconRenderer,
+} from './participant.types'
+import { type ParticipantConversationsLabels } from './participantLabels'
+import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
+import { ParticipantInboxRow } from './ParticipantInboxRow'
+import { ParticipantInboxSearchField, type ParticipantInboxSearch } from './ParticipantInboxSearchField'
+import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+
+export type ParticipantInboxProps = {
+  readonly view: ParticipantInboxView
+  readonly subjectGroups: readonly ParticipantSubjectGroup[]
+  /** subjectType of the active filter, or 'all'. */
+  readonly filter: string
+  readonly onFilterChange: (filter: string) => void
+  readonly onSelect: (subject: ParticipantSubjectRef) => void
+  readonly labels: ParticipantConversationsLabels
+  readonly status: ParticipantLoadStatus
+  readonly refresh: () => void
+  readonly hasMore: boolean
+  readonly loadMore: () => void
+  readonly locale?: string
+  /** Absent = no search field. The host narrows the view with the query; the field only edits it. */
+  readonly search?: ParticipantInboxSearch
+  /** Absent, or returning null/undefined, = the subject group icon. */
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+}
+
+const ALL_FILTER = 'all'
+
+function resolveNoResultsLabel({ view, hasMore, labels }: ParticipantInboxProps): string {
+  if (view.hasMatchesOutsideFilter) return labels.noResultsInFilter
+  return hasMore ? labels.noResultsLoadedOnly : labels.noResults
+}
+
+function sectionTitle(section: ParticipantInboxSection, props: ParticipantInboxProps): string {
+  if (section.key === 'awaiting') return props.labels.sectionAwaiting
+  if (section.key === 'closed') return props.labels.sectionClosed
+  if (section.key === 'other') return props.labels.sectionOther
+  return props.subjectGroups.find((group) => group.subjectType === section.key)?.label ?? section.key
+}
+
+type FiltersProps = {
+  readonly filters: readonly ParticipantInboxFilter[]
+  readonly active: string
+  readonly labels: ParticipantConversationsLabels
+  readonly onChange: (filter: string) => void
+}
+
+function Filters({ filters, active, labels, onChange }: FiltersProps) {
+  return (
+    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup}>
+      {filters.map((filter) => (
+        <button
+          key={filter.subjectType}
+          type="button"
+          className="cv-p-chip"
+          aria-pressed={filter.subjectType === active}
+          onClick={() => onChange(filter.subjectType)}
+        >
+          {filter.subjectType === ALL_FILTER ? labels.filterAll : filter.label}
+          {filter.unreadCount > 0 ? <b className="cv-p-chip__count">{filter.unreadCount}</b> : null}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function SectionHeading({ title, count }: { readonly title: string; readonly count: number }) {
+  return (
+    <>
+      <span className="cv-p-section__title">{title}</span>
+      <span className="cv-p-section__count">{count}</span>
+    </>
+  )
+}
+
+function Section({
+  section,
+  props,
+}: {
+  readonly section: ParticipantInboxSection
+  readonly props: ParticipantInboxProps
+}) {
+  const rows = section.conversations.map((conversation) => (
+    <ParticipantInboxRow
+      key={`${conversation.subjectType}:${conversation.subjectId}`}
+      conversation={conversation}
+      group={props.subjectGroups.find((group) => group.subjectType === conversation.subjectType)}
+      labels={props.labels}
+      locale={props.locale}
+      onSelect={props.onSelect}
+      renderSubjectIcon={props.renderSubjectIcon}
+    />
+  ))
+  const heading = <SectionHeading title={sectionTitle(section, props)} count={section.conversations.length} />
+
+  if (section.key === 'closed') {
+    return (
+      <details className="cv-p-section cv-p-section--closed">
+        <summary className="cv-p-section__heading">{heading}</summary>
+        {rows}
+      </details>
+    )
+  }
+  const modifier = section.key === 'awaiting' ? ' cv-p-section--awaiting' : ''
+  return (
+    <section className={`cv-p-section${modifier}`}>
+      <h3 className="cv-p-section__heading">{heading}</h3>
+      {rows}
+    </section>
+  )
+}
+
+export function ParticipantInbox(props: ParticipantInboxProps) {
+  const { view, labels, filter, onFilterChange } = props
+  const isSearching = (props.search?.value.trim() ?? '') !== ''
+  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 || isSearching })
+  const hasNoResults = isSearching && view.sections.length === 0 && props.status === 'ready'
+  const noResultsLabel = resolveNoResultsLabel(props)
+
+  return (
+    <div className="cv-p cv-p-inbox" aria-busy={loadView.isLoading}>
+      <h2 className="cv-p-inbox__title">{labels.inboxTitle}</h2>
+      {view.showFilters ? (
+        <Filters filters={view.filters} active={view.activeFilter} labels={labels} onChange={onFilterChange} />
+      ) : null}
+      {props.search?.isVisible ? <ParticipantInboxSearchField search={props.search} labels={labels} /> : null}
+      {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
+      {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
+      {loadView.isEmpty ? <p className="cv-p-empty">{labels.emptyInbox}</p> : null}
+      {hasNoResults ? <p className="cv-p-empty">{noResultsLabel}</p> : null}
+      {view.sections.map((section) => (
+        <Section key={section.key} section={section} props={props} />
+      ))}
+      {props.hasMore ? (
+        <button type="button" className="cv-p-button cv-p-inbox__more" onClick={props.loadMore}>
+          {labels.loadMore}
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/participant/ParticipantInboxRow.tsx

@@ -0,0 +1,75 @@
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import { formatTimestamp, isSameDay } from '../lib/format'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
+import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+
+export type ParticipantInboxRowProps = {
+  readonly conversation: ParticipantConversationSummary
+  readonly group: ParticipantSubjectGroup | undefined
+  readonly labels: ParticipantConversationsLabels
+  readonly locale?: string
+  readonly onSelect: (subject: ParticipantSubjectRef) => void
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+}
+
+function formatRowTime(iso: string, locale: string | undefined): string {
+  const date = new Date(iso)
+  if (isSameDay(date, new Date())) return formatTimestamp(iso)
+  return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' })
+}
+
+function RowIcon({ props, kind }: { readonly props: ParticipantInboxRowProps; readonly kind: string }) {
+  const custom = props.renderSubjectIcon?.(props.conversation)
+  if (custom !== null && custom !== undefined && custom !== false && custom !== '') {
+    return (
+      <span className="cv-p-row__icon cv-p-inbox__icon" aria-hidden="true">
+        {custom}
+      </span>
+    )
+  }
+  return (
+    <span className="cv-p-row__icon" aria-hidden="true">
+      {props.group?.icon ?? kind.slice(0, 2)}
+    </span>
+  )
+}
+
+export function ParticipantInboxRow(props: ParticipantInboxRowProps) {
+  const { conversation, group, labels, locale, onSelect } = props
+  const kind = group?.label ?? conversation.subjectType
+  const className = conversation.awaitingParticipant ? 'cv-p-row cv-p-row--awaiting' : 'cv-p-row'
+  const { subjectType, subjectId } = conversation
+
+  return (
+    <button type="button" className={className} onClick={() => onSelect({ subjectType, subjectId })}>
+      <RowIcon props={props} kind={kind} />
+      <span className="cv-p-row__body">
+        <span className="cv-p-row__kind">{kind}</span>
+        <span className="cv-p-row__title">{conversation.subjectLabel}</span>
+        <span className="cv-p-row__tags">
+          {conversation.protocol ? (
+            <span className="cv-p-protocol">
+              <span className="cv-p-sr-only">{labels.protocolPrefix} </span>
+              {conversation.protocol}
+            </span>
+          ) : null}
+          <ParticipantChannelBadges channels={conversation.channels} labels={labels} variant="inline" />
+        </span>
+        {conversation.lastMessagePreview ? (
+          <span className="cv-p-row__preview">{conversation.lastMessagePreview}</span>
+        ) : null}
+      </span>
+      <span className="cv-p-row__meta">
+        {conversation.lastMessageAt ? <span>{formatRowTime(conversation.lastMessageAt, locale)}</span> : null}
+        {conversation.unreadCount > 0 ? (
+          <span className="cv-p-row__unread">
+            <span aria-hidden="true">{conversation.unreadCount}</span>
+            <span className="cv-p-sr-only">{formatParticipantLabel(labels.unreadCount, conversation.unreadCount)}</span>
+          </span>
+        ) : null}
+      </span>
+    </button>
+  )
+}

package/src/participant/ParticipantInboxSearchField.tsx

@@ -0,0 +1,34 @@
+import { useId } from 'react'
+
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ParticipantInboxSearch = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly isVisible: boolean
+}
+
+export type ParticipantInboxSearchFieldProps = {
+  readonly search: ParticipantInboxSearch
+  readonly labels: ParticipantConversationsLabels
+}
+
+export function ParticipantInboxSearchField({ search, labels }: ParticipantInboxSearchFieldProps) {
+  const inputId = useId()
+  return (
+    <div className="cv-p-search">
+      <label className="cv-p-sr-only" htmlFor={inputId}>
+        {labels.searchLabel}
+      </label>
+      <input
+        id={inputId}
+        type="search"
+        className="cv-p-search__input"
+        value={search.value}
+        placeholder={labels.searchPlaceholder}
+        autoComplete="off"
+        onChange={(event) => search.onChange(event.target.value)}
+      />
+    </div>
+  )
+}

package/src/participant/ParticipantLoadState.tsx

@@ -0,0 +1,27 @@
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ParticipantLoadErrorProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onRetry: () => void
+}
+
+export function ParticipantLoadError({ labels, onRetry }: ParticipantLoadErrorProps) {
+  return (
+    <div className="cv-p-error" role="alert">
+      <p className="cv-p-error__message">{labels.loadError}</p>
+      <button type="button" className="cv-p-button" onClick={onRetry}>
+        {labels.retry}
+      </button>
+    </div>
+  )
+}
+
+export function ParticipantLoading({ labels }: { readonly labels: ParticipantConversationsLabels }) {
+  return (
+    <div className="cv-p-loading">
+      <span className="cv-p-skeleton" aria-hidden="true" />
+      <span className="cv-p-skeleton" aria-hidden="true" />
+      <span className="cv-p-sr-only">{labels.loading}</span>
+    </div>
+  )
+}

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -0,0 +1,167 @@
+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(withRetry).toContain('cv-status-ticks--failed')
+    expect(findUtilityClassTokens(withRetry)).toEqual([])
+    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" appearance="stylesheet" />
+        <span>{labels.statusFailed}</span>
+      </button>
+    )
+  }
+
+  const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
+  return (
+    <span className="cv-p-bubble__status">
+      <StatusTicks status={ticksStatus} appearance="stylesheet" />
+      <span className={isVisibleText ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
+    </span>
+  )
+}
+
+type FailedActionsProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onDiscard?: () => void
+  readonly onEdit?: () => void
+}
+
+function FailedActions({ labels, onDiscard, onEdit }: FailedActionsProps) {
+  if (!onDiscard && !onEdit) return null
+  return (
+    <span className="cv-p-bubble__actions">
+      {onEdit ? (
+        <button type="button" className="cv-p-bubble__action" onClick={onEdit}>
+          {labels.edit}
+        </button>
+      ) : null}
+      {onDiscard ? (
+        <button type="button" className="cv-p-bubble__action" onClick={onDiscard}>
+          {labels.discard}
+        </button>
+      ) : null}
+    </span>
+  )
+}
+
+function toTextPayload(text: string, createdAt: string, isMine: boolean) {
+  return {
+    id: createdAt,
+    type: 'text' as const,
+    content: text,
+    direction: isMine ? ('inbound' as const) : ('outbound' as const),
+    sender: isMine ? ('customer' as const) : ('agent' as const),
+    timestamp: createdAt,
+  }
+}
+
+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} appearance="stylesheet" />
+      ) : 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>
+  )
+}