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

package/dist/chunk-OIDAIVCH.js

@@ -0,0 +1,1985 @@
+import {
+  parseWhatsAppFormatting,
+  useIsDarkTheme
+} from "./chunk-2AYDBWNE.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 documentTypeLabel(filename, mimeType) {
+  const extension = filename?.split(".").pop();
+  if (extension && extension.length <= 5 && extension !== filename) return extension.toUpperCase();
+  const subtype = mimeType?.split(";")[0]?.split("/")[1];
+  if (!subtype) return "FILE";
+  const compacto = subtype.split(".").pop() ?? subtype;
+  return compacto.slice(0, 12).toUpperCase();
+}
+function resolveMediaSource(message) {
+  if (message.mediaUrl) return message.mediaUrl;
+  if (message.base64) {
+    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);
+  function LazyMediaButton({ icon, label }) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: lazy.load,
+        disabled: lazy.loading,
+        className: "flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white", children: icon }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-gray-600 dark:text-gray-300", children: label })
+        ]
+      }
+    );
+  }
+  switch (message.type) {
+    case "image":
+    case "sticker": {
+      if (!src && canLazyLoad) {
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })
+            ] }),
+            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+      ] }) }) });
+    }
+    case "video": {
+      if (!src && canLazyLoad) {
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })
+            ] }),
+            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("video", { src, className: "w-full max-h-80 rounded-lg", controls: true, preload: "metadata", children: /* @__PURE__ */ jsx5("track", { kind: "captions" }) }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
+        /* @__PURE__ */ jsx5("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+      ] }) }) });
+    }
+    case "audio": {
+      if (!src && canLazyLoad) {
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "translate-x-0.5", children: /* @__PURE__ */ jsx5("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
+            label: 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 = documentTypeLabel(message.filename, message.mimeType);
+      const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null;
+      return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 min-w-[200px]", className), children: [
+        /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx5(FileIcon, { filename: message.filename, mimeType: message.mimeType }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium truncate", children: message.filename ?? bubble.untitledDocument }),
+          /* @__PURE__ */ jsx5("p", { className: "truncate text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
+        ] }),
+        src ? /* @__PURE__ */ jsx5("a", { href: src, download: message.filename, className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors", "aria-label": bubble.downloadFile, children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+          /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+        ] }) }) : canLazyLoad ? /* @__PURE__ */ jsx5(
+          "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/InteractiveMessage.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var FORMATTING_CLASSES = "[&_strong]:font-bold [&_em]:italic [&_del]:line-through";
+var DEFAULT_INTERACTIVE_MESSAGE_LABELS = {
+  openList: "Ver op\xE7\xF5es"
+};
+function collectRows(payload) {
+  return (payload.action?.sections ?? []).flatMap((section) => section.rows ?? []);
+}
+function collectButtons(payload) {
+  return (payload.action?.buttons ?? []).map((button) => button.reply).filter((reply) => reply !== void 0);
+}
+function InteractiveMessage({ payload, onSelect, labels, className }) {
+  const openListLabel = labels?.openList ?? DEFAULT_INTERACTIVE_MESSAGE_LABELS.openList;
+  const [isListOpen, setIsListOpen] = useState3(false);
+  const buttons = collectButtons(payload);
+  const sections = payload.action?.sections ?? [];
+  const hasRows = collectRows(payload).length > 0;
+  const isInteractable = onSelect !== void 0;
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-1", className), children: [
+    payload.header?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-sm font-semibold text-gray-900 dark:text-gray-100", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.header.text) }) : null,
+    payload.body?.text ? /* @__PURE__ */ jsx7(
+      "p",
+      {
+        className: cn(
+          "whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100",
+          FORMATTING_CLASSES
+        ),
+        children: parseWhatsAppFormatting(payload.body.text)
+      }
+    ) : null,
+    payload.footer?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-xs text-gray-500 dark:text-gray-400", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.footer.text) }) : null,
+    buttons.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: buttons.map((button) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        disabled: !isInteractable,
+        onClick: () => onSelect?.({ kind: "button", option: button }),
+        className: "rounded-md px-3 py-1.5 text-sm font-medium text-teal-700 transition-colors enabled:hover:bg-teal-50 disabled:cursor-default dark:text-teal-300 dark:enabled:hover:bg-teal-900/30",
+        children: button.title
+      },
+      button.id
+    )) }) : null,
+    hasRows ? /* @__PURE__ */ jsxs5("div", { className: "mt-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsListOpen((open) => !open),
+          "aria-expanded": isListOpen,
+          className: "w-full rounded-md px-3 py-1.5 text-sm font-medium text-teal-700 transition-colors hover:bg-teal-50 dark:text-teal-300 dark:hover:bg-teal-900/30",
+          children: [
+            "\u2630 ",
+            payload.action?.button ?? openListLabel
+          ]
+        }
+      ),
+      isListOpen ? /* @__PURE__ */ jsx7("div", { className: "mt-1 flex flex-col gap-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+        section.title ? /* @__PURE__ */ jsx7("p", { className: "px-3 py-1 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400", children: section.title }) : null,
+        (section.rows ?? []).map((row) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            disabled: !isInteractable,
+            onClick: () => onSelect?.({ kind: "list", option: row }),
+            className: "rounded-md px-3 py-1.5 text-left text-sm text-gray-900 transition-colors enabled:hover:bg-gray-100 disabled:cursor-default dark:text-gray-100 dark:enabled:hover:bg-gray-700",
+            children: [
+              /* @__PURE__ */ jsx7("span", { className: "block", children: row.title }),
+              row.description ? /* @__PURE__ */ jsx7("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: row.description }) : null
+            ]
+          },
+          row.id
+        ))
+      ] }, section.title ?? sectionIndex)) }) : null
+    ] }) : null
+  ] });
+}
+
+// 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 jsx8 } from "react/jsx-runtime";
+var ConversationsContext = createContext2(null);
+function ConversationsProvider({
+  api,
+  sse,
+  children
+}) {
+  return /* @__PURE__ */ jsx8(ConversationsContext.Provider, { value: { api, sse }, children });
+}
+function useConversations() {
+  return useContext2(ConversationsContext);
+}
+
+// src/MessageBubble.tsx
+import { useMemo, useState as useState4 } from "react";
+import { Check } from "lucide-react";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+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,
+  onInteractiveSelect,
+  className
+}) {
+  const { bubble, selection } = useConversationLocales();
+  const [lightboxSrc, setLightboxSrc] = useState4(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 isInteractive = message.type === "interactive";
+  const displayName = message.sender === "agent" && senderName ? senderName : bubble[message.sender] ?? message.sender;
+  const tooltipText = message.status === "read" && message.readAt ? `${bubble.readAt}${formatDateTime(message.readAt)}` : message.status === "failed" ? bubble.windowExpired : void 0;
+  const tailCornerClass = isFirstInGroup ? isMine ? "rounded-tr-md" : "rounded-tl-md" : "";
+  const checkbox = /* @__PURE__ */ jsx9(
+    "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__ */ jsx9(Check, { size: 12, className: "text-white", strokeWidth: 3 })
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsxs6(
+          "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__ */ jsx9("div", { className: "text-xs font-semibold mb-0.5 text-teal-700 dark:text-teal-400", children: displayName }),
+              message.moderation?.isOffensive && /* @__PURE__ */ jsxs6(
+                "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__ */ jsx9("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
+                    /* @__PURE__ */ jsx9("span", { children: bubble.moderationFlagged })
+                  ]
+                }
+              ),
+              isMedia ? /* @__PURE__ */ jsx9(MediaRenderer, { message, onLightbox: setLightboxSrc, onResolveUrl: resolveMediaUrl }) : isInteractive && message.payload ? (
+                // O texto da mensagem interativa mora dentro do payload (`body.text`), e `content` guarda
+                // só uma cópia achatada para busca — renderizar `content` aqui duplicaria o corpo.
+                /* @__PURE__ */ jsx9(InteractiveMessage, { payload: message.payload, onSelect: onInteractiveSelect })
+              ) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+                isTemplate && /* @__PURE__ */ jsxs6("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mb-0.5", children: [
+                  /* @__PURE__ */ jsx9("span", { children: "\u{1F4E8}" }),
+                  /* @__PURE__ */ jsxs6("span", { className: "font-medium", children: [
+                    bubble.templateLabel,
+                    message.templateName ? ` \u2014 ${message.templateName}` : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(message.content ?? "") })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1 mt-0.5 select-none", children: [
+                /* @__PURE__ */ jsx9("span", { className: "text-xs text-black/40 dark:text-white/40 font-medium", children: formatTimestamp(message.timestamp) }),
+                isMine && message.status && /* @__PURE__ */ jsx9(StatusTicks, { status: message.status, title: tooltipText })
+              ] })
+            ]
+          }
+        ),
+        !isMine && checkbox,
+        lightboxSrc && /* @__PURE__ */ jsx9(Lightbox, { imageUrl: lightboxSrc, onClose: () => setLightboxSrc(null) })
+      ]
+    }
+  );
+}
+
+// src/Wallpaper.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function doodlePattern(strokeColor, opacity) {
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='${strokeColor}' stroke-width='1.2' opacity='${opacity}'><circle cx='15' cy='15' r='3'/><path d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/><circle cx='70' cy='28' r='2'/><path d='M18 55 l6 6 m-6 0 l6 -6'/><circle cx='55' cy='68' r='2.5'/><path d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/><circle cx='8' cy='85' r='2'/><path d='M65 90 l5 5 m-5 0 l5 -5'/></g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+var LIGHT_WALLPAPER = {
+  backgroundColor: "#efeae2",
+  backgroundImage: doodlePattern("#d7cfc0", 0.7),
+  backgroundRepeat: "repeat",
+  backgroundSize: "100px 100px"
+};
+var DARK_WALLPAPER = {
+  backgroundColor: "#0b141a",
+  backgroundImage: doodlePattern("#19232a", 0.9),
+  backgroundRepeat: "repeat",
+  backgroundSize: "100px 100px"
+};
+function ConversationWallpaper({ children, className, style }) {
+  const isDark = useIsDarkTheme();
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn("cv-wallpaper", className),
+      style: { ...isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER, ...style },
+      children
+    }
+  );
+}
+
+// src/emojiCatalog.ts
+var EMOJI_CATEGORIES = [
+  {
+    name: "Smileys",
+    entries: [
+      { emoji: "\u{1F600}", keywords: ["sorriso", "feliz", "alegre"] },
+      { emoji: "\u{1F603}", keywords: ["sorriso", "feliz", "animado"] },
+      { emoji: "\u{1F604}", keywords: ["sorriso", "feliz", "risada"] },
+      { emoji: "\u{1F601}", keywords: ["sorriso", "dentes", "feliz"] },
+      { emoji: "\u{1F605}", keywords: ["alivio", "al\xEDvio", "suor", "nervoso"] },
+      { emoji: "\u{1F602}", keywords: ["risada", "chorando", "engracado", "engra\xE7ado"] },
+      { emoji: "\u{1F923}", keywords: ["risada", "rolando", "engracado", "engra\xE7ado"] },
+      { emoji: "\u{1F60A}", keywords: ["sorriso", "timido", "t\xEDmido", "feliz"] },
+      { emoji: "\u{1F607}", keywords: ["anjo", "inocente", "santo"] },
+      { emoji: "\u{1F642}", keywords: ["sorriso", "leve", "ok"] },
+      { emoji: "\u{1F609}", keywords: ["piscada", "piscar", "flerte"] },
+      { emoji: "\u{1F60C}", keywords: ["aliviado", "calmo", "tranquilo"] },
+      { emoji: "\u{1F60D}", keywords: ["amor", "apaixonado", "coracao", "cora\xE7\xE3o", "olhos"] },
+      { emoji: "\u{1F970}", keywords: ["amor", "apaixonado", "carinho"] },
+      { emoji: "\u{1F618}", keywords: ["beijo", "amor", "carinho"] },
+      { emoji: "\u{1F60B}", keywords: ["gostoso", "delicia", "del\xEDcia", "lingua", "l\xEDngua"] },
+      { emoji: "\u{1F61C}", keywords: ["lingua", "l\xEDngua", "brincadeira", "piscada"] },
+      { emoji: "\u{1F92A}", keywords: ["maluco", "doido", "brincadeira"] },
+      { emoji: "\u{1F914}", keywords: ["pensando", "duvida", "d\xFAvida", "hmm"] },
+      { emoji: "\u{1F917}", keywords: ["abraco", "abra\xE7o", "carinho"] },
+      { emoji: "\u{1F610}", keywords: ["neutro", "serio", "s\xE9rio", "indiferente"] },
+      { emoji: "\u{1F634}", keywords: ["dormindo", "sono", "cansado"] },
+      { emoji: "\u{1F62D}", keywords: ["chorando", "triste", "lagrima", "l\xE1grima"] },
+      { emoji: "\u{1F622}", keywords: ["triste", "chorando", "lagrima", "l\xE1grima"] },
+      { emoji: "\u{1F621}", keywords: ["raiva", "bravo", "irritado"] },
+      { emoji: "\u{1F631}", keywords: ["susto", "medo", "assustado"] },
+      { emoji: "\u{1F92F}", keywords: ["explodindo", "chocado", "surpresa"] },
+      { emoji: "\u{1F60E}", keywords: ["oculos", "\xF3culos", "legal", "estiloso"] },
+      { emoji: "\u{1F973}", keywords: ["festa", "comemorar", "aniversario", "anivers\xE1rio"] },
+      { emoji: "\u{1F637}", keywords: ["mascara", "m\xE1scara", "doente", "saude", "sa\xFAde"] }
+    ]
+  },
+  {
+    name: "Gestos",
+    entries: [
+      { emoji: "\u{1F44D}", keywords: ["joia", "j\xF3ia", "polegar", "ok", "positivo", "curtir"] },
+      { emoji: "\u{1F44E}", keywords: ["polegar", "negativo", "ruim", "nao", "n\xE3o"] },
+      { emoji: "\u{1F44C}", keywords: ["ok", "certo", "perfeito"] },
+      { emoji: "\u270C\uFE0F", keywords: ["paz", "vitoria", "vit\xF3ria", "dois"] },
+      { emoji: "\u{1F91E}", keywords: ["sorte", "dedos", "cruzados", "torcendo"] },
+      { emoji: "\u{1F919}", keywords: ["chama", "ligar", "shaka"] },
+      { emoji: "\u{1F44B}", keywords: ["tchau", "ola", "ol\xE1", "aceno", "oi"] },
+      { emoji: "\u270B", keywords: ["mao", "m\xE3o", "parar", "pare"] },
+      { emoji: "\u{1F44F}", keywords: ["palmas", "aplauso", "parabens", "parab\xE9ns"] },
+      { emoji: "\u{1F64C}", keywords: ["comemorar", "maos", "m\xE3os", "sucesso"] },
+      { emoji: "\u{1F91D}", keywords: ["acordo", "aperto", "mao", "m\xE3o", "negocio", "neg\xF3cio", "parceria"] },
+      { emoji: "\u{1F64F}", keywords: ["obrigado", "reza", "oracao", "ora\xE7\xE3o", "por favor"] },
+      { emoji: "\u270D\uFE0F", keywords: ["escrever", "assinar", "assinatura"] },
+      { emoji: "\u{1F4AA}", keywords: ["forca", "for\xE7a", "musculo", "m\xFAsculo", "braco", "bra\xE7o"] },
+      { emoji: "\u{1F447}", keywords: ["abaixo", "baixo", "apontar", "seta"] },
+      { emoji: "\u{1F449}", keywords: ["direita", "apontar", "seta"] },
+      { emoji: "\u261D\uFE0F", keywords: ["acima", "cima", "apontar", "atencao", "aten\xE7\xE3o"] }
+    ]
+  },
+  {
+    name: "Cora\xE7\xF5es",
+    entries: [
+      { emoji: "\u2764\uFE0F", keywords: ["coracao", "cora\xE7\xE3o", "amor", "vermelho"] },
+      { emoji: "\u{1F9E1}", keywords: ["coracao", "cora\xE7\xE3o", "laranja"] },
+      { emoji: "\u{1F49B}", keywords: ["coracao", "cora\xE7\xE3o", "amarelo"] },
+      { emoji: "\u{1F49A}", keywords: ["coracao", "cora\xE7\xE3o", "verde"] },
+      { emoji: "\u{1F499}", keywords: ["coracao", "cora\xE7\xE3o", "azul"] },
+      { emoji: "\u{1F49C}", keywords: ["coracao", "cora\xE7\xE3o", "roxo"] },
+      { emoji: "\u{1F5A4}", keywords: ["coracao", "cora\xE7\xE3o", "preto"] },
+      { emoji: "\u{1F90D}", keywords: ["coracao", "cora\xE7\xE3o", "branco"] },
+      { emoji: "\u{1F494}", keywords: ["coracao", "cora\xE7\xE3o", "partido", "triste"] },
+      { emoji: "\u{1F495}", keywords: ["coracao", "cora\xE7\xE3o", "amor", "casal"] },
+      { emoji: "\u{1F496}", keywords: ["coracao", "cora\xE7\xE3o", "brilho", "amor"] },
+      { emoji: "\u{1F49D}", keywords: ["coracao", "cora\xE7\xE3o", "presente", "laco", "la\xE7o"] }
+    ]
+  },
+  {
+    name: "Neg\xF3cios",
+    entries: [
+      { emoji: "\u{1F3E0}", keywords: ["casa", "imovel", "im\xF3vel", "residencia", "resid\xEAncia", "moradia"] },
+      { emoji: "\u{1F3E1}", keywords: ["casa", "imovel", "im\xF3vel", "jardim", "moradia"] },
+      { emoji: "\u{1F3E2}", keywords: ["predio", "pr\xE9dio", "empresa", "escritorio", "escrit\xF3rio"] },
+      { emoji: "\u{1F3E6}", keywords: ["banco", "financiamento", "agencia", "ag\xEAncia"] },
+      { emoji: "\u{1F511}", keywords: ["chave", "casa", "entrega", "imovel", "im\xF3vel"] },
+      { emoji: "\u{1F4C4}", keywords: ["documento", "papel", "contrato", "arquivo"] },
+      { emoji: "\u{1F4CB}", keywords: ["prancheta", "lista", "documento", "checklist"] },
+      { emoji: "\u{1F4DD}", keywords: ["anotar", "escrever", "nota", "formulario", "formul\xE1rio"] },
+      { emoji: "\u2705", keywords: ["ok", "certo", "aprovado", "concluido", "conclu\xEDdo", "check"] },
+      { emoji: "\u274C", keywords: ["errado", "negado", "recusado", "cancelar"] },
+      { emoji: "\u26A0\uFE0F", keywords: ["atencao", "aten\xE7\xE3o", "alerta", "cuidado"] },
+      { emoji: "\u{1F4B0}", keywords: ["dinheiro", "valor", "saco", "grana", "pagamento"] },
+      { emoji: "\u{1F4B5}", keywords: ["dinheiro", "nota", "valor", "pagamento"] },
+      { emoji: "\u{1F4B3}", keywords: ["cartao", "cart\xE3o", "credito", "cr\xE9dito", "pagamento"] },
+      { emoji: "\u{1F9FE}", keywords: ["recibo", "nota", "fiscal", "comprovante"] },
+      { emoji: "\u{1F4CA}", keywords: ["grafico", "gr\xE1fico", "relatorio", "relat\xF3rio", "dados"] },
+      { emoji: "\u{1F4C8}", keywords: ["grafico", "gr\xE1fico", "subindo", "crescimento", "alta"] },
+      { emoji: "\u{1F4C9}", keywords: ["grafico", "gr\xE1fico", "caindo", "queda", "baixa"] },
+      { emoji: "\u{1F5D3}\uFE0F", keywords: ["calendario", "calend\xE1rio", "data", "agenda", "prazo"] },
+      { emoji: "\u23F0", keywords: ["relogio", "rel\xF3gio", "hora", "prazo", "alarme"] },
+      { emoji: "\u{1F4DE}", keywords: ["telefone", "ligar", "contato", "chamada"] },
+      { emoji: "\u{1F4F1}", keywords: ["celular", "telefone", "whatsapp", "contato"] },
+      { emoji: "\u{1F4E7}", keywords: ["email", "e-mail", "mensagem", "contato"] },
+      { emoji: "\u{1F4CE}", keywords: ["anexo", "clipe", "arquivo"] },
+      { emoji: "\u{1F50D}", keywords: ["buscar", "procurar", "lupa", "pesquisa", "consulta"] },
+      { emoji: "\u{1F916}", keywords: ["robo", "rob\xF4", "bot", "assistente", "automatico", "autom\xE1tico"] },
+      { emoji: "\u{1F4AC}", keywords: ["mensagem", "conversa", "balao", "bal\xE3o", "chat"] }
+    ]
+  },
+  {
+    name: "Objetos",
+    entries: [
+      { emoji: "\u{1F381}", keywords: ["presente", "brinde", "surpresa"] },
+      { emoji: "\u{1F389}", keywords: ["festa", "comemorar", "parabens", "parab\xE9ns"] },
+      { emoji: "\u{1F38A}", keywords: ["festa", "confete", "comemorar"] },
+      { emoji: "\u{1F382}", keywords: ["bolo", "aniversario", "anivers\xE1rio", "festa"] },
+      { emoji: "\u{1F4A1}", keywords: ["ideia", "ide\xEDa", "lampada", "l\xE2mpada", "dica"] },
+      { emoji: "\u{1F514}", keywords: ["sino", "aviso", "notificacao", "notifica\xE7\xE3o", "lembrete"] },
+      { emoji: "\u2B50", keywords: ["estrela", "favorito", "avaliacao", "avalia\xE7\xE3o"] },
+      { emoji: "\u{1F525}", keywords: ["fogo", "quente", "destaque", "top"] },
+      { emoji: "\u{1F680}", keywords: ["foguete", "rapido", "r\xE1pido", "lancamento", "lan\xE7amento"] },
+      { emoji: "\u{1F4BB}", keywords: ["computador", "notebook", "trabalho"] },
+      { emoji: "\u{1F4F7}", keywords: ["foto", "camera", "c\xE2mera", "imagem"] },
+      { emoji: "\u{1F697}", keywords: ["carro", "veiculo", "ve\xEDculo", "automovel", "autom\xF3vel"] },
+      { emoji: "\u2708\uFE0F", keywords: ["aviao", "avi\xE3o", "viagem", "voo"] }
+    ]
+  },
+  {
+    name: "Comida",
+    entries: [
+      { emoji: "\u{1F354}", keywords: ["hamburguer", "hamb\xFArguer", "lanche", "comida"] },
+      { emoji: "\u{1F355}", keywords: ["pizza", "comida", "lanche"] },
+      { emoji: "\u{1F35F}", keywords: ["batata", "frita", "lanche"] },
+      { emoji: "\u{1F37F}", keywords: ["pipoca", "cinema", "filme"] },
+      { emoji: "\u{1F35E}", keywords: ["pao", "p\xE3o", "padaria"] },
+      { emoji: "\u{1F9C0}", keywords: ["queijo", "comida"] },
+      { emoji: "\u{1F957}", keywords: ["salada", "saudavel", "saud\xE1vel", "comida"] },
+      { emoji: "\u2615", keywords: ["cafe", "caf\xE9", "bebida", "quente"] },
+      { emoji: "\u{1F37A}", keywords: ["cerveja", "bebida", "chopp"] },
+      { emoji: "\u{1F377}", keywords: ["vinho", "bebida", "taca", "ta\xE7a"] },
+      { emoji: "\u{1F942}", keywords: ["brinde", "comemorar", "champanhe"] },
+      { emoji: "\u{1F964}", keywords: ["refrigerante", "bebida", "copo"] }
+    ]
+  }
+];
+var ALL_ENTRIES = EMOJI_CATEGORIES.flatMap((category) => category.entries);
+function normalize(value) {
+  return value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "").trim();
+}
+function searchEmojis(query) {
+  const term = normalize(query);
+  if (!term) return ALL_ENTRIES;
+  return ALL_ENTRIES.filter((entry) => entry.keywords.some((keyword) => normalize(keyword).startsWith(term)));
+}
+
+// src/EmojiPicker.tsx
+import { useState as useState5, useCallback, useMemo as useMemo2 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_EMOJI_PICKER_LABELS = {
+  search: "Buscar emoji",
+  noResults: "Nenhum emoji encontrado"
+};
+var EmojiPicker = ({ onSelect, labels, className = "" }) => {
+  const searchLabel = labels?.search ?? DEFAULT_EMOJI_PICKER_LABELS.search;
+  const noResultsLabel = labels?.noResults ?? DEFAULT_EMOJI_PICKER_LABELS.noResults;
+  const [activeCategory, setActiveCategory] = useState5(0);
+  const [query, setQuery] = useState5("");
+  const handleSelect = useCallback(
+    (emoji) => {
+      onSelect(emoji);
+    },
+    [onSelect]
+  );
+  const isSearching = query.trim().length > 0;
+  const visibleEntries = useMemo2(
+    () => isSearching ? searchEmojis(query) : EMOJI_CATEGORIES[activeCategory].entries,
+    [isSearching, query, activeCategory]
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: `bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsx11("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "search",
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: searchLabel,
+        "aria-label": searchLabel,
+        className: "w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm outline-none focus:border-blue-500"
+      }
+    ) }),
+    isSearching ? null : /* @__PURE__ */ jsx11("div", { className: "flex border-b border-gray-200 overflow-x-auto", children: EMOJI_CATEGORIES.map((category, index) => /* @__PURE__ */ jsxs7(
+      "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.entries[0].emoji,
+          " ",
+          category.name
+        ]
+      },
+      category.name
+    )) }),
+    visibleEntries.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "px-3 py-6 text-center text-sm text-gray-500", children: noResultsLabel }) : /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto", children: visibleEntries.map((entry) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: () => handleSelect(entry.emoji),
+        className: "w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer",
+        "aria-label": entry.emoji,
+        title: entry.keywords[0],
+        children: entry.emoji
+      },
+      entry.emoji
+    )) })
+  ] });
+};
+
+// src/MessageComposer.tsx
+import { useState as useState6, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function applyQuickReplyVariables(template, variables = {}) {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave) => variables[chave] ?? "");
+}
+function resolveQuickReply(quickReply, variables = {}) {
+  return typeof quickReply.text === "function" ? quickReply.text(variables) : applyQuickReplyVariables(quickReply.text, variables);
+}
+var DEFAULT_MESSAGE_COMPOSER_LABELS = {
+  emoji: "Emoji",
+  attach: "Anexar",
+  send: "Enviar"
+};
+var DEFAULT_ACCEPTED_FILE_TYPES = [
+  "image/jpeg,image/png,image/webp",
+  "audio/aac,audio/mp4,audio/mpeg,audio/amr,audio/ogg",
+  "video/mp4,video/3gpp",
+  "application/pdf,text/plain,text/csv",
+  "application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+].join(",");
+var MessageComposer = ({
+  onSend,
+  onAttach,
+  value: externalValue,
+  onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
+  features,
+  placeholder = "Digite uma mensagem...",
+  maxLength,
+  disabled = false,
+  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  idleAction,
+  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] = useState6("");
+  const [showEmoji, setShowEmoji] = useState6(false);
+  const [attachments, setAttachments] = useState6([]);
+  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__ */ jsxs8("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), children: [
+      quickReplies && quickReplies.length > 0 && /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: cn(
+            "mb-2 flex flex-nowrap gap-1 overflow-x-auto px-1 sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            classNames?.quickReplies
+          ),
+          children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setText(resolveQuickReply(quickReply, quickReplyVariables));
+                textareaRef.current?.focus();
+              },
+              className: cn(
+                "whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400",
+                classNames?.quickReply
+              ),
+              children: quickReply.label
+            },
+            quickReply.key
+          ))
+        }
+      ),
+      attachments.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex gap-2 px-1 pb-2 overflow-x-auto", children: attachments.map((a, i) => /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+        a.previewUrl ? /* @__PURE__ */ jsx12("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx12("div", { className: "w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5", children: [
+          /* @__PURE__ */ jsx12("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+          /* @__PURE__ */ jsx12("polyline", { points: "14 2 14 8 20 8" })
+        ] }) }),
+        /* @__PURE__ */ jsx12("button", { onClick: () => removeAttachment(i), className: "absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs", children: "\u2715" })
+      ] }, i)) }),
+      /* @__PURE__ */ jsxs8("div", { className: cn("flex items-end gap-1.5 rounded-xl bg-white px-3 py-2", classNames?.field), children: [
+        showEmojiButton && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+          /* @__PURE__ */ jsx12("button", { onClick: () => setShowEmoji((v) => !v), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors", "aria-label": emojiLabel, children: /* @__PURE__ */ jsxs8("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx12("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+            /* @__PURE__ */ jsx12("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ jsx12("circle", { cx: "15", cy: "9", r: "0.5", fill: "currentColor" })
+          ] }) }),
+          showEmoji && /* @__PURE__ */ jsx12("div", { className: "absolute bottom-full left-0 mb-2 z-10", children: /* @__PURE__ */ jsx12(EmojiPicker, { onSelect: handleEmojiSelect }) })
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsxs8(Fragment2, { children: [
+          /* @__PURE__ */ jsx12("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
+          /* @__PURE__ */ jsx12("button", { onClick: () => fileInputRef.current?.click(), className: "w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors", "aria-label": attachLabel, children: /* @__PURE__ */ jsx12("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) })
+        ] }),
+        !canSend && idleAction ? /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0", children: idleAction }) : /* @__PURE__ */ jsx12(
+          "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__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx12("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+          }
+        )
+      ] }),
+      remaining !== null && /* @__PURE__ */ jsx12("div", { className: "flex justify-end mt-1 pr-1", children: /* @__PURE__ */ jsx12("span", { className: `text-xs ${remaining < 20 ? "text-red-500" : "text-gray-400"}`, children: remaining }) })
+    ] })
+  );
+};
+
+// src/AudioRecorderButton.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_AUDIO_RECORDER_BUTTON_LABELS = {
+  start: "Gravar \xE1udio",
+  stop: "Parar grava\xE7\xE3o",
+  unsupported: "Este navegador n\xE3o grava \xE1udio.",
+  denied: "Sem permiss\xE3o para usar o microfone.",
+  review: "Ou\xE7a antes de enviar",
+  send: "Enviar \xE1udio",
+  discard: "Descartar \xE1udio",
+  empty: "Nada foi captado pelo microfone."
+};
+var DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1e3;
+var RECORDING_FORMATS = [
+  { mimeType: "audio/ogg;codecs=opus", uploadMimeType: "audio/ogg", extension: "ogg" },
+  { mimeType: "audio/mp4", uploadMimeType: "audio/mp4", extension: "m4a" },
+  { mimeType: "audio/webm", uploadMimeType: "audio/webm", extension: "webm" }
+];
+function resolveRecordingFormat() {
+  if (typeof MediaRecorder === "undefined") return void 0;
+  if (typeof MediaRecorder.isTypeSupported !== "function") return RECORDING_FORMATS[0];
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType));
+}
+function AudioRecorderButton({
+  onRecorded,
+  onFailure,
+  onRecordingChange,
+  reviewBeforeSend = true,
+  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
+  labels,
+  disabled
+}) {
+  const labelOf = (key) => labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key];
+  const [isRecording, setIsRecording] = useState7(false);
+  const [pending, setPending] = useState7(void 0);
+  const recorderRef = useRef3(null);
+  const autoStopRef = useRef3(void 0);
+  const discard = useCallback3(() => {
+    setPending((current) => {
+      if (current) URL.revokeObjectURL(current.objectURL);
+      return void 0;
+    });
+  }, []);
+  useEffect2(() => discard, [discard]);
+  const confirm = useCallback3(() => {
+    if (!pending) return;
+    void onRecorded(pending.file);
+    discard();
+  }, [discard, onRecorded, pending]);
+  const stop = useCallback3(() => {
+    recorderRef.current?.stop();
+  }, []);
+  const start = useCallback3(async () => {
+    const format = resolveRecordingFormat();
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported);
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType });
+      const chunks = [];
+      recorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) chunks.push(event.data);
+      });
+      recorder.addEventListener("stop", () => {
+        stream.getTracks().forEach((track) => track.stop());
+        clearTimeout(autoStopRef.current);
+        setIsRecording(false);
+        onRecordingChange?.(false);
+        recorderRef.current = null;
+        const blob = new Blob(chunks, { type: format.uploadMimeType });
+        const file = new File([blob], `audio-${Date.now()}.${format.extension}`, {
+          type: format.uploadMimeType
+        });
+        if (blob.size === 0) {
+          onFailure?.(labelOf("empty"));
+          return;
+        }
+        if (!reviewBeforeSend) {
+          void onRecorded(file);
+          return;
+        }
+        setPending({ file, objectURL: URL.createObjectURL(blob) });
+      });
+      recorderRef.current = recorder;
+      recorder.start();
+      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds);
+      setIsRecording(true);
+      onRecordingChange?.(true);
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied);
+    }
+  }, [maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange, reviewBeforeSend]);
+  const toggleLabel = isRecording ? labelOf("stop") : labelOf("start");
+  return (
+    /* O painel de revisão flutua sobre o botão em vez de ocupar espaço na barra: o microfone mora
+       na caixa do botão de enviar, e empurrar o composer para cima a cada gravação faria a
+       conversa saltar. */
+    /* @__PURE__ */ jsxs9("div", { className: "relative flex-shrink-0", children: [
+      pending && /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          role: "group",
+          "aria-label": labelOf("review"),
+          className: "absolute bottom-full right-0 z-20 mb-2 flex w-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+          children: [
+            /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13(AudioPlayer, { src: pending.objectURL }) }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: discard,
+                title: labelOf("discard"),
+                "aria-label": labelOf("discard"),
+                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700",
+                children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx13("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx13("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: confirm,
+                title: labelOf("send"),
+                "aria-label": labelOf("send"),
+                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600",
+                children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || pending !== void 0,
+          onClick: () => isRecording ? stop() : void start(),
+          title: toggleLabel,
+          "aria-label": toggleLabel,
+          "aria-pressed": isRecording,
+          className: `flex h-10 w-10 items-center justify-center rounded-full transition-colors disabled:opacity-50 ${isRecording ? "animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600" : "text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+          children: isRecording ? /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx13("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
+            /* @__PURE__ */ jsx13("path", { d: "M19 11a7 7 0 0 1-14 0" }),
+            /* @__PURE__ */ jsx13("line", { x1: "12", y1: "18", x2: "12", y2: "22" })
+          ] })
+        }
+      )
+    ] })
+  );
+}
+
+// src/DateDivider.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function DateDivider({ iso, className, classNames }) {
+  const { dateDivider } = useConversationLocales();
+  return /* @__PURE__ */ jsx14("div", { className: cn("flex justify-center sticky top-0 z-10 my-2 pointer-events-none", classNames?.root, className), children: /* @__PURE__ */ jsx14(
+    "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 useCallback4, useEffect as useEffect3, useRef as useRef4, useState as useState8 } from "react";
+function useAsyncResource(fetcher, deps) {
+  const [data, setData] = useState8(void 0);
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(void 0);
+  const requestIdRef = useRef4(0);
+  const load = useCallback4(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);
+  useEffect3(() => {
+    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 useState9 } from "react";
+import { ArrowUpDown, Bot, Download, Eye, Users } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs10 } 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] = useState9("");
+  const [sourceFilter, setSourceFilter] = useState9(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState9("desc");
+  const [page, setPage] = useState9(1);
+  const [selectedIds, setSelectedIds] = useState9([]);
+  const [archiveError, setArchiveError] = useState9(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__ */ jsx15("div", { className: cn("border-b", classNames?.root, className), children: /* @__PURE__ */ jsxs10("section", { className: cn("px-4 py-3", classNames?.body), children: [
+    /* @__PURE__ */ jsx15("p", { className: cn("mb-2 text-sm font-medium", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs10("div", { className: cn("mb-2 flex flex-wrap items-center gap-2 border-b pb-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx15(
+        "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__ */ jsxs10(
+        "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__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx15("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs10(
+        "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__ */ jsx15(ArrowUpDown, { size: 14 }),
+            sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
+          ]
+        }
+      ),
+      hasFilters ? /* @__PURE__ */ jsx15(
+        "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__ */ jsx15("p", { className: cn("text-xs text-gray-500", classNames?.status), children: labels.loading }) : null,
+    error ? /* @__PURE__ */ jsx15("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__ */ jsx15("p", { className: cn("text-xs text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    canArchive && documents.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("mb-2 flex flex-wrap items-center gap-3 text-xs", classNames?.selectionBar), children: [
+      /* @__PURE__ */ jsxs10("label", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "checkbox",
+            checked: allOnPageSelected,
+            onChange: toggleAllOnPage,
+            className: cn(classNames?.checkbox)
+          }
+        ),
+        labels.selectAll
+      ] }),
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
+      archiveError ? /* @__PURE__ */ jsx15("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx15("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__ */ jsxs10(
+        "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__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              canArchive ? /* @__PURE__ */ jsx15(
+                "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__ */ jsx15(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs10(
+                  "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__ */ jsx15(SourceIcon, { size: 11 }),
+                      isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  "div",
+                  {
+                    className: cn("truncate text-sm font-medium", classNames?.filename),
+                    title: document2.filename,
+                    children: document2.filename
+                  }
+                ),
+                /* @__PURE__ */ jsxs10("div", { className: cn("text-xs text-gray-500 dark:text-gray-400", classNames?.meta), children: [
+                  formatDateTime(document2.linkedAt),
+                  " \xB7 ",
+                  formatFileSize(document2.sizeBytes)
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15(Eye, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15(Download, { size: 14 })
+                }
+              )
+            ] })
+          ]
+        },
+        document2.id
+      );
+    }) }),
+    total > perPage ? /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cn(
+          "mt-2 flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700",
+          classNames?.pagination
+        ),
+        children: [
+          /* @__PURE__ */ jsx15("span", { className: "text-gray-400", children: labels.total(total) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage(page - 1),
+                disabled: page <= 1,
+                "aria-label": labels.sortOldest,
+                className: "cv-header-icon disabled:opacity-40",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx15("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+            /* @__PURE__ */ jsx15(
+              "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 useEffect4, useState as useState10 } 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 jsx16, jsxs as jsxs11 } 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] = useState10("");
+  const [sourceFilter, setSourceFilter] = useState10(DOCUMENT_SOURCE_FILTER.ALL);
+  const [sortDirection, setSortDirection] = useState10("desc");
+  const [page, setPage] = useState10(1);
+  const [documents, setDocuments] = useState10([]);
+  const [total, setTotal] = useState10(0);
+  const [loading, setLoading] = useState10(false);
+  const [failed, setFailed] = useState10(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;
+  useEffect4(() => {
+    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__ */ jsxs11("div", { className: cn("space-y-3", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx16("h2", { className: cn("text-lg font-semibold", classNames?.title), children: labels.title }),
+    /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.filters), children: [
+      /* @__PURE__ */ jsx16(
+        "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__ */ jsxs11(
+        "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__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.ALL, children: labels.sourceFilterAll }),
+            /* @__PURE__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.CUSTOMER, children: labels.sourceFilterCustomer }),
+            /* @__PURE__ */ jsx16("option", { value: DOCUMENT_SOURCE_FILTER.TEAM, children: labels.sourceFilterTeam })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs11(
+        "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__ */ jsx16(ArrowUpDown2, { size: 14 }),
+            sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest
+          ]
+        }
+      ),
+      hasFilters ? /* @__PURE__ */ jsx16(
+        "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__ */ jsx16("p", { className: cn("text-sm text-gray-500", classNames?.status), children: labels.loading }) : null,
+    failed ? /* @__PURE__ */ jsx16("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__ */ jsx16("p", { className: cn("text-sm text-gray-500", classNames?.status), children: hasFilters ? labels.noResults : labels.empty }) : null,
+    /* @__PURE__ */ jsx16("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__ */ jsxs11(
+        "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__ */ jsxs11("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ jsx16(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
+              /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx16("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
+                /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
+                  /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx16(SourceIcon, { size: 11 }),
+                    isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam
+                  ] }),
+                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx16("span", { children: formatDateTime(document2.linkedAt) }),
+                  /* @__PURE__ */ jsx16("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsx16("span", { children: formatFileSize(document2.sizeBytes) })
+                ] })
+              ] })
+            ] }),
+            onOpenConversation ? /* @__PURE__ */ jsxs11(
+              "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__ */ jsx16(MessageSquare, { size: 12 }),
+                  formatPhone(document2.conversationId)
+                ]
+              }
+            ) : /* @__PURE__ */ jsx16("span", { className: cn("shrink-0 text-xs text-gray-500", classNames?.conversationLink), children: formatPhone(document2.conversationId) }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "inline"),
+                  title: labels.view,
+                  "aria-label": `${labels.view}: ${document2.filename}`,
+                  className: "cv-header-icon",
+                  children: /* @__PURE__ */ jsx16(Eye2, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleOpen(document2.id, "attachment"),
+                  title: labels.download,
+                  "aria-label": `${labels.download}: ${document2.filename}`,
+                  className: "cv-header-icon",
+                  children: /* @__PURE__ */ jsx16(Download2, { size: 14 })
+                }
+              )
+            ] })
+          ]
+        },
+        `${document2.conversationId}:${document2.id}`
+      );
+    }) }),
+    total > perPage ? /* @__PURE__ */ jsxs11("div", { className: cn("flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700", classNames?.pagination), children: [
+      /* @__PURE__ */ jsx16("span", { className: "text-gray-400", children: labels.total(total) }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            onClick: () => setPage(page - 1),
+            disabled: page <= 1,
+            className: "cv-header-icon disabled:opacity-40",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx16("span", { className: "text-gray-500", children: labels.page(page, lastPage) }),
+        /* @__PURE__ */ jsx16(
+          "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,
+  DEFAULT_INTERACTIVE_MESSAGE_LABELS,
+  InteractiveMessage,
+  createMediaUrlResolver,
+  ConversationsProvider,
+  useConversations,
+  MessageBubble,
+  ConversationWallpaper,
+  EMOJI_CATEGORIES,
+  searchEmojis,
+  DEFAULT_EMOJI_PICKER_LABELS,
+  EmojiPicker,
+  applyQuickReplyVariables,
+  resolveQuickReply,
+  DEFAULT_MESSAGE_COMPOSER_LABELS,
+  DEFAULT_ACCEPTED_FILE_TYPES,
+  MessageComposer,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+  AudioRecorderButton,
+  DateDivider,
+  formatPhone,
+  phoneCountryFlag,
+  phoneInitials,
+  useAsyncResource,
+  conversationsOf,
+  totalOf,
+  useConversationDocuments,
+  DOCUMENT_SOURCE_FILTER,
+  DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
+  ConversationDocumentsPanel,
+  DEFAULT_DOCUMENTS_LIBRARY_LABELS,
+  DocumentsLibrary
+};