@adatechnology/conversations-ui 0.1.0-rc.5 → 0.1.0-rc.6

package/dist/chunk-LITPZCWW.js

@@ -0,0 +1,1465 @@
+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,
+  FileAudio,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  File as FileGeneric,
+  Presentation
+} from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/FileIcon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IMAGE_STYLE = { Icon: FileImage, colorClass: "text-violet-500" };
+var VIDEO_STYLE = { Icon: FileVideo, colorClass: "text-fuchsia-500" };
+var AUDIO_STYLE = { Icon: FileAudio, colorClass: "text-amber-500" };
+var SHEET_STYLE = { Icon: FileSpreadsheet, colorClass: "text-green-600" };
+var WORD_STYLE = { Icon: FileText, colorClass: "text-blue-500" };
+var SLIDES_STYLE = { Icon: Presentation, colorClass: "text-orange-600" };
+var TEXT_STYLE = { Icon: FileText, colorClass: "text-gray-500" };
+var EXTENSION_STYLE = {
+  pdf: { Icon: FileText, colorClass: "text-red-500" },
+  doc: WORD_STYLE,
+  docx: WORD_STYLE,
+  xls: SHEET_STYLE,
+  xlsx: SHEET_STYLE,
+  csv: SHEET_STYLE,
+  ppt: SLIDES_STYLE,
+  pptx: SLIDES_STYLE,
+  zip: { Icon: FileArchive, colorClass: "text-orange-500" },
+  txt: TEXT_STYLE,
+  plain: TEXT_STYLE,
+  image: IMAGE_STYLE,
+  jpg: IMAGE_STYLE,
+  jpeg: IMAGE_STYLE,
+  png: IMAGE_STYLE,
+  webp: IMAGE_STYLE,
+  gif: IMAGE_STYLE,
+  heic: IMAGE_STYLE,
+  video: VIDEO_STYLE,
+  mp4: VIDEO_STYLE,
+  "3gp": VIDEO_STYLE,
+  "3gpp": VIDEO_STYLE,
+  mov: VIDEO_STYLE,
+  webm: VIDEO_STYLE,
+  audio: AUDIO_STYLE,
+  mp3: AUDIO_STYLE,
+  mpeg: AUDIO_STYLE,
+  ogg: AUDIO_STYLE,
+  oga: AUDIO_STYLE,
+  opus: AUDIO_STYLE,
+  aac: AUDIO_STYLE,
+  amr: AUDIO_STYLE,
+  m4a: AUDIO_STYLE,
+  wav: AUDIO_STYLE
+};
+var MEDIA_FAMILIES = /* @__PURE__ */ new Set(["image", "video", "audio"]);
+function resolveFileIconExtension(filename, mimeType) {
+  const fromFilename = filename?.split(".").pop()?.toLowerCase();
+  if (fromFilename && EXTENSION_STYLE[fromFilename]) return fromFilename;
+  const [family, subtype] = (mimeType ?? "").split(";")[0].toLowerCase().split("/");
+  if (family && MEDIA_FAMILIES.has(family)) return family;
+  return subtype ?? "";
+}
+function FileIcon({ filename, mimeType, size = 20, className }) {
+  const extension = resolveFileIconExtension(filename, mimeType);
+  const style = EXTENSION_STYLE[extension] ?? { Icon: FileGeneric, colorClass: "text-gray-500" };
+  const { Icon, colorClass } = style;
+  return /* @__PURE__ */ jsx4(Icon, { size, className: cn(colorClass, className) });
+}
+
+// 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, className }) {
+  const { bubble } = useConversationLocales();
+  const eagerSrc = resolveMediaSource(message);
+  const lazy = useLazyMediaUrl(message, onResolveUrl);
+  const src = eagerSrc ?? lazy.url;
+  const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl);
+  const lazyButtonClass = "text-xs text-blue-600 underline flex items-center gap-1";
+  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: cn("flex items-center gap-3 min-w-[200px]", className), children: [
+        /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx5(FileIcon, { filename: message.filename, mimeType: message.mimeType }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium truncate", children: message.filename ?? bubble.untitledDocument }),
+          /* @__PURE__ */ jsx5("p", { className: "text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
+        ] }),
+        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";
+var DEFAULT_LIGHTBOX_LABELS = {
+  imageAlt: "Imagem",
+  close: "Fechar"
+};
+function Lightbox({ imageUrl, caption, onClose, labels }) {
+  const imageAltLabel = labels?.imageAlt ?? DEFAULT_LIGHTBOX_LABELS.imageAlt;
+  const closeLabel = labels?.close ?? DEFAULT_LIGHTBOX_LABELS.close;
+  return /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4", onClick: onClose, children: /* @__PURE__ */ jsxs4("div", { className: "max-w-[90vw] max-h-[90vh] flex flex-col items-center", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx6("img", { src: imageUrl, alt: caption ?? imageAltLabel, className: "max-w-full max-h-[80vh] object-contain rounded-lg" }),
+    caption && /* @__PURE__ */ jsx6("p", { className: "text-white text-sm mt-3 text-center", children: caption }),
+    /* @__PURE__ */ jsx6("button", { onClick: onClose, className: "mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors", children: closeLabel })
+  ] }) });
+}
+
+// src/lib/createMediaUrlResolver.ts
+function createMediaUrlResolver(api) {
+  return async (message) => {
+    if (message.uploadId) return api.getDocumentUrl(message.uploadId, "inline");
+    if (message.mediaId) {
+      const { mimeType, data } = await api.getMediaProxyUrl(message.mediaId);
+      return `data:${mimeType};base64,${data}`;
+    }
+    return null;
+  };
+}
+
+// src/providers/ConversationsProvider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ConversationsContext = createContext2(null);
+function ConversationsProvider({
+  api,
+  sse,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(ConversationsContext.Provider, { value: { api, sse }, children });
+}
+function useConversations() {
+  return useContext2(ConversationsContext);
+}
+
+// src/MessageBubble.tsx
+import { useMemo, useState as useState3 } from "react";
+import { Check } from "lucide-react";
+import { Fragment, jsx as jsx8, 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 context = useConversations();
+  const resolveMediaUrl = useMemo(
+    () => onResolveMediaUrl ?? (context?.api ? createMediaUrlResolver(context.api) : void 0),
+    [onResolveMediaUrl, context?.api]
+  );
+  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__ */ jsx8(
+    "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__ */ jsx8(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__ */ jsx8("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__ */ jsx8("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
+                    /* @__PURE__ */ jsx8("span", { children: bubble.moderationFlagged })
+                  ]
+                }
+              ),
+              isMedia ? /* @__PURE__ */ jsx8(MediaRenderer, { message, onLightbox: setLightboxSrc, onResolveUrl: resolveMediaUrl }) : /* @__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__ */ jsx8("span", { children: "\u{1F4E8}" }),
+                  /* @__PURE__ */ jsxs5("span", { className: "font-medium", children: [
+                    bubble.templateLabel,
+                    message.templateName ? ` \u2014 ${message.templateName}` : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx8("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__ */ jsx8("span", { className: "text-xs text-black/40 dark:text-white/40 font-medium", children: formatTimestamp(message.timestamp) }),
+                isMine && message.status && /* @__PURE__ */ jsx8(StatusTicks, { status: message.status, title: tooltipText })
+              ] })
+            ]
+          }
+        ),
+        !isMine && checkbox,
+        lightboxSrc && /* @__PURE__ */ jsx8(Lightbox, { imageUrl: lightboxSrc, onClose: () => setLightboxSrc(null) })
+      ]
+    }
+  );
+}
+
+// src/Wallpaper.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ConversationWallpaper({ children, className }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn("cv-wallpaper", className), children });
+}
+
+// src/EmojiPicker.tsx
+import { useState as useState4, useCallback } from "react";
+import { jsx as jsx10, 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__ */ jsx10("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__ */ jsx10("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__ */ jsx10(
+      "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 jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_MESSAGE_COMPOSER_LABELS = {
+  emoji: "Emoji",
+  attach: "Anexar",
+  send: "Enviar"
+};
+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,
+  labels
+}) => {
+  const emojiLabel = labels?.emoji ?? DEFAULT_MESSAGE_COMPOSER_LABELS.emoji;
+  const attachLabel = labels?.attach ?? DEFAULT_MESSAGE_COMPOSER_LABELS.attach;
+  const sendLabel = labels?.send ?? DEFAULT_MESSAGE_COMPOSER_LABELS.send;
+  const [internalText, setInternalText] = 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__ */ jsx11("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__ */ jsx11("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+          /* @__PURE__ */ jsx11("polyline", { points: "14 2 14 8 20 8" })
+        ] }) }),
+        /* @__PURE__ */ jsx11("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__ */ jsx11("button", { onClick: () => setShowEmoji((v) => !v), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors", "aria-label": emojiLabel, children: /* @__PURE__ */ jsxs7("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx11("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+            /* @__PURE__ */ jsx11("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ jsx11("circle", { cx: "15", cy: "9", r: "0.5", fill: "currentColor" })
+          ] }) }),
+          showEmoji && /* @__PURE__ */ jsx11("div", { className: "absolute bottom-full left-0 mb-2 z-10", children: /* @__PURE__ */ jsx11(EmojiPicker, { onSelect: handleEmojiSelect }) })
+        ] }),
+        /* @__PURE__ */ jsx11(
+          "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__ */ jsx11("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
+          /* @__PURE__ */ jsx11("button", { onClick: () => fileInputRef.current?.click(), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors", "aria-label": attachLabel, children: /* @__PURE__ */ jsx11("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("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__ */ jsx11(
+          "button",
+          {
+            onClick: sendMessage,
+            disabled: !canSend || disabled,
+            className: `w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${canSend && !disabled ? "bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
+            "aria-label": sendLabel,
+            children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx11("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+          }
+        )
+      ] }),
+      remaining !== null && /* @__PURE__ */ jsx11("div", { className: "flex justify-end mt-1 pr-1", children: /* @__PURE__ */ jsx11("span", { className: `text-xs ${remaining < 20 ? "text-red-500" : "text-gray-400"}`, children: remaining }) })
+    ] })
+  );
+};
+
+// src/DateDivider.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function DateDivider({ iso, className, classNames }) {
+  const { dateDivider } = useConversationLocales();
+  return /* @__PURE__ */ jsx12("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx12(
+    "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" });
+}
+
+// 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;
+}
+var COUNTRY_FLAG_BY_DIAL_CODE = {
+  "55": "\u{1F1E7}\u{1F1F7}",
+  "351": "\u{1F1F5}\u{1F1F9}",
+  "34": "\u{1F1EA}\u{1F1F8}",
+  "54": "\u{1F1E6}\u{1F1F7}",
+  "56": "\u{1F1E8}\u{1F1F1}",
+  "57": "\u{1F1E8}\u{1F1F4}",
+  "52": "\u{1F1F2}\u{1F1FD}",
+  "598": "\u{1F1FA}\u{1F1FE}",
+  "595": "\u{1F1F5}\u{1F1FE}",
+  "44": "\u{1F1EC}\u{1F1E7}",
+  "49": "\u{1F1E9}\u{1F1EA}",
+  "39": "\u{1F1EE}\u{1F1F9}",
+  "33": "\u{1F1EB}\u{1F1F7}"
+};
+function phoneCountryFlag(number) {
+  const digits = number.replace(/\D/g, "");
+  for (const length of [3, 2, 1]) {
+    const flag = COUNTRY_FLAG_BY_DIAL_CODE[digits.slice(0, length)];
+    if (flag) return flag;
+  }
+  return "";
+}
+function phoneInitials(number) {
+  const digits = number.replace(/\D/g, "");
+  return digits.slice(-2);
+}
+
+// src/hooks/useAsyncResource.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState6 } from "react";
+function useAsyncResource(fetcher, deps) {
+  const [data, setData] = useState6(void 0);
+  const [loading, setLoading] = useState6(false);
+  const [error, setError] = useState6(void 0);
+  const requestIdRef = useRef3(0);
+  const load = useCallback3(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);
+  useEffect2(() => {
+    load();
+  }, [load]);
+  return { data, loading, error, refetch: load };
+}
+
+// src/lib/paginated.ts
+function conversationsOf(result) {
+  return Array.isArray(result) ? result : result.conversations;
+}
+function documentsOf(result) {
+  return Array.isArray(result) ? result : result.documents;
+}
+function totalOf(result) {
+  return Array.isArray(result) ? result.length : result.total;
+}
+
+// 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(
+    () => conversationId ? api.getDocuments(conversationId, params) : Promise.resolve([]),
+    [conversationId, params?.search, params?.page, params?.limit, params?.source, params?.sortDirection]
+  );
+  if (data === void 0) {
+    return { documents: [], total: 0, loading, error, refetch };
+  }
+  return { documents: documentsOf(data), total: totalOf(data), loading, error, refetch };
+}
+
+// src/ConversationDocumentsPanel.tsx
+import { useState as useState7 } from "react";
+import { ArrowUpDown, Bot, Download, Eye, Users } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var DOCUMENT_SOURCE_FILTER = {
+  ALL: "all",
+  CUSTOMER: "customer",
+  TEAM: "team"
+};
+var TEAM_SOURCES = /* @__PURE__ */ new Set(["agent", "bot"]);
+var DEFAULT_CONVERSATION_DOCUMENTS_LABELS = {
+  toggle: "\u{1F4CE} Arquivos",
+  title: "Arquivos da conversa",
+  noResults: "Nenhum arquivo encontrado para os filtros aplicados",
+  view: "Visualizar",
+  sourceFilterAll: "Todas as origens",
+  sourceFilterCustomer: "Cliente",
+  sourceFilterTeam: "Equipe",
+  sortMostRecent: "Mais recentes",
+  sortOldest: "Mais antigos",
+  clearFilters: "Limpar filtros",
+  selectAll: "Selecionar todos desta p\xE1gina",
+  downloadSelected: (count) => `Baixar ${count} selecionado${count === 1 ? "" : "s"} (.zip)`,
+  archiveFailed: "N\xE3o foi poss\xEDvel montar o arquivo compactado.",
+  total: (count) => `${count} arquivo${count === 1 ? "" : "s"}`,
+  page: (current, last) => `${current} / ${last}`,
+  searchPlaceholder: "Buscar por nome do arquivo",
+  empty: "Nenhum arquivo nesta conversa.",
+  loading: "Carregando arquivos\u2026",
+  failure: "N\xE3o foi poss\xEDvel carregar os arquivos.",
+  download: "Baixar"
+};
+var DEFAULT_PER_PAGE = 10;
+function ConversationDocumentsPanel({
+  conversationId,
+  open,
+  perPage = DEFAULT_PER_PAGE,
+  labels: labelsOverride,
+  className,
+  classNames
+}) {
+  const labels = { ...DEFAULT_CONVERSATION_DOCUMENTS_LABELS, ...labelsOverride };
+  const context = useConversations();
+  const [search, setSearch] = useState7("");
+  const [sourceFilter, setSourceFilter] = useState7(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState7("desc");
+  const [page, setPage] = useState7(1);
+  const [selectedIds, setSelectedIds] = useState7([]);
+  const [archiveError, setArchiveError] = useState7(false);
+  const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
+  const { documents, total, loading, error } = useConversationDocuments(open ? conversationId : void 0, {
+    search,
+    page,
+    limit: perPage,
+    sortDirection,
+    ...sourceFilter === DOCUMENT_SOURCE_FILTER.ALL ? {} : { source: sourceFilter }
+  });
+  const lastPage = Math.max(1, Math.ceil(total / perPage));
+  function applyFilter(change) {
+    change();
+    setPage(1);
+  }
+  async function handleOpen(uploadId, disposition) {
+    const url = await context?.api.getDocumentUrl(uploadId, disposition);
+    if (url) window.open(url, "_blank", "noopener,noreferrer");
+  }
+  const canArchive = typeof context?.api.downloadDocumentsArchive === "function";
+  const pageIds = documents.map((document2) => document2.id);
+  const allOnPageSelected = pageIds.length > 0 && pageIds.every((id) => selectedIds.includes(id));
+  function toggleSelected(uploadId) {
+    setArchiveError(false);
+    setSelectedIds(
+      (current) => current.includes(uploadId) ? current.filter((id) => id !== uploadId) : [...current, uploadId]
+    );
+  }
+  function toggleAllOnPage() {
+    setArchiveError(false);
+    setSelectedIds(
+      (current) => allOnPageSelected ? current.filter((id) => !pageIds.includes(id)) : [...current, ...pageIds.filter((id) => !current.includes(id))]
+    );
+  }
+  async function handleDownloadSelected() {
+    const archive = context?.api.downloadDocumentsArchive;
+    if (!archive || selectedIds.length === 0) return;
+    setArchiveError(false);
+    try {
+      const blob = await archive(conversationId, selectedIds);
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `conversa-${conversationId}.zip`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      setSelectedIds([]);
+    } catch {
+      setArchiveError(true);
+    }
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsx13("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs8("section", { className: cn("px-4 py-3", classNames?.body), children: [
+    /* @__PURE__ */ jsx13("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs8("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          type: "search",
+          value: search,
+          onChange: (event) => applyFilter(() => setSearch(event.target.value)),
+          placeholder: labels.searchPlaceholder,
+          "aria-label": labels.searchPlaceholder,
+          className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-52", classNames?.search)
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        "select",
+        {
+          value: sourceFilter,
+          onChange: (event) => applyFilter(() => setSourceFilter(event.target.value)),
+          "aria-label": labels.sourceFilterAll,
+          className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-36", classNames?.sourceSelect),
+          children: [
+            /* @__PURE__ */ jsx13("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx13("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx13("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
+          className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
+          children: [
+            /* @__PURE__ */ jsx13(ArrowUpDown, { size: 14 }),
+            sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
+          ]
+        }
+      ),
+      hasFilters ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyFilter(() => {
+            setSearch("");
+            setSourceFilter(DOCUMENT_SOURCE_FILTER.ALL);
+            setSortDirection("desc");
+          }),
+          className: cn("cv-header-action", classNames?.clearButton),
+          children: labels.clearFilters
+        }
+      ) : null
+    ] }),
+    loading ? /* @__PURE__ */ jsx13("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
+    error ? /* @__PURE__ */ jsx13("p", { role: "alert", className: cn("text-xs text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
+    !loading && !error && documents.length === 0 ? /* @__PURE__ */ jsx13("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs8("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
+      /* @__PURE__ */ jsxs8("label", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx13(
+          "input",
+          {
+            type: "checkbox",
+            checked: allOnPageSelected,
+            onChange: toggleAllOnPage,
+            className: cn(classNames?.checkbox)
+          }
+        ),
+        labels.selectAll
+      ] }),
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
+      archiveError ? /* @__PURE__ */ jsx13("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx13("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+      const isFromCustomer = !TEAM_SOURCES.has(document2.source);
+      const SourceIcon = isFromCustomer ? Users : Bot;
+      return /* @__PURE__ */ jsxs8(
+        "li",
+        {
+          className: cn(
+            "flex items-center justify-between gap-2 rounded-lg border px-3 py-2 dark:border-gray-700",
+            classNames?.item
+          ),
+          children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              canArchive ? /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedIds.includes(document2.id),
+                  onChange: () => toggleSelected(document2.id),
+                  "aria-label": `${labels.download}: ${document2.filename}`,
+                  className: cn("shrink-0", classNames?.checkbox)
+                }
+              ) : null,
+              /* @__PURE__ */ jsx13(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-0.5 flex items-center gap-1 text-[11px] font-medium",
+                      isFromCustomer ? "text-blue-600 dark:text-blue-400" : "text-emerald-600 dark:text-emerald-400",
+                      classNames?.sourceBadge
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx13(SourceIcon, { size: 11 }),
+                      isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    className: cn("truncate text-sm font-medium", classNames?.filename),
+                    title: document2.filename,
+                    children: document2.filename
+                  }
+                ),
+                /* @__PURE__ */ jsxs8("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
+                  formatDateTime(document2.linkedAt),
+                  " \xB7 ",
+                  formatFileSize(document2.sizeBytes)
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "inline"),
+                  title: labels.view,
+                  "aria-label": `${labels.view}: ${document2.filename}`,
+                  className: cn("cv-header-icon", classNames?.viewButton),
+                  children: /* @__PURE__ */ jsx13(Eye, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "attachment"),
+                  title: labels.download,
+                  "aria-label": `${labels.download}: ${document2.filename}`,
+                  className: cn("cv-header-icon", classNames?.downloadButton),
+                  children: /* @__PURE__ */ jsx13(Download, { size: 14 })
+                }
+              )
+            ] })
+          ]
+        },
+        document2.id
+      );
+    }) }),
+    total > perPage ? /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn(
+          "mt-2 flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700",
+          classNames?.pagination
+        ),
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-gray-400", children: labels.total(total) }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage(page - 1),
+                disabled: page <= 1,
+                "aria-label": labels.sortOldest,
+                className: "cv-header-icon disabled:opacity-40",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage(page + 1),
+                disabled: page >= lastPage,
+                "aria-label": labels.sortMostRecent,
+                className: "cv-header-icon disabled:opacity-40",
+                children: "\u203A"
+              }
+            )
+          ] })
+        ]
+      }
+    ) : null
+  ] }) });
+}
+
+// src/DocumentsLibrary.tsx
+import { useEffect as useEffect3, useState as useState8 } from "react";
+import { ArrowUpDown as ArrowUpDown2, Bot as Bot2, Download as Download2, Eye as Eye2, MessageSquare, Users as Users2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_DOCUMENTS_LIBRARY_LABELS = {
+  title: "Documentos",
+  searchPlaceholder: "Buscar por nome do arquivo ou telefone",
+  empty: "Nenhum arquivo trocado ainda.",
+  noResults: "Nenhum arquivo encontrado para os filtros aplicados",
+  loading: "Carregando arquivos\u2026",
+  failure: "N\xE3o foi poss\xEDvel carregar os arquivos.",
+  view: "Visualizar",
+  download: "Baixar",
+  openConversation: "Abrir conversa",
+  sourceFilterAll: "Todas as origens",
+  sourceFilterCustomer: "Cliente",
+  sourceFilterTeam: "Equipe",
+  sortMostRecent: "Mais recentes",
+  sortOldest: "Mais antigos",
+  clearFilters: "Limpar filtros",
+  total: (count) => `${count} arquivo${count === 1 ? "" : "s"}`,
+  page: (current, last) => `${current} / ${last}`
+};
+var TEAM_SOURCES2 = /* @__PURE__ */ new Set(["agent", "bot"]);
+var DEFAULT_PER_PAGE2 = 20;
+function DocumentsLibrary({
+  perPage = DEFAULT_PER_PAGE2,
+  onOpenConversation,
+  labels: labelsOverride,
+  className,
+  classNames
+}) {
+  const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride };
+  const context = useConversations();
+  const [search, setSearch] = useState8("");
+  const [sourceFilter, setSourceFilter] = useState8(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState8("desc");
+  const [page, setPage] = useState8(1);
+  const [documents, setDocuments] = useState8([]);
+  const [total, setTotal] = useState8(0);
+  const [loading, setLoading] = useState8(false);
+  const [failed, setFailed] = useState8(false);
+  const hasFilters = search !== "" || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== "desc";
+  const lastPage = Math.max(1, Math.ceil(total / perPage));
+  const fetchAll = context?.api.getAllDocuments;
+  useEffect3(() => {
+    if (!fetchAll) return;
+    let active = true;
+    setLoading(true);
+    setFailed(false);
+    void fetchAll({
+      search,
+      page,
+      limit: perPage,
+      sortDirection,
+      ...sourceFilter === DOCUMENT_SOURCE_FILTER.ALL ? {} : { source: sourceFilter }
+    }).then((result) => {
+      if (!active) return;
+      setDocuments(result.documents);
+      setTotal(result.total);
+    }).catch(() => {
+      if (active) setFailed(true);
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage]);
+  function applyFilter(change) {
+    change();
+    setPage(1);
+  }
+  async function handleOpen(uploadId, disposition) {
+    const url = await context?.api.getDocumentUrl(uploadId, disposition);
+    if (url) window.open(url, "_blank", "noopener,noreferrer");
+  }
+  if (!fetchAll) return null;
+  return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-3", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx14("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx14(
+        "input",
+        {
+          type: "search",
+          value: search,
+          onChange: (event) => applyFilter(() => setSearch(event.target.value)),
+          placeholder: labels.searchPlaceholder,
+          "aria-label": labels.searchPlaceholder,
+          className: cn("w-full rounded-md border px-3 py-2 text-sm sm:w-64", classNames?.search)
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
+        "select",
+        {
+          value: sourceFilter,
+          onChange: (event) => applyFilter(() => setSourceFilter(event.target.value)),
+          "aria-label": labels.sourceFilterAll,
+          className: cn("w-full rounded-md border px-2 py-2 text-sm sm:w-40", classNames?.sourceSelect),
+          children: [
+            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx14("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
+          className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
+          children: [
+            /* @__PURE__ */ jsx14(ArrowUpDown2, { size: 14 }),
+            sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
+          ]
+        }
+      ),
+      hasFilters ? /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyFilter(() => {
+            setSearch("");
+            setSourceFilter(DOCUMENT_SOURCE_FILTER.ALL);
+            setSortDirection("desc");
+          }),
+          className: cn("cv-header-action", classNames?.clearButton),
+          children: labels.clearFilters
+        }
+      ) : null
+    ] }),
+    loading ? /* @__PURE__ */ jsx14("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
+    failed ? /* @__PURE__ */ jsx14("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.failure }) : null,
+    !loading && !failed && documents.length === 0 ? /* @__PURE__ */ jsx14("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    /* @__PURE__ */ jsx14("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
+      const isFromCustomer = !TEAM_SOURCES2.has(document2.source);
+      const SourceIcon = isFromCustomer ? Users2 : Bot2;
+      return /* @__PURE__ */ jsxs9(
+        "li",
+        {
+          className: cn(
+            "flex items-center justify-between gap-3 rounded-lg border px-3 py-2 dark:border-gray-700",
+            classNames?.item
+          ),
+          children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ jsx14(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx14("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
+                /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
+                  /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx14(SourceIcon, { size: 11 }),
+                    isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
+                  ] }),
+                  /* @__PURE__ */ jsx14("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx14("span", { children: formatDateTime(document2.linkedAt) }),
+                  /* @__PURE__ */ jsx14("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx14("span", { children: formatFileSize(document2.sizeBytes) })
+                ] })
+              ] })
+            ] }),
+            onOpenConversation ? /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenConversation(document2.conversationId),
+                title: labels.openConversation,
+                className: cn("cv-header-action inline-flex shrink-0 items-center gap-1", classNames?.conversationLink),
+                children: [
+                  /* @__PURE__ */ jsx14(MessageSquare, { size: 12 }),
+                  formatPhone(document2.conversationId)
+                ]
+              }
+            ) : /* @__PURE__ */ jsx14("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx14(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "inline"),
+                  title: labels.view,
+                  "aria-label": `${labels.view}: ${document2.filename}`,
+                  className: "cv-header-icon",
+                  children: /* @__PURE__ */ jsx14(Eye2, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "attachment"),
+                  title: labels.download,
+                  "aria-label": `${labels.download}: ${document2.filename}`,
+                  className: "cv-header-icon",
+                  children: /* @__PURE__ */ jsx14(Download2, { size: 14 })
+                }
+              )
+            ] })
+          ]
+        },
+        `${document2.conversationId}:${document2.id}`
+      );
+    }) }),
+    total > perPage ? /* @__PURE__ */ jsxs9("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
+      /* @__PURE__ */ jsx14("span", { className: "text-gray-400", children: labels.total(total) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: () => setPage(page - 1),
+            disabled: page <= 1,
+            className: "cv-header-icon disabled:opacity-40",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx14("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: () => setPage(page + 1),
+            disabled: page >= lastPage,
+            className: "cv-header-icon disabled:opacity-40",
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+
+export {
+  ConversationLocalesProvider,
+  useConversationLocales,
+  StatusTicks,
+  AudioPlayer,
+  cn,
+  FileIcon,
+  formatTimestamp,
+  formatDateTime,
+  isSameDay,
+  formatFileSize,
+  MediaRenderer,
+  DEFAULT_LIGHTBOX_LABELS,
+  Lightbox,
+  createMediaUrlResolver,
+  ConversationsProvider,
+  useConversations,
+  MessageBubble,
+  ConversationWallpaper,
+  EmojiPicker,
+  DEFAULT_MESSAGE_COMPOSER_LABELS,
+  MessageComposer,
+  DateDivider,
+  formatPhone,
+  phoneCountryFlag,
+  phoneInitials,
+  useAsyncResource,
+  conversationsOf,
+  totalOf,
+  useConversationDocuments,
+  DOCUMENT_SOURCE_FILTER,
+  DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
+  ConversationDocumentsPanel,
+  DEFAULT_DOCUMENTS_LIBRARY_LABELS,
+  DocumentsLibrary
+};