@adatechnology/conversations-ui 0.8.0 → 0.10.0

package/src/participant/ParticipantComposerAudio.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef, type ReactNode, type RefObject } from 'react'
+
+import { maxBytesForChannel } from './participantFileValidation'
+import { resolveParticipantAudioLabels } from './participantAudioLabels'
+import type { ComposerAudioSettings } from './participantAudioSupport'
+import type { RecorderStatus } from './participantAudioRecorderState'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { ParticipantAudioRecorderView, resolveRecorderErrorMessage } from './ParticipantAudioRecorderView'
+import { RecordAudioButton, RecorderError } from './ParticipantRecorderParts'
+import { useParticipantAudioRecorder, type ParticipantAudioRecorder } from './useParticipantAudioRecorder'
+
+export type ComposerAudioRowProps = {
+  readonly settings: ComposerAudioSettings
+  readonly labels: ParticipantConversationsLabels
+  readonly disabled: boolean
+  readonly isDraftEmpty: boolean
+  /** The send button of the text path; the microphone only takes its place while the draft is empty. */
+  readonly sendButton: ReactNode
+  /** Attach control and message field, drawn only while no recording is in progress. */
+  readonly children: ReactNode
+}
+
+function isCapturingStatus(status: RecorderStatus): boolean {
+  return status === 'recording' || status === 'review'
+}
+
+function useRestoreMicrophoneFocus(status: RecorderStatus): RefObject<HTMLButtonElement | null> {
+  const microphoneRef = useRef<HTMLButtonElement>(null)
+  const wasCapturingRef = useRef(false)
+  useEffect(() => {
+    const isCapturing = isCapturingStatus(status)
+    if (wasCapturingRef.current && !isCapturing) microphoneRef.current?.focus()
+    wasCapturingRef.current = isCapturing
+  }, [status])
+  return microphoneRef
+}
+
+type RecorderLineProps = {
+  readonly recorder: ParticipantAudioRecorder
+  readonly labels: ParticipantConversationsLabels
+  readonly onSendAudio: (file: File) => void
+  readonly disabled: boolean
+}
+
+function RecorderLine({ recorder, labels, onSendAudio, disabled }: RecorderLineProps) {
+  function handleSendAudio(): void {
+    const file = recorder.confirm()
+    if (file) onSendAudio(file)
+  }
+
+  return (
+    <ParticipantAudioRecorderView
+      state={recorder.status}
+      elapsedMs={recorder.elapsedMs}
+      labels={labels}
+      disabled={disabled}
+      maxDurationMs={recorder.limits.maxDurationMs}
+      review={{ url: recorder.recorded?.objectUrl, audioRef: recorder.audioRef, durationMs: recorder.recorded?.durationMs }}
+      actions={{ onStop: recorder.stop, onSend: handleSendAudio, onDiscard: recorder.discard }}
+    />
+  )
+}
+
+export function ComposerAudioRow({ settings, labels, disabled, isDraftEmpty, sendButton, children }: ComposerAudioRowProps) {
+  const recorder = useParticipantAudioRecorder({
+    options: settings.audioRecording,
+    channelMaxBytes: maxBytesForChannel(settings.channel),
+  })
+  const microphoneRef = useRestoreMicrophoneFocus(recorder.status)
+  const audioLabels = resolveParticipantAudioLabels(labels)
+  const errorMessage = resolveRecorderErrorMessage(recorder.status, audioLabels)
+
+  if (isCapturingStatus(recorder.status)) {
+    return <RecorderLine recorder={recorder} labels={labels} onSendAudio={settings.onSendAudio} disabled={disabled} />
+  }
+  return (
+    <>
+      {errorMessage ? <RecorderError message={errorMessage} /> : null}
+      <div className="cv-p-composer__row">
+        {children}
+        {isDraftEmpty ? (
+          <RecordAudioButton
+            label={audioLabels.recordAudio}
+            isBusy={recorder.status === 'requesting'}
+            disabled={disabled}
+            onClick={() => void recorder.start()}
+            buttonRef={microphoneRef}
+          />
+        ) : (
+          sendButton
+        )}
+      </div>
+    </>
+  )
+}

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/ParticipantConversations.tsx

@@ -13,6 +13,7 @@ import type {
   ParticipantSubjectIconRenderer,
 } from './participant.types'
 import type { ParticipantConversationsApi, ParticipantPendingMessage } from './participantApi.types'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { useParticipantInbox } from './useParticipantInbox'
 
