@fayz-ai/plugin-conversations 0.17.1 → 0.19.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import * as React11 from 'react';
-import React11__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { Loader2, MessageSquare, AlertTriangle, Pause, Play, Send, RefreshCw, Plus, Clock, CheckCircle2, Check, ShieldCheck, ShieldAlert, QrCode, Zap, ExternalLink, SquarePen, Globe, Mail, Instagram, Phone, Search, User, Inbox, CheckCheck, ChevronLeft, Archive, PanelRight, X, MapPin, Tag, StickyNote, Link2, MoreVertical, Snowflake, Sun, Flame, Building2 } from 'lucide-react';
+import * as React12 from 'react';
+import React12__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Loader2, MessageSquare, AlertTriangle, Pause, Play, Send, RefreshCw, Plus, Clock, CheckCircle2, Check, ShieldCheck, ShieldAlert, QrCode, Zap, ExternalLink, SquarePen, Globe, Mail, Instagram, Phone, Search, User, Inbox, CheckCheck, ChevronLeft, Archive, PanelRight, X, MapPin, Tag, StickyNote, Link2, MoreVertical, Snowflake, Sun, Flame, Building2, UserRound, Copy, FileText, Download } from 'lucide-react';
 import { toast, Button, Input, defineKpiWidget, defineTableWidget, PageHeaderActions, cn, Badge, FilterChip, Skeleton, KpiCard, TableWidget } from '@fayz-ai/ui';
 import { createConnectionStore, connectionRuns, connectionStatus, getActiveTenantId, getSupabaseClientOptional, useActiveTenantId, registerTranslations, useTranslation, countByTenant, CONNECTOR_RUNTIME_TOKEN_HEADER, connectorRuntimeToken, errorMessage } from '@fayz-ai/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -211,12 +211,12 @@ function Bar({ c }) {
   ] });
 }
 function CampaignsView() {
-  const [rows, setRows] = React11__default.useState(null);
-  const [templates, setTemplates] = React11__default.useState([]);
-  const [providers, setProviders] = React11__default.useState([]);
-  const [running, setRunning] = React11__default.useState(null);
-  const stop = React11__default.useRef(false);
-  const load = React11__default.useCallback(async () => {
+  const [rows, setRows] = React12__default.useState(null);
+  const [templates, setTemplates] = React12__default.useState([]);
+  const [providers, setProviders] = React12__default.useState([]);
+  const [running, setRunning] = React12__default.useState(null);
+  const stop = React12__default.useRef(false);
+  const load = React12__default.useCallback(async () => {
     try {
       const [c, t, p] = await Promise.all([
         campaignsApi.list(),
@@ -231,7 +231,7 @@ function CampaignsView() {
       setRows([]);
     }
   }, []);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     void load();
   }, [load]);
   const active = providers.find((p) => p.isActive);
@@ -485,9 +485,9 @@ function avisarNoSistema(titulo, corpo, tag) {
 }
 function InboxWatcher({ label, route = "/conversations", section = "main", position = 1 }) {
   const tenantId = useActiveTenantId();
-  const [naoLidas, setNaoLidas] = React11.useState(0);
-  const podeTocar = React11.useRef(false);
-  React11.useEffect(() => {
+  const [naoLidas, setNaoLidas] = React12.useState(0);
+  const podeTocar = React12.useRef(false);
+  React12.useEffect(() => {
     const liberar = () => {
       podeTocar.current = true;
       void pedirPermissao();
@@ -499,7 +499,7 @@ function InboxWatcher({ label, route = "/conversations", section = "main", posit
       for (const ev of ["pointerdown", "keydown", "touchstart"]) window.removeEventListener(ev, liberar);
     };
   }, []);
-  const contar = React11.useCallback(async () => {
+  const contar = React12.useCallback(async () => {
     const supabase = getSupabaseClientOptional();
     if (!supabase) return;
     const { data } = await supabase.from(T.conversations).select("id, status, last_message_direction, unread_count").eq("status", "open");
@@ -511,10 +511,10 @@ function InboxWatcher({ label, route = "/conversations", section = "main", posit
     })).length;
     setNaoLidas(n);
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     void contar();
   }, [contar]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!tenantId) return;
     return assinarChegada(tenantId, ({ conversationId }) => {
       void contar();
@@ -549,14 +549,14 @@ function slots(body) {
   return found.size;
 }
 function TemplatesView() {
-  const [mine, setMine] = React11__default.useState(null);
-  const [theirs, setTheirs] = React11__default.useState([]);
-  const [providers, setProviders] = React11__default.useState([]);
-  const [busy, setBusy] = React11__default.useState(null);
-  const [draft, setDraft] = React11__default.useState({ name: "", body: "", variables: "" });
+  const [mine, setMine] = React12__default.useState(null);
+  const [theirs, setTheirs] = React12__default.useState([]);
+  const [providers, setProviders] = React12__default.useState([]);
+  const [busy, setBusy] = React12__default.useState(null);
+  const [draft, setDraft] = React12__default.useState({ name: "", body: "", variables: "" });
   const active = providers.find((p) => p.isActive);
   const supportsTemplates = active?.capabilities?.templates !== false;
-  const load = React11__default.useCallback(async () => {
+  const load = React12__default.useCallback(async () => {
     try {
       const [m, p] = await Promise.all([campaignsApi.templates(), providersApi.list()]);
       setMine(m);
@@ -566,7 +566,7 @@ function TemplatesView() {
       setMine([]);
     }
   }, []);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     void load();
   }, [load]);
   const sync = async () => {
@@ -757,8 +757,8 @@ function TemplatesView() {
 var DEFAULT_CONVERSATIONS_CONFIG = {
   contactKind: "contact"
 };
-var StoreContext = React11__default.createContext(null);
-var ConfigContext = React11__default.createContext(DEFAULT_CONVERSATIONS_CONFIG);
+var StoreContext = React12__default.createContext(null);
+var ConfigContext = React12__default.createContext(DEFAULT_CONVERSATIONS_CONFIG);
 function ConversationsContextProvider({
   store: store2,
   config = DEFAULT_CONVERSATIONS_CONFIG,
@@ -767,12 +767,12 @@ function ConversationsContextProvider({
   return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store2, children: /* @__PURE__ */ jsx(ConfigContext.Provider, { value: config, children }) });
 }
 function useConversationsStore(selector) {
-  const store2 = React11__default.useContext(StoreContext);
+  const store2 = React12__default.useContext(StoreContext);
   if (!store2) throw new Error("useConversationsStore must be used within ConversationsPage");
   return useStore(store2, selector);
 }
 function useConversationsConfig() {
-  return React11__default.useContext(ConfigContext);
+  return React12__default.useContext(ConfigContext);
 }
 var CHANNEL_ICON = {
   sms: Phone,
@@ -789,10 +789,10 @@ var CHANNEL_ACCENT = {
   webchat: { color: "#f59e0b", badge: "bg-[#f59e0b]/12 text-[#b45309] dark:text-[#fcd34d]" }
 };
 function useMediaQuery(query) {
-  const [matches, setMatches] = React11__default.useState(
+  const [matches, setMatches] = React12__default.useState(
     () => typeof window !== "undefined" && window.matchMedia(query).matches
   );
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
@@ -881,7 +881,7 @@ function ConversationList({ className }) {
     setLeadOwnerFilter,
     setSearch
   } = useConversationsStore((s) => s);
-  const donos = React11__default.useMemo(() => {
+  const donos = React12__default.useMemo(() => {
     const vistos = /* @__PURE__ */ new Map();
     for (const c of conversations) {
       if (c.leadOwnerId) vistos.set(c.leadOwnerId, c.leadOwnerName ?? c.leadOwnerId);
@@ -1016,9 +1016,9 @@ function ConversationList({ className }) {
   ] });
 }
 function useSendWindow(conversationId) {
-  const [row, setRow] = React11__default.useState(null);
-  const [providers, setProviders] = React11__default.useState(null);
-  React11__default.useEffect(() => {
+  const [row, setRow] = React12__default.useState(null);
+  const [providers, setProviders] = React12__default.useState(null);
+  React12__default.useEffect(() => {
     let alive = true;
     providersApi.list().then((p) => {
       if (alive) setProviders(p);
@@ -1029,7 +1029,7 @@ function useSendWindow(conversationId) {
       alive = false;
     };
   }, []);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     let alive = true;
     if (!conversationId) {
       setRow(null);
@@ -1050,7 +1050,7 @@ function useSendWindow(conversationId) {
     };
   }, [conversationId]);
   const provider = (providers ?? []).find((p) => p.isActive);
-  const mode = React11__default.useMemo(() => {
+  const mode = React12__default.useMemo(() => {
     if (!provider) return { kind: "blocked", reason: "no_provider" };
     if (!provider.capabilities?.requires_template) {
       return { kind: "free", until: null, minutesLeft: null };
@@ -1125,10 +1125,10 @@ function DeliveryMark({ m }) {
   ] });
 }
 function MessageMenu({ m }) {
-  const [open, setOpen] = React11__default.useState(false);
-  const [detail, setDetail] = React11__default.useState(null);
-  const [loading, setLoading] = React11__default.useState(false);
-  const [err, setErr] = React11__default.useState(null);
+  const [open, setOpen] = React12__default.useState(false);
+  const [detail, setDetail] = React12__default.useState(null);
+  const [loading, setLoading] = React12__default.useState(false);
+  const [err, setErr] = React12__default.useState(null);
   async function load() {
     setOpen(true);
     if (!m.providerMessageId) return;
@@ -1199,6 +1199,180 @@ function MessageMenu({ m }) {
     ] }) })
   ] });
 }
+var COM_ARQUIVO = /* @__PURE__ */ new Set(["image", "video", "audio", "document", "sticker"]);
+function temArquivo(m) {
+  return !!m.mediaPath && COM_ARQUIVO.has(String(m.messageType));
+}
+function useUrlAssinada(m, visivel) {
+  const [url, setUrl] = React12.useState(null);
+  const [erro, setErro] = React12.useState(false);
+  React12.useEffect(() => {
+    if (!visivel || url || erro || !temArquivo(m)) return;
+    let vivo = true;
+    (async () => {
+      try {
+        const sb = getSupabaseClientOptional();
+        const { data, error } = await sb.functions.invoke("conversations-provider", {
+          body: { tenantId: getActiveTenantId(), action: "media_url", messageId: m.id }
+        });
+        if (error || data?.error) throw new Error("falhou");
+        if (vivo && data?.url) setUrl(data.url);
+        else if (vivo) setErro(true);
+      } catch {
+        if (vivo) setErro(true);
+      }
+    })();
+    return () => {
+      vivo = false;
+    };
+  }, [visivel, m.id, url, erro]);
+  return { url, erro };
+}
+function tamanho(bytes) {
+  if (!bytes || bytes <= 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function duracao(seg) {
+  if (!seg || seg <= 0) return "";
+  const m = Math.floor(seg / 60);
+  const s = Math.floor(seg % 60);
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+function MediaBubble({ m, outbound }) {
+  const ref = React12.useRef(null);
+  const [visivel, setVisivel] = React12.useState(false);
+  const { url, erro } = useUrlAssinada(m, visivel);
+  React12.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setVisivel(true);
+      return;
+    }
+    const obs = new IntersectionObserver((entradas) => {
+      if (entradas.some((e) => e.isIntersecting)) {
+        setVisivel(true);
+        obs.disconnect();
+      }
+    }, { rootMargin: "200px" });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+  const tipo = String(m.messageType);
+  const p = m.payload ?? {};
+  const legenda = p.caption ?? null;
+  const rotulo = /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: m.body });
+  if (erro) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+      rotulo,
+      /* @__PURE__ */ jsx("p", { className: "text-xs opacity-60", children: "O arquivo n\xE3o carregou." })
+    ] });
+  }
+  if (!url) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+      rotulo,
+      /* @__PURE__ */ jsx("div", { className: "h-1 w-24 animate-pulse rounded bg-current opacity-20" })
+    ] });
+  }
+  if (tipo === "image" || tipo === "sticker") {
+    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: legenda ?? (tipo === "sticker" ? "Figurinha" : "Imagem recebida"),
+          className: tipo === "sticker" ? "max-h-32 w-auto" : "max-h-80 w-auto rounded-lg",
+          loading: "lazy"
+        }
+      ) }),
+      legenda ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: legenda }) : null
+    ] });
+  }
+  if (tipo === "video") {
+    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("video", { src: url, controls: true, preload: "metadata", className: "max-h-80 w-auto rounded-lg" }),
+      legenda ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: legenda }) : null
+    ] });
+  }
+  if (tipo === "audio") {
+    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("audio", { src: url, controls: true, preload: "metadata", className: "h-9 w-64 max-w-full" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs opacity-60", children: [
+        p.ptt ? "Mensagem de voz" : "\xC1udio",
+        duracao(p.seconds) ? ` \xB7 ${duracao(p.seconds)}` : ""
+      ] })
+    ] });
+  }
+  const nome = p.fileName ?? "Documento";
+  return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noreferrer",
+        download: nome,
+        className: `flex items-center gap-2 rounded-lg border p-2 ${outbound ? "border-white/30" : "border-black/10"}`,
+        children: [
+          /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 shrink-0 opacity-70" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm", children: nome }),
+            tamanho(p.fileLength) ? /* @__PURE__ */ jsx("span", { className: "block text-xs opacity-60", children: tamanho(p.fileLength) }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 shrink-0 opacity-70" })
+        ]
+      }
+    ),
+    legenda ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: legenda }) : null
+  ] });
+}
+function ContactCard({ contacts, outbound }) {
+  const [copied, setCopied] = React12__default.useState(null);
+  const copy = (value) => {
+    void navigator.clipboard?.writeText(value);
+    setCopied(value);
+    window.setTimeout(() => setCopied((c) => c === value ? null : c), 1500);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: contacts.map((c, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2.5 rounded-xl px-2.5 py-2",
+        outbound ? "bg-white/15" : "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(UserRound, { className: cn("mt-0.5 h-4 w-4 shrink-0", outbound ? "text-white/80" : "text-muted-foreground") }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: c.name }),
+          c.phones.map((p) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => copy(p.display),
+              className: cn(
+                "group/phone mt-0.5 flex items-center gap-1.5 text-left text-[13px] tabular-nums",
+                outbound ? "text-white/90 hover:text-white" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                p.display,
+                copied === p.display ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 opacity-0 transition-opacity group-hover/phone:opacity-100" })
+              ]
+            },
+            p.digits
+          ))
+        ] })
+      ]
+    },
+    `${c.name}-${i}`
+  )) });
+}
+function MessageBody({ m, outbound }) {
+  const contacts = m.messageType === "contact" ? m.payload?.contacts ?? [] : [];
+  if (contacts.length > 0) return /* @__PURE__ */ jsx(ContactCard, { contacts, outbound });
+  if (temArquivo(m)) return /* @__PURE__ */ jsx(MediaBubble, { m, outbound });
+  return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: m.body });
+}
 function buildRows(messages) {
   const rows = [];
   let lastDay = "";
@@ -1219,14 +1393,14 @@ function buildRows(messages) {
 function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }) {
   const t = useTranslation();
   const { messages, sending, send, setStatus, refreshMessages } = useConversationsStore((s) => s);
-  const [draft, setDraft] = React11__default.useState("");
+  const [draft, setDraft] = React12__default.useState("");
   const win = useSendWindow(selected.id);
   const canType = win.mode.kind === "free";
-  const threadRef = React11__default.useRef(null);
-  React11__default.useEffect(() => {
+  const threadRef = React12__default.useRef(null);
+  React12__default.useEffect(() => {
     threadRef.current?.scrollTo({ top: threadRef.current.scrollHeight, behavior: "smooth" });
   }, [messages.length, selected.id]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (!selected.id) return;
     let timer = null;
     const start = () => {
@@ -1255,7 +1429,7 @@ function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }
     await send(body);
   }
   const accent = CHANNEL_ACCENT[selected.channel];
-  const rows = React11__default.useMemo(() => buildRows(messages), [messages]);
+  const rows = React12__default.useMemo(() => buildRows(messages), [messages]);
   return /* @__PURE__ */ jsxs("section", { className: cn("flex min-w-0 flex-1 flex-col bg-muted/20", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-2.5 md:px-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 md:gap-3", children: [
@@ -1317,7 +1491,7 @@ function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }
                   ),
                   style: outbound ? { backgroundColor: failed ? "hsl(var(--destructive))" : accent.color } : void 0,
                   children: [
-                    /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: m.body }),
+                    /* @__PURE__ */ jsx(MessageBody, { m, outbound }),
                     /* @__PURE__ */ jsxs("div", { className: cn("mt-0.5 flex items-center justify-end gap-1 text-[10px]", outbound ? "text-white/70" : "text-muted-foreground"), children: [
                       new Date(m.at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
                       /* @__PURE__ */ jsx(DeliveryMark, { m })
@@ -1367,8 +1541,8 @@ var TEMP = {
   cold: { icon: Snowflake, cls: "bg-info-soft text-info-soft-foreground", label: "Frio" }
 };
 function LeadCard({ personId, handle }) {
-  const [lead, setLead] = React11__default.useState(void 0);
-  React11__default.useEffect(() => {
+  const [lead, setLead] = React12__default.useState(void 0);
+  React12__default.useEffect(() => {
     let alive = true;
     const sb = getSupabaseClientOptional();
     const tenantId = getActiveTenantId();
@@ -1535,14 +1709,14 @@ function NewConversationPanel({
   const create = useConversationsStore((s) => s.create);
   const config = useConversationsConfig();
   const guardConversations = useLimitGuard("conversations_month");
-  const [channel, setChannel] = React11__default.useState("whatsapp");
-  const [contact, setContact] = React11__default.useState(null);
-  const [typedHandle, setTypedHandle] = React11__default.useState("");
-  const [creatingContact, setCreatingContact] = React11__default.useState(false);
-  const [firstMessage, setFirstMessage] = React11__default.useState("");
-  const [submitting, setSubmitting] = React11__default.useState(false);
-  const [pickerKey, setPickerKey] = React11__default.useState(0);
-  React11__default.useEffect(() => {
+  const [channel, setChannel] = React12__default.useState("whatsapp");
+  const [contact, setContact] = React12__default.useState(null);
+  const [typedHandle, setTypedHandle] = React12__default.useState("");
+  const [creatingContact, setCreatingContact] = React12__default.useState(false);
+  const [firstMessage, setFirstMessage] = React12__default.useState("");
+  const [submitting, setSubmitting] = React12__default.useState(false);
+  const [pickerKey, setPickerKey] = React12__default.useState(0);
+  React12__default.useEffect(() => {
     if (open) {
       setChannel("whatsapp");
       setContact(null);
@@ -1661,9 +1835,9 @@ function useCaixaAoVivo() {
   const load = useConversationsStore((s) => s.load);
   const refreshMessages = useConversationsStore((s) => s.refreshMessages);
   const selectedId = useConversationsStore((s) => s.selectedId);
-  const abertoRef = React11.useRef(selectedId);
+  const abertoRef = React12.useRef(selectedId);
   abertoRef.current = selectedId;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!tenantId) return;
     return assinarChegada(tenantId, ({ conversationId }) => {
       void load();
@@ -1678,10 +1852,10 @@ function InboxView() {
   const { conversations, selectedId, deselect } = useConversationsStore((s) => s);
   useCaixaAoVivo();
   const isWidePanel = useMediaQuery("(min-width: 1280px)");
-  const [panelOpen, setPanelOpen] = React11__default.useState(false);
-  const [newOpen, setNewOpen] = React11__default.useState(false);
+  const [panelOpen, setPanelOpen] = React12__default.useState(false);
+  const [newOpen, setNewOpen] = React12__default.useState(false);
   const selected = conversations.find((c) => c.id === selectedId) ?? null;
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     setPanelOpen(isWidePanel);
   }, [isWidePanel]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1754,7 +1928,7 @@ function requestedContact() {
   }
 }
 function ConversationsPage({ store: store2, config }) {
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     const wanted = requestedContact();
     if (!wanted) {
       void store2.getState().load();
@@ -2078,7 +2252,13 @@ function mapMessage(r) {
     at: r.at ?? "",
     author: r.author ?? "",
     deliveryStatus: r.delivery_status ?? null,
-    providerMessageId: r.provider_message_id ?? null
+    providerMessageId: r.provider_message_id ?? null,
+    // NULL stays null rather than defaulting to 'text'. A row written before
+    // migration 012 genuinely does not know what it was, and the rows that most
+    // need saying so are the empty ones that a 'text' default would call fine.
+    messageType: r.message_type ?? null,
+    payload: r.payload ?? null,
+    mediaPath: r.media_path ?? null
   };
 }
 function createSupabaseConversationsProvider(config) {
@@ -2837,22 +3017,22 @@ function NumberRow({ n }) {
   ] });
 }
 function WhatsAppProviders() {
-  const [rows, setRows] = React11__default.useState(null);
-  const [draft, setDraft] = React11__default.useState({});
-  const [busy, setBusy] = React11__default.useState(null);
-  const [numbers, setNumbers] = React11__default.useState({});
-  const [qr, setQr] = React11__default.useState(null);
-  const load = React11__default.useCallback(async () => {
+  const [rows, setRows] = React12__default.useState(null);
+  const [draft, setDraft] = React12__default.useState({});
+  const [busy, setBusy] = React12__default.useState(null);
+  const [numbers, setNumbers] = React12__default.useState({});
+  const [qr, setQr] = React12__default.useState(null);
+  const load = React12__default.useCallback(async () => {
     try {
       setRows(await providersApi.list());
     } catch {
       setRows([]);
     }
   }, []);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     void load();
   }, [load]);
-  const byId = React11__default.useMemo(
+  const byId = React12__default.useMemo(
     () => Object.fromEntries((rows ?? []).map((r) => [r.provider, r])),
     [rows]
   );
@@ -3087,9 +3267,9 @@ function ChannelRow({ account }) {
 }
 function ConversationsGeneralSettings() {
   const t = useTranslation();
-  const [channels, setChannels] = React11.useState(null);
-  const [failed, setFailed] = React11.useState(false);
-  React11.useEffect(() => {
+  const [channels, setChannels] = React12.useState(null);
+  const [failed, setFailed] = React12.useState(false);
+  React12.useEffect(() => {
     let cancelled = false;
     listMessagingChannels().then((rows) => {
       if (!cancelled) setChannels(rows);
@@ -5483,6 +5663,134 @@ END $$;
 COMMENT ON FUNCTION public.plg_conversations_anunciar_chegada() IS
   'Toca a campainha no t\xF3pico \`conversas:<tenant>\` \u2014 s\xF3 o id da conversa. O conte\xFAdo \xE9 lido da tabela, com RLS (011).';
 `;
+var MIGRATION_012_A_RICH_MESSAGE_KEEPS_ITS_SHAPE = `-- ---------------------------------------------------------------------------
+-- 012_a_rich_message_keeps_its_shape.sql
+--
+-- \u2500\u2500 what was lost, and how \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- \`plg_conversation_messages\` has exactly one content column: \`body text\`. A
+-- WhatsApp message that is not text therefore arrives flattened to whatever
+-- string the ingest could make of it \u2014 and when the ingest could make none, to
+-- the empty string, which renders as an empty bubble.
+--
+-- On 2026-09-22 a lead sent his finance director's contact card. It stored as
+-- \`body = ''\`. He then sent a screenshot of the same card; that stored as
+-- \`body = ''\` too. The fact the conversation existed to obtain \u2014 a name and a
+-- phone number \u2014 was in the payload both times and in the row neither time.
+--
+-- Recovering it meant going back to the Evolution instance and reading the
+-- provider's own copy. That worked, but it is not a recovery path: Evolution
+-- prunes, the instance is local-only, and a row that needs a second system to
+-- be legible is not a record.
+--
+-- \u2500\u2500 the two columns \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- \`message_type\` names what the provider sent \u2014 text, contact, image, audio,
+-- document, sticker, location, reaction, unknown. The inbox needs it to choose
+-- a bubble, and \`unknown\` is the one that makes the NEXT gap visible in a query
+-- instead of in a complaint.
+--
+-- \`payload\` keeps the part that does not survive flattening: the vCard's parsed
+-- name and numbers, a media mimetype and size, a location's coordinates. Not
+-- the whole provider envelope \u2014 that carries decryption keys and a base64
+-- thumbnail, neither of which belongs in a row that every member of the tenant
+-- can read.
+--
+-- Deliberately NOT stored here: delivery status. It changes after the fact \u2014
+-- sent, delivered, read \u2014 and \`conversations-provider\`'s \`message_detail\` reads
+-- it live for that reason. \`payload\` is the shape of the message, which does
+-- not change once it arrives.
+--
+-- \u2500\u2500 why both are nullable, and nothing is backfilled \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- Every row written before this migration has neither, and no default can
+-- invent them: \`message_type\` would have to guess, and guessing 'text' for the
+-- three empty bubbles already in the table would assert something false about
+-- exactly the rows this exists to fix. A reader that treats NULL as "written
+-- before 012" is correct; a reader that treats '' as text is the bug.
+--
+-- Table-level \`GRANT ALL ... TO authenticated\` already covers new columns, and
+-- the four tenant policies are row-scoped, so neither needs restating.
+--
+-- Idempotent and replay-safe.
+-- ---------------------------------------------------------------------------
+
+ALTER TABLE public.plg_conversation_messages
+  ADD COLUMN IF NOT EXISTS message_type text,
+  ADD COLUMN IF NOT EXISTS payload jsonb;
+
+COMMENT ON COLUMN public.plg_conversation_messages.message_type IS
+  'What the provider sent: text, contact, image, video, audio, document, sticker, location, reaction, unknown. NULL means the row predates 012 (#504).';
+
+COMMENT ON COLUMN public.plg_conversation_messages.payload IS
+  'The structured remainder that \`body\` cannot hold \u2014 parsed vCards, media metadata, coordinates. Never credentials, thumbnails or decryption keys; never delivery status, which is read live (#504).';
+`;
+var MIGRATION_013_A_MIDIA_FICA_CONOSCO = `-- ---------------------------------------------------------------------------
+-- 013_a_midia_fica_conosco.sql
+--
+-- \u2500\u2500 o que a 012 resolveu, e o que ela n\xE3o resolveu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- A 012 fez a mensagem que n\xE3o \xE9 texto parar de chegar como bolha vazia:
+-- \`message_type\` diz que \xE9 imagem, \`payload\` guarda mimetype, tamanho e
+-- dura\xE7\xE3o. Funcionou \u2014 um \xE1udio de 23 segundos entrou classificado como
+-- \`audio\`, \`ptt: true\`, \`audio/ogg; codecs=opus\`, 55.825 bytes.
+--
+-- E a tela mostra \`[\xE1udio]\`. Porque saber QUE existe um arquivo n\xE3o \xE9 ter o
+-- arquivo. Nada no banco aponta para bytes nenhuns: o WhatsApp entrega m\xEDdia
+-- cifrada num CDN pr\xF3prio, e quem decifra \xE9 o provedor.
+--
+-- \u2500\u2500 por que uma coluna, e n\xE3o um campo no payload \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- A 012 escreveu que \`payload\` \xE9 "a forma da mensagem, que n\xE3o muda depois que
+-- ela chega". Onde o arquivo foi parar \xE9 decidido DEPOIS \u2014 no upload, que pode
+-- falhar, ser refeito, ou ainda n\xE3o ter acontecido. Enfiar isso no \`payload\`
+-- contradiz a \xFAnica frase que diz quando \`payload\` pode ser lido sem medo.
+--
+-- Em coluna, a pergunta que importa vira consulta:
+--
+--   SELECT count(*) FROM plg_conversation_messages
+--    WHERE message_type IN ('image','video','audio','document','sticker')
+--      AND media_path IS NULL;
+--
+-- "quanta m\xEDdia eu recebi e n\xE3o guardei" \u2014 que num campo de JSON seria uma
+-- varredura e aqui \xE9 um \xEDndice.
+--
+-- \u2500\u2500 por que guardar, em vez de buscar no provedor quando algu\xE9m abrir \u2500\u2500\u2500
+--
+-- A Evolution decifra sob demanda, e seria mais barato n\xE3o copiar nada. Mas ela
+-- \xE9 local-only, poda o que \xE9 antigo, e a inst\xE2ncia roda numa m\xE1quina que nem
+-- sempre est\xE1 de p\xE9. Essa era exatamente a obje\xE7\xE3o da 012 contra depender dela
+-- para ler um vCard: uma linha que precisa de um segundo sistema para ser
+-- leg\xEDvel n\xE3o \xE9 registro. Vale igual para os bytes.
+--
+-- O destino \xE9 o balde \`attachments\` \u2014 privado, 25 MB, j\xE1 existente e j\xE1 em uso.
+-- Uma foto que um lead mandou no WhatsApp n\xE3o pode ser p\xFAblica, e um balde novo
+-- seria mais uma lista de mimetypes para algu\xE9m manter desatualizada.
+--
+-- \u2500\u2500 nulo \xE9 um estado leg\xEDtimo, n\xE3o uma falha \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+--
+-- \`media_path\` \xE9 NULL em tr\xEAs situa\xE7\xF5es diferentes e todas normais: a mensagem
+-- \xE9 texto; a linha \xE9 anterior a esta migra\xE7\xE3o; ou o upload ainda n\xE3o aconteceu.
+-- Quem l\xEA distingue pela combina\xE7\xE3o com \`message_type\`, que \xE9 o que torna a
+-- consulta acima poss\xEDvel. Um default inventaria um caminho para arquivo que
+-- n\xE3o existe.
+--
+-- Idempotente e replay-safe.
+-- ---------------------------------------------------------------------------
+
+ALTER TABLE public.plg_conversation_messages
+  ADD COLUMN IF NOT EXISTS media_path text;
+
+COMMENT ON COLUMN public.plg_conversation_messages.media_path IS
+  'Onde os bytes ficaram no balde \`attachments\`, ou NULL: texto, linha anterior \xE0 013, ou upload que ainda n\xE3o aconteceu. Distingue-se pela combina\xE7\xE3o com \`message_type\` (013).';
+
+-- Parcial: s\xF3 a m\xEDdia sem arquivo interessa, e \xE9 a minoria. O \xEDndice fica do
+-- tamanho do problema em vez do tamanho da tabela.
+CREATE INDEX IF NOT EXISTS plg_conversation_messages_midia_sem_arquivo
+  ON public.plg_conversation_messages (tenant_id, at DESC)
+  WHERE media_path IS NULL
+    AND message_type IN ('image', 'video', 'audio', 'document', 'sticker');
+`;
 var MIGRATIONS = [
   { id: "000_baseline", sql: MIGRATION_000_BASELINE },
   { id: "001_a_caixa_sabe_quem_falou_por_ultimo", sql: MIGRATION_001_A_CAIXA_SABE_QUEM_FALOU_POR_ULTIMO },
@@ -5495,7 +5803,9 @@ var MIGRATIONS = [
   { id: "008_dar_por_vista_e_uma_decisao", sql: MIGRATION_008_DAR_POR_VISTA_E_UMA_DECISAO },
   { id: "009_a_mensagem_inteira_atravessa_o_realtime", sql: MIGRATION_009_A_MENSAGEM_INTEIRA_ATRAVESSA_O_REALTIME },
   { id: "010_a_chegada_e_anunciada_por_conta", sql: MIGRATION_010_A_CHEGADA_E_ANUNCIADA_POR_CONTA },
-  { id: "011_o_anuncio_e_uma_campainha_nao_um_recado", sql: MIGRATION_011_O_ANUNCIO_E_UMA_CAMPAINHA_NAO_UM_RECADO }
+  { id: "011_o_anuncio_e_uma_campainha_nao_um_recado", sql: MIGRATION_011_O_ANUNCIO_E_UMA_CAMPAINHA_NAO_UM_RECADO },
+  { id: "012_a_rich_message_keeps_its_shape", sql: MIGRATION_012_A_RICH_MESSAGE_KEEPS_ITS_SHAPE },
+  { id: "013_a_midia_fica_conosco", sql: MIGRATION_013_A_MIDIA_FICA_CONOSCO }
 ];
 
 // src/index.ts
@@ -5529,11 +5839,11 @@ function createConversationsPlugin(options) {
     contactEntityDef: options?.contactEntityDef
   };
   const dashboardWidgets = createConversationsDashboardWidgets({ store: store2, config });
-  const PageComponent = () => React11__default.createElement(ConversationsPage, { store: store2, config });
+  const PageComponent = () => React12__default.createElement(ConversationsPage, { store: store2, config });
   PageComponent.displayName = "ConversationsPage";
-  const CampaignsPageComponent = () => React11__default.createElement(CampaignsView);
+  const CampaignsPageComponent = () => React12__default.createElement(CampaignsView);
   CampaignsPageComponent.displayName = "ConversationsCampaignsPage";
-  const TemplatesPageComponent = () => React11__default.createElement(TemplatesView);
+  const TemplatesPageComponent = () => React12__default.createElement(TemplatesView);
   TemplatesPageComponent.displayName = "ConversationsTemplatesPage";
   return {
     id: "conversations",
@@ -5609,7 +5919,7 @@ function createConversationsPlugin(options) {
         // quando ele serve para alguma coisa.
         zone: "shell.topbar.end",
         component: (() => {
-          const W = () => React11__default.createElement(InboxWatcher, {
+          const W = () => React12__default.createElement(InboxWatcher, {
             label: options?.navLabel ?? "Conversations",
             section: options?.navSection ?? "main",
             position: options?.navPosition ?? 1