@adatechnology/conversations-ui 0.1.0-rc.13 → 0.1.0-rc.15

package/dist/{chunk-QFEESERN.js → chunk-SOWV4264.js}

@@ -1082,13 +1082,17 @@ var MessageComposer = ({
 };
 
 // src/AudioRecorderButton.tsx
-import { useCallback as useCallback3, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState7 } from "react";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_AUDIO_RECORDER_BUTTON_LABELS = {
   start: "Gravar \xE1udio",
   stop: "Parar grava\xE7\xE3o",
   unsupported: "Este navegador n\xE3o grava \xE1udio.",
-  denied: "Sem permiss\xE3o para usar o microfone."
+  denied: "Sem permiss\xE3o para usar o microfone.",
+  review: "Ou\xE7a antes de enviar",
+  send: "Enviar \xE1udio",
+  discard: "Descartar \xE1udio",
+  empty: "Nada foi captado pelo microfone."
 };
 var DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1e3;
 var RECORDING_FORMATS = [
@@ -1105,15 +1109,28 @@ function AudioRecorderButton({
   onRecorded,
   onFailure,
   onRecordingChange,
+  reviewBeforeSend = true,
   maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
   labels,
   disabled
 }) {
-  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start;
-  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop;
+  const labelOf = (key) => labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key];
   const [isRecording, setIsRecording] = useState7(false);
+  const [pending, setPending] = useState7(void 0);
   const recorderRef = useRef3(null);
   const autoStopRef = useRef3(void 0);
+  const discard = useCallback3(() => {
+    setPending((current) => {
+      if (current) URL.revokeObjectURL(current.objectURL);
+      return void 0;
+    });
+  }, []);
+  useEffect2(() => discard, [discard]);
+  const confirm = useCallback3(() => {
+    if (!pending) return;
+    void onRecorded(pending.file);
+    discard();
+  }, [discard, onRecorded, pending]);
   const stop = useCallback3(() => {
     recorderRef.current?.stop();
   }, []);
@@ -1137,9 +1154,18 @@ function AudioRecorderButton({
         onRecordingChange?.(false);
         recorderRef.current = null;
         const blob = new Blob(chunks, { type: format.uploadMimeType });
-        void onRecorded(
-          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType })
-        );
+        const file = new File([blob], `audio-${Date.now()}.${format.extension}`, {
+          type: format.uploadMimeType
+        });
+        if (blob.size === 0) {
+          onFailure?.(labelOf("empty"));
+          return;
+        }
+        if (!reviewBeforeSend) {
+          void onRecorded(file);
+          return;
+        }
+        setPending({ file, objectURL: URL.createObjectURL(blob) });
       });
       recorderRef.current = recorder;
       recorder.start();
