@adatechnology/conversations-ui 0.1.0-rc.20 → 0.1.0-rc.21

package/dist/{chunk-OIDAIVCH.js → chunk-TV4OQRGH.js}

@@ -28,6 +28,19 @@ var DEFAULT_LOCALES = {
     untitledDocument: "Documento",
     downloadFile: "Baixar"
   },
+  transcription: {
+    label: "Transcri\xE7\xE3o",
+    copy: "Copiar",
+    copied: "Copiado!",
+    transcribe: "Transcrever \xE1udio",
+    transcribing: "Transcrevendo...",
+    retry: "Transcrever novamente",
+    failed: "Falha ao transcrever \u2014 tentar novamente",
+    empty: "Sem fala detectada",
+    unsupported: "Formato de \xE1udio n\xE3o suportado para transcri\xE7\xE3o",
+    showMore: "ver transcri\xE7\xE3o completa",
+    showLess: "ver menos"
+  },
   selection: {
     select: "Selecionar"
   },
@@ -40,6 +53,7 @@ var ConversationLocalesContext = createContext(DEFAULT_LOCALES);
 function ConversationLocalesProvider({ children, locales }) {
   const merged = {
     bubble: { ...DEFAULT_LOCALES.bubble, ...locales?.bubble },
+    transcription: { ...DEFAULT_LOCALES.transcription, ...locales?.transcription },
     selection: { ...DEFAULT_LOCALES.selection, ...locales?.selection },
     dateDivider: { ...DEFAULT_LOCALES.dateDivider, ...locales?.dateDivider }
   };
@@ -166,36 +180,183 @@ function AudioPlayer({ src, isMine = false }) {
   ] });
 }
 
+// src/AudioTranscription.tsx
+import { useCallback, useState as useState2 } from "react";
+import { Check, Copy, FileText, Loader2, RefreshCw } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/AudioTranscription.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var COPIED_FEEDBACK_MS = 2e3;
+var COLLAPSE_ABOVE_CHARS = 320;
+var COLLAPSED_LINE_CLAMP = 4;
+function AudioTranscription({ transcription, onTranscribe, isMine = false }) {
+  const { transcription: locales } = useConversationLocales();
+  const [hasCopied, setHasCopied] = useState2(false);
+  const [isTranscribing, setIsTranscribing] = useState2(false);
+  const [hasRequestFailed, setHasRequestFailed] = useState2(false);
+  const [justTranscribed, setJustTranscribed] = useState2();
+  const [isExpanded, setIsExpanded] = useState2(false);
+  const effective = justTranscribed ?? transcription;
+  const text = effective?.text?.trim() ?? "";
+  const status = effective?.status;
+  const isLong = text.length > COLLAPSE_ABOVE_CHARS;
+  const isTruncated = isLong && !isExpanded;
+  const isDone = status === "done";
+  const hasText = isDone && text.length > 0;
+  const isSilent = isDone && text.length === 0;
+  const handleCopy = useCallback(async () => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setHasCopied(true);
+      setTimeout(() => setHasCopied(false), COPIED_FEEDBACK_MS);
+    } catch {
+    }
+  }, [text]);
+  const handleTranscribe = useCallback(async () => {
+    if (!onTranscribe || isTranscribing) return;
+    setIsTranscribing(true);
+    setHasRequestFailed(false);
+    try {
+      const result = await onTranscribe();
+      if (result) setJustTranscribed(result);
+    } catch {
+      setHasRequestFailed(true);
+    } finally {
+      setIsTranscribing(false);
+    }
+  }, [onTranscribe, isTranscribing]);
+  const dividerClass = isMine ? "border-black/10 dark:border-white/10" : "border-black/10 dark:border-white/10";
+  if (!status && !onTranscribe) return null;
+  if (!status || status === "pending" || status === "failed") {
+    return /* @__PURE__ */ jsx4("div", { className: `mt-1.5 border-t pt-1.5 ${dividerClass}`, children: /* @__PURE__ */ jsx4(
+      TranscribeButton,
+      {
+        label: resolveActionLabel({ status, hasRequestFailed, isTranscribing, locales }),
+        isBusy: isTranscribing,
+        onClick: handleTranscribe,
+        isDisabled: !onTranscribe
+      }
+    ) });
+  }
+  if (status === "unsupported") {
+    return /* @__PURE__ */ jsx4("div", { className: `mt-1.5 border-t pt-1.5 ${dividerClass}`, children: /* @__PURE__ */ jsx4("p", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: locales.unsupported }) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: `mt-1.5 border-t pt-1.5 ${dividerClass}`, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mb-0.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx4(FileText, { size: 11, className: "flex-shrink-0 text-gray-500 dark:text-gray-400", "aria-hidden": true }),
+      /* @__PURE__ */ jsx4("span", { className: "text-[11px] font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400", children: locales.label }),
+      hasText && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: handleCopy,
+          title: locales.copy,
+          "aria-label": hasCopied ? locales.copied : locales.copy,
+          className: "ml-auto flex flex-shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200",
+          children: hasCopied ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx4(Check, { size: 11, "aria-hidden": true }),
+            /* @__PURE__ */ jsx4("span", { children: locales.copied })
+          ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx4(Copy, { size: 11, "aria-hidden": true }),
+            /* @__PURE__ */ jsx4("span", { children: locales.copy })
+          ] })
+        }
+      )
+    ] }),
+    isSilent ? /* @__PURE__ */ jsx4("p", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: locales.empty }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        "p",
+        {
+          className: cn(
+            "select-all whitespace-pre-wrap break-words text-[13px] leading-[18px] text-gray-700 dark:text-gray-200",
+            isTruncated && "overflow-hidden"
+          ),
+          style: isTruncated ? {
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: COLLAPSED_LINE_CLAMP
+          } : void 0,
+          children: text
+        }
+      ),
+      isLong && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: () => setIsExpanded((current) => !current),
+          className: "mt-1 text-[11px] font-medium text-gray-500 underline decoration-dotted hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+          children: isExpanded ? locales.showLess : locales.showMore
+        }
+      )
+    ] }),
+    onTranscribe && /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: handleTranscribe,
+        disabled: isTranscribing,
+        className: "mt-1 flex items-center gap-1 text-[11px] text-gray-400 opacity-0 transition-opacity hover:text-gray-600 focus:opacity-100 group-hover:opacity-100 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-300",
+        children: [
+          isTranscribing ? /* @__PURE__ */ jsx4(Loader2, { size: 10, className: "animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx4(RefreshCw, { size: 10, "aria-hidden": true }),
+          /* @__PURE__ */ jsx4("span", { children: isTranscribing ? locales.transcribing : locales.retry })
+        ]
+      }
+    )
+  ] });
+}
+function resolveActionLabel(params) {
+  if (params.isTranscribing) return params.locales.transcribing;
+  if (params.hasRequestFailed) return params.locales.retry;
+  if (params.status === "pending") return params.locales.transcribing;
+  if (params.status === "failed") return params.locales.failed;
+  return params.locales.transcribe;
+}
+function TranscribeButton({
+  label,
+  isBusy,
+  isDisabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      onClick,
+      disabled: isBusy || isDisabled,
+      className: "flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200",
+      children: [
+        isBusy ? /* @__PURE__ */ jsx4(Loader2, { size: 11, className: "animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx4(FileText, { size: 11, "aria-hidden": true }),
+        /* @__PURE__ */ jsx4("span", { children: label })
+      ]
+    }
+  );
+}
+
 // src/FileIcon.tsx
 import {
   FileArchive,
   FileAudio,
   FileImage,
   FileSpreadsheet,
-  FileText,
+  FileText as FileText2,
   FileVideo,
   File as FileGeneric,
   Presentation
 } from "lucide-react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/FileIcon.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var IMAGE_STYLE = { Icon: FileImage, colorClass: "text-violet-500" };
 var VIDEO_STYLE = { Icon: FileVideo, colorClass: "text-fuchsia-500" };
 var AUDIO_STYLE = { Icon: FileAudio, colorClass: "text-amber-500" };
 var SHEET_STYLE = { Icon: FileSpreadsheet, colorClass: "text-green-600" };
-var WORD_STYLE = { Icon: FileText, colorClass: "text-blue-500" };
+var WORD_STYLE = { Icon: FileText2, colorClass: "text-blue-500" };
 var SLIDES_STYLE = { Icon: Presentation, colorClass: "text-orange-600" };
-var TEXT_STYLE = { Icon: FileText, colorClass: "text-gray-500" };
+var TEXT_STYLE = { Icon: FileText2, colorClass: "text-gray-500" };
 var EXTENSION_STYLE = {
-  pdf: { Icon: FileText, colorClass: "text-red-500" },
+  pdf: { Icon: FileText2, colorClass: "text-red-500" },
   doc: WORD_STYLE,
   docx: WORD_STYLE,
   xls: SHEET_STYLE,
@@ -242,7 +403,7 @@ function FileIcon({ filename, mimeType, size = 20, className }) {
   const extension = resolveFileIconExtension(filename, mimeType);
   const style = EXTENSION_STYLE[extension] ?? { Icon: FileGeneric, colorClass: "text-gray-500" };
   const { Icon, colorClass } = style;
-  return /* @__PURE__ */ jsx4(Icon, { size, className: cn(colorClass, className) });
+  return /* @__PURE__ */ jsx5(Icon, { size, className: cn(colorClass, className) });
 }
 
 // src/lib/format.ts
@@ -274,8 +435,8 @@ function formatFileSize(bytes) {
 }
 
 // src/MediaRenderer.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function documentTypeLabel(filename, mimeType) {
   const extension = filename?.split(".").pop();
   if (extension && extension.length <= 5 && extension !== filename) return extension.toUpperCase();
@@ -296,9 +457,9 @@ function hasLazyRef(message) {
   return Boolean(message.uploadId || message.mediaId);
 }
 function useLazyMediaUrl(message, onResolveUrl) {
-  const [url, setUrl] = useState2(null);
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(false);
+  const [url, setUrl] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(false);
   const load = async () => {
     if (url || loading || !onResolveUrl) return;
     setLoading(true);
@@ -315,22 +476,28 @@ function useLazyMediaUrl(message, onResolveUrl) {
   };
   return { url, loading, error, load };
 }
-function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
+function MediaRenderer({
+  message,
+  onLightbox,
+  onResolveUrl,
+  onTranscribeAudio,
+  className
+}) {
   const { bubble } = useConversationLocales();
   const eagerSrc = resolveMediaSource(message);
   const lazy = useLazyMediaUrl(message, onResolveUrl);
   const src = eagerSrc ?? lazy.url;
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl);
   function LazyMediaButton({ icon, label }) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "button",
       {
         onClick: lazy.load,
         disabled: lazy.loading,
         className: "flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15",
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white", children: icon }),
-          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-gray-600 dark:text-gray-300", children: label })
+          /* @__PURE__ */ jsx6("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white", children: icon }),
+          /* @__PURE__ */ jsx6("span", { className: "truncate text-xs text-gray-600 dark:text-gray-300", children: label })
         ]
       }
     );
