@adatechnology/conversations-ui 0.9.0 → 0.11.0

package/dist/preview/index.d.ts

@@ -1,6 +1,6 @@
 import { M as MessagePayload } from '../quickReply.types-DzWH3NYV.js';
-import { C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-q-wVgBCN.js';
-export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, M as signPreviewPayload, N as simulatorPanelLabelsOf, O as toConversationSimulatorClient } from '../ConversationSimulatorPanel-q-wVgBCN.js';
+import { C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-P6eqTSAO.js';
+export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, M as signPreviewPayload, N as simulatorPanelLabelsOf, O as toConversationSimulatorClient } from '../ConversationSimulatorPanel-P6eqTSAO.js';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 import * as react from 'react';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';

package/dist/preview/index.js

@@ -16,9 +16,9 @@ import {
   mediaTypeOf,
   simulatorPanelLabelsOf,
   toConversationSimulatorClient
-} from "../chunk-L3OFAQPS.js";
+} from "../chunk-Y326LLEP.js";
 import "../chunk-PJNR6UMN.js";
-import "../chunk-O6457XHK.js";
+import "../chunk-WCZNIJ3M.js";
 
 // src/preview/previewStore.ts
 var GLOBAL_CHANNEL = "global";

package/dist/styles.css

@@ -1812,6 +1812,11 @@
   white-space: nowrap;
   border: 0;
 }
+.cv-p-thread__lock {
+  padding: 1rem;
+  color: var(--cv-p-i-text-muted);
+  border-top: 1px solid var(--cv-p-i-border);
+}
 .cv-p-thread__closed {
   margin: 0;
   padding: 1rem;
@@ -2125,11 +2130,129 @@
   width: 100%;
   min-height: var(--cv-p-i-touch);
 }
