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

package/dist/index.js

@@ -1,759 +1,68 @@
+import {
+  AudioPlayer,
+  AudioRecorderButton,
+  AudioTranscription,
+  ConversationDocumentsPanel,
+  ConversationLocalesProvider,
+  ConversationWallpaper,
+  ConversationsProvider,
+  DEFAULT_ACCEPTED_FILE_TYPES,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
+  DEFAULT_DOCUMENTS_LIBRARY_LABELS,
+  DEFAULT_EMOJI_PICKER_LABELS,
+  DEFAULT_INTERACTIVE_MESSAGE_LABELS,
+  DEFAULT_LIGHTBOX_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  DEFAULT_MESSAGE_COMPOSER_LABELS,
+  DOCUMENT_SOURCE_FILTER,
+  DateDivider,
+  DocumentsLibrary,
+  EMOJI_CATEGORIES,
+  EmojiPicker,
+  FileIcon,
+  InteractiveMessage,
+  Lightbox,
+  MediaRenderer,
+  MessageBubble,
+  MessageComposer,
+  StatusTicks,
+  applyQuickReplyVariables,
+  cn,
+  conversationsOf,
+  createMediaUrlResolver,
+  formatDateTime,
+  formatFileSize,
+  formatPhone,
+  formatTimestamp,
+  isSameDay,
+  phoneCountryFlag,
+  phoneInitials,
+  resolveQuickReply,
+  searchEmojis,
+  totalOf,
+  useAsyncResource,
+  useConversationDocuments,
+  useConversationLocales,
+  useConversations
+} from "./chunk-TV4OQRGH.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
   useDarkMode,
+  useIsDarkTheme,
   waToHTML,
   waToHTMLInline
-} from "./chunk-ZDURDZTM.js";
-
-// src/MessageBubble.tsx
-import { useState as useState3 } from "react";
-import { Check } from "lucide-react";
-
-// src/ConversationLocalesProvider.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var DEFAULT_LOCALES = {
-  bubble: {
-    customer: "Cliente",
-    bot: "Bot",
-    agent: "Atendente",
-    document: "documento",
-    media: "m\xEDdia",
-    templateLabel: "Template",
-    readAt: "Lida \xE0s ",
-    windowExpired: "Janela de 24h expirada",
-    viewImage: "Ver imagem",
-    listenAudio: "Ouvir \xE1udio",
-    viewVideo: "Ver v\xEDdeo"
-  },
-  selection: {
-    select: "Selecionar"
-  },
-  dateDivider: {
-    today: "Hoje",
-    yesterday: "Ontem"
-  }
-};
-var ConversationLocalesContext = createContext(DEFAULT_LOCALES);
-function ConversationLocalesProvider({ children, locales }) {
-  const merged = {
-    bubble: { ...DEFAULT_LOCALES.bubble, ...locales?.bubble },
-    selection: { ...DEFAULT_LOCALES.selection, ...locales?.selection },
-    dateDivider: { ...DEFAULT_LOCALES.dateDivider, ...locales?.dateDivider }
-  };
-  return /* @__PURE__ */ jsx(ConversationLocalesContext.Provider, { value: merged, children });
-}
-function useConversationLocales() {
-  return useContext(ConversationLocalesContext);
-}
-
-// src/StatusTicks.tsx
-import { AlertTriangle } from "lucide-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var STATUS_COLOR_CLASS = {
-  sent: "text-black/40 dark:text-white/40",
-  delivered: "text-black/40 dark:text-white/40",
-  read: "text-sky-500",
-  failed: "text-red-500"
-};
-function Ticks({ double }) {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 12", width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    double && /* @__PURE__ */ jsx2("path", { d: "M1 6.5L4.5 10L11 2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx2(
-      "path",
-      {
-        d: double ? "M6 6.5L9.5 10L19 1" : "M1 6.5L5 10.5L14.5 1",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  ] });
-}
-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" }) });
-}
-
-// src/MediaRenderer.tsx
-import { useState as useState2 } from "react";
-
-// src/AudioPlayer.tsx
-import { useEffect, useRef, useState } from "react";
-import { Pause, Play } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-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];
-});
-function fmt(sec) {
-  if (!isFinite(sec)) return "0:00";
-  const m = Math.floor(sec / 60);
-  const s = Math.floor(sec % 60);
-  return `${m}:${s.toString().padStart(2, "0")}`;
-}
-function AudioPlayer({ src, isMine = false }) {
-  const audioRef = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [current, setCurrent] = useState(0);
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    const onTime = () => {
-      setCurrent(audio.currentTime);
-      setProgress(audio.duration ? audio.currentTime / audio.duration : 0);
-    };
-    const onMeta = () => setDuration(audio.duration);
-    const onEnd = () => {
-      setPlaying(false);
-      setProgress(0);
-      setCurrent(0);
-    };
-    audio.addEventListener("timeupdate", onTime);
-    audio.addEventListener("loadedmetadata", onMeta);
-    audio.addEventListener("ended", onEnd);
-    return () => {
-      audio.removeEventListener("timeupdate", onTime);
-      audio.removeEventListener("loadedmetadata", onMeta);
-      audio.removeEventListener("ended", onEnd);
-    };
-  }, []);
-  const toggle = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    if (playing) {
-      audio.pause();
-      setPlaying(false);
-    } else {
-      audio.play();
-      setPlaying(true);
-    }
-  };
-  const seek = (e) => {
-    const audio = audioRef.current;
-    if (!audio || !audio.duration) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const ratio = (e.clientX - rect.left) / rect.width;
-    audio.currentTime = ratio * audio.duration;
-  };
-  const activeBars = Math.round(progress * BARS.length);
-  const playBtn = isMine ? "bg-green-600 hover:bg-green-700 text-white" : "bg-gray-600 hover:bg-gray-700 text-white";
-  const activeBar = isMine ? "bg-green-700" : "bg-gray-700";
-  const inactiveBar = isMine ? "bg-green-300" : "bg-gray-300";
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 w-full", style: { minWidth: "200px", maxWidth: "260px" }, children: [
-    /* @__PURE__ */ jsx3("audio", { ref: audioRef, src, preload: "metadata" }),
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        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" })
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx3("div", { className: "flex items-end gap-0.5 h-8 cursor-pointer", onClick: seek, children: BARS.map((h, i) => /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: `flex-1 rounded-full transition-colors ${i < activeBars ? activeBar : inactiveBar}`,
-          style: { height: `${h * 2}px` }
-        },
-        i
-      )) }),
-      /* @__PURE__ */ jsx3("span", { className: "text-gray-400 tabular-nums text-xs", children: playing || current > 0 ? fmt(current) : fmt(duration) })
-    ] })
-  ] });
-}
-
-// src/FileIcon.tsx
-import { FileArchive, FileSpreadsheet, FileText, File as FileGeneric } from "lucide-react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var EXTENSION_STYLE = {
-  pdf: { Icon: FileText, colorClass: "text-red-500" },
-  doc: { Icon: FileText, colorClass: "text-blue-500" },
-  docx: { Icon: FileText, colorClass: "text-blue-500" },
-  xls: { Icon: FileSpreadsheet, colorClass: "text-green-600" },
-  xlsx: { Icon: FileSpreadsheet, colorClass: "text-green-600" },
-  zip: { Icon: FileArchive, colorClass: "text-orange-500" }
-};
-function getExtension(filename, mimeType) {
-  const fromFilename = filename?.split(".").pop()?.toLowerCase();
-  if (fromFilename && EXTENSION_STYLE[fromFilename]) return fromFilename;
-  return mimeType?.split("/")[1]?.toLowerCase() ?? "";
-}
-function FileIcon({ filename, mimeType, size = 20, className = "" }) {
-  const extension = getExtension(filename, mimeType);
-  const style = EXTENSION_STYLE[extension] ?? { Icon: FileGeneric, colorClass: "text-gray-500" };
-  const { Icon, colorClass } = style;
-  return /* @__PURE__ */ jsx4(Icon, { size, className: `${colorClass} ${className}`.trim() });
-}
-
-// src/lib/format.ts
-function formatTimestamp(timestamp) {
-  try {
-    const date = new Date(timestamp);
-    const hours = date.getHours().toString().padStart(2, "0");
-    const minutes = date.getMinutes().toString().padStart(2, "0");
-    return `${hours}:${minutes}`;
-  } catch {
-    return timestamp;
-  }
-}
-function formatDateTime(iso) {
-  const d = new Date(iso);
-  return d.toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-var FILE_SIZE_UNITS = ["B", "KB", "MB", "GB"];
-function formatFileSize(bytes) {
-  if (!isFinite(bytes) || bytes < 0) return "";
-  if (bytes < 1) return "0 B";
-  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), FILE_SIZE_UNITS.length - 1);
-  const value = bytes / 1024 ** exponent;
-  const formatted = exponent === 0 ? value.toString() : value.toFixed(value < 10 ? 1 : 0);
-  return `${formatted} ${FILE_SIZE_UNITS[exponent]}`;
-}
-
-// src/MediaRenderer.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function resolveMediaSource(message) {
-  if (message.mediaUrl) return message.mediaUrl;
-  if (message.base64) {
-    const prefix = message.mimeType ? `data:${message.mimeType};base64,` : "data:application/octet-stream;base64,";
-    return prefix + message.base64;
-  }
-  return null;
-}
-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 load = async () => {
-    if (url || loading || !onResolveUrl) return;
-    setLoading(true);
-    setError(false);
-    try {
-      const resolved = await onResolveUrl(message);
-      if (resolved) setUrl(resolved);
-      else setError(true);
-    } catch {
-      setError(true);
-    } finally {
-      setLoading(false);
-    }
-  };
-  return { url, loading, error, load };
-}
-function MediaRenderer({ message, onLightbox, onResolveUrl }) {
-  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";
-  switch (message.type) {
-    case "image":
-    case "sticker": {
-      if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : bubble.viewImage });
-      }
-      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? "Image", 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" })
-      ] }) }) });
-    }
-    case "video": {
-      if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : 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" })
-      ] }) }) });
-    }
-    case "audio": {
-      if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : bubble.listenAudio });
-      }
-      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: "Audio unavailable" }) });
-    }
-    case "document": {
-      const typeLabel = message.mimeType?.split("/")[1]?.toUpperCase() ?? "FILE";
-      const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null;
-      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 min-w-[200px]", 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 ?? "Document" }),
-          /* @__PURE__ */ jsx5("p", { className: "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": "Download", 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(
-          "button",
-          {
-            onClick: lazy.load,
-            disabled: lazy.loading,
-            className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50",
-            "aria-label": "Download",
-            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" })
-            ] })
-          }
-        ) : null,
-        lazy.error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 flex-shrink-0", children: "Erro" })
-      ] });
-    }
-    default:
-      return null;
-  }
-}
-
-// src/Lightbox.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Lightbox({ imageUrl, caption, onClose }) {
-  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 ?? "Image", 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: "Fechar" })
-  ] }) });
-}
-
-// src/MessageBubble.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var BUBBLE_COLOR = {
-  agent: "bg-[#d9fdd3] dark:bg-[#005c4b]",
-  bot: "bg-[#d7f0ec] dark:bg-[#0a3d3a]",
-  customer: "bg-white dark:bg-[#202c33]"
-};
-var MEDIA_TYPES = /* @__PURE__ */ new Set(["image", "audio", "video", "document", "sticker"]);
-function MessageBubble({
-  message,
-  isMine,
-  senderName,
-  isFirstInGroup = true,
-  isSelecting = false,
-  isSelected = false,
-  onToggleSelect,
-  onResolveMediaUrl
-}) {
-  const { bubble, selection } = useConversationLocales();
-  const [lightboxSrc, setLightboxSrc] = useState3(null);
-  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 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__ */ jsx7(
-    "button",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onToggleSelect?.();
-      },
-      title: 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__ */ jsx7(Check, { size: 12, className: "text-white", strokeWidth: 3 })
-    }
-  );
-  return /* @__PURE__ */ jsxs5("div", { className: `flex items-end gap-1.5 ${isMine ? "justify-end" : "justify-start"} group ${isFirstInGroup ? "mt-2" : "mt-0.5"}`, children: [
-    isMine && checkbox,
-    /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        onClick: isSelecting ? onToggleSelect : void 0,
-        className: `
-          max-w-[75%] sm:max-w-[65%] rounded-2xl ${tailCornerClass} px-2.5 py-1.5 shadow-sm
-          ${bubbleColor}
-          ${hasError ? "ring-1 ring-inset ring-red-400" : ""}
-          ${isSelecting ? "cursor-pointer" : ""}
-          ${isSelected ? "ring-2 ring-teal-500" : ""}
-          relative
-        `,
-        children: [
-          isMine && isFirstInGroup && (message.sender === "bot" || message.sender === "agent" && senderName) && /* @__PURE__ */ jsx7("div", { className: "text-xs font-semibold mb-0.5 text-teal-700 dark:text-teal-400", children: displayName }),
-          isMedia ? /* @__PURE__ */ jsx7(MediaRenderer, { message, onLightbox: setLightboxSrc, onResolveUrl: onResolveMediaUrl }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-            isTemplate && /* @__PURE__ */ jsxs5("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mb-0.5", children: [
-              /* @__PURE__ */ jsx7("span", { children: "\u{1F4E8}" }),
-              /* @__PURE__ */ jsxs5("span", { className: "font-medium", children: [
-                bubble.templateLabel,
-                message.templateName ? ` \u2014 ${message.templateName}` : ""
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx7("div", { className: "text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(message.content ?? "") })
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-end gap-1 mt-0.5 select-none", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-xs text-black/40 dark:text-white/40 font-medium", children: formatTimestamp(message.timestamp) }),
-            isMine && message.status && /* @__PURE__ */ jsx7(StatusTicks, { status: message.status, title: tooltipText })
-          ] })
-        ]
-      }
-    ),
-    !isMine && checkbox,
-    lightboxSrc && /* @__PURE__ */ jsx7(Lightbox, { imageUrl: lightboxSrc, onClose: () => setLightboxSrc(null) })
-  ] });
-}
+} from "./chunk-2AYDBWNE.js";
 