@@ -339,82 +506,96 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
     case "image":
     case "sticker": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx6(
           LazyMediaButton,
           {
-            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-              /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-              /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+            icon: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx6("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+              /* @__PURE__ */ jsx6("polyline", { points: "21 15 16 10 5 21" })
             ] }),
             label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage
           }
         );
       }
-      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-        /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+      return /* @__PURE__ */ jsx6("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx6("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx6("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs4("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx6("polyline", { points: "21 15 16 10 5 21" })
       ] }) }) });
     }
     case "video": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx6(
           LazyMediaButton,
           {
-            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
-              /* @__PURE__ */ jsx5("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+            icon: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx6("polygon", { points: "23 7 16 12 23 17 23 7" }),
+              /* @__PURE__ */ jsx6("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
             ] }),
             label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo
           }
         );
       }
-      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("video", { src, className: "w-full max-h-80 rounded-lg", controls: true, preload: "metadata", children: /* @__PURE__ */ jsx5("track", { kind: "captions" }) }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-        /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
-        /* @__PURE__ */ jsx5("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+      return /* @__PURE__ */ jsx6("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx6("video", { src, className: "w-full max-h-80 rounded-lg", controls: true, preload: "metadata", children: /* @__PURE__ */ jsx6("track", { kind: "captions" }) }) : /* @__PURE__ */ jsx6("div", { className: "w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs4("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx6("polygon", { points: "23 7 16 12 23 17 23 7" }),
+        /* @__PURE__ */ jsx6("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
       ] }) }) });
     }
     case "audio": {
+      const transcriptionBlock = /* @__PURE__ */ jsx6(
+        AudioTranscription,
+        {
+          transcription: message.transcription,
+          isMine: message.direction === "outbound",
+          ...onTranscribeAudio ? { onTranscribe: onTranscribeAudio } : {}
+        }
+      );
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5(
-          LazyMediaButton,
-          {
-            icon: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "translate-x-0.5", children: /* @__PURE__ */ jsx5("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
-            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio
-          }
-        );
+        return /* @__PURE__ */ jsxs4("div", { className: "min-w-[200px]", children: [
+          /* @__PURE__ */ jsx6(
+            LazyMediaButton,
+            {
+              icon: /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "translate-x-0.5", children: /* @__PURE__ */ jsx6("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
+              label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio
+            }
+          ),
+          transcriptionBlock
+        ] });
       }
-      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5(AudioPlayer, { src, isMine: message.direction === "outbound" }) : /* @__PURE__ */ jsx5("div", { className: "h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs", children: bubble.mediaUnavailable }) });
+      return /* @__PURE__ */ jsxs4("div", { className: "min-w-[200px]", children: [
+        src ? /* @__PURE__ */ jsx6(AudioPlayer, { src, isMine: message.direction === "outbound" }) : /* @__PURE__ */ jsx6("div", { className: "h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs", children: bubble.mediaUnavailable }),
+        transcriptionBlock
+      ] });
     }
     case "document": {
       const typeLabel = documentTypeLabel(message.filename, message.mimeType);
       const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null;
-      return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 min-w-[200px]", className), children: [
-        /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx5(FileIcon, { filename: message.filename, mimeType: message.mimeType }) }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium truncate", children: message.filename ?? bubble.untitledDocument }),
-          /* @__PURE__ */ jsx5("p", { className: "truncate text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
+      return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center gap-3 min-w-[200px]", className), children: [
+        /* @__PURE__ */ jsx6("div", { className: "w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx6(FileIcon, { filename: message.filename, mimeType: message.mimeType }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium truncate", children: message.filename ?? bubble.untitledDocument }),
+          /* @__PURE__ */ jsx6("p", { className: "truncate text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
         ] }),
-        src ? /* @__PURE__ */ jsx5("a", { href: src, download: message.filename, className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors", "aria-label": bubble.downloadFile, children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
-          /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-          /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
-          /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-        ] }) }) : canLazyLoad ? /* @__PURE__ */ jsx5(
+        src ? /* @__PURE__ */ jsx6("a", { href: src, download: message.filename, className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors", "aria-label": bubble.downloadFile, children: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+          /* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsx6("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsx6("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+        ] }) }) : canLazyLoad ? /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: lazy.load,
             disabled: lazy.loading,
             className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50",
             "aria-label": bubble.downloadFile,
-            children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
-              /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-              /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
-              /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+            children: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+              /* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx6("polyline", { points: "7 10 12 15 17 10" }),
+              /* @__PURE__ */ jsx6("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
             ] })
           }
         ) : null,
