@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.0

package/dist/{chunk-G5BM3VBP.js → chunk-BJNRLLDO.js}

@@ -1,7 +1,7 @@
 import {
   parseWhatsAppFormatting,
   useIsDarkTheme
-} from "./chunk-2AYDBWNE.js";
+} from "./chunk-WCBDXZ3X.js";
 
 // src/ConversationLocalesProvider.tsx
 import { createContext, useContext } from "react";
@@ -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 }
   };
@@ -75,7 +89,7 @@ function Ticks({ double }) {
 }
 function StatusTicks({ status, title }) {
   const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent;
-  return /* @__PURE__ */ jsx2("span", { className: `cursor-help leading-none flex items-center ${colorClass}`, title, children: status === "failed" ? /* @__PURE__ */ jsx2(AlertTriangle, { size: 11 }) : /* @__PURE__ */ jsx2(Ticks, { double: status !== "sent" }) });
+  return /* @__PURE__ */ jsx2("span", { className: `cursor-help leading-none flex items-center ${colorClass}`, "data-cv-tooltip": title, children: status === "failed" ? /* @__PURE__ */ jsx2(AlertTriangle, { size: 11 }) : /* @__PURE__ */ jsx2(Ticks, { double: status !== "sent" }) });
 }
 
 // src/AudioPlayer.tsx
@@ -86,6 +100,10 @@ var BARS = Array.from({ length: 30 }, (_, i) => {
   const heights = [3, 5, 8, 12, 7, 10, 14, 9, 6, 11, 15, 8, 4, 13, 7, 10, 6, 12, 9, 5, 14, 8, 11, 6, 13, 7, 10, 5, 9, 4];
   return heights[i % heights.length];
 });
+var AUDIO_PLAYER_LABELS = {
+  play: "Reproduzir",
+  pause: "Pausar"
+};
 function fmt(sec) {
   if (!isFinite(sec)) return "0:00";
   const m = Math.floor(sec / 60);
@@ -147,6 +165,8 @@ function AudioPlayer({ src, isMine = false }) {
     /* @__PURE__ */ jsx3(
       "button",
       {
+        "data-cv-tooltip": playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play,
+        "aria-label": playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play,
         onClick: toggle,
         className: `flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors ${playBtn}`,
         children: playing ? /* @__PURE__ */ jsx3(Pause, { size: 16 }) : /* @__PURE__ */ jsx3(Play, { size: 16, className: "translate-x-0.5" })
@@ -166,36 +186,189 @@ 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,
+          "data-cv-tooltip": 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",
+        {
+          "data-cv-tooltip": isExpanded ? locales.showLess : locales.showMore,
+          "aria-label": isExpanded ? locales.showLess : locales.showMore,
+          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",
+      {
+        "data-cv-tooltip": isTranscribing ? locales.transcribing : locales.retry,
+        "aria-label": isTranscribing ? locales.transcribing : locales.retry,
+        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",
+    {
+      "data-cv-tooltip": label,
+      "aria-label": label,
+      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 +415,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 +447,16 @@ 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();
+  const subtype = mimeType?.split(";")[0]?.split("/")[1];
+  if (!subtype) return "FILE";
+  const compacto = subtype.split(".").pop() ?? subtype;
+  return compacto.slice(0, 12).toUpperCase();
+}
 function resolveMediaSource(message) {
   if (message.mediaUrl) return message.mediaUrl;
   if (message.base64) {
@@ -288,9 +469,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);
@@ -307,68 +488,129 @@ 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);
-  const lazyButtonClass = "text-xs text-blue-600 underline flex items-center gap-1";
+  function LazyMediaButton({ icon, label }) {
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        "data-cv-tooltip": label,
+        "aria-label": label,
+        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__ */ 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 })
+        ]
+      }
+    );
+  }
   switch (message.type) {
     case "image":
     case "sticker": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage });
+        return /* @__PURE__ */ jsx6(
+          LazyMediaButton,
+          {
+            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("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo });
+        return /* @__PURE__ */ jsx6(
+          LazyMediaButton,
+          {
+            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("button", { onClick: lazy.load, className: lazyButtonClass, children: 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 = message.mimeType?.split("/")[1]?.toUpperCase() ?? "FILE";
+      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: "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",
           {
+            "data-cv-tooltip": bubble.downloadFile,
             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:
@@ -377,7 +619,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"
@@ -385,16 +627,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", { "data-cv-tooltip": closeLabel, "aria-label": closeLabel, 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"
@@ -407,14 +649,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(
@@ -424,10 +666,12 @@ 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",
       {
+        "data-cv-tooltip": button.title,
+        "aria-label": button.title,
         type: "button",
         disabled: !isInteractable,
         onClick: () => onSelect?.({ kind: "button", option: button }),
@@ -436,10 +680,12 @@ 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",
         {
+          "data-cv-tooltip": payload.action?.button ?? openListLabel,
+          "aria-label": payload.action?.button ?? openListLabel,
           type: "button",
           onClick: () => setIsListOpen((open) => !open),
           "aria-expanded": isListOpen,
@@ -450,18 +696,20 @@ 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",
           {
+            "data-cv-tooltip": row.title,
+            "aria-label": row.title,
             type: "button",
             disabled: !isInteractable,
             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
@@ -484,24 +732,25 @@ 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 { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+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 });
+  const value = useMemo(() => ({ api, sse }), [api, sse]);
+  return /* @__PURE__ */ jsx9(ConversationsContext.Provider, { value, 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 as useMemo2, 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]",
@@ -518,40 +767,51 @@ 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(
+  const resolveMediaUrl = useMemo2(
     () => onResolveMediaUrl ?? (context?.api ? createMediaUrlResolver(context.api) : void 0),
     [onResolveMediaUrl, context?.api]
   );
+  const requestTranscription = useMemo2(() => {
+    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);
   const isTemplate = message.type === "template";
   const isInteractive = message.type === "interactive";
+  const mediaCaption = isMedia ? [message.caption, message.content].find((text) => {
+    const trimmed = text?.trim();
+    return trimmed && trimmed !== message.filename;
+  }) : void 0;
   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) => {
         e.stopPropagation();
         onToggleSelect?.();
       },
-      title: selection.select,
+      "data-cv-tooltip": selection.select,
+      "aria-label": selection.select,
       className: `
         flex-shrink-0 self-end mb-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
         ${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(
@@ -562,7 +822,7 @@ function MessageBubble({
       ),
       children: [
         isMine && checkbox,
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             onClick: isSelecting ? onToggleSelect : void 0,
@@ -575,48 +835,60 @@ 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,
+                  "data-cv-tooltip": 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__ */ jsxs7(Fragment2, { children: [
+                /* @__PURE__ */ jsx10(
+                  MediaRenderer,
+                  {
+                    message,
+                    onLightbox: setLightboxSrc,
+                    onResolveUrl: resolveMediaUrl,
+                    ...requestTranscription ? { onTranscribeAudio: requestTranscription } : {}
+                  }
+                ),
+                mediaCaption ? /* @__PURE__ */ jsx10("div", { className: "mt-1 text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(mediaCaption) }) : null
+              ] }) : 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)}")`;
@@ -633,17 +905,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 = [
@@ -800,8 +1076,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 useMemo3 } 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"
@@ -809,21 +1085,21 @@ 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);
     },
     [onSelect]
   );
   const isSearching = query.trim().length > 0;
-  const visibleEntries = useMemo2(
+  const visibleEntries = useMemo3(
     () => 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",
@@ -834,9 +1110,11 @@ 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",
       {
+        "data-cv-tooltip": category.name,
+        "aria-label": category.name,
         onClick: () => setActiveCategory(index),
         className: `px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${activeCategory === index ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"}`,
         children: [
@@ -847,13 +1125,13 @@ 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),
         className: "w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer",
         "aria-label": entry.emoji,
-        title: entry.keywords[0],
+        "data-cv-tooltip": entry.keywords[0],
         children: entry.emoji
       },
       entry.emoji
@@ -861,13 +1139,189 @@ 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,
+                "data-cv-tooltip": 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,
+                "data-cv-tooltip": 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(),
+          "data-cv-tooltip": 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 useState8, useRef as useRef3, useCallback as useCallback4 } from "react";
+
+// src/composer.constant.ts
+var COMPOSER_BAR_CLASS = "cv-composer-bar";
+var COMPOSER_TOOL_BUTTON_CLASS = "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-teal-50 hover:text-teal-600 dark:hover:bg-teal-900/30 dark:hover:text-teal-400";
+var COMPOSER_TOOL_BUTTON_ACTIVE_CLASS = "bg-teal-50 text-teal-600 dark:bg-teal-900/40 dark:text-teal-400";
+var COMPOSER_TOOL_BUTTON_IDLE_CLASS = "text-gray-400 dark:text-gray-500";
+var COMPOSER_MONOSPACE_CLASS = "bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm";
+var COMPOSER_COMPACT_WIDTH = 480;
+var QUICK_REPLY_PILL_CLASS = "whitespace-nowrap rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-sm transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400";
+
 // 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 { 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] ?? "");
+}
+function resolveQuickReply(quickReply, variables = {}) {
+  return typeof quickReply.text === "function" ? quickReply.text(variables) : applyQuickReplyVariables(quickReply.text, variables);
+}
 var DEFAULT_MESSAGE_COMPOSER_LABELS = {
   emoji: "Emoji",
   attach: "Anexar",
-  send: "Enviar"
+  send: "Enviar",
+  removeAttachment: "Remover anexo"
 };
 var DEFAULT_ACCEPTED_FILE_TYPES = [
   "image/jpeg,image/png,image/webp",
@@ -884,11 +1338,14 @@ var MessageComposer = ({
   onAttach,
   value: externalValue,
   onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
   features,
   placeholder = "Digite uma mensagem...",
   maxLength,
   disabled = false,
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  idleAction,
   className,
   classNames,
   labels
@@ -896,14 +1353,15 @@ 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 removeAttachmentLabel = labels?.removeAttachment ?? DEFAULT_MESSAGE_COMPOSER_LABELS.removeAttachment;
+  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 {
@@ -912,7 +1370,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);
@@ -925,19 +1383,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);
@@ -953,7 +1411,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 = [];
@@ -964,7 +1422,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);
@@ -972,7 +1430,7 @@ var MessageComposer = ({
       return next;
     });
   }, []);
-  const insertFormatting = useCallback2((marker) => {
+  const insertFormatting = useCallback4((marker) => {
     const ta = textareaRef.current;
     if (!ta) return;
     const start = ta.selectionStart;
@@ -986,31 +1444,56 @@ 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: [
-      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" })
+    /* @__PURE__ */ jsxs10("div", { className: cn(COMPOSER_BAR_CLASS, 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__ */ jsx14(
+            "button",
+            {
+              "data-cv-tooltip": quickReply.label,
+              "aria-label": quickReply.label,
+              type: "button",
+              onClick: () => {
+                setText(resolveQuickReply(quickReply, quickReplyVariables));
+                textareaRef.current?.focus();
+              },
+              className: cn(QUICK_REPLY_PILL_CLASS, classNames?.quickReply),
+              children: quickReply.label
+            },
+            quickReply.key
+          ))
+        }
+      ),
+      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", { "data-cv-tooltip": removeAttachmentLabel, "aria-label": removeAttachmentLabel, 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", { "data-cv-tooltip": emojiLabel, 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,
@@ -1027,31 +1510,32 @@ 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", { "data-cv-tooltip": attachLabel, 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" }) }) })
         ] }),
-        /* @__PURE__ */ jsx12(
+        !canSend && effectiveIdleAction ? /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0", children: effectiveIdleAction }) : /* @__PURE__ */ jsx14(
           "button",
           {
+            "data-cv-tooltip": sendLabel,
             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/DateDivider.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DateDivider({ iso, className, classNames }) {
   const { dateDivider } = useConversationLocales();
-  return /* @__PURE__ */ jsx13("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ 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(
@@ -1117,14 +1601,93 @@ function phoneInitials(number) {
   return digits.slice(-2);
 }
 
+// src/conversationChannel.ts
+var CONVERSATION_CHANNEL = {
+  WHATSAPP: "whatsapp",
+  MESSENGER: "messenger",
+  INSTAGRAM: "instagram",
+  WEBCHAT: "webchat"
+};
+var DEFAULT_CONVERSATION_CHANNEL = CONVERSATION_CHANNEL.WHATSAPP;
+var REOPEN_MECHANISM = {
+  TEMPLATE: "template",
+  TAG: "tag",
+  NONE: "none"
+};
+var HANDLE_KIND = {
+  PHONE: "phone",
+  USERNAME: "username",
+  SESSION: "session"
+};
+var CHANNEL_CAPABILITIES = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: {
+    label: "WhatsApp",
+    icon: "\u{1F4AC}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TEMPLATE,
+    handleKind: HANDLE_KIND.PHONE
+  },
+  [CONVERSATION_CHANNEL.MESSENGER]: {
+    // Messenger também tem 24h, mas reabre com message tag — não com template aprovado.
+    label: "Messenger",
+    icon: "\u{1F4E8}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TAG,
+    handleKind: HANDLE_KIND.USERNAME
+  },
+  [CONVERSATION_CHANNEL.INSTAGRAM]: {
+    label: "Instagram",
+    icon: "\u{1F4F7}",
+    hasSessionWindow: true,
+    windowHours: 24,
+    reopenMechanism: REOPEN_MECHANISM.TAG,
+    handleKind: HANDLE_KIND.USERNAME
+  },
+  [CONVERSATION_CHANNEL.WEBCHAT]: {
+    // Chat próprio: sem intermediário, sem janela. Bloquear o composer aqui seria inventar limite.
+    label: "Chat do site",
+    icon: "\u{1F310}",
+    hasSessionWindow: false,
+    windowHours: 0,
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION
+  }
+};
+function capabilitiesOf(channel) {
+  return CHANNEL_CAPABILITIES[channel ?? DEFAULT_CONVERSATION_CHANNEL];
+}
+var CHANNEL_FILTER_ALL = "all";
+function channelFiltersFor(conversations) {
+  const present = new Set(
+    conversations.map((conversation) => conversation.channel ?? DEFAULT_CONVERSATION_CHANNEL)
+  );
+  if (present.size < 2) return [];
+  const ordered = Object.keys(CHANNEL_CAPABILITIES).filter((channel) => present.has(channel));
+  return [
+    { value: CHANNEL_FILTER_ALL, label: "Todos" },
+    ...ordered.map((channel) => ({ value: channel, label: CHANNEL_CAPABILITIES[channel].label }))
+  ];
+}
+function formatContactHandle(params) {
+  const { handleKind } = capabilitiesOf(params.channel);
+  if (handleKind === HANDLE_KIND.PHONE) return formatPhone(params.handle);
+  if (handleKind === HANDLE_KIND.USERNAME) return params.handle.startsWith("@") ? params.handle : `@${params.handle}`;
+  return `Visitante ${params.handle.slice(-6)}`;
+}
+function contactFlag(params) {
+  return capabilitiesOf(params.channel).handleKind === HANDLE_KIND.PHONE ? phoneCountryFlag(params.handle) : "";
+}
+
 // src/hooks/useAsyncResource.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef4, useState as useState9 } from "react";
 function useAsyncResource(fetcher, deps) {
-  const [data, setData] = useState7(void 0);
-  const [loading, setLoading] = useState7(false);
-  const [error, setError] = useState7(void 0);
-  const requestIdRef = useRef3(0);
-  const load = useCallback3(async () => {
+  const [data, setData] = useState9(void 0);
+  const [loading, setLoading] = useState9(false);
+  const [error, setError] = useState9(void 0);
+  const requestIdRef = useRef4(0);
+  const load = useCallback5(async () => {
     const requestId = ++requestIdRef.current;
     setLoading(true);
     setError(void 0);
@@ -1137,7 +1700,7 @@ function useAsyncResource(fetcher, deps) {
       if (requestId === requestIdRef.current) setLoading(false);
     }
   }, deps);
-  useEffect2(() => {
+  useEffect3(() => {
     load();
   }, [load]);
   return { data, loading, error, refetch: load };
@@ -1172,9 +1735,19 @@ function useConversationDocuments(conversationId, params) {
 }
 
 // src/ConversationDocumentsPanel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState10 } from "react";
 import { ArrowUpDown, Bot, Download, Eye, Users } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/pagination.constant.ts
+var PAGINATION_LABELS = {
+  first: "Primeira p\xE1gina",
+  previous: "P\xE1gina anterior",
+  next: "Pr\xF3xima p\xE1gina",
+  last: "\xDAltima p\xE1gina"
+};
+
+// src/ConversationDocumentsPanel.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DOCUMENT_SOURCE_FILTER = {
   ALL: "all",
   CUSTOMER: "customer",
@@ -1214,12 +1787,12 @@ function ConversationDocumentsPanel({
 }) {
   const labels = { ...DEFAULT_CONVERSATION_DOCUMENTS_LABELS, ...labelsOverride };
   const context = useConversations();
-  const [search, setSearch] = useState8("");
-  const [sourceFilter, setSourceFilter] = useState8(DOCUMENT_SOURCE_FILTER.ALL);
-  const [sortDirection, setSortDirection] = useState8("desc");
-  const [page, setPage] = useState8(1);
-  const [selectedIds, setSelectedIds] = useState8([]);
-  const [archiveError, setArchiveError] = useState8(false);
+  const [search, setSearch] = 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,
@@ -1270,10 +1843,10 @@ function ConversationDocumentsPanel({
     }
   }
   if (!open) return null;
-  return /* @__PURE__ */ jsx14("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs9("section", { className: cn("px-4 py-3", classNames?.body), children: [
-    /* @__PURE__ */ jsx14("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
-    /* @__PURE__ */ jsxs9("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ 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",
@@ -1284,7 +1857,7 @@ function ConversationDocumentsPanel({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-52", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs11(
         "select",
         {
           value: sourceFilter,
@@ -1292,27 +1865,31 @@ function ConversationDocumentsPanel({
           "aria-label": labels.sourceFilterAll,
           className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-36", classNames?.sourceSelect),
           children: [
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
-            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+            /* @__PURE__ */ 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__ */ jsxs9(
+      /* @__PURE__ */ jsxs11(
         "button",
         {
+          "data-cv-tooltip": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
+          "aria-label": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
           children: [
-            /* @__PURE__ */ jsx14(ArrowUpDown, { size: 14 }),
+            /* @__PURE__ */ jsx16(ArrowUpDown, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx14(
+      hasFilters ? /* @__PURE__ */ jsx16(
         "button",
         {
+          "data-cv-tooltip": labels.clearFilters,
+          "aria-label": labels.clearFilters,
           type: "button",
           onClick: () => applyFilter(() => {
             setSearch("");
@@ -1324,12 +1901,12 @@ function ConversationDocumentsPanel({
         }
       ) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx14("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
-    error ? /* @__PURE__ */ jsx14("p", { role: "alert", className: cn("text-xs text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
-    !loading && !error && documents.length === 0 ? /* @__PURE__ */ jsx14("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
-    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs9("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
-      /* @__PURE__ */ jsxs9("label", { className: "inline-flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx14(
+    loading ? /* @__PURE__ */ 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",
@@ -1340,13 +1917,13 @@ function ConversationDocumentsPanel({
         ),
         labels.selectAll
       ] }),
-      selectedIds.length > 0 ? /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
-      archiveError ? /* @__PURE__ */ jsx14("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx16("button", { "data-cv-tooltip": labels.downloadSelected(selectedIds.length), "aria-label": labels.downloadSelected(selectedIds.length), 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__ */ jsx14("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__ */ jsxs9(
+      return /* @__PURE__ */ jsxs11(
         "li",
         {
           className: cn(
@@ -1354,8 +1931,8 @@ function ConversationDocumentsPanel({
             classNames?.item
           ),
           children: [
-            /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-              canArchive ? /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              canArchive ? /* @__PURE__ */ jsx16(
                 "input",
                 {
                   type: "checkbox",
@@ -1365,9 +1942,9 @@ function ConversationDocumentsPanel({
                   className: cn("shrink-0", classNames?.checkbox)
                 }
               ) : null,
-              /* @__PURE__ */ jsx14(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-              /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsx16(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: cn(
@@ -1376,47 +1953,47 @@ function ConversationDocumentsPanel({
                       classNames?.sourceBadge
                     ),
                     children: [
-                      /* @__PURE__ */ jsx14(SourceIcon, { size: 11 }),
+                      /* @__PURE__ */ jsx16(SourceIcon, { size: 11 }),
                       isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx16(
                   "div",
                   {
                     className: cn("truncate text-sm font-medium", classNames?.filename),
-                    title: document2.filename,
+                    "data-cv-tooltip": document2.filename,
                     children: document2.filename
                   }
                 ),
-                /* @__PURE__ */ jsxs9("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__ */ jsxs9("div", { className: "flex shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "inline"),
-                  title: labels.view,
+                  "data-cv-tooltip": labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.viewButton),
-                  children: /* @__PURE__ */ jsx14(Eye, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Eye, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "attachment"),
-                  title: labels.download,
+                  "data-cv-tooltip": labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.downloadButton),
-                  children: /* @__PURE__ */ jsx14(Download, { size: 14 })
+                  children: /* @__PURE__ */ jsx16(Download, { size: 14 })
                 }
               )
             ] })
@@ -1425,7 +2002,7 @@ function ConversationDocumentsPanel({
         document2.id
       );
     }) }),
-    total > perPage ? /* @__PURE__ */ jsxs9(
+    total > perPage ? /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1433,27 +2010,29 @@ function ConversationDocumentsPanel({
           classNames?.pagination
         ),
         children: [
-          /* @__PURE__ */ jsx14("span", { className: "text-gray-400", children: labels.total(total) }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ 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",
                 onClick: () => setPage(page - 1),
                 disabled: page <= 1,
-                "aria-label": labels.sortOldest,
+                "aria-label": PAGINATION_LABELS.previous,
+                "data-cv-tooltip": PAGINATION_LABELS.previous,
                 className: "cv-header-icon disabled:opacity-40",
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx14("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx16("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 type: "button",
                 onClick: () => setPage(page + 1),
                 disabled: page >= lastPage,
-                "aria-label": labels.sortMostRecent,
+                "aria-label": PAGINATION_LABELS.next,
+                "data-cv-tooltip": PAGINATION_LABELS.next,
                 className: "cv-header-icon disabled:opacity-40",
                 children: "\u203A"
               }
@@ -1466,9 +2045,9 @@ function ConversationDocumentsPanel({
 }
 
 // src/DocumentsLibrary.tsx
-import { useEffect as useEffect3, useState as useState9 } from "react";
-import { ArrowUpDown as ArrowUpDown2, Bot as Bot2, Download as Download2, Eye as Eye2, MessageSquare, Users as Users2 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState11 } from "react";
+import { ArrowUpDown as ArrowUpDown2, Bot as Bot2, Download as Download2, Eye as Eye2, MessageSquare, Upload, Users as Users2 } from "lucide-react";
+import { Fragment as Fragment4, 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",
@@ -1485,6 +2064,8 @@ var DEFAULT_DOCUMENTS_LIBRARY_LABELS = {
   sortMostRecent: "Mais recentes",
   sortOldest: "Mais antigos",
   clearFilters: "Limpar filtros",
+  upload: "Enviar documento",
+  uploadError: "N\xE3o foi poss\xEDvel enviar o arquivo.",
   total: (count) => `${count} arquivo${count === 1 ? "" : "s"}`,
   page: (current, last) => `${current} / ${last}`
 };
@@ -1499,18 +2080,23 @@ function DocumentsLibrary({
 }) {
   const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride };
   const context = useConversations();
-  const [search, setSearch] = useState9("");
-  const [sourceFilter, setSourceFilter] = useState9(DOCUMENT_SOURCE_FILTER.ALL);
-  const [sortDirection, setSortDirection] = useState9("desc");
-  const [page, setPage] = useState9(1);
-  const [documents, setDocuments] = useState9([]);
-  const [total, setTotal] = useState9(0);
-  const [loading, setLoading] = useState9(false);
-  const [failed, setFailed] = useState9(false);
+  const [search, setSearch] = 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 [uploading, setUploading] = useState11(false);
+  const [uploadFailed, setUploadFailed] = useState11(false);
+  const [reloadToken, setReloadToken] = useState11(0);
+  const fileInputRef = useRef5(null);
   const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
   const lastPage = Math.max(1, Math.ceil(total / perPage));
   const fetchAll = context?.api.getAllDocuments;
-  useEffect3(() => {
+  const uploadDocument = context?.api.uploadDocument;
+  useEffect4(() => {
     if (!fetchAll) return;
     let active = true;
     setLoading(true);
@@ -1533,7 +2119,7 @@ function DocumentsLibrary({
     return () => {
       active = false;
     };
-  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage]);
+  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage, reloadToken]);
   function applyFilter(change) {
     change();
     setPage(1);
@@ -1542,11 +2128,24 @@ function DocumentsLibrary({
     const url = await context?.api.getDocumentUrl(uploadId, disposition);
     if (url) window.open(url, "_blank", "noopener,noreferrer");
   }
+  async function handleUpload(file) {
+    if (!uploadDocument) return;
+    setUploading(true);
+    setUploadFailed(false);
+    try {
+      await uploadDocument(file);
+      setReloadToken((token) => token + 1);
+    } catch {
+      setUploadFailed(true);
+    } finally {
+      setUploading(false);
+    }
+  }
   if (!fetchAll) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-3", classNames?.root, className), children: [
-    /* @__PURE__ */ jsx15("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
-    /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ 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",
@@ -1557,7 +2156,7 @@ function DocumentsLibrary({
           className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-64", classNames?.search)
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs12(
         "select",
         {
           value: sourceFilter,
@@ -1565,27 +2164,31 @@ function DocumentsLibrary({
           "aria-label": labels.sourceFilterAll,
           className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-40", classNames?.sourceSelect),
           children: [
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
-            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+            /* @__PURE__ */ 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__ */ jsxs10(
+      /* @__PURE__ */ jsxs12(
         "button",
         {
+          "data-cv-tooltip": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
+          "aria-label": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
           children: [
-            /* @__PURE__ */ jsx15(ArrowUpDown2, { size: 14 }),
+            /* @__PURE__ */ jsx17(ArrowUpDown2, { size: 14 }),
             sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
           ]
         }
       ),
-      hasFilters ? /* @__PURE__ */ jsx15(
+      hasFilters ? /* @__PURE__ */ jsx17(
         "button",
         {
+          "data-cv-tooltip": labels.clearFilters,
+          "aria-label": labels.clearFilters,
           type: "button",
           onClick: () => applyFilter(() => {
             setSearch("");
@@ -1595,15 +2198,46 @@ function DocumentsLibrary({
           className: cn("cv-header-action", classNames?.clearButton),
           children: labels.clearFilters
         }
-      ) : null
+      ) : null,
+      uploadDocument ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        /* @__PURE__ */ jsx17(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            hidden: true,
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              event.target.value = "";
+              if (file) void handleUpload(file);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            "data-cv-tooltip": labels.upload,
+            "aria-label": labels.upload,
+            type: "button",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: uploading,
+            className: "cv-header-action ml-auto inline-flex items-center gap-1 disabled:opacity-40",
+            children: [
+              /* @__PURE__ */ jsx17(Upload, { size: 14, "aria-hidden": "true" }),
+              labels.upload
+            ]
+          }
+        )
+      ] }) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx15("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
-    failed ? /* @__PURE__ */ jsx15("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
-    !loading && !failed && documents.length === 0 ? /* @__PURE__ */ jsx15("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
-    /* @__PURE__ */ jsx15("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+    loading ? /* @__PURE__ */ 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,
+    uploadFailed ? /* @__PURE__ */ jsx17("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.uploadError }) : 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__ */ jsxs10(
+      return /* @__PURE__ */ jsxs12(
         "li",
         {
           className: cn(
@@ -1611,56 +2245,57 @@ function DocumentsLibrary({
             classNames?.item
           ),
           children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-              /* @__PURE__ */ jsx15(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
-              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx15("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
-                /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
-                  /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx15(SourceIcon, { size: 11 }),
+            /* @__PURE__ */ 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), "data-cv-tooltip": 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__ */ jsx15("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx15("span", { children: formatDateTime(document2.linkedAt) }),
-                  /* @__PURE__ */ jsx15("span", { children: "\xB7" }),
-                  /* @__PURE__ */ jsx15("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__ */ jsxs10(
+            onOpenConversation ? /* @__PURE__ */ jsxs12(
               "button",
               {
                 type: "button",
                 onClick: () => onOpenConversation(document2.conversationId),
-                title: labels.openConversation,
+                "data-cv-tooltip": labels.openConversation,
+                "aria-label": labels.openConversation,
                 className: cn("cv-header-action inline-flex shrink-0 items-center gap-1", classNames?.conversationLink),
                 children: [
-                  /* @__PURE__ */ jsx15(MessageSquare, { size: 12 }),
+                  /* @__PURE__ */ jsx17(MessageSquare, { size: 12 }),
                   formatPhone(document2.conversationId)
                 ]
               }
-            ) : /* @__PURE__ */ jsx15("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
-            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx15(
+            ) : /* @__PURE__ */ 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",
                   onClick: () => void handleOpen(document2.id, "inline"),
-                  title: labels.view,
+                  "data-cv-tooltip": labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx15(Eye2, { size: 14 })
+                  children: /* @__PURE__ */ jsx17(Eye2, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "attachment"),
-                  title: labels.download,
+                  "data-cv-tooltip": labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: "cv-header-icon",
-                  children: /* @__PURE__ */ jsx15(Download2, { size: 14 })
+                  children: /* @__PURE__ */ jsx17(Download2, { size: 14 })
                 }
               )
             ] })
@@ -1669,12 +2304,14 @@ function DocumentsLibrary({
         `${document2.conversationId}:${document2.id}`
       );
     }) }),
-    total > perPage ? /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
-      /* @__PURE__ */ jsx15("span", { className: "text-gray-400", children: labels.total(total) }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx15(
+    total > perPage ? /* @__PURE__ */ 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",
           {
+            "data-cv-tooltip": PAGINATION_LABELS.previous,
+            "aria-label": PAGINATION_LABELS.previous,
             type: "button",
             onClick: () => setPage(page - 1),
             disabled: page <= 1,
@@ -1682,10 +2319,12 @@ function DocumentsLibrary({
             children: "\u2039"
           }
         ),
-        /* @__PURE__ */ jsx15("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+        /* @__PURE__ */ jsx17(
           "button",
           {
+            "data-cv-tooltip": PAGINATION_LABELS.next,
+            "aria-label": PAGINATION_LABELS.next,
             type: "button",
             onClick: () => setPage(page + 1),
             disabled: page >= lastPage,
@@ -1698,17 +2337,312 @@ function DocumentsLibrary({
   ] });
 }
 
+// src/preview/ConversationSimulatorClient.ts
+var SIMULATOR_FILE_MEDIA_KINDS = ["image", "video", "document"];
+function mediaKindOf(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  return "document";
+}
+function acceptsMediaKind(client, kind) {
+  if (!client.sendMedia) return false;
+  return client.acceptedMediaKinds?.includes(kind) ?? true;
+}
+function isConversationSimulatorClient(candidate) {
+  return typeof candidate.sendReply === "function";
+}
+function toConversationSimulatorClient({
+  client,
+  uploadMedia
+}) {
+  const upload = uploadMedia ?? client.uploadMedia;
+  const base = {
+    sendText: (text) => client.sendText(text),
+    sendReply: (selection) => {
+      const reply = { id: selection.option.id, title: selection.option.title };
+      return selection.kind === "button" ? client.sendButtonReply(reply) : client.sendListReply(reply);
+    }
+  };
+  if (!upload) return base;
+  return {
+    ...base,
+    sendMedia: async ({ mediaKind, file, mimeType, filename, caption }) => {
+      const uploaded = await upload(file);
+      await client.sendMedia({
+        // O tipo sai do MIME que o upload devolveu quando ele existe: host que normaliza o formato
+        // (áudio gravado em `webm` que sobe como `ogg`) mudava de tipo, e a mídia chegava como
+        // documento.
+        mediaType: uploaded.mimeType ? mediaKindOf(uploaded.mimeType) : mediaKind,
+        mediaId: uploaded.mediaId,
+        mimeType: uploaded.mimeType ?? mimeType ?? file.type,
+        filename: uploaded.filename ?? filename ?? file.name,
+        ...caption ? { caption } : {}
+      });
+    }
+  };
+}
+
+// src/preview/ConversationPreview.tsx
+import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef6, useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function mediaTypeOf(mimeType) {
+  return mediaKindOf(mimeType);
+}
+var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
+var FOLLOW_UP_REFRESH_MS = [400, 1200, 3e3];
+function decorate(messages) {
+  return messages.map((message, index) => {
+    const previous = index > 0 ? messages[index - 1] : void 0;
+    const currentTime = new Date(message.timestamp).getTime();
+    const previousTime = previous ? new Date(previous.timestamp).getTime() : 0;
+    return {
+      message,
+      isFirstInGroup: !previous || previous.sender !== message.sender || currentTime - previousTime > GROUPING_WINDOW_MS,
+      showDateDivider: !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
+    };
+  });
+}
+function statusOf(error) {
+  if (typeof error !== "object" || error === null) return void 0;
+  const candidate = error;
+  const value = candidate.status ?? candidate.statusCode;
+  return typeof value === "number" ? value : void 0;
+}
+function isNotFound(error) {
+  return statusOf(error) === 404;
+}
+function describeLoadFailure(error) {
+  const status = statusOf(error);
+  if (status === 401 || status === 403) {
+    return "Sem sess\xE3o de administrador nesta aba: a mensagem \xE9 entregue no webhook, mas o transcript n\xE3o pode ser lido. Entre no painel nesta mesma aba e reabra o simulador.";
+  }
+  if (error instanceof Error && error.message) return `N\xE3o foi poss\xEDvel ler o transcript: ${error.message}`;
+  return "N\xE3o foi poss\xEDvel ler o transcript da conversa.";
+}
+function ConversationPreview({
+  client,
+  sse,
+  conversationId,
+  loadMessages,
+  placeholder,
+  pollIntervalMs,
+  uploadMedia
+}) {
+  const [messages, setMessages] = useState12([]);
+  const [failure, setFailure] = useState12(void 0);
+  const [loadFailure, setLoadFailure] = useState12(void 0);
+  const [isRecording, setIsRecording] = useState12(false);
+  const [pendingLocal, setPendingLocal] = useState12([]);
+  const loadMessagesRef = useRef6(loadMessages);
+  const bottomRef = useRef6(null);
+  loadMessagesRef.current = loadMessages;
+  const simulator = useMemo4(
+    () => isConversationSimulatorClient(client) ? client : toConversationSimulatorClient({ client, ...uploadMedia ? { uploadMedia } : {} }),
+    [client, uploadMedia]
+  );
+  const refresh = useCallback6(async () => {
+    try {
+      const loaded = await loadMessagesRef.current(conversationId);
+      setMessages(loaded);
+      setLoadFailure(void 0);
+      if (loaded.length > 0) setPendingLocal([]);
+    } catch (error) {
+      if (isNotFound(error)) {
+        setMessages([]);
+        setLoadFailure(void 0);
+        return;
+      }
+      setLoadFailure(describeLoadFailure(error));
+    }
+  }, [conversationId]);
+  useEffect5(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect5(() => {
+    const source = sse.connectConversationStream(conversationId);
+    const handler = () => {
+      void refresh();
+    };
+    source.addEventListener("message", handler);
+    return () => {
+      source.removeEventListener("message", handler);
+      source.close();
+    };
+  }, [sse, conversationId, refresh]);
+  useEffect5(() => {
+    if (!pollIntervalMs) return;
+    const timer = setInterval(() => void refresh(), pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [pollIntervalMs, refresh]);
+  useEffect5(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [messages]);
+  const rendered = useMemo4(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal]);
+  async function refreshWithFollowUps() {
+    await refresh();
+    for (const atraso of FOLLOW_UP_REFRESH_MS) {
+      setTimeout(() => void refresh(), atraso);
+    }
+  }
+  async function handleSend(text) {
+    setFailure(void 0);
+    try {
+      await simulator.sendText(text);
+      setPendingLocal((current) => [
+        ...current,
+        {
+          id: `local-${current.length}-${text.length}`,
+          type: "text",
+          content: text,
+          // Do ponto de vista do servidor, mensagem do cliente é inbound — é assim que ela aparece
+          // como "minha" nesta visão.
+          direction: "inbound",
+          sender: "customer",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          status: "sent"
+        }
+      ]);
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a mensagem no webhook.");
+    }
+  }
+  async function handleInteractiveSelect(selection) {
+    setFailure(void 0);
+    try {
+      await simulator.sendReply(selection);
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a resposta no webhook.");
+    }
+  }
+  const sendMedia = simulator.sendMedia;
+  const canAttachFile = SIMULATOR_FILE_MEDIA_KINDS.some((kind) => acceptsMediaKind(simulator, kind));
+  const canRecordAudio = acceptsMediaKind(simulator, "audio");
+  async function handleAttach(file) {
+    if (!sendMedia) return;
+    setFailure(void 0);
+    try {
+      await sendMedia({
+        mediaKind: mediaKindOf(file.type),
+        file,
+        mimeType: file.type,
+        filename: file.name
+      });
+      await refreshWithFollowUps();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao enviar o arquivo.");
+    }
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs13(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
+      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs13("div", { children: [
+        showDateDivider ? /* @__PURE__ */ jsx18(DateDivider, { iso: message.timestamp }) : null,
+        /* @__PURE__ */ jsx18(
+          MessageBubble,
+          {
+            message,
+            isMine: message.direction === "inbound",
+            isFirstInGroup,
+            onInteractiveSelect: message.direction === "outbound" ? (selection) => void handleInteractiveSelect(selection) : void 0
+          }
+        )
+      ] }, message.id)),
+      /* @__PURE__ */ jsx18("div", { ref: bottomRef })
+    ] }),
+    failure ? /* @__PURE__ */ jsx18("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
+    loadFailure ? /* @__PURE__ */ jsx18("p", { role: "status", className: "px-4 py-2 text-sm text-amber-700 dark:text-amber-400", children: loadFailure }) : null,
+    /* @__PURE__ */ jsx18(
+      MessageComposer,
+      {
+        onSend: (text) => void handleSend(text),
+        onAttach: canAttachFile ? (file) => void handleAttach(file) : void 0,
+        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para ouvir" : placeholder ?? "Escreva como o cliente\u2026",
+        idleAction: canRecordAudio ? /* @__PURE__ */ jsx18(
+          AudioRecorderButton,
+          {
+            onRecorded: (file) => void handleAttach(file),
+            onFailure: (message) => setFailure(message),
+            onRecordingChange: setIsRecording
+          }
+        ) : void 0
+      }
+    )
+  ] });
+}
+
+// src/preview/ConversationSimulatorPanel.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS = {
+  title: "Simulador do cliente",
+  destinationHint: "entrega no webhook real",
+  close: "Fechar simulador",
+  placeholder: "Escreva como o cliente\u2026"
+};
+var SIMULATOR_PANEL_CHANNEL_WORDING = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder
+  },
+  [CONVERSATION_CHANNEL.MESSENGER]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder
+  },
+  [CONVERSATION_CHANNEL.INSTAGRAM]: {
+    destinationHint: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.destinationHint,
+    placeholder: DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS.placeholder
+  },
+  [CONVERSATION_CHANNEL.WEBCHAT]: {
+    destinationHint: "entrega na API do chat do site",
+    placeholder: "Escreva como o visitante\u2026"
+  }
+};
+function simulatorPanelLabelsOf(channel) {
+  return {
+    ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+    ...SIMULATOR_PANEL_CHANNEL_WORDING[channel ?? DEFAULT_CONVERSATION_CHANNEL]
+  };
+}
+function ConversationSimulatorPanel({
+  onClose,
+  channel,
+  displayHandle,
+  displayNumber,
+  labels,
+  headerActions,
+  ...previewProps
+}) {
+  const text = { ...simulatorPanelLabelsOf(channel), ...labels };
+  const subtitle = [displayHandle ?? displayNumber ?? previewProps.conversationId, text.destinationHint].join(" \xB7 ");
+  return /* @__PURE__ */ jsxs14("aside", { className: "cv-simulator-panel", "aria-label": text.title, children: [
+    /* @__PURE__ */ jsxs14("header", { className: "cv-simulator-panel__header", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "cv-simulator-panel__heading", children: [
+        /* @__PURE__ */ jsx19("h2", { className: "cv-simulator-panel__title", children: text.title }),
+        /* @__PURE__ */ jsx19("p", { className: "cv-simulator-panel__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "cv-simulator-panel__actions", children: [
+        headerActions,
+        /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "data-cv-tooltip": text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx19("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx19("div", { className: "cv-simulator-panel__body", children: /* @__PURE__ */ jsx19(ConversationPreview, { ...previewProps, placeholder: text.placeholder }) })
+  ] });
+}
+
 export {
   ConversationLocalesProvider,
   useConversationLocales,
   StatusTicks,
   AudioPlayer,
   cn,
+  AudioTranscription,
   FileIcon,
   formatTimestamp,
   formatDateTime,
   isSameDay,
   formatFileSize,
+  documentTypeLabel,
   MediaRenderer,
   DEFAULT_LIGHTBOX_LABELS,
   Lightbox,
@@ -1723,20 +2657,52 @@ export {
   searchEmojis,
   DEFAULT_EMOJI_PICKER_LABELS,
   EmojiPicker,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  AudioRecorderButton,
+  COMPOSER_BAR_CLASS,
+  COMPOSER_TOOL_BUTTON_CLASS,
+  COMPOSER_TOOL_BUTTON_ACTIVE_CLASS,
+  COMPOSER_TOOL_BUTTON_IDLE_CLASS,
+  COMPOSER_MONOSPACE_CLASS,
+  COMPOSER_COMPACT_WIDTH,
+  QUICK_REPLY_PILL_CLASS,
+  applyQuickReplyVariables,
+  resolveQuickReply,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DEFAULT_ACCEPTED_FILE_TYPES,
   MessageComposer,
   DateDivider,
   formatPhone,
-  phoneCountryFlag,
   phoneInitials,
+  CONVERSATION_CHANNEL,
+  DEFAULT_CONVERSATION_CHANNEL,
+  REOPEN_MECHANISM,
+  HANDLE_KIND,
+  CHANNEL_CAPABILITIES,
+  capabilitiesOf,
+  CHANNEL_FILTER_ALL,
+  channelFiltersFor,
+  formatContactHandle,
+  contactFlag,
   useAsyncResource,
   conversationsOf,
   totalOf,
   useConversationDocuments,
+  PAGINATION_LABELS,
   DOCUMENT_SOURCE_FILTER,
   DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
   ConversationDocumentsPanel,
   DEFAULT_DOCUMENTS_LIBRARY_LABELS,
-  DocumentsLibrary
+  DocumentsLibrary,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  mediaKindOf,
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  toConversationSimulatorClient,
+  mediaTypeOf,
+  ConversationPreview,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
+  simulatorPanelLabelsOf,
+  ConversationSimulatorPanel
 };