@@ -41,6 +42,8 @@ export type ParticipantConversationsProps = {
   renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
   tail?: boolean
+  /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
+  audioRecording?: ParticipantAudioRecordingOptions
 }
 
 export function ParticipantConversations(props: ParticipantConversationsProps) {

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,11 +1,10 @@
-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 {
@@ -20,11 +19,11 @@ 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
@@ -34,7 +33,7 @@ export type ParticipantMessageBubbleProps = {
   readonly perspective?: ParticipantPerspective
 }
 
-type BubbleContent = {
+export type BubbleContent = {
   readonly isMine: boolean
   readonly authorName?: string
   readonly text?: string
@@ -68,62 +67,31 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
   }
 }
 
-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,
-  perspective,
-}: ParticipantMessageBubbleProps) {
+export function ParticipantMessageBubble(props: ParticipantMessageBubbleProps) {
+  const { item, labels, confirmsRead, onRetry, avatar, tail = true, perspective } = props
+  const textId = useId()
   const content = describeItem(item, perspective)
-  const { isMine } = content
-  const ownStatus = isMine
+  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/ParticipantRecorderParts.tsx

@@ -0,0 +1,118 @@
+import type { Ref } from 'react'
+
+import { Mic, Send, Square, Trash2 } from 'lucide-react'
+
+import { ParticipantAudioPlayer } from './ParticipantAudioPlayer'
+import type { ParticipantAudioLabels } from './participantAudioLabels'
+
+export type RecordAudioButtonProps = {
+  readonly label: string
+  readonly isBusy: boolean
+  readonly disabled: boolean
+  readonly onClick?: () => void
+  readonly buttonRef?: Ref<HTMLButtonElement>
+}
+
+export function RecordAudioButton({ label, isBusy, disabled, onClick, buttonRef }: RecordAudioButtonProps) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      className="cv-p-button cv-p-button--primary cv-p-composer__record"
+      aria-label={label}
+      data-cv-tooltip={label}
+      aria-busy={isBusy ? true : undefined}
+      disabled={disabled || isBusy}
+      onClick={onClick}
+    >
+      <Mic size={20} aria-hidden="true" focusable="false" />
+    </button>
+  )
+}
+
+export function RecorderError({ message }: { readonly message: string }) {
+  return (
+    <p className="cv-p-composer__error" role="alert">
+      {message}
+    </p>
+  )
+}
+
+function focusOnMount(element: HTMLElement | null): void {
+  element?.focus()
+}
+
+type RecorderGroupProps = {
+  readonly labels: ParticipantAudioLabels
+  readonly onDiscard?: () => void
+}
+
+function DiscardButton({ labels, onDiscard }: RecorderGroupProps) {
+  return (
+    <button
+      type="button"
+      className="cv-p-button cv-p-recorder__discard"
+      aria-label={labels.discardAudio}
+      data-cv-tooltip={labels.discardAudio}
+      onClick={onDiscard}
+    >
+      <Trash2 size={20} aria-hidden="true" focusable="false" />
+    </button>
+  )
+}
+
+export type RecordingGroupProps = RecorderGroupProps & {
+  readonly clockText: string
+  readonly onStop?: () => void
+}
+
+export function RecordingGroup({ labels, clockText, onStop, onDiscard }: RecordingGroupProps) {
+  return (
+    <div className="cv-p-recorder" role="group" aria-label={labels.recordingInProgress}>
+      <DiscardButton labels={labels} onDiscard={onDiscard} />
+      <span className="cv-p-recorder__dot" aria-hidden="true" />
+      <span className="cv-p-recorder__elapsed" role="timer">
+        {clockText}
+      </span>
+      <button
+        type="button"
+        ref={focusOnMount}
+        className="cv-p-button cv-p-button--primary cv-p-recorder__stop"
+        aria-label={labels.stopRecording}
+        data-cv-tooltip={labels.stopRecording}
+        onClick={onStop}
+      >
+        <Square size={20} aria-hidden="true" focusable="false" />
+      </button>
+    </div>
+  )
+}
+
+export type ReviewGroupProps = RecorderGroupProps & {
+  readonly url?: string
+  readonly audioRef?: Ref<HTMLAudioElement>
+  readonly durationMs?: number | undefined
+  readonly onSend?: () => void
+  readonly disabled?: boolean
+}
+
+export function ReviewGroup({ labels, url, audioRef, durationMs, onSend, onDiscard, disabled = false }: ReviewGroupProps) {
+  return (
+    <div className="cv-p-recorder cv-p-recorder--review" role="group" aria-label={labels.reviewAudio}>
+      <p className="cv-p-recorder__hint" aria-hidden="true">{labels.reviewAudio}</p>
+      <DiscardButton labels={labels} onDiscard={onDiscard} />
+      <ParticipantAudioPlayer labels={labels} url={url} durationMs={durationMs} mediaRef={audioRef} />
+      <button
+        type="button"
+        ref={focusOnMount}
+        className="cv-p-button cv-p-button--primary cv-p-recorder__send"
+        aria-label={labels.sendAudio}
+        data-cv-tooltip={labels.sendAudio}
+        disabled={disabled}
+        onClick={onSend}
+      >
+        <Send size={20} aria-hidden="true" focusable="false" />
+      </button>
+    </div>
+  )
+}

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