@@ -1149,23 +1175,67 @@ function AudioRecorderButton({
     } catch {
       onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
     }
-  }, [labels?.denied, labels?.unsupported, maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange]);
-  return /* @__PURE__ */ jsx13(
-    "button",
-    {
-      type: "button",
-      disabled,
-      onClick: () => isRecording ? stop() : void start(),
-      title: isRecording ? stopLabel : startLabel,
-      "aria-label": isRecording ? stopLabel : startLabel,
-      "aria-pressed": isRecording,
-      className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-colors ${isRecording ? "animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600" : "text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
-      children: isRecording ? /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-        /* @__PURE__ */ jsx13("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
-        /* @__PURE__ */ jsx13("path", { d: "M19 11a7 7 0 0 1-14 0" }),
-        /* @__PURE__ */ jsx13("line", { x1: "12", y1: "18", x2: "12", y2: "22" })
-      ] })
-    }
+  }, [maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange, reviewBeforeSend]);
+  const toggleLabel = isRecording ? labelOf("stop") : labelOf("start");
+  return (
+    /* O painel de revisão flutua sobre o botão em vez de ocupar espaço na barra: o microfone mora
+       na caixa do botão de enviar, e empurrar o composer para cima a cada gravação faria a
+       conversa saltar. */
+    /* @__PURE__ */ jsxs9("div", { className: "relative flex-shrink-0", children: [
+      pending && /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          role: "group",
+          "aria-label": labelOf("review"),
+          className: "absolute bottom-full right-0 z-20 mb-2 flex w-64 items-center gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+          children: [
+            /* @__PURE__ */ jsx13("audio", { src: pending.objectURL, controls: true, className: "h-8 min-w-0 flex-1" }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: discard,
+                title: labelOf("discard"),
+                "aria-label": labelOf("discard"),
+                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700",
+                children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx13("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx13("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: confirm,
+                title: labelOf("send"),
+                "aria-label": labelOf("send"),
+                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600",
+                children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || pending !== void 0,
+          onClick: () => isRecording ? stop() : void start(),
+          title: toggleLabel,
+          "aria-label": toggleLabel,
+          "aria-pressed": isRecording,
+          className: `flex h-10 w-10 items-center justify-center rounded-full transition-colors disabled:opacity-50 ${isRecording ? "animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600" : "text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+          children: isRecording ? /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx13("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
+            /* @__PURE__ */ jsx13("path", { d: "M19 11a7 7 0 0 1-14 0" }),
+            /* @__PURE__ */ jsx13("line", { x1: "12", y1: "18", x2: "12", y2: "22" })
+          ] })
+        }
+      )
+    ] })
   );
 }
 
@@ -1240,7 +1310,7 @@ function phoneInitials(number) {
 }
 
 // src/hooks/useAsyncResource.ts
-import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState8 } from "react";
 function useAsyncResource(fetcher, deps) {
   const [data, setData] = useState8(void 0);
   const [loading, setLoading] = useState8(false);
@@ -1259,7 +1329,7 @@ function useAsyncResource(fetcher, deps) {
       if (requestId === requestIdRef.current) setLoading(false);
     }
   }, deps);
-  useEffect2(() => {
+  useEffect3(() => {
     load();
   }, [load]);
   return { data, loading, error, refetch: load };
@@ -1588,7 +1658,7 @@ function ConversationDocumentsPanel({
 }
 
 // src/DocumentsLibrary.tsx
-import { useEffect as useEffect3, useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState10 } from "react";
 import { ArrowUpDown as ArrowUpDown2, Bot as Bot2, Download as Download2, Eye as Eye2, MessageSquare, Users as Users2 } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_DOCUMENTS_LIBRARY_LABELS = {
@@ -1632,7 +1702,7 @@ function DocumentsLibrary({
   const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
   const lastPage = Math.max(1, Math.ceil(total / perPage));
   const fetchAll = context?.api.getAllDocuments;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!fetchAll) return;
     let active = true;
     setLoading(true);

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import react__default, { ReactNode, CSSProperties, FormEvent } from 'react';
-import { G as MessagePayload, K as ResolveMediaUrl, z as InteractiveSelection, x as InteractivePayload, r as ConversationsFeatures, o as ConversationSummary, j as ConversationChannel, L as ListConversationsParams, q as ConversationsApi, S as SSEProvider, B as ListDocumentsParams, k as ConversationDocument, p as ConversationTemplate } from './types-C_dqJ83O.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, C as CHANNEL_CAPABILITIES, c as CHANNEL_FILTER_ALL, d as CONVERSATION_CHANNEL, e as ChannelCapabilities, f as ChannelFilter, g as ChannelFilterOption, h as CompanyDocument, i as CompanyDocumentPage, l as ConversationDocumentPage, m as ConversationEventSource, n as ConversationPage, s as ConversationsTheme, t as ConversationsUIConfig, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, u as DEFAULT_CONVERSATION_CHANNEL, v as DEFAULT_MAX_RECORDING_MILLISECONDS, F as FormatContactHandleParams, H as HANDLE_KIND, w as HandleKind, I as InteractiveOption, y as InteractiveSection, M as MediaRenderer, E as MediaRendererProps, R as REOPEN_MECHANISM, J as ReopenMechanism, N as capabilitiesOf, O as channelFiltersFor, P as contactFlag, Q as formatContactHandle } from './types-C_dqJ83O.js';
+import { G as MessagePayload, K as ResolveMediaUrl, z as InteractiveSelection, x as InteractivePayload, r as ConversationsFeatures, o as ConversationSummary, j as ConversationChannel, L as ListConversationsParams, q as ConversationsApi, S as SSEProvider, B as ListDocumentsParams, k as ConversationDocument, p as ConversationTemplate } from './types-O7kMP1Yn.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, C as CHANNEL_CAPABILITIES, c as CHANNEL_FILTER_ALL, d as CONVERSATION_CHANNEL, e as ChannelCapabilities, f as ChannelFilter, g as ChannelFilterOption, h as CompanyDocument, i as CompanyDocumentPage, l as ConversationDocumentPage, m as ConversationEventSource, n as ConversationPage, s as ConversationsTheme, t as ConversationsUIConfig, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, u as DEFAULT_CONVERSATION_CHANNEL, v as DEFAULT_MAX_RECORDING_MILLISECONDS, F as FormatContactHandleParams, H as HANDLE_KIND, w as HandleKind, I as InteractiveOption, y as InteractiveSection, M as MediaRenderer, E as MediaRendererProps, R as REOPEN_MECHANISM, J as ReopenMechanism, N as capabilitiesOf, O as channelFiltersFor, P as contactFlag, Q as formatContactHandle } from './types-O7kMP1Yn.js';
 
 interface MessageBubbleProps {
     message: MessagePayload;

package/dist/index.js

@@ -44,7 +44,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-QFEESERN.js";
+} from "./chunk-SOWV4264.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -319,15 +319,16 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
     attachmentsPreview,
     quickReplies?.length ? (
-      /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-         celular come a altura da conversa, que é o que o operador precisa ver. */
-      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
+      /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+         conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+         precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           title: quickReply.tooltip,
           onClick: () => replaceContent(quickReply.text),
-          className: "whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          className: "flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
           children: quickReply.label
         },
         quickReply.id

package/dist/preview/index.d.ts

@@ -1,5 +1,5 @@
-import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, K as ResolveMediaUrl } from '../types-C_dqJ83O.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-C_dqJ83O.js';
+import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, K as ResolveMediaUrl } from '../types-O7kMP1Yn.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-O7kMP1Yn.js';
 import * as react from 'react';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';
 

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-QFEESERN.js";
+} from "../chunk-SOWV4264.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -1019,7 +1019,7 @@ function ConversationPreview({
       {
         onSend: (text) => void handleSend(text),
         onAttach: uploadMedia ? (file) => void handleAttach(file) : void 0,
-        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para enviar" : placeholder ?? "Escreva como o cliente\u2026",
+        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para ouvir" : placeholder ?? "Escreva como o cliente\u2026",
         idleAction: uploadMedia ? /* @__PURE__ */ jsx(
           AudioRecorderButton,
           {

package/dist/{types-C_dqJ83O.d.ts → types-O7kMP1Yn.d.ts}

@@ -118,6 +118,10 @@ interface AudioRecorderButtonLabels {
     stop: string;
     unsupported: string;
     denied: string;
+    review: string;
+    send: string;
+    discard: string;
+    empty: string;
 }
 declare const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels;
 interface AudioRecorderButtonProps {
@@ -129,6 +133,12 @@ interface AudioRecorderButtonProps {
      * que o microfone está quebrado.
      */
     onRecordingChange?: (isRecording: boolean) => void;
+    /**
+     * Abre uma etapa de revisão quando a gravação para: o áudio toca ali mesmo e só sai depois de
+     * confirmado. Ligado por padrão — voz é o único anexo que quem envia não viu antes de mandar, e
+     * sem ouvir não há como saber se o microfone captou alguma coisa. Desligar volta ao envio direto.
+     */
+    reviewBeforeSend?: boolean;
     /**
      * Teto de duração da gravação, em milissegundos. Passado o tempo, o gravador para e envia o que
      * tem. Produto com limite próprio sobrescreve.
@@ -143,7 +153,7 @@ interface AudioRecorderButtonProps {
  * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
  */
 declare const DEFAULT_MAX_RECORDING_MILLISECONDS: number;
-declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
+declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, reviewBeforeSend, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
 
 /**
  * Canal de origem da conversa e o que cada um permite.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.13",
+  "version": "0.1.0-rc.15",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/AudioRecorderButton.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { AudioRecorderButton, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from './AudioRecorderButton'
+
+const noop = () => {}
+
+describe('AudioRecorderButton', () => {
+  it('começa oferecendo gravar, sem painel de revisão à vista', () => {
+    const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} />)
+
+    expect(markup).toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start}"`)
+    expect(markup).not.toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.send}"`)
+    expect(markup).not.toContain('<audio')
+  })
+
+  it('deixa o host trocar o texto de um rótulo sem perder os outros', () => {
+    const markup = renderToStaticMarkup(
+      <AudioRecorderButton onRecorded={noop} labels={{ start: 'Gravar recado' }} />,
+    )
+
+    expect(markup).toContain('title="Gravar recado"')
+  })
+
+  it('mantém a caixa de 40px do botão de enviar para a barra não pular', () => {
+    const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} />)
+
+    expect(markup).toContain('h-10 w-10')
+  })
+})

