@adatechnology/conversations-ui 0.8.0 → 0.10.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

@@ -1382,8 +1382,8 @@
 .cv-p-chip,
 .cv-p-row,
 .cv-p-thread__older,
-.cv-p-bubble__retry,
-.cv-p-bubble__action {
+.cv-p-failed-menu__trigger,
+.cv-p-failed-menu__item {
   font: inherit;
   color: inherit;
   cursor: pointer;
@@ -1970,8 +1970,7 @@
   min-width: 0;
   margin-inline-end: auto;
 }
-.cv-p-bubble > .cv-p-attachment,
-.cv-p-bubble > .cv-p-bubble__actions {
+.cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
 .cv-p-bubble__meta {
@@ -2004,33 +2003,103 @@
 .cv-p-bubble .cv-status-ticks--failed {
   color: var(--cv-p-i-danger);
 }
-.cv-p-bubble__retry {
-  min-height: var(--cv-p-i-touch);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0.5rem;
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+  }
+  .cv-p-bubble--mine.cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+  }
+}
+.cv-p-failed-retry {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.125rem);
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: var(--cv-p-i-touch);
+  height: var(--cv-p-i-touch);
+  padding: 0;
   background: transparent;
-  border: 1px solid var(--cv-p-i-danger);
+  border: 0;
   color: var(--cv-p-i-danger);
-  border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+  font: inherit;
+  cursor: pointer;
 }
-.cv-p-bubble__actions {
-  display: inline-flex;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
+.cv-p-failed-retry__icon {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--cv-p-i-danger);
+  border-radius: 50%;
 }
-.cv-p-bubble__action {
-  min-height: var(--cv-p-i-touch);
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon,
+.cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon {
+  background: var(--cv-p-i-surface-raised);
+}
+.cv-p-failed-menu {
   display: inline-flex;
-  align-items: center;
-  padding: 0 0.75rem;
+}
+.cv-p-failed-menu__trigger {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 0.75rem;
+  padding: 0;
   background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text-muted);
+  font: inherit;
+  line-height: 0.75rem;
+  cursor: pointer;
+}
+.cv-p-failed-menu__trigger::after {
+  content: "";
+  position: absolute;
+  inset: -0.5rem -0.4rem;
+}
+.cv-p-failed-menu__list {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.25rem);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  min-width: 8rem;
+  background: var(--cv-p-i-surface-raised);
   border: 1px solid var(--cv-p-i-border);
-  color: inherit;
   border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+}
+.cv-p-failed-menu__item {
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text);
+  font:
+    0.7rem "SFMono-Regular",
+    Consolas,
+    monospace;
+  text-align: start;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+.cv-p-failed-menu__list--below {
+  bottom: auto;
+  top: calc(100% + 0.25rem);
+}
+.cv-p-failed-menu__item--danger {
+  color: var(--cv-p-i-danger);
+}
+.cv-p-failed-menu__item:hover,
+.cv-p-failed-menu__item:focus-visible {
+  background: var(--cv-p-i-highlight);
 }
 .cv-p-attachment {
   display: flex;
@@ -2056,11 +2125,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;
@@ -2121,6 +2308,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;
@@ -2525,10 +2772,21 @@
   .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;
   }
