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

package/dist/{chunk-3RKFU46R.js → chunk-QFEESERN.js}

@@ -1081,11 +1081,99 @@ var MessageComposer = ({
   );
 };
 
+// src/AudioRecorderButton.tsx
+import { useCallback as useCallback3, 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."
+};
+var DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1e3;
+var RECORDING_FORMATS = [
+  { mimeType: "audio/ogg;codecs=opus", uploadMimeType: "audio/ogg", extension: "ogg" },
+  { mimeType: "audio/mp4", uploadMimeType: "audio/mp4", extension: "m4a" },
+  { mimeType: "audio/webm", uploadMimeType: "audio/webm", extension: "webm" }
+];
+function resolveRecordingFormat() {
+  if (typeof MediaRecorder === "undefined") return void 0;
+  if (typeof MediaRecorder.isTypeSupported !== "function") return RECORDING_FORMATS[0];
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType));
+}
+function AudioRecorderButton({
+  onRecorded,
+  onFailure,
+  onRecordingChange,
+  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 [isRecording, setIsRecording] = useState7(false);
+  const recorderRef = useRef3(null);
+  const autoStopRef = useRef3(void 0);
+  const stop = useCallback3(() => {
+    recorderRef.current?.stop();
+  }, []);
+  const start = useCallback3(async () => {
+    const format = resolveRecordingFormat();
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported);
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType });
+      const chunks = [];
+      recorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) chunks.push(event.data);
+      });
+      recorder.addEventListener("stop", () => {
+        stream.getTracks().forEach((track) => track.stop());
+        clearTimeout(autoStopRef.current);
+        setIsRecording(false);
+        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 })
+        );
+      });
+      recorderRef.current = recorder;
+      recorder.start();
+      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds);
+      setIsRecording(true);
+      onRecordingChange?.(true);
+    } 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" })
+      ] })
+    }
+  );
+}
+
 // src/DateDivider.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function DateDivider({ iso, className, classNames }) {
   const { dateDivider } = useConversationLocales();