-        lazy.error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 flex-shrink-0", children: bubble.mediaError })
+        lazy.error && /* @__PURE__ */ jsx6("span", { className: "text-xs text-red-500 flex-shrink-0", children: bubble.mediaError })
       ] });
     }
     default:
@@ -423,7 +604,7 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
 }
 
 // src/Lightbox.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_LIGHTBOX_LABELS = {
   imageAlt: "Imagem",
   close: "Fechar"
@@ -431,16 +612,16 @@ var DEFAULT_LIGHTBOX_LABELS = {
 function Lightbox({ imageUrl, caption, onClose, labels }) {
   const imageAltLabel = labels?.imageAlt ?? DEFAULT_LIGHTBOX_LABELS.imageAlt;
   const closeLabel = labels?.close ?? DEFAULT_LIGHTBOX_LABELS.close;
-  return /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4", onClick: onClose, children: /* @__PURE__ */ jsxs4("div", { className: "max-w-[90vw] max-h-[90vh] flex flex-col items-center", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx6("img", { src: imageUrl, alt: caption ?? imageAltLabel, className: "max-w-full max-h-[80vh] object-contain rounded-lg" }),
-    caption && /* @__PURE__ */ jsx6("p", { className: "text-white text-sm mt-3 text-center", children: caption }),
-    /* @__PURE__ */ jsx6("button", { onClick: onClose, className: "mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors", children: closeLabel })
+  return /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4", onClick: onClose, children: /* @__PURE__ */ jsxs5("div", { className: "max-w-[90vw] max-h-[90vh] flex flex-col items-center", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx7("img", { src: imageUrl, alt: caption ?? imageAltLabel, className: "max-w-full max-h-[80vh] object-contain rounded-lg" }),
+    caption && /* @__PURE__ */ jsx7("p", { className: "text-white text-sm mt-3 text-center", children: caption }),
+    /* @__PURE__ */ jsx7("button", { onClick: onClose, className: "mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors", children: closeLabel })
   ] }) });
 }
 
 // src/InteractiveMessage.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FORMATTING_CLASSES = "[&_strong]:font-bold [&_em]:italic [&_del]:line-through";
 var DEFAULT_INTERACTIVE_MESSAGE_LABELS = {
   openList: "Ver op\xE7\xF5es"
@@ -453,14 +634,14 @@ function collectButtons(payload) {
 }
 function InteractiveMessage({ payload, onSelect, labels, className }) {
   const openListLabel = labels?.openList ?? DEFAULT_INTERACTIVE_MESSAGE_LABELS.openList;
-  const [isListOpen, setIsListOpen] = useState3(false);
+  const [isListOpen, setIsListOpen] = useState4(false);
   const buttons = collectButtons(payload);
   const sections = payload.action?.sections ?? [];
   const hasRows = collectRows(payload).length > 0;
   const isInteractable = onSelect !== void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-1", className), children: [
-    payload.header?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-sm font-semibold text-gray-900 dark:text-gray-100", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.header.text) }) : null,
-    payload.body?.text ? /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1", className), children: [
+    payload.header?.text ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm font-semibold text-gray-900 dark:text-gray-100", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.header.text) }) : null,
+    payload.body?.text ? /* @__PURE__ */ jsx8(
       "p",
       {
         className: cn(
@@ -470,8 +651,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
         children: parseWhatsAppFormatting(payload.body.text)
       }
     ) : null,
-    payload.footer?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-xs text-gray-500 dark:text-gray-400", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.footer.text) }) : null,
-    buttons.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: buttons.map((button) => /* @__PURE__ */ jsx7(
+    payload.footer?.text ? /* @__PURE__ */ jsx8("p", { className: cn("text-xs text-gray-500 dark:text-gray-400", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.footer.text) }) : null,
+    buttons.length > 0 ? /* @__PURE__ */ jsx8("div", { className: "mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: buttons.map((button) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -482,8 +663,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
       },
       button.id
     )) }) : null,
-    hasRows ? /* @__PURE__ */ jsxs5("div", { className: "mt-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxs5(
+    hasRows ? /* @__PURE__ */ jsxs6("div", { className: "mt-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           type: "button",
@@ -496,9 +677,9 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
           ]
         }
       ),
-      isListOpen ? /* @__PURE__ */ jsx7("div", { className: "mt-1 flex flex-col gap-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
-        section.title ? /* @__PURE__ */ jsx7("p", { className: "px-3 py-1 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400", children: section.title }) : null,
-        (section.rows ?? []).map((row) => /* @__PURE__ */ jsxs5(
+      isListOpen ? /* @__PURE__ */ jsx8("div", { className: "mt-1 flex flex-col gap-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+        section.title ? /* @__PURE__ */ jsx8("p", { className: "px-3 py-1 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400", children: section.title }) : null,
+        (section.rows ?? []).map((row) => /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -506,8 +687,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
             onClick: () => onSelect?.({ kind: "list", option: row }),
             className: "rounded-md px-3 py-1.5 text-left text-sm text-gray-900 transition-colors enabled:hover:bg-gray-100 disabled:cursor-default dark:text-gray-100 dark:enabled:hover:bg-gray-700",
             children: [
-              /* @__PURE__ */ jsx7("span", { className: "block", children: row.title }),
-              row.description ? /* @__PURE__ */ jsx7("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: row.description }) : null
+              /* @__PURE__ */ jsx8("span", { className: "block", children: row.title }),
+              row.description ? /* @__PURE__ */ jsx8("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: row.description }) : null
             ]
           },
           row.id
@@ -531,23 +712,23 @@ function createMediaUrlResolver(api) {
 
 // src/providers/ConversationsProvider.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ConversationsContext = createContext2(null);
 function ConversationsProvider({
   api,
   sse,
   children
 }) {
-  return /* @__PURE__ */ jsx8(ConversationsContext.Provider, { value: { api, sse }, children });
+  return /* @__PURE__ */ jsx9(ConversationsContext.Provider, { value: { api, sse }, children });
 }
 function useConversations() {
   return useContext2(ConversationsContext);
 }
 
 // src/MessageBubble.tsx
-import { useMemo, useState as useState4 } from "react";
-import { Check } from "lucide-react";
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useMemo, useState as useState5 } from "react";
+import { Check as Check2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var BUBBLE_COLOR = {
   agent: "bg-[#d9fdd3] dark:bg-[#005c4b]",
   bot: "bg-[#d7f0ec] dark:bg-[#0a3d3a]",
@@ -564,15 +745,21 @@ function MessageBubble({
   onToggleSelect,
   onResolveMediaUrl,
   onInteractiveSelect,
+  onTranscribeAudio,
   className
 }) {
   const { bubble, selection } = useConversationLocales();
-  const [lightboxSrc, setLightboxSrc] = useState4(null);
+  const [lightboxSrc, setLightboxSrc] = useState5(null);
   const context = useConversations();
   const resolveMediaUrl = useMemo(
     () => onResolveMediaUrl ?? (context?.api ? createMediaUrlResolver(context.api) : void 0),
     [onResolveMediaUrl, context?.api]
   );
+  const requestTranscription = useMemo(() => {
+    const transcribe = onTranscribeAudio ?? context?.api?.transcribeAudio?.bind(context.api);
+    if (!transcribe) return void 0;
+    return () => transcribe(message.id);
+  }, [onTranscribeAudio, context?.api, message.id]);
   const bubbleColor = BUBBLE_COLOR[message.sender] ?? BUBBLE_COLOR.customer;
   const hasError = message.status === "failed";
   const isMedia = MEDIA_TYPES.has(message.type);
@@ -581,7 +768,7 @@ function MessageBubble({
   const displayName = message.sender === "agent" && senderName ? senderName : bubble[message.sender] ?? message.sender;
   const tooltipText = message.status === "read" && message.readAt ? `${bubble.readAt}${formatDateTime(message.readAt)}` : message.status === "failed" ? bubble.windowExpired : void 0;
   const tailCornerClass = isFirstInGroup ? isMine ? "rounded-tr-md" : "rounded-tl-md" : "";
-  const checkbox = /* @__PURE__ */ jsx9(
+  const checkbox = /* @__PURE__ */ jsx10(
     "button",
     {
       onClick: (e) => {
@@ -594,10 +781,10 @@ function MessageBubble({
         ${isSelected ? "bg-teal-600 border-teal-600" : "bg-white/80 dark:bg-black/40 border-black/20 dark:border-white/30"}
         ${isSelecting ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
       `,
-      children: isSelected && /* @__PURE__ */ jsx9(Check, { size: 12, className: "text-white", strokeWidth: 3 })
+      children: isSelected && /* @__PURE__ */ jsx10(Check2, { size: 12, className: "text-white", strokeWidth: 3 })
     }
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -608,7 +795,7 @@ function MessageBubble({
       ),
       children: [
         isMine && checkbox,
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             onClick: isSelecting ? onToggleSelect : void 0,
@@ -621,48 +808,57 @@ function MessageBubble({
           relative
         `,
             children: [
-              isMine && isFirstInGroup && (message.sender === "bot" || message.sender === "agent" && senderName) && /* @__PURE__ */ jsx9("div", { className: "text-xs font-semibold mb-0.5 text-teal-700 dark:text-teal-400", children: displayName }),
-              message.moderation?.isOffensive && /* @__PURE__ */ jsxs6(
+              isMine && isFirstInGroup && (message.sender === "bot" || message.sender === "agent" && senderName) && /* @__PURE__ */ jsx10("div", { className: "text-xs font-semibold mb-0.5 text-teal-700 dark:text-teal-400", children: displayName }),
+              message.moderation?.isOffensive && /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   className: "mb-1 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950/60 dark:text-amber-300",
                   title: message.moderation.terms.length > 0 ? message.moderation.terms.join(", ") : void 0,
                   children: [
-                    /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
-                    /* @__PURE__ */ jsx9("span", { children: bubble.moderationFlagged })
+                    /* @__PURE__ */ jsx10("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
+                    /* @__PURE__ */ jsx10("span", { children: bubble.moderationFlagged })
                   ]
                 }
               ),
-              isMedia ? /* @__PURE__ */ jsx9(MediaRenderer, { message, onLightbox: setLightboxSrc, onResolveUrl: resolveMediaUrl }) : isInteractive && message.payload ? (
+              isMedia ? /* @__PURE__ */ jsx10(
+                MediaRenderer,
+                {
+                  message,
+                  onLightbox: setLightboxSrc,
+                  onResolveUrl: resolveMediaUrl,
+                  ...requestTranscription ? { onTranscribeAudio: requestTranscription } : {}
+                }
+              ) : isInteractive && message.payload ? (
                 // O texto da mensagem interativa mora dentro do payload (`body.text`), e `content` guarda
                 // só uma cópia achatada para busca — renderizar `content` aqui duplicaria o corpo.
-                /* @__PURE__ */ jsx9(InteractiveMessage, { payload: message.payload, onSelect: onInteractiveSelect })
-              ) : /* @__PURE__ */ jsxs6(Fragment, { children: [
-                isTemplate && /* @__PURE__ */ jsxs6("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mb-0.5", children: [
-                  /* @__PURE__ */ jsx9("span", { children: "\u{1F4E8}" }),
-                  /* @__PURE__ */ jsxs6("span", { className: "font-medium", children: [
+                /* @__PURE__ */ jsx10(InteractiveMessage, { payload: message.payload, onSelect: onInteractiveSelect })
+              ) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                isTemplate && /* @__PURE__ */ jsxs7("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mb-0.5", children: [
+                  /* @__PURE__ */ jsx10("span", { children: "\u{1F4E8}" }),
+                  /* @__PURE__ */ jsxs7("span", { className: "font-medium", children: [
                     bubble.templateLabel,
                     message.templateName ? ` \u2014 ${message.templateName}` : ""
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(message.content ?? "") })
+                /* @__PURE__ */ jsx10("div", { className: "text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(message.content ?? "") })
               ] }),
-              /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1 mt-0.5 select-none", children: [
-                /* @__PURE__ */ jsx9("span", { className: "text-xs text-black/40 dark:text-white/40 font-medium", children: formatTimestamp(message.timestamp) }),
-                isMine && message.status && /* @__PURE__ */ jsx9(StatusTicks, { status: message.status, title: tooltipText })
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-1 mt-0.5 select-none", children: [
+                /* @__PURE__ */ jsx10("span", { className: "text-xs text-black/40 dark:text-white/40 font-medium", children: formatTimestamp(message.timestamp) }),
+                isMine && message.status && /* @__PURE__ */ jsx10(StatusTicks, { status: message.status, title: tooltipText })
               ] })
             ]
           }
         ),
         !isMine && checkbox,
-        lightboxSrc && /* @__PURE__ */ jsx9(Lightbox, { imageUrl: lightboxSrc, onClose: () => setLightboxSrc(null) })
+        lightboxSrc && /* @__PURE__ */ jsx10(Lightbox, { imageUrl: lightboxSrc, onClose: () => setLightboxSrc(null) })
       ]
     }
   );
 }
 
 // src/Wallpaper.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function doodlePattern(strokeColor, opacity) {
   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='${strokeColor}' stroke-width='1.2' opacity='${opacity}'><circle cx='15' cy='15' r='3'/><path d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/><circle cx='70' cy='28' r='2'/><path d='M18 55 l6 6 m-6 0 l6 -6'/><circle cx='55' cy='68' r='2.5'/><path d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/><circle cx='8' cy='85' r='2'/><path d='M65 90 l5 5 m-5 0 l5 -5'/></g></svg>`;
   return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
@@ -679,17 +875,21 @@ var DARK_WALLPAPER = {
   backgroundRepeat: "repeat",
   backgroundSize: "100px 100px"
 };
-function ConversationWallpaper({ children, className, style }) {
-  const isDark = useIsDarkTheme();
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      className: cn("cv-wallpaper", className),
-      style: { ...isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER, ...style },
-      children
-    }
-  );
-}
+var ConversationWallpaper = forwardRef(
+  function ConversationWallpaper2({ children, className, style, onScroll }, ref) {
+    const isDark = useIsDarkTheme();
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        onScroll,
+        className: cn("cv-wallpaper", className),
+        style: { ...isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER, ...style },
+        children
+      }
+    );
+  }
+);
 
 // src/emojiCatalog.ts
 var EMOJI_CATEGORIES = [
@@ -846,8 +1046,8 @@ function searchEmojis(query) {
 }
 
 // src/EmojiPicker.tsx
-import { useState as useState5, useCallback, useMemo as useMemo2 } from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState6, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_EMOJI_PICKER_LABELS = {
   search: "Buscar emoji",
   noResults: "Nenhum emoji encontrado"
@@ -855,9 +1055,9 @@ var DEFAULT_EMOJI_PICKER_LABELS = {
 var EmojiPicker = ({ onSelect, labels, className = "" }) => {
   const searchLabel = labels?.search ?? DEFAULT_EMOJI_PICKER_LABELS.search;
   const noResultsLabel = labels?.noResults ?? DEFAULT_EMOJI_PICKER_LABELS.noResults;
-  const [activeCategory, setActiveCategory] = useState5(0);
-  const [query, setQuery] = useState5("");
-  const handleSelect = useCallback(
+  const [activeCategory, setActiveCategory] = useState6(0);
+  const [query, setQuery] = useState6("");
+  const handleSelect = useCallback2(
     (emoji) => {
       onSelect(emoji);
     },
@@ -868,8 +1068,8 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
     () => isSearching ? searchEmojis(query) : EMOJI_CATEGORIES[activeCategory].entries,
     [isSearching, query, activeCategory]
   );
-  return /* @__PURE__ */ jsxs7("div", { className: `bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx11("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8("div", { className: `bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsx12("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsx12(
       "input",
       {
         type: "search",
@@ -880,7 +1080,7 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
         className: "w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm outline-none focus:border-blue-500"
       }
     ) }),
-    isSearching ? null : /* @__PURE__ */ jsx11("div", { className: "flex border-b border-gray-200 overflow-x-auto", children: EMOJI_CATEGORIES.map((category, index) => /* @__PURE__ */ jsxs7(
+    isSearching ? null : /* @__PURE__ */ jsx12("div", { className: "flex border-b border-gray-200 overflow-x-auto", children: EMOJI_CATEGORIES.map((category, index) => /* @__PURE__ */ jsxs8(
       "button",
       {
         onClick: () => setActiveCategory(index),
@@ -893,7 +1093,7 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
       },
       category.name
     )) }),
-    visibleEntries.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "px-3 py-6 text-center text-sm text-gray-500", children: noResultsLabel }) : /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto", children: visibleEntries.map((entry) => /* @__PURE__ */ jsx11(
+    visibleEntries.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "px-3 py-6 text-center text-sm text-gray-500", children: noResultsLabel }) : /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto", children: visibleEntries.map((entry) => /* @__PURE__ */ jsx12(
       "button",
       {
         onClick: () => handleSelect(entry.emoji),
@@ -907,9 +1107,167 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
   ] });
 };
 
+// src/AudioRecorderButton.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, 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.",
+  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 = [
+  { 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,
+  reviewBeforeSend = true,
+  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
+  labels,
+  disabled
+}) {
+  const labelOf = (key) => labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key];
+  const [isRecording, setIsRecording] = useState7(false);
+  const [pending, setPending] = useState7(void 0);
+  const recorderRef = useRef2(null);
+  const autoStopRef = useRef2(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();
+  }, []);
+  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 });
+        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();
+      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds);
+      setIsRecording(true);
+      onRecordingChange?.(true);
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
+    }
+  }, [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-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end 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("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13(AudioPlayer, { src: pending.objectURL }) }),
+            /* @__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" })
+          ] })
+        }
+      )
+    ] })
+  );
+}
+
 // src/MessageComposer.tsx
-import { useState as useState6, useRef as useRef2, useCallback as useCallback2 } from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState8, useRef as useRef3, useCallback as useCallback4 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function applyQuickReplyVariables(template, variables = {}) {
   return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave) => variables[chave] ?? "");
 }
@@ -951,14 +1309,14 @@ var MessageComposer = ({
   const emojiLabel = labels?.emoji ?? DEFAULT_MESSAGE_COMPOSER_LABELS.emoji;
   const attachLabel = labels?.attach ?? DEFAULT_MESSAGE_COMPOSER_LABELS.attach;
   const sendLabel = labels?.send ?? DEFAULT_MESSAGE_COMPOSER_LABELS.send;
-  const [internalText, setInternalText] = useState6("");
-  const [showEmoji, setShowEmoji] = useState6(false);
-  const [attachments, setAttachments] = useState6([]);
-  const textareaRef = useRef2(null);
-  const fileInputRef = useRef2(null);
+  const [internalText, setInternalText] = useState8("");
+  const [showEmoji, setShowEmoji] = useState8(false);
+  const [attachments, setAttachments] = useState8([]);
+  const textareaRef = useRef3(null);
+  const fileInputRef = useRef3(null);
   const isControlled = externalValue !== void 0;
   const text = isControlled ? externalValue : internalText;
-  const setText = useCallback2((newText) => {
+  const setText = useCallback4((newText) => {
     if (isControlled) {
       externalOnChange?.(newText);
     } else {
@@ -967,7 +1325,7 @@ var MessageComposer = ({
   }, [isControlled, externalOnChange]);
   const showEmojiButton = features?.emoji !== false;
   const showAttachButton = features?.documents !== false;
-  const sendMessage = useCallback2(() => {
+  const sendMessage = useCallback4(() => {
     const trimmed = text.trim();
     if (!trimmed && attachments.length === 0) return;
     if (trimmed) onSend(trimmed);
@@ -980,19 +1338,19 @@ var MessageComposer = ({
     setShowEmoji(false);
     if (textareaRef.current) textareaRef.current.style.height = "auto";
   }, [text, attachments, onSend, onAttach, isControlled]);
-  const handleKeyDown = useCallback2((e) => {
+  const handleKeyDown = useCallback4((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       if (!disabled) sendMessage();
     }
   }, [sendMessage, disabled]);
-  const handleInput = useCallback2(() => {
+  const handleInput = useCallback4(() => {
     const ta = textareaRef.current;
     if (!ta) return;
     ta.style.height = "auto";
     ta.style.height = `${Math.min(ta.scrollHeight, 100)}px`;
   }, []);
-  const handleEmojiSelect = useCallback2((emoji) => {
+  const handleEmojiSelect = useCallback4((emoji) => {
     const ta = textareaRef.current;
     if (!ta) {
       setText(text + emoji);
@@ -1008,7 +1366,7 @@ var MessageComposer = ({
       handleInput();
     });
   }, [text, setText, handleInput]);
-  const handleFileChange = useCallback2((e) => {
+  const handleFileChange = useCallback4((e) => {
     const files = e.target.files;
     if (!files) return;
     const previews = [];
@@ -1019,7 +1377,7 @@ var MessageComposer = ({
     setAttachments((prev) => [...prev, ...previews]);
     if (fileInputRef.current) fileInputRef.current.value = "";
   }, []);
-  const removeAttachment = useCallback2((index) => {
+  const removeAttachment = useCallback4((index) => {
     setAttachments((prev) => {
       const next = [...prev];
       if (next[index].previewUrl) URL.revokeObjectURL(next[index].previewUrl);
@@ -1027,7 +1385,7 @@ var MessageComposer = ({
       return next;
     });
   }, []);
-  const insertFormatting = useCallback2((marker) => {
+  const insertFormatting = useCallback4((marker) => {
     const ta = textareaRef.current;
     if (!ta) return;
     const start = ta.selectionStart;
@@ -1041,21 +1399,22 @@ var MessageComposer = ({
       });
     }
   }, [text, setText]);
+  const effectiveIdleAction = idleAction ?? (onAttach ? /* @__PURE__ */ jsx14(AudioRecorderButton, { onRecorded: (file) => onAttach(file) }) : void 0);
   const canSend = text.trim().length > 0 || attachments.length > 0;
   const remaining = maxLength ? maxLength - text.length : null;
   return (
     /* A barra é a superfície (cinza, largura cheia, sem raio) e o campo dentro é que arredonda —
        ordem do WhatsApp. Invertido, o pill arredondado ia até a borda da tela e os cantos
        descobriam o fundo branco da página, que lia como defeito. */
-    /* @__PURE__ */ jsxs8("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), children: [
-      quickReplies && quickReplies.length > 0 && /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs10("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), children: [
+      quickReplies && quickReplies.length > 0 && /* @__PURE__ */ jsx14(
         "div",
         {
           className: cn(
             "mb-2 flex flex-nowrap gap-1 overflow-x-auto px-1 sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
             classNames?.quickReplies
           ),
-          children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx12(
+          children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1073,24 +1432,24 @@ var MessageComposer = ({
           ))
         }
       ),
-      attachments.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex gap-2 px-1 pb-2 overflow-x-auto", children: attachments.map((a, i) => /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-        a.previewUrl ? /* @__PURE__ */ jsx12("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx12("div", { className: "w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5", children: [
-          /* @__PURE__ */ jsx12("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-          /* @__PURE__ */ jsx12("polyline", { points: "14 2 14 8 20 8" })
+      attachments.length > 0 && /* @__PURE__ */ jsx14("div", { className: "flex gap-2 px-1 pb-2 overflow-x-auto", children: attachments.map((a, i) => /* @__PURE__ */ jsxs10("div", { className: "relative flex-shrink-0", children: [
+        a.previewUrl ? /* @__PURE__ */ jsx14("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx14("div", { className: "w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5", children: [
+          /* @__PURE__ */ jsx14("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+          /* @__PURE__ */ jsx14("polyline", { points: "14 2 14 8 20 8" })
         ] }) }),
-        /* @__PURE__ */ jsx12("button", { onClick: () => removeAttachment(i), className: "absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs", children: "\u2715" })
+        /* @__PURE__ */ jsx14("button", { onClick: () => removeAttachment(i), className: "absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs", children: "\u2715" })
       ] }, i)) }),
-      /* @__PURE__ */ jsxs8("div", { className: cn("flex items-end gap-1.5 rounded-xl bg-white px-3 py-2", classNames?.field), children: [
-        showEmojiButton && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-          /* @__PURE__ */ jsx12("button", { onClick: () => setShowEmoji((v) => !v), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors", "aria-label": emojiLabel, children: /* @__PURE__ */ jsxs8("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ jsx12("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-            /* @__PURE__ */ jsx12("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
-            /* @__PURE__ */ jsx12("circle", { cx: "15", cy: "9", r: "0.5", fill: "currentColor" })
+      /* @__PURE__ */ jsxs10("div", { className: cn("flex items-end gap-1.5 rounded-xl bg-white px-3 py-2", classNames?.field), children: [
+        showEmojiButton && /* @__PURE__ */ jsxs10("div", { className: "relative flex-shrink-0", children: [
+          /* @__PURE__ */ jsx14("button", { onClick: () => setShowEmoji((v) => !v), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors", "aria-label": emojiLabel, children: /* @__PURE__ */ jsxs10("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx14("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "15", cy: "9", r: "0.5", fill: "currentColor" })
           ] }) }),
-          showEmoji && /* @__PURE__ */ jsx12("div", { className: "absolute bottom-full left-0 mb-2 z-10", children: /* @__PURE__ */ jsx12(EmojiPicker, { onSelect: handleEmojiSelect }) })
+          showEmoji && /* @__PURE__ */ jsx14("div", { className: "absolute bottom-full left-0 mb-2 z-10", children: /* @__PURE__ */ jsx14(EmojiPicker, { onSelect: handleEmojiSelect }) })
         ] }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx14(
           "textarea",
           {
             ref: textareaRef,
@@ -1107,189 +1466,31 @@ var MessageComposer = ({
             style: { fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }
           }
         ),
-        showAttachButton && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-          /* @__PURE__ */ jsx12("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
-          /* @__PURE__ */ jsx12("button", { onClick: () => fileInputRef.current?.click(), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors", "aria-label": attachLabel, children: /* @__PURE__ */ jsx12("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) })
+        showAttachButton && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsx14("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
+          /* @__PURE__ */ jsx14("button", { onClick: () => fileInputRef.current?.click(), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors", "aria-label": attachLabel, children: /* @__PURE__ */ jsx14("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) })
         ] }),
-        !canSend && idleAction ? /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0", children: idleAction }) : /* @__PURE__ */ jsx12(
+        !canSend && effectiveIdleAction ? /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0", children: effectiveIdleAction }) : /* @__PURE__ */ jsx14(
           "button",
           {
             onClick: sendMessage,
             disabled: !canSend || disabled,
             className: `w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${canSend && !disabled ? "bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
             "aria-label": sendLabel,
-            children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx12("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+            children: /* @__PURE__ */ jsx14("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx14("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
           }
         )
       ] }),
-      remaining !== null && /* @__PURE__ */ jsx12("div", { className: "flex justify-end mt-1 pr-1", children: /* @__PURE__ */ jsx12("span", { className: `text-xs ${remaining < 20 ? "text-red-500" : "text-gray-400"}`, children: remaining }) })
+      remaining !== null && /* @__PURE__ */ jsx14("div", { className: "flex justify-end mt-1 pr-1", children: /* @__PURE__ */ jsx14("span", { className: `text-xs ${remaining < 20 ? "text-red-500" : "text-gray-400"}`, children: remaining }) })
     ] })
   );
 };
 
-// src/AudioRecorderButton.tsx
-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.",
-  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 = [
-  { 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,
-  reviewBeforeSend = true,
-  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
-  labels,
-  disabled
-}) {
-  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();
-  }, []);
-  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 });
-        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();
-      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds);
-      setIsRecording(true);
-      onRecordingChange?.(true);
-    } catch {
-      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
-    }
-  }, [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-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end 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("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13(AudioPlayer, { src: pending.objectURL }) }),
-            /* @__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" })
-          ] })
-        }
-      )
-    ] })
-  );
-}
-
 // src/DateDivider.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DateDivider({ iso, className, classNames }) {
   const { dateDivider } = useConversationLocales();
-  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(
+  return /* @__PURE__ */ jsx15("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx15(
     "span",
     {
       className: cn(
@@ -1356,13 +1557,13 @@ function phoneInitials(number) {
 }
 
 // src/hooks/useAsyncResource.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef4, useState as useState9 } from "react";
 function useAsyncResource(fetcher, deps) {
-  const [data, setData] = useState8(void 0);
-  const [loading, setLoading] = useState8(false);
-  const [error, setError] = useState8(void 0);
+  const [data, setData] = useState9(void 0);
+  const [loading, setLoading] = useState9(false);
+  const [error, setError] = useState9(void 0);
   const requestIdRef = useRef4(0);
-  const load = useCallback4(async () => {
+  const load = useCallback5(async () => {
     const requestId = ++requestIdRef.current;
     setLoading(true);
     setError(void 0);
@@ -1410,9 +1611,9 @@ function useConversationDocuments(conversationId, params) {
 }
 
 // src/ConversationDocumentsPanel.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { ArrowUpDown, Bot, Download, Eye, Users } 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 DOCUMENT_SOURCE_FILTER = {
   ALL: "all",
   CUSTOMER: "customer",
@@ -1452,12 +1653,12 @@ function ConversationDocumentsPanel({
 }) {
   const labels = { ...DEFAULT_CONVERSATION_DOCUMENTS_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 [selectedIds, setSelectedIds] = useState9([]);
-  const [archiveError, setArchiveError] = 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 [selectedIds, setSelectedIds] = useState10([]);
+  const [archiveError, setArchiveError] = useState10(false);
   const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
   const { documents, total, loading, error } = useConversationDocuments(open ? conversationId : void 0, {
     search,
@@ -1508,10 +1709,10 @@ function ConversationDocumentsPanel({
     }
   }
   if (!open) return null;
-  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(
+  return /* @__PURE__ */ jsx16("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs11("section", { className: cn("px-4 py-3", classNames?.body), children: [
+    /* @__PURE__ */ jsx16("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs11("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx16(
         "input",
         {
           type: "search",
@@ -1522,7 +1723,7 @@ function ConversationDocumentsPanel({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-52", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         "select",
         {
           value: sourceFilter,
@@ -1530,25 +1731,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__ */ 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(ArrowUpDown, { size: 14 }),
+            /* @__PURE__ */ jsx16(ArrowUpDown, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx15(
+      hasFilters ? /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -1562,12 +1763,12 @@ function ConversationDocumentsPanel({
         }
       ) : null
     ] }),
-    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(
+    loading ? /* @__PURE__ */ jsx16("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
+    error ? /* @__PURE__ */ jsx16("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__ */ jsx16("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs11("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
+      /* @__PURE__ */ jsxs11("label", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "checkbox",
@@ -1578,13 +1779,13 @@ function ConversationDocumentsPanel({
         ),
         labels.selectAll
       ] }),
-      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
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
+      archiveError ? /* @__PURE__ */ jsx16("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx15("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+    /* @__PURE__ */ jsx16("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__ */ jsxs10(
+      return /* @__PURE__ */ jsxs11(
         "li",
         {
           className: cn(
@@ -1592,8 +1793,8 @@ function ConversationDocumentsPanel({
             classNames?.item
           ),
           children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-              canArchive ? /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              canArchive ? /* @__PURE__ */ jsx16(
                 "input",
                 {
                   type: "checkbox",
@@ -1603,9 +1804,9 @@ function ConversationDocumentsPanel({
                   className: cn("shrink-0", classNames?.checkbox)
                 }
               ) : null,
-              /* @__PURE__ */ jsx15(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsx16(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: cn(
@@ -1614,12 +1815,12 @@ function ConversationDocumentsPanel({
                       classNames?.sourceBadge
                     ),
                     children: [
-                      /* @__PURE__ */ jsx15(SourceIcon, { size: 11 }),
+                      /* @__PURE__ */ jsx16(SourceIcon, { size: 11 }),
                       isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   "div",
                   {
                     className: cn("truncate text-sm font-medium", classNames?.filename),
@@ -1627,15 +1828,15 @@ function ConversationDocumentsPanel({
                     children: document2.filename
                   }
                 ),
-                /* @__PURE__ */ jsxs10("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
+                /* @__PURE__ */ jsxs11("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
                   formatDateTime(document2.linkedAt),
                   " \xB7 ",
                   formatFileSize(document2.sizeBytes)
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -1643,10 +1844,10 @@ function ConversationDocumentsPanel({
                   title: labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.viewButton),
-                  children: /* @__PURE__ */ jsx15(Eye, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Eye, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -1654,7 +1855,7 @@ function ConversationDocumentsPanel({
                   title: labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.downloadButton),
-                  children: /* @__PURE__ */ jsx15(Download, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Download, { size: 14 })
                 }
               )
             ] })
@@ -1663,7 +1864,7 @@ function ConversationDocumentsPanel({
         document2.id
       );
     }) }),
-    total > perPage ? /* @__PURE__ */ jsxs10(
+    total > perPage ? /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1671,9 +1872,9 @@ function ConversationDocumentsPanel({
           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(
+          /* @__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",
@@ -1684,8 +1885,8 @@ function ConversationDocumentsPanel({
                 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",
@@ -1704,9 +1905,9 @@ function ConversationDocumentsPanel({
 }
 
 // src/DocumentsLibrary.tsx
-import { useEffect as useEffect4, useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState11 } 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";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_DOCUMENTS_LIBRARY_LABELS = {
   title: "Documentos",
   searchPlaceholder: "Buscar por nome do arquivo ou telefone",
@@ -1737,14 +1938,14 @@ function DocumentsLibrary({
 }) {
   const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride };
   const context = useConversations();
-  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 [search, setSearch] = useState11("");
+  const [sourceFilter, setSourceFilter] = useState11(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState11("desc");
+  const [page, setPage] = useState11(1);
+  const [documents, setDocuments] = useState11([]);
+  const [total, setTotal] = useState11(0);
+  const [loading, setLoading] = useState11(false);
+  const [failed, setFailed] = useState11(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;
@@ -1781,10 +1982,10 @@ function DocumentsLibrary({
     if (url) window.open(url, "_blank", "noopener,noreferrer");
   }
   if (!fetchAll) return null;
-  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(
+  return /* @__PURE__ */ jsxs12("div", { className: cn("space-y-3", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx17("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx17(
         "input",
         {
           type: "search",
@@ -1795,7 +1996,7 @@ function DocumentsLibrary({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-64", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(
         "select",
         {
           value: sourceFilter,
@@ -1803,25 +2004,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__ */ 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__ */ jsx17("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx17("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx17("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(
         "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__ */ jsx16(ArrowUpDown2, { size: 14 }),
+            /* @__PURE__ */ jsx17(ArrowUpDown2, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx16(
+      hasFilters ? /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -1835,13 +2036,13 @@ function DocumentsLibrary({
         }
       ) : null
     ] }),
-    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) => {
+    loading ? /* @__PURE__ */ jsx17("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
+    failed ? /* @__PURE__ */ jsx17("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__ */ jsx17("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    /* @__PURE__ */ jsx17("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__ */ jsxs11(
+      return /* @__PURE__ */ jsxs12(
         "li",
         {
           className: cn(
@@ -1849,23 +2050,23 @@ function DocumentsLibrary({
             classNames?.item
           ),
           children: [
-            /* @__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 }),
+            /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ jsx17(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx17("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
+                /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
+                  /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx17(SourceIcon, { size: 11 }),
                     isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
                   ] }),
-                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx16("span", { children: formatDateTime(document2.linkedAt) }),
-                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx16("span", { children: formatFileSize(document2.sizeBytes) })
+                  /* @__PURE__ */ jsx17("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx17("span", { children: formatDateTime(document2.linkedAt) }),
+                  /* @__PURE__ */ jsx17("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx17("span", { children: formatFileSize(document2.sizeBytes) })
                 ] })
               ] })
             ] }),
-            onOpenConversation ? /* @__PURE__ */ jsxs11(
+            onOpenConversation ? /* @__PURE__ */ jsxs12(
               "button",
               {
                 type: "button",
@@ -1873,13 +2074,13 @@ function DocumentsLibrary({
                 title: labels.openConversation,
                 className: cn("cv-header-action inline-flex shrink-0 items-center gap-1", classNames?.conversationLink),
                 children: [
-                  /* @__PURE__ */ jsx16(MessageSquare, { size: 12 }),
+                  /* @__PURE__ */ jsx17(MessageSquare, { size: 12 }),
                   formatPhone(document2.conversationId)
                 ]
               }
-            ) : /* @__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(
+            ) : /* @__PURE__ */ jsx17("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
+            /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -1887,10 +2088,10 @@ function DocumentsLibrary({
                   title: labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx16(Eye2, { size: 14 })
+                  children: /* @__PURE__ */ jsx17(Eye2, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -1898,7 +2099,7 @@ function DocumentsLibrary({
                   title: labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx16(Download2, { size: 14 })
+                  children: /* @__PURE__ */ jsx17(Download2, { size: 14 })
                 }
               )
             ] })
@@ -1907,10 +2108,10 @@ function DocumentsLibrary({
         `${document2.conversationId}:${document2.id}`
       );
     }) }),
-    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(
+    total > perPage ? /* @__PURE__ */ jsxs12("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
+      /* @__PURE__ */ jsx17("span", { className: "text-gray-400", children: labels.total(total) }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -1920,8 +2121,8 @@ function DocumentsLibrary({
             children: "\u2039"
           }
         ),
-        /* @__PURE__ */ jsx16("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -1942,6 +2143,7 @@ export {
   StatusTicks,
   AudioPlayer,
   cn,
+  AudioTranscription,
   FileIcon,
   formatTimestamp,
   formatDateTime,
@@ -1961,14 +2163,14 @@ export {
   searchEmojis,
   DEFAULT_EMOJI_PICKER_LABELS,
   EmojiPicker,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  AudioRecorderButton,
   applyQuickReplyVariables,
   resolveQuickReply,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DEFAULT_ACCEPTED_FILE_TYPES,
   MessageComposer,
-  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
-  DEFAULT_MAX_RECORDING_MILLISECONDS,
-  AudioRecorderButton,
   DateDivider,
   formatPhone,
   phoneCountryFlag,