+  .cv-p-failed-menu__list {
+    border-color: CanvasText;
+  }
+  .cv-p-failed-menu__item:focus-visible,
+  .cv-p-failed-menu__item:hover {
+    outline: 2px solid Highlight;
+  }
 }
 @media (forced-colors: active) {
   .cv-p-text__code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.8.0",
+  "version": "0.10.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": {
@@ -49,6 +49,7 @@
     }
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^18.0.1",
     "@types/bun": "1.3.14",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19",

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

@@ -14,6 +14,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
 /** Atributo que marca um elemento como portador de dica. */
 export const TOOLTIP_ATTRIBUTE = 'data-cv-tooltip'
 
@@ -64,25 +66,16 @@ function tooltipStateFor(target: Element, text: string): TooltipState {
 /**
  * Só uma camada desenha por vez. A camada é montada por cada superfície do pacote (inbox, fluxos,
  * documentos) para o host não precisar montá-la à mão; duas superfícies na mesma tela renderizariam
- * dois balões sobrepostos sem essa trava.
+ * dois balões sobrepostos sem essa trava. Quando a dona desmonta, a posse passa à próxima montada.
  */
-let layerOwner: object | undefined
+const layerRegistry = createTooltipLayerRegistry()
 
 export function TooltipLayer() {
   const identity = useRef({})
   const [isOwner, setIsOwner] = useState(false)
   const [tooltip, setTooltip] = useState<TooltipState | undefined>(undefined)
 
-  useEffect(() => {
-    const owned = identity.current
-    if (layerOwner && layerOwner !== owned) return undefined
-    layerOwner = owned
-    setIsOwner(true)
-
-    return () => {
-      if (layerOwner === owned) layerOwner = undefined
-    }
-  }, [])
+  useEffect(() => layerRegistry.register(identity.current, setIsOwner), [])
 
   useEffect(() => {
     if (!isOwner) return undefined

package/src/TooltipDom.test.tsx

@@ -0,0 +1,78 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { act, useRef } from 'react'
+
+import { setupDom, wait, type DomHarness } from './domHarness.test-helper'
+import { TooltipLayer } from './Tooltip'
+import { useSuppressTouchTooltips } from './participant/useSuppressTouchTooltips'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+function hover(target: Element): void {
+  act(() => void target.dispatchEvent(new Event('pointerover', { bubbles: true })))
+}
+
+function balloons(): number {
+  return document.body.querySelectorAll('[role="tooltip"]').length
+}
+
+function Target() {
+  return <button type="button" data-cv-tooltip="Hint">x</button>
+}
+
+describe('TooltipLayer ownership', () => {
+  it('draws one balloon with two layers, and keeps drawing after the owner unmounts', async () => {
+    const first = harness.mount(<TooltipLayer />)
+    harness.mount(<TooltipLayer />)
+    const target = harness.mount(<Target />).container.querySelector('button')!
+
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+
+    first.unmount()
+    act(() => void target.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+  })
+})
+
+function Thread() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  useSuppressTouchTooltips(rootRef)
+  return (
+    <div ref={rootRef}>
+      <Target />
+    </div>
+  )
+}
+
+describe('touch on the participant thread', () => {
+  it('does not light the balloon when a tap focuses the button', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(0)
+  })
+
+  it('still shows it for keyboard focus after a touch', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(1)
+  })
+})

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/domHarness.test-helper.ts

@@ -0,0 +1,53 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+import { act, type ReactElement } from 'react'
+import type { Root } from 'react-dom/client'
+
+export type MountedTree = {
+  readonly container: HTMLElement
+  readonly unmount: () => void
+}
+
+export type DomHarness = {
+  readonly mount: (element: ReactElement) => MountedTree
+  readonly teardown: () => void
+}
+
+/**
+ * Registers happy-dom for one test file only and mounts React trees into it. react-dom/client is
+ * imported after the registration because it reads the DOM globals when it loads.
+ */
+export async function setupDom(): Promise<DomHarness> {
+  GlobalRegistrator.register()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const { createRoot } = await import('react-dom/client')
+  const roots: Root[] = []
+
+  function mount(element: ReactElement): MountedTree {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    roots.push(root)
+    act(() => root.render(element))
+    return { container, unmount: () => act(() => root.unmount()) }
+  }
+
+  function teardown(): void {
+    for (const root of roots) act(() => root.unmount())
+    document.body.innerHTML = ''
+    GlobalRegistrator.unregister()
+  }
+
+  return { mount, teardown }
+}
+
+export function pressKey(target: Element, key: string): void {
+  act(() => {
+    target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+  })
+}
+
+export function wait(milliseconds: number): Promise<void> {
+  return act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, milliseconds))
+  })
+}

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,8 @@ 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
 }
 
 function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
@@ -105,6 +108,7 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           tail={props.tail}
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}
+          audioRecording={props.audioRecording}
         />
       </div>
     </div>