-// src/Wallpaper.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function ConversationWallpaper({ children, className = "" }) {
-  return /* @__PURE__ */ jsx8("div", { className: `cv-wallpaper ${className}`.trim(), children });
-}
-
-// src/EmojiPicker.tsx
-import { useState as useState4, useCallback } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var EMOJI_CATEGORIES = [
-  {
-    name: "Smileys",
-    emojis: ["\u{1F600}", "\u{1F603}", "\u{1F604}", "\u{1F601}", "\u{1F605}", "\u{1F602}", "\u{1F923}", "\u{1F60A}", "\u{1F607}", "\u{1F642}", "\u{1F609}", "\u{1F60C}", "\u{1F60D}", "\u{1F970}", "\u{1F618}", "\u{1F617}", "\u{1F60B}", "\u{1F61B}", "\u{1F61C}", "\u{1F92A}"]
-  },
-  {
-    name: "Gestures",
-    emojis: ["\u{1F44D}", "\u{1F44E}", "\u{1F44C}", "\u270C\uFE0F", "\u{1F91E}", "\u{1F91F}", "\u{1F918}", "\u{1F919}", "\u{1F44B}", "\u{1F91A}", "\u{1F590}\uFE0F", "\u270B", "\u{1F596}", "\u{1F44F}", "\u{1F64C}", "\u{1F91D}", "\u{1F64F}", "\u270D\uFE0F", "\u{1F485}", "\u{1F933}"]
-  },
-  {
-    name: "Hearts",
-    emojis: ["\u2764\uFE0F", "\u{1F9E1}", "\u{1F49B}", "\u{1F49A}", "\u{1F499}", "\u{1F49C}", "\u{1F5A4}", "\u{1F90D}", "\u{1F90E}", "\u{1F494}", "\u2763\uFE0F", "\u{1F495}", "\u{1F49E}", "\u{1F493}", "\u{1F497}", "\u{1F496}", "\u{1F498}", "\u{1F49D}", "\u{1F49F}", "\u2665\uFE0F"]
-  },
-  {
-    name: "Food",
-    emojis: ["\u{1F354}", "\u{1F35F}", "\u{1F355}", "\u{1F32D}", "\u{1F37F}", "\u{1F9C2}", "\u{1F953}", "\u{1F95A}", "\u{1F373}", "\u{1F9C7}", "\u{1F95E}", "\u{1F9C8}", "\u{1F35E}", "\u{1F950}", "\u{1F968}", "\u{1F96F}", "\u{1F956}", "\u{1F9C0}", "\u{1F957}", "\u{1F959}"]
-  },
-  {
-    name: "Drinks",
-    emojis: ["\u2615", "\u{1F375}", "\u{1F376}", "\u{1F37E}", "\u{1F377}", "\u{1F378}", "\u{1F379}", "\u{1F37A}", "\u{1F37B}", "\u{1F942}", "\u{1F943}", "\u{1F964}", "\u{1F9CB}", "\u{1F9C3}", "\u{1F9C9}", "\u{1F9CA}", "\u{1F962}", "\u{1F37D}\uFE0F", "\u{1F374}", "\u{1F944}"]
-  },
-  {
-    name: "Objects",
-    emojis: ["\u{1F381}", "\u{1F382}", "\u{1F388}", "\u{1F389}", "\u{1F38A}", "\u{1F380}", "\u{1F4F1}", "\u{1F4BB}", "\u231A", "\u{1F4F7}", "\u{1F511}", "\u{1F4B0}", "\u{1F4B3}", "\u{1F4DD}", "\u{1F4CC}", "\u{1F4CD}", "\u2702\uFE0F", "\u{1F50D}", "\u{1F4A1}", "\u{1F514}"]
-  }
-];
-var EmojiPicker = ({ onSelect, className = "" }) => {
-  const [activeCategory, setActiveCategory] = useState4(0);
-  const handleSelect = useCallback(
-    (emoji) => {
-      onSelect(emoji);
-    },
-    [onSelect]
-  );
-  return /* @__PURE__ */ jsxs6("div", { className: `bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx9("div", { className: "flex border-b border-gray-200 overflow-x-auto", children: EMOJI_CATEGORIES.map((category, index) => /* @__PURE__ */ jsxs6(
-      "button",
-      {
-        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: [
-          category.emojis[0],
-          " ",
-          category.name
-        ]
-      },
-      category.name
-    )) }),
-    /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto", children: EMOJI_CATEGORIES[activeCategory].emojis.map((emoji) => /* @__PURE__ */ jsx9(
-      "button",
-      {
-        onClick: () => handleSelect(emoji),
-        className: "w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer",
-        "aria-label": emoji,
-        children: emoji
-      },
-      emoji
-    )) })
-  ] });
-};
-
-// src/MessageComposer.tsx
-import { useState as useState5, useRef as useRef2, useCallback as useCallback2 } from "react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var DEFAULT_ACCEPTED_FILE_TYPES = "image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.zip";
-var MessageComposer = ({
-  onSend,
-  onAttach,
-  value: externalValue,
-  onChange: externalOnChange,
-  features,
-  placeholder = "Digite uma mensagem...",
-  maxLength,
-  disabled = false,
-  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES
-}) => {
-  const [internalText, setInternalText] = useState5("");
-  const [showEmoji, setShowEmoji] = useState5(false);
-  const [attachments, setAttachments] = useState5([]);
-  const textareaRef = useRef2(null);
-  const fileInputRef = useRef2(null);
-  const isControlled = externalValue !== void 0;
-  const text = isControlled ? externalValue : internalText;
-  const setText = useCallback2((newText) => {
-    if (isControlled) {
-      externalOnChange?.(newText);
-    } else {
-      setInternalText(newText);
-    }
-  }, [isControlled, externalOnChange]);
-  const showEmojiButton = features?.emoji !== false;
-  const showAttachButton = features?.documents !== false;
-  const sendMessage = useCallback2(() => {
-    const trimmed = text.trim();
-    if (!trimmed && attachments.length === 0) return;
-    if (trimmed) onSend(trimmed);
-    for (const a of attachments) {
-      onAttach?.(a.file);
-      URL.revokeObjectURL(a.previewUrl);
-    }
-    if (!isControlled) setInternalText("");
-    setAttachments([]);
-    setShowEmoji(false);
-    if (textareaRef.current) textareaRef.current.style.height = "auto";
-  }, [text, attachments, onSend, onAttach, isControlled]);
-  const handleKeyDown = useCallback2((e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      if (!disabled) sendMessage();
-    }
-  }, [sendMessage, disabled]);
-  const handleInput = useCallback2(() => {
-    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 ta = textareaRef.current;
-    if (!ta) {
-      setText(text + emoji);
-      return;
-    }
-    const start = ta.selectionStart;
-    const end = ta.selectionEnd;
-    const newText = text.slice(0, start) + emoji + text.slice(end);
-    setText(newText);
-    requestAnimationFrame(() => {
-      ta.focus();
-      ta.setSelectionRange(start + emoji.length, start + emoji.length);
-      handleInput();
-    });
-  }, [text, setText, handleInput]);
-  const handleFileChange = useCallback2((e) => {
-    const files = e.target.files;
-    if (!files) return;
-    const previews = [];
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      previews.push({ file, previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : "" });
-    }
-    setAttachments((prev) => [...prev, ...previews]);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  }, []);
-  const removeAttachment = useCallback2((index) => {
-    setAttachments((prev) => {
-      const next = [...prev];
-      if (next[index].previewUrl) URL.revokeObjectURL(next[index].previewUrl);
-      next.splice(index, 1);
-      return next;
-    });
-  }, []);
-  const insertFormatting = useCallback2((marker) => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    const start = ta.selectionStart;
-    const end = ta.selectionEnd;
-    const sel = text.slice(start, end);
-    if (sel) {
-      setText(text.slice(0, start) + marker + sel + marker + text.slice(end));
-      requestAnimationFrame(() => {
-        ta.focus();
-        ta.setSelectionRange(start + marker.length + sel.length + marker.length, start + marker.length + sel.length + marker.length);
-      });
-    }
-  }, [text, setText]);
-  const canSend = text.trim().length > 0 || attachments.length > 0;
-  const remaining = maxLength ? maxLength - text.length : null;
-  return /* @__PURE__ */ jsxs7("div", { children: [
-    attachments.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex gap-2 px-1 pb-2 overflow-x-auto", children: attachments.map((a, i) => /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
-      a.previewUrl ? /* @__PURE__ */ jsx10("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx10("div", { className: "w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs7("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5", children: [
-        /* @__PURE__ */ jsx10("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ jsx10("polyline", { points: "14 2 14 8 20 8" })
-      ] }) }),
-      /* @__PURE__ */ jsx10("button", { onClick: () => removeAttachment(i), className: "absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs", children: "\u2715" })
-    ] }, i)) }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-end gap-1.5 bg-[#f0f2f5] rounded-xl px-3 py-2", children: [
-      showEmojiButton && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
-        /* @__PURE__ */ jsx10("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": "Emoji", children: /* @__PURE__ */ jsxs7("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx10("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-          /* @__PURE__ */ jsx10("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
-          /* @__PURE__ */ jsx10("circle", { cx: "15", cy: "9", r: "0.5", fill: "currentColor" })
-        ] }) }),
-        showEmoji && /* @__PURE__ */ jsx10("div", { className: "absolute bottom-full left-0 mb-2 z-10", children: /* @__PURE__ */ jsx10(EmojiPicker, { onSelect: handleEmojiSelect }) })
-      ] }),
-      /* @__PURE__ */ jsx10(
-        "textarea",
-        {
-          ref: textareaRef,
-          value: text,
-          onChange: (e) => {
-            setText(e.target.value);
-            handleInput();
-          },
-          onKeyDown: handleKeyDown,
-          placeholder,
-          rows: 1,
-          disabled,
-          className: "flex-1 resize-none bg-transparent text-[15px] text-[#3b4a54] placeholder-[#8696a0] outline-none py-1.5 max-h-[100px] leading-relaxed",
-          style: { fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }
-        }
-      ),
-      showAttachButton && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        /* @__PURE__ */ jsx10("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
-        /* @__PURE__ */ jsx10("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": "Anexar", children: /* @__PURE__ */ jsx10("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx10("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__ */ jsx10(
-        "button",
-        {
-          onClick: sendMessage,
-          disabled: !canSend || disabled,
-          className: `w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${canSend && !disabled ? "bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
-          "aria-label": "Enviar",
-          children: /* @__PURE__ */ jsx10("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx10("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
-        }
-      )
-    ] }),
-    remaining !== null && /* @__PURE__ */ jsx10("div", { className: "flex justify-end mt-1 pr-1", children: /* @__PURE__ */ jsx10("span", { className: `text-xs ${remaining < 20 ? "text-red-500" : "text-gray-400"}`, children: remaining }) })
-  ] });
-};
-
-// src/WhatsAppMessageEditor.tsx
-import { useRef as useRef3 } from "react";
-import { Bold, Italic, Strikethrough } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var INLINE_TOKEN = /(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|\{[a-zA-Z_]+\})/g;
-function renderLine(line, lineKey) {
-  const nodes = [];
-  let lastIndex = 0;
-  let match;
-  let tokenIndex = 0;
-  INLINE_TOKEN.lastIndex = 0;
-  while ((match = INLINE_TOKEN.exec(line)) !== null) {
-    if (match.index > lastIndex) nodes.push(line.slice(lastIndex, match.index));
-    const token = match[0];
-    const key = `${lineKey}-${tokenIndex++}`;
-    if (token.startsWith("*")) nodes.push(/* @__PURE__ */ jsx11("strong", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("_")) nodes.push(/* @__PURE__ */ jsx11("em", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("~")) nodes.push(/* @__PURE__ */ jsx11("s", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("`")) nodes.push(/* @__PURE__ */ jsx11("code", { className: "font-mono text-[0.85em]", children: token.slice(1, -1) }, key));
-    else nodes.push(/* @__PURE__ */ jsx11("span", { className: "rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1", children: token }, key));
-    lastIndex = INLINE_TOKEN.lastIndex;
-  }
-  if (lastIndex < line.length) nodes.push(line.slice(lastIndex));
-  return nodes;
-}
-function renderWhatsApp(text) {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs8("span", { children: [
-    renderLine(line, `ln-${index}`),
-    index < lines.length - 1 ? /* @__PURE__ */ jsx11("br", {}) : null
-  ] }, `ln-${index}`));
-}
-function WhatsAppMessageEditor({
-  value,
-  onChange,
-  placeholder,
-  placeholders = [],
-  rows = 4,
-  previewLabel = "Pr\xE9via (como aparece no WhatsApp)",
-  emptyPreviewText = "Sua mensagem aparecer\xE1 aqui\u2026"
-}) {
-  const textareaRef = useRef3(null);
-  function wrapSelection(marker) {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selected = value.slice(start, end) || "texto";
-    const next = value.slice(0, start) + marker + selected + marker + value.slice(end);
-    onChange(next);
-    requestAnimationFrame(() => {
-      textarea.focus();
-      textarea.setSelectionRange(start + marker.length, start + marker.length + selected.length);
-    });
-  }
-  function insertAtCursor(snippet) {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const next = value.slice(0, start) + snippet + value.slice(end);
-    onChange(next);
-    requestAnimationFrame(() => {
-      textarea.focus();
-      const caret = start + snippet.length;
-      textarea.setSelectionRange(caret, caret);
-    });
-  }
-  const toolbarButtonClass = "inline-flex items-center justify-center h-8 w-8 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
-  return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1.5 mb-2", children: [
-      /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, title: "Negrito (*texto*)", "aria-label": "Negrito", children: /* @__PURE__ */ jsx11(Bold, { size: 15 }) }),
-      /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, title: "It\xE1lico (_texto_)", "aria-label": "It\xE1lico", children: /* @__PURE__ */ jsx11(Italic, { size: 15 }) }),
-      /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, title: "Tachado (~texto~)", "aria-label": "Tachado", children: /* @__PURE__ */ jsx11(Strikethrough, { size: 15 }) }),
-      placeholders.length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx11("span", { className: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" }),
-        placeholders.map((token) => /* @__PURE__ */ jsx11(
-          "button",
-          {
-            type: "button",
-            onClick: () => insertAtCursor(token),
-            className: "inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors",
-            title: `Inserir ${token}`,
-            children: token
-          },
-          token
-        ))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx11(
-      "textarea",
-      {
-        ref: textareaRef,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        placeholder,
-        rows,
-        className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-y"
-      }
-    ),
-    /* @__PURE__ */ jsxs8("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx11("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: previewLabel }),
-      /* @__PURE__ */ jsx11("div", { className: "rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsx11("div", { className: "inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx11("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }) }) })
-    ] })
-  ] });
-}
+// src/RichMessageComposer.tsx
+import { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
+import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces } from "lucide-react";
 
 // src/SimpleEmojiPicker.tsx