package/src/AudioRecorderButton.tsx

@@ -8,13 +8,17 @@
  * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
  */
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 export interface AudioRecorderButtonLabels {
   start: string
   stop: string
   unsupported: string
   denied: string
+  review: string
+  send: string
+  discard: string
+  empty: string
 }
 
 export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
@@ -22,6 +26,10 @@ export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
   stop: 'Parar gravação',
   unsupported: 'Este navegador não grava áudio.',
   denied: 'Sem permissão para usar o microfone.',
+  review: 'Ouça antes de enviar',
+  send: 'Enviar áudio',
+  discard: 'Descartar áudio',
+  empty: 'Nada foi captado pelo microfone.',
 }
 
 export interface AudioRecorderButtonProps {
@@ -33,6 +41,12 @@ export interface AudioRecorderButtonProps {
    * que o microfone está quebrado.
    */
   onRecordingChange?: (isRecording: boolean) => void
+  /**
+   * Abre uma etapa de revisão quando a gravação para: o áudio toca ali mesmo e só sai depois de
+   * confirmado. Ligado por padrão — voz é o único anexo que quem envia não viu antes de mandar, e
+   * sem ouvir não há como saber se o microfone captou alguma coisa. Desligar volta ao envio direto.
+   */
+  reviewBeforeSend?: boolean
   /**
    * Teto de duração da gravação, em milissegundos. Passado o tempo, o gravador para e envia o que
    * tem. Produto com limite próprio sobrescreve.
@@ -70,20 +84,41 @@ export function resolveRecordingFormat(): RecordingFormat | undefined {
   return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
 }
 
+type PendingRecording = { file: File; objectURL: string }
+
 export function AudioRecorderButton({
   onRecorded,
   onFailure,
   onRecordingChange,
+  reviewBeforeSend = true,
   maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
   labels,
   disabled,
 }: AudioRecorderButtonProps) {
-  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start
-  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop
+  const labelOf = (key: keyof AudioRecorderButtonLabels): string =>
+    labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key]
   const [isRecording, setIsRecording] = useState(false)
+  const [pending, setPending] = useState<PendingRecording | undefined>(undefined)
   const recorderRef = useRef<MediaRecorder | null>(null)
   const autoStopRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
+  // O `objectURL` é um recurso do documento, não do React: sem revogar, cada gravação descartada
+  // deixa o blob inteiro preso na memória da aba até um reload.
+  const discard = useCallback(() => {
+    setPending((current) => {
+      if (current) URL.revokeObjectURL(current.objectURL)
+      return undefined
+    })
+  }, [])
+
+  useEffect(() => discard, [discard])
+
+  const confirm = useCallback(() => {
+    if (!pending) return
+    void onRecorded(pending.file)
+    discard()
+  }, [discard, onRecorded, pending])
+
   const stop = useCallback(() => {
     recorderRef.current?.stop()
   }, [])
@@ -114,9 +149,23 @@ export function AudioRecorderButton({
         // O `File` sai com o MIME sem os parâmetros de codec: `audio/ogg;codecs=opus` serve ao
         // gravador, mas quem valida upload compara com `audio/ogg` puro.
         const blob = new Blob(chunks, { type: format.uploadMimeType })
-        void onRecorded(
-          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType }),
-        )
+        const file = new File([blob], `audio-${Date.now()}.${format.extension}`, {
+          type: format.uploadMimeType,
+        })
+
+        // Gravação vazia não vira anexo: microfone mudo ou permissão revogada no meio produzem um
+        // blob de zero byte, e mandá-lo adiante só falha lá na frente, sem dizer por quê.
+        if (blob.size === 0) {
+          onFailure?.(labelOf('empty'))
+          return
+        }
+
+        if (!reviewBeforeSend) {
+          void onRecorded(file)
+          return
+        }
+
+        setPending({ file, objectURL: URL.createObjectURL(blob) })
       })
 
       recorderRef.current = recorder
@@ -127,29 +176,66 @@ export function AudioRecorderButton({
     } catch {
       onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
     }
-  }, [labels?.denied, labels?.unsupported, maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange])
+    // `labelOf` lê `labels` a cada render e não entra aqui; o que importa para recriar o gravador
+    // são o teto de duração, o destino da gravação e se há etapa de revisão.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange, reviewBeforeSend])
+
+  const toggleLabel = isRecording ? labelOf('stop') : labelOf('start')
 
   return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={() => (isRecording ? stop() : void start())}
-      title={isRecording ? stopLabel : startLabel}
-      aria-label={isRecording ? stopLabel : startLabel}
-      aria-pressed={isRecording}
-      /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está
-         vazio, e qualquer diferença de tamanho faz a barra pular a cada letra digitada. */
-      className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-colors ${
-        isRecording
-          ? 'animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600'
-          : 'text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
-      }`}
-    >
-      {isRecording ? (
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
-      ) : (
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 11a7 7 0 0 1-14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>
+    /* O painel de revisão flutua sobre o botão em vez de ocupar espaço na barra: o microfone mora
+       na caixa do botão de enviar, e empurrar o composer para cima a cada gravação faria a
+       conversa saltar. */
+    <div className="relative flex-shrink-0">
+      {pending && (
+        <div
+          role="group"
+          aria-label={labelOf('review')}
+          className="absolute bottom-full right-0 z-20 mb-2 flex w-64 items-center gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+        >
+          <audio src={pending.objectURL} controls className="h-8 min-w-0 flex-1" />
+          <button
+            type="button"
+            onClick={discard}
+            title={labelOf('discard')}
+            aria-label={labelOf('discard')}
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+          </button>
+          <button
+            type="button"
+            onClick={confirm}
+            title={labelOf('send')}
+            aria-label={labelOf('send')}
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /></svg>
+          </button>
+        </div>
       )}
-    </button>
+      <button
+        type="button"
+        disabled={disabled || pending !== undefined}
+        onClick={() => (isRecording ? stop() : void start())}
+        title={toggleLabel}
+        aria-label={toggleLabel}
+        aria-pressed={isRecording}
+        /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está
+           vazio, e qualquer diferença de tamanho faz a barra pular a cada letra digitada. */
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-colors disabled:opacity-50 ${
+          isRecording
+            ? 'animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600'
+            : 'text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+        }`}
+      >
+        {isRecording ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
+        ) : (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 11a7 7 0 0 1-14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>
+        )}
+      </button>
+    </div>
   )
 }

package/src/RichMessageComposer.tsx

@@ -246,16 +246,17 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
       {attachmentsPreview}
 
       {quickReplies?.length ? (
-        /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-           celular come a altura da conversa, que é o que o operador precisa ver. */
-        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+           conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+           precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {quickReplies.map((quickReply) => (
             <button
               key={quickReply.id}
               type="button"
               title={quickReply.tooltip}
               onClick={() => replaceContent(quickReply.text)}
-              className="whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
+              className="flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
             >
               {quickReply.label}
             </button>

package/src/preview/ConversationPreview.tsx

@@ -305,7 +305,7 @@ export function ConversationPreview({
            que envia — sem esse aviso o operador grava, não vê nada acontecer e conclui que o
            microfone está quebrado. */
         placeholder={
-          isRecording ? 'Gravando… toque no quadrado para enviar' : (placeholder ?? 'Escreva como o cliente…')
+          isRecording ? 'Gravando… toque no quadrado para ouvir' : (placeholder ?? 'Escreva como o cliente…')
         }
         idleAction={
           uploadMedia ? (