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

package/dist/chunk-4R6Y43DQ.js

@@ -0,0 +1,726 @@
+import {
+  parseWhatsAppFormatting
+} from "./chunk-OGRRHQQW.js";
+
+// 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",
+    moderationFlagged: "Linguagem ofensiva",
+    mediaLoading: "Carregando...",
+    mediaRetry: "Erro \u2014 tentar novamente",
+    mediaError: "Erro",
+    mediaUnavailable: "M\xEDdia indispon\xEDvel",
+    imageAlt: "Imagem",
+    untitledDocument: "Documento",
+    downloadFile: "Baixar"
+  },
+  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/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 { useState as useState2 } from "react";
+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 ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage });
+      }
+      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+      ] }) }) });
+    }
+    case "video": {
+      if (!src && canLazyLoad) {
+        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo });
+      }
+      return /* @__PURE__ */ 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 ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : 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: bubble.mediaUnavailable }) });
+    }
+    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 ?? bubble.untitledDocument }),
+          /* @__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": bubble.downloadFile, children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+          /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+        ] }) }) : canLazyLoad ? /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: lazy.load,
+            disabled: lazy.loading,
+            className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50",
+            "aria-label": bubble.downloadFile,
+            children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+              /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
+              /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+            ] })
+          }
+        ) : null,
+        lazy.error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 flex-shrink-0", children: bubble.mediaError })
+      ] });
+    }
+    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 { useState as useState3 } from "react";
+import { Check } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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,
+  className
+}) {
+  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: cn(
+        "flex items-end gap-1.5 group",
+        isMine ? "justify-end" : "justify-start",
+        isFirstInGroup ? "mt-2" : "mt-0.5",
+        className
+      ),
+      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 }),
+              message.moderation?.isOffensive && /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  className: "mb-1 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950/60 dark:text-amber-300",
+                  title: message.moderation.terms.length > 0 ? message.moderation.terms.join(", ") : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
+                    /* @__PURE__ */ jsx7("span", { children: bubble.moderationFlagged })
+                  ]
+                }
+              ),
+              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: cn("cv-wallpaper", className), 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,
+  className,
+  classNames
+}) => {
+  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 (
+    /* A barra é a superfície (cinza, largura cheia, sem raio) e o campo dentro é que arredonda —
+       ordem do WhatsApp. Invertido, o pill arredondado ia até a borda da tela e os cantos
+       descobriam o fundo branco da página, que lia como defeito. */
+    /* @__PURE__ */ jsxs7("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), 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: cn("flex items-end gap-1.5 rounded-xl bg-white px-3 py-2", classNames?.field), 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/DateDivider.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function DateDivider({ iso, className, classNames }) {
+  const { dateDivider } = useConversationLocales();
+  return /* @__PURE__ */ jsx11("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx11(
+    "span",
+    {
+      className: cn(
+        "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",
+        classNames?.label
+      ),
+      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" });
+}
+
+export {
+  ConversationLocalesProvider,
+  useConversationLocales,
+  StatusTicks,
+  AudioPlayer,
+  FileIcon,
+  formatTimestamp,
+  formatFileSize,
+  MediaRenderer,
+  Lightbox,
+  cn,
+  MessageBubble,
+  ConversationWallpaper,
+  EmojiPicker,
+  MessageComposer,
+  DateDivider
+};