@fayz-ai/plugin-conversations 0.18.0 → 0.20.0

package/dist/index.js

@@ -1,10 +1,10 @@
-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, UserRound, Copy } from 'lucide-react';
-import { toast, Button, Input, defineKpiWidget, defineTableWidget, PageHeaderActions, cn, Badge, FilterChip, Skeleton, KpiCard, TableWidget } from '@fayz-ai/ui';
+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, Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter, 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';
-import { SettingsGroup, PluginSettingsPanel, useNavContribution, PermissionGate, useLimitGuard, RightRailPage, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
+import { SettingsGroup, PluginSettingsPanel, useNavContribution, useRightRailStore, PageActions, useLimitGuard, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 
@@ -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,8 +1199,136 @@ 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] = React11__default.useState(null);
+  const [copied, setCopied] = React12__default.useState(null);
   const copy = (value) => {
     void navigator.clipboard?.writeText(value);
     setCopied(value);
@@ -1242,6 +1370,7 @@ function ContactCard({ contacts, outbound }) {
 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) {
@@ -1264,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 = () => {
@@ -1300,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: [
@@ -1308,7 +1437,7 @@ function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }
         /* @__PURE__ */ jsx(Avatar, { name: selected.contactName, accent: selected.accent, size: "sm", channel: selected.channel }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: selected.contactName }),
-          /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          !panelOpen && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
             /* @__PURE__ */ jsx(ChannelBadge, { channel: selected.channel }),
             /* @__PURE__ */ jsx("span", { className: "truncate", children: selected.contactHandle })
           ] })
@@ -1412,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();
@@ -1580,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);
@@ -1624,14 +1753,10 @@ function NewConversationPanel({
       setSubmitting(false);
     }
   }
-  return /* @__PURE__ */ jsx(
-    RightRailPage,
-    {
-      title: t("conversations.new.title"),
-      open,
-      onClose: () => onOpenChange(false),
-      width: "max-w-md",
-      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4", children: [
+  return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ModalContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: t("conversations.new.title") }) }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs(ModalBody, { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.channel") }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: CHANNELS.map((ch) => {
@@ -1695,20 +1820,20 @@ function NewConversationPanel({
               className: "max-h-40 min-h-[64px] w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit, className: "w-full", children: submitting ? t("conversations.new.creating") : t("conversations.new.create") }) })
-      ] })
-    }
-  );
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit, className: "w-full", children: submitting ? t("conversations.new.creating") : t("conversations.new.create") }) })
+    ] })
+  ] }) });
 }
 function useCaixaAoVivo() {
   const tenantId = useActiveTenantId();
   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();
@@ -1723,26 +1848,26 @@ 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 railOpen = useRightRailStore((s) => s.open);
+  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(() => {
-    setPanelOpen(isWidePanel);
-  }, [isWidePanel]);
+  React12__default.useEffect(() => {
+    setPanelOpen(isWidePanel && !railOpen);
+  }, [isWidePanel, railOpen]);
+  const newActions = React12__default.useMemo(() => [{
+    id: "new-conversation",
+    label: t("conversations.list.new"),
+    icon: SquarePen,
+    intent: "primary",
+    // Starting a conversation creates a thread — the FAB is a "+".
+    creates: true,
+    testId: "conversations-new",
+    permission: { feature: "conversations", action: "create" },
+    onSelect: () => setNewOpen(true)
+  }], [t]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PermissionGate, { feature: "conversations", action: "create", children: /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        size: "sm",
-        onClick: () => setNewOpen(true),
-        "aria-label": t("conversations.list.new"),
-        "data-testid": "conversations-new",
-        children: [
-          /* @__PURE__ */ jsx(SquarePen, { className: "h-3.5 w-3.5 sm:mr-1.5" }),
-          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("conversations.list.new") })
-        ]
-      }
-    ) }) }),
+    /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx(PageActions, { actions: newActions }) }),
     /* @__PURE__ */ jsx(NewConversationPanel, { open: newOpen, onOpenChange: setNewOpen }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-h-0 overflow-hidden bg-background", children: [
       /* @__PURE__ */ jsx(ConversationList, { className: cn(selected ? "hidden lg:flex" : "flex") }),
@@ -1799,7 +1924,7 @@ function requestedContact() {
   }
 }
 function ConversationsPage({ store: store2, config }) {
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     const wanted = requestedContact();
     if (!wanted) {
       void store2.getState().load();
@@ -2128,7 +2253,8 @@ function mapMessage(r) {
     // 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
+    payload: r.payload ?? null,
+    mediaPath: r.media_path ?? null
   };
 }
 function createSupabaseConversationsProvider(config) {
@@ -2887,22 +3013,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]
   );
@@ -3137,9 +3263,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);
@@ -5595,6 +5721,72 @@ COMMENT ON COLUMN public.plg_conversation_messages.message_type IS
 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 },
@@ -5608,7 +5800,8 @@ var MIGRATIONS = [
   { 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: "012_a_rich_message_keeps_its_shape", sql: MIGRATION_012_A_RICH_MESSAGE_KEEPS_ITS_SHAPE }
+  { 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
@@ -5642,11 +5835,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",
@@ -5722,7 +5915,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