@adatechnology/conversations-ui 0.7.0 → 0.9.0

package/src/participant/ConversationThread.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useMemo, useReducer, useRef, type ReactNode } from 'react'
+
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import type { ConversationChannel } from '../conversationChannel'
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ConversationsTheme } from '../types'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantThread } from './ParticipantThread'
+import { toParticipantApi, type ConversationThreadApi } from './conversationThreadApi'
+import { buildThreadSummary } from './conversationThreadSummary'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantPendingMessage } from './participantApi.types'
+import { draftKey, type ParticipantDrafts } from './participantDrafts'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
+import { participantSendStatesReducer } from './participantSendStates'
+import { buildParticipantThemeStyle } from './participantTheme'
+import { useParticipantThreadController, type ParticipantThreadCoreProps } from './useParticipantThreadController'
+
+export type ConversationThreadProps = {
+  readonly api: ConversationThreadApi
+  readonly subject: ParticipantSubjectRef
+  /** `participant` (default) is the outside party; `operator` is the company, which owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
+  readonly title: string
+  readonly protocol?: string
+  readonly channels?: ParticipantConversationSummary['channels']
+  /** `closed` removes the composer and shows `labels.closedNotice`. */
+  readonly status?: 'open' | 'closed'
+  /** Short line under the title, written by the host (for example "Participant: Ana"). */
+  readonly counterpartLabel?: string
+  /** Slot at the end of the header bar for the host's own actions (close, reopen...). The package knows none of them. */
+  readonly headerActions?: ReactNode
+  /** Absent draws no back arrow. */
+  readonly onBack?: () => void
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  /** Chips above the field: tapping one fills the text, it never sends. */
+  readonly quickReplies?: readonly QuickReply[]
+  readonly labels?: Partial<ParticipantConversationsLabels>
+  readonly theme?: ConversationsTheme
+  readonly className?: string
+  readonly locale?: string
+  readonly channel?: ConversationChannel
+  readonly pendingMessages?: readonly ParticipantPendingMessage[]
+  readonly onRetryPending?: (clientMessageId: string) => void
+  /** Tells the host the other side's messages were marked read, to refresh its own badges. */
+  readonly onMarkedRead?: (subject: ParticipantSubjectRef) => void
+  readonly tail?: boolean
+  readonly avatars?: 'initials'
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+}
+
+function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
+  const { perspective = 'participant' } = props
+  const { subjectType, subjectId } = props.subject
+  const subject = useMemo<ParticipantSubjectRef>(() => ({ subjectType, subjectId }), [subjectType, subjectId])
+  const onMarkedReadRef = useRef(props.onMarkedRead)
+  onMarkedReadRef.current = props.onMarkedRead
+  const handleMarkedRead = useCallback((marked: ParticipantSubjectRef) => onMarkedReadRef.current?.(marked), [])
+  const api = useMemo(() => toParticipantApi(props.api), [props.api])
+  const draftsRef = useRef<ParticipantDrafts>(new Map())
+  const [sendStates, dispatchSendStates] = useReducer(participantSendStatesReducer, new Map())
+  const labels = useMemo(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels])
+  const { title, protocol, channels, status } = props
+  const conversation = useMemo(
+    () => buildThreadSummary({ subject, title, protocol, channels, status }),
+    [subject, title, protocol, channels, status],
+  )
+  return useParticipantThreadController({
+    api,
+    subject,
+    conversation,
+    labels,
+    draftsRef,
+    sendStates,
+    dispatchSendStates,
+    onMarkedRead: handleMarkedRead,
+    channel: props.channel,
+    locale: props.locale,
+    pendingMessages: props.pendingMessages,
+    onRetryPending: props.onRetryPending,
+    perspective,
+  })
+}
+
+function ConversationThreadBody(props: ConversationThreadProps) {
+  const core = useConversationThreadCore(props)
+
+  return (
+    <div
+      className={['cv-p-root', props.className].filter(Boolean).join(' ')}
+      style={buildParticipantThemeStyle(props.theme)}
+    >
+      <div className="cv-p-root__screen">
+        <ParticipantThread
+          {...core}
+          onBack={props.onBack}
+          quickReplies={props.quickReplies}
+          subjectGroups={props.subjectGroups}
+          renderSubjectIcon={props.renderSubjectIcon}
+          avatars={props.avatars}
+          renderAuthorAvatar={props.renderAuthorAvatar}
+          tail={props.tail}
+          counterpartLabel={props.counterpartLabel}
+          headerActions={props.headerActions}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** One conversation about one subject, drawn like the participant app and seen from either side. */
+export function ConversationThread(props: ConversationThreadProps) {
+  return <ConversationThreadBody key={draftKey(props.subject)} {...props} />
+}

package/src/participant/ParticipantBackButton.tsx

@@ -7,7 +7,7 @@ export type ParticipantBackButtonProps = {
 
 export function ParticipantBackButton({ label, onBack }: ParticipantBackButtonProps) {
   return (
-    <button type="button" className="cv-p-thread__back" aria-label={label} onClick={onBack}>
+    <button type="button" className="cv-p-thread__back" aria-label={label} data-cv-tooltip={label} onClick={onBack}>
       <ArrowLeft size={24} aria-hidden="true" focusable="false" />
     </button>
   )

package/src/participant/ParticipantBubbleBody.tsx

@@ -0,0 +1,54 @@
+import { formatTimestamp } from '../lib/format'
+import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { OwnStatus } from './ParticipantBubbleStatus'
+import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import type { BubbleContent } from './ParticipantMessageBubble'
+import { ParticipantMessageText } from './ParticipantMessageText'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantOwnMessageStatus } from './participantMessages'
+
+type BubbleBodyProps = {
+  readonly content: BubbleContent
+  readonly labels: ParticipantConversationsLabels
+  readonly ownStatus?: ParticipantOwnMessageStatus
+  readonly textId?: string
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly onRetry?: () => void
+  readonly onDiscard?: () => void
+  readonly onEdit?: () => void
+}
+
+function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
+  if (content.isMine) return <span className="cv-p-sr-only">{labels.me}</span>
+  if (!content.authorName) return null
+  return <span className="cv-p-bubble__author">{content.authorName}</span>
+}
+
+export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
+  return (
+    <>
+      <BubbleHeading content={content} labels={labels} />
+      {content.text ? <ParticipantMessageText text={content.text} labels={labels} id={textId} /> : 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}
+        {ownStatus === 'failed' ? <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} /> : null}
+      </span>
+    </>
+  )
+}