-  return /* @__PURE__ */ jsx13("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx14(
     "span",
     {
       className: cn(
@@ -1152,13 +1240,13 @@ function phoneInitials(number) {
 }
 
 // src/hooks/useAsyncResource.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef4, useState as useState8 } from "react";
 function useAsyncResource(fetcher, deps) {
-  const [data, setData] = useState7(void 0);
-  const [loading, setLoading] = useState7(false);
-  const [error, setError] = useState7(void 0);
-  const requestIdRef = useRef3(0);
-  const load = useCallback3(async () => {
+  const [data, setData] = useState8(void 0);
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(void 0);
+  const requestIdRef = useRef4(0);
+  const load = useCallback4(async () => {
     const requestId = ++requestIdRef.current;
     setLoading(true);
     setError(void 0);
@@ -1206,9 +1294,9 @@ function useConversationDocuments(conversationId, params) {
 }
 
 // src/ConversationDocumentsPanel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { ArrowUpDown, Bot, Download, Eye, Users } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var DOCUMENT_SOURCE_FILTER = {
   ALL: "all",
   CUSTOMER: "customer",
@@ -1248,12 +1336,12 @@ function ConversationDocumentsPanel({
 }) {
   const labels = { ...DEFAULT_CONVERSATION_DOCUMENTS_LABELS, ...labelsOverride };
   const context = useConversations();
-  const [search, setSearch] = useState8("");
-  const [sourceFilter, setSourceFilter] = useState8(DOCUMENT_SOURCE_FILTER.ALL);
-  const [sortDirection, setSortDirection] = useState8("desc");
-  const [page, setPage] = useState8(1);
-  const [selectedIds, setSelectedIds] = useState8([]);
-  const [archiveError, setArchiveError] = useState8(false);
+  const [search, setSearch] = useState9("");
+  const [sourceFilter, setSourceFilter] = useState9(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState9("desc");
+  const [page, setPage] = useState9(1);
+  const [selectedIds, setSelectedIds] = useState9([]);
+  const [archiveError, setArchiveError] = useState9(false);
   const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
   const { documents, total, loading, error } = useConversationDocuments(open ? conversationId : void 0, {
     search,
@@ -1304,10 +1392,10 @@ function ConversationDocumentsPanel({
     }
   }
   if (!open) return null;
-  return /* @__PURE__ */ jsx14("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs9("section", { className: cn("px-4 py-3", classNames?.body), children: [
-    /* @__PURE__ */ jsx14("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
-    /* @__PURE__ */ jsxs9("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs10("section", { className: cn("px-4 py-3", classNames?.body), children: [
+    /* @__PURE__ */ jsx15("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs10("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx15(
         "input",
         {
           type: "search",
@@ -1318,7 +1406,7 @@ function ConversationDocumentsPanel({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-52", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         "select",
         {
           value: sourceFilter,
@@ -1326,25 +1414,25 @@ function ConversationDocumentsPanel({
           "aria-label": labels.sourceFilterAll,
           className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-36", classNames?.sourceSelect),
           children: [
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         "button",
         {
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
           children: [
-            /* @__PURE__ */ jsx14(ArrowUpDown, { size: 14 }),
+            /* @__PURE__ */ jsx15(ArrowUpDown, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx14(
+      hasFilters ? /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1358,12 +1446,12 @@ function ConversationDocumentsPanel({
         }
       ) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx14("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
-    error ? /* @__PURE__ */ jsx14("p", { role: "alert", className: cn("text-xs text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
-    !loading && !error && documents.length === 0 ? /* @__PURE__ */ jsx14("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
-    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs9("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
-      /* @__PURE__ */ jsxs9("label", { className: "inline-flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx14(
+    loading ? /* @__PURE__ */ jsx15("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
+    error ? /* @__PURE__ */ jsx15("p", { role: "alert", className: cn("text-xs text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
+    !loading && !error && documents.length === 0 ? /* @__PURE__ */ jsx15("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
+      /* @__PURE__ */ jsxs10("label", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx15(
           "input",
           {
             type: "checkbox",
@@ -1374,13 +1462,13 @@ function ConversationDocumentsPanel({
         ),
         labels.selectAll
       ] }),
-      selectedIds.length > 0 ? /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
-      archiveError ? /* @__PURE__ */ jsx14("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
+      archiveError ? /* @__PURE__ */ jsx15("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx14("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+    /* @__PURE__ */ jsx15("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
       const isFromCustomer = !TEAM_SOURCES.has(document2.source);
       const SourceIcon = isFromCustomer ? Users : Bot;
-      return /* @__PURE__ */ jsxs9(
+      return /* @__PURE__ */ jsxs10(
         "li",
         {
           className: cn(
@@ -1388,8 +1476,8 @@ function ConversationDocumentsPanel({
             classNames?.item
           ),
           children: [
-            /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-              canArchive ? /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              canArchive ? /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "checkbox",
@@ -1399,9 +1487,9 @@ function ConversationDocumentsPanel({
                   className: cn("shrink-0", classNames?.checkbox)
                 }
               ) : null,
-              /* @__PURE__ */ jsx14(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-              /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsx15(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs10(
                   "div",
                   {
                     className: cn(
@@ -1410,12 +1498,12 @@ function ConversationDocumentsPanel({
                       classNames?.sourceBadge
                     ),
                     children: [
-                      /* @__PURE__ */ jsx14(SourceIcon, { size: 11 }),
+                      /* @__PURE__ */ jsx15(SourceIcon, { size: 11 }),
                       isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "div",
                   {
                     className: cn("truncate text-sm font-medium", classNames?.filename),
@@ -1423,15 +1511,15 @@ function ConversationDocumentsPanel({
                     children: document2.filename
                   }
                 ),
-                /* @__PURE__ */ jsxs9("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
+                /* @__PURE__ */ jsxs10("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
                   formatDateTime(document2.linkedAt),
                   " \xB7 ",
                   formatFileSize(document2.sizeBytes)
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -1439,10 +1527,10 @@ function ConversationDocumentsPanel({
                   title: labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.viewButton),
-                  children: /* @__PURE__ */ jsx14(Eye, { size: 14 })
+                  children: /* @__PURE__ */ jsx15(Eye, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -1450,7 +1538,7 @@ function ConversationDocumentsPanel({
                   title: labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.downloadButton),
-                  children: /* @__PURE__ */ jsx14(Download, { size: 14 })
+                  children: /* @__PURE__ */ jsx15(Download, { size: 14 })
                 }
               )
             ] })
@@ -1459,7 +1547,7 @@ function ConversationDocumentsPanel({
         document2.id
       );
     }) }),
-    total > perPage ? /* @__PURE__ */ jsxs9(
+    total > perPage ? /* @__PURE__ */ jsxs10(
       "div",
       {
         className: cn(
@@ -1467,9 +1555,9 @@ function ConversationDocumentsPanel({
           classNames?.pagination
         ),
         children: [
-          /* @__PURE__ */ jsx14("span", { className: "text-gray-400", children: labels.total(total) }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15("span", { className: "text-gray-400", children: labels.total(total) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -1480,8 +1568,8 @@ function ConversationDocumentsPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx14("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -1500,9 +1588,9 @@ function ConversationDocumentsPanel({
 }
 
 // src/DocumentsLibrary.tsx
-import { useEffect as useEffect3, useState as useState9 } from "react";
+import { useEffect as useEffect3, 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 jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_DOCUMENTS_LIBRARY_LABELS = {
   title: "Documentos",
   searchPlaceholder: "Buscar por nome do arquivo ou telefone",
@@ -1533,14 +1621,14 @@ function DocumentsLibrary({
 }) {
   const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride };
   const context = useConversations();
-  const [search, setSearch] = useState9("");
-  const [sourceFilter, setSourceFilter] = useState9(DOCUMENT_SOURCE_FILTER.ALL);
-  const [sortDirection, setSortDirection] = useState9("desc");
-  const [page, setPage] = useState9(1);
-  const [documents, setDocuments] = useState9([]);
-  const [total, setTotal] = useState9(0);
-  const [loading, setLoading] = useState9(false);
-  const [failed, setFailed] = useState9(false);
+  const [search, setSearch] = useState10("");
+  const [sourceFilter, setSourceFilter] = useState10(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState10("desc");
+  const [page, setPage] = useState10(1);
+  const [documents, setDocuments] = useState10([]);
+  const [total, setTotal] = useState10(0);
+  const [loading, setLoading] = useState10(false);
+  const [failed, setFailed] = useState10(false);
   const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
   const lastPage = Math.max(1, Math.ceil(total / perPage));
   const fetchAll = context?.api.getAllDocuments;
@@ -1577,10 +1665,10 @@ function DocumentsLibrary({
     if (url) window.open(url, "_blank", "noopener,noreferrer");
   }
   if (!fetchAll) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-3", classNames?.root, className), children: [
-    /* @__PURE__ */ jsx15("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
-    /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-3", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx16("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx16(
         "input",
         {
           type: "search",
@@ -1591,7 +1679,7 @@ function DocumentsLibrary({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-64", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         "select",
         {
           value: sourceFilter,
@@ -1599,25 +1687,25 @@ function DocumentsLibrary({
           "aria-label": labels.sourceFilterAll,
           className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-40", classNames?.sourceSelect),
           children: [
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+            /* @__PURE__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         "button",
         {
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
           children: [
-            /* @__PURE__ */ jsx15(ArrowUpDown2, { size: 14 }),
+            /* @__PURE__ */ jsx16(ArrowUpDown2, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx15(
+      hasFilters ? /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -1631,13 +1719,13 @@ function DocumentsLibrary({
         }
       ) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx15("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
-    failed ? /* @__PURE__ */ jsx15("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
-    !loading && !failed && documents.length === 0 ? /* @__PURE__ */ jsx15("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
-    /* @__PURE__ */ jsx15("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+    loading ? /* @__PURE__ */ jsx16("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
+    failed ? /* @__PURE__ */ jsx16("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
+    !loading && !failed && documents.length === 0 ? /* @__PURE__ */ jsx16("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    /* @__PURE__ */ jsx16("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
       const isFromCustomer = !TEAM_SOURCES2.has(document2.source);
       const SourceIcon = isFromCustomer ? Users2 : Bot2;
-      return /* @__PURE__ */ jsxs10(
+      return /* @__PURE__ */ jsxs11(
         "li",
         {
           className: cn(
@@ -1645,23 +1733,23 @@ function DocumentsLibrary({
             classNames?.item
           ),
           children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-              /* @__PURE__ */ jsx15(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx15("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
-                /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
-                  /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx15(SourceIcon, { size: 11 }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ jsx16(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx16("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
+                /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
+                  /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx16(SourceIcon, { size: 11 }),
                     isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
                   ] }),
-                  /* @__PURE__ */ jsx15("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx15("span", { children: formatDateTime(document2.linkedAt) }),
-                  /* @__PURE__ */ jsx15("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx15("span", { children: formatFileSize(document2.sizeBytes) })
+                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx16("span", { children: formatDateTime(document2.linkedAt) }),
+                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx16("span", { children: formatFileSize(document2.sizeBytes) })
                 ] })
               ] })
             ] }),
-            onOpenConversation ? /* @__PURE__ */ jsxs10(
+            onOpenConversation ? /* @__PURE__ */ jsxs11(
               "button",
               {
                 type: "button",
@@ -1669,13 +1757,13 @@ function DocumentsLibrary({
                 title: labels.openConversation,
                 className: cn("cv-header-action inline-flex shrink-0 items-center gap-1", classNames?.conversationLink),
                 children: [
-                  /* @__PURE__ */ jsx15(MessageSquare, { size: 12 }),
+                  /* @__PURE__ */ jsx16(MessageSquare, { size: 12 }),
                   formatPhone(document2.conversationId)
                 ]
               }
-            ) : /* @__PURE__ */ jsx15("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
-            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx15(
+            ) : /* @__PURE__ */ jsx16("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -1683,10 +1771,10 @@ function DocumentsLibrary({
                   title: labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx15(Eye2, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Eye2, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -1694,7 +1782,7 @@ function DocumentsLibrary({
                   title: labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx15(Download2, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Download2, { size: 14 })
                 }
               )
             ] })
@@ -1703,10 +1791,10 @@ function DocumentsLibrary({
         `${document2.conversationId}:${document2.id}`
       );
     }) }),
-    total > perPage ? /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
-      /* @__PURE__ */ jsx15("span", { className: "text-gray-400", children: labels.total(total) }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx15(
+    total > perPage ? /* @__PURE__ */ jsxs11("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
+      /* @__PURE__ */ jsx16("span", { className: "text-gray-400", children: labels.total(total) }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -1716,8 +1804,8 @@ function DocumentsLibrary({
             children: "\u2039"
           }
         ),
-        /* @__PURE__ */ jsx15("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -1762,6 +1850,9 @@ export {
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DEFAULT_ACCEPTED_FILE_TYPES,
   MessageComposer,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  AudioRecorderButton,
   DateDivider,
   formatPhone,
   phoneCountryFlag,

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,15 +1,18 @@
 import {
   AudioPlayer,
+  AudioRecorderButton,
   ConversationDocumentsPanel,
   ConversationLocalesProvider,
   ConversationWallpaper,
   ConversationsProvider,
   DEFAULT_ACCEPTED_FILE_TYPES,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
   DEFAULT_DOCUMENTS_LIBRARY_LABELS,
   DEFAULT_EMOJI_PICKER_LABELS,
   DEFAULT_INTERACTIVE_MESSAGE_LABELS,
   DEFAULT_LIGHTBOX_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DOCUMENT_SOURCE_FILTER,
   DateDivider,
@@ -41,7 +44,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-3RKFU46R.js";
+} from "./chunk-QFEESERN.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -2271,6 +2274,7 @@ function useInboxActions() {
 }
 export {
   AudioPlayer,
+  AudioRecorderButton,
   Avatar,
   CHANNEL_BRAND_COLOR,
   CHANNEL_CAPABILITIES,
@@ -2287,6 +2291,7 @@ export {
   ConversationWallpaper,
   ConversationsProvider,
   DEFAULT_ACCEPTED_FILE_TYPES,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DEFAULT_AVATAR_LABELS,
   DEFAULT_CONVERSATION_CHANNEL,
   DEFAULT_CONVERSATION_CONTEXT_LABELS,
@@ -2297,6 +2302,7 @@ export {
   DEFAULT_EMOJI_PICKER_LABELS,
   DEFAULT_INTERACTIVE_MESSAGE_LABELS,
   DEFAULT_LIGHTBOX_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DEFAULT_RICH_COMPOSER_TOOLTIPS,
   DEFAULT_TEMPLATES_SETTINGS_LABELS,

package/dist/preview/index.d.ts

@@ -1,4 +1,5 @@
-import { y as MessagePayload, m as ConversationSummary, k as ConversationEventSource, o as ConversationsApi, L as ListConversationsParams, l as ConversationPage, S as SSEProvider, i as ConversationDocument, A as ResolveMediaUrl } from '../types-B5C1DLu1.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-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 * as react from 'react';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';
 
@@ -205,41 +206,6 @@ type PreviewUploadedMedia = {
 declare function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'];
 declare function ConversationPreview({ client, sse, conversationId, loadMessages, placeholder, pollIntervalMs, uploadMedia, }: ConversationPreviewProps): react.JSX.Element;
 
-/**
- * Gravação de áudio no simulador, pelo microfone do próprio navegador.
- *
- * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
- * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
- *
- * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
- * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
- */
-interface AudioRecorderButtonLabels {
-    start: string;
-    stop: string;
-    unsupported: string;
-    denied: string;
-}
-declare const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels;
-interface AudioRecorderButtonProps {
-    onRecorded: (file: File) => void | Promise<void>;
-    onFailure?: (message: string) => void;
-    /**
-     * Avisa quando a gravação começa e termina. O botão é um interruptor — o segundo toque é que
-     * envia — e sem um aviso fora dele o operador grava, não vê nada acontecer e desiste achando
-     * que o microfone está quebrado.
-     */
-    onRecordingChange?: (isRecording: boolean) => void;
-    /**
-     * 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.
-     */
-    maxDurationMilliseconds?: number;
-    labels?: Partial<AudioRecorderButtonLabels>;
-    disabled?: boolean;
-}
-declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
-
 /**
  * Roteiro que mantém o preview vivo: sem tráfego chegando, a inbox é uma tela estática e as
  * transições que o atendente precisa testar (fila de espera enchendo, handoff, devolução ao bot)
@@ -338,4 +304,4 @@ type MediaTypesPreviewProps = {
 };
 declare function MediaTypesPreview({ conversationId, className, }: MediaTypesPreviewProps): react.JSX.Element;
 
-export { type AppendMessageParams, AudioRecorderButton, type AudioRecorderButtonLabels, type AudioRecorderButtonProps, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, type PreviewEmission, PreviewInProductionError, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };
+export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, type PreviewEmission, PreviewInProductionError, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };

package/dist/preview/index.js

@@ -1,12 +1,14 @@
 import {
+  AudioRecorderButton,
   ConversationDocumentsPanel,
   ConversationWallpaper,
   ConversationsProvider,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DateDivider,
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-3RKFU46R.js";
+} from "../chunk-QFEESERN.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -845,98 +847,8 @@ function createMockSSEProvider(params) {
 }
 
 // src/preview/ConversationPreview.tsx
-import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, useState as useState2 } from "react";
-
-// src/preview/AudioRecorderButton.tsx
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } 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."
-};
-var DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1e3;
-var RECORDING_FORMATS = [
-  { mimeType: "audio/ogg;codecs=opus", uploadMimeType: "audio/ogg", extension: "ogg" },
-  { mimeType: "audio/mp4", uploadMimeType: "audio/mp4", extension: "m4a" },
-  { mimeType: "audio/webm", uploadMimeType: "audio/webm", extension: "webm" }
-];
-function resolveRecordingFormat() {
-  if (typeof MediaRecorder === "undefined") return void 0;
-  if (typeof MediaRecorder.isTypeSupported !== "function") return RECORDING_FORMATS[0];
-  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType));
-}
-function AudioRecorderButton({
-  onRecorded,
-  onFailure,
-  onRecordingChange,
-  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 [isRecording, setIsRecording] = useState(false);
-  const recorderRef = useRef(null);
-  const autoStopRef = useRef(void 0);
-  const stop = useCallback(() => {
-    recorderRef.current?.stop();
-  }, []);
-  const start = useCallback(async () => {
-    const format = resolveRecordingFormat();
-    if (!format || !navigator.mediaDevices?.getUserMedia) {
-      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported);
-      return;
-    }
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType });
-      const chunks = [];
-      recorder.addEventListener("dataavailable", (event) => {
-        if (event.data.size > 0) chunks.push(event.data);
-      });
-      recorder.addEventListener("stop", () => {
-        stream.getTracks().forEach((track) => track.stop());
-        clearTimeout(autoStopRef.current);
-        setIsRecording(false);
-        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 })
-        );
-      });
-      recorderRef.current = recorder;
-      recorder.start();
-      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds);
-      setIsRecording(true);
-      onRecordingChange?.(true);
-    } catch {
-      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
-    }
-  }, [labels?.denied, labels?.unsupported, maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange]);
-  return /* @__PURE__ */ jsx(
-    "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__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-        /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
-        /* @__PURE__ */ jsx("path", { d: "M19 11a7 7 0 0 1-14 0" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" })
-      ] })
-    }
-  );
-}
-
-// src/preview/ConversationPreview.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function mediaTypeOf(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
   if (mimeType.startsWith("video/")) return "video";
@@ -983,15 +895,15 @@ function ConversationPreview({
   pollIntervalMs,
   uploadMedia
 }) {
-  const [messages, setMessages] = useState2([]);
-  const [failure, setFailure] = useState2(void 0);
-  const [loadFailure, setLoadFailure] = useState2(void 0);
-  const [isRecording, setIsRecording] = useState2(false);
-  const [pendingLocal, setPendingLocal] = useState2([]);
-  const loadMessagesRef = useRef2(loadMessages);
-  const bottomRef = useRef2(null);
+  const [messages, setMessages] = useState([]);
+  const [failure, setFailure] = useState(void 0);
+  const [loadFailure, setLoadFailure] = useState(void 0);
+  const [isRecording, setIsRecording] = useState(false);
+  const [pendingLocal, setPendingLocal] = useState([]);
+  const loadMessagesRef = useRef(loadMessages);
+  const bottomRef = useRef(null);
   loadMessagesRef.current = loadMessages;
-  const refresh = useCallback2(async () => {
+  const refresh = useCallback(async () => {
     try {
       const loaded = await loadMessagesRef.current(conversationId);
       setMessages(loaded);
@@ -1084,11 +996,11 @@ function ConversationPreview({
       setFailure(error instanceof Error ? error.message : "Falha ao enviar o arquivo.");
     }
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs2(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
-      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs2("div", { children: [
-        showDateDivider ? /* @__PURE__ */ jsx2(DateDivider, { iso: message.timestamp }) : null,
-        /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
+      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs("div", { children: [
+        showDateDivider ? /* @__PURE__ */ jsx(DateDivider, { iso: message.timestamp }) : null,
+        /* @__PURE__ */ jsx(
           MessageBubble,
           {
             message,
@@ -1098,17 +1010,17 @@ function ConversationPreview({
           }
         )
       ] }, message.id)),
-      /* @__PURE__ */ jsx2("div", { ref: bottomRef })
+      /* @__PURE__ */ jsx("div", { ref: bottomRef })
     ] }),
-    failure ? /* @__PURE__ */ jsx2("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
-    loadFailure ? /* @__PURE__ */ jsx2("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
-    /* @__PURE__ */ jsx2(
+    failure ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
+    loadFailure ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
+    /* @__PURE__ */ jsx(
       MessageComposer,
       {
         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",
-        idleAction: uploadMedia ? /* @__PURE__ */ jsx2(
+        idleAction: uploadMedia ? /* @__PURE__ */ jsx(
           AudioRecorderButton,
           {
             onRecorded: (file) => void handleAttach(file),
@@ -1218,7 +1130,7 @@ function startPreviewScript(params) {
 
 // src/preview/MediaTypesPreview.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
 function MediaTypesPreview({
   conversationId = MEDIA_TYPES_CONVERSATION_ID,
@@ -1233,26 +1145,26 @@ function MediaTypesPreview({
   const messages = PREVIEW_MESSAGES[conversationId] ?? [];
   const documents = PREVIEW_DOCUMENTS[conversationId] ?? [];
   const mimeTypes = [...new Set(documents.map((document) => document.mimeType))];
-  return /* @__PURE__ */ jsx3(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs3("div", { className, children: [
-    /* @__PURE__ */ jsxs3("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx3("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
-      /* @__PURE__ */ jsxs3("p", { className: "text-sm text-gray-500", children: [
+  return /* @__PURE__ */ jsx2(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs2("div", { className, children: [
+    /* @__PURE__ */ jsxs2("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
+      /* @__PURE__ */ jsxs2("p", { className: "text-sm text-gray-500", children: [
         documents.length,
         " arquivos, ",
         mimeTypes.length,
         " tipos. Clique no olho para abrir em aba nova e no bot\xE3o da bolha para carregar a m\xEDdia na thread \u2014 \xE9 o que teste automatizado n\xE3o v\xEA."
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
-        /* @__PURE__ */ jsx3(DocumentsLibrary, { perPage: documents.length || 20 })
+    /* @__PURE__ */ jsxs2("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs2("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
+        /* @__PURE__ */ jsx2(DocumentsLibrary, { perPage: documents.length || 20 })
       ] }),
-      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
-        /* @__PURE__ */ jsx3(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
-        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
-        /* @__PURE__ */ jsx3(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs2("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
+        /* @__PURE__ */ jsx2(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
+        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
+        /* @__PURE__ */ jsx2(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx2(
           MessageBubble,
           {
             message,

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

@@ -104,6 +104,47 @@ interface MediaRendererProps {
 }
 declare function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps): react.JSX.Element | null;
 
+/**
+ * Gravação de áudio no simulador, pelo microfone do próprio navegador.
+ *
+ * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
+ * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
+ *
+ * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
+ * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
+ */
+interface AudioRecorderButtonLabels {
+    start: string;
+    stop: string;
+    unsupported: string;
+    denied: string;
+}
+declare const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels;
+interface AudioRecorderButtonProps {
+    onRecorded: (file: File) => void | Promise<void>;
+    onFailure?: (message: string) => void;
+    /**
+     * Avisa quando a gravação começa e termina. O botão é um interruptor — o segundo toque é que
+     * envia — e sem um aviso fora dele o operador grava, não vê nada acontecer e desiste achando
+     * que o microfone está quebrado.
+     */
+    onRecordingChange?: (isRecording: boolean) => void;
+    /**
+     * 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.
+     */
+    maxDurationMilliseconds?: number;
+    labels?: Partial<AudioRecorderButtonLabels>;
+    disabled?: boolean;
+}
+/**
+ * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
+ * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
+ * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
+ */
+declare const DEFAULT_MAX_RECORDING_MILLISECONDS: number;
+declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
+
 /**
  * Canal de origem da conversa e o que cada um permite.
  *
@@ -362,4 +403,4 @@ interface ConversationDocument {
     linkedAt: string;
 }
 
-export { type ResolveMediaUrl as A, capabilitiesOf as B, CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, channelFiltersFor as E, type FormatContactHandleParams as F, contactFlag as G, HANDLE_KIND as H, type InteractiveOption as I, formatContactHandle as J, type ListConversationsParams as L, MediaRenderer as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type CompanyDocument as f, type CompanyDocumentPage as g, type ConversationChannel as h, type ConversationDocument as i, type ConversationDocumentPage as j, type ConversationEventSource as k, type ConversationPage as l, type ConversationSummary as m, type ConversationTemplate as n, type ConversationsApi as o, type ConversationsFeatures as p, type ConversationsTheme as q, type ConversationsUIConfig as r, type HandleKind as s, type InteractivePayload as t, type InteractiveSection as u, type InteractiveSelection as v, type ListDocumentsParams as w, type MediaRendererProps as x, type MessagePayload as y, type ReopenMechanism as z };
+export { AudioRecorderButton as A, type ListDocumentsParams as B, CHANNEL_CAPABILITIES as C, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS as D, type MediaRendererProps as E, type FormatContactHandleParams as F, type MessagePayload as G, HANDLE_KIND as H, type InteractiveOption as I, type ReopenMechanism as J, type ResolveMediaUrl as K, type ListConversationsParams as L, MediaRenderer as M, capabilitiesOf as N, channelFiltersFor as O, contactFlag as P, formatContactHandle as Q, REOPEN_MECHANISM as R, type SSEProvider as S, type AudioRecorderButtonLabels as a, type AudioRecorderButtonProps as b, CHANNEL_FILTER_ALL as c, CONVERSATION_CHANNEL as d, type ChannelCapabilities as e, type ChannelFilter as f, type ChannelFilterOption as g, type CompanyDocument as h, type CompanyDocumentPage as i, type ConversationChannel as j, type ConversationDocument as k, type ConversationDocumentPage as l, type ConversationEventSource as m, type ConversationPage as n, type ConversationSummary as o, type ConversationTemplate as p, type ConversationsApi as q, type ConversationsFeatures as r, type ConversationsTheme as s, type ConversationsUIConfig as t, DEFAULT_CONVERSATION_CHANNEL as u, DEFAULT_MAX_RECORDING_MILLISECONDS as v, type HandleKind as w, type InteractivePayload as x, type InteractiveSection as y, type InteractiveSelection as z };

package/package.json

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

package/src/{preview/audioRecorderFormat.test.ts → audioRecorderFormat.test.ts}

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from 'bun:test'
 
 import { resolveRecordingFormat } from './AudioRecorderButton'
-import { DEFAULT_ACCEPTED_FILE_TYPES } from '../MessageComposer'
+import { DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
 
 const originalMediaRecorder = (globalThis as Record<string, unknown>).MediaRecorder
 

package/src/index.ts

@@ -15,6 +15,12 @@ export type {
   RichComposerVariable,
   RichMessageComposerHandle,
 } from './RichMessageComposer'
+export {
+  AudioRecorderButton,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+} from './AudioRecorderButton'
+export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from './AudioRecorderButton'
 export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'

package/src/preview/ConversationPreview.tsx

@@ -20,7 +20,7 @@ import { MessageComposer } from '../MessageComposer'
 import { DateDivider } from '../DateDivider'
 import { ConversationWallpaper } from '../Wallpaper'
 import type { PreviewWebhookClient, SendPreviewMediaParams } from './createPreviewWebhookClient'
-import { AudioRecorderButton } from './AudioRecorderButton'
+import { AudioRecorderButton } from '../AudioRecorderButton'
 
 export type ConversationPreviewProps = {
   client: PreviewWebhookClient

package/src/preview/index.ts

@@ -29,8 +29,8 @@ export { ConversationPreview } from './ConversationPreview'
 export { mediaTypeOf } from './ConversationPreview'
 export type { ConversationPreviewProps, PreviewUploadedMedia } from './ConversationPreview'
 
-export { AudioRecorderButton, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from './AudioRecorderButton'
-export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from './AudioRecorderButton'
+export { AudioRecorderButton, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../AudioRecorderButton'
+export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from '../AudioRecorderButton'
 
 export {
   createPreviewWebhookClient,