-import { useEffect as useEffect2, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Smile } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var EMOJIS = [
   "\u{1F600}",
   "\u{1F602}",
@@ -837,9 +146,9 @@ var EMOJIS = [
   "\u{1F6E1}\uFE0F"
 ];
 function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px", pickerMaxHeight = "220px" }) {
-  const [open, setOpen] = useState6(false);
-  const containerRef = useRef4(null);
-  useEffect2(() => {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -849,23 +158,23 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs9("div", { ref: containerRef, className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
         className: "w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors",
         title: label,
-        children: /* @__PURE__ */ jsx12(Smile, { size: 15 })
+        children: /* @__PURE__ */ jsx(Smile, { size: 15 })
       }
     ),
-    open && /* @__PURE__ */ jsx12("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50", children: /* @__PURE__ */ jsx12(
+    open && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "grid grid-cols-10 gap-0.5 overflow-y-auto",
         style: { width: pickerWidth, maxHeight: pickerMaxHeight },
-        children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx12(
+        children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -883,24 +192,378 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
   ] });
 }
 
-// src/DateDivider.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-function DateDivider({ iso }) {
-  const { dateDivider } = useConversationLocales();
-  return /* @__PURE__ */ jsx13("div", { className: "flex justify-center sticky top-0 z-10 my-2 pointer-events-none", children: /* @__PURE__ */ jsx13("span", { className: "bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm", children: formatDividerLabel(iso, dateDivider) }) });
+// src/RichMessageComposer.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RICH_COMPOSER_ACTION = {
+  BOLD: "bold",
+  ITALIC: "italic",
+  STRIKETHROUGH: "strikethrough",
+  MONOSPACE: "monospace",
+  EMOJI: "emoji",
+  ATTACH: "attach",
+  VARIABLES: "variables"
+};
+var DEFAULT_RICH_COMPOSER_TOOLTIPS = {
+  bold: "Negrito",
+  italic: "It\xE1lico",
+  strikethrough: "Tachado",
+  monospace: "Monoespa\xE7ado",
+  emoji: "Emojis",
+  attach: "Anexar arquivo",
+  send: "Enviar",
+  variables: "Vari\xE1veis dispon\xEDveis"
+};
+var FORMATTING_ELEMENT = {
+  bold: "strong",
+  italic: "em",
+  strikethrough: "del",
+  monospace: "code"
+};
+var MONOSPACE_CLASS = "bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm";
+var RichMessageComposer = forwardRef(function RichMessageComposer2({
+  value,
+  onChange,
+  onSend,
+  onAttachFiles,
+  quickReplies,
+  variables,
+  toolbar,
+  tooltips,
+  placeholder,
+  disabled = false,
+  isSending = false,
+  idleAction,
+  attachmentsPreview,
+  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  className
+}, ref) {
+  const editorRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const variablesRef = useRef2(null);
+  const [isVariablesOpen, setIsVariablesOpen] = useState2(false);
+  useEffect2(() => {
+    if (!isVariablesOpen) return;
+    const closeOnOutsideClick = (event) => {
+      if (!variablesRef.current?.contains(event.target)) setIsVariablesOpen(false);
+    };
+    document.addEventListener("mousedown", closeOnOutsideClick);
+    return () => document.removeEventListener("mousedown", closeOnOutsideClick);
+  }, [isVariablesOpen]);
+  const tooltipOf = (action) => tooltips?.[action] ?? DEFAULT_RICH_COMPOSER_TOOLTIPS[action];
+  const shows = (action) => toolbar?.[action] !== false;
+  const replaceContent = useCallback((text) => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.innerHTML = waToHTML(text);
+    onChange(htmlToWA(editor.innerHTML));
+    editor.focus();
+  }, [onChange]);
+  useImperativeHandle(ref, () => ({
+    setContent: replaceContent,
+    clear: () => {
+      const editor = editorRef.current;
+      if (!editor) return;
+      editor.innerHTML = "";
+      onChange("");
+    },
+    focus: () => editorRef.current?.focus()
+  }), [onChange, replaceContent]);
+  const currentRange = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return void 0;
+    editor.focus();
+    const selection = window.getSelection();
+    if (!selection?.rangeCount || !editor.contains(selection.anchorNode)) return void 0;
+    return selection.getRangeAt(0);
+  }, []);
+  const commitRange = useCallback((range, node) => {
+    const selection = window.getSelection();
+    range.setStartAfter(node);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    onChange(htmlToWA(editorRef.current?.innerHTML ?? ""));
+  }, [onChange]);
+  const insertAtCursor = useCallback((fragment) => {
+    const range = currentRange();
+    if (!range) return;
+    range.deleteContents();
+    const textNode = document.createTextNode(fragment);
+    range.insertNode(textNode);
+    commitRange(range, textNode);
+  }, [commitRange, currentRange]);
+  const wrapSelection = useCallback((action) => {
+    const range = currentRange();
+    const selectedText = range?.toString();
+    if (!range || !selectedText) return;
+    range.deleteContents();
+    const wrapper = document.createElement(FORMATTING_ELEMENT[action]);
+    if (action === "monospace") wrapper.className = MONOSPACE_CLASS;
+    wrapper.textContent = selectedText;
+    range.insertNode(wrapper);
+    commitRange(range, wrapper);
+  }, [commitRange, currentRange]);
+  const handleInput = useCallback((event) => {
+    onChange(htmlToWA(event.currentTarget.innerHTML));
+  }, [onChange]);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (!disabled) onSend();
+    }
+  }, [disabled, onSend]);
+  const handleFileChange = useCallback((event) => {
+    if (event.target.files?.length) onAttachFiles?.(event.target.files);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [onAttachFiles]);
+  const canSend = value.trim().length > 0;
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
+    attachmentsPreview,
+    quickReplies?.length ? (
+      /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+         conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+         precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          title: quickReply.tooltip,
+          onClick: () => replaceContent(quickReply.text),
+          className: "flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          children: quickReply.label
+        },
+        quickReply.id
+      )) })
+    ) : null,
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-end gap-2", children: [
+      /* @__PURE__ */ jsx2("div", { className: "mb-0.5 hidden items-center gap-0.5 sm:flex", children: [
+        [RICH_COMPOSER_ACTION.BOLD, Bold],
+        [RICH_COMPOSER_ACTION.ITALIC, Italic],
+        [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
+        [RICH_COMPOSER_ACTION.MONOSPACE, Code]
+      ].filter(([action]) => shows(action)).map(([action, Icon]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => wrapSelection(action),
+          title: tooltipOf(action),
+          "aria-label": tooltipOf(action),
+          className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+          children: /* @__PURE__ */ jsx2(Icon, { size: 15 })
+        },
+        action
+      )) }),
+      shows(RICH_COMPOSER_ACTION.EMOJI) ? /* @__PURE__ */ jsx2(SimpleEmojiPicker, { onSelect: insertAtCursor, label: tooltipOf("emoji") }) : null,
+      variables?.length && shows(RICH_COMPOSER_ACTION.VARIABLES) ? /* @__PURE__ */ jsxs2("div", { ref: variablesRef, className: "relative", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsVariablesOpen((open) => !open),
+            title: tooltipOf("variables"),
+            "aria-label": tooltipOf("variables"),
+            "aria-expanded": isVariablesOpen,
+            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            children: /* @__PURE__ */ jsx2(Braces, { size: 18 })
+          }
+        ),
+        isVariablesOpen ? /* @__PURE__ */ jsx2("div", { className: "absolute bottom-full left-0 z-20 mb-2 max-h-56 w-64 overflow-y-auto rounded-xl border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800", children: variables.map((variable) => /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            title: variable.tooltip ?? variable.value,
+            onClick: () => {
+              insertAtCursor(variable.value);
+              setIsVariablesOpen(false);
+            },
+            className: "flex w-full flex-col items-start px-3 py-1.5 text-left hover:bg-teal-50 dark:hover:bg-teal-950/40",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-sm text-gray-800 dark:text-gray-100", children: variable.label }),
+              /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-gray-400 dark:text-gray-500", children: variable.value })
+            ]
+          },
+          variable.id
+        )) }) : null
+      ] }) : null,
+      onAttachFiles && shows(RICH_COMPOSER_ACTION.ATTACH) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            accept: acceptedFileTypes,
+            onChange: handleFileChange,
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => fileInputRef.current?.click(),
+            title: tooltipOf("attach"),
+            "aria-label": tooltipOf("attach"),
+            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            children: /* @__PURE__ */ jsx2(Paperclip, { size: 18 })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": placeholder,
+          "data-placeholder": placeholder,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          style: { minHeight: "36px", maxHeight: "120px" },
+          className: "flex-1 min-w-[180px] overflow-y-auto rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_em]:italic [&_del]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
+        }
+      ),
+      !canSend && idleAction ? /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", children: idleAction }) : /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onSend,
+          disabled: disabled || isSending || !canSend,
+          title: tooltipOf("send"),
+          "aria-label": tooltipOf("send"),
+          className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-teal-600 text-white transition-colors hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-40",
+          children: isSending ? /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u23F3" }) : /* @__PURE__ */ jsx2(SendHorizonal, { size: 16 })
+        }
+      )
+    ] })
+  ] });
+});
+
+// src/WhatsAppMessageEditor.tsx
+import { useRef as useRef3 } from "react";
+import { Bold as Bold2, Italic as Italic2, Strikethrough as Strikethrough2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS = {
+  bold: "Negrito",
+  boldHint: "Negrito (*texto*)",
+  italic: "It\xE1lico",
+  italicHint: "It\xE1lico (_texto_)",
+  strikethrough: "Tachado",
+  strikethroughHint: "Tachado (~texto~)",
+  insertPlaceholder: (token) => `Inserir ${token}`
+};
+var INLINE_TOKEN = /(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|\{[a-zA-Z_]+\})/g;
+function renderLine(line, lineKey) {
+  const nodes = [];
+  let lastIndex = 0;
+  let match;
+  let tokenIndex = 0;
+  INLINE_TOKEN.lastIndex = 0;
+  while ((match = INLINE_TOKEN.exec(line)) !== null) {
+    if (match.index > lastIndex) nodes.push(line.slice(lastIndex, match.index));
+    const token = match[0];
+    const key = `${lineKey}-${tokenIndex++}`;
+    if (token.startsWith("*")) nodes.push(/* @__PURE__ */ jsx3("strong", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("_")) nodes.push(/* @__PURE__ */ jsx3("em", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("~")) nodes.push(/* @__PURE__ */ jsx3("s", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("`")) nodes.push(/* @__PURE__ */ jsx3("code", { className: "font-mono text-[0.85em]", children: token.slice(1, -1) }, key));
+    else nodes.push(/* @__PURE__ */ jsx3("span", { className: "rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1", children: token }, key));
+    lastIndex = INLINE_TOKEN.lastIndex;
+  }
+  if (lastIndex < line.length) nodes.push(line.slice(lastIndex));
+  return nodes;
 }
-function formatDividerLabel(iso, dateDivider) {
-  const date = new Date(iso);
-  const today = /* @__PURE__ */ new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(today.getDate() - 1);
-  if (isSameDay(date, today)) return dateDivider.today;
-  if (isSameDay(date, yesterday)) return dateDivider.yesterday;
-  return date.toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" });
+function renderWhatsApp(text) {
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs3("span", { children: [
+    renderLine(line, `ln-${index}`),
+    index < lines.length - 1 ? /* @__PURE__ */ jsx3("br", {}) : null
+  ] }, `ln-${index}`));
+}
+function WhatsAppMessageEditor({
+  value,
+  onChange,
+  placeholder,
+  placeholders = [],
+  rows = 4,
+  previewLabel = "Pr\xE9via (como aparece no WhatsApp)",
+  emptyPreviewText = "Sua mensagem aparecer\xE1 aqui\u2026",
+  labels
+}) {
+  const editorLabels = { ...DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, ...labels };
+  const textareaRef = useRef3(null);
+  function wrapSelection(marker) {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selected = value.slice(start, end) || "texto";
+    const next = value.slice(0, start) + marker + selected + marker + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + marker.length, start + marker.length + selected.length);
+    });
+  }
+  function insertAtCursor(snippet) {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const next = value.slice(0, start) + snippet + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      const caret = start + snippet.length;
+      textarea.setSelectionRange(caret, caret);
+    });
+  }
+  const toolbarButtonClass = "inline-flex items-center justify-center h-8 w-8 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1.5 mb-2", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, title: editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, title: editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, title: editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx3(Strikethrough2, { size: 15 }) }),
+      placeholders.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("span", { className: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" }),
+        placeholders.map((token) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => insertAtCursor(token),
+            className: "inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors",
+            title: editorLabels.insertPlaceholder(token),
+            children: token
+          },
+          token
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        rows,
+        className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-y"
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: previewLabel }),
+      /* @__PURE__ */ jsx3("div", { className: "rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsx3("div", { className: "inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx3("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }) }) })
+    ] })
+  ] });
 }
 
 // src/Avatar.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_AVATAR_LABELS = {