+.cv-p-audio {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  width: 100%;
+  min-width: min(15rem, 100%);
+  box-sizing: border-box;
+}
+.cv-p-audio__toggle,
+.cv-p-audio__rate {
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--cv-p-i-touch);
+  min-height: var(--cv-p-i-touch);
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--cv-p-i-border);
+  border-radius: var(--cv-p-i-radius);
+  color: inherit;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.cv-p-audio__toggle:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.cv-p-audio__toggle svg {
+  display: block;
+}
+.cv-p-audio__seek {
+  flex: 1 1 5rem;
+  min-width: 5rem;
+  min-height: var(--cv-p-i-touch);
+  margin: 0;
+  accent-color: var(--cv-p-i-accent);
+  cursor: pointer;
+}
+.cv-p-audio__time {
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-audio__media {
+  display: none;
+}
+.cv-p-audio__error {
+  flex: 1 0 100%;
+  font-size: 0.75rem;
+}
+.cv-p-recorder .cv-p-audio {
+  flex: 1 1 8rem;
+  width: auto;
+  min-width: 0;
+}
 .cv-p-attachment__name,
 .cv-p-attachment__size {
   font-size: 0.75rem;
   overflow-wrap: anywhere;
 }
+.cv-p-transcription {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  color: var(--cv-p-i-text);
+}
+.cv-p-transcription--pending,
+.cv-p-transcription--too-long {
+  font-size: 0.75rem;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-transcription__text,
+.cv-p-transcription__empty,
+.cv-p-transcription__notice {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.cv-p-transcription__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  line-clamp: 6;
+  overflow: hidden;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.cv-p-transcription__text[data-expanded=true] {
+  display: block;
+  overflow: visible;
+}
+.cv-p-transcription__empty {
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-transcription__notice {
+  order: 1;
+  font-size: 0.7rem;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-transcription__toggle {
+  order: 2;
+  align-self: flex-start;
+  min-width: var(--cv-p-i-touch);
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.5rem;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-accent);
+  font: inherit;
+  font-size: 0.75rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.cv-p-transcription__toggle:focus-visible {
+  outline: 2px solid var(--cv-p-i-accent);
+  outline-offset: 2px;
+}
 .cv-p-composer {
   display: flex;
   flex-direction: column;
@@ -2190,6 +2313,66 @@
   font-size: 0.8rem;
   color: var(--cv-p-i-danger);
 }
+.cv-p-composer__record {
+  flex: 0 0 auto;
+  padding: 0;
+  margin-inline-start: 0.25rem;
+}
+.cv-p-composer__record svg,
+.cv-p-recorder svg {
+  display: block;
+}
+.cv-p-recorder {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.cv-p-recorder__hint {
+  flex: 1 1 100%;
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-recorder__discard {
+  flex: 0 0 auto;
+  padding: 0;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-recorder__dot {
+  flex: 0 0 auto;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: var(--cv-p-i-danger);
+  animation: cv-p-recorder-pulse 1.2s ease-in-out infinite;
+}
+.cv-p-recorder__elapsed {
+  flex: 1 1 auto;
+  font:
+    0.85rem "SFMono-Regular",
+    Consolas,
+    monospace;
+  font-variant-numeric: tabular-nums;
+  color: var(--cv-p-i-text);
+}
+.cv-p-recorder__stop,
+.cv-p-recorder__send {
+  flex: 0 0 auto;
+  padding: 0;
+}
+@keyframes cv-p-recorder-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-p-recorder__dot {
+    animation: none;
+  }
+}
 .cv-p-quick {
   --cv-p-i-fade: 0.75rem;
   display: flex;
@@ -2594,6 +2777,10 @@
   .cv-p-thread__latest-badge {
     border: 1px solid ButtonText;
   }
+  .cv-p-transcription__toggle {
+    color: LinkText;
+    border: 1px solid ButtonText;
+  }
   .cv-p-bubble .cv-status-ticks,
   .cv-p-copyable__done {
     color: CanvasText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/conversation-contracts": "0.5.0",
+    "@adatechnology/conversation-contracts": "0.6.0",
     "@adatechnology/meta-whatsapp-contracts": "0.6.0"
   },
   "peerDependencies": {

package/src/AudioRecorderButton.tsx

@@ -11,6 +11,10 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
 
 import { AudioPlayer } from './AudioPlayer'
+import { DEFAULT_MAX_RECORDING_MILLISECONDS, RECORDING_FORMATS, resolveRecordingFormat } from './audioRecorderFormat'
+
+export { DEFAULT_MAX_RECORDING_MILLISECONDS, RECORDING_FORMATS, resolveRecordingFormat }
+export type { RecordingFormat } from './audioRecorderFormat'
 
 export interface AudioRecorderButtonLabels {
   start: string
@@ -64,34 +68,6 @@ export interface AudioRecorderButtonProps {
   disabledHint?: string
 }
 
-/**
- * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
- * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
- * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
- */
-export const DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1000
-
-/**
- * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
- * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
- * do envio que o formato é inválido é pior do que gravar já no formato certo.
- */
-const RECORDING_FORMATS = [
-  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
-  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
-  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
-] as const
-
-export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
-
-/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
-export function resolveRecordingFormat(): RecordingFormat | undefined {
-  if (typeof MediaRecorder === 'undefined') return undefined
-  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
-  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
-  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
-}
-
 type PendingRecording = { file: File; objectURL: string }
 
 export function AudioRecorderButton({

package/src/audioRecorderFormat.ts

@@ -0,0 +1,27 @@
+/**
+ * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
+ * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
+ * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
+ */
+export const DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1000
+
+/**
+ * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
+ * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
+ * do envio que o formato é inválido é pior do que gravar já no formato certo.
+ */
+export const RECORDING_FORMATS = [
+  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
+  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
+  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
+] as const
+
+export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
+
+/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
+export function resolveRecordingFormat(): RecordingFormat | undefined {
+  if (typeof MediaRecorder === 'undefined') return undefined
+  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
+  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
+}

package/src/participant/ConversationThread.tsx

@@ -10,6 +10,7 @@ import { ParticipantThread } from './ParticipantThread'
 import { toParticipantApi, type ConversationThreadApi } from './conversationThreadApi'
 import { buildThreadSummary } from './conversationThreadSummary'
 import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
 import type { ParticipantPendingMessage } from './participantApi.types'
 import { draftKey, type ParticipantDrafts } from './participantDrafts'
 import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
@@ -50,6 +51,10 @@ export type ConversationThreadProps = {
   readonly tail?: boolean
   readonly avatars?: 'initials'
   readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
+  readonly audioRecording?: ParticipantAudioRecordingOptions
+  /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+  readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
@@ -105,6 +110,8 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           tail={props.tail}
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}
+          audioRecording={props.audioRecording}
+          renderComposerLock={props.renderComposerLock}
         />
       </div>
     </div>

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} />
+    </>
+  )
+}