@adatechnology/conversations-ui 0.9.0 → 0.10.0

package/dist/participant/index.js

@@ -2,15 +2,17 @@ import {
   TooltipLayer
 } from "../chunk-NSOAUYNE.js";
 import {
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
   StatusTicks,
   channelCapabilityFor,
   formatFileSize,
   formatTimestamp,
-  isSameDay
-} from "../chunk-O6457XHK.js";
+  isSameDay,
+  resolveRecordingFormat
+} from "../chunk-WCZNIJ3M.js";
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { useMemo as useMemo5, useReducer as useReducer6, useRef as useRef12, useState as useState9 } from "react";
+import { useMemo as useMemo6, useReducer as useReducer6, useRef as useRef21, useState as useState14 } from "react";
 
 // src/participant/participantLoadView.ts
 function resolveLoadView({ status, hasItems }) {
@@ -21,6 +23,45 @@ function resolveLoadView({ status, hasItems }) {
   };
 }
 
+// src/participant/participantAudioLabels.ts
+var DEFAULT_PARTICIPANT_AUDIO_LABELS = {
+  recordAudio: "Record audio",
+  recordingInProgress: "Recording",
+  stopRecording: "Stop recording",
+  recordingElapsed: "{elapsed} of {limit}",
+  reviewAudio: "Listen before sending",
+  sendAudio: "Send audio",
+  discardAudio: "Discard audio",
+  microphoneDenied: "No permission to use the microphone.",
+  recordingUnsupported: "This device cannot record audio.",
+  audioEmpty: "Nothing was captured by the microphone.",
+  audioTooLarge: "Audio too large to send.",
+  audioPlayer: "Audio",
+  playAudio: "Play audio",
+  pauseAudio: "Pause audio",
+  audioPosition: "Audio position",
+  audioPositionValue: "{position} of {duration}",
+  playbackRate: "Playback speed {rate}",
+  audioUnavailable: "Audio unavailable",
+  transcribing: "Transcribing\u2026",
+  transcriptionReady: "Transcription ready",
+  machineTranscription: "Transcription generated by machine",
+  emptyTranscription: "Nothing was said in the audio",
+  transcriptionTooLong: "Transcription only for audios shorter than {minutes} minutes",
+  showFullTranscription: "Show all",
+  collapseTranscription: "Show less"
+};
+function resolveParticipantAudioLabels(labels) {
+  const resolved = { ...DEFAULT_PARTICIPANT_AUDIO_LABELS };
+  for (const key of Object.keys(resolved)) {
+    resolved[key] = labels?.[key] ?? DEFAULT_PARTICIPANT_AUDIO_LABELS[key];
+  }
+  return resolved;
+}
+function formatRecordingElapsedLabel(template, elapsed, limit) {
+  return template.replace("{elapsed}", elapsed).replace("{limit}", limit);
+}
+
 // src/participant/participantLabels.ts
 var DEFAULT_MESSAGE_OPTIONS_LABEL = "Message options";
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
@@ -80,7 +121,8 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   channelWebchat: "Web chat",
   externalLinkHint: "opens in a new tab",
   copyValue: "Copy",
-  valueCopied: "Copied"
+  valueCopied: "Copied",
+  ...DEFAULT_PARTICIPANT_AUDIO_LABELS
 };
 function formatParticipantLabel(template, count) {
   return template.replace("{count}", String(count));
@@ -382,7 +424,7 @@ function ParticipantInbox(props) {
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { useEffect as useEffect13, useState as useState8 } from "react";
+import { useEffect as useEffect20, useState as useState13 } from "react";
 
 // src/participant/ParticipantBackButton.tsx
 import { ArrowLeft } from "lucide-react";
@@ -392,14 +434,818 @@ function ParticipantBackButton({ label, onBack }) {
 }
 
 // src/participant/ParticipantThread.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef13 } from "react";
 
 // src/participant/ParticipantComposer.tsx
-import { useState } from "react";
+import { useState as useState3 } from "react";
+
+// src/participant/ParticipantComposerAudio.tsx
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
+
+// src/participant/participantFileValidation.ts
+function matchesAcceptedType(mimeType, acceptedTypes) {
+  return acceptedTypes.some(
+    (accepted) => accepted.endsWith("/*") ? mimeType.startsWith(accepted.slice(0, -1)) : mimeType === accepted
+  );
+}
+function rejectionOf(file, params) {
+  if (params.acceptedTypes && !matchesAcceptedType(file.type, params.acceptedTypes)) return "typeNotAccepted";
+  if (file.size > params.maxBytes) return "tooLarge";
+  return void 0;
+}
+function reduceFilesSelection(params) {
+  const files = [...params.current];
+  const rejected = [];
+  for (const file of params.incoming) {
+    const reason = rejectionOf(file, params);
+    if (reason === void 0) files.push(file);
+    else rejected.push({ file, reason });
+  }
+  return { files, rejected };
+}
+function maxBytesForChannel(channel = "app") {
+  return channelCapabilityFor(channel).attachments.maxBytes;
+}
+
+// src/participant/participantAudio.types.ts
+var DEFAULT_MAX_RECORDING_BYTES = 16 * 1024 * 1024;
+
+// src/participant/participantAudioRecorderState.ts
+var MINIMUM_RECORDING_MILLISECONDS = 500;
+var MUTE_INTERRUPTION_DELAY_MS = 3e3;
+var RETRYABLE = ["idle", "denied", "unsupported", "empty", "tooLarge"];
+var TRANSITIONS = {
+  request: [[RETRYABLE, "requesting"]],
+  granted: [[["requesting"], "recording"]],
+  microphoneDenied: [[["requesting"], "denied"]],
+  microphoneUnavailable: [[["requesting"], "unsupported"]],
+  capturedReview: [[["recording"], "review"]],
+  capturedEmpty: [[["recording"], "empty"]],
+  capturedTooLarge: [[["recording"], "tooLarge"]],
+  cancel: [[["requesting", "recording", "review"], "idle"]]
+};
+function canStartRecording(status) {
+  return RETRYABLE.includes(status);
+}
+function reduceRecorderStatus(status, event) {
+  const match = TRANSITIONS[event].find(([from]) => from.includes(status));
+  return match ? match[1] : status;
+}
+function resolveInterruptionAction(status) {
+  if (status === "recording") return "stop";
+  if (status === "review") return "pause";
+  if (status === "requesting") return "cancel";
+  return "ignore";
+}
+function lowerOnly(requested, ceiling) {
+  if (requested === void 0 || !Number.isFinite(requested) || requested <= 0) return ceiling;
+  return Math.min(requested, ceiling);
+}
+function resolveRecordingLimits({ options, channelMaxBytes }) {
+  const sizeCeiling = lowerOnly(channelMaxBytes, DEFAULT_MAX_RECORDING_BYTES);
+  return {
+    maxDurationMs: lowerOnly(options?.maxDurationMs, DEFAULT_MAX_RECORDING_MILLISECONDS),
+    maxSizeBytes: lowerOnly(options?.maxSizeBytes, sizeCeiling)
+  };
+}
+function classifyCapture({ sizeBytes, durationMs }, limits) {
+  if (sizeBytes === 0 || durationMs < MINIMUM_RECORDING_MILLISECONDS) return "capturedEmpty";
+  if (sizeBytes > limits.maxSizeBytes) return "capturedTooLarge";
+  return "capturedReview";
+}
+function classifyMicrophoneError(error) {
+  const name = typeof error === "object" && error !== null && "name" in error ? error.name : void 0;
+  return name === "NotAllowedError" || name === "SecurityError" ? "microphoneDenied" : "microphoneUnavailable";
+}
+function formatRecordingClock(milliseconds) {
+  const totalSeconds = Math.floor(Math.max(0, milliseconds) / 1e3);
+  const seconds = String(totalSeconds % 60).padStart(2, "0");
+  return `${Math.floor(totalSeconds / 60)}:${seconds}`;
+}
+
+// src/participant/ParticipantRecorderParts.tsx
+import { Mic, Send, Square, Trash2 } from "lucide-react";
+
+// src/participant/participantAudioFormat.ts
+var PLAYBACK_RATES = [1, 1.5, 2];
+var SEEK_STEP_SECONDS = 5;
+var UNKNOWN_CLOCK = "--:--";
+function formatAudioClock(seconds) {
+  if (seconds === void 0 || !Number.isFinite(seconds) || seconds < 0) return UNKNOWN_CLOCK;
+  const wholeSeconds = Math.floor(seconds);
+  const remainder = String(wholeSeconds % 60).padStart(2, "0");
+  return `${Math.floor(wholeSeconds / 60)}:${remainder}`;
+}
+function nextRateIndex(index) {
+  return (index + 1) % PLAYBACK_RATES.length;
+}
+function formatPlaybackRate(rate) {
+  return `${rate}\xD7`;
+}
+function resolveServerDurationSeconds(durationMs) {
+  if (durationMs === void 0 || !Number.isFinite(durationMs) || durationMs <= 0) return void 0;
+  return durationMs / 1e3;
+}
+function resolveMediaDurationSeconds(duration) {
+  return Number.isFinite(duration) && duration > 0 ? duration : void 0;
+}
+function clampPosition(position, duration) {
+  const floored = Math.max(0, position);
+  return duration === void 0 ? floored : Math.min(duration, floored);
+}
+function resolveSeekKeyTarget({ key, position, duration }) {
+  if (key === "ArrowRight" || key === "ArrowUp") return clampPosition(position + SEEK_STEP_SECONDS, duration);
+  if (key === "ArrowLeft" || key === "ArrowDown") return clampPosition(position - SEEK_STEP_SECONDS, duration);
+  if (key === "Home") return 0;
+  if (key === "End") return duration;
+  return void 0;
+}
+function resolveSeekMax({ duration, maxSeen, position }) {
+  if (duration !== void 0) return Math.ceil(duration);
+  return Math.ceil(Math.max(maxSeen, position));
+}
+function formatPositionValueText({ template, position, duration }) {
+  const positionText = formatAudioClock(position);
+  if (duration === void 0) return positionText;
+  return template.replace("{position}", positionText).replace("{duration}", formatAudioClock(duration));
+}
+
+// src/participant/ParticipantAudioPlayerControls.tsx
+import { Pause, Play } from "lucide-react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function AudioToggleButton({ label, isPlaying, isPending, isDisabled, onToggle }) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-audio__toggle",
+      "aria-label": label,
+      "data-cv-tooltip": label,
+      "aria-busy": isPending ? true : void 0,
+      disabled: isDisabled,
+      onClick: onToggle,
+      children: isPlaying ? /* @__PURE__ */ jsx7(Pause, { size: 20, "aria-hidden": "true", focusable: "false" }) : /* @__PURE__ */ jsx7(Play, { size: 20, "aria-hidden": "true", focusable: "false" })
+    }
+  );
+}
+function AudioSeekRange({ label, max, position, valueText, isDisabled, onSeek, onKeyDown }) {
+  return /* @__PURE__ */ jsx7(
+    "input",
+    {
+      type: "range",
+      className: "cv-p-audio__seek",
+      "aria-label": label,
+      min: 0,
+      max,
+      step: 1,
+      value: Math.min(position, max),
+      "aria-valuetext": valueText,
+      disabled: isDisabled,
+      onChange: (event) => onSeek(Number(event.currentTarget.value)),
+      onKeyDown
+    }
+  );
+}
+function AudioRateButton({ label, text, onClick }) {
+  return /* @__PURE__ */ jsx7("button", { type: "button", className: "cv-p-audio__rate", "aria-label": label, onClick, children: text });
+}
+
+// src/participant/useParticipantAudioPlayer.ts
+import { useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+
+// src/participant/participantAudioCoordinator.ts
+var activeHandle;
+function claimAudioPlayback(handle) {
+  if (activeHandle && activeHandle !== handle) activeHandle.pause();
+  activeHandle = handle;
+}
+function releaseAudioPlayback(handle) {
+  if (activeHandle === handle) activeHandle = void 0;
+}
+
+// src/participant/participantAudioPlayerState.ts
+var INITIAL_PLAYER_STATE = {
+  isPlaying: false,
+  position: 0,
+  mediaDuration: void 0,
+  maxSeen: 0,
+  rateIndex: 0,
+  hasFailed: false
+};
+function applyPlaybackRate(audio, rateIndex) {
+  const rate = PLAYBACK_RATES[rateIndex] ?? 1;
+  audio.defaultPlaybackRate = rate;
+  audio.playbackRate = rate;
+}
+
+// src/participant/useParticipantAudioSourceRetry.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function useParticipantAudioSourceRetry({ context, url, onSourceError }) {
+  const { audioRef, update } = context;
+  const canRetryRef = useRef2(true);
+  const resumeAtRef = useRef2(void 0);
+  useEffect2(() => {
+    const audio = audioRef.current;
+    const resumeAt = resumeAtRef.current;
+    if (!audio || resumeAt === void 0 || !url) return;
+    resumeAtRef.current = void 0;
+    audio.currentTime = resumeAt;
+    Promise.resolve(audio.play()).catch(() => update({ isPlaying: false }));
+  }, [url, audioRef, update]);
+  function allowRetry() {
+    canRetryRef.current = true;
+  }
+  function handleError(event) {
+    if (!onSourceError || !canRetryRef.current) return update({ hasFailed: true, isPlaying: false });
+    canRetryRef.current = false;
+    resumeAtRef.current = event.currentTarget.currentTime;
+    onSourceError().then((fresh) => {
+      if (fresh && fresh !== url) return;
+      resumeAtRef.current = void 0;
+      update({ hasFailed: true, isPlaying: false });
+    });
+  }
+  return { handleError, allowRetry };
+}
+
+// src/participant/useParticipantAudioMediaEvents.ts
+function useParticipantAudioMediaEvents({ context, url, onSourceError }) {
+  const { handleRef, state, update } = context;
+  const { handleError, allowRetry } = useParticipantAudioSourceRetry({ context, url, onSourceError });
+  function handleStop() {
+    releaseAudioPlayback(handleRef.current);
+    update({ isPlaying: false });
+  }
+  function handleDuration(event) {
+    update({ mediaDuration: resolveMediaDurationSeconds(event.currentTarget.duration) });
+  }
+  return {
+    onPlay: () => {
+      claimAudioPlayback(handleRef.current);
+      update({ isPlaying: true });
+    },
+    onPause: handleStop,
+    onEnded: handleStop,
+    onTimeUpdate: (event) => {
+      const position = event.currentTarget.currentTime;
+      update({ position, maxSeen: Math.max(state.maxSeen, position) });
+    },
+    onLoadedMetadata: (event) => {
+      allowRetry();
+      handleDuration(event);
+    },
+    onDurationChange: handleDuration,
+    onError: handleError
+  };
+}
+
+// src/participant/useParticipantAudioPlayerActions.ts
+function useParticipantAudioPlayerActions({ context, url, duration }) {
+  const { audioRef, handleRef, state, update } = context;
+  function handleToggle() {
+    const audio = audioRef.current;
+    if (!audio || !url) return;
+    if (!audio.paused) return audio.pause();
+    claimAudioPlayback(handleRef.current);
+    applyPlaybackRate(audio, state.rateIndex);
+    Promise.resolve(audio.play()).catch(() => update({ isPlaying: false }));
+  }
+  function seekTo(seconds) {
+    const audio = audioRef.current;
+    if (!audio || !url) return;
+    audio.currentTime = seconds;
+    update({ position: seconds, maxSeen: Math.max(state.maxSeen, seconds) });
+  }
+  function handleKeyDown(event) {
+    const position = audioRef.current?.currentTime ?? state.position;
+    const target = resolveSeekKeyTarget({ key: event.key, position, duration });
+    if (target === void 0) return;
+    event.preventDefault();
+    seekTo(target);
+  }
+  function handleRateClick() {
+    const rateIndex = nextRateIndex(state.rateIndex);
+    if (audioRef.current) applyPlaybackRate(audioRef.current, rateIndex);
+    update({ rateIndex });
+  }
+  return { handleToggle, seekTo, handleKeyDown, handleRateClick };
+}
+
+// src/participant/useParticipantAudioPlayer.ts
+function assignRef(target, element) {
+  if (typeof target === "function") target(element);
+  else if (target) target.current = element;
+}
+function useParticipantAudioPlayer({ url, durationMs, onSourceError, mediaRef }) {
+  const audioRef = useRef3(null);
+  const handleRef = useRef3({ pause: () => audioRef.current?.pause() });
+  const [state, setState2] = useState(INITIAL_PLAYER_STATE);
+  const update = useCallback((patch) => setState2((previous) => ({ ...previous, ...patch })), []);
+  const mediaEvents = useParticipantAudioMediaEvents({ context: { audioRef, handleRef, state, update }, url, onSourceError });
+  const duration = resolveServerDurationSeconds(durationMs) ?? state.mediaDuration;
+  const setMedia = useCallback(
+    (element) => {
+      audioRef.current = element;
+      assignRef(mediaRef, element);
+    },
+    [mediaRef]
+  );
+  useEffect3(() => {
+    const handle = handleRef.current;
+    return () => releaseAudioPlayback(handle);
+  }, []);
+  const actions = useParticipantAudioPlayerActions({ context: { audioRef, handleRef, state, update }, url, duration });
+  return {
+    state,
+    duration,
+    rate: PLAYBACK_RATES[state.rateIndex] ?? 1,
+    mediaProps: { ...mediaEvents, ref: setMedia },
+    ...actions
+  };
+}
+
+// src/participant/ParticipantAudioPlayer.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function fillRate(template, rate) {
+  return template.replace("{rate}", formatPlaybackRate(rate));
+}
+function ParticipantAudioPlayer({
+  labels,
+  url,
+  durationMs,
+  filename,
+  isPending = false,
+  isUnavailable = false,
+  onSourceError,
+  mediaRef
+}) {
+  const player = useParticipantAudioPlayer({ url, durationMs, onSourceError, mediaRef });
+  const { state, duration, rate } = player;
+  const position = Math.floor(state.position);
+  const hasFailed = isUnavailable || state.hasFailed;
+  return /* @__PURE__ */ jsxs6("div", { className: "cv-p-audio", role: "group", "aria-label": filename ? `${labels.audioPlayer}: ${filename}` : labels.audioPlayer, children: [
+    /* @__PURE__ */ jsx8(
+      AudioToggleButton,
+      {
+        label: state.isPlaying ? labels.pauseAudio : labels.playAudio,
+        isPlaying: state.isPlaying,
+        isPending,
+        isDisabled: hasFailed,
+        onToggle: player.handleToggle
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      AudioSeekRange,
+      {
+        label: labels.audioPosition,
+        max: resolveSeekMax({ duration, maxSeen: state.maxSeen, position }),
+        position,
+        valueText: formatPositionValueText({ template: labels.audioPositionValue, position, duration }),
+        isDisabled: hasFailed,
+        onSeek: player.seekTo,
+        onKeyDown: player.handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx8("span", { className: "cv-p-audio__time", children: `${formatAudioClock(position)} / ${formatAudioClock(duration)}` }),
+    /* @__PURE__ */ jsx8(AudioRateButton, { label: fillRate(labels.playbackRate, rate), text: formatPlaybackRate(rate), onClick: player.handleRateClick }),
+    /* @__PURE__ */ jsx8("audio", { className: "cv-p-audio__media", preload: "none", src: url, ...player.mediaProps }),
+    hasFailed ? /* @__PURE__ */ jsx8("span", { className: "cv-p-audio__error", children: labels.audioUnavailable }) : null
+  ] });
+}
+
+// src/participant/ParticipantRecorderParts.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function RecordAudioButton({ label, isBusy, disabled, onClick, buttonRef }) {
+  return /* @__PURE__ */ jsx9(
+    "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 : void 0,
+      disabled: disabled || isBusy,
+      onClick,
+      children: /* @__PURE__ */ jsx9(Mic, { size: 20, "aria-hidden": "true", focusable: "false" })
+    }
+  );
+}
+function RecorderError({ message }) {
+  return /* @__PURE__ */ jsx9("p", { className: "cv-p-composer__error", role: "alert", children: message });
+}
+function focusOnMount(element) {
+  element?.focus();
+}
+function DiscardButton({ labels, onDiscard }) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-button cv-p-recorder__discard",
+      "aria-label": labels.discardAudio,
+      "data-cv-tooltip": labels.discardAudio,
+      onClick: onDiscard,
+      children: /* @__PURE__ */ jsx9(Trash2, { size: 20, "aria-hidden": "true", focusable: "false" })
+    }
+  );
+}
+function RecordingGroup({ labels, clockText, onStop, onDiscard }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "cv-p-recorder", role: "group", "aria-label": labels.recordingInProgress, children: [
+    /* @__PURE__ */ jsx9(DiscardButton, { labels, onDiscard }),
+    /* @__PURE__ */ jsx9("span", { className: "cv-p-recorder__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx9("span", { className: "cv-p-recorder__elapsed", role: "timer", children: clockText }),
+    /* @__PURE__ */ jsx9(
+      "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,
+        children: /* @__PURE__ */ jsx9(Square, { size: 20, "aria-hidden": "true", focusable: "false" })
+      }
+    )
+  ] });
+}
+function ReviewGroup({ labels, url, audioRef, durationMs, onSend, onDiscard, disabled = false }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "cv-p-recorder cv-p-recorder--review", role: "group", "aria-label": labels.reviewAudio, children: [
+    /* @__PURE__ */ jsx9("p", { className: "cv-p-recorder__hint", "aria-hidden": "true", children: labels.reviewAudio }),
+    /* @__PURE__ */ jsx9(DiscardButton, { labels, onDiscard }),
+    /* @__PURE__ */ jsx9(ParticipantAudioPlayer, { labels, url, durationMs, mediaRef: audioRef }),
+    /* @__PURE__ */ jsx9(
+      "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,
+        onClick: onSend,
+        children: /* @__PURE__ */ jsx9(Send, { size: 20, "aria-hidden": "true", focusable: "false" })
+      }
+    )
+  ] });
+}
+
+// src/participant/ParticipantAudioRecorderView.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var ERROR_LABEL_BY_STATE = {
+  denied: "microphoneDenied",
+  unsupported: "recordingUnsupported",
+  empty: "audioEmpty",
+  tooLarge: "audioTooLarge"
+};
+function resolveRecorderErrorMessage(state, labels) {
+  return state in ERROR_LABEL_BY_STATE ? labels[ERROR_LABEL_BY_STATE[state]] : void 0;
+}
+function ParticipantAudioRecorderView(props) {
+  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 /* @__PURE__ */ jsx10(RecordingGroup, { labels, clockText, onStop: actions?.onStop, onDiscard: actions?.onDiscard });
+  }
+  if (state === "review") {
+    return /* @__PURE__ */ jsx10(ReviewGroup, { labels, url: review?.url, audioRef: review?.audioRef, durationMs: review?.durationMs, onSend: actions?.onSend, onDiscard: actions?.onDiscard, disabled });
+  }
+  const errorMessage = resolveRecorderErrorMessage(state, labels);
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    errorMessage ? /* @__PURE__ */ jsx10(RecorderError, { message: errorMessage }) : null,
+    /* @__PURE__ */ jsx10(RecordAudioButton, { label: labels.recordAudio, isBusy: state === "requesting", disabled, onClick: actions?.onStart })
+  ] });
+}
+
+// src/participant/useParticipantAudioRecorder.ts
+import { useCallback as useCallback3, useMemo } from "react";
+
+// src/participant/participantAudioCapture.ts
+function stopStream(stream) {
+  for (const track of stream.getTracks()) track.stop();
+}
+function formatRecordedFileName(moment, extension) {
+  const iso = moment.toISOString();
+  const day = iso.slice(0, 10).replace(/-/g, "");
+  const time = iso.slice(11, 19).replace(/:/g, "");
+  return `audio-${day}-${time}.${extension}`;
+}
+function buildRecordedFile(blob, format, moment = /* @__PURE__ */ new Date()) {
+  return new File([blob], formatRecordedFileName(moment, format.extension), { type: format.uploadMimeType });
+}
+function createMuteWatch(onPersistentMute) {
+  let timer;
+  const clear = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+  };
+  const arm = () => {
+    clear();
+    timer = setTimeout(onPersistentMute, MUTE_INTERRUPTION_DELAY_MS);
+  };
+  return { arm, clear };
+}
+function openCaptureSession({ stream, format, onInterrupt, onStopped }) {
+  const recorder = new MediaRecorder(stream, { mimeType: format.mimeType });
+  const chunks = [];
+  const startedAt = Date.now();
+  const muteWatch = createMuteWatch(onInterrupt);
+  for (const track of stream.getTracks()) {
+    track.onended = onInterrupt;
+    track.onmute = muteWatch.arm;
+    track.onunmute = muteWatch.clear;
+  }
+  recorder.ondataavailable = (event) => {
+    if (event.data.size > 0) chunks.push(event.data);
+  };
+  recorder.onerror = onInterrupt;
+  recorder.onstop = () => onStopped(new Blob(chunks, { type: format.uploadMimeType }), Date.now() - startedAt);
+  recorder.start();
+  let isStopRequested = false;
+  function requestStop() {
+    if (isStopRequested || recorder.state === "inactive") return;
+    isStopRequested = true;
+    recorder.stop();
+  }
+  function release() {
+    muteWatch.clear();
+    recorder.ondataavailable = null;
+    recorder.onerror = null;
+    recorder.onstop = null;
+    for (const track of stream.getTracks()) {
+      track.onended = null;
+      track.onmute = null;
+      track.onunmute = null;
+    }
+    stopStream(stream);
+  }
+  return { format, startedAt, requestStop, release };
+}
+
+// src/participant/useParticipantAudioRecorderCore.ts
+import { useCallback as useCallback2, useRef as useRef4, useState as useState2 } from "react";
+function useRecorderCore(limits) {
+  const [status, setStatus] = useState2("idle");
+  const [elapsedMs, setElapsedMs] = useState2(0);
+  const [recorded, setRecorded] = useState2();
+  const statusRef = useRef4("idle");
+  const limitsRef = useRef4(limits);
+  const tokenRef = useRef4(0);
+  const sessionRef = useRef4(void 0);
+  const recordedRef = useRef4(void 0);
+  const audioRef = useRef4(null);
+  limitsRef.current = limits;
+  const moveTo = useCallback2((event) => {
+    statusRef.current = reduceRecorderStatus(statusRef.current, event);
+    setStatus(statusRef.current);
+  }, []);
+  const releaseSession = useCallback2(() => {
+    sessionRef.current?.release();
+    sessionRef.current = void 0;
+  }, []);
+  const releaseRecorded = useCallback2(() => {
+    if (recordedRef.current) URL.revokeObjectURL(recordedRef.current.objectUrl);
+    recordedRef.current = void 0;
+    setRecorded(void 0);
+  }, []);
+  return {
+    status,
+    elapsedMs,
+    setElapsedMs,
+    recorded,
+    setRecorded,
+    limitsRef,
+    statusRef,
+    tokenRef,
+    sessionRef,
+    recordedRef,
+    audioRef,
+    moveTo,
+    releaseSession,
+    releaseRecorded
+  };
+}
+
+// src/participant/useParticipantAudioRecorderEffects.ts
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+var ELAPSED_TICK_MS = 250;
+function useRecorderInterruptionListeners(onInterruption) {
+  useEffect4(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") onInterruption();
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("pagehide", onInterruption);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("pagehide", onInterruption);
+    };
+  }, [onInterruption]);
+}
+function useRecordingClock({ status, maxDurationMs, sessionRef, setElapsedMs, stop }) {
+  useEffect4(() => {
+    if (status !== "recording") return void 0;
+    const startedAt = sessionRef.current?.startedAt ?? Date.now();
+    const tick = setInterval(() => setElapsedMs(Date.now() - startedAt), ELAPSED_TICK_MS);
+    const ceiling = setTimeout(stop, maxDurationMs);
+    return () => {
+      clearInterval(tick);
+      clearTimeout(ceiling);
+    };
+  }, [status, maxDurationMs, sessionRef, setElapsedMs, stop]);
+}
+function useRecorderLifecycle({ status, onCaptureChange, teardown }) {
+  const isCapturing = status === "requesting" || status === "recording" || status === "review";
+  const reportedRef = useRef5(false);
+  const onCaptureChangeRef = useRef5(onCaptureChange);
+  onCaptureChangeRef.current = onCaptureChange;
+  useEffect4(() => {
+    if (reportedRef.current === isCapturing) return;
+    reportedRef.current = isCapturing;
+    onCaptureChangeRef.current?.(isCapturing);
+  }, [isCapturing]);
+  useEffect4(
+    () => () => {
+      teardown();
+      if (!reportedRef.current) return;
+      reportedRef.current = false;
+      onCaptureChangeRef.current?.(false);
+    },
+    [teardown]
+  );
+}
+
+// src/participant/useParticipantAudioRecorder.ts
+function useRecorderFinalize(core) {
+  const { statusRef, sessionRef, recordedRef, limitsRef, setRecorded, moveTo, releaseSession } = core;
+  return useCallback3(
+    (blob, durationMs) => {
+      const format = sessionRef.current?.format;
+      if (statusRef.current !== "recording" || !format) return;
+      releaseSession();
+      const event = classifyCapture({ sizeBytes: blob.size, durationMs }, limitsRef.current);
+      if (event === "capturedReview") {
+        const file = buildRecordedFile(blob, format);
+        recordedRef.current = { file, objectUrl: URL.createObjectURL(file), durationMs };
+        setRecorded(recordedRef.current);
+      }
+      moveTo(event);
+    },
+    [statusRef, sessionRef, recordedRef, limitsRef, setRecorded, moveTo, releaseSession]
+  );
+}
+function useRecorderInterruption(core) {
+  const { statusRef, sessionRef, tokenRef, audioRef, moveTo } = core;
+  return useCallback3(() => {
+    const action = resolveInterruptionAction(statusRef.current);
+    if (action === "stop") sessionRef.current?.requestStop();
+    if (action === "pause") audioRef.current?.pause();
+    if (action === "cancel") {
+      tokenRef.current += 1;
+      moveTo("cancel");
+    }
+  }, [statusRef, sessionRef, tokenRef, audioRef, moveTo]);
+}
+function useRecorderStart(core, { onInterrupt, onStopped }) {
+  const { statusRef, tokenRef, sessionRef, setElapsedMs, moveTo } = core;
+  const beginRecording = useCallback3(
+    (stream, format) => {
+      try {
+        sessionRef.current = openCaptureSession({ stream, format, onInterrupt, onStopped });
+      } catch {
+        stopStream(stream);
+        moveTo("microphoneUnavailable");
+        return;
+      }
+      setElapsedMs(0);
+      moveTo("granted");
+    },
+    [sessionRef, setElapsedMs, onInterrupt, onStopped, moveTo]
+  );
+  return useCallback3(async () => {
+    if (!canStartRecording(statusRef.current)) return;
+    const token = tokenRef.current += 1;
+    moveTo("request");
+    const format = resolveRecordingFormat();
+    if (!format || !navigator.mediaDevices?.getUserMedia) return moveTo("microphoneUnavailable");
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch (error) {
+      if (token === tokenRef.current) moveTo(classifyMicrophoneError(error));
+      return;
+    }
+    if (token !== tokenRef.current) return stopStream(stream);
+    beginRecording(stream, format);
+  }, [statusRef, tokenRef, moveTo, beginRecording]);
+}
+function useRecorderActions(core) {
+  const { statusRef, tokenRef, sessionRef, recordedRef, moveTo, releaseSession, releaseRecorded } = core;
+  const stop = useCallback3(() => sessionRef.current?.requestStop(), [sessionRef]);
+  const discard = useCallback3(() => {
+    tokenRef.current += 1;
+    releaseSession();
+    releaseRecorded();
+    moveTo("cancel");
+  }, [tokenRef, moveTo, releaseRecorded, releaseSession]);
+  const confirm = useCallback3(() => {
+    if (statusRef.current !== "review") return void 0;
+    const file = recordedRef.current?.file;
+    releaseRecorded();
+    moveTo("cancel");
+    return file;
+  }, [statusRef, recordedRef, moveTo, releaseRecorded]);
+  const teardown = useCallback3(() => {
+    tokenRef.current += 1;
+    releaseSession();
+    if (recordedRef.current) URL.revokeObjectURL(recordedRef.current.objectUrl);
+    recordedRef.current = void 0;
+  }, [tokenRef, recordedRef, releaseSession]);
+  return { stop, discard, confirm, teardown };
+}
+function useParticipantAudioRecorder({ options, channelMaxBytes } = {}) {
+  const limits = useMemo(
+    () => resolveRecordingLimits({ options, channelMaxBytes }),
+    [options?.maxDurationMs, options?.maxSizeBytes, channelMaxBytes]
+  );
+  const core = useRecorderCore(limits);
+  const onInterrupt = useRecorderInterruption(core);
+  const onStopped = useRecorderFinalize(core);
+  const start = useRecorderStart(core, { onInterrupt, onStopped });
+  const { stop, discard, confirm, teardown } = useRecorderActions(core);
+  useRecorderInterruptionListeners(onInterrupt);
+  useRecordingClock({ status: core.status, maxDurationMs: limits.maxDurationMs, sessionRef: core.sessionRef, setElapsedMs: core.setElapsedMs, stop });
+  useRecorderLifecycle({ status: core.status, onCaptureChange: options?.onCaptureChange, teardown });
+  const { status, elapsedMs, recorded, audioRef } = core;
+  return { status, elapsedMs, limits, recorded, audioRef, start, stop, discard, confirm };
+}
+
+// src/participant/ParticipantComposerAudio.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function isCapturingStatus(status) {
+  return status === "recording" || status === "review";
+}
+function useRestoreMicrophoneFocus(status) {
+  const microphoneRef = useRef6(null);
+  const wasCapturingRef = useRef6(false);
+  useEffect5(() => {
+    const isCapturing = isCapturingStatus(status);
+    if (wasCapturingRef.current && !isCapturing) microphoneRef.current?.focus();
+    wasCapturingRef.current = isCapturing;
+  }, [status]);
+  return microphoneRef;
+}
+function RecorderLine({ recorder, labels, onSendAudio, disabled }) {
+  function handleSendAudio() {
+    const file = recorder.confirm();
+    if (file) onSendAudio(file);
+  }
+  return /* @__PURE__ */ jsx11(
+    ParticipantAudioRecorderView,
+    {
+      state: recorder.status,
+      elapsedMs: recorder.elapsedMs,
+      labels,
+      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 }
+    }
+  );
+}
+function ComposerAudioRow({ settings, labels, disabled, isDraftEmpty, sendButton, children }) {
+  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 /* @__PURE__ */ jsx11(RecorderLine, { recorder, labels, onSendAudio: settings.onSendAudio, disabled });
+  }
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    errorMessage ? /* @__PURE__ */ jsx11(RecorderError, { message: errorMessage }) : null,
+    /* @__PURE__ */ jsxs9("div", { className: "cv-p-composer__row", children: [
+      children,
+      isDraftEmpty ? /* @__PURE__ */ jsx11(
+        RecordAudioButton,
+        {
+          label: audioLabels.recordAudio,
+          isBusy: recorder.status === "requesting",
+          disabled,
+          onClick: () => void recorder.start(),
+          buttonRef: microphoneRef
+        }
+      ) : sendButton
+    ] })
+  ] });
+}
 
 // src/participant/ParticipantComposerControls.tsx
-import { useLayoutEffect, useRef as useRef2 } from "react";
-import { Paperclip, Send } from "lucide-react";
+import { useLayoutEffect, useRef as useRef7 } from "react";
+import { Paperclip, Send as Send2 } from "lucide-react";
 
 // src/participant/participantAutoGrow.ts
 function fitTextareaHeight(target) {
@@ -408,11 +1254,11 @@ function fitTextareaHeight(target) {
 }
 
 // src/participant/ParticipantComposerControls.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
-  const fileInputRef = useRef2(null);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
+  const fileInputRef = useRef7(null);
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsx12(
       "input",
       {
         ref: fileInputRef,
@@ -424,7 +1270,7 @@ function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
         onChange: onChosen
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -433,13 +1279,13 @@ function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
         "data-cv-tooltip": labels.attach,
         disabled,
         onClick: () => fileInputRef.current?.click(),
-        children: /* @__PURE__ */ jsx7(Paperclip, { size: 24, "aria-hidden": "true", focusable: "false" })
+        children: /* @__PURE__ */ jsx12(Paperclip, { size: 24, "aria-hidden": "true", focusable: "false" })
       }
     )
   ] });
 }
 function SendButton({ label, disabled }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       type: "submit",
@@ -447,16 +1293,16 @@ function SendButton({ label, disabled }) {
       "aria-label": label,
       "data-cv-tooltip": label,
       disabled,
-      children: /* @__PURE__ */ jsx7(Send, { size: 20, "aria-hidden": "true", focusable: "false" })
+      children: /* @__PURE__ */ jsx12(Send2, { size: 20, "aria-hidden": "true", focusable: "false" })
     }
   );
 }
 function MessageField({ value, label, placeholder, disabled, maxLength, onChange }) {
-  const fieldRef = useRef2(null);
+  const fieldRef = useRef7(null);
   useLayoutEffect(() => {
     if (fieldRef.current) fitTextareaHeight(fieldRef.current);
   }, [value]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx12(
     "textarea",
     {
       ref: fieldRef,
@@ -472,29 +1318,20 @@ function MessageField({ value, label, placeholder, disabled, maxLength, onChange
   );
 }
 
-// src/participant/participantFileValidation.ts
-function matchesAcceptedType(mimeType, acceptedTypes) {
-  return acceptedTypes.some(
-    (accepted) => accepted.endsWith("/*") ? mimeType.startsWith(accepted.slice(0, -1)) : mimeType === accepted
-  );
-}
-function rejectionOf(file, params) {
-  if (params.acceptedTypes && !matchesAcceptedType(file.type, params.acceptedTypes)) return "typeNotAccepted";
-  if (file.size > params.maxBytes) return "tooLarge";
-  return void 0;
-}
-function reduceFilesSelection(params) {
-  const files = [...params.current];
-  const rejected = [];
-  for (const file of params.incoming) {
-    const reason = rejectionOf(file, params);
-    if (reason === void 0) files.push(file);
-    else rejected.push({ file, reason });
-  }
-  return { files, rejected };
+// src/participant/participantAudioSupport.ts
+function resolveBrowserRecordingFormat() {
+  if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) return void 0;
+  return resolveRecordingFormat();
 }
-function maxBytesForChannel(channel = "app") {
-  return channelCapabilityFor(channel).attachments.maxBytes;
+function resolveComposerAudio(params) {
+  const { audioRecording, onSendAudio, channel = "app", acceptedTypes } = params;
+  if (!audioRecording || !onSendAudio) return void 0;
+  const capability = channelCapabilityFor(channel);
+  if (!capability.audio.records || !capability.attachments.accepted) return void 0;
+  const format = resolveBrowserRecordingFormat();
+  if (!format) return void 0;
+  if (acceptedTypes && !matchesAcceptedType(format.uploadMimeType, acceptedTypes)) return void 0;
+  return { audioRecording, channel, onSendAudio };
 }
 
 // src/participant/participantQuickReply.ts
@@ -505,18 +1342,18 @@ function applyQuickReply(currentText, replyText) {
 }
 
 // src/participant/ParticipantComposer.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function QuickReplyStrip({ quickReplies, labels, onPick }) {
-  return /* @__PURE__ */ jsx8("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx8("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
+  return /* @__PURE__ */ jsx13("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx13("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
 }
 function FileList({ files, labels, onRemove }) {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx8("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs7("li", { className: "cv-p-files__item", children: [
-    /* @__PURE__ */ jsx8("span", { className: "cv-p-files__name", children: file.name }),
-    /* @__PURE__ */ jsx8("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
-    /* @__PURE__ */ jsxs7("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, "data-cv-tooltip": labels.removeAttachment, onClick: () => onRemove(file), children: [
-      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xD7" }),
-      /* @__PURE__ */ jsx8("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
+  return /* @__PURE__ */ jsx13("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs11("li", { className: "cv-p-files__item", children: [
+    /* @__PURE__ */ jsx13("span", { className: "cv-p-files__name", children: file.name }),
+    /* @__PURE__ */ jsx13("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
+    /* @__PURE__ */ jsxs11("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, "data-cv-tooltip": labels.removeAttachment, onClick: () => onRemove(file), children: [
+      /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", children: "\xD7" }),
+      /* @__PURE__ */ jsx13("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
     ] })
   ] }, `${file.name}-${file.size}-${index}`)) });
 }
@@ -524,7 +1361,7 @@ function rejectionText(rejection, labels) {
   return rejection === "tooLarge" ? labels.attachmentTooLarge : labels.attachmentTypeNotAccepted;
 }
 function useFileSelection(props) {
-  const [rejection, setRejection] = useState(void 0);
+  const [rejection, setRejection] = useState3(void 0);
   const { files, onFilesChange, channel } = props;
   const maxBytes = maxBytesForChannel(channel);
   function handleFilesChosen(event) {
@@ -540,40 +1377,55 @@ function useFileSelection(props) {
   }
   return { rejection, handleFilesChosen, handleRemoveFile };
 }
+function ComposerRow({ composer, canSend, onFilesChosen }) {
+  const { value, onChange, files, labels, channel = "app", disabled = false } = composer;
+  const attach = channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx13(AttachControl, { labels, disabled, acceptedTypes: composer.acceptedTypes, onChosen: onFilesChosen }) : null;
+  const field = /* @__PURE__ */ jsx13(
+    MessageField,
+    {
+      value,
+      label: labels.messageInputLabel,
+      placeholder: labels.messageInputPlaceholder,
+      disabled,
+      maxLength: composer.maxLength,
+      onChange
+    }
+  );
+  const sendButton = /* @__PURE__ */ jsx13(SendButton, { label: labels.send, disabled: !canSend });
+  const audio = resolveComposerAudio(composer);
+  if (!audio) {
+    return /* @__PURE__ */ jsxs11("div", { className: "cv-p-composer__row", children: [
+      attach,
+      field,
+      sendButton
+    ] });
+  }
+  const isDraftEmpty = value.trim().length === 0 && files.length === 0;
+  return /* @__PURE__ */ jsxs11(ComposerAudioRow, { settings: audio, labels, disabled, isDraftEmpty, sendButton, children: [
+    attach,
+    field
+  ] });
+}
 function ParticipantComposer(props) {
-  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);
   function handleSubmit(event) {
     event.preventDefault();
     if (canSend) onSend();
   }
-  return /* @__PURE__ */ jsxs7("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
-    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx8(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
-    /* @__PURE__ */ jsx8(FileList, { files, labels, onRemove: handleRemoveFile }),
-    rejection ? /* @__PURE__ */ jsx8("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "cv-p-composer__row", children: [
-      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx8(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
-      /* @__PURE__ */ jsx8(
-        MessageField,
-        {
-          value,
-          label: labels.messageInputLabel,
-          placeholder: labels.messageInputPlaceholder,
-          disabled,
-          maxLength: props.maxLength,
-          onChange
-        }
-      ),
-      /* @__PURE__ */ jsx8(SendButton, { label: labels.send, disabled: !canSend })
-    ] })
+  return /* @__PURE__ */ jsxs11("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
+    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx13(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
+    /* @__PURE__ */ jsx13(FileList, { files, labels, onRemove: handleRemoveFile }),
+    rejection ? /* @__PURE__ */ jsx13("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
+    /* @__PURE__ */ jsx13(ComposerRow, { composer: props, canSend, onFilesChosen: handleFilesChosen })
   ] });
 }
 
 // src/participant/useSuppressTouchTooltips.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useSuppressTouchTooltips(rootRef) {
-  useEffect2(() => {
+  useEffect6(() => {
     const root = rootRef.current;
     if (!root) return void 0;
     let isTouching = false;
@@ -603,7 +1455,7 @@ function useSuppressTouchTooltips(rootRef) {
 }
 
 // src/participant/ParticipantCopyAnnouncer.tsx
-import { createContext, useCallback, useContext, useEffect as useEffect3, useReducer, useRef as useRef3 } from "react";
+import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect7, useReducer, useRef as useRef8 } from "react";
 
 // src/participant/participantCopyAnnouncement.ts
 var INITIAL_COPY_ANNOUNCEMENT = { text: "", tick: 0 };
@@ -623,7 +1475,7 @@ function resolveLiveText(params) {
 }
 
 // src/participant/ParticipantCopyAnnouncer.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ANNOUNCEMENT_MS = 3e3;
 var AnnounceContext = createContext(() => void 0);
 var AnnouncementContext = createContext(INITIAL_COPY_ANNOUNCEMENT);
@@ -632,20 +1484,20 @@ function useAnnounceCopy() {
 }
 function ParticipantCopyAnnouncer({ children }) {
   const [announcement, dispatch] = useReducer(copyAnnouncementReducer, INITIAL_COPY_ANNOUNCEMENT);
-  const announce = useCallback((text) => dispatch({ type: "announce", text }), []);
-  useEffect3(() => {
+  const announce = useCallback4((text) => dispatch({ type: "announce", text }), []);
+  useEffect7(() => {
     if (announcement.text === "") return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), ANNOUNCEMENT_MS);
     return () => clearTimeout(timer);
   }, [announcement.tick, announcement.text]);
-  return /* @__PURE__ */ jsx9(AnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx9(AnnouncementContext.Provider, { value: announcement, children }) });
+  return /* @__PURE__ */ jsx14(AnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx14(AnnouncementContext.Provider, { value: announcement, children }) });
 }
 function ParticipantThreadLive({ notice }) {
   const copy = useContext(AnnouncementContext);
-  const baselineNotice = useRef3(void 0);
+  const baselineNotice = useRef8(void 0);
   const resolution = resolveLiveText({ copy, notice, baselineNotice: baselineNotice.current });
   baselineNotice.current = resolution.baselineNotice;
-  return /* @__PURE__ */ jsx9("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: resolution.text });
+  return /* @__PURE__ */ jsx14("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: resolution.text });
 }
 
 // src/participant/ParticipantScrollToLatest.tsx
@@ -658,7 +1510,7 @@ function focusScrollerOf(button) {
 }
 
 // src/participant/ParticipantScrollToLatest.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function ParticipantScrollToLatest({
   label,
   isAwayFromBottom,
@@ -668,7 +1520,7 @@ function ParticipantScrollToLatest({
 }) {
   const { isVisible, badge } = resolveScrollToLatestView({ isAwayFromBottom, newMessagesCount, hasMessages });
   if (!isVisible || onClick === void 0) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__latest", children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx15("div", { className: "cv-p-thread__latest", children: /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
@@ -680,8 +1532,8 @@ function ParticipantScrollToLatest({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx10(ChevronDown, { size: 24, "aria-hidden": "true", focusable: "false" }),
-        badge ? /* @__PURE__ */ jsx10("span", { className: "cv-p-thread__latest-badge", "aria-hidden": "true", children: badge }) : null
+        /* @__PURE__ */ jsx15(ChevronDown, { size: 24, "aria-hidden": "true", focusable: "false" }),
+        badge ? /* @__PURE__ */ jsx15("span", { className: "cv-p-thread__latest-badge", "aria-hidden": "true", children: badge }) : null
       ]
     }
   ) });
@@ -727,13 +1579,13 @@ function shouldShowAvatar({ previousAuthor, author, isMine }) {
 }
 
 // src/participant/ParticipantAuthorAvatar.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function ParticipantAuthorAvatar({ name, render }) {
   const fromHost = render?.({ name });
   const hasHostContent = !(fromHost == null || fromHost === false || fromHost === "");
   const initials = authorInitials(name);
-  const fallback = initials ?? /* @__PURE__ */ jsx11(User, { size: 16, "aria-hidden": true });
-  return /* @__PURE__ */ jsx11("span", { className: "cv-p-avatar", "aria-hidden": "true", children: hasHostContent ? fromHost : fallback });
+  const fallback = initials ?? /* @__PURE__ */ jsx16(User, { size: 16, "aria-hidden": true });
+  return /* @__PURE__ */ jsx16("span", { className: "cv-p-avatar", "aria-hidden": "true", children: hasHostContent ? fromHost : fallback });
 }
 
 // src/participant/participantDay.ts
@@ -745,17 +1597,112 @@ function toDateTimeAttribute(date) {
 }
 
 // src/participant/ParticipantDayDivider.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function ParticipantDayDivider({ day, locale }) {
   const label = day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" });
-  return /* @__PURE__ */ jsx12("div", { className: "cv-p-day", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx12("time", { className: "cv-p-day__label", dateTime: toDateTimeAttribute(day), children: label }) });
+  return /* @__PURE__ */ jsx17("div", { className: "cv-p-day", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx17("time", { className: "cv-p-day__label", dateTime: toDateTimeAttribute(day), children: label }) });
 }
 
 // src/participant/ParticipantMessageBubble.tsx
 import { useId as useId3 } from "react";
 
 // src/participant/ParticipantAttachmentItem.tsx
-import { useEffect as useEffect4, useState as useState2 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
+
+// src/participant/ParticipantAudioTranscription.tsx
+import { useState as useState5 } from "react";
+
+// src/participant/useTranscriptionOverflow.ts
+import { useEffect as useEffect8, useRef as useRef9, useState as useState4 } from "react";
+function useTranscriptionOverflow(text, isExpanded) {
+  const textRef = useRef9(null);
+  const [isOverflowing, setIsOverflowing] = useState4(false);
+  useEffect8(() => {
+    const element = textRef.current;
+    if (!element || isExpanded) return void 0;
+    const measure = () => setIsOverflowing(element.scrollHeight > element.clientHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [text, isExpanded]);
+  return { textRef, isOverflowing };
+}
+
+// src/participant/useTranscriptionReadyAnnouncement.ts
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+function useTranscriptionReadyAnnouncement({ attachmentId, status, text }) {
+  const announce = useAnnounceCopy();
+  const previous = useRef10({ attachmentId, status });
+  useEffect9(() => {
+    const before = previous.current;
+    previous.current = { attachmentId, status };
+    if (before.attachmentId !== attachmentId) return;
+    if (before.status === "pending" && status === "ready") announce(text);
+  }, [announce, attachmentId, status, text]);
+}
+
+// src/participant/ParticipantAudioTranscription.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var MILLISECONDS_PER_MINUTE = 6e4;
+function resolveTooLongMinutes(transcription) {
+  if (transcription?.status !== "failed" || transcription.reason !== "too_long") return void 0;
+  if (typeof transcription.maxDurationMs !== "number") return void 0;
+  const minutes = Math.floor(transcription.maxDurationMs / MILLISECONDS_PER_MINUTE);
+  return minutes >= 1 ? minutes : void 0;
+}
+function dropUnusableTranscription(transcription) {
+  if (transcription?.status === "ready" && typeof transcription.text !== "string") return void 0;
+  return transcription;
+}
+function ParticipantAudioTranscription({ attachmentId, transcription: received, labels }) {
+  const transcription = dropUnusableTranscription(received);
+  useTranscriptionReadyAnnouncement({
+    attachmentId,
+    status: transcription?.status,
+    text: labels.transcriptionReady
+  });
+  if (transcription?.status === "pending") {
+    return /* @__PURE__ */ jsx18("p", { className: "cv-p-transcription cv-p-transcription--pending", children: labels.transcribing });
+  }
+  if (transcription?.status === "ready") return /* @__PURE__ */ jsx18(ReadyTranscriptionBlock, { transcription, labels });
+  const minutes = resolveTooLongMinutes(transcription);
+  if (minutes === void 0) return null;
+  return /* @__PURE__ */ jsx18("p", { className: "cv-p-transcription cv-p-transcription--too-long", children: labels.transcriptionTooLong.replace("{minutes}", String(minutes)) });
+}
+function ReadyTranscriptionBlock({ transcription, labels }) {
+  const [isExpanded, setIsExpanded] = useState5(false);
+  const { textRef, isOverflowing } = useTranscriptionOverflow(transcription.text, isExpanded);
+  const hasText = transcription.text !== "";
+  const showsToggle = hasText && (isOverflowing || isExpanded);
+  return /* @__PURE__ */ jsxs13("div", { className: "cv-p-transcription", children: [
+    /* @__PURE__ */ jsx18("p", { className: "cv-p-transcription__notice", children: labels.machineTranscription }),
+    hasText ? /* @__PURE__ */ jsx18(
+      "p",
+      {
+        ref: textRef,
+        className: "cv-p-transcription__text",
+        lang: transcription.language,
+        "data-expanded": isExpanded ? "true" : void 0,
+        children: transcription.text
+      }
+    ) : /* @__PURE__ */ jsx18("p", { className: "cv-p-transcription__empty", children: labels.emptyTranscription }),
+    showsToggle ? /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        className: "cv-p-transcription__toggle",
+        "aria-expanded": isExpanded,
+        onClick: () => setIsExpanded((current) => !current),
+        children: isExpanded ? labels.collapseTranscription : labels.showFullTranscription
+      }
+    ) : null
+  ] });
+}
+
+// src/participant/useStableAttachmentUrl.ts
+import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef11, useState as useState6 } from "react";
 
 // src/participant/participantAttachmentUrl.ts
 var SAFE_ATTACHMENT_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "blob:"]);
@@ -767,12 +1714,79 @@ function isSafeAttachmentUrl(url) {
   }
 }
 
+// src/participant/useStableAttachmentUrl.ts
+var ATTACHMENT_URL_RETRY_DELAY_MS = 1e3;
+var PENDING_STATE = { status: "pending", url: void 0 };
+async function resolveSafely({ attachment, resolveAttachmentUrl }) {
+  try {
+    const resolved = await resolveAttachmentUrl(attachment, "inline");
+    return isSafeAttachmentUrl(resolved) ? resolved.trim() : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function useStableAttachmentUrl(params) {
+  const latest = useRef11(params);
+  const currentId = useRef11(params.attachment.id);
+  const [state, setState2] = useState6(PENDING_STATE);
+  const { id } = params.attachment;
+  useEffect10(() => {
+    latest.current = params;
+  });
+  useEffect10(() => {
+    currentId.current = id;
+    setState2(PENDING_STATE);
+    let retryTimer;
+    const settle = (url) => {
+      if (currentId.current === id) setState2(url ? { status: "ready", url } : { status: "failed", url: void 0 });
+    };
+    resolveSafely(latest.current).then((url) => {
+      if (url || currentId.current !== id) return settle(url);
+      retryTimer = setTimeout(() => void resolveSafely(latest.current).then(settle), ATTACHMENT_URL_RETRY_DELAY_MS);
+    });
+    return () => {
+      currentId.current = "";
+      clearTimeout(retryTimer);
+    };
+  }, [id]);
+  const resolveAgain = useCallback5(async () => {
+    const requestedId = currentId.current;
+    const url = await resolveSafely(latest.current);
+    if (url && currentId.current === requestedId) setState2({ status: "ready", url });
+    return url;
+  }, []);
+  return { ...state, resolveAgain };
+}
+
+// src/participant/ParticipantAudioAttachment.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function ParticipantAudioAttachment({ attachment, resolveAttachmentUrl, labels }) {
+  const source = useStableAttachmentUrl({ attachment, resolveAttachmentUrl });
+  const audioLabels = resolveParticipantAudioLabels(labels);
+  return /* @__PURE__ */ jsxs14("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
+    /* @__PURE__ */ jsx19(
+      ParticipantAudioPlayer,
+      {
+        labels: audioLabels,
+        url: source.url,
+        durationMs: attachment.durationMs,
+        filename: attachment.filename,
+        isPending: source.status === "pending",
+        isUnavailable: source.status === "failed",
+        onSourceError: source.resolveAgain
+      }
+    ),
+    /* @__PURE__ */ jsx19("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+    /* @__PURE__ */ jsx19(ParticipantAudioTranscription, { attachmentId: attachment.id, transcription: attachment.transcription, labels: audioLabels })
+  ] });
+}
+
 // src/participant/ParticipantAttachmentItem.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function useAttachmentUrl(attachment, resolveAttachmentUrl) {
-  const [url, setUrl] = useState2(void 0);
+  const [url, setUrl] = useState7(void 0);
   const disposition = attachment.kind === "document" ? "attachment" : "inline";
-  useEffect4(() => {
+  useEffect11(() => {
     let isCurrent = true;
     resolveAttachmentUrl(attachment, disposition).then(
       (resolved) => {
@@ -788,21 +1802,19 @@ function useAttachmentUrl(attachment, resolveAttachmentUrl) {
   }, [attachment, disposition, resolveAttachmentUrl]);
   return url;
 }
-function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
+function ParticipantAttachmentItem(props) {
+  if (props.attachment.kind === "audio") return /* @__PURE__ */ jsx20(ParticipantAudioAttachment, { ...props });
+  return /* @__PURE__ */ jsx20(ParticipantFileAttachment, { ...props });
+}
+function ParticipantFileAttachment({ attachment, resolveAttachmentUrl, labels }) {
   const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
   if (attachment.kind === "image") {
-    return /* @__PURE__ */ jsxs9("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
-      url ? /* @__PURE__ */ jsx13("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
-      /* @__PURE__ */ jsx13("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
+    return /* @__PURE__ */ jsxs15("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
+      url ? /* @__PURE__ */ jsx20("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
+      /* @__PURE__ */ jsx20("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
     ] });
   }
-  if (attachment.kind === "audio") {
-    return /* @__PURE__ */ jsxs9("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
-      /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-      /* @__PURE__ */ jsx13("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs15(
     "a",
     {
       className: "cv-p-attachment cv-p-attachment--document",
@@ -810,15 +1822,15 @@ function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels })
       download: attachment.filename,
       "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
       children: [
-        /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-        /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
+        /* @__PURE__ */ jsx20("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+        /* @__PURE__ */ jsx20("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
       ]
     }
   );
 }
 
 // src/participant/ParticipantBubbleStatus.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function statusText(status, labels) {
   const byStatus = {
     sending: labels.statusSending,
@@ -835,13 +1847,13 @@ function OwnStatus({ status, labels, onRetry }) {
   const isVisibleText = status === "sending" || status === "queued" || status === "failed";
   const text = status === "failed" ? labels.statusFailedShort : statusText(status, labels);
   const isTextVisible = isVisibleText && !(status === "failed" && onRetry);
-  return /* @__PURE__ */ jsxs10("span", { className: "cv-p-bubble__status", children: [
-    /* @__PURE__ */ jsx14(StatusTicks, { status: ticksStatus, appearance: "stylesheet", title: isTextVisible ? void 0 : text }),
-    /* @__PURE__ */ jsx14("span", { className: isTextVisible ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
+  return /* @__PURE__ */ jsxs16("span", { className: "cv-p-bubble__status", children: [
+    /* @__PURE__ */ jsx21(StatusTicks, { status: ticksStatus, appearance: "stylesheet", title: isTextVisible ? void 0 : text }),
+    /* @__PURE__ */ jsx21("span", { className: isTextVisible ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
   ] });
 }
 function RetryButton({ labels, onRetry, describedBy }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -850,7 +1862,7 @@ function RetryButton({ labels, onRetry, describedBy }) {
       "aria-describedby": describedBy,
       "data-cv-tooltip": labels.statusFailed,
       onClick: onRetry,
-      children: /* @__PURE__ */ jsx14("span", { className: "cv-p-failed-retry__icon", children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx14("path", { d: "M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) })
+      children: /* @__PURE__ */ jsx21("span", { className: "cv-p-failed-retry__icon", children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx21("path", { d: "M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) })
     }
   );
 }
@@ -859,7 +1871,7 @@ function RetryButton({ labels, onRetry, describedBy }) {
 import { useId as useId2 } from "react";
 
 // src/participant/ParticipantFailedMenuList.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard }) {
   function runAndClose(action) {
     return () => {
@@ -868,9 +1880,9 @@ function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard
     };
   }
   const className = `cv-p-failed-menu__list${menu.placement === "below" ? " cv-p-failed-menu__list--below" : ""}`;
-  return /* @__PURE__ */ jsxs11("div", { role: "menu", "aria-labelledby": labelledBy, ref: menu.menuRef, className, onKeyDown: menu.handleMenuKeyDown, children: [
-    onEdit ? /* @__PURE__ */ jsx15("button", { type: "button", role: "menuitem", tabIndex: -1, className: "cv-p-failed-menu__item", onClick: runAndClose(onEdit), children: labels.edit }) : null,
-    onDiscard ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs17("div", { role: "menu", "aria-labelledby": labelledBy, ref: menu.menuRef, className, onKeyDown: menu.handleMenuKeyDown, children: [
+    onEdit ? /* @__PURE__ */ jsx22("button", { type: "button", role: "menuitem", tabIndex: -1, className: "cv-p-failed-menu__item", onClick: runAndClose(onEdit), children: labels.edit }) : null,
+    onDiscard ? /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -885,7 +1897,7 @@ function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard
 }
 
 // src/participant/useParticipantFailedMenu.ts
-import { useReducer as useReducer2, useRef as useRef4 } from "react";
+import { useReducer as useReducer2, useRef as useRef12 } from "react";
 
 // src/participant/participantFailedMenuState.ts
 var CLOSED_FAILED_MENU = { isOpen: false, initialFocus: "first" };
@@ -933,10 +1945,10 @@ function handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }) {
 }
 
 // src/participant/useFailedMenuEffects.ts
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect2, useState as useState8 } from "react";
 var SCROLLER_SELECTOR2 = ".cv-p-thread__scroll";
 function useFailedMenuInitialFocus(state, menuRef) {
-  useEffect5(() => {
+  useEffect12(() => {
     if (!state.isOpen) return;
     const items = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
     const target = state.initialFocus === "last" ? items[items.length - 1] : items[0];
@@ -944,7 +1956,7 @@ function useFailedMenuInitialFocus(state, menuRef) {
   }, [state, menuRef]);
 }
 function useFailedMenuOutsideClose(isOpen, containerRef, dispatch) {
-  useEffect5(() => {
+  useEffect12(() => {
     if (!isOpen) return;
     function handlePointerDown(event) {
       if (event.target instanceof Node && containerRef.current?.contains(event.target)) return;
@@ -955,7 +1967,7 @@ function useFailedMenuOutsideClose(isOpen, containerRef, dispatch) {
   }, [isOpen, containerRef, dispatch]);
 }
 function useFailedMenuPlacement(isOpen, { triggerRef, menuRef }) {
-  const [placement, setPlacement] = useState3("above");
+  const [placement, setPlacement] = useState8("above");
   useLayoutEffect2(() => {
     const trigger = triggerRef.current;
     const menu = menuRef.current;
@@ -976,9 +1988,9 @@ function useFailedMenuPlacement(isOpen, { triggerRef, menuRef }) {
 // src/participant/useParticipantFailedMenu.ts
 function useParticipantFailedMenu() {
   const [state, dispatch] = useReducer2(failedMenuReducer, CLOSED_FAILED_MENU);
-  const containerRef = useRef4(null);
-  const triggerRef = useRef4(null);
-  const menuRef = useRef4(null);
+  const containerRef = useRef12(null);
+  const triggerRef = useRef12(null);
+  const menuRef = useRef12(null);
   useFailedMenuInitialFocus(state, menuRef);
   useFailedMenuOutsideClose(state.isOpen, containerRef, dispatch);
   const placement = useFailedMenuPlacement(state.isOpen, { triggerRef, menuRef });
@@ -1007,14 +2019,14 @@ function useParticipantFailedMenu() {
 }
 
 // src/participant/ParticipantFailedMenu.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function ParticipantFailedMenu({ labels, onEdit, onDiscard }) {
   const menu = useParticipantFailedMenu();
   const triggerId = useId2();
   if (!onEdit && !onDiscard) return null;
   const label = labels.messageOptions ?? DEFAULT_MESSAGE_OPTIONS_LABEL;
-  return /* @__PURE__ */ jsxs12("span", { className: "cv-p-failed-menu", ref: menu.containerRef, onBlur: menu.handleBlur, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs18("span", { className: "cv-p-failed-menu", ref: menu.containerRef, onBlur: menu.handleBlur, children: [
+    /* @__PURE__ */ jsx23(
       "button",
       {
         type: "button",
@@ -1027,21 +2039,21 @@ function ParticipantFailedMenu({ labels, onEdit, onDiscard }) {
         "data-cv-tooltip": menu.state.isOpen ? void 0 : label,
         onClick: menu.handleTriggerClick,
         onKeyDown: menu.handleTriggerKeyDown,
-        children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u22EF" })
+        children: /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", children: "\u22EF" })
       }
     ),
-    menu.state.isOpen ? /* @__PURE__ */ jsx16(ParticipantFailedMenuList, { menu, labelledBy: triggerId, labels, onEdit, onDiscard }) : null
+    menu.state.isOpen ? /* @__PURE__ */ jsx23(ParticipantFailedMenuList, { menu, labelledBy: triggerId, labels, onEdit, onDiscard }) : null
   ] });
 }
 
 // src/participant/ParticipantMessageText.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/participant/ParticipantCopyableToken.tsx
 import { Check, Copy } from "lucide-react";
 
 // src/participant/useParticipantCopyFeedback.ts
-import { useEffect as useEffect6, useReducer as useReducer3 } from "react";
+import { useEffect as useEffect13, useReducer as useReducer3 } from "react";
 
 // src/participant/participantProtocolCopy.ts
 async function copyProtocolToClipboard(protocol, clipboard) {
@@ -1065,7 +2077,7 @@ function useParticipantCopyFeedback() {
   const [state, dispatch] = useReducer3(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
   const announce = useAnnounceCopy();
   const { isCopied, copyCount } = state;
-  useEffect6(() => {
+  useEffect13(() => {
     if (!isCopied) return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_FEEDBACK_MS);
     return () => clearTimeout(timer);
@@ -1080,10 +2092,10 @@ function useParticipantCopyFeedback() {
 }
 
 // src/participant/ParticipantCopyableToken.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function ParticipantCopyableToken({ copyKind, value, labels }) {
   const { isCopied, copy } = useParticipantCopyFeedback();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
       type: "button",
@@ -1092,8 +2104,8 @@ function ParticipantCopyableToken({ copyKind, value, labels }) {
       onClick: () => copy(value, labels.valueCopied),
       children: [
         value,
-        isCopied ? /* @__PURE__ */ jsxs13("span", { className: "cv-p-copyable__done", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx17(Check, { size: 12, "aria-hidden": true }),
+        isCopied ? /* @__PURE__ */ jsxs19("span", { className: "cv-p-copyable__done", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx24(Check, { size: 12, "aria-hidden": true }),
           " ",
           labels.valueCopied
         ] }) : null
@@ -1103,7 +2115,7 @@ function ParticipantCopyableToken({ copyKind, value, labels }) {
 }
 function ParticipantLinkCopyButton({ value, labels }) {
   const { isCopied, copy } = useParticipantCopyFeedback();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -1111,26 +2123,26 @@ function ParticipantLinkCopyButton({ value, labels }) {
       "aria-label": `${labels.copyValue} ${value}`,
       "data-cv-tooltip": labels.copyValue,
       onClick: () => copy(value, labels.valueCopied),
-      children: isCopied ? /* @__PURE__ */ jsx17(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx17(Copy, { size: 14, "aria-hidden": true })
+      children: isCopied ? /* @__PURE__ */ jsx24(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx24(Copy, { size: 14, "aria-hidden": true })
     }
   );
 }
 
 // src/participant/ParticipantMessageNodes.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var LINK_REL = "noopener noreferrer nofollow ugc";
 function renderLink(node, labels, key) {
   const isExternal = /^https?:/i.test(node.href);
-  return /* @__PURE__ */ jsxs14("span", { className: "cv-p-text__link-group", children: [
-    /* @__PURE__ */ jsxs14("a", { className: "cv-p-text__link", href: node.href, rel: LINK_REL, target: isExternal ? "_blank" : void 0, children: [
+  return /* @__PURE__ */ jsxs20("span", { className: "cv-p-text__link-group", children: [
+    /* @__PURE__ */ jsxs20("a", { className: "cv-p-text__link", href: node.href, rel: LINK_REL, target: isExternal ? "_blank" : void 0, children: [
       node.label,
-      isExternal ? /* @__PURE__ */ jsxs14("span", { className: "cv-p-sr-only", children: [
+      isExternal ? /* @__PURE__ */ jsxs20("span", { className: "cv-p-sr-only", children: [
         " (",
         labels.externalLinkHint,
         ")"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx18(ParticipantLinkCopyButton, { value: node.href, labels })
+    /* @__PURE__ */ jsx25(ParticipantLinkCopyButton, { value: node.href, labels })
   ] }, key);
 }
 function renderInlineNodes(nodes, labels) {
@@ -1139,17 +2151,17 @@ function renderInlineNodes(nodes, labels) {
       case "text":
         return node.value;
       case "strong":
-        return /* @__PURE__ */ jsx18("strong", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx25("strong", { children: renderInlineNodes(node.children, labels) }, key);
       case "em":
-        return /* @__PURE__ */ jsx18("em", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx25("em", { children: renderInlineNodes(node.children, labels) }, key);
       case "del":
-        return /* @__PURE__ */ jsx18("del", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx25("del", { children: renderInlineNodes(node.children, labels) }, key);
       case "code":
-        return /* @__PURE__ */ jsx18("code", { className: "cv-p-text__code", children: node.value }, key);
+        return /* @__PURE__ */ jsx25("code", { className: "cv-p-text__code", children: node.value }, key);
       case "link":
         return renderLink(node, labels, key);
       case "copyable":
-        return /* @__PURE__ */ jsx18(ParticipantCopyableToken, { copyKind: node.copyKind, value: node.value, labels }, key);
+        return /* @__PURE__ */ jsx25(ParticipantCopyableToken, { copyKind: node.copyKind, value: node.value, labels }, key);
     }
   });
 }
@@ -1535,41 +2547,41 @@ function startsFenceLine(line) {
 }
 
 // src/participant/ParticipantMessageText.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function renderBlock(block, labels, key) {
-  if (block.kind === "paragraph") return /* @__PURE__ */ jsx19("span", { children: renderInlineNodes(block.children, labels) }, key);
+  if (block.kind === "paragraph") return /* @__PURE__ */ jsx26("span", { children: renderInlineNodes(block.children, labels) }, key);
   if (block.kind === "pre") {
-    return /* @__PURE__ */ jsx19("pre", { className: "cv-p-text__pre", children: /* @__PURE__ */ jsx19("code", { children: block.value }) }, key);
+    return /* @__PURE__ */ jsx26("pre", { className: "cv-p-text__pre", children: /* @__PURE__ */ jsx26("code", { children: block.value }) }, key);
   }
   if (block.kind === "quote") {
-    return /* @__PURE__ */ jsx19("blockquote", { className: "cv-p-text__quote", children: renderInlineNodes(block.children, labels) }, key);
+    return /* @__PURE__ */ jsx26("blockquote", { className: "cv-p-text__quote", children: renderInlineNodes(block.children, labels) }, key);
   }
-  const items = block.items.map((item, index) => /* @__PURE__ */ jsx19("li", { children: renderInlineNodes(item, labels) }, index));
+  const items = block.items.map((item, index) => /* @__PURE__ */ jsx26("li", { children: renderInlineNodes(item, labels) }, index));
   if (block.ordered) {
-    return /* @__PURE__ */ jsx19("ol", { className: "cv-p-text__list", start: block.start === 1 ? void 0 : block.start, children: items }, key);
+    return /* @__PURE__ */ jsx26("ol", { className: "cv-p-text__list", start: block.start === 1 ? void 0 : block.start, children: items }, key);
   }
-  return /* @__PURE__ */ jsx19("ul", { className: "cv-p-text__list", children: items }, key);
+  return /* @__PURE__ */ jsx26("ul", { className: "cv-p-text__list", children: items }, key);
 }
 function ParticipantMessageText({ text, labels, id }) {
-  const blocks = useMemo(() => parseParticipantMessage(text), [text]);
+  const blocks = useMemo2(() => parseParticipantMessage(text), [text]);
   if (blocks.length === 0) return null;
   const [only] = blocks;
   const children = blocks.length === 1 && only?.kind === "paragraph" ? renderInlineNodes(only.children, labels) : blocks.map((block, key) => renderBlock(block, labels, key));
-  return /* @__PURE__ */ jsx19("div", { className: "cv-p-text", id, children });
+  return /* @__PURE__ */ jsx26("div", { className: "cv-p-text", id, children });
 }
 
 // src/participant/ParticipantBubbleBody.tsx
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function BubbleHeading({ content, labels }) {
-  if (content.isMine) return /* @__PURE__ */ jsx20("span", { className: "cv-p-sr-only", children: labels.me });
+  if (content.isMine) return /* @__PURE__ */ jsx27("span", { className: "cv-p-sr-only", children: labels.me });
   if (!content.authorName) return null;
-  return /* @__PURE__ */ jsx20("span", { className: "cv-p-bubble__author", children: content.authorName });
+  return /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
 function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
-  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-    /* @__PURE__ */ jsx20(BubbleHeading, { content, labels }),
-    content.text ? /* @__PURE__ */ jsx20(ParticipantMessageText, { text: content.text, labels, id: textId }) : null,
-    content.attachments.map((attachment) => /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx27(BubbleHeading, { content, labels }),
+    content.text ? /* @__PURE__ */ jsx27(ParticipantMessageText, { text: content.text, labels, id: textId }) : null,
+    content.attachments.map((attachment) => /* @__PURE__ */ jsx27(
       ParticipantAttachmentItem,
       {
         attachment,
@@ -1578,11 +2590,11 @@ function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl,
       },
       attachment.id
     )),
-    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx20("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
-    /* @__PURE__ */ jsxs15("span", { className: "cv-p-bubble__meta", children: [
-      /* @__PURE__ */ jsx20("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
-      ownStatus ? /* @__PURE__ */ jsx20(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
-      ownStatus === "failed" ? /* @__PURE__ */ jsx20(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
+    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx27("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
+    /* @__PURE__ */ jsxs21("span", { className: "cv-p-bubble__meta", children: [
+      /* @__PURE__ */ jsx27("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
+      ownStatus ? /* @__PURE__ */ jsx27(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
+      ownStatus === "failed" ? /* @__PURE__ */ jsx27(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
     ] })
   ] });
 }
@@ -1649,7 +2661,7 @@ function resolveOwnMessageStatus(params) {
 }
 
 // src/participant/ParticipantMessageBubble.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function describeItem(item, perspective) {
   if (item.kind === "server") {
     const { message } = item;
@@ -1686,13 +2698,13 @@ function ParticipantMessageBubble(props) {
   const ownStatus = content.isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
   const isFailed = ownStatus === "failed";
   const canRetry = isFailed && onRetry !== void 0;
-  const bubble = /* @__PURE__ */ jsxs16("div", { className: bubbleClassName(content.isMine, tail, isFailed), children: [
-    canRetry ? /* @__PURE__ */ jsx21(RetryButton, { labels, onRetry, describedBy: textId }) : null,
-    /* @__PURE__ */ jsx21(BubbleBody, { ...props, content, ownStatus, textId: canRetry ? textId : void 0 })
+  const bubble = /* @__PURE__ */ jsxs22("div", { className: bubbleClassName(content.isMine, tail, isFailed), children: [
+    canRetry ? /* @__PURE__ */ jsx28(RetryButton, { labels, onRetry, describedBy: textId }) : null,
+    /* @__PURE__ */ jsx28(BubbleBody, { ...props, content, ownStatus, textId: canRetry ? textId : void 0 })
   ] });
   if (avatar === void 0 || content.isMine) return bubble;
-  return /* @__PURE__ */ jsxs16("div", { className: "cv-p-bubble-row", children: [
-    /* @__PURE__ */ jsx21("span", { className: "cv-p-bubble-row__avatar", children: avatar }),
+  return /* @__PURE__ */ jsxs22("div", { className: "cv-p-bubble-row", children: [
+    /* @__PURE__ */ jsx28("span", { className: "cv-p-bubble-row__avatar", children: avatar }),
     bubble
   ] });
 }
@@ -1714,7 +2726,7 @@ function resolveParticipantBubbleActions(item, handlers) {
 }
 
 // src/participant/ParticipantTimeline.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function createdAtOf2(item) {
   return item.kind === "server" ? item.message.createdAt : item.pending.createdAt;
 }
@@ -1731,7 +2743,7 @@ function resolveActions(item, pendingActions) {
 }
 function resolveAvatarSlot({ isEnabled, isMine, showAvatar, author, render }) {
   if (!isEnabled || isMine) return void 0;
-  return showAvatar ? /* @__PURE__ */ jsx22(ParticipantAuthorAvatar, { name: author, render }) : null;
+  return showAvatar ? /* @__PURE__ */ jsx29(ParticipantAuthorAvatar, { name: author, render }) : null;
 }
 function ParticipantTimeline(props) {
   const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props;
@@ -1743,7 +2755,7 @@ function ParticipantTimeline(props) {
   for (const item of items) {
     const day = new Date(createdAtOf2(item));
     if (previousDay === void 0 || !isSameDay(previousDay, day)) {
-      nodes.push(/* @__PURE__ */ jsx22(ParticipantDayDivider, { day, locale }, `day:${keyOf(item)}`));
+      nodes.push(/* @__PURE__ */ jsx29(ParticipantDayDivider, { day, locale }, `day:${keyOf(item)}`));
       previousAuthor = void 0;
     }
     previousDay = day;
@@ -1758,7 +2770,7 @@ function ParticipantTimeline(props) {
       render: props.renderAuthorAvatar
     });
     nodes.push(
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx29(
         ParticipantMessageBubble,
         {
           item,
@@ -1774,19 +2786,19 @@ function ParticipantTimeline(props) {
       )
     );
   }
-  return /* @__PURE__ */ jsx22("div", { className: "cv-p-thread__messages", children: nodes });
+  return /* @__PURE__ */ jsx29("div", { className: "cv-p-thread__messages", children: nodes });
 }
 
 // src/participant/ParticipantConversationAvatar.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ParticipantConversationAvatar({ icon }) {
-  return /* @__PURE__ */ jsx23("span", { className: "cv-p-thread__avatar", "aria-hidden": "true", children: icon });
+  return /* @__PURE__ */ jsx30("span", { className: "cv-p-thread__avatar", "aria-hidden": "true", children: icon });
 }
 
 // src/participant/ParticipantProtocolBadge.tsx
 import { Check as Check2, Copy as Copy2 } from "lucide-react";
-import { useEffect as useEffect7, useReducer as useReducer4 } from "react";
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useReducer as useReducer4 } from "react";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var COPIED_ANNOUNCEMENT_MS = 3e3;
 function ParticipantProtocolBadgeView({
   protocol,
@@ -1795,16 +2807,16 @@ function ParticipantProtocolBadgeView({
   onCopy
 }) {
   const { isCopied, copyCount } = copyState;
-  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
-    /* @__PURE__ */ jsxs17("span", { className: "cv-p-protocol cv-p-protocol--header", children: [
-      /* @__PURE__ */ jsxs17("span", { className: "cv-p-protocol__code", children: [
-        /* @__PURE__ */ jsxs17("span", { className: "cv-p-sr-only", children: [
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    /* @__PURE__ */ jsxs23("span", { className: "cv-p-protocol cv-p-protocol--header", children: [
+      /* @__PURE__ */ jsxs23("span", { className: "cv-p-protocol__code", children: [
+        /* @__PURE__ */ jsxs23("span", { className: "cv-p-sr-only", children: [
           labels.protocolPrefix,
           " "
         ] }),
         protocol
       ] }),
-      /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs23(
         "button",
         {
           type: "button",
@@ -1813,19 +2825,19 @@ function ParticipantProtocolBadgeView({
           "data-cv-tooltip": labels.copyProtocol,
           onClick: onCopy,
           children: [
-            isCopied ? /* @__PURE__ */ jsx24(Check2, { size: 18, "aria-hidden": true }) : /* @__PURE__ */ jsx24(Copy2, { size: 18, "aria-hidden": true }),
-            isCopied ? /* @__PURE__ */ jsx24("span", { className: "cv-p-protocol__copied", "aria-hidden": "true", children: labels.protocolCopied }) : null
+            isCopied ? /* @__PURE__ */ jsx31(Check2, { size: 18, "aria-hidden": true }) : /* @__PURE__ */ jsx31(Copy2, { size: 18, "aria-hidden": true }),
+            isCopied ? /* @__PURE__ */ jsx31("span", { className: "cv-p-protocol__copied", "aria-hidden": "true", children: labels.protocolCopied }) : null
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx24("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx24("span", { children: labels.protocolCopied }, copyCount) : null })
+    /* @__PURE__ */ jsx31("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx31("span", { children: labels.protocolCopied }, copyCount) : null })
   ] });
 }
 function ParticipantProtocolBadge({ protocol, labels }) {
   const [copyState, dispatch] = useReducer4(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
   const { isCopied, copyCount } = copyState;
-  useEffect7(() => {
+  useEffect14(() => {
     if (!isCopied) return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_ANNOUNCEMENT_MS);
     return () => clearTimeout(timer);
@@ -1834,7 +2846,7 @@ function ParticipantProtocolBadge({ protocol, labels }) {
     const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
     if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: "copied" });
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx31(
     ParticipantProtocolBadgeView,
     {
       protocol,
@@ -1846,19 +2858,19 @@ function ParticipantProtocolBadge({ protocol, labels }) {
 }
 
 // src/participant/ParticipantThreadHeader.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 function Title({ conversation, labels, onOpenSubject }) {
   const { subjectType, subjectId, subjectLabel } = conversation;
-  return /* @__PURE__ */ jsx25("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx32("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx32(
     "button",
     {
       type: "button",
       className: "cv-p-thread__title-button",
       "aria-label": `${labels.openSubject}: ${subjectLabel}`,
       onClick: () => onOpenSubject({ subjectType, subjectId }),
-      children: /* @__PURE__ */ jsx25("span", { className: "cv-p-thread__title-text", children: subjectLabel })
+      children: /* @__PURE__ */ jsx32("span", { className: "cv-p-thread__title-text", children: subjectLabel })
     }
-  ) : /* @__PURE__ */ jsx25("span", { className: "cv-p-thread__title-text", children: subjectLabel }) });
+  ) : /* @__PURE__ */ jsx32("span", { className: "cv-p-thread__title-text", children: subjectLabel }) });
 }
 function ParticipantThreadHeader({
   conversation,
@@ -1873,30 +2885,30 @@ function ParticipantThreadHeader({
   const group = subjectGroups?.find((candidate) => candidate.subjectType === conversation.subjectType);
   const icon = resolveConversationIcon({ conversation, group, renderSubjectIcon });
   const hasChannels = resolveParticipantChannels(conversation.channels).length > 0;
-  return /* @__PURE__ */ jsxs18("header", { className: "cv-p-thread__header", children: [
-    onBack ? /* @__PURE__ */ jsx25(ParticipantBackButton, { label: labels.back, onBack }) : null,
-    icon !== void 0 ? /* @__PURE__ */ jsx25(ParticipantConversationAvatar, { icon }) : null,
-    /* @__PURE__ */ jsxs18("div", { className: "cv-p-thread__heading", children: [
-      icon === void 0 && group ? /* @__PURE__ */ jsx25("p", { className: "cv-p-thread__eyebrow", children: group.label }) : null,
-      /* @__PURE__ */ jsx25(Title, { conversation, labels, onOpenSubject }),
-      counterpartLabel ? /* @__PURE__ */ jsx25("p", { className: "cv-p-thread__counterpart", children: counterpartLabel }) : null,
-      conversation.protocol || hasChannels ? /* @__PURE__ */ jsxs18("div", { className: "cv-p-thread__meta", children: [
-        conversation.protocol ? /* @__PURE__ */ jsx25(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
-        /* @__PURE__ */ jsx25(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline", iconSize: 16 })
+  return /* @__PURE__ */ jsxs24("header", { className: "cv-p-thread__header", children: [
+    onBack ? /* @__PURE__ */ jsx32(ParticipantBackButton, { label: labels.back, onBack }) : null,
+    icon !== void 0 ? /* @__PURE__ */ jsx32(ParticipantConversationAvatar, { icon }) : null,
+    /* @__PURE__ */ jsxs24("div", { className: "cv-p-thread__heading", children: [
+      icon === void 0 && group ? /* @__PURE__ */ jsx32("p", { className: "cv-p-thread__eyebrow", children: group.label }) : null,
+      /* @__PURE__ */ jsx32(Title, { conversation, labels, onOpenSubject }),
+      counterpartLabel ? /* @__PURE__ */ jsx32("p", { className: "cv-p-thread__counterpart", children: counterpartLabel }) : null,
+      conversation.protocol || hasChannels ? /* @__PURE__ */ jsxs24("div", { className: "cv-p-thread__meta", children: [
+        conversation.protocol ? /* @__PURE__ */ jsx32(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
+        /* @__PURE__ */ jsx32(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline", iconSize: 16 })
       ] }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx25("div", { className: "cv-p-thread__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx32("div", { className: "cv-p-thread__actions", children: actions }) : null
   ] });
 }
 
 // src/participant/ParticipantThread.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function Footer({ props }) {
   const { conversation, labels, draft } = props;
   if (conversation.status === "closed") {
-    return /* @__PURE__ */ jsx26("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
+    return /* @__PURE__ */ jsx33("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx33(
     ParticipantComposer,
     {
       value: draft.value,
@@ -1909,12 +2921,14 @@ function Footer({ props }) {
       isSending: props.isSending,
       maxLength: props.maxLength,
       acceptedTypes: props.acceptedTypes,
-      quickReplies: props.quickReplies
+      quickReplies: props.quickReplies,
+      audioRecording: props.audioRecording,
+      onSendAudio: props.onSendAudio
     }
   );
 }
 function Header({ props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx33(
     ParticipantThreadHeader,
     {
       conversation: props.conversation,
@@ -1932,17 +2946,17 @@ function ThreadBody(props) {
   const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props;
   const subjectCard = renderSubjectCard?.(conversation);
   const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 });
-  const rootRef = useRef5(null);
+  const rootRef = useRef13(null);
   useSuppressTouchTooltips(rootRef);
-  return /* @__PURE__ */ jsxs19("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, ref: rootRef, children: [
-    /* @__PURE__ */ jsx26(Header, { props }),
-    subjectCard ? /* @__PURE__ */ jsx26("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
-    /* @__PURE__ */ jsxs19("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, tabIndex: -1, children: [
-      loadView.isLoading ? /* @__PURE__ */ jsx26(ParticipantLoading, { labels }) : null,
-      loadView.hasError ? /* @__PURE__ */ jsx26(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
-      hasMore && onLoadOlder ? /* @__PURE__ */ jsx26("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
-      /* @__PURE__ */ jsx26(ParticipantTimeline, { ...props }),
-      /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs25("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, ref: rootRef, children: [
+    /* @__PURE__ */ jsx33(Header, { props }),
+    subjectCard ? /* @__PURE__ */ jsx33("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
+    /* @__PURE__ */ jsxs25("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, tabIndex: -1, children: [
+      loadView.isLoading ? /* @__PURE__ */ jsx33(ParticipantLoading, { labels }) : null,
+      loadView.hasError ? /* @__PURE__ */ jsx33(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+      hasMore && onLoadOlder ? /* @__PURE__ */ jsx33("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
+      /* @__PURE__ */ jsx33(ParticipantTimeline, { ...props }),
+      /* @__PURE__ */ jsx33(
         ParticipantScrollToLatest,
         {
           label: labels.scrollToLatest,
@@ -1953,19 +2967,19 @@ function ThreadBody(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx26(ParticipantThreadLive, { notice: props.newMessagesCount > 0 ? labels.newMessages : "" }),
-    /* @__PURE__ */ jsx26(Footer, { props })
+    /* @__PURE__ */ jsx33(ParticipantThreadLive, { notice: props.newMessagesCount > 0 ? labels.newMessages : "" }),
+    /* @__PURE__ */ jsx33(Footer, { props })
   ] });
 }
 function ParticipantThread(props) {
-  return /* @__PURE__ */ jsxs19(ParticipantCopyAnnouncer, { children: [
-    /* @__PURE__ */ jsx26(ThreadBody, { ...props }),
-    /* @__PURE__ */ jsx26(TooltipLayer, {})
+  return /* @__PURE__ */ jsxs25(ParticipantCopyAnnouncer, { children: [
+    /* @__PURE__ */ jsx33(ThreadBody, { ...props }),
+    /* @__PURE__ */ jsx33(TooltipLayer, {})
   ] });
 }
 
 // src/participant/useParticipantThreadController.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/participant/bindAttachmentUrlResolver.ts
 function bindAttachmentUrlResolver(api) {
@@ -2049,7 +3063,7 @@ function appendEntryToDraft(entry, current) {
 }
 
 // src/participant/useParticipantConversationView.ts
-import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo4 } from "react";
 
 // src/participant/participantDrafts.ts
 var EMPTY_PARTICIPANT_DRAFT = { text: "", files: [] };
@@ -2093,7 +3107,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo2, useReducer as useReducer5, useRef as useRef9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect18, useMemo as useMemo3, useReducer as useReducer5, useRef as useRef17 } from "react";
 
 // src/participant/participantThreadState.ts
 var INITIAL_PARTICIPANT_THREAD_STATE = {
@@ -2129,7 +3143,7 @@ function participantThreadReducer(state, action) {
 }
 
 // src/participant/useParticipantMarkRead.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/participant/shouldMarkRead.ts
 function shouldMarkParticipantRead(params) {
@@ -2141,12 +3155,12 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect8, useState as useState4 } from "react";
+import { useEffect as useEffect15, useState as useState9 } from "react";
 function useDocumentVisibility() {
-  const [visibilityState, setVisibilityState] = useState4(
+  const [visibilityState, setVisibilityState] = useState9(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
-  useEffect8(() => {
+  useEffect15(() => {
     function handleVisibilityChange() {
       setVisibilityState(document.visibilityState);
     }
@@ -2161,18 +3175,18 @@ function useDocumentVisibility() {
 function useParticipantMarkRead(params) {
   const { apiRef, subject, unreadCount, messageCount, onMarkedRead } = params;
   const visibilityState = useDocumentVisibility();
-  useEffect9(() => {
+  useEffect16(() => {
     if (!shouldMarkParticipantRead({ selected: subject, subject, visibilityState, unreadCount })) return;
     void apiRef.current.markRead(subject).then(() => onMarkedRead?.(subject), () => void 0);
   }, [apiRef, subject, visibilityState, unreadCount, messageCount, onMarkedRead]);
 }
 
 // src/participant/useParticipantRevalidation.ts
-import { useEffect as useEffect10, useRef as useRef6 } from "react";
+import { useEffect as useEffect17, useRef as useRef14 } from "react";
 function useParticipantRevalidation(api, onRevalidate) {
-  const handlerRef = useRef6(onRevalidate);
+  const handlerRef = useRef14(onRevalidate);
   handlerRef.current = onRevalidate;
-  useEffect10(() => {
+  useEffect17(() => {
     function handleFocus() {
       handlerRef.current();
     }
@@ -2199,12 +3213,12 @@ function useParticipantRevalidation(api, onRevalidate) {
 }
 
 // src/participant/useParticipantSend.ts
-import { useCallback as useCallback2, useRef as useRef7 } from "react";
+import { useCallback as useCallback6, useRef as useRef15 } from "react";
 function useParticipantSend(params) {
   const { apiRef, subject, dispatchSend, onSentMessage } = params;
-  const entriesRef = useRef7(params.entries);
+  const entriesRef = useRef15(params.entries);
   entriesRef.current = params.entries;
-  const deliver = useCallback2(
+  const deliver = useCallback6(
     async (entry) => {
       const { clientMessageId } = entry;
       try {
@@ -2228,7 +3242,7 @@ function useParticipantSend(params) {
     },
     [apiRef, dispatchSend, onSentMessage]
   );
-  const send = useCallback2(
+  const send = useCallback6(
     async (content) => {
       const entry = createParticipantSendEntry({
         clientMessageId: crypto.randomUUID(),
@@ -2241,7 +3255,7 @@ function useParticipantSend(params) {
     },
     [deliver, dispatchSend, subject]
   );
-  const retry = useCallback2(
+  const retry = useCallback6(
     async (clientMessageId) => {
       const entry = findFailedEntry(entriesRef.current, clientMessageId);
       if (!entry) return;
@@ -2254,13 +3268,13 @@ function useParticipantSend(params) {
 }
 
 // src/participant/useParticipantUnread.ts
-import { useCallback as useCallback3, useRef as useRef8, useState as useState5 } from "react";
+import { useCallback as useCallback7, useRef as useRef16, useState as useState10 } from "react";
 function useParticipantUnread(params) {
   const { messages, perspective, reportedUnreadCount, onMarkedRead } = params;
-  const [acknowledgedCount, setAcknowledgedCount] = useState5(0);
-  const messagesRef = useRef8(messages);
+  const [acknowledgedCount, setAcknowledgedCount] = useState10(0);
+  const messagesRef = useRef16(messages);
   messagesRef.current = messages;
-  const handleMarkedRead = useCallback3(
+  const handleMarkedRead = useCallback7(
     (subject) => {
       if (perspective) setAcknowledgedCount(countOtherSideMessages(messagesRef.current, perspective));
       onMarkedRead?.(subject);
@@ -2283,13 +3297,13 @@ function isForSubject(event, subject) {
 function useParticipantThread(params) {
   const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [], perspective } = params;
   const { subjectType, subjectId } = subject;
-  const stableSubject = useMemo2(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const stableSubject = useMemo3(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
   const [state, dispatch] = useReducer5(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
-  const apiRef = useRef9(api);
+  const apiRef = useRef17(api);
   apiRef.current = api;
-  const activeSubjectKey = useRef9("");
+  const activeSubjectKey = useRef17("");
   const confirmsRead = channelCapabilityFor(channel).confirmsRead;
-  const refresh = useCallback4(async () => {
+  const refresh = useCallback8(async () => {
     const requestKey = `${subjectType}:${subjectId}`;
     dispatch({ type: "started" });
     try {
@@ -2302,7 +3316,7 @@ function useParticipantThread(params) {
     }
   }, [stableSubject, subjectType, subjectId]);
   const oldestMessageId = state.messages[0]?.id;
-  const loadOlder = useCallback4(async () => {
+  const loadOlder = useCallback8(async () => {
     if (!oldestMessageId) return;
     const requestKey = `${subjectType}:${subjectId}`;
     try {
@@ -2314,9 +3328,9 @@ function useParticipantThread(params) {
       if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
     }
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
-  const handleSentMessage = useCallback4((message) => dispatch({ type: "sendConfirmed", message }), []);
+  const handleSentMessage = useCallback8((message) => dispatch({ type: "sendConfirmed", message }), []);
   const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
-  useEffect11(() => {
+  useEffect18(() => {
     activeSubjectKey.current = `${subjectType}:${subjectId}`;
     dispatch({ type: "reset" });
     void refresh();
@@ -2324,7 +3338,7 @@ function useParticipantThread(params) {
   useParticipantRevalidation(api, (event) => {
     if (isForSubject(event, stableSubject)) void refresh();
   });
-  useEffect11(() => {
+  useEffect18(() => {
     if (sendEntries.length === 0) return;
     dispatchSend({ type: "reflected", knownClientMessageIds: collectKnownClientMessageIds({ messages: state.messages, hostPending }) });
   }, [sendEntries, state.messages, hostPending, dispatchSend]);
@@ -2336,7 +3350,7 @@ function useParticipantThread(params) {
     messageCount: state.messages.length,
     onMarkedRead: unread.handleMarkedRead
   });
-  const localPending = useMemo2(() => toLocalPending(sendEntries), [sendEntries]);
+  const localPending = useMemo3(() => toLocalPending(sendEntries), [sendEntries]);
   return { ...state, localPending, confirmsRead, refresh, loadOlder, ...sending };
 }
 
@@ -2345,7 +3359,7 @@ function useParticipantConversationView(params) {
   const { api, subject, conversation, pendingMessages, sendStates, dispatchSendStates } = params;
   const { subjectType, subjectId } = subject;
   const sendEntries = selectSendEntries(sendStates, subject);
-  const dispatchSend = useCallback5(
+  const dispatchSend = useCallback9(
     (action) => dispatchSendStates({ subject: { subjectType, subjectId }, action }),
     [dispatchSendStates, subjectType, subjectId]
   );
@@ -2360,7 +3374,7 @@ function useParticipantConversationView(params) {
     hostPending: pendingMessages,
     perspective: params.perspective
   });
-  const items = useMemo3(
+  const items = useMemo4(
     () => mergeParticipantMessages({
       serverMessages: thread.messages,
       hostPending: pendingMessages ?? [],
@@ -2373,9 +3387,9 @@ function useParticipantConversationView(params) {
 }
 
 // src/participant/useParticipantDraft.ts
-import { useState as useState6 } from "react";
+import { useState as useState11 } from "react";
 function useParticipantDraft(draftsRef, subject) {
-  const [draft, setDraftState] = useState6(() => getDraft(draftsRef.current, subject));
+  const [draft, setDraftState] = useState11(() => getDraft(draftsRef.current, subject));
   function replaceDrafts(next) {
     draftsRef.current = next;
     setDraftState(getDraft(next, subject));
@@ -2394,8 +3408,29 @@ function useParticipantDraft(draftsRef, subject) {
   return { draft, setText: (text) => update({ text }), setFiles: (files) => update({ files }), takeForSend, restoreFromEntry };
 }
 
+// src/participant/useParticipantSendAudio.ts
+import { useCallback as useCallback10, useRef as useRef18 } from "react";
+function useParticipantSendAudio(send) {
+  const sendRef = useRef18(send);
+  sendRef.current = send;
+  const inFlightRef = useRef18(/* @__PURE__ */ new Set());
+  return useCallback10((file) => {
+    const inFlight = inFlightRef.current;
+    if (inFlight.has(file)) return;
+    inFlight.add(file);
+    void (async () => {
+      try {
+        await sendRef.current({ files: [file] });
+      } catch {
+      } finally {
+        inFlight.delete(file);
+      }
+    })();
+  }, []);
+}
+
 // src/participant/useParticipantThreadScroll.ts
-import { useEffect as useEffect12, useRef as useRef11 } from "react";
+import { useEffect as useEffect19, useRef as useRef20 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -2420,9 +3455,9 @@ function countNewIncomingMessages(previousIds, currentItems, perspective) {
 }
 
 // src/participant/useScrollAwayState.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback11 } from "react";
 function useScrollAwayState(ref, isNearBottom) {
-  const scrollToLatest = useCallback6(() => {
+  const scrollToLatest = useCallback11(() => {
     const element = ref.current;
     if (!element) return;
     element.scrollTo(
@@ -2433,7 +3468,7 @@ function useScrollAwayState(ref, isNearBottom) {
 }
 
 // src/participant/useStickToBottom.ts
-import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState7 } from "react";
+import { useCallback as useCallback12, useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState12 } from "react";
 
 // src/participant/participantScroll.ts
 var NEAR_BOTTOM_THRESHOLD_PX = 80;
@@ -2455,17 +3490,17 @@ function resolveScrollAction(params) {
 
 // src/participant/useStickToBottom.ts
 function useStickToBottom({ firstKey, lastKey }) {
-  const ref = useRef10(null);
-  const snapshot = useRef10({
+  const ref = useRef19(null);
+  const snapshot = useRef19({
     hasPositioned: false,
     firstKey: void 0,
     lastKey: void 0,
     scrollTop: 0,
     scrollHeight: 0
   });
-  const [isNearBottom, setIsNearBottom] = useState7(true);
-  const isNearBottomRef = useRef10(true);
-  const onScroll = useCallback7((event) => {
+  const [isNearBottom, setIsNearBottom] = useState12(true);
+  const isNearBottomRef = useRef19(true);
+  const onScroll = useCallback12((event) => {
     const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
     const isNear = shouldStickToBottom({ scrollTop, clientHeight, scrollHeight, threshold: NEAR_BOTTOM_THRESHOLD_PX });
     snapshot.current.scrollTop = scrollTop;
@@ -2520,8 +3555,8 @@ function useParticipantThreadScroll(items, perspective) {
   });
   const { isAwayFromBottom, scrollToLatest } = useScrollAwayState(base.ref, isNearBottom);
   const scroll = { ...base, isAwayFromBottom, scrollToLatest };
-  const seenIds = useRef11(/* @__PURE__ */ new Set());
-  useEffect12(() => {
+  const seenIds = useRef20(/* @__PURE__ */ new Set());
+  useEffect19(() => {
     if (isNearBottom) seenIds.current = collectServerMessageIds(items);
   }, [isNearBottom, items]);
   return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items, perspective) };
@@ -2536,22 +3571,26 @@ function buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending
     ...onRetryPending ? { retryHost: onRetryPending } : {}
   };
 }
+function buildEditHandler({ sendEntries, dispatchSend, restoreFromEntry }) {
+  return (clientMessageId) => {
+    const entry = findFailedEntry(sendEntries, clientMessageId);
+    if (!entry) return;
+    restoreFromEntry(entry);
+    dispatchSend({ type: "discarded", clientMessageId });
+  };
+}
 function useParticipantThreadController(params) {
   const { api, subject, conversation, draftsRef } = params;
   const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, subject);
   const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView(params);
-  const resolveAttachmentUrl = useMemo4(() => bindAttachmentUrlResolver(api), [api]);
+  const resolveAttachmentUrl = useMemo5(() => bindAttachmentUrlResolver(api), [api]);
   const { scroll, newMessagesCount } = useParticipantThreadScroll(items, params.perspective);
+  const handleSendAudio = useParticipantSendAudio(thread.send);
+  const handleEdit = buildEditHandler({ sendEntries, dispatchSend, restoreFromEntry });
   function handleSend() {
     const content = takeForSend();
     if (content) void thread.send(content);
   }
-  function handleEdit(clientMessageId) {
-    const entry = findFailedEntry(sendEntries, clientMessageId);
-    if (!entry) return;
-    restoreFromEntry(entry);
-    dispatchSend({ type: "discarded", clientMessageId });
-  }
   return {
     conversation,
     items,
@@ -2569,17 +3608,18 @@ function useParticipantThreadController(params) {
     locale: params.locale,
     onLoadOlder: () => void thread.loadOlder(),
     pendingActions: buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending: params.onRetryPending }),
-    perspective: params.perspective
+    perspective: params.perspective,
+    onSendAudio: handleSendAudio
   };
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 function useOpenedConversation(api, subject, isNeeded) {
-  const [opened, setOpened] = useState8({ status: "idle" });
+  const [opened, setOpened] = useState13({ status: "idle" });
   const { subjectType, subjectId } = subject;
   const canOpen = api.openConversation !== void 0;
-  useEffect13(() => {
+  useEffect20(() => {
     if (!isNeeded || !canOpen) return;
     let isCurrent = true;
     setOpened({ status: "loading" });
@@ -2597,9 +3637,9 @@ function NotFound({
   labels,
   onBack
 }) {
-  return /* @__PURE__ */ jsxs20("div", { className: "cv-p cv-p-thread", children: [
-    /* @__PURE__ */ jsx27("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsx27(ParticipantBackButton, { label: labels.back, onBack }) : null }),
-    /* @__PURE__ */ jsx27("p", { className: "cv-p-empty", children: labels.notFound })
+  return /* @__PURE__ */ jsxs26("div", { className: "cv-p cv-p-thread", children: [
+    /* @__PURE__ */ jsx34("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsx34(ParticipantBackButton, { label: labels.back, onBack }) : null }),
+    /* @__PURE__ */ jsx34("p", { className: "cv-p-empty", children: labels.notFound })
   ] });
 }
 function ParticipantThreadScreen(props) {
@@ -2609,12 +3649,12 @@ function ParticipantThreadScreen(props) {
   );
   const opened = useOpenedConversation(api, selected, listed === void 0);
   const conversation = listed ?? (opened.status === "found" ? opened.conversation : void 0);
-  if (conversation) return /* @__PURE__ */ jsx27(LoadedThread, { ...props, conversation });
+  if (conversation) return /* @__PURE__ */ jsx34(LoadedThread, { ...props, conversation });
   const isResolving = opened.status === "loading" || api.openConversation !== void 0 && opened.status === "idle";
   const isListLoading = inbox.status === "idle" || inbox.status === "loading";
   if (isResolving || api.openConversation === void 0 && isListLoading)
-    return /* @__PURE__ */ jsx27("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
-  return /* @__PURE__ */ jsx27(NotFound, { labels, onBack: props.onBack });
+    return /* @__PURE__ */ jsx34("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
+  return /* @__PURE__ */ jsx34(NotFound, { labels, onBack: props.onBack });
 }
 function LoadedThread(props) {
   const core = useParticipantThreadController({
@@ -2622,7 +3662,7 @@ function LoadedThread(props) {
     subject: props.selected,
     onMarkedRead: props.inbox.markSubjectRead
   });
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx34(
     ParticipantThread,
     {
       ...core,
@@ -2634,7 +3674,8 @@ function LoadedThread(props) {
       renderSubjectIcon: props.renderSubjectIcon,
       avatars: props.avatars,
       renderAuthorAvatar: props.renderAuthorAvatar,
-      tail: props.tail
+      tail: props.tail,
+      audioRecording: props.audioRecording
     }
   );
 }
@@ -2760,16 +3801,16 @@ function buildParticipantThemeStyle(theme) {
 }
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var ALL_FILTER3 = "all";
 function ParticipantConversationsScreen(props) {
   const { selected, inbox, subjectGroups, classNames } = props;
-  const [filter, setFilter] = useState9(ALL_FILTER3);
-  const [searchQuery, setSearchQuery] = useState9("");
-  const draftsRef = useRef12(/* @__PURE__ */ new Map());
+  const [filter, setFilter] = useState14(ALL_FILTER3);
+  const [searchQuery, setSearchQuery] = useState14("");
+  const draftsRef = useRef21(/* @__PURE__ */ new Map());
   const [sendStates, dispatchSendStates] = useReducer6(participantSendStatesReducer, /* @__PURE__ */ new Map());
-  const labels = useMemo5(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
-  const view = useMemo5(
+  const labels = useMemo6(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
+  const view = useMemo6(
     () => groupParticipantConversations({
       conversations: inbox.conversations,
       subjectGroups,
@@ -2780,7 +3821,7 @@ function ParticipantConversationsScreen(props) {
   );
   const isSearchVisible = isInboxSearchVisible({ conversations: inbox.conversations, searchQuery });
   const rootClassName = ["cv-p-root", props.className, classNames?.root].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx28("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx28("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx35("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx35("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx35(
     ParticipantInbox,
     {
       view,
@@ -2797,7 +3838,7 @@ function ParticipantConversationsScreen(props) {
       renderSubjectIcon: props.renderSubjectIcon,
       search: { value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }
     }
-  ) }) : /* @__PURE__ */ jsx28("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx28(
+  ) }) : /* @__PURE__ */ jsx35("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx35(
     ParticipantThreadScreen,
     {
       ...props,
@@ -2812,7 +3853,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback8, useEffect as useEffect14, useReducer as useReducer7 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect21, useReducer as useReducer7 } from "react";
 
 // src/participant/participantInboxState.ts
 var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
@@ -2863,7 +3904,7 @@ function describeError2(error) {
 }
 function useParticipantInbox(api) {
   const [state, dispatch] = useReducer7(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
-  const refresh = useCallback8(async () => {
+  const refresh = useCallback13(async () => {
     dispatch({ type: "started" });
     try {
       const page = await api.listConversations();
@@ -2873,7 +3914,7 @@ function useParticipantInbox(api) {
     }
   }, [api]);
   const { nextCursor } = state;
-  const loadMore = useCallback8(async () => {
+  const loadMore = useCallback13(async () => {
     if (!nextCursor) return;
     try {
       const page = await api.listConversations({ cursor: nextCursor });
@@ -2882,10 +3923,10 @@ function useParticipantInbox(api) {
       dispatch({ type: "failed", error: describeError2(error) });
     }
   }, [api, nextCursor]);
-  const markSubjectRead = useCallback8((subject) => {
+  const markSubjectRead = useCallback13((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
-  useEffect14(() => {
+  useEffect21(() => {
     void refresh();
   }, [refresh]);
   useParticipantRevalidation(api, () => {
@@ -2895,11 +3936,11 @@ function useParticipantInbox(api) {
 }
 
 // src/participant/ParticipantConversations.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function ParticipantConversations(props) {
   const inbox = useParticipantInbox(props.api);
   const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx36(
     ParticipantConversationsScreen,
     {
       ...props,
@@ -2909,7 +3950,7 @@ function ParticipantConversations(props) {
 }
 
 // src/participant/ConversationThread.tsx
-import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer8, useRef as useRef13 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo7, useReducer as useReducer8, useRef as useRef22 } from "react";
 
 // src/participant/conversationThreadApi.ts
 function toParticipantApi(api) {
@@ -2949,20 +3990,20 @@ function buildThreadSummary({
 }
 
 // src/participant/ConversationThread.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function useConversationThreadCore(props) {
   const { perspective = "participant" } = props;
   const { subjectType, subjectId } = props.subject;
-  const subject = useMemo6(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
-  const onMarkedReadRef = useRef13(props.onMarkedRead);
+  const subject = useMemo7(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const onMarkedReadRef = useRef22(props.onMarkedRead);
   onMarkedReadRef.current = props.onMarkedRead;
-  const handleMarkedRead = useCallback9((marked) => onMarkedReadRef.current?.(marked), []);
-  const api = useMemo6(() => toParticipantApi(props.api), [props.api]);
-  const draftsRef = useRef13(/* @__PURE__ */ new Map());
+  const handleMarkedRead = useCallback14((marked) => onMarkedReadRef.current?.(marked), []);
+  const api = useMemo7(() => toParticipantApi(props.api), [props.api]);
+  const draftsRef = useRef22(/* @__PURE__ */ new Map());
   const [sendStates, dispatchSendStates] = useReducer8(participantSendStatesReducer, /* @__PURE__ */ new Map());
-  const labels = useMemo6(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
+  const labels = useMemo7(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
   const { title, protocol, channels, status } = props;
-  const conversation = useMemo6(
+  const conversation = useMemo7(
     () => buildThreadSummary({ subject, title, protocol, channels, status }),
     [subject, title, protocol, channels, status]
   );
@@ -2984,12 +4025,12 @@ function useConversationThreadCore(props) {
 }
 function ConversationThreadBody(props) {
   const core = useConversationThreadCore(props);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: ["cv-p-root", props.className].filter(Boolean).join(" "),
       style: buildParticipantThemeStyle(props.theme),
-      children: /* @__PURE__ */ jsx30("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx37("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx37(
         ParticipantThread,
         {
           ...core,
@@ -3001,17 +4042,20 @@ function ConversationThreadBody(props) {
           renderAuthorAvatar: props.renderAuthorAvatar,
           tail: props.tail,
           counterpartLabel: props.counterpartLabel,
-          headerActions: props.headerActions
+          headerActions: props.headerActions,
+          audioRecording: props.audioRecording
         }
       ) })
     }
   );
 }
 function ConversationThread(props) {
-  return /* @__PURE__ */ jsx30(ConversationThreadBody, { ...props }, draftKey(props.subject));
+  return /* @__PURE__ */ jsx37(ConversationThreadBody, { ...props }, draftKey(props.subject));
 }
 export {
   ConversationThread,
+  DEFAULT_MAX_RECORDING_BYTES,
+  DEFAULT_PARTICIPANT_AUDIO_LABELS,
   DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
   ParticipantConversations,
   groupParticipantConversations