package/src/participant/ParticipantThread.tsx

@@ -1,11 +1,13 @@
-import type { ReactNode } from 'react'
+import { 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 { ParticipantTimelineItem } from './participantMessages'
+import { TooltipLayer } from '../Tooltip'
 import { ParticipantComposer } from './ParticipantComposer'
+import { useSuppressTouchTooltips } from './useSuppressTouchTooltips'
 import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantPendingActions } from './participantBubbleActions'
@@ -19,6 +21,7 @@ import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
 import { ParticipantTimeline } from './ParticipantTimeline'
 import { ParticipantThreadHeader } from './ParticipantThreadHeader'
 import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
 
 export type ParticipantThreadDraft = {
   readonly value: string
@@ -69,6 +72,10 @@ export type ParticipantThreadProps = {
   readonly counterpartLabel?: string
   /** Host slot at the end of the header bar (close, reopen...). */
   readonly headerActions?: ReactNode
+  /** Absent draws no microphone. Present turns it on when the field is empty and the browser and channel record. */
+  readonly audioRecording?: ParticipantAudioRecordingOptions
+  /** Receives the recorded audio; the controller sends it as a message of its own. */
+  readonly onSendAudio?: (file: File) => void
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -89,6 +96,23 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
       maxLength={props.maxLength}
       acceptedTypes={props.acceptedTypes}
       quickReplies={props.quickReplies}
+      audioRecording={props.audioRecording}
+      onSendAudio={props.onSendAudio}
+    />
+  )
+}
+
+function Header({ props }: { readonly props: ParticipantThreadProps }) {
+  return (
+    <ParticipantThreadHeader
+      conversation={props.conversation}
+      labels={props.labels}
+      subjectGroups={props.subjectGroups}
+      renderSubjectIcon={props.renderSubjectIcon}
+      onBack={props.onBack}
+      onOpenSubject={props.onOpenSubject}
+      counterpartLabel={props.counterpartLabel}
+      actions={props.headerActions}
     />
   )
 }
@@ -97,19 +121,12 @@ function ThreadBody(props: ParticipantThreadProps) {
   const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props
   const subjectCard = renderSubjectCard?.(conversation)
   const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 })
+  const rootRef = useRef<HTMLDivElement>(null)
+  useSuppressTouchTooltips(rootRef)
 
   return (
-    <div className="cv-p cv-p-thread" aria-busy={loadView.isLoading}>
-      <ParticipantThreadHeader
-        conversation={conversation}
-        labels={labels}
-        subjectGroups={props.subjectGroups}
-        renderSubjectIcon={props.renderSubjectIcon}
-        onBack={props.onBack}
-        onOpenSubject={props.onOpenSubject}
-        counterpartLabel={props.counterpartLabel}
-        actions={props.headerActions}
-      />
+    <div className="cv-p cv-p-thread" aria-busy={loadView.isLoading} ref={rootRef}>
+      <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} tabIndex={-1}>
         {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
@@ -138,6 +155,7 @@ export function ParticipantThread(props: ParticipantThreadProps) {
   return (
     <ParticipantCopyAnnouncer>
       <ThreadBody {...props} />
+      <TooltipLayer />
     </ParticipantCopyAnnouncer>
   )
 }

package/src/participant/ParticipantThreadHeader.test.tsx

@@ -102,7 +102,7 @@ describe('copy button as an icon', () => {
     const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
     expect(button).toContain('<svg')
     expect(button.replace(/<[^>]+>/g, '')).toBe('')
-    expect(markup.replace(/aria-label="[^"]*"/g, '')).not.toContain('Copy protocol')
+    expect(markup.replace(/(aria-label|data-cv-tooltip)="[^"]*"/g, '')).not.toContain('Copy protocol')
   })
 
   it('shows the short confirmation next to the icon while copied', () => {

package/src/participant/ParticipantThreadScreen.tsx

@@ -104,6 +104,7 @@ function LoadedThread(props: LoadedThreadProps) {
       avatars={props.avatars}
       renderAuthorAvatar={props.renderAuthorAvatar}
       tail={props.tail}
+      audioRecording={props.audioRecording}
     />
   )
 }