package/src/participant/ParticipantBubbleStatus.tsx

@@ -24,44 +24,38 @@ export 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)
+  const isTextVisible = isVisibleText && !(status === 'failed' && onRetry)
   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>
+      <StatusTicks status={ticksStatus} appearance="stylesheet" title={isTextVisible ? undefined : text} />
+      <span className={isTextVisible ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
     </span>
   )
 }
 
-type FailedActionsProps = {
+type RetryButtonProps = {
   readonly labels: ParticipantConversationsLabels
-  readonly onDiscard?: () => void
-  readonly onEdit?: () => void
+  readonly onRetry: () => void
+  /** Id of the message text, read after the name so the button says which message it resends. */
+  readonly describedBy?: string
 }
 
-export function FailedActions({ labels, onDiscard, onEdit }: FailedActionsProps) {
-  if (!onDiscard && !onEdit) return null
+export function RetryButton({ labels, onRetry, describedBy }: RetryButtonProps) {
   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>
+    <button
+      type="button"
+      className="cv-p-failed-retry"
+      aria-label={labels.statusFailed}
+      aria-describedby={describedBy}
+      data-cv-tooltip={labels.statusFailed}
+      onClick={onRetry}
+    >
+      <span className="cv-p-failed-retry__icon">
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path d="M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3" fill="none" stroke="currentColor" strokeWidth="1.5" />
+        </svg>
+      </span>
+    </button>
   )
 }

package/src/participant/ParticipantChannelBadges.tsx

@@ -59,7 +59,11 @@ export function ParticipantChannelBadges({
       <span className="cv-p-channels">
         <span className="cv-p-sr-only">{`${labels.channelsGroup}: `}</span>
         {descriptors.map((descriptor, index) => (
-          <span key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+          <span
+            key={descriptor.channel}
+            className={`cv-p-channel cv-p-channel--${descriptor.channel}`}
+            data-cv-tooltip={resolveParticipantChannelLabel(descriptor, labels)}
+          >
             <BadgeContent
               descriptor={descriptor}
               labels={labels}
@@ -75,7 +79,11 @@ export function ParticipantChannelBadges({
   return (
     <ul className="cv-p-channels" aria-label={labels.channelsGroup}>
       {descriptors.map((descriptor) => (
-        <li key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+        <li
+          key={descriptor.channel}
+          className={`cv-p-channel cv-p-channel--${descriptor.channel}`}
+          data-cv-tooltip={resolveParticipantChannelLabel(descriptor, labels)}
+        >
           <BadgeContent descriptor={descriptor} labels={labels} separator="" iconSize={iconSize} />
         </li>
       ))}

package/src/participant/ParticipantComposer.tsx

@@ -60,7 +60,7 @@ function FileList({ files, labels, onRemove }: FileListProps) {
         <li key={`${file.name}-${file.size}-${index}`} className="cv-p-files__item">
           <span className="cv-p-files__name">{file.name}</span>
           <span className="cv-p-files__size">{formatFileSize(file.size)}</span>
-          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} onClick={() => onRemove(file)}>
+          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} data-cv-tooltip={labels.removeAttachment} onClick={() => onRemove(file)}>
             <span aria-hidden="true">×</span>
             <span className="cv-p-sr-only">{labels.removeAttachment}</span>
           </button>

package/src/participant/ParticipantComposerControls.tsx

@@ -29,6 +29,7 @@ export function AttachControl({ labels, disabled, acceptedTypes, onChosen }: Att
         type="button"
         className="cv-p-composer__attach"
         aria-label={labels.attach}
+        data-cv-tooltip={labels.attach}
         disabled={disabled}
         onClick={() => fileInputRef.current?.click()}
       >
@@ -44,6 +45,7 @@ export function SendButton({ label, disabled }: { readonly label: string; readon
       type="submit"
       className="cv-p-button cv-p-button--primary cv-p-composer__send"
       aria-label={label}
+      data-cv-tooltip={label}
       disabled={disabled}
     >
       <Send size={20} aria-hidden="true" focusable="false" />

package/src/participant/ParticipantCopyableToken.tsx

@@ -43,6 +43,7 @@ export function ParticipantLinkCopyButton({ value, labels }: ParticipantLinkCopy
       type="button"
       className="cv-p-text__link-copy"
       aria-label={`${labels.copyValue} ${value}`}
+      data-cv-tooltip={labels.copyValue}
       onClick={() => copy(value, labels.valueCopied)}
     >
       {isCopied ? <Check size={14} aria-hidden={true} /> : <Copy size={14} aria-hidden={true} />}

package/src/participant/ParticipantFailedMenu.tsx

@@ -0,0 +1,40 @@
+import { useId } from 'react'
+
+import { ParticipantFailedMenuList } from './ParticipantFailedMenuList'
+import { DEFAULT_MESSAGE_OPTIONS_LABEL, type ParticipantConversationsLabels } from './participantLabels'
+import { useParticipantFailedMenu } from './useParticipantFailedMenu'
+
+type ParticipantFailedMenuProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onEdit?: () => void
+  readonly onDiscard?: () => void
+}
+
+export function ParticipantFailedMenu({ labels, onEdit, onDiscard }: ParticipantFailedMenuProps) {
+  const menu = useParticipantFailedMenu()
+  const triggerId = useId()
+  if (!onEdit && !onDiscard) return null
+  const label = labels.messageOptions ?? DEFAULT_MESSAGE_OPTIONS_LABEL
+
+  return (
+    <span className="cv-p-failed-menu" ref={menu.containerRef} onBlur={menu.handleBlur}>
+      <button
+        type="button"
+        id={triggerId}
+        ref={menu.triggerRef}
+        className="cv-p-failed-menu__trigger"
+        aria-haspopup="menu"
+        aria-expanded={menu.state.isOpen}
+        aria-label={label}
+        data-cv-tooltip={menu.state.isOpen ? undefined : label}
+        onClick={menu.handleTriggerClick}
+        onKeyDown={menu.handleTriggerKeyDown}
+      >
+        <span aria-hidden="true">⋯</span>
+      </button>
+      {menu.state.isOpen ? (
+        <ParticipantFailedMenuList menu={menu} labelledBy={triggerId} labels={labels} onEdit={onEdit} onDiscard={onDiscard} />
+      ) : null}
+    </span>
+  )
+}

package/src/participant/ParticipantFailedMenuList.tsx

@@ -0,0 +1,41 @@
+import type { ParticipantFailedMenuController } from './useParticipantFailedMenu'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+type ParticipantFailedMenuListProps = {
+  readonly menu: ParticipantFailedMenuController
+  readonly labelledBy: string
+  readonly labels: ParticipantConversationsLabels
+  readonly onEdit?: () => void
+  readonly onDiscard?: () => void
+}
+
+export function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard }: ParticipantFailedMenuListProps) {
+  function runAndClose(action: () => void): () => void {
+    return () => {
+      menu.close()
+      action()
+    }
+  }
+
+  const className = `cv-p-failed-menu__list${menu.placement === 'below' ? ' cv-p-failed-menu__list--below' : ''}`
+  return (
+    <div role="menu" aria-labelledby={labelledBy} ref={menu.menuRef} className={className} onKeyDown={menu.handleMenuKeyDown}>
+      {onEdit ? (
+        <button type="button" role="menuitem" tabIndex={-1} className="cv-p-failed-menu__item" onClick={runAndClose(onEdit)}>
+          {labels.edit}
+        </button>
+      ) : null}
+      {onDiscard ? (
+        <button
+          type="button"
+          role="menuitem"
+          tabIndex={-1}
+          className="cv-p-failed-menu__item cv-p-failed-menu__item--danger"
+          onClick={runAndClose(onDiscard)}
+        >
+          {labels.discard}
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -112,22 +112,22 @@ describe('ParticipantMessageBubble', () => {
     const withoutRetry = renderPending('failed')
 
     expect(withRetry).toContain('<button')
-    expect(withRetry).toContain('Failed — tap to retry')
+    expect(withRetry).toContain('aria-label="Failed — tap to retry"')
+    expect(withRetry).toContain('cv-p-failed-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', () => {
+  it('offers edit and discard through the menu trigger only when a handler exists', () => {
     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')
+    expect(none).not.toContain('cv-p-failed-menu')
+    expect(both).toContain('aria-haspopup="menu"')
+    expect(notFailed).not.toContain('cv-p-failed-menu')
   })
 
   it('a failed server message shows only "Failed", with no button', () => {

package/src/participant/ParticipantMessageBubble.tsx

@@ -1,12 +1,12 @@
-import type { ReactNode } from 'react'
+import { useId, type ReactNode } from 'react'
 
 import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 
-import { formatTimestamp } from '../lib/format'
-import { FailedActions, OwnStatus } from './ParticipantBubbleStatus'
-import { ParticipantMessageText } from './ParticipantMessageText'
-import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { BubbleBody } from './ParticipantBubbleBody'
+import { RetryButton } from './ParticipantBubbleStatus'
+import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
 import {
   isOwnMessage,
   resolveOwnMessageStatus,
@@ -19,19 +19,21 @@ export type ParticipantMessageBubbleProps = {
   readonly labels: ParticipantConversationsLabels
   readonly confirmsRead: boolean
   readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
-  /** Absent means no retry button, even when the message failed. */
+  /** Absent means no retry button beside the bubble, even when the message failed. */
   readonly onRetry?: () => void
-  /** Absent means no discard button. */
+  /** Absent means no discard item in the failed-message menu. */
   readonly onDiscard?: () => void
-  /** Absent means no edit button. */
+  /** Absent means no edit item in the failed-message menu. */
   readonly onEdit?: () => void
   /** Opt-in slot to the left of a received bubble; null reserves the space, absent changes nothing. */
   readonly avatar?: ReactNode
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
   readonly tail?: boolean
+  /** Who is looking; absent is the participant. The operator owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
 }
 
-type BubbleContent = {
+export type BubbleContent = {
   readonly isMine: boolean
   readonly authorName?: string
   readonly text?: string
@@ -42,11 +44,11 @@ type BubbleContent = {
   readonly serverStatus?: MessageDeliveryStatus
 }
 
-function describeItem(item: ParticipantTimelineItem): BubbleContent {
+function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPerspective): BubbleContent {
   if (item.kind === 'server') {
     const { message } = item
     return {
-      isMine: isOwnMessage(message),
+      isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
       createdAt: message.createdAt,
@@ -65,61 +67,31 @@ function describeItem(item: ParticipantTimelineItem): BubbleContent {
   }
 }
 
-function bubbleClassName(isMine: boolean, hasTail: boolean): string {
+function bubbleClassName(isMine: boolean, hasTail: boolean, hasFailed: boolean): string {
   const classes = ['cv-p-bubble']
   if (isMine) classes.push('cv-p-bubble--mine')
+  if (hasFailed) classes.push('cv-p-bubble--failed')
   if (!hasTail) classes.push('cv-p-bubble--no-tail')
   return classes.join(' ')
 }
 
-export function ParticipantMessageBubble({
-  item,
-  labels,
-  confirmsRead,
-  resolveAttachmentUrl,
-  onRetry,
-  onDiscard,
-  onEdit,
-  avatar,
-  tail = true,
-}: ParticipantMessageBubbleProps) {
-  const content = describeItem(item)
-  const { isMine } = content
-  const ownStatus = isMine
+export function ParticipantMessageBubble(props: ParticipantMessageBubbleProps) {
+  const { item, labels, confirmsRead, onRetry, avatar, tail = true, perspective } = props
+  const textId = useId()
+  const content = describeItem(item, perspective)
+  const ownStatus = content.isMine
     ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead })
     : undefined
+  const isFailed = ownStatus === 'failed'
+  const canRetry = isFailed && onRetry !== undefined
 
   const bubble = (
-    <div className={bubbleClassName(isMine, tail)}>
-      {isMine ? (
-        <span className="cv-p-sr-only">{labels.me}</span>
-      ) : content.authorName ? (
-        <span className="cv-p-bubble__author">{content.authorName}</span>
-      ) : null}
-      {content.text ? <ParticipantMessageText text={content.text} labels={labels} /> : 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 className={bubbleClassName(content.isMine, tail, isFailed)}>
+      {canRetry ? <RetryButton labels={labels} onRetry={onRetry} describedBy={textId} /> : null}
+      <BubbleBody {...props} content={content} ownStatus={ownStatus} textId={canRetry ? textId : undefined} />
     </div>
   )
-  if (avatar === undefined || isMine) return bubble
+  if (avatar === undefined || content.isMine) return bubble
   return (
     <div className="cv-p-bubble-row">
       <span className="cv-p-bubble-row__avatar">{avatar}</span>

package/src/participant/ParticipantMessageText.test.tsx

@@ -45,7 +45,7 @@ describe('ParticipantMessageText - links', () => {
     expect(markup).toContain('target="_blank"')
     expect(markup).toContain('<span class="cv-p-sr-only"> (opens in a new tab)</span>')
     expect(markup).toContain(
-      '<button type="button" class="cv-p-text__link-copy" aria-label="Copy https://a.com/?a=1&amp;b=2">',
+      '<button type="button" class="cv-p-text__link-copy" aria-label="Copy https://a.com/?a=1&amp;b=2" data-cv-tooltip="Copy">',
     )
   })
 

package/src/participant/ParticipantMessageText.tsx

@@ -7,6 +7,8 @@ import type { FormatBlock } from './participantMessageFormat.types'
 export type ParticipantMessageTextProps = {
   readonly text: string | null | undefined
   readonly labels: ParticipantTextLabels
+  /** Lets a control point at the text with aria-describedby; absent leaves the markup as it was. */
+  readonly id?: string
 }
 
 function renderBlock(block: FormatBlock, labels: ParticipantTextLabels, key: number) {
@@ -40,7 +42,7 @@ function renderBlock(block: FormatBlock, labels: ParticipantTextLabels, key: num
   )
 }
 
-export function ParticipantMessageText({ text, labels }: ParticipantMessageTextProps) {
+export function ParticipantMessageText({ text, labels, id }: ParticipantMessageTextProps) {
   const blocks = useMemo(() => parseParticipantMessage(text), [text])
   if (blocks.length === 0) return null
   const [only] = blocks
@@ -48,5 +50,5 @@ export function ParticipantMessageText({ text, labels }: ParticipantMessageTextP
     blocks.length === 1 && only?.kind === 'paragraph'
       ? renderInlineNodes(only.children, labels)
       : blocks.map((block, key) => renderBlock(block, labels, key))
-  return <div className="cv-p-text">{children}</div>
+  return <div className="cv-p-text" id={id}>{children}</div>
 }

package/src/participant/ParticipantProtocolBadge.tsx

@@ -39,6 +39,7 @@ export function ParticipantProtocolBadgeView({
           type="button"
           className="cv-p-protocol__copy"
           aria-label={`${labels.copyProtocol} ${protocol}`}
+          data-cv-tooltip={labels.copyProtocol}
           onClick={onCopy}
         >
           {isCopied ? <Check size={18} aria-hidden={true} /> : <Copy size={18} aria-hidden={true} />}

package/src/participant/ParticipantScrollToLatest.tsx

@@ -23,7 +23,7 @@ export function ParticipantScrollToLatest({
   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) => {
+      <button type="button" className="cv-p-thread__latest-button" aria-label={label} data-cv-tooltip={label} onClick={(event) => {
           focusScrollerOf(event.currentTarget)
           onClick()
         }}