@adatechnology/conversations-ui 0.0.0

package/dist/index.js

@@ -0,0 +1,2077 @@
+import {
+  htmlToWA,
+  parseWhatsAppFormatting,
+  useDarkMode,
+  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) })
+  ] });
+}
+
+// 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/SimpleEmojiPicker.tsx
+import { useEffect as useEffect2, useRef as useRef4, useState as useState6 } from "react";
+import { Smile } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var EMOJIS = [
+  "\u{1F600}",
+  "\u{1F602}",
+  "\u{1F923}",
+  "\u{1F60A}",
+  "\u{1F60D}",
+  "\u{1F970}",
+  "\u{1F618}",
+  "\u{1F61C}",
+  "\u{1F92A}",
+  "\u{1F60E}",
+  "\u{1F929}",
+  "\u{1F607}",
+  "\u{1F642}",
+  "\u{1F60F}",
+  "\u{1F60C}",
+  "\u{1F614}",
+  "\u{1F622}",
+  "\u{1F62D}",
+  "\u{1F624}",
+  "\u{1F621}",
+  "\u{1F97A}",
+  "\u{1F630}",
+  "\u{1F631}",
+  "\u{1F973}",
+  "\u{1F914}",
+  "\u{1F917}",
+  "\u{1F44D}",
+  "\u{1F44E}",
+  "\u{1F44F}",
+  "\u{1F64C}",
+  "\u{1F91D}",
+  "\u{1F4AA}",
+  "\u{1F64F}",
+  "\u2764\uFE0F",
+  "\u{1F9E1}",
+  "\u{1F49B}",
+  "\u{1F49A}",
+  "\u{1F499}",
+  "\u{1F49C}",
+  "\u{1F5A4}",
+  "\u{1F90D}",
+  "\u{1F494}",
+  "\u{1F525}",
+  "\u2B50",
+  "\u{1F389}",
+  "\u2728",
+  "\u{1F4AF}",
+  "\u2705",
+  "\u274C",
+  "\u26A0\uFE0F",
+  "\u{1F680}",
+  "\u{1F4A1}",
+  "\u{1F4CC}",
+  "\u{1F4CE}",
+  "\u{1F4DD}",
+  "\u{1F4CA}",
+  "\u{1F4C8}",
+  "\u{1F4B0}",
+  "\u{1F4B3}",
+  "\u{1F3E0}",
+  "\u{1F3E6}",
+  "\u{1F697}",
+  "\u2708\uFE0F",
+  "\u23F0",
+  "\u{1F4C5}",
+  "\u{1F514}",
+  "\u{1F4DE}",
+  "\u{1F4AC}",
+  "\u{1F5E8}\uFE0F",
+  "\u{1F44B}",
+  "\u{1F916}",
+  "\u{1F3AF}",
+  "\u{1F3C6}",
+  "\u{1F4CB}",
+  "\u{1F4C4}",
+  "\u{1F50D}",
+  "\u{1F393}",
+  "\u{1F31F}",
+  "\u{1F4BC}",
+  "\u{1F6E1}\uFE0F"
+];
+function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px", pickerMaxHeight = "220px" }) {
+  const [open, setOpen] = useState6(false);
+  const containerRef = useRef4(null);
+  useEffect2(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxs9("div", { ref: containerRef, className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx12(
+      "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 })
+      }
+    ),
+    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(
+      "div",
+      {
+        className: "grid grid-cols-10 gap-0.5 overflow-y-auto",
+        style: { width: pickerWidth, maxHeight: pickerMaxHeight },
+        children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onSelect(emoji);
+              setOpen(false);
+            },
+            className: "w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-lg leading-none transition-colors",
+            children: emoji
+          },
+          emoji
+        ))
+      }
+    ) })
+  ] });
+}
+
+// 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) }) });
+}
+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" });
+}
+
+// src/Avatar.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base"
+};
+var bgColors = [
+  "bg-blue-500",
+  "bg-green-500",
+  "bg-purple-500",
+  "bg-pink-500",
+  "bg-yellow-500",
+  "bg-red-500",
+  "bg-indigo-500"
+];
+function getInitials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return (parts[0]?.substring(0, 2) || "?").toUpperCase();
+}
+function getBgColor(name) {
+  if (!name) return "bg-gray-400";
+  const hash = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
+  return bgColors[hash % bgColors.length];
+}
+function Avatar({ name, avatarUrl, size = "md", className = "" }) {
+  const sizeClass = sizeClasses[size];
+  if (avatarUrl) {
+    return /* @__PURE__ */ jsx14(
+      "img",
+      {
+        src: avatarUrl,
+        alt: name || void 0,
+        className: `${sizeClass} rounded-full object-cover flex-shrink-0 ${className}`
+      }
+    );
+  }
+  const initials = getInitials(name);
+  const bgColor = getBgColor(name);
+  return /* @__PURE__ */ jsx14(
+    "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
+    }
+  );
+}
+
+// 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)}`;
+  }
+  return number;
+}
+function phoneInitials(number) {
+  const digits = number.replace(/\D/g, "");
+  return digits.slice(-2);
+}
+
+// src/ConversationListItem.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function formatRelativeTime(dateStr) {
+  try {
+    const date = new Date(dateStr);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMs / 36e5);
+    const diffDays = Math.floor(diffMs / 864e5);
+    if (diffMins < 1) return "Agora";
+    if (diffMins < 60) return `${diffMins}m`;
+    if (diffHours < 24) return `${diffHours}h`;
+    if (diffDays < 7) return `${diffDays}d`;
+    const day = date.getDate().toString().padStart(2, "0");
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    return `${day}/${month}`;
+  } catch {
+    return "";
+  }
+}
+function getWindowStatus(lastInboundAt) {
+  if (!lastInboundAt) return null;
+  try {
+    const lastInbound = new Date(lastInboundAt).getTime();
+    const now = Date.now();
+    const hoursElapsed = (now - lastInbound) / 36e5;
+    if (hoursElapsed <= 12) return { label: "active", color: "#22c55e" };
+    if (hoursElapsed <= 21) return { label: "approaching", color: "#eab308" };
+    if (hoursElapsed <= 24) return { label: "warning", color: "#f97316" };
+    return { label: "expired", color: "#ef4444" };
+  } catch {
+    return null;
+  }
+}
+function lastMessagePreview(conversation) {
+  if (!conversation.lastContent) return { icon: null, preview: "" };
+  const content = conversation.lastContent;
+  if (content.startsWith("[image]") || content.startsWith("[Image]")) {
+    return { icon: "\u{1F5BC}", preview: "Imagem" };
+  }
+  if (content.startsWith("[video]") || content.startsWith("[Video]")) {
+    return { icon: "\u{1F3AC}", preview: "V\xEDdeo" };
+  }
+  if (content.startsWith("[audio]") || content.startsWith("[Audio]")) {
+    return { icon: "\u{1F3A4}", preview: "\xC1udio" };
+  }
+  if (content.startsWith("[document]") || content.startsWith("[Document]")) {
+    return { icon: "\u{1F4C4}", preview: "Documento" };
+  }
+  if (content.startsWith("[sticker]") || content.startsWith("[Sticker]")) {
+    return { icon: "\u{1F3AF}", preview: "Sticker" };
+  }
+  return { icon: null, preview: content };
+}
+var ConversationListItem = ({
+  conversation,
+  active = false,
+  selected = false,
+  onClick,
+  onSelect
+}) => {
+  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 timestamp = formatRelativeTime(conversation.lastAt);
+  const isInbound = conversation.lastDirection === "inbound";
+  const handleClick = () => {
+    onClick?.();
+    onSelect?.(conversation.id);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "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]",
+      style: {
+        backgroundColor: isActive ? "#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__ */ 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" })
+            ] }),
+            timestamp && /* @__PURE__ */ jsx15("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 }),
+              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 })
+          ] }),
+          /* @__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" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// 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);
+var nextId = 0;
+var singletonShow = null;
+var toast = {
+  show(type, message) {
+    if (singletonShow) {
+      singletonShow(type, message);
+    }
+  }
+};
+var typeStyles = {
+  success: "bg-green-600",
+  error: "bg-red-600",
+  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" })
+  ] }),
+  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" })
+  ] })
+};
+function ToastItemComponent({ item, onRemove }) {
+  const [exiting, setExiting] = useState7(false);
+  useEffect3(() => {
+    const timer = setTimeout(() => {
+      setExiting(true);
+      setTimeout(() => onRemove(item.id), 300);
+    }, 5e3);
+    return () => clearTimeout(timer);
+  }, [item.id, onRemove]);
+  return /* @__PURE__ */ jsxs11(
+    "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(
+          "button",
+          {
+            onClick: () => {
+              setExiting(true);
+              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" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({ children }) {
+  const [items, setItems] = useState7([]);
+  const show = useCallback3((type, message) => {
+    const id = ++nextId;
+    setItems((prev) => [...prev, { id, type, message }]);
+  }, []);
+  const remove = useCallback3((id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  useEffect3(() => {
+    singletonShow = show;
+    return () => {
+      singletonShow = null;
+    };
+  }, [show]);
+  return /* @__PURE__ */ jsxs11(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: `
+        @keyframes slide-in {
+          from { transform: translateX(100%); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slide-out {
+          from { transform: translateX(0); opacity: 1; }
+          to { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-slide-in { animation: slide-in 0.3s ease-out; }
+        .animate-slide-out { animation: slide-out 0.3s ease-in forwards; }
+      ` })
+  ] });
+}
+function useToast() {
+  const context = useContext2(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// 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 {
+    }
+  }, [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",
+    {
+      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__ */ 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!" })
+      ]
+    }
+  );
+}
+
+// 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/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/useWaitingNotifications.ts
+import { useState as useState9, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+
+// 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
+}) {
+  return /* @__PURE__ */ jsx20(ConversationsContext.Provider, { value: { api, sse }, children });
+}
+function useConversations() {
+  return useContext3(ConversationsContext);
+}
+
+// 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;
+    try {
+      const result = await conversationsCtx.api.fetchConversations({ limit: 50 });
+      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" });
+          }
+        }
+      }
+      previousUnreadMap.current = currentMap;
+    } catch {
+    }
+  }, [conversationsCtx]);
+  useEffect4(() => {
+    if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {
+      Notification.requestPermission();
+    }
+    pollConversations();
+    const interval = setInterval(pollConversations, 1e4);
+    return () => clearInterval(interval);
+  }, [pollConversations]);
+  const unreadCount = conversations.reduce((sum, conv) => sum + conv.unread, 0);
+  return { unreadCount, conversations };
+}
+
+// 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 = {
+  sectionTitle: "WhatsApp",
+  sectionDescription: "Template usado para reabrir a janela de 24h com o cliente.",
+  templateLabel: "Template aprovado",
+  refreshList: "Atualizar lista",
+  errorLoading: "N\xE3o foi poss\xEDvel carregar os templates da Meta.",
+  currentNameSaved: "Nome salvo atualmente:",
+  selectPlaceholder: "Selecione um template\u2026",
+  variablesLabel: "Vari\xE1veis do template",
+  addVariable: "Adicionar",
+  removeVariable: "Remover vari\xE1vel",
+  variablesAvailableTitle: "Vari\xE1veis dispon\xEDveis",
+  variablesAvailableHint: "Clique para inserir na pr\xF3xima vari\xE1vel vazia.",
+  variablesMappingHint: "A ordem das vari\xE1veis abaixo deve corresponder \xE0 ordem {{1}}, {{2}}... do template.",
+  noVariables: "Este template n\xE3o tem vari\xE1veis.",
+  save: "Salvar",
+  saving: "Salvando...",
+  saveSuccess: "Configura\xE7\xE3o salva com sucesso."
+};
+function WhatsAppTemplateSettingsForm({
+  templates,
+  loadingTemplates = false,
+  templatesError = false,
+  onRefreshTemplates,
+  selectedTemplateName,
+  onSelectTemplate,
+  variables,
+  onVariablesChange,
+  availableVariables = [],
+  saving = false,
+  saveSuccess = false,
+  onSave,
+  labels: labelsOverride
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsOverride };
+  const selected = templates.find((template) => template.name === selectedTemplateName);
+  function handleSelect(name) {
+    const template = templates.find((t) => t.name === name);
+    onSelectTemplate(name, template);
+  }
+  function updateVariable(index, value) {
+    const next = [...variables];
+    next[index] = value;
+    onVariablesChange(next);
+  }
+  function removeVariable(index) {
+    onVariablesChange(variables.filter((_, i) => i !== index));
+  }
+  function insertVariable(token) {
+    const emptyIndex = variables.findIndex((value) => !value.trim());
+    if (emptyIndex >= 0) {
+      const next = [...variables];
+      next[emptyIndex] = token;
+      onVariablesChange(next);
+      return;
+    }
+    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 })
+    ] }),
+    /* @__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(
+            "button",
+            {
+              type: "button",
+              onClick: onRefreshTemplates,
+              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" : "" }),
+                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: [
+          labels.errorLoading,
+          /* @__PURE__ */ jsx21("br", {}),
+          /* @__PURE__ */ jsxs14("span", { className: "text-gray-500 dark:text-gray-400 mt-0.5 block", children: [
+            labels.currentNameSaved,
+            " ",
+            /* @__PURE__ */ jsx21("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(
+          "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: [
+                template.displayName,
+                " \xB7 ",
+                template.shortId,
+                " (",
+                template.language,
+                ") ",
+                template.status !== "APPROVED" ? `[${template.status}]` : ""
+              ] }, `${template.name}-${template.language}`))
+            ]
+          }
+        ),
+        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 })
+      ] }),
+      /* @__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(
+            "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 }),
+                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(
+            "button",
+            {
+              type: "button",
+              onClick: () => insertVariable(available.token),
+              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: [
+                  "\xB7 ",
+                  available.label
+                ] })
+              ]
+            },
+            available.token
+          )) }),
+          /* @__PURE__ */ jsx21("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(
+            "input",
+            {
+              type: "text",
+              value: variable,
+              onChange: (e) => updateVariable(index, e.target.value),
+              placeholder: "Ex: {clientName}",
+              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(
+            "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 })
+            }
+          )
+        ] }, 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(
+        "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 ? labels.saving : labels.save
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/settings/WhatsAppCreateTemplateForm.tsx
+import { SendHorizonal } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var DEFAULT_LABELS2 = {
+  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.",
+  categoryLabel: "Categoria",
+  languageLabel: "Idioma",
+  headerLabel: "Cabe\xE7alho",
+  headerHint: "Opcional \u2014 texto fixo exibido acima do corpo.",
+  headerNone: "Sem cabe\xE7alho",
+  headerText: "Texto",
+  headerPlaceholder: "Ex: Ol\xE1 {{1}}!",
+  bodyLabel: "Corpo da mensagem",
+  bodyHint: "Use {{1}}, {{2}}... para vari\xE1veis din\xE2micas.",
+  bodyPlaceholder: "Ex: Ol\xE1 {{1}}, sua simula\xE7\xE3o para {{2}} est\xE1 pronta.",
+  detectedVariables: "Vari\xE1veis detectadas",
+  variableLabel: (index) => `Vari\xE1vel ${index}`,
+  configureHintPrefix: "Configure o mapeamento em ",
+  configureHintLink: "Template usado para reabrir a janela de 24h",
+  configureHintSuffix: " depois de aprovado.",
+  footerLabel: "Rodap\xE9",
+  footerHint: "Opcional \u2014 texto fixo exibido abaixo do corpo.",
+  footerPlaceholder: "Ex: Empresa LTDA",
+  previewLabel: "Pr\xE9via",
+  previewOnline: "online",
+  previewDescription: "Assim aparecer\xE1 para o cliente no WhatsApp.",
+  previewHeaderFallback: "Cabe\xE7alho",
+  previewBodyPlaceholder: "Corpo da mensagem aparecer\xE1 aqui\u2026",
+  sendForApproval: "Enviar para aprova\xE7\xE3o",
+  sending: "Enviando...",
+  successStatus: (status) => `Status: ${status}`
+};
+var DEFAULT_VARIABLE_EXAMPLES = ["Nome do cliente", "Produto", "Valor", "Prazo", "Banco"];
+function detectVariables(bodyText) {
+  const matches = bodyText.match(/\{\{(\d+)\}\}/g) ?? [];
+  return [...new Set(matches.map((token) => token.replace(/[{}]/g, "")))].sort();
+}
+function fillPreviewTokens(text) {
+  return text.replace(/\{\{1\}\}/g, "Jo\xE3o").replace(/\{\{2\}\}/g, "Im\xF3vel").replace(/\{\{3\}\}/g, "R$ 1.500");
+}
+function WhatsAppCreateTemplateForm({
+  value,
+  onChange,
+  onSubmit,
+  submitting = false,
+  result,
+  previewCompanyName = "WhatsApp Bot",
+  labels: labelsOverride,
+  variableExamples = DEFAULT_VARIABLE_EXAMPLES
+}) {
+  const labels = { ...DEFAULT_LABELS2, ...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 })
+    ] }),
+    /* @__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(
+          "input",
+          {
+            type: "text",
+            value: value.name,
+            onChange: (e) => set("name", e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "_")),
+            placeholder: "reengajamento_cliente",
+            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(
+            "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__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.languageLabel }),
+          /* @__PURE__ */ jsxs15(
+            "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__ */ 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(
+            "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 })
+              ]
+            }
+          ),
+          value.headerType === "TEXT" && /* @__PURE__ */ jsx22(
+            "input",
+            {
+              type: "text",
+              value: value.headerText,
+              onChange: (e) => set("headerText", e.target.value),
+              placeholder: labels.headerPlaceholder,
+              maxLength: 60,
+              className: "flex-1 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"
+            }
+          )
+        ] })
+      ] }),
+      /* @__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(
+          "textarea",
+          {
+            value: value.bodyText,
+            onChange: (e) => set("bodyText", e.target.value),
+            placeholder: labels.bodyPlaceholder,
+            rows: 4,
+            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 resize-none placeholder:text-gray-400 dark:placeholder:text-gray-500",
+            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: [
+              "= ",
+              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: [
+            labels.configureHintPrefix,
+            /* @__PURE__ */ jsx22("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(
+          "input",
+          {
+            type: "text",
+            value: value.footerText,
+            onChange: (e) => set("footerText", e.target.value),
+            placeholder: labels.footerPlaceholder,
+            maxLength: 60,
+            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"
+          }
+        )
+      ] }),
+      /* @__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__ */ 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__ */ 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" })
+            ] }) })
+          ] })
+        ] })
+      ] }),
+      result && /* @__PURE__ */ jsxs15(
+        "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) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx22("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs15(
+        "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 ? labels.sending : labels.sendForApproval
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// 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 = {
+  sectionTitle: "Boas-vindas e encerramento",
+  welcomeMessage: "Mensagem de boas-vindas",
+  welcomeMessagePlaceholder: "Ol\xE1! Sou o assistente virtual da {empresa}...",
+  welcomeMessageHint: "Enviada automaticamente no primeiro contato do cliente.",
+  farewellMessage: "Mensagem de encerramento",
+  farewellMessagePlaceholder: "Obrigado pelo contato! Se precisar de algo, \xE9 s\xF3 chamar.",
+  farewellMessageHint: "Enviada quando o atendente encerra a conversa.",
+  save: "Salvar",
+  saving: "Salvando...",
+  saveSuccess: "Mensagens salvas com sucesso."
+};
+var DEFAULT_WELCOME_PLACEHOLDERS = ["{empresa}", "{telefone}", "{email}", "{endereco}", "{maps}"];
+var DEFAULT_FAREWELL_PLACEHOLDERS = ["{empresa}", "{telefone}", "{email}"];
+function WelcomeFarewellForm({
+  welcomeMessage,
+  onWelcomeMessageChange,
+  farewellMessage,
+  onFarewellMessageChange,
+  onSave,
+  saving = false,
+  saveSuccess = false,
+  welcomePlaceholders = DEFAULT_WELCOME_PLACEHOLDERS,
+  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" }),
+          labels.welcomeMessage
+        ] }),
+        /* @__PURE__ */ jsx23(
+          WhatsAppMessageEditor,
+          {
+            value: welcomeMessage,
+            onChange: onWelcomeMessageChange,
+            placeholder: labels.welcomeMessagePlaceholder,
+            placeholders: welcomePlaceholders
+          }
+        ),
+        /* @__PURE__ */ jsx23("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" }),
+          labels.farewellMessage
+        ] }),
+        /* @__PURE__ */ jsx23(
+          WhatsAppMessageEditor,
+          {
+            value: farewellMessage,
+            onChange: onFarewellMessageChange,
+            placeholder: labels.farewellMessagePlaceholder,
+            placeholders: farewellPlaceholders
+          }
+        ),
+        /* @__PURE__ */ jsx23("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(
+        "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 ? labels.saving : labels.save
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// 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 = {
+  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...",
+  saveButton: "Salvar t\xF3picos",
+  saveSuccess: "T\xF3picos salvos com sucesso."
+};
+function TopicsForm({
+  topics,
+  onToggle,
+  onMessageChange,
+  onSave,
+  saving = false,
+  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" }),
+        labels.sectionTitle
+      ] }),
+      /* @__PURE__ */ jsx24("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(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggle(topic.key),
+              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(
+                "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"}`
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx24(
+          "textarea",
+          {
+            value: topic.message,
+            onChange: (e) => onMessageChange(topic.key, e.target.value),
+            placeholder: labels.messagePlaceholder,
+            maxLength: 300,
+            rows: 2,
+            className: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          }
+        )
+      ] }, topic.key)),
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs17(
+          "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 }),
+              labels.saveButton
+            ]
+          }
+        ),
+        saveSuccess && /* @__PURE__ */ jsx24("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
+function useConversationMessages(conversationId, params) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("useConversationMessages requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  const { data, loading, error, refetch } = useAsyncResource(
+    () => api.fetchMessages(conversationId, params),
+    [conversationId, params?.limit, params?.before]
+  );
+  const sendMessage = useCallback7(
+    async (text) => {
+      const message = await api.sendMessage(conversationId, text);
+      await refetch();
+      return message;
+    },
+    [api, conversationId, refetch]
+  );
+  const sendMedia = useCallback7(
+    async (mediaData) => {
+      const message = await api.sendMedia(conversationId, mediaData);
+      await refetch();
+      return message;
+    },
+    [api, conversationId, refetch]
+  );
+  const sendTemplate = useCallback7(
+    async (templateData) => {
+      await api.sendTemplate(conversationId, templateData);
+      await refetch();
+    },
+    [api, conversationId, refetch]
+  );
+  const markRead = useCallback7(() => api.markRead(conversationId), [api, conversationId]);
+  return { messages: data ?? [], loading, error, refetch, sendMessage, sendMedia, sendTemplate, markRead };
+}
+
+// src/hooks/useConversationList.ts
+function useConversationList(params) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("useConversationList requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  const { data, loading, error, refetch } = useAsyncResource(
+    () => api.fetchConversations(params),
+    [params?.page, params?.limit, params?.waitingHuman, params?.search]
+  );
+  return { conversations: data ?? [], loading, error, refetch };
+}
+
+// src/hooks/useConversationContext.ts
+function useConversationContext(conversationId) {
+  const conversationsContext = useConversations();
+  if (!conversationsContext) {
+    throw new Error("useConversationContext requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = conversationsContext;
+  const { data, loading, error, refetch } = useAsyncResource(() => api.getContext(conversationId), [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";
+function useConversationRealtime(conversationId, onEvent) {
+  const context = useConversations();
+  const onEventRef = useRef7(onEvent);
+  onEventRef.current = onEvent;
+  useEffect6(() => {
+    if (!context || !conversationId) return;
+    const source = context.sse.connectConversationStream(conversationId);
+    const handler = (event) => onEventRef.current(event);
+    source.addEventListener("message", handler);
+    return () => {
+      source.removeEventListener("message", handler);
+      source.close();
+    };
+  }, [context, conversationId]);
+}
+function useGlobalRealtime(onEvent) {
+  const context = useConversations();
+  const onEventRef = useRef7(onEvent);
+  onEventRef.current = onEvent;
+  useEffect6(() => {
+    if (!context) return;
+    const source = context.sse.connectGlobalStream();
+    const handler = (event) => onEventRef.current(event);
+    source.addEventListener("message", handler);
+    return () => {
+      source.removeEventListener("message", handler);
+      source.close();
+    };
+  }, [context]);
+}
+export {
+  AudioPlayer,
+  Avatar,
+  ConversationListItem,
+  ConversationLocalesProvider,
+  ConversationWallpaper,
+  ConversationsProvider,
+  DateDivider,
+  EmojiPicker,
+  FileIcon,
+  Lightbox,
+  MediaRenderer,
+  MessageBubble,
+  MessageComposer,
+  MessageTail,
+  MessageText,
+  MessageTimestamp,
+  SimpleEmojiPicker,
+  StatusTicks,
+  ToastProvider,
+  TopicsForm,
+  WelcomeFarewellForm,
+  WhatsAppCreateTemplateForm,
+  WhatsAppMessageEditor,
+  WhatsAppTemplateSettingsForm,
+  formatFileSize,
+  formatPhone,
+  formatTimestamp,
+  htmlToWA,
+  parseWhatsAppFormatting,
+  phoneInitials,
+  toast,
+  useConversationContext,
+  useConversationDocuments,
+  useConversationList,
+  useConversationLocales,
+  useConversationMessages,
+  useConversationRealtime,
+  useConversations,
+  useDarkMode,
+  useGlobalRealtime,
+  useToast,
+  useWaitingNotifications,
+  waToHTML,
+  waToHTMLInline
+};