@adatechnology/conversations-ui 0.8.0 → 0.10.0

package/src/participant/ParticipantAttachmentItem.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
 
 import { formatFileSize } from '../lib/format'
+import { ParticipantAudioAttachment } from './ParticipantAudioAttachment'
 import { isSafeAttachmentUrl } from './participantAttachmentUrl'
 import type { ParticipantConversationsLabels } from './participantLabels'
 
@@ -42,7 +43,12 @@ function useAttachmentUrl(
   return url
 }
 
-export function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }: ParticipantAttachmentItemProps) {
+export function ParticipantAttachmentItem(props: ParticipantAttachmentItemProps) {
+  if (props.attachment.kind === 'audio') return <ParticipantAudioAttachment {...props} />
+  return <ParticipantFileAttachment {...props} />
+}
+
+function ParticipantFileAttachment({ attachment, resolveAttachmentUrl, labels }: ParticipantAttachmentItemProps) {
   const url = useAttachmentUrl(attachment, resolveAttachmentUrl)
 
   if (attachment.kind === 'image') {
@@ -54,15 +60,6 @@ export function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, la
     )
   }
 
-  if (attachment.kind === 'audio') {
-    return (
-      <div className="cv-p-attachment cv-p-attachment--audio">
-        <span className="cv-p-attachment__name">{attachment.filename}</span>
-        <audio className="cv-p-attachment__audio" controls preload="none" src={url} />
-      </div>
-    )
-  }
-
   return (
     <a
       className="cv-p-attachment cv-p-attachment--document"

package/src/participant/ParticipantAudioAttachment.tsx

@@ -0,0 +1,34 @@
+import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { ParticipantAudioPlayer } from './ParticipantAudioPlayer'
+import { ParticipantAudioTranscription } from './ParticipantAudioTranscription'
+import { resolveParticipantAudioLabels } from './participantAudioLabels'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { useStableAttachmentUrl } from './useStableAttachmentUrl'
+
+export type ParticipantAudioAttachmentProps = {
+  readonly attachment: ParticipantAttachment
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly labels: ParticipantConversationsLabels
+}
+
+export function ParticipantAudioAttachment({ attachment, resolveAttachmentUrl, labels }: ParticipantAudioAttachmentProps) {
+  const source = useStableAttachmentUrl({ attachment, resolveAttachmentUrl })
+  const audioLabels = resolveParticipantAudioLabels(labels)
+  return (
+    <div className="cv-p-attachment cv-p-attachment--audio">
+      <ParticipantAudioPlayer
+        labels={audioLabels}
+        url={source.url}
+        durationMs={attachment.durationMs}
+        filename={attachment.filename}
+        isPending={source.status === 'pending'}
+        isUnavailable={source.status === 'failed'}
+        onSourceError={source.resolveAgain}
+      />
+      <span className="cv-p-attachment__name">{attachment.filename}</span>
+      <ParticipantAudioTranscription attachmentId={attachment.id} transcription={attachment.transcription} labels={audioLabels} />
+    </div>
+  )
+}

package/src/participant/ParticipantAudioPlayer.tsx

@@ -0,0 +1,68 @@
+import type { Ref } from 'react'
+
+import type { ParticipantAudioLabels } from './participantAudioLabels'
+import {
+  formatAudioClock,
+  formatPlaybackRate,
+  formatPositionValueText,
+  resolveSeekMax,
+} from './participantAudioFormat'
+import { AudioRateButton, AudioSeekRange, AudioToggleButton } from './ParticipantAudioPlayerControls'
+import { useParticipantAudioPlayer } from './useParticipantAudioPlayer'
+
+export type ParticipantAudioPlayerProps = {
+  readonly labels: ParticipantAudioLabels
+  readonly url: string | undefined
+  readonly durationMs?: number | undefined
+  readonly filename?: string
+  /** True while the host is still resolving the URL: the toggle answers aria-busy and the user taps again. */
+  readonly isPending?: boolean
+  readonly isUnavailable?: boolean
+  readonly onSourceError?: () => Promise<string | undefined>
+  readonly mediaRef?: Ref<HTMLAudioElement>
+}
+
+function fillRate(template: string, rate: number): string {
+  return template.replace('{rate}', formatPlaybackRate(rate))
+}
+
+export function ParticipantAudioPlayer({
+  labels,
+  url,
+  durationMs,
+  filename,
+  isPending = false,
+  isUnavailable = false,
+  onSourceError,
+  mediaRef,
+}: ParticipantAudioPlayerProps) {
+  const player = useParticipantAudioPlayer({ url, durationMs, onSourceError, mediaRef })
+  const { state, duration, rate } = player
+  const position = Math.floor(state.position)
+  const hasFailed = isUnavailable || state.hasFailed
+
+  return (
+    <div className="cv-p-audio" role="group" aria-label={filename ? `${labels.audioPlayer}: ${filename}` : labels.audioPlayer}>
+      <AudioToggleButton
+        label={state.isPlaying ? labels.pauseAudio : labels.playAudio}
+        isPlaying={state.isPlaying}
+        isPending={isPending}
+        isDisabled={hasFailed}
+        onToggle={player.handleToggle}
+      />
+      <AudioSeekRange
+        label={labels.audioPosition}
+        max={resolveSeekMax({ duration, maxSeen: state.maxSeen, position })}
+        position={position}
+        valueText={formatPositionValueText({ template: labels.audioPositionValue, position, duration })}
+        isDisabled={hasFailed}
+        onSeek={player.seekTo}
+        onKeyDown={player.handleKeyDown}
+      />
+      <span className="cv-p-audio__time">{`${formatAudioClock(position)} / ${formatAudioClock(duration)}`}</span>
+      <AudioRateButton label={fillRate(labels.playbackRate, rate)} text={formatPlaybackRate(rate)} onClick={player.handleRateClick} />
+      <audio className="cv-p-audio__media" preload="none" src={url} {...player.mediaProps} />
+      {hasFailed ? <span className="cv-p-audio__error">{labels.audioUnavailable}</span> : null}
+    </div>
+  )
+}

package/src/participant/ParticipantAudioPlayerControls.tsx

@@ -0,0 +1,68 @@
+import { Pause, Play } from 'lucide-react'
+import type { KeyboardEventHandler } from 'react'
+
+type AudioToggleButtonProps = {
+  readonly label: string
+  readonly isPlaying: boolean
+  readonly isPending: boolean
+  readonly isDisabled: boolean
+  readonly onToggle: () => void
+}
+
+export function AudioToggleButton({ label, isPlaying, isPending, isDisabled, onToggle }: AudioToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      className="cv-p-audio__toggle"
+      aria-label={label}
+      data-cv-tooltip={label}
+      aria-busy={isPending ? true : undefined}
+      disabled={isDisabled}
+      onClick={onToggle}
+    >
+      {isPlaying ? <Pause size={20} aria-hidden="true" focusable="false" /> : <Play size={20} aria-hidden="true" focusable="false" />}
+    </button>
+  )
+}
+
+type AudioSeekRangeProps = {
+  readonly label: string
+  readonly max: number
+  readonly position: number
+  readonly valueText: string
+  readonly isDisabled: boolean
+  readonly onSeek: (seconds: number) => void
+  readonly onKeyDown: KeyboardEventHandler<HTMLInputElement>
+}
+
+export function AudioSeekRange({ label, max, position, valueText, isDisabled, onSeek, onKeyDown }: AudioSeekRangeProps) {
+  return (
+    <input
+      type="range"
+      className="cv-p-audio__seek"
+      aria-label={label}
+      min={0}
+      max={max}
+      step={1}
+      value={Math.min(position, max)}
+      aria-valuetext={valueText}
+      disabled={isDisabled}
+      onChange={(event) => onSeek(Number(event.currentTarget.value))}
+      onKeyDown={onKeyDown}
+    />
+  )
+}
+
+type AudioRateButtonProps = {
+  readonly label: string
+  readonly text: string
+  readonly onClick: () => void
+}
+
+export function AudioRateButton({ label, text, onClick }: AudioRateButtonProps) {
+  return (
+    <button type="button" className="cv-p-audio__rate" aria-label={label} onClick={onClick}>
+      {text}
+    </button>
+  )
+}

package/src/participant/ParticipantAudioRecorderView.tsx

@@ -0,0 +1,55 @@
+import type { Ref } from 'react'
+
+import { DEFAULT_MAX_RECORDING_MILLISECONDS } from '../audioRecorderFormat'
+import { formatRecordingElapsedLabel, resolveParticipantAudioLabels, type ParticipantAudioLabels } from './participantAudioLabels'
+import { formatRecordingClock, type RecorderStatus } from './participantAudioRecorderState'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { RecordAudioButton, RecorderError, RecordingGroup, ReviewGroup } from './ParticipantRecorderParts'
+
+export type ParticipantAudioRecorderActions = {
+  readonly onStart?: () => void
+  readonly onStop?: () => void
+  readonly onSend?: () => void
+  readonly onDiscard?: () => void
+}
+
+export type ParticipantAudioRecorderViewProps = {
+  readonly state: RecorderStatus
+  readonly elapsedMs: number
+  readonly labels?: Partial<ParticipantAudioLabels> | ParticipantConversationsLabels
+  readonly maxDurationMs?: number
+  readonly review?: { readonly url?: string; readonly audioRef?: Ref<HTMLAudioElement>; readonly durationMs?: number | undefined }
+  readonly actions?: ParticipantAudioRecorderActions
+  readonly disabled?: boolean
+}
+
+const ERROR_LABEL_BY_STATE = {
+  denied: 'microphoneDenied',
+  unsupported: 'recordingUnsupported',
+  empty: 'audioEmpty',
+  tooLarge: 'audioTooLarge',
+} as const satisfies Partial<Record<RecorderStatus, keyof ParticipantAudioLabels>>
+
+export function resolveRecorderErrorMessage(state: RecorderStatus, labels: ParticipantAudioLabels): string | undefined {
+  return state in ERROR_LABEL_BY_STATE ? labels[ERROR_LABEL_BY_STATE[state as keyof typeof ERROR_LABEL_BY_STATE]] : undefined
+}
+
+export function ParticipantAudioRecorderView(props: ParticipantAudioRecorderViewProps) {
+  const { state, elapsedMs, maxDurationMs = DEFAULT_MAX_RECORDING_MILLISECONDS, review, actions, disabled = false } = props
+  const labels = resolveParticipantAudioLabels(props.labels)
+
+  if (state === 'recording') {
+    const clockText = formatRecordingElapsedLabel(labels.recordingElapsed, formatRecordingClock(elapsedMs), formatRecordingClock(maxDurationMs))
+    return <RecordingGroup labels={labels} clockText={clockText} onStop={actions?.onStop} onDiscard={actions?.onDiscard} />
+  }
+  if (state === 'review') {
+    return <ReviewGroup labels={labels} url={review?.url} audioRef={review?.audioRef} durationMs={review?.durationMs} onSend={actions?.onSend} onDiscard={actions?.onDiscard} disabled={disabled} />
+  }
+  const errorMessage = resolveRecorderErrorMessage(state, labels)
+  return (
+    <>
+      {errorMessage ? <RecorderError message={errorMessage} /> : null}
+      <RecordAudioButton label={labels.recordAudio} isBusy={state === 'requesting'} disabled={disabled} onClick={actions?.onStart} />
+    </>
+  )
+}

package/src/participant/ParticipantAudioTranscription.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+
+import type { ParticipantTranscription } from '@adatechnology/conversation-contracts'
+
+import type { ParticipantAudioLabels } from './participantAudioLabels'
+import { useTranscriptionOverflow } from './useTranscriptionOverflow'
+import { useTranscriptionReadyAnnouncement } from './useTranscriptionReadyAnnouncement'
+
+const MILLISECONDS_PER_MINUTE = 60_000
+
+export type ParticipantAudioTranscriptionProps = {
+  readonly attachmentId: string
+  readonly transcription: ParticipantTranscription | undefined
+  readonly labels: ParticipantAudioLabels
+}
+
+type ReadyTranscriptionBlockProps = {
+  readonly transcription: Extract<ParticipantTranscription, { status: 'ready' }>
+  readonly labels: ParticipantAudioLabels
+}
+
+function resolveTooLongMinutes(transcription: ParticipantTranscription | undefined): number | undefined {
+  if (transcription?.status !== 'failed' || transcription.reason !== 'too_long') return undefined
+  if (typeof transcription.maxDurationMs !== 'number') return undefined
+  const minutes = Math.floor(transcription.maxDurationMs / MILLISECONDS_PER_MINUTE)
+  return minutes >= 1 ? minutes : undefined
+}
+
+// A host that skipped validation can hand us a ready block without a string text: treat it as absent.
+function dropUnusableTranscription(transcription: ParticipantTranscription | undefined): ParticipantTranscription | undefined {
+  if (transcription?.status === 'ready' && typeof transcription.text !== 'string') return undefined
+  return transcription
+}
+
+export function ParticipantAudioTranscription({ attachmentId, transcription: received, labels }: ParticipantAudioTranscriptionProps) {
+  const transcription = dropUnusableTranscription(received)
+  useTranscriptionReadyAnnouncement({
+    attachmentId,
+    status: transcription?.status,
+    text: labels.transcriptionReady,
+  })
+  if (transcription?.status === 'pending') {
+    return <p className="cv-p-transcription cv-p-transcription--pending">{labels.transcribing}</p>
+  }
+  if (transcription?.status === 'ready') return <ReadyTranscriptionBlock transcription={transcription} labels={labels} />
+  const minutes = resolveTooLongMinutes(transcription)
+  if (minutes === undefined) return null
+  return (
+    <p className="cv-p-transcription cv-p-transcription--too-long">
+      {labels.transcriptionTooLong.replace('{minutes}', String(minutes))}
+    </p>
+  )
+}
+
+function ReadyTranscriptionBlock({ transcription, labels }: ReadyTranscriptionBlockProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { textRef, isOverflowing } = useTranscriptionOverflow(transcription.text, isExpanded)
+  const hasText = transcription.text !== ''
+  const showsToggle = hasText && (isOverflowing || isExpanded)
+
+  return (
+    <div className="cv-p-transcription">
+      <p className="cv-p-transcription__notice">
+        {labels.machineTranscription}
+      </p>
+      {hasText ? (
+        <p
+          ref={textRef}
+          className="cv-p-transcription__text"
+          lang={transcription.language}
+          data-expanded={isExpanded ? 'true' : undefined}
+        >
+          {transcription.text}
+        </p>
+      ) : (
+        <p className="cv-p-transcription__empty">{labels.emptyTranscription}</p>
+      )}
+      {showsToggle ? (
+        <button
+          type="button"
+          className="cv-p-transcription__toggle"
+          aria-expanded={isExpanded}
+          onClick={() => setIsExpanded((current) => !current)}
+        >
+          {isExpanded ? labels.collapseTranscription : labels.showFullTranscription}
+        </button>
+      ) : null}
+    </div>
+  )
+}

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

@@ -4,7 +4,10 @@ import { channelCapabilityFor } from '../channelCapability'
 import type { ConversationChannel } from '../conversationChannel'
 import { formatFileSize } from '../lib/format'
 import type { QuickReply } from '../quickReplies/quickReply.types'
+import { ComposerAudioRow } from './ParticipantComposerAudio'
 import { AttachControl, MessageField, SendButton } from './ParticipantComposerControls'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
+import { resolveComposerAudio } from './participantAudioSupport'
 import { maxBytesForChannel, reduceFilesSelection, type ParticipantFileRejection } from './participantFileValidation'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { applyQuickReply } from './participantQuickReply'
@@ -26,6 +29,10 @@ export type ParticipantComposerProps = {
   readonly acceptedTypes?: readonly string[]
   /** Tapping a chip fills the text; it never sends. Absent or empty means no strip. */
   readonly quickReplies?: readonly QuickReply[]
+  /** Present turns the microphone on (an empty field, a browser and a channel that record); `{}` takes the defaults. */
+  readonly audioRecording?: ParticipantAudioRecordingOptions
+  /** Receives the recorded audio, already checked; sent as a message of its own, never through the draft. */
+  readonly onSendAudio?: (file: File) => void
 }
 
 type QuickReplyStripProps = {
@@ -60,7 +67,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>
@@ -95,8 +102,49 @@ function useFileSelection(props: ParticipantComposerProps) {
   return { rejection, handleFilesChosen, handleRemoveFile }
 }
 
+type ComposerRowProps = {
+  readonly composer: ParticipantComposerProps
+  readonly canSend: boolean
+  readonly onFilesChosen: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+function ComposerRow({ composer, canSend, onFilesChosen }: ComposerRowProps) {
+  const { value, onChange, files, labels, channel = 'app', disabled = false } = composer
+  const attach = channelCapabilityFor(channel).attachments.accepted ? (
+    <AttachControl labels={labels} disabled={disabled} acceptedTypes={composer.acceptedTypes} onChosen={onFilesChosen} />
+  ) : null
+  const field = (
+    <MessageField
+      value={value}
+      label={labels.messageInputLabel}
+      placeholder={labels.messageInputPlaceholder}
+      disabled={disabled}
+      maxLength={composer.maxLength}
+      onChange={onChange}
+    />
+  )
+  const sendButton = <SendButton label={labels.send} disabled={!canSend} />
+  const audio = resolveComposerAudio(composer)
+  if (!audio) {
+    return (
+      <div className="cv-p-composer__row">
+        {attach}
+        {field}
+        {sendButton}
+      </div>
+    )
+  }
+  const isDraftEmpty = value.trim().length === 0 && files.length === 0
+  return (
+    <ComposerAudioRow settings={audio} labels={labels} disabled={disabled} isDraftEmpty={isDraftEmpty} sendButton={sendButton}>
+      {attach}
+      {field}
+    </ComposerAudioRow>
+  )
+}
+
 export function ParticipantComposer(props: ParticipantComposerProps) {
-  const { value, onChange, files, onSend, labels, channel = 'app', disabled = false, isSending = false } = props
+  const { value, onChange, files, onSend, labels, disabled = false, isSending = false } = props
   const { rejection, handleFilesChosen, handleRemoveFile } = useFileSelection(props)
   const canSend = !disabled && !isSending && (value.trim().length > 0 || files.length > 0)
 
@@ -116,20 +164,7 @@ export function ParticipantComposer(props: ParticipantComposerProps) {
           {rejectionText(rejection, labels)}
         </p>
       ) : null}
-      <div className="cv-p-composer__row">
-        {channelCapabilityFor(channel).attachments.accepted ? (
-          <AttachControl labels={labels} disabled={disabled} acceptedTypes={props.acceptedTypes} onChosen={handleFilesChosen} />
-        ) : null}
-        <MessageField
-          value={value}
-          label={labels.messageInputLabel}
-          placeholder={labels.messageInputPlaceholder}
-          disabled={disabled}
-          maxLength={props.maxLength}
-          onChange={onChange}
-        />
-        <SendButton label={labels.send} disabled={!canSend} />
-      </div>
+      <ComposerRow composer={props} canSend={canSend} onFilesChosen={handleFilesChosen} />
     </form>
   )
 }