+  unnamedContact: "Contato sem nome"
+};
 var sizeClasses = {
   sm: "w-6 h-6 text-xs",
   md: "w-8 h-8 text-sm",
@@ -926,10 +589,11 @@ function getBgColor(name) {
   const hash = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
   return bgColors[hash % bgColors.length];
 }
-function Avatar({ name, avatarUrl, size = "md", className = "" }) {
+function Avatar({ name, avatarUrl, size = "md", className = "", labels }) {
   const sizeClass = sizeClasses[size];
+  const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact;
   if (avatarUrl) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx4(
       "img",
       {
         src: avatarUrl,
@@ -938,14 +602,24 @@ function Avatar({ name, avatarUrl, size = "md", className = "" }) {
       }
     );
   }
-  const initials = getInitials(name);
   const bgColor = getBgColor(name);
-  return /* @__PURE__ */ jsx14(
+  if (!name) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`,
+        role: "img",
+        "aria-label": unnamedContactLabel,
+        children: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-[60%] w-[60%]", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: `${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`,
-      title: name || void 0,
-      children: initials
+      title: name,
+      children: getInitials(name)
     }
   );
 }
@@ -953,30 +627,91 @@ function Avatar({ name, avatarUrl, size = "md", className = "" }) {
 // src/ConversationListItem.tsx
 import { useMemo } from "react";
 
-// src/lib/phone.ts
-function formatPhone(number) {
-  const digits = number.replace(/\D/g, "");
-  if (digits.length === 13) {
-    return `+${digits.slice(0, 2)} (${digits.slice(2, 4)}) ${digits.slice(4, 9)}-${digits.slice(9, 13)}`;
-  }
-  if (digits.length === 12) {
-    return `+${digits.slice(0, 2)} (${digits.slice(2, 4)}) ${digits.slice(4, 8)}-${digits.slice(8, 12)}`;
-  }
-  if (digits.length === 11) {
-    return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
-  }
-  if (digits.length === 10) {
-    return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
+// 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
   }
-  return number;
+};
+function capabilitiesOf(channel) {
+  return CHANNEL_CAPABILITIES[channel ?? DEFAULT_CONVERSATION_CHANNEL];
 }
-function phoneInitials(number) {
-  const digits = number.replace(/\D/g, "");
-  return digits.slice(-2);
+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/ConversationListItem.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_LIST_ITEM_LABELS = {
+  expiredWindow: "Janela expirada",
+  warningWindow: "Janela pr\xF3xima do fim"
+};
 function formatRelativeTime(dateStr) {
   try {
     const date = new Date(dateStr);
@@ -1035,50 +770,63 @@ var ConversationListItem = ({
   active = false,
   selected = false,
   onClick,
-  onSelect
+  onSelect,
+  showDivider = true,
+  highlightActive = true,
+  labels
 }) => {
+  const expiredWindowLabel = labels?.expiredWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.expiredWindow;
+  const warningWindowLabel = labels?.warningWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.warningWindow;
   const isActive = active || selected;
   const windowStatus = useMemo(() => getWindowStatus(conversation.lastInboundAt), [conversation.lastInboundAt]);
   const preview = useMemo(() => lastMessagePreview(conversation), [conversation.lastContent]);
-  const name = conversation.clientName || formatPhone(conversation.whatsappNumber) || conversation.whatsappNumber;
+  const handle = conversation.contactId ?? conversation.whatsappNumber;
+  const displayHandle = formatContactHandle({ handle, channel: conversation.channel });
+  const name = conversation.clientName || displayHandle || handle;
   const timestamp = formatRelativeTime(conversation.lastAt);
+  const flag = contactFlag({ handle, channel: conversation.channel });
   const isInbound = conversation.lastDirection === "inbound";
   const handleClick = () => {
     onClick?.();
     onSelect?.(conversation.id);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       onClick: handleClick,
-      className: "w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[#f0f2f5] border-b border-[#e9edef]",
+      className: `w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${highlightActive ? "hover:bg-[#f0f2f5]" : ""} ${showDivider ? "border-b border-[#e9edef]" : ""}`,
       style: {
-        backgroundColor: isActive ? "#f0f2f5" : "transparent"
+        backgroundColor: isActive && highlightActive ? "#f0f2f5" : "transparent"
       },
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "relative flex-shrink-0", children: [
-          /* @__PURE__ */ jsx15(Avatar, { name, size: "lg" }),
-          conversation.waitingHuman && /* @__PURE__ */ jsx15("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" })
+        /* @__PURE__ */ jsxs4("div", { className: "relative flex-shrink-0", children: [
+          /* @__PURE__ */ jsx5(Avatar, { name: conversation.clientName, size: "lg" }),
+          conversation.waitingHuman && /* @__PURE__ */ jsx5("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" })
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-              /* @__PURE__ */ jsx15("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
-              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx15("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", title: "Janela expirada" }),
-              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx15("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", title: "Janela pr\xF3xima do fim" })
+        /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+              !conversation.clientName && flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
+              /* @__PURE__ */ jsx5("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
+              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", title: expiredWindowLabel }),
+              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", title: warningWindowLabel })
             ] }),
-            timestamp && /* @__PURE__ */ jsx15("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
+            timestamp && /* @__PURE__ */ jsx5("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mt-0.5", children: [
-            /* @__PURE__ */ jsxs10("span", { className: "text-sm text-[#667781] truncate max-w-[180px]", children: [
-              preview.icon && /* @__PURE__ */ jsx15("span", { className: "mr-1", children: preview.icon }),
+          conversation.clientName ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 text-xs text-[#667781]", children: [
+            flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
+            /* @__PURE__ */ jsx5("span", { className: "truncate", children: displayHandle })
+          ] }) : null,
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mt-0.5", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "text-sm text-[#667781] truncate max-w-[180px]", children: [
+              preview.icon && /* @__PURE__ */ jsx5("span", { className: "mr-1", children: preview.icon }),
               preview.preview || "Sem mensagens"
             ] }),
-            conversation.unread > 0 && /* @__PURE__ */ jsx15("span", { className: "bg-[#25d366] text-white text-xs font-semibold rounded-full min-w-[20px] h-5 px-1.5 flex items-center justify-center flex-shrink-0 ml-2", children: conversation.unread > 99 ? "99+" : conversation.unread })
+            conversation.unread > 0 && /* @__PURE__ */ jsx5("span", { className: "bg-[#25d366] text-white text-xs font-semibold rounded-full min-w-[20px] h-5 px-1.5 flex items-center justify-center flex-shrink-0 ml-2", children: conversation.unread > 99 ? "99+" : conversation.unread })
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1.5 mt-1", children: [
-            conversation.mode === "human" && /* @__PURE__ */ jsx15("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 text-purple-700", children: "Humano" }),
-            conversation.mode === "bot" && conversation.waitingHuman && /* @__PURE__ */ jsx15("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700", children: "Aguardando" })
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 mt-1", children: [
+            conversation.mode === "human" && /* @__PURE__ */ jsx5("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 text-purple-700", children: "Humano" }),
+            conversation.mode === "bot" && conversation.waitingHuman && /* @__PURE__ */ jsx5("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700", children: "Aguardando" })
           ] })
         ] })
       ]
@@ -1087,9 +835,9 @@ var ConversationListItem = ({
 };
 
 // src/Toast.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState7, useCallback as useCallback3, useEffect as useEffect3 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var ToastContext = createContext2(null);
+import { createContext, useContext, useState as useState3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
 var nextId = 0;
 var singletonShow = null;
 var toast = {
@@ -1105,19 +853,19 @@ var typeStyles = {
   info: "bg-blue-600"
 };
 var typeIcons = {
-  success: /* @__PURE__ */ jsx16("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" }) }),
-  error: /* @__PURE__ */ jsxs11("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsx16("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx16("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  success: /* @__PURE__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx6("polyline", { points: "20 6 9 17 4 12" }) }),
+  error: /* @__PURE__ */ jsxs5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] }),
-  info: /* @__PURE__ */ jsxs11("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  info: /* @__PURE__ */ jsxs5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] })
 };
 function ToastItemComponent({ item, onRemove }) {
-  const [exiting, setExiting] = useState7(false);
+  const [exiting, setExiting] = useState3(false);
   useEffect3(() => {
     const timer = setTimeout(() => {
       setExiting(true);
@@ -1125,14 +873,14 @@ function ToastItemComponent({ item, onRemove }) {
     }, 5e3);
     return () => clearTimeout(timer);
   }, [item.id, onRemove]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-white text-sm min-w-[280px] max-w-[400px] ${typeStyles[item.type]} ${exiting ? "animate-slide-out" : "animate-slide-in"}`,
       children: [
-        /* @__PURE__ */ jsx16("span", { className: "flex-shrink-0", children: typeIcons[item.type] }),
-        /* @__PURE__ */ jsx16("span", { className: "flex-1", children: item.message }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx6("span", { className: "flex-shrink-0", children: typeIcons[item.type] }),
+        /* @__PURE__ */ jsx6("span", { className: "flex-1", children: item.message }),
+        /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: () => {
@@ -1140,9 +888,9 @@ function ToastItemComponent({ item, onRemove }) {
               setTimeout(() => onRemove(item.id), 300);
             },
             className: "flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ jsxs11("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx16("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx16("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ] })
           }
         )
@@ -1151,12 +899,12 @@ function ToastItemComponent({ item, onRemove }) {
   );
 }
 function ToastProvider({ children }) {
-  const [items, setItems] = useState7([]);
-  const show = useCallback3((type, message) => {
+  const [items, setItems] = useState3([]);
+  const show = useCallback2((type, message) => {
     const id = ++nextId;
     setItems((prev) => [...prev, { id, type, message }]);
   }, []);
-  const remove = useCallback3((id) => {
+  const remove = useCallback2((id) => {
     setItems((prev) => prev.filter((item) => item.id !== id));
   }, []);
   useEffect3(() => {
@@ -1165,10 +913,10 @@ function ToastProvider({ children }) {
       singletonShow = null;
     };
   }, [show]);
-  return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { show }, children: [
+  return /* @__PURE__ */ jsxs5(ToastContext.Provider, { value: { show }, children: [
     children,
-    /* @__PURE__ */ jsx16("div", { className: "fixed top-4 right-4 z-[100] flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx16(ToastItemComponent, { item, onRemove: remove }, item.id)) }),
-    /* @__PURE__ */ jsx16("style", { children: `
+    /* @__PURE__ */ jsx6("div", { className: "fixed top-4 right-4 z-[100] flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx6(ToastItemComponent, { item, onRemove: remove }, item.id)) }),
+    /* @__PURE__ */ jsx6("style", { children: `
         @keyframes slide-in {
           from { transform: translateX(100%); opacity: 0; }
           to { transform: translateX(0); opacity: 1; }
@@ -1183,124 +931,727 @@ function ToastProvider({ children }) {
   ] });
 }
 function useToast() {
-  const context = useContext2(ToastContext);
+  const context = useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
-  return context;
+  return context;
+}
+
+// src/MessageText.tsx
+import { useCallback as useCallback3, useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function MessageText({ message }) {
+  const [copied, setCopied] = useState4(false);
+  const handleCopy = useCallback3(async () => {
+    if (!message.content) return;
+    try {
+      await navigator.clipboard.writeText(message.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [message.content]);
+  if (message.type === "template")
+    return /* @__PURE__ */ jsx7("p", { className: "text-sm italic text-[#667781]", children: message.content ?? "Template message" });
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      onClick: handleCopy,
+      className: "text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through",
+      children: [
+        /* @__PURE__ */ jsx7("span", { children: parseWhatsAppFormatting(message.content ?? "") }),
+        copied && /* @__PURE__ */ jsx7("span", { className: "absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg", children: "Copiado!" })
+      ]
+    }
+  );
+}
+
+// src/MessageTimestamp.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function MessageTimestamp({ timestamp, status, isOutbound }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-[3px]", children: [
+    /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-[#667781] leading-[15px] select-none", children: timestamp }),
+    isOutbound && status && /* @__PURE__ */ jsx8("span", { className: "flex items-center -mr-[2px]", children: /* @__PURE__ */ jsx8(StatusTicks, { status }) })
+  ] });
+}
+
+// src/MessageTail.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function MessageTail({ isOutbound }) {
+  if (isOutbound)
+    return /* @__PURE__ */ jsx9("svg", { className: "absolute top-0 -right-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "#d9fdd3", children: /* @__PURE__ */ jsx9("path", { d: "M5 0H0v11c1.5-2 4.5-2 5-4V0z" }) });
+  return /* @__PURE__ */ jsx9("svg", { className: "absolute top-0 -left-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "white", children: /* @__PURE__ */ jsx9("path", { d: "M0 0h5v11C3.5 9 .5 9 0 7V0z" }) });
+}
+
+// src/conversationWindow.ts
+var MINUTE_MS = 6e4;
+var HOUR_MS = 60 * MINUTE_MS;
+var DAY_MS = 24 * HOUR_MS;
+var CONVERSATION_WINDOW = {
+  ALL: "all",
+  FRESH: "fresh",
+  WARNING: "warning",
+  CRITICAL: "critical",
+  EXPIRED: "expired"
+};
+var WINDOW_FILTERS = [
+  { value: CONVERSATION_WINDOW.ALL, label: "Todas", dotClass: "" },
+  { value: CONVERSATION_WINDOW.FRESH, label: "<12h", dotClass: "bg-green-500" },
+  { value: CONVERSATION_WINDOW.WARNING, label: "12-21h", dotClass: "bg-yellow-500" },
+  { value: CONVERSATION_WINDOW.CRITICAL, label: "21-24h", dotClass: "bg-red-500" },
+  { value: CONVERSATION_WINDOW.EXPIRED, label: ">24h", dotClass: "bg-gray-400" }
+];
+var WARNING_RATIO = 0.5;
+var CRITICAL_RATIO = 0.875;
+function windowOf(params) {
+  const capabilities = capabilitiesOf(params.channel);
+  if (!capabilities.hasSessionWindow) return CONVERSATION_WINDOW.FRESH;
+  if (!params.lastInboundAt) return CONVERSATION_WINDOW.EXPIRED;
+  const windowMs = capabilities.windowHours * HOUR_MS;
+  const elapsed = params.now - new Date(params.lastInboundAt).getTime();
+  if (elapsed >= windowMs) return CONVERSATION_WINDOW.EXPIRED;
+  if (elapsed >= windowMs * CRITICAL_RATIO) return CONVERSATION_WINDOW.CRITICAL;
+  if (elapsed >= windowMs * WARNING_RATIO) return CONVERSATION_WINDOW.WARNING;
+  return CONVERSATION_WINDOW.FRESH;
+}
+function formatStalledFor(lastAt, now) {
+  const elapsed = Math.max(0, now - new Date(lastAt).getTime());
+  const days = Math.floor(elapsed / DAY_MS);
+  const hours = Math.floor(elapsed % DAY_MS / HOUR_MS);
+  const minutes = Math.floor(elapsed % HOUR_MS / MINUTE_MS);
+  if (days > 0) return `${days}d ${hours}h:${String(minutes).padStart(2, "0")}m`;
+  if (hours > 0) return `${hours}h:${String(minutes).padStart(2, "0")}m`;
+  return `${minutes}m`;
+}
+
+// src/ChannelIcon.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var CHANNEL_BRAND_COLOR = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: "#25D366",
+  [CONVERSATION_CHANNEL.MESSENGER]: "#0084FF",
+  [CONVERSATION_CHANNEL.INSTAGRAM]: "#E4405F",
+  [CONVERSATION_CHANNEL.WEBCHAT]: "#64748B"
+};
+function Glyph({ channel }) {
+  const color = CHANNEL_BRAND_COLOR[channel];
+  if (channel === CONVERSATION_CHANNEL.WHATSAPP) {
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+      /* @__PURE__ */ jsx10(
+        "path",
+        {
+          d: "M8.6 7.2c.3-.1.7 0 .9.3l1 1.6c.2.3.1.7-.1.9l-.7.7c.6 1.3 1.6 2.3 2.9 2.9l.7-.7c.2-.2.6-.3.9-.1l1.6 1c.3.2.4.6.3.9-.4 1-1.4 1.6-2.4 1.4-3-.5-5.4-2.9-5.9-5.9-.2-1 .4-2 1.4-2.4Z",
+          fill: "#fff"
+        }
+      )
+    ] });
+  }
+  if (channel === CONVERSATION_CHANNEL.MESSENGER) {
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+      /* @__PURE__ */ jsx10("path", { d: "M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z", fill: "#fff", stroke: "#fff", strokeWidth: "1.4", strokeLinejoin: "round" })
+    ] });
+  }
+  if (channel === CONVERSATION_CHANNEL.INSTAGRAM) {
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("rect", { x: "2", y: "2", width: "20", height: "20", rx: "6", fill: color }),
+      /* @__PURE__ */ jsx10("rect", { x: "6.5", y: "6.5", width: "11", height: "11", rx: "3.5", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "2.6", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
+      /* @__PURE__ */ jsx10("circle", { cx: "16.4", cy: "7.6", r: "1", fill: "#fff" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+    /* @__PURE__ */ jsx10("path", { d: "M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z", fill: "#fff" })
+  ] });
 }
-
-// src/MessageText.tsx
-import { useCallback as useCallback4, useState as useState8 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function MessageText({ message }) {
-  const [copied, setCopied] = useState8(false);
-  const handleCopy = useCallback4(async () => {
-    if (!message.content) return;
-    try {
-      await navigator.clipboard.writeText(message.content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
+function ChannelIcon({ channel, size = 14, className = "" }) {
+  const resolved = channel ?? CONVERSATION_CHANNEL.WHATSAPP;
+  const { label } = capabilitiesOf(resolved);
+  return /* @__PURE__ */ jsx10(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      className: `inline-block shrink-0 ${className}`.trim(),
+      role: "img",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx10(Glyph, { channel: resolved })
     }
-  }, [message.content]);
-  if (message.type === "template")
-    return /* @__PURE__ */ jsx17("p", { className: "text-sm italic text-[#667781]", children: message.content ?? "Template message" });
-  return /* @__PURE__ */ jsxs12(
-    "div",
+  );
+}
+
+// src/ConversationRow.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var WINDOW_TITLE = {
+  [CONVERSATION_WINDOW.ALL]: "",
+  [CONVERSATION_WINDOW.FRESH]: "Janela de 24h aberta (menos de 12h)",
+  [CONVERSATION_WINDOW.WARNING]: "Janela de 24h fechando (12-21h)",
+  [CONVERSATION_WINDOW.CRITICAL]: "Janela de 24h quase expirada (21-24h)",
+  [CONVERSATION_WINDOW.EXPIRED]: "Janela de 24h expirada \u2014 s\xF3 template"
+};
+var STALLED_THRESHOLD_MS = 60 * 60 * 1e3;
+var WINDOW_BAR_CLASS = {
+  [CONVERSATION_WINDOW.ALL]: "bg-transparent",
+  [CONVERSATION_WINDOW.FRESH]: "bg-green-500",
+  [CONVERSATION_WINDOW.WARNING]: "bg-yellow-500",
+  [CONVERSATION_WINDOW.CRITICAL]: "bg-red-500",
+  [CONVERSATION_WINDOW.EXPIRED]: "bg-gray-300"
+};
+function ConversationRow({
+  conversation,
+  active,
+  selected,
+  now,
+  busy,
+  onOpen,
+  onToggleSelected,
+  onTakeover,
+  className,
+  classNames
+}) {
+  const capabilities = capabilitiesOf(conversation.channel);
+  const window2 = windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel });
+  const stalledMs = now - new Date(conversation.lastAt).getTime();
+  const isStalled = stalledMs > STALLED_THRESHOLD_MS;
+  const isWaiting = conversation.mode === "bot" && conversation.waitingHuman;
+  return /* @__PURE__ */ jsxs9("div", { className: cn("cv-row flex border-b", active && "cv-row--active", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx11(
+      "span",
+      {
+        className: cn("w-1 shrink-0", WINDOW_BAR_CLASS[window2], classNames?.windowBar),
+        title: WINDOW_TITLE[window2],
+        "aria-label": WINDOW_TITLE[window2]
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-2 px-2 pt-2", children: [
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "checkbox",
+            checked: selected,
+            onChange: onToggleSelected,
+            "aria-label": `Selecionar conversa ${conversation.whatsappNumber}`,
+            className: "mt-3"
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11(
+          ConversationListItem,
+          {
+            conversation,
+            active,
+            onClick: onOpen,
+            showDivider: false,
+            highlightActive: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-1.5 px-4 pb-2 pl-8", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "cv-pill", children: [
+          /* @__PURE__ */ jsx11(ChannelIcon, { channel: conversation.channel }),
+          " ",
+          capabilities.label
+        ] }),
+        conversation.mode === "human" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--success", children: "\u{1F9D1}\u200D\u{1F4BC} em atendimento" }) : null,
+        isWaiting ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--warning", children: "\u23F3 aguardando atendimento" }) : null,
+        !isWaiting && conversation.mode === "bot" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill", children: "\u{1F916} bot ativo" }) : null,
+        isStalled ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--danger", children: [
+          "\u23F1\uFE0F parada h\xE1 ",
+          formatStalledFor(conversation.lastAt, now)
+        ] }) : null,
+        isWaiting ? /* @__PURE__ */ jsx11("button", { type: "button", onClick: onTakeover, disabled: busy, className: "cv-header-action", children: "\u25B6\uFE0F Continuar Atendimento" }) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/ConversationHeader.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_HEADER_LABELS = {
+  botMode: "\u{1F916} atendimento autom\xE1tico",
+  humanMode: "\u{1F9D1}\u200D\u{1F4BC} atendimento humano",
+  returnToBot: "Devolver ao bot",
+  finish: "Finalizar",
+  takeover: "Assumir atendimento",
+  download: "Baixar conversa",
+  documents: "Arquivos da conversa",
+  back: "Voltar para a lista",
+  moreActions: "Mais a\xE7\xF5es"
+};
+function ConversationHeader({
+  conversation,
+  busy = false,
+  onTakeover,
+  onReturnToBot,
+  onFinish,
+  onDownload,
+  onOpenDocuments,
+  documentsOpen = false,
+  extraUtilities,
+  onBack,
+  labels: labelsOverride,
+  className,
+  classNames
+}) {
+  const labels = { ...DEFAULT_CONVERSATION_HEADER_LABELS, ...labelsOverride };
+  const isHuman = conversation.mode === "human";
+  const handle = conversation.contactId ?? conversation.whatsappNumber;
+  const displayHandle = formatContactHandle({ handle, channel: conversation.channel });
+  const flag = contactFlag({ handle, channel: conversation.channel });
+  const capabilities = capabilitiesOf(conversation.channel);
+  const [menuOpen, setMenuOpen] = useState5(false);
+  const utilities = [
+    onOpenDocuments ? { key: "documents", icon: "\u{1F4C4}", label: labels.documents, run: onOpenDocuments, active: documentsOpen } : void 0,
+    onDownload ? { key: "download", icon: "\u2B07\uFE0F", label: labels.download, run: onDownload, active: false } : void 0,
+    ...(extraUtilities ?? []).map((utility) => ({ ...utility, active: utility.active ?? false }))
+  ].filter(
+    (utility) => Boolean(utility)
+  );
+  const actions = [
+    !isHuman && onTakeover ? { key: "takeover", label: labels.takeover, run: onTakeover, className: "cv-header-action--primary" } : void 0,
+    isHuman && onReturnToBot ? { key: "release", label: labels.returnToBot, run: onReturnToBot, className: "" } : void 0,
+    isHuman && onFinish ? { key: "finish", label: `\u2715 ${labels.finish}`, run: onFinish, className: "cv-header-action--danger" } : void 0
+  ].filter((action) => Boolean(action));
+  const menuItems = [
+    ...utilities.map((utility) => ({
+      key: utility.key,
+      label: `${utility.icon} ${utility.label}`,
+      run: utility.run,
+      className: ""
+    })),
+    ...actions
+  ];
+  return /* @__PURE__ */ jsxs10(
+    "header",
     {
-      onClick: handleCopy,
-      className: "text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through",
+      className: cn(
+        "flex flex-nowrap items-center justify-between gap-3 border-b px-4 py-3",
+        classNames?.root,
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsx17("span", { children: parseWhatsAppFormatting(message.content ?? "") }),
-        copied && /* @__PURE__ */ jsx17("span", { className: "absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg", children: "Copiado!" })
+        /* @__PURE__ */ jsxs10("div", { className: cn("flex min-w-0 flex-1 items-center gap-3", classNames?.identity), children: [
+          onBack ? /* @__PURE__ */ jsx12("button", { type: "button", onClick: onBack, className: "cv-back cv-touch", "aria-label": labels.back, title: labels.back, children: "\u2190" }) : null,
+          /* @__PURE__ */ jsx12(Avatar, { name: conversation.clientName, size: "md" }),
+          /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx12("p", { className: cn("truncate font-medium", classNames?.name), children: conversation.clientName ?? displayHandle }),
+            /* @__PURE__ */ jsxs10("p", { className: cn("truncate text-xs text-gray-500", classNames?.meta), children: [
+              flag ? `${flag} ` : "",
+              displayHandle,
+              /* @__PURE__ */ jsxs10("span", { className: "ml-2 inline-flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx12(ChannelIcon, { channel: conversation.channel }),
+                /* @__PURE__ */ jsx12("span", { className: "cv-only-wide", children: capabilities.label })
+              ] }),
+              /* @__PURE__ */ jsx12("span", { className: "ml-2 cv-only-wide", children: isHuman ? labels.humanMode : labels.botMode }),
+              /* @__PURE__ */ jsx12("span", { className: "ml-1 cv-only-narrow", title: isHuman ? labels.humanMode : labels.botMode, children: isHuman ? "\u{1F9D1}\u200D\u{1F4BC}" : "\u{1F916}" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: cn("flex shrink-0 items-center gap-2", classNames?.actions), children: [
+          /* @__PURE__ */ jsxs10("div", { className: cn("hidden items-center gap-2 lg:flex", classNames?.desktopActions), children: [
+            utilities.map((utility) => /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                onClick: utility.run,
+                disabled: busy,
+                "aria-pressed": utility.active,
+                title: utility.label,
+                "aria-label": utility.label,
+                className: `cv-header-icon ${utility.active ? "cv-header-icon--active" : ""}`,
+                children: utility.icon
+              },
+              utility.key
+            )),
+            actions.map((action) => /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                onClick: action.run,
+                disabled: busy,
+                className: `cv-header-action ${action.className}`,
+                children: action.label
+              },
+              action.key
+            ))
+          ] }),
+          menuItems.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("cv-menu lg:hidden", classNames?.mobileMenu), children: [
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMenuOpen(!menuOpen),
+                "aria-expanded": menuOpen,
+                "aria-label": labels.moreActions,
+                title: labels.moreActions,
+                className: "cv-header-icon cv-touch",
+                children: "\u22EE"
+              }
+            ),
+            menuOpen ? /* @__PURE__ */ jsx12("div", { className: "cv-menu-panel", role: "menu", children: menuItems.map((item) => /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                onClick: () => {
+                  setMenuOpen(false);
+                  item.run();
+                },
+                disabled: busy,
+                className: `cv-header-action cv-touch ${item.className}`,
+                children: item.label
+              },
+              item.key
+            )) }) : null
+          ] }) : null
+        ] })
       ]
     }
   );
 }
 
-// src/MessageTimestamp.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-function MessageTimestamp({ timestamp, status, isOutbound }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-end gap-[3px]", children: [
-    /* @__PURE__ */ jsx18("span", { className: "text-[11px] text-[#667781] leading-[15px] select-none", children: timestamp }),
-    isOutbound && status && /* @__PURE__ */ jsx18("span", { className: "flex items-center -mr-[2px]", children: /* @__PURE__ */ jsx18(StatusTicks, { status }) })
-  ] });
-}
+// src/ConversationContextPanel.tsx
+import { useState as useState7 } from "react";
+import { Check, ChevronDown, ChevronUp, Clock, Pencil } from "lucide-react";
 
-// src/MessageTail.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-function MessageTail({ isOutbound }) {
-  if (isOutbound)
-    return /* @__PURE__ */ jsx19("svg", { className: "absolute top-0 -right-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "#d9fdd3", children: /* @__PURE__ */ jsx19("path", { d: "M5 0H0v11c1.5-2 4.5-2 5-4V0z" }) });
-  return /* @__PURE__ */ jsx19("svg", { className: "absolute top-0 -left-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "white", children: /* @__PURE__ */ jsx19("path", { d: "M0 0h5v11C3.5 9 .5 9 0 7V0z" }) });
+// src/useIsNarrow.ts
+import { useEffect as useEffect4, useState as useState6 } from "react";
+var NARROW_MAX_WIDTH_PX = 1023;
+function useIsNarrow() {
+  const [isNarrow, setIsNarrow] = useState6(
+    () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`).matches
+  );
+  useEffect4(() => {
+    const query = window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`);
+    const handleChange = (event) => setIsNarrow(event.matches);
+    query.addEventListener("change", handleChange);
+    setIsNarrow(query.matches);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+  return isNarrow;
 }
 
-// src/useWaitingNotifications.ts
-import { useState as useState9, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+// src/ConversationContextPanel.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_CONTEXT_LABELS = {
+  title: "Suas Sele\xE7\xF5es",
+  empty: "Nada coletado ainda nesta conversa.",
+  collapse: "fechar",
+  expand: "abrir",
+  notCollected: "a coletar"
+};
+function statusOf(entry) {
+  if (entry.status) return entry.status;
+  return entry.value ? "completed" : "pending";
+}
+var CARD_STYLE = {
+  completed: "bg-white dark:bg-gray-800 border-2 border-green-200 dark:border-green-800 shadow-sm",
+  editing: "bg-white dark:bg-gray-800 border-2 border-blue-200 dark:border-blue-800 shadow-sm",
+  pending: "border-2 border-dashed border-gray-200 bg-white/40 dark:border-gray-700 dark:bg-gray-800/30"
+};
+var GLYPH_STYLE = {
+  completed: "text-green-600 dark:text-green-400",
+  editing: "text-blue-600 dark:text-blue-400",
+  pending: "text-gray-400 dark:text-gray-500"
+};
+function StatusGlyph({ status }) {
+  const size = 11;
+  if (status === "completed") return /* @__PURE__ */ jsx13(Check, { size, "aria-hidden": true });
+  if (status === "editing") return /* @__PURE__ */ jsx13(Pencil, { size, "aria-hidden": true });
+  return /* @__PURE__ */ jsx13(Clock, { size, "aria-hidden": true });
+}
+function CountPill({
+  status,
+  count,
+  className
+}) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs11("span", { className: cn("flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", className), children: [
+    /* @__PURE__ */ jsx13(StatusGlyph, { status }),
+    count
+  ] });
+}
+function ConversationContextPanel({
+  entries,
+  defaultOpen,
+  flowLabel,
+  labels: labelsOverride,
+  className,
+  classNames
+}) {
+  const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride };
+  const counts = { completed: 0, pending: 0, editing: 0 };
+  for (const entry of entries) counts[statusOf(entry)] += 1;
+  const isNarrow = useIsNarrow();
+  const [manualOpen, setManualOpen] = useState7(void 0);
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && counts.completed > 0);
+  return (
+    // Faixa azul clara com separador, como o wrapper do financiamento: sem ela o card encostava
+    // direto no papel de parede da conversa e os dois blocos se misturavam.
+    /* @__PURE__ */ jsx13("div", { className: cn("border-b bg-blue-50/60 px-3 py-3 dark:border-gray-700 dark:bg-blue-950/20", className), children: /* @__PURE__ */ jsxs11(
+      "section",
+      {
+        className: cn(
+          "overflow-hidden rounded-lg border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 dark:border-blue-900 dark:from-blue-950/30 dark:to-indigo-950/30",
+          classNames?.root
+        ),
+        children: [
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => setManualOpen(!open),
+              "aria-expanded": open,
+              title: open ? labels.collapse : labels.expand,
+              className: cn(
+                "flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2.5 text-left transition-colors hover:bg-blue-100/40 dark:hover:bg-blue-900/20",
+                classNames?.toggle
+              ),
+              children: [
+                /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u{1F4CB}" }),
+                  /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.title }),
+                  flowLabel ? /* @__PURE__ */ jsx13("span", { className: "truncate text-xs font-medium text-blue-600 dark:text-blue-400", children: flowLabel }) : null,
+                  /* @__PURE__ */ jsx13(
+                    "span",
+                    {
+                      className: cn(
+                        "inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-medium text-white",
+                        classNames?.counter
+                      ),
+                      children: entries.length
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs11("span", { className: "flex flex-shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "completed",
+                      count: counts.completed,
+                      className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "editing",
+                      count: counts.editing,
+                      className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "pending",
+                      count: counts.pending,
+                      className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                    }
+                  ),
+                  open ? /* @__PURE__ */ jsx13(ChevronUp, { size: 15, className: "flex-shrink-0 text-blue-500", "aria-hidden": true }) : /* @__PURE__ */ jsx13(ChevronDown, { size: 15, className: "flex-shrink-0 text-blue-500", "aria-hidden": true })
+                ] })
+              ]
+            }
+          ),
+          open ? (
+            /**
+             * Teto de altura com rolagem interna, como no financiamento (`max-h-64 overflow-y-auto`).
+             * Sem isso o painel cresce sem limite — e cresce de verdade: o host anexa as chaves de
+             * contexto que ele não conhece ao fim da lista, então uma conversa com bastante estado
+             * empurrava a conversa inteira para fora da tela.
+             *
+             * A diferença: lá o teto envolve o cabeçalho também, então ele rola junto e sai de vista.
+             * Aqui só o corpo rola — o cabeçalho é o que fecha o painel, e perder o clique de fechar
+             * no meio da rolagem é pior do que a economia de uma linha de markup.
+             */
+            /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: cn(
+                  "cv-scrollbar-thin max-h-64 overflow-y-auto border-t border-blue-200 px-4 pb-4 pt-1 dark:border-blue-900",
+                  classNames?.body
+                ),
+                children: entries.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "pt-2 text-xs text-gray-500 dark:text-gray-400", children: labels.empty }) : (
+                  /**
+                   * Três colunas no desktop, como no financiamento — com duas, seis campos viravam uma
+                   * coluna alta que empurrava a conversa.
+                   *
+                   * O que não fizemos igual: lá o painel FILTRA o que não foi coletado, porque a fonte
+                   * só guarda o que o cliente respondeu. Aqui a lista de campos é conhecida de antemão,
+                   * e "falta endereço" é justamente o que o atendente precisa ver ao assumir. Então o
+                   * pendente aparece — tracejado e apagado, para ler como lacuna e não como dado.
+                   */
+                  /* @__PURE__ */ jsx13("dl", { className: "mt-2 grid grid-cols-2 gap-2 lg:grid-cols-3", children: entries.map((entry) => {
+                    const status = statusOf(entry);
+                    return /* @__PURE__ */ jsxs11(
+                      "div",
+                      {
+                        className: cn("min-w-0 rounded-lg p-2.5 transition-all", CARD_STYLE[status]),
+                        children: [
+                          /* @__PURE__ */ jsxs11("dt", { className: "mb-1 flex items-center justify-center gap-1", children: [
+                            entry.icon ? /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-base leading-none", children: entry.icon }) : null,
+                            /* @__PURE__ */ jsx13("span", { className: "truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500 dark:text-gray-400", children: entry.label }),
+                            /* @__PURE__ */ jsx13("span", { className: cn("flex-shrink-0 leading-none", GLYPH_STYLE[status]), children: /* @__PURE__ */ jsx13(StatusGlyph, { status }) })
+                          ] }),
+                          /* @__PURE__ */ jsx13(
+                            "dd",
+                            {
+                              className: cn(
+                                "truncate text-center text-xs font-semibold",
+                                entry.value ? "text-gray-900 dark:text-gray-100" : "italic font-normal text-gray-400 dark:text-gray-500"
+                              ),
+                              title: entry.value ?? labels.notCollected,
+                              children: entry.value ?? labels.notCollected
+                            }
+                          )
+                        ]
+                      },
+                      entry.key
+                    );
+                  }) })
+                )
+              }
+            )
+          ) : null
+        ]
+      }
+    ) })
+  );
+}
 
-// src/providers/ConversationsProvider.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ConversationsContext = createContext3(null);
-function ConversationsProvider({
-  api,
-  sse,
-  children
+// src/WindowExpiredNotice.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_WINDOW_EXPIRED_LABELS = {
+  title: "\u23F0 Janela de 24h expirada \u2014 o WhatsApp n\xE3o aceita mensagens livres.",
+  description: "Envie uma mensagem de template para reabrir a conversa com o cliente.",
+  sendTemplate: "\u{1F4E8} Enviar Template (HSM)"
+};
+function WindowExpiredNotice({
+  onSendTemplate,
+  disabled = false,
+  labels: labelsOverride,
+  className
 }) {
-  return /* @__PURE__ */ jsx20(ConversationsContext.Provider, { value: { api, sse }, children });
+  const labels = { ...DEFAULT_WINDOW_EXPIRED_LABELS, ...labelsOverride };
+  return /* @__PURE__ */ jsxs12("div", { role: "status", className: cn("border-t bg-yellow-50 px-4 py-3 text-sm dark:bg-yellow-950", className), children: [
+    /* @__PURE__ */ jsx14("p", { className: "font-medium text-yellow-900 dark:text-yellow-200", children: labels.title }),
+    /* @__PURE__ */ jsx14("p", { className: "text-yellow-800 dark:text-yellow-300", children: labels.description }),
+    onSendTemplate ? /* @__PURE__ */ jsx14("button", { type: "button", onClick: onSendTemplate, disabled, className: "cv-header-action mt-2", children: labels.sendTemplate }) : null
+  ] });
 }
-function useConversations() {
-  return useContext3(ConversationsContext);
+function isWindowBlocking(window2) {
+  return window2 === CONVERSATION_WINDOW.EXPIRED;
+}
+
+// src/conversationTranscript.ts
+var SENDER_LABEL = {
+  customer: "Cliente",
+  bot: "Bot",
+  agent: "Atendente"
+};
+function buildTranscriptText(params) {
+  const header = [
+    `Conversa: ${params.clientName ?? params.whatsappNumber}`,
+    `N\xFAmero: ${params.whatsappNumber}`,
+    `Mensagens: ${params.messages.length}`,
+    ""
+  ];
+  const lines = params.messages.map((message) => {
+    const author = message.agentName ?? SENDER_LABEL[message.sender];
+    return `[${formatStamp(message.timestamp)}] ${author}: ${bodyOf(message)}`;
+  });
+  return [...header, ...lines].join("\n");
+}
+function bodyOf(message) {
+  const transcript = message.transcription?.text?.trim();
+  if (message.type === "audio" && transcript) return `[\xE1udio] ${transcript}`;
+  return message.content ?? message.caption ?? `<${message.type}>`;
+}
+function formatStamp(timestamp) {
+  if (!timestamp) return "data indispon\xEDvel";
+  const parsed = new Date(timestamp);
+  return Number.isNaN(parsed.getTime()) ? "data indispon\xEDvel" : parsed.toLocaleString("pt-BR");
+}
+function buildTranscriptFilename(whatsappNumber, generatedAt) {
+  const stamp = generatedAt.toISOString().slice(0, 10);
+  return `conversa-${whatsappNumber}-${stamp}.txt`;
+}
+function downloadTextFile(filename, content) {
+  const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
 }
 
 // src/useWaitingNotifications.ts
-function useWaitingNotifications() {
-  const conversationsCtx = useConversations();
-  const [conversations, setConversations] = useState9([]);
-  const previousUnreadMap = useRef5(/* @__PURE__ */ new Map());
-  const notifiedIds = useRef5(/* @__PURE__ */ new Set());
-  const pollConversations = useCallback5(async () => {
-    if (!conversationsCtx) return;
+import { useState as useState8, useEffect as useEffect5, useRef as useRef4, useCallback as useCallback4 } from "react";
+var DEFAULT_POLL_INTERVAL_MS = 1e4;
+var DEFAULT_LIMIT = 50;
+var DEFAULT_LABELS = {
+  title: (conversation) => conversation.clientName ?? conversation.whatsappNumber,
+  body: (conversation) => conversation.lastContent ?? "Nova mensagem"
+};
+function useWaitingNotifications(params) {
+  const conversationsContext = useConversations();
+  const [conversations, setConversations] = useState8([]);
+  const previousUnreadMap = useRef4(/* @__PURE__ */ new Map());
+  const notifiedIds = useRef4(/* @__PURE__ */ new Set());
+  const isPollingRef = useRef4(false);
+  const isEnabled = params?.enabled ?? true;
+  const intervalMs = params?.intervalMs ?? DEFAULT_POLL_INTERVAL_MS;
+  const icon = params?.icon;
+  const listParams = params?.params;
+  const labelTitle = params?.labels?.title ?? DEFAULT_LABELS.title;
+  const labelBody = params?.labels?.body ?? DEFAULT_LABELS.body;
+  const refresh = useCallback4(async () => {
+    if (!conversationsContext || isPollingRef.current) return;
+    isPollingRef.current = true;
     try {
-      const result = await conversationsCtx.api.fetchConversations({ limit: 50 });
+      const result = conversationsOf(
+        await conversationsContext.api.fetchConversations({ limit: DEFAULT_LIMIT, ...listParams })
+      );
       setConversations(result);
       const currentMap = /* @__PURE__ */ new Map();
-      for (const conv of result) {
-        currentMap.set(conv.id, conv.unread);
-      }
-      for (const conv of result) {
-        if (conv.unread <= 0) continue;
-        const prev = previousUnreadMap.current.get(conv.id) ?? 0;
-        if (conv.unread > prev && !notifiedIds.current.has(conv.id)) {
-          notifiedIds.current.add(conv.id);
-          if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "granted") {
-            const title = conv.clientName ?? conv.whatsappNumber;
-            const body = conv.lastContent ?? "Nova mensagem";
-            new Notification(title, { body, icon: "/favicon.ico" });
-          }
+      for (const conversation of result) currentMap.set(conversation.id, conversation.unread);
+      for (const conversation of result) {
+        if (conversation.unread <= 0) continue;
+        const previousUnread = previousUnreadMap.current.get(conversation.id) ?? 0;
+        if (conversation.unread <= previousUnread || notifiedIds.current.has(conversation.id)) continue;
+        notifiedIds.current.add(conversation.id);
+        if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "granted") {
+          new Notification(labelTitle(conversation), { body: labelBody(conversation), ...icon ? { icon } : {} });
         }
       }
       previousUnreadMap.current = currentMap;
     } catch {
+    } finally {
+      isPollingRef.current = false;
     }
-  }, [conversationsCtx]);
-  useEffect4(() => {
+  }, [conversationsContext, listParams, icon, labelTitle, labelBody]);
+  useEffect5(() => {
+    if (!isEnabled) return;
     if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {
       Notification.requestPermission();
     }
-    pollConversations();
-    const interval = setInterval(pollConversations, 1e4);
+    void refresh();
+    const interval = setInterval(() => void refresh(), intervalMs);
     return () => clearInterval(interval);
-  }, [pollConversations]);
-  const unreadCount = conversations.reduce((sum, conv) => sum + conv.unread, 0);
-  return { unreadCount, conversations };
+  }, [refresh, isEnabled, intervalMs]);
+  const unreadCount = conversations.reduce((sum, conversation) => sum + conversation.unread, 0);
+  return { unreadCount, conversations, refresh };
 }
 
 // src/settings/WhatsAppTemplateSettingsForm.tsx
 import { Plus, RefreshCw, Save, Trash2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var DEFAULT_LABELS = {
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var DEFAULT_LABELS2 = {
   sectionTitle: "WhatsApp",
   sectionDescription: "Template usado para reabrir a janela de 24h com o cliente.",
   templateLabel: "Template aprovado",
@@ -1334,7 +1685,7 @@ function WhatsAppTemplateSettingsForm({
   onSave,
   labels: labelsOverride
 }) {
-  const labels = { ...DEFAULT_LABELS, ...labelsOverride };
+  const labels = { ...DEFAULT_LABELS2, ...labelsOverride };
   const selected = templates.find((template) => template.name === selectedTemplateName);
   function handleSelect(name) {
     const template = templates.find((t) => t.name === name);
@@ -1358,16 +1709,16 @@ function WhatsAppTemplateSettingsForm({
     }
     onVariablesChange([...variables, token]);
   }
-  return /* @__PURE__ */ jsxs14("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx21("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
-      /* @__PURE__ */ jsx21("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+  return /* @__PURE__ */ jsxs13("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
+      /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs14("form", { onSubmit: onSave, className: "p-6 space-y-4", children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ jsx21("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.templateLabel }),
-          /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs13("form", { onSubmit: onSave, className: "p-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.templateLabel }),
+          /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -1375,31 +1726,31 @@ function WhatsAppTemplateSettingsForm({
               disabled: loadingTemplates,
               className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50",
               children: [
-                /* @__PURE__ */ jsx21(RefreshCw, { size: 11, className: loadingTemplates ? "animate-spin" : "" }),
+                /* @__PURE__ */ jsx15(RefreshCw, { size: 11, className: loadingTemplates ? "animate-spin" : "" }),
                 labels.refreshList
               ]
             }
           )
         ] }),
-        templatesError && /* @__PURE__ */ jsxs14("div", { className: "mb-2 rounded-lg bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 px-3 py-2 text-xs text-amber-700 dark:text-amber-400", children: [
+        templatesError && /* @__PURE__ */ jsxs13("div", { className: "mb-2 rounded-lg bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 px-3 py-2 text-xs text-amber-700 dark:text-amber-400", children: [
           labels.errorLoading,
-          /* @__PURE__ */ jsx21("br", {}),
-          /* @__PURE__ */ jsxs14("span", { className: "text-gray-500 dark:text-gray-400 mt-0.5 block", children: [
+          /* @__PURE__ */ jsx15("br", {}),
+          /* @__PURE__ */ jsxs13("span", { className: "text-gray-500 dark:text-gray-400 mt-0.5 block", children: [
             labels.currentNameSaved,
             " ",
-            /* @__PURE__ */ jsx21("strong", { children: selectedTemplateName || "\u2014" })
+            /* @__PURE__ */ jsx15("strong", { children: selectedTemplateName || "\u2014" })
           ] })
         ] }),
-        loadingTemplates && /* @__PURE__ */ jsx21("div", { className: "h-10 rounded-xl bg-gray-100 dark:bg-gray-700 animate-pulse" }),
-        !loadingTemplates && !templatesError && /* @__PURE__ */ jsxs14(
+        loadingTemplates && /* @__PURE__ */ jsx15("div", { className: "h-10 rounded-xl bg-gray-100 dark:bg-gray-700 animate-pulse" }),
+        !loadingTemplates && !templatesError && /* @__PURE__ */ jsxs13(
           "select",
           {
             value: selectedTemplateName,
             onChange: (e) => handleSelect(e.target.value),
             className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
             children: [
-              /* @__PURE__ */ jsx21("option", { value: "", children: labels.selectPlaceholder }),
-              templates.map((template) => /* @__PURE__ */ jsxs14("option", { value: template.name, disabled: template.status !== "APPROVED", children: [
+              /* @__PURE__ */ jsx15("option", { value: "", children: labels.selectPlaceholder }),
+              templates.map((template) => /* @__PURE__ */ jsxs13("option", { value: template.name, disabled: template.status !== "APPROVED", children: [
                 template.displayName,
                 " \xB7 ",
                 template.shortId,
@@ -1411,27 +1762,27 @@ function WhatsAppTemplateSettingsForm({
             ]
           }
         ),
-        selected?.bodyText && /* @__PURE__ */ jsx21("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2 text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap", children: selected.bodyText })
+        selected?.bodyText && /* @__PURE__ */ jsx15("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2 text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap", children: selected.bodyText })
       ] }),
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ jsx21("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.variablesLabel }),
-          /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.variablesLabel }),
+          /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
               onClick: () => onVariablesChange([...variables, ""]),
               className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline",
               children: [
-                /* @__PURE__ */ jsx21(Plus, { size: 12 }),
+                /* @__PURE__ */ jsx15(Plus, { size: 12 }),
                 labels.addVariable
               ]
             }
           )
         ] }),
-        availableVariables.length > 0 && /* @__PURE__ */ jsxs14("div", { className: "mb-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/40 p-2.5", children: [
-          /* @__PURE__ */ jsx21("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-300 mb-1.5", children: labels.variablesAvailableTitle }),
-          /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap gap-1.5", children: availableVariables.map((available) => /* @__PURE__ */ jsxs14(
+        availableVariables.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "mb-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/40 p-2.5", children: [
+          /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-300 mb-1.5", children: labels.variablesAvailableTitle }),
+          /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap gap-1.5", children: availableVariables.map((available) => /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -1439,8 +1790,8 @@ function WhatsAppTemplateSettingsForm({
               title: `Inserir ${available.token}`,
               className: "inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors",
               children: [
-                /* @__PURE__ */ jsx21("code", { className: "text-blue-600 dark:text-blue-300", children: available.token }),
-                /* @__PURE__ */ jsxs14("span", { className: "text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsx15("code", { className: "text-blue-600 dark:text-blue-300", children: available.token }),
+                /* @__PURE__ */ jsxs13("span", { className: "text-gray-400 dark:text-gray-500", children: [
                   "\xB7 ",
                   available.label
                 ] })
@@ -1448,13 +1799,13 @@ function WhatsAppTemplateSettingsForm({
             },
             available.token
           )) }),
-          /* @__PURE__ */ jsx21("p", { className: "mt-1.5 text-[11px] text-gray-400 dark:text-gray-500", children: labels.variablesAvailableHint })
+          /* @__PURE__ */ jsx15("p", { className: "mt-1.5 text-[11px] text-gray-400 dark:text-gray-500", children: labels.variablesAvailableHint })
         ] }),
-        /* @__PURE__ */ jsx21("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-2", children: labels.variablesMappingHint }),
-        variables.length === 0 && /* @__PURE__ */ jsx21("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic", children: labels.noVariables }),
-        /* @__PURE__ */ jsx21("div", { className: "space-y-2", children: variables.map((variable, index) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-xs text-gray-400 dark:text-gray-500 w-6 text-right flex-shrink-0", children: `{{${index + 1}}}` }),
-          /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-2", children: labels.variablesMappingHint }),
+        variables.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic", children: labels.noVariables }),
+        /* @__PURE__ */ jsx15("div", { className: "space-y-2", children: variables.map((variable, index) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx15("span", { className: "text-xs text-gray-400 dark:text-gray-500 w-6 text-right flex-shrink-0", children: `{{${index + 1}}}` }),
+          /* @__PURE__ */ jsx15(
             "input",
             {
               type: "text",
@@ -1464,27 +1815,27 @@ function WhatsAppTemplateSettingsForm({
               className: "flex-1 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500"
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
               onClick: () => removeVariable(index),
               className: "text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0",
               title: labels.removeVariable,
-              children: /* @__PURE__ */ jsx21(Trash2, { size: 14 })
+              children: /* @__PURE__ */ jsx15(Trash2, { size: 14 })
             }
           )
         ] }, index)) })
       ] }),
-      saveSuccess && /* @__PURE__ */ jsx21("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
-      /* @__PURE__ */ jsx21("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs14(
+      saveSuccess && /* @__PURE__ */ jsx15("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
+      /* @__PURE__ */ jsx15("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "submit",
           disabled: saving || !selectedTemplateName.trim(),
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            saving ? /* @__PURE__ */ jsx21("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx21(Save, { size: 14 }),
+            saving ? /* @__PURE__ */ jsx15("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx15(Save, { size: 14 }),
             saving ? labels.saving : labels.save
           ]
         }
@@ -1494,13 +1845,14 @@ function WhatsAppTemplateSettingsForm({
 }
 
 // src/settings/WhatsAppCreateTemplateForm.tsx
-import { SendHorizonal } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var DEFAULT_LABELS2 = {
+import { SendHorizonal as SendHorizonal2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_LABELS3 = {
   sectionTitle: "Criar novo template",
   sectionDescription: "Envia um template para aprova\xE7\xE3o da Meta.",
   nameLabel: "Nome do template",
   nameHint: "Somente letras min\xFAsculas, n\xFAmeros e underscore.",
+  namePlaceholder: "reengajamento_cliente",
   categoryLabel: "Categoria",
   languageLabel: "Idioma",
   headerLabel: "Cabe\xE7alho",
@@ -1546,82 +1898,82 @@ function WhatsAppCreateTemplateForm({
   labels: labelsOverride,
   variableExamples = DEFAULT_VARIABLE_EXAMPLES
 }) {
-  const labels = { ...DEFAULT_LABELS2, ...labelsOverride };
+  const labels = { ...DEFAULT_LABELS3, ...labelsOverride };
   const detectedVariables = detectVariables(value.bodyText);
   function set(key, next) {
     onChange({ ...value, [key]: next });
   }
-  return /* @__PURE__ */ jsxs15("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx22("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
-      /* @__PURE__ */ jsx22("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+  return /* @__PURE__ */ jsxs14("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx16("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
+      /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs15("form", { onSubmit, className: "p-6 space-y-4", children: [
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.nameLabel }),
-        /* @__PURE__ */ jsx22("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.nameHint }),
-        /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsxs14("form", { onSubmit, className: "p-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.nameLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.nameHint }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "text",
             value: value.name,
             onChange: (e) => set("name", e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "_")),
-            placeholder: "reengajamento_cliente",
+            placeholder: labels.namePlaceholder,
             className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
             required: true
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.categoryLabel }),
-          /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.categoryLabel }),
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.category,
               onChange: (e) => set("category", e.target.value),
               className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
               children: [
-                /* @__PURE__ */ jsx22("option", { value: "UTILITY", children: "UTILITY (Transacional)" }),
-                /* @__PURE__ */ jsx22("option", { value: "MARKETING", children: "MARKETING (Promocional)" })
+                /* @__PURE__ */ jsx16("option", { value: "UTILITY", children: "UTILITY (Transacional)" }),
+                /* @__PURE__ */ jsx16("option", { value: "MARKETING", children: "MARKETING (Promocional)" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.languageLabel }),
-          /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.languageLabel }),
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.language,
               onChange: (e) => set("language", e.target.value),
               className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
               children: [
-                /* @__PURE__ */ jsx22("option", { value: "pt_BR", children: "Portugu\xEAs (Brasil)" }),
-                /* @__PURE__ */ jsx22("option", { value: "en_US", children: "Ingl\xEAs (EUA)" }),
-                /* @__PURE__ */ jsx22("option", { value: "es_ES", children: "Espanhol" })
+                /* @__PURE__ */ jsx16("option", { value: "pt_BR", children: "Portugu\xEAs (Brasil)" }),
+                /* @__PURE__ */ jsx16("option", { value: "en_US", children: "Ingl\xEAs (EUA)" }),
+                /* @__PURE__ */ jsx16("option", { value: "es_ES", children: "Espanhol" })
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.headerLabel }),
-        /* @__PURE__ */ jsx22("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.headerHint }),
-        /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.headerLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.headerHint }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.headerType,
               onChange: (e) => set("headerType", e.target.value),
               className: "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all",
               children: [
-                /* @__PURE__ */ jsx22("option", { value: "NONE", children: labels.headerNone }),
-                /* @__PURE__ */ jsx22("option", { value: "TEXT", children: labels.headerText })
+                /* @__PURE__ */ jsx16("option", { value: "NONE", children: labels.headerNone }),
+                /* @__PURE__ */ jsx16("option", { value: "TEXT", children: labels.headerText })
               ]
             }
           ),
-          value.headerType === "TEXT" && /* @__PURE__ */ jsx22(
+          value.headerType === "TEXT" && /* @__PURE__ */ jsx16(
             "input",
             {
               type: "text",
@@ -1634,10 +1986,10 @@ function WhatsAppCreateTemplateForm({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.bodyLabel }),
-        /* @__PURE__ */ jsx22("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.bodyHint }),
-        /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.bodyLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.bodyHint }),
+        /* @__PURE__ */ jsx16(
           "textarea",
           {
             value: value.bodyText,
@@ -1648,26 +2000,26 @@ function WhatsAppCreateTemplateForm({
             required: true
           }
         ),
-        detectedVariables.length > 0 && /* @__PURE__ */ jsxs15("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2", children: [
-          /* @__PURE__ */ jsx22("p", { className: "font-medium text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide text-xs", children: labels.detectedVariables }),
-          /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-2", children: detectedVariables.map((num) => /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-1 text-xs", children: [
-            /* @__PURE__ */ jsx22("code", { className: "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono", children: `{{${num}}}` }),
-            /* @__PURE__ */ jsxs15("span", { className: "text-gray-400 dark:text-gray-500", children: [
+        detectedVariables.length > 0 && /* @__PURE__ */ jsxs14("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2", children: [
+          /* @__PURE__ */ jsx16("p", { className: "font-medium text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide text-xs", children: labels.detectedVariables }),
+          /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2", children: detectedVariables.map((num) => /* @__PURE__ */ jsxs14("span", { className: "inline-flex items-center gap-1 text-xs", children: [
+            /* @__PURE__ */ jsx16("code", { className: "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono", children: `{{${num}}}` }),
+            /* @__PURE__ */ jsxs14("span", { className: "text-gray-400 dark:text-gray-500", children: [
               "= ",
               variableExamples[Number(num) - 1] ?? labels.variableLabel(Number(num))
             ] })
           ] }, num)) }),
-          /* @__PURE__ */ jsxs15("p", { className: "text-gray-400 dark:text-gray-500 mt-1.5 text-xs", children: [
+          /* @__PURE__ */ jsxs14("p", { className: "text-gray-400 dark:text-gray-500 mt-1.5 text-xs", children: [
             labels.configureHintPrefix,
-            /* @__PURE__ */ jsx22("strong", { children: labels.configureHintLink }),
+            /* @__PURE__ */ jsx16("strong", { children: labels.configureHintLink }),
             labels.configureHintSuffix
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.footerLabel }),
-        /* @__PURE__ */ jsx22("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.footerHint }),
-        /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.footerLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.footerHint }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "text",
@@ -1679,48 +2031,48 @@ function WhatsAppCreateTemplateForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block", children: labels.previewLabel }),
-        /* @__PURE__ */ jsxs15("div", { className: "rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] border border-gray-300 dark:border-gray-600 overflow-hidden shadow-inner", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "bg-[#075e54] px-4 py-2.5 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx22("div", { className: "w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-xs font-bold", children: previewCompanyName.slice(0, 2).toUpperCase() }),
-            /* @__PURE__ */ jsxs15("div", { children: [
-              /* @__PURE__ */ jsx22("p", { className: "text-white text-xs font-semibold leading-tight", children: previewCompanyName }),
-              /* @__PURE__ */ jsx22("p", { className: "text-white/60 text-xs", children: labels.previewOnline })
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block", children: labels.previewLabel }),
+        /* @__PURE__ */ jsxs14("div", { className: "rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] border border-gray-300 dark:border-gray-600 overflow-hidden shadow-inner", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "bg-[#075e54] px-4 py-2.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx16("div", { className: "w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-xs font-bold", children: previewCompanyName.slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsxs14("div", { children: [
+              /* @__PURE__ */ jsx16("p", { className: "text-white text-xs font-semibold leading-tight", children: previewCompanyName }),
+              /* @__PURE__ */ jsx16("p", { className: "text-white/60 text-xs", children: labels.previewOnline })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs15("div", { className: "px-3 py-4 space-y-3", style: { minHeight: "120px" }, children: [
-            /* @__PURE__ */ jsx22("div", { className: "flex justify-start", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs15("div", { className: "bg-white dark:bg-gray-700 rounded-lg rounded-tl-none px-3 py-2 shadow-sm", children: [
-              /* @__PURE__ */ jsx22("p", { className: "text-gray-500 dark:text-gray-400 leading-tight text-sm", children: labels.previewDescription }),
-              /* @__PURE__ */ jsx22("p", { className: "text-gray-400 dark:text-gray-500 mt-1 text-right text-[9px]", children: "12:00" })
+          /* @__PURE__ */ jsxs14("div", { className: "px-3 py-4 space-y-3", style: { minHeight: "120px" }, children: [
+            /* @__PURE__ */ jsx16("div", { className: "flex justify-start", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs14("div", { className: "bg-white dark:bg-gray-700 rounded-lg rounded-tl-none px-3 py-2 shadow-sm", children: [
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-500 dark:text-gray-400 leading-tight text-sm", children: labels.previewDescription }),
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-500 mt-1 text-right text-[9px]", children: "12:00" })
             ] }) }),
-            /* @__PURE__ */ jsx22("div", { className: "flex justify-end ml-auto", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs15("div", { className: "bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none px-3 py-2 shadow-sm", children: [
-              value.headerType === "TEXT" && value.headerText && /* @__PURE__ */ jsx22("p", { className: "text-xs font-bold text-gray-700 dark:text-gray-200 mb-1", children: fillPreviewTokens(value.headerText) || labels.previewHeaderFallback }),
-              /* @__PURE__ */ jsx22("p", { className: "text-sm text-gray-800 dark:text-gray-100 leading-relaxed", children: value.bodyText ? fillPreviewTokens(value.bodyText) : /* @__PURE__ */ jsx22("span", { className: "text-gray-400 italic", children: labels.previewBodyPlaceholder }) }),
-              value.footerText && /* @__PURE__ */ jsx22("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-xs", children: value.footerText }),
-              /* @__PURE__ */ jsx22("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]", children: "12:01 \u2713" })
+            /* @__PURE__ */ jsx16("div", { className: "flex justify-end ml-auto", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs14("div", { className: "bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none px-3 py-2 shadow-sm", children: [
+              value.headerType === "TEXT" && value.headerText && /* @__PURE__ */ jsx16("p", { className: "text-xs font-bold text-gray-700 dark:text-gray-200 mb-1", children: fillPreviewTokens(value.headerText) || labels.previewHeaderFallback }),
+              /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-800 dark:text-gray-100 leading-relaxed", children: value.bodyText ? fillPreviewTokens(value.bodyText) : /* @__PURE__ */ jsx16("span", { className: "text-gray-400 italic", children: labels.previewBodyPlaceholder }) }),
+              value.footerText && /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-xs", children: value.footerText }),
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]", children: "12:01 \u2713" })
             ] }) })
           ] })
         ] })
       ] }),
-      result && /* @__PURE__ */ jsxs15(
+      result && /* @__PURE__ */ jsxs14(
         "div",
         {
           className: `rounded-xl px-4 py-3 text-sm ${result.ok ? "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400"}`,
           children: [
             result.message,
-            result.ok && result.status && /* @__PURE__ */ jsx22("p", { className: "text-xs mt-1 opacity-75", children: labels.successStatus(result.status) })
+            result.ok && result.status && /* @__PURE__ */ jsx16("p", { className: "text-xs mt-1 opacity-75", children: labels.successStatus(result.status) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx22("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsx16("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "submit",
           disabled: submitting || !value.name || !value.bodyText,
           className: "flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            submitting ? /* @__PURE__ */ jsx22("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx22(SendHorizonal, { size: 14 }),
+            submitting ? /* @__PURE__ */ jsx16("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx16(SendHorizonal2, { size: 14 }),
             submitting ? labels.sending : labels.sendForApproval
           ]
         }
@@ -1731,8 +2083,8 @@ function WhatsAppCreateTemplateForm({
 
 // src/settings/WelcomeFarewellForm.tsx
 import { LogOut, Mail, Save as Save2 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var DEFAULT_LABELS3 = {
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var DEFAULT_LABELS4 = {
   sectionTitle: "Boas-vindas e encerramento",
   welcomeMessage: "Mensagem de boas-vindas",
   welcomeMessagePlaceholder: "Ol\xE1! Sou o assistente virtual da {empresa}...",
@@ -1758,16 +2110,16 @@ function WelcomeFarewellForm({
   farewellPlaceholders = DEFAULT_FAREWELL_PLACEHOLDERS,
   labels: labelsOverride
 }) {
-  const labels = { ...DEFAULT_LABELS3, ...labelsOverride };
-  return /* @__PURE__ */ jsxs16("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsx23("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ jsx23("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }) }),
-    /* @__PURE__ */ jsxs16("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
-      /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsxs16("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx23(Mail, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
+  const labels = { ...DEFAULT_LABELS4, ...labelsOverride };
+  return /* @__PURE__ */ jsxs15("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsx17("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ jsx17("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }) }),
+    /* @__PURE__ */ jsxs15("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsxs15("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx17(Mail, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
           labels.welcomeMessage
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx17(
           WhatsAppMessageEditor,
           {
             value: welcomeMessage,
@@ -1776,14 +2128,14 @@ function WelcomeFarewellForm({
             placeholders: welcomePlaceholders
           }
         ),
-        /* @__PURE__ */ jsx23("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.welcomeMessageHint })
+        /* @__PURE__ */ jsx17("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.welcomeMessageHint })
       ] }),
-      /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsxs16("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx23(LogOut, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsxs15("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx17(LogOut, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
           labels.farewellMessage
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx17(
           WhatsAppMessageEditor,
           {
             value: farewellMessage,
@@ -1792,17 +2144,109 @@ function WelcomeFarewellForm({
             placeholders: farewellPlaceholders
           }
         ),
-        /* @__PURE__ */ jsx23("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.farewellMessageHint })
+        /* @__PURE__ */ jsx17("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.farewellMessageHint })
       ] }),
-      saveSuccess && /* @__PURE__ */ jsx23("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
-      /* @__PURE__ */ jsx23("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs16(
+      saveSuccess && /* @__PURE__ */ jsx17("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
+      /* @__PURE__ */ jsx17("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs15(
         "button",
         {
           type: "submit",
           disabled: saving,
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            saving ? /* @__PURE__ */ jsx23("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx23(Save2, { size: 14 }),
+            saving ? /* @__PURE__ */ jsx17("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx17(Save2, { size: 14 }),
+            saving ? labels.saving : labels.save
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/settings/TranscriptionSettingsForm.tsx
+import { AudioLines, Save as Save3 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var DEFAULT_LABELS5 = {
+  sectionTitle: "Transcri\xE7\xE3o de \xE1udio",
+  enabled: "Transcrever notas de voz",
+  enabledHint: "Converte o \xE1udio do cliente em texto, que o atendente l\xEA e copia direto da conversa.",
+  modeTitle: "Quando transcrever",
+  modeAuto: "Automaticamente",
+  modeAutoHint: "Toda nota de voz recebida \xE9 transcrita na hora. Mais c\xF4modo, consome mais cota.",
+  modeOnDemand: "Quando o atendente pedir",
+  modeOnDemandHint: "Transcreve s\xF3 ao clicar no bot\xE3o da conversa. Consome cota apenas com \xE1udio que algu\xE9m vai ler.",
+  unavailable: "Transcri\xE7\xE3o n\xE3o est\xE1 dispon\xEDvel neste ambiente \u2014 fale com quem administra a instala\xE7\xE3o.",
+  save: "Salvar",
+  saving: "Salvando...",
+  saveSuccess: "Configura\xE7\xE3o de transcri\xE7\xE3o salva."
+};
+function TranscriptionSettingsForm({
+  enabled,
+  onEnabledChange,
+  mode,
+  onModeChange,
+  onSave,
+  isAvailable = true,
+  saving = false,
+  saveSuccess = false,
+  labels: labelsOverride
+}) {
+  const labels = { ...DEFAULT_LABELS5, ...labelsOverride };
+  return /* @__PURE__ */ jsxs16("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsx18("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ jsxs16("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx18(AudioLines, { size: 14, className: "text-blue-600 dark:text-blue-400" }),
+      labels.sectionTitle
+    ] }) }),
+    /* @__PURE__ */ jsxs16("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
+      !isAvailable && /* @__PURE__ */ jsx18("div", { className: "bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-xl px-4 py-3 text-sm text-amber-800 dark:text-amber-300", children: labels.unavailable }),
+      /* @__PURE__ */ jsxs16("label", { className: "flex items-start gap-3 cursor-pointer", children: [
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "checkbox",
+            checked: enabled,
+            onChange: (event) => onEnabledChange(event.target.checked),
+            disabled: !isAvailable,
+            className: "mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsxs16("span", { children: [
+          /* @__PURE__ */ jsx18("span", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.enabled }),
+          /* @__PURE__ */ jsx18("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: labels.enabledHint })
+        ] })
+      ] }),
+      enabled && /* @__PURE__ */ jsxs16("fieldset", { disabled: !isAvailable, className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsx18("legend", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: labels.modeTitle }),
+        /* @__PURE__ */ jsx18(
+          ModeOption,
+          {
+            value: "onDemand",
+            current: mode,
+            onSelect: onModeChange,
+            title: labels.modeOnDemand,
+            hint: labels.modeOnDemandHint
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          ModeOption,
+          {
+            value: "auto",
+            current: mode,
+            onSelect: onModeChange,
+            title: labels.modeAuto,
+            hint: labels.modeAutoHint
+          }
+        )
+      ] }),
+      saveSuccess && /* @__PURE__ */ jsx18("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
+      /* @__PURE__ */ jsx18("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs16(
+        "button",
+        {
+          type: "submit",
+          disabled: saving || !isAvailable,
+          className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
+          children: [
+            saving ? /* @__PURE__ */ jsx18("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx18(Save3, { size: 14 }),
             saving ? labels.saving : labels.save
           ]
         }
@@ -1810,11 +2254,90 @@ function WelcomeFarewellForm({
     ] })
   ] });
 }
+function ModeOption({
+  value,
+  current,
+  onSelect,
+  title,
+  hint
+}) {
+  const isSelected = current === value;
+  return /* @__PURE__ */ jsxs16(
+    "label",
+    {
+      className: `flex items-start gap-3 cursor-pointer rounded-xl border px-4 py-3 transition-colors ${isSelected ? "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/30" : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"}`,
+      children: [
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "radio",
+            name: "transcription-mode",
+            value,
+            checked: isSelected,
+            onChange: () => onSelect(value),
+            className: "mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ jsxs16("span", { children: [
+          /* @__PURE__ */ jsx18("span", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: title }),
+          /* @__PURE__ */ jsx18("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/settings/WhatsAppTemplatesSettings.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var TEMPLATE_SETTINGS_TAB = {
+  SELECT: "select",
+  CREATE: "create"
+};
+var DEFAULT_TEMPLATES_SETTINGS_LABELS = {
+  selectTab: "Template de reengajamento",
+  createTab: "Criar template"
+};
+function WhatsAppTemplatesSettings({
+  labels: labelsOverride,
+  create,
+  ...settingsProps
+}) {
+  const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
+  const [tab, setTab] = useState9(TEMPLATE_SETTINGS_TAB.SELECT);
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs17("nav", { className: "flex gap-1 border-b", role: "tablist", children: [
+      /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": tab === TEMPLATE_SETTINGS_TAB.SELECT,
+          onClick: () => setTab(TEMPLATE_SETTINGS_TAB.SELECT),
+          className: `cv-subtab ${tab === TEMPLATE_SETTINGS_TAB.SELECT ? "cv-subtab--active" : ""}`,
+          children: labels.selectTab
+        }
+      ),
+      create ? /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": tab === TEMPLATE_SETTINGS_TAB.CREATE,
+          onClick: () => setTab(TEMPLATE_SETTINGS_TAB.CREATE),
+          className: `cv-subtab ${tab === TEMPLATE_SETTINGS_TAB.CREATE ? "cv-subtab--active" : ""}`,
+          children: labels.createTab
+        }
+      ) : null
+    ] }),
+    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx19(WhatsAppTemplateSettingsForm, { ...settingsProps }) : create ? /* @__PURE__ */ jsx19(WhatsAppCreateTemplateForm, { ...create }) : null
+  ] });
+}
 
 // src/settings/TopicsForm.tsx
-import { Megaphone, Save as Save3 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var DEFAULT_LABELS4 = {
+import { Megaphone, Save as Save4 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var DEFAULT_LABELS6 = {
   sectionTitle: "T\xF3picos intermedi\xE1rios",
   sectionDescription: "Mensagens autom\xE1ticas para assuntos espec\xEDficos, disparadas quando o cliente demonstra interesse.",
   messagePlaceholder: "Digite a mensagem autom\xE1tica para este t\xF3pico...",
@@ -1830,20 +2353,20 @@ function TopicsForm({
   saveSuccess = false,
   labels: labelsOverride
 }) {
-  const labels = { ...DEFAULT_LABELS4, ...labelsOverride };
-  return /* @__PURE__ */ jsxs17("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxs17("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(Megaphone, { size: 16, className: "text-orange-600 dark:text-orange-400" }),
+  const labels = { ...DEFAULT_LABELS6, ...labelsOverride };
+  return /* @__PURE__ */ jsxs18("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs18("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx20(Megaphone, { size: 16, className: "text-orange-600 dark:text-orange-400" }),
         labels.sectionTitle
       ] }),
-      /* @__PURE__ */ jsx24("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+      /* @__PURE__ */ jsx20("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs17("form", { onSubmit: onSave, className: "p-6 space-y-6", children: [
-      topics.map((topic) => /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-4", children: [
-          /* @__PURE__ */ jsx24("div", { className: "flex-1", children: /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: topic.label }) }),
-          /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsxs18("form", { onSubmit: onSave, className: "p-6 space-y-6", children: [
+      topics.map((topic) => /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-4", children: [
+          /* @__PURE__ */ jsx20("div", { className: "flex-1", children: /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: topic.label }) }),
+          /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
@@ -1851,7 +2374,7 @@ function TopicsForm({
               className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${topic.enabled ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"}`,
               role: "switch",
               "aria-checked": topic.enabled,
-              children: /* @__PURE__ */ jsx24(
+              children: /* @__PURE__ */ jsx20(
                 "span",
                 {
                   className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${topic.enabled ? "translate-x-5" : "translate-x-0"}`
@@ -1860,7 +2383,7 @@ function TopicsForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx20(
           "textarea",
           {
             value: topic.message,
@@ -1872,55 +2395,27 @@ function TopicsForm({
           }
         )
       ] }, topic.key)),
-      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs18(
           "button",
           {
             type: "submit",
             disabled: saving,
             className: "inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50",
             children: [
-              /* @__PURE__ */ jsx24(Save3, { size: 14 }),
+              /* @__PURE__ */ jsx20(Save4, { size: 14 }),
               labels.saveButton
             ]
           }
         ),
-        saveSuccess && /* @__PURE__ */ jsx24("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
+        saveSuccess && /* @__PURE__ */ jsx20("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
       ] })
     ] })
   ] });
 }
 
 // src/hooks/useConversationMessages.ts
-import { useCallback as useCallback7 } from "react";
-
-// src/hooks/useAsyncResource.ts
-import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useState as useState10 } from "react";
-function useAsyncResource(fetcher, deps) {
-  const [data, setData] = useState10(void 0);
-  const [loading, setLoading] = useState10(false);
-  const [error, setError] = useState10(void 0);
-  const requestIdRef = useRef6(0);
-  const load = useCallback6(async () => {
-    const requestId = ++requestIdRef.current;
-    setLoading(true);
-    setError(void 0);
-    try {
-      const result = await fetcher();
-      if (requestId === requestIdRef.current) setData(result);
-    } catch (err) {
-      if (requestId === requestIdRef.current) setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      if (requestId === requestIdRef.current) setLoading(false);
-    }
-  }, deps);
-  useEffect5(() => {
-    load();
-  }, [load]);
-  return { data, loading, error, refetch: load };
-}
-
-// src/hooks/useConversationMessages.ts
+import { useCallback as useCallback5 } from "react";
 function useConversationMessages(conversationId, params) {
   const context = useConversations();
   if (!context) {
@@ -1931,7 +2426,7 @@ function useConversationMessages(conversationId, params) {
     () => api.fetchMessages(conversationId, params),
     [conversationId, params?.limit, params?.before]
   );
-  const sendMessage = useCallback7(
+  const sendMessage = useCallback5(
     async (text) => {
       const message = await api.sendMessage(conversationId, text);
       await refetch();
@@ -1939,7 +2434,7 @@ function useConversationMessages(conversationId, params) {
     },
     [api, conversationId, refetch]
   );
-  const sendMedia = useCallback7(
+  const sendMedia = useCallback5(
     async (mediaData) => {
       const message = await api.sendMedia(conversationId, mediaData);
       await refetch();
@@ -1947,17 +2442,57 @@ function useConversationMessages(conversationId, params) {
     },
     [api, conversationId, refetch]
   );
-  const sendTemplate = useCallback7(
+  const sendTemplate = useCallback5(
     async (templateData) => {
       await api.sendTemplate(conversationId, templateData);
       await refetch();
     },
     [api, conversationId, refetch]
   );
-  const markRead = useCallback7(() => api.markRead(conversationId), [api, conversationId]);
+  const markRead = useCallback5(() => api.markRead(conversationId), [api, conversationId]);
   return { messages: data ?? [], loading, error, refetch, sendMessage, sendMedia, sendTemplate, markRead };
 }
 
+// src/hooks/useScrollToLatestMessage.ts
+import { useCallback as useCallback6, useLayoutEffect, useRef as useRef5, useState as useState10 } from "react";
+var NEAR_BOTTOM_THRESHOLD_PX = 120;
+var SCROLL_BEHAVIOR = "auto";
+function useScrollToLatestMessage({
+  conversationId,
+  messageCount
+}) {
+  const containerRef = useRef5(null);
+  const [isAwayFromBottom, setIsAwayFromBottom] = useState10(false);
+  const isAwayFromBottomRef = useRef5(false);
+  const scrollToBottom = useCallback6((behavior = SCROLL_BEHAVIOR) => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTo({ top: container.scrollHeight, behavior });
+  }, []);
+  const handleScroll = useCallback6((event) => {
+    const target = event.currentTarget;
+    const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+    const away = distanceFromBottom > NEAR_BOTTOM_THRESHOLD_PX;
+    isAwayFromBottomRef.current = away;
+    setIsAwayFromBottom((current) => current === away ? current : away);
+  }, []);
+  const jumpedForConversationRef = useRef5(void 0);
+  useLayoutEffect(() => {
+    const isNewConversation = jumpedForConversationRef.current !== conversationId;
+    if (isNewConversation) {
+      isAwayFromBottomRef.current = false;
+      setIsAwayFromBottom(false);
+      if (messageCount === 0) return;
+      jumpedForConversationRef.current = conversationId;
+      scrollToBottom(SCROLL_BEHAVIOR);
+      return;
+    }
+    if (isAwayFromBottomRef.current) return;
+    scrollToBottom(SCROLL_BEHAVIOR);
+  }, [conversationId, messageCount, scrollToBottom]);
+  return { containerRef, handleScroll, isAwayFromBottom, scrollToBottom };
+}
+
 // src/hooks/useConversationList.ts
 function useConversationList(params) {
   const context = useConversations();
@@ -1965,11 +2500,15 @@ function useConversationList(params) {
     throw new Error("useConversationList requires an ancestor <ConversationsProvider>");
   }
   const { api } = context;
+  const filtersKey = JSON.stringify(params?.filters ?? {});
   const { data, loading, error, refetch } = useAsyncResource(
     () => api.fetchConversations(params),
-    [params?.page, params?.limit, params?.waitingHuman, params?.search]
+    [params?.page, params?.limit, params?.waitingHuman, params?.search, filtersKey]
   );
-  return { conversations: data ?? [], loading, error, refetch };
+  if (data === void 0) {
+    return { conversations: [], total: 0, loading, error, refetch };
+  }
+  return { conversations: conversationsOf(data), total: totalOf(data), loading, error, refetch };
 }
 
 // src/hooks/useConversationContext.ts
@@ -1983,25 +2522,11 @@ function useConversationContext(conversationId) {
   return { context: data, loading, error, refetch };
 }
 
-// src/hooks/useConversationDocuments.ts
-function useConversationDocuments(conversationId, params) {
-  const context = useConversations();
-  if (!context) {
-    throw new Error("useConversationDocuments requires an ancestor <ConversationsProvider>");
-  }
-  const { api } = context;
-  const { data, loading, error, refetch } = useAsyncResource(
-    () => api.getDocuments(conversationId, params),
-    [conversationId, params?.search, params?.page]
-  );
-  return { documents: data ?? [], loading, error, refetch };
-}
-
 // src/hooks/useConversationRealtime.ts
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 function useConversationRealtime(conversationId, onEvent) {
   const context = useConversations();
-  const onEventRef = useRef7(onEvent);
+  const onEventRef = useRef6(onEvent);
   onEventRef.current = onEvent;
   useEffect6(() => {
     if (!context || !conversationId) return;
@@ -2016,7 +2541,7 @@ function useConversationRealtime(conversationId, onEvent) {
 }
 function useGlobalRealtime(onEvent) {
   const context = useConversations();
-  const onEventRef = useRef7(onEvent);
+  const onEventRef = useRef6(onEvent);
   onEventRef.current = onEvent;
   useEffect6(() => {
     if (!context) return;
@@ -2029,16 +2554,83 @@ function useGlobalRealtime(onEvent) {
     };
   }, [context]);
 }
+
+// src/hooks/useConversationActions.ts
+import { useMemo as useMemo2 } from "react";
+function useConversationActions(conversationId) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("useConversationActions requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  return useMemo2(
+    () => ({
+      takeover: api.takeover ? () => api.takeover(conversationId) : void 0,
+      release: api.release ? () => api.release(conversationId) : void 0,
+      finalize: api.finalize ? () => api.finalize(conversationId) : void 0
+    }),
+    [api, conversationId]
+  );
+}
+function useInboxActions() {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("useInboxActions requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  return useMemo2(
+    () => ({
+      markAllRead: api.markAllRead ? () => api.markAllRead() : void 0,
+      listTemplates: api.listTemplates ? () => api.listTemplates() : void 0
+    }),
+    [api]
+  );
+}
 export {
   AudioPlayer,
+  AudioRecorderButton,
+  AudioTranscription,
   Avatar,
+  CHANNEL_BRAND_COLOR,
+  CHANNEL_CAPABILITIES,
+  CHANNEL_FILTER_ALL,
+  CONVERSATION_CHANNEL,
+  CONVERSATION_WINDOW,
+  ChannelIcon,
+  ConversationContextPanel,
+  ConversationDocumentsPanel,
+  ConversationHeader,
   ConversationListItem,
   ConversationLocalesProvider,
+  ConversationRow,
   ConversationWallpaper,
   ConversationsProvider,
+  DEFAULT_ACCEPTED_FILE_TYPES,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_AVATAR_LABELS,
+  DEFAULT_CONVERSATION_CHANNEL,
+  DEFAULT_CONVERSATION_CONTEXT_LABELS,
+  DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
+  DEFAULT_CONVERSATION_HEADER_LABELS,
+  DEFAULT_CONVERSATION_LIST_ITEM_LABELS,
+  DEFAULT_DOCUMENTS_LIBRARY_LABELS,
+  DEFAULT_EMOJI_PICKER_LABELS,
+  DEFAULT_INTERACTIVE_MESSAGE_LABELS,
+  DEFAULT_LIGHTBOX_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  DEFAULT_MESSAGE_COMPOSER_LABELS,
+  DEFAULT_RICH_COMPOSER_TOOLTIPS,
+  DEFAULT_TEMPLATES_SETTINGS_LABELS,
+  DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS,
+  DEFAULT_WINDOW_EXPIRED_LABELS,
+  DOCUMENT_SOURCE_FILTER,
   DateDivider,
+  DocumentsLibrary,
+  EMOJI_CATEGORIES,
   EmojiPicker,
   FileIcon,
+  HANDLE_KIND,
+  InteractiveMessage,
   Lightbox,
   MediaRenderer,
   MessageBubble,
@@ -2046,21 +2638,46 @@ export {
   MessageTail,
   MessageText,
   MessageTimestamp,
+  NARROW_MAX_WIDTH_PX,
+  REOPEN_MECHANISM,
+  RICH_COMPOSER_ACTION,
+  RichMessageComposer,
   SimpleEmojiPicker,
   StatusTicks,
+  TEMPLATE_SETTINGS_TAB,
   ToastProvider,
   TopicsForm,
+  TranscriptionSettingsForm,
+  WINDOW_FILTERS,
   WelcomeFarewellForm,
   WhatsAppCreateTemplateForm,
   WhatsAppMessageEditor,
   WhatsAppTemplateSettingsForm,
+  WhatsAppTemplatesSettings,
+  WindowExpiredNotice,
+  applyQuickReplyVariables,
+  buildTranscriptFilename,
+  buildTranscriptText,
+  capabilitiesOf,
+  channelFiltersFor,
+  contactFlag,
+  createMediaUrlResolver,
+  downloadTextFile,
+  formatContactHandle,
+  formatDateTime,
   formatFileSize,
   formatPhone,
+  formatStalledFor,
   formatTimestamp,
   htmlToWA,
+  isSameDay,
+  isWindowBlocking,
   parseWhatsAppFormatting,
   phoneInitials,
+  resolveQuickReply,
+  searchEmojis,
   toast,
+  useConversationActions,
   useConversationContext,
   useConversationDocuments,
   useConversationList,
@@ -2070,8 +2687,13 @@ export {
   useConversations,
   useDarkMode,
   useGlobalRealtime,
+  useInboxActions,
+  useIsDarkTheme,
+  useIsNarrow,
+  useScrollToLatestMessage,
   useToast,
   useWaitingNotifications,
   waToHTML,
-  waToHTMLInline
+  waToHTMLInline,
+  windowOf
 };