@fayz-ai/plugin-conversations 0.23.14 → 0.23.15

package/dist/chunk-LJKLHGFX.js

@@ -0,0 +1,1268 @@
+import { providersApi } from './chunk-HMWUU5O7.js';
+import * as React10 from 'react';
+import React10__default from 'react';
+import { useStore } from 'zustand';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SquarePen, MessageSquare, Globe, Mail, Instagram, Phone, Search, User, Inbox, CheckCheck, ChevronLeft, Archive, PanelRight, Send, X, MapPin, Tag, StickyNote, Link2, MoreVertical, Loader2, AlertTriangle, Check, Clock, Snowflake, Sun, Flame, Building2, ExternalLink, UserRound, Copy, FileText, Download } from 'lucide-react';
+import { PageHeaderActions, cn, Button, Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, Textarea, ModalFooter, Input, FilterChip, Skeleton, toast } from '@fayz-ai/ui';
+import { useConnectors, useRightRailStore, PageActions, useLimitGuard, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
+import { getSupabaseClientOptional, useTranslation, useActiveTenantId, errorMessage, getActiveTenantId, appHref } from '@fayz-ai/core';
+
+var DEFAULT_CONVERSATIONS_CONFIG = {
+  contactKind: "contact"
+};
+var StoreContext = React10__default.createContext(null);
+var ConfigContext = React10__default.createContext(DEFAULT_CONVERSATIONS_CONFIG);
+function ConversationsContextProvider({
+  store,
+  config = DEFAULT_CONVERSATIONS_CONFIG,
+  children
+}) {
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(ConfigContext.Provider, { value: config, children }) });
+}
+function useConversationsStore(selector) {
+  const store = React10__default.useContext(StoreContext);
+  if (!store) throw new Error("useConversationsStore must be used within ConversationsPage");
+  return useStore(store, selector);
+}
+function useConversationsConfig() {
+  return React10__default.useContext(ConfigContext);
+}
+
+// src/types.ts
+var CHANNEL_LABELS = {
+  sms: "SMS",
+  whatsapp: "WhatsApp",
+  instagram: "Instagram",
+  email: "Email",
+  webchat: "Web Chat"
+};
+function isWaitingOnUs(conversation) {
+  if (conversation.status !== "open") return false;
+  if (conversation.acknowledgedAt && conversation.lastMessageAt && conversation.acknowledgedAt >= conversation.lastMessageAt) return false;
+  if (conversation.lastMessageDirection) return conversation.lastMessageDirection === "inbound";
+  return conversation.unreadCount > 0;
+}
+var CHANNEL_ICON = {
+  sms: Phone,
+  whatsapp: MessageSquare,
+  instagram: Instagram,
+  email: Mail,
+  webchat: Globe
+};
+var CHANNEL_ACCENT = {
+  whatsapp: { color: "#22c55e", badge: "bg-[#22c55e]/12 text-[#15803d] dark:text-[#4ade80]" },
+  sms: { color: "#6366f1", badge: "bg-[#6366f1]/12 text-[#4338ca] dark:text-[#a5b4fc]" },
+  instagram: { color: "#ec4899", badge: "bg-[#ec4899]/12 text-[#be185d] dark:text-[#f9a8d4]" },
+  email: { color: "#0ea5e9", badge: "bg-[#0ea5e9]/12 text-[#0369a1] dark:text-[#7dd3fc]" },
+  webchat: { color: "#f59e0b", badge: "bg-[#f59e0b]/12 text-[#b45309] dark:text-[#fcd34d]" }
+};
+function useMediaQuery(query) {
+  const [matches, setMatches] = React10__default.useState(
+    () => typeof window !== "undefined" && window.matchMedia(query).matches
+  );
+  React10__default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function initialsOf(name) {
+  return name.replace("@", "").split(/\s+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function Avatar({ name, accent, size = "md", channel }) {
+  const dims = size === "lg" ? "h-14 w-14 text-lg" : size === "sm" ? "h-9 w-9 text-xs" : "h-10 w-10 text-sm";
+  const Icon = channel ? CHANNEL_ICON[channel] : null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex items-center justify-center rounded-full font-semibold text-white", dims),
+        style: { backgroundColor: accent },
+        children: initialsOf(name)
+      }
+    ),
+    Icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full ring-2 ring-card",
+        style: { backgroundColor: CHANNEL_ACCENT[channel].color },
+        children: /* @__PURE__ */ jsx(Icon, { className: "h-2.5 w-2.5 text-white" })
+      }
+    )
+  ] });
+}
+function ChannelBadge({ channel, className }) {
+  const Icon = CHANNEL_ICON[channel];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium",
+        CHANNEL_ACCENT[channel].badge,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-2.5 w-2.5" }),
+        CHANNEL_LABELS[channel]
+      ]
+    }
+  );
+}
+function relativeTime(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.round(diff / 6e4);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d`;
+  return `${Math.round(days / 7)}w`;
+}
+function dayLabel(iso) {
+  const d = new Date(iso);
+  const now = /* @__PURE__ */ new Date();
+  const startOf = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const dayDiff = Math.round((startOf(now) - startOf(d)) / 864e5);
+  if (dayDiff <= 0) return "Today";
+  if (dayDiff === 1) return "Yesterday";
+  if (dayDiff < 7) return d.toLocaleDateString([], { weekday: "long" });
+  return d.toLocaleDateString([], { month: "short", day: "numeric", year: now.getFullYear() === d.getFullYear() ? void 0 : "numeric" });
+}
+var whatsappCache = null;
+var whatsappConnected = () => {
+  whatsappCache ?? (whatsappCache = providersApi.list().then((rows) => rows.some((r) => r.isActive || r.hasCredential)).catch(() => {
+    whatsappCache = null;
+    return false;
+  }));
+  return whatsappCache;
+};
+function useChannelConnections() {
+  const [whatsapp, setWhatsapp] = React10.useState(void 0);
+  const { connectors } = useConnectors({ hostPluginId: "conversations", includeGrants: false });
+  React10.useEffect(() => {
+    let cancelled = false;
+    void whatsappConnected().then((v) => {
+      if (!cancelled) setWhatsapp(v);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return React10.useMemo(() => {
+    if (whatsapp === void 0) return void 0;
+    const live = (needle) => (connectors ?? []).some((c) => c.state === "connected" && c.slug.toLowerCase().includes(needle));
+    return { whatsapp: whatsapp || live("whatsapp"), email: live("mail"), instagram: live("instagram") };
+  }, [whatsapp, connectors]);
+}
+var FILTERS = ["all", "whatsapp", "instagram", "email"];
+function ConversationList({ className }) {
+  const t = useTranslation();
+  const connected = useChannelConnections();
+  const {
+    conversations,
+    selectedId,
+    channelFilter,
+    leadOwnerFilter,
+    search,
+    loading,
+    select,
+    markRead,
+    setChannelFilter,
+    setLeadOwnerFilter,
+    setSearch
+  } = useConversationsStore((s) => s);
+  const donos = React10__default.useMemo(() => {
+    const vistos = /* @__PURE__ */ new Map();
+    for (const c of conversations) {
+      if (c.leadOwnerId) vistos.set(c.leadOwnerId, c.leadOwnerName ?? c.leadOwnerId);
+    }
+    return [...vistos].map(([value, label]) => ({ value, label }));
+  }, [conversations]);
+  return /* @__PURE__ */ jsxs("aside", { className: cn("w-full shrink-0 flex-col border-r border-border bg-card lg:w-[320px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-3 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: t("conversations.list.search"),
+            className: "pl-8"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: FILTERS.map((id) => {
+        const off = id !== "all" && connected !== void 0 && !connected[id];
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "bare",
+            size: "bare",
+            onClick: () => setChannelFilter(id),
+            title: off ? t("conversations.filter.notConnected") : void 0,
+            className: cn(
+              "rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+              channelFilter === id ? "border-transparent bg-primary text-primary-foreground" : off ? "border-dashed border-muted-foreground/40 bg-transparent text-muted-foreground hover:bg-muted/50" : "border-transparent bg-muted text-muted-foreground hover:bg-muted/70"
+            ),
+            children: t(`conversations.filter.${id}`)
+          },
+          id
+        );
+      }) }),
+      donos.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        FilterChip,
+        {
+          label: t("conversations.contact.leadOwner"),
+          icon: User,
+          allLabel: t("conversations.filter.anyOwner"),
+          options: [{ value: "none", label: t("conversations.filter.noOwner") }, ...donos],
+          value: leadOwnerFilter,
+          onChange: (v) => {
+            void setLeadOwnerFilter(v);
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+      loading && conversations.length === 0 && Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3 border-b border-border/50 px-3 py-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-8" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-4 w-16 rounded-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-3/4" })
+        ] })
+      ] }, i)),
+      !loading && conversations.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 p-8 text-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Inbox, { className: "h-6 w-6" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("conversations.list.empty") })
+      ] }),
+      conversations.map((c) => {
+        const active = c.id === selectedId;
+        const unread = isWaitingOnUs(c);
+        return (
+          // `div` em volta e não um botão dentro de outro: HTML não permite
+          // aninhar, e o navegador resolve isso silenciosamente movendo o
+          // interno para fora — a linha inteira deixa de ser clicável e
+          // ninguém entende por quê.
+          /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "bare",
+                size: "bare",
+                onClick: () => select(c.id),
+                className: cn(
+                  "flex w-full items-start justify-start gap-3 rounded-none border-b border-border/50 px-3 py-3 text-left font-normal transition-colors",
+                  // Um TOM da cor de marca, e não `bg-accent`.
+                  //
+                  // `bg-accent` resolve para quase preto neste tema, e a linha da
+                  // conversa aberta ficava escura sobre escura. Trocar junto o
+                  // `text-accent-foreground` deixava legível, mas pintava de
+                  // preto a única linha que se está a ler — chamava mais atenção
+                  // que a conversa.
+                  //
+                  // `bg-primary/10` é um véu: o texto continua com as cores dele,
+                  // a seleção se lê como seleção e não como bloco, e funciona nos
+                  // dois temas porque não presume nada sobre o fundo.
+                  active ? "bg-primary/10" : "hover:bg-muted/50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Avatar, { name: c.contactName, accent: c.accent, channel: c.channel }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm text-foreground", unread ? "font-semibold" : "font-medium"), children: c.contactName }),
+                      /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-[11px]", unread ? "font-semibold text-primary" : "text-muted-foreground"), children: relativeTime(c.lastMessageAt) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(ChannelBadge, { channel: c.channel }),
+                      c.status !== "open" && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/70", children: t(`conversations.status.${c.status}`) }),
+                      c.leadOwnerName && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-0.5 rounded-full bg-muted px-1.5 text-[10px] text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx(User, { className: "h-2.5 w-2.5" }),
+                        c.leadOwnerName.split(" ")[0]
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: cn("truncate text-xs", unread ? "text-foreground" : "text-muted-foreground"), children: c.lastMessagePreview }),
+                      unread && /* @__PURE__ */ jsx("span", { className: "flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-semibold text-destructive-foreground", children: c.unreadCount > 0 ? c.unreadCount : "\xB7" })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            unread && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "bare",
+                size: "bare",
+                type: "button",
+                title: t("conversations.markRead"),
+                "aria-label": t("conversations.markRead"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  void markRead(c.id);
+                },
+                className: "absolute right-2 top-2 hidden rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground group-hover:block",
+                children: /* @__PURE__ */ jsx(CheckCheck, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] }, c.id)
+        );
+      })
+    ] })
+  ] });
+}
+function useSendWindow(conversationId) {
+  const [row, setRow] = React10__default.useState(null);
+  const [providers, setProviders] = React10__default.useState(null);
+  React10__default.useEffect(() => {
+    let alive = true;
+    providersApi.list().then((p) => {
+      if (alive) setProviders(p);
+    }).catch(() => {
+      if (alive) setProviders([]);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  React10__default.useEffect(() => {
+    let alive = true;
+    if (!conversationId) {
+      setRow(null);
+      return;
+    }
+    const sb = getSupabaseClientOptional();
+    if (!sb) {
+      setRow(null);
+      return;
+    }
+    sb.from("v_conversations_window").select("window_open, window_expires_at, minutes_left, last_inbound_at").eq("conversation_id", conversationId).eq("tenant_id", getActiveTenantId()).maybeSingle().then(({ data }) => {
+      if (alive) setRow(data ?? null);
+    }).catch(() => {
+      if (alive) setRow(null);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [conversationId]);
+  const provider = (providers ?? []).find((p) => p.isActive);
+  const mode = React10__default.useMemo(() => {
+    if (!provider) return { kind: "blocked", reason: "no_provider" };
+    if (!provider.capabilities?.requires_template) {
+      return { kind: "free", until: null, minutesLeft: null };
+    }
+    if (row?.window_open) {
+      return { kind: "free", until: row.window_expires_at, minutesLeft: row.minutes_left };
+    }
+    return { kind: "template", reason: row?.last_inbound_at ? "window_closed" : "never_replied" };
+  }, [row, provider]);
+  return { loading: providers === null, mode, provider };
+}
+function humanLeft(minutes) {
+  if (minutes == null) return "";
+  if (minutes < 60) return `${minutes} min`;
+  const h = Math.floor(minutes / 60);
+  return h < 24 ? `${h}h` : `${Math.floor(h / 24)}d`;
+}
+function SendWindowBanner({ state }) {
+  const { mode, provider } = state;
+  if (mode.kind === "free" && mode.minutesLeft == null) return null;
+  if (mode.kind === "free") {
+    const urgent = (mode.minutesLeft ?? 0) < 120;
+    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 px-4 py-1.5 text-[11px] ${urgent ? "bg-warning-soft text-warning-soft-foreground" : "text-muted-foreground"}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-success" }),
+      "Janela aberta \u2014 texto livre por mais ",
+      humanLeft(mode.minutesLeft)
+    ] });
+  }
+  if (mode.kind === "blocked") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-destructive-soft px-4 py-2 text-[11px] text-destructive-soft-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-destructive" }),
+      "Nenhum provedor de WhatsApp ativo \u2014 configure em Ajustes \u203A Conversas."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 bg-warning-soft px-4 py-2 text-[11px] text-warning-soft-foreground", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-warning" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: mode.reason === "never_replied" ? "Esta pessoa nunca respondeu." : "A janela de 24 horas fechou." }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "No ",
+      provider?.provider ?? "provedor",
+      ", texto livre s\xF3 sai dentro de 24h da resposta do cliente. Para falar agora \xE9 preciso um template aprovado."
+    ] })
+  ] });
+}
+var STATUS = {
+  queued: { icon: Clock, label: "na fila", cls: "text-white/60" },
+  sent: { icon: Check, label: "enviada", cls: "text-white/70" },
+  delivered: { icon: CheckCheck, label: "entregue", cls: "text-white/80" },
+  read: { icon: CheckCheck, label: "lida", cls: "text-sky-200" },
+  failed: { icon: AlertTriangle, label: "N\xC3O ENVIADA", cls: "text-white" },
+  expired: { icon: AlertTriangle, label: "expirou", cls: "text-white" },
+  delivery_timeout: { icon: AlertTriangle, label: "sem confirma\xE7\xE3o", cls: "text-white" },
+  cancelled: { icon: X, label: "cancelada", cls: "text-white" },
+  opted_out: { icon: X, label: "recusada", cls: "text-white" }
+};
+var BAD = /* @__PURE__ */ new Set(["failed", "expired", "cancelled", "opted_out", "delivery_timeout"]);
+function isFailed(m) {
+  if (m.direction !== "outbound") return false;
+  if (m.deliveryStatus) return BAD.has(m.deliveryStatus);
+  if (m.providerMessageId) return false;
+  const age = Date.now() - new Date(m.at).getTime();
+  return Number.isFinite(age) && age > 12e4;
+}
+function DeliveryMark({ m }) {
+  if (m.direction !== "outbound") return null;
+  const key = isFailed(m) ? "failed" : m.deliveryStatus ?? "sent";
+  const cfg = STATUS[key] ?? STATUS.sent;
+  const Icon = cfg.icon;
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-0.5 ${cfg.cls}`, title: cfg.label, children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+    BAD.has(key) && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold uppercase", children: cfg.label })
+  ] });
+}
+function MessageMenu({ m }) {
+  const [open, setOpen] = React10__default.useState(false);
+  const [detail, setDetail] = React10__default.useState(null);
+  const [loading, setLoading] = React10__default.useState(false);
+  const [err, setErr] = React10__default.useState(null);
+  async function load() {
+    setOpen(true);
+    if (!m.providerMessageId) return;
+    setLoading(true);
+    setErr(null);
+    try {
+      const sb = getSupabaseClientOptional();
+      const { data, error } = await sb.functions.invoke("conversations-provider", {
+        body: { tenantId: getActiveTenantId(), action: "message_detail", providerMessageId: m.providerMessageId }
+      });
+      if (error) {
+        const d = await error.context?.json?.().catch(() => null);
+        throw new Error(d?.message ?? error.message);
+      }
+      if (data?.error) throw new Error(data.message ?? data.error);
+      setDetail(data.detail);
+    } catch (e) {
+      setErr(e?.message ?? "N\xE3o consegui buscar");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "bare",
+        size: "bare",
+        onClick: () => void load(),
+        "aria-label": "Detalhes da mensagem",
+        className: "opacity-0 transition-opacity group-hover:opacity-60 hover:!opacity-100",
+        children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[120] flex items-center justify-center bg-black/50 p-4", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxs("div", { className: "max-h-[80vh] w-full max-w-2xl overflow-hidden rounded-card bg-card shadow-2xl", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Detalhes da mensagem" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
+            new Date(m.at).toLocaleString(),
+            " \xB7 ",
+            m.direction === "outbound" ? "sa\xEDda" : "entrada",
+            m.deliveryStatus ? ` \xB7 ${m.deliveryStatus}` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "bare", size: "bare", onClick: () => setOpen(false), "aria-label": "Fechar", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-[60vh] overflow-auto p-4 text-xs", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-muted-foreground", children: "Nesta base" }),
+        /* @__PURE__ */ jsx("pre", { className: "mb-4 overflow-auto rounded bg-muted/40 p-3 text-[11px] leading-relaxed", children: JSON.stringify({
+          id: m.id,
+          direction: m.direction,
+          body: m.body,
+          at: m.at,
+          author: m.author,
+          deliveryStatus: m.deliveryStatus,
+          providerMessageId: m.providerMessageId
+        }, null, 2) }),
+        /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-muted-foreground", children: "No provedor" }),
+        !m.providerMessageId && // A ausência é a informação: sem id, ninguém do outro lado
+        // chegou a aceitar esta mensagem. Ela não atrasou — ela não saiu.
+        /* @__PURE__ */ jsx("p", { className: "rounded bg-destructive-soft p-3 text-[11px] text-destructive-soft-foreground", children: "Esta mensagem n\xE3o tem id no provedor \u2014 ela nunca chegou a ser aceita para envio. N\xE3o h\xE1 o que buscar do outro lado." }),
+        loading && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 p-3 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+          " buscando\u2026"
+        ] }),
+        err && /* @__PURE__ */ jsx("p", { className: "rounded bg-destructive-soft p-3 text-[11px] text-destructive-soft-foreground", children: err }),
+        detail != null && /* @__PURE__ */ jsx("pre", { className: "overflow-auto rounded bg-muted/40 p-3 text-[11px] leading-relaxed", children: JSON.stringify(detail, null, 2) })
+      ] })
+    ] }) })
+  ] });
+}
+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] = React10.useState(null);
+  const [erro, setErro] = React10.useState(false);
+  React10.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 = React10.useRef(null);
+  const [visivel, setVisivel] = React10.useState(false);
+  const { url, erro } = useUrlAssinada(m, visivel);
+  React10.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] = React10__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,
+            {
+              variant: "bare",
+              size: "bare",
+              type: "button",
+              onClick: () => copy(p.display),
+              className: cn(
+                "group/phone mt-0.5 flex items-center justify-start gap-1.5 text-left text-[13px] font-normal 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 = "";
+  messages.forEach((m, i) => {
+    const day = new Date(m.at).toDateString();
+    if (day !== lastDay) {
+      rows.push({ kind: "day", id: `day-${day}`, label: dayLabel(m.at) });
+      lastDay = day;
+    }
+    const prev = messages[i - 1];
+    const next = messages[i + 1];
+    const samePrev = prev && prev.direction === m.direction && new Date(prev.at).toDateString() === day;
+    const sameNext = next && next.direction === m.direction && new Date(next.at).toDateString() === day;
+    rows.push({ kind: "msg", id: m.id, message: m, startsRun: !samePrev, endsRun: !sameNext });
+  });
+  return rows;
+}
+function MessageThread({ selected, onTogglePanel, panelOpen, onBack, backAlways, className }) {
+  const t = useTranslation();
+  const { messages, sending, send, setStatus, refreshMessages } = useConversationsStore((s) => s);
+  const [draft, setDraft] = React10__default.useState("");
+  const win = useSendWindow(selected.id);
+  const canType = win.mode.kind === "free";
+  const threadRef = React10__default.useRef(null);
+  React10__default.useEffect(() => {
+    threadRef.current?.scrollTo({ top: threadRef.current.scrollHeight, behavior: "smooth" });
+  }, [messages.length, selected.id]);
+  React10__default.useEffect(() => {
+    if (!selected.id) return;
+    let timer = null;
+    const start = () => {
+      if (!timer) timer = setInterval(() => {
+        void refreshMessages();
+      }, 1e4);
+    };
+    const stop = () => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    };
+    const onVis = () => document.visibilityState === "visible" ? start() : stop();
+    onVis();
+    document.addEventListener("visibilitychange", onVis);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVis);
+    };
+  }, [selected.id, refreshMessages]);
+  async function handleSend() {
+    if (!draft.trim()) return;
+    const body = draft;
+    setDraft("");
+    await send(body);
+  }
+  const accent = CHANNEL_ACCENT[selected.channel];
+  const rows = React10__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: [
+        onBack && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: cn("-ml-1 shrink-0", !backAlways && "lg:hidden"), onClick: onBack, "aria-label": t("conversations.thread.back"), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) }),
+        /* @__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 }),
+          !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 })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => setStatus("closed"), "aria-label": "Arquivar", children: [
+          /* @__PURE__ */ jsx(Archive, { className: "h-3.5 w-3.5 sm:mr-1" }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Arquivar" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: panelOpen ? "secondary" : "ghost",
+            size: "icon",
+            onClick: onTogglePanel,
+            "aria-label": t("conversations.thread.details"),
+            children: /* @__PURE__ */ jsx(PanelRight, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: threadRef, className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: [
+      rows.map((row) => {
+        if (row.kind === "day") {
+          return /* @__PURE__ */ jsx("div", { className: "my-3 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-3 py-0.5 text-[11px] font-medium text-muted-foreground", children: row.label }) }, row.id);
+        }
+        const m = row.message;
+        const outbound = m.direction === "outbound";
+        const failed = isFailed(m);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("group flex items-center gap-1", outbound ? "justify-end" : "justify-start", row.startsRun ? "mt-2.5" : "mt-0.5"),
+            children: [
+              outbound && /* @__PURE__ */ jsx(MessageMenu, { m }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "max-w-[68%] px-3.5 py-2 text-sm shadow-sm",
+                    outbound ? "rounded-2xl text-white" : "rounded-2xl bg-card text-foreground",
+                    // Tail only on the last bubble of a run, on the sender's side.
+                    outbound && row.endsRun && "rounded-br-sm",
+                    !outbound && row.endsRun && "rounded-bl-sm",
+                    // UMA MENSAGEM QUE FALHOU PRECISA PARECER QUE FALHOU. Duas
+                    // ficaram um dia na caixa com a cara de qualquer outra e nunca
+                    // chegaram a ninguém — não havia como saber olhando.
+                    outbound && failed && "ring-2 ring-destructive"
+                  ),
+                  style: outbound ? { backgroundColor: failed ? "hsl(var(--destructive))" : accent.color } : void 0,
+                  children: [
+                    /* @__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 })
+                    ] })
+                  ]
+                }
+              ),
+              !outbound && /* @__PURE__ */ jsx(MessageMenu, { m })
+            ]
+          },
+          row.id
+        );
+      }),
+      rows.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: "h-7 w-7" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: t("conversations.thread.empty") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-border bg-card", children: [
+      /* @__PURE__ */ jsx(SendWindowBanner, { state: win }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                void handleSend();
+              }
+            },
+            rows: 1,
+            disabled: !canType,
+            placeholder: canType ? t("conversations.thread.reply", { channel: CHANNEL_LABELS[selected.channel] }) : win.mode.kind === "blocked" ? "Envio bloqueado" : "Fora da janela \u2014 envie um template",
+            className: "max-h-32 min-h-[40px] resize-none rounded-md border-border bg-background shadow-none focus:border-primary focus-visible:ring-0 focus-visible:ring-offset-0 disabled:bg-muted/40 disabled:text-muted-foreground disabled:opacity-100"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => void handleSend(), disabled: !canType || sending || !draft.trim(), "aria-label": t("conversations.thread.send"), children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }) })
+      ] })
+    ] })
+  ] });
+}
+var TEMP = {
+  hot: { icon: Flame, cls: "bg-destructive-soft text-destructive-soft-foreground", label: "Quente" },
+  warm: { icon: Sun, cls: "bg-warning-soft text-warning-soft-foreground", label: "Morno" },
+  cold: { icon: Snowflake, cls: "bg-info-soft text-info-soft-foreground", label: "Frio" }
+};
+function LeadCard({ personId, handle }) {
+  const [lead, setLead] = React10__default.useState(void 0);
+  React10__default.useEffect(() => {
+    let alive = true;
+    const sb = getSupabaseClientOptional();
+    const tenantId = getActiveTenantId();
+    if (!sb || !tenantId || !personId && !handle) {
+      setLead(null);
+      return;
+    }
+    (async () => {
+      try {
+        let q = sb.from("people").select("id, name, metadata, phone").eq("tenant_id", tenantId).eq("kind", "lead").limit(1);
+        q = personId ? q.eq("id", personId) : q.like("phone", `%${String(handle).replace(/\D/g, "").slice(-8)}`);
+        const { data } = await q.maybeSingle();
+        if (!alive) return;
+        if (!data) {
+          setLead(null);
+          return;
+        }
+        const meta = data.metadata ?? {};
+        let score = null;
+        try {
+          const { data: s } = await sb.from("v_crm_lead_score").select("temperature, fit_score, interest_score, reasons").eq("lead_id", data.id).maybeSingle();
+          score = s;
+        } catch {
+        }
+        setLead({
+          id: data.id,
+          name: data.name,
+          company: meta.company ?? null,
+          status: meta.status ?? null,
+          sourceName: meta.sourceName ?? null,
+          temperature: score?.temperature ?? null,
+          fitScore: score?.fit_score ?? null,
+          interestScore: score?.interest_score ?? null,
+          reasons: Array.isArray(score?.reasons) ? score.reasons : []
+        });
+      } catch {
+        if (alive) setLead(null);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [personId, handle]);
+  if (lead === void 0) return /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-xs text-muted-foreground", children: "carregando\u2026" });
+  if (!lead) {
+    return /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Este contato ainda n\xE3o \xE9 um lead cadastrado." }) });
+  }
+  const t = lead.temperature ? TEMP[lead.temperature] : null;
+  const Icon = t?.icon;
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: lead.name }),
+        lead.company && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 truncate text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Building2, { className: "h-3 w-3 shrink-0" }),
+          " ",
+          lead.company
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: appHref(`/sales/leads/${lead.id}`),
+          className: "inline-flex shrink-0 items-center gap-1 rounded-button border bg-card px-2 py-1 text-[11px] font-medium hover:bg-muted",
+          children: [
+            "Abrir lead ",
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [
+      t && Icon && /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${t.cls}`, children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+        " ",
+        t.label,
+        lead.interestScore != null && /* @__PURE__ */ jsx("span", { className: "tabular-nums opacity-70", children: lead.interestScore })
+      ] }),
+      lead.status && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] capitalize text-muted-foreground", children: lead.status }),
+      lead.sourceName && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: lead.sourceName })
+    ] }),
+    lead.reasons.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-0.5", children: lead.reasons.slice(0, 4).map((r, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-1.5 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\u2022" }),
+      /* @__PURE__ */ jsx("span", { children: r })
+    ] }, i)) })
+  ] });
+}
+function Section({ icon: Icon, title, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsxs("p", { className: "mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+      " ",
+      title
+    ] }),
+    children
+  ] });
+}
+function ContactPanel({ contact, onClose, className }) {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs("aside", { className: cn("flex shrink-0 flex-col overflow-y-auto border-l border-border bg-card", className), children: [
+    onClose && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2 xl:hidden", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: t("conversations.contact.details") }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, "aria-label": t("conversations.contact.closeDetails"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-5 text-center", children: [
+      /* @__PURE__ */ jsx(Avatar, { name: contact.contactName, accent: contact.accent, size: "lg", channel: contact.channel }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: contact.contactName }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: contact.contactHandle })
+      ] }),
+      /* @__PURE__ */ jsx(ChannelBadge, { channel: contact.channel })
+    ] }),
+    /* @__PURE__ */ jsx(LeadCard, { personId: contact.contactPersonId, handle: contact.contactHandle }),
+    /* @__PURE__ */ jsx(Section, { icon: User, title: t("conversations.contact.details"), children: /* @__PURE__ */ jsxs("dl", { className: "space-y-1.5 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: t("conversations.contact.channel") }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: CHANNEL_LABELS[contact.channel] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: t("conversations.contact.status") }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: t(`conversations.status.${contact.status}`) })
+      ] }),
+      contact.assignedTo && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: t("conversations.contact.assignedTo") }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: contact.assignedTo })
+      ] }),
+      contact.leadOwnerName && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: t("conversations.contact.leadOwner") }),
+        /* @__PURE__ */ jsx("dd", { className: "font-medium text-foreground", children: contact.leadOwnerName })
+      ] }),
+      contact.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("dt", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3" }),
+          " ",
+          t("conversations.contact.location")
+        ] }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: contact.location })
+      ] })
+    ] }) }),
+    contact.tags.length > 0 && /* @__PURE__ */ jsx(Section, { icon: Tag, title: t("conversations.contact.tags"), children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: contact.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground", children: tag }, tag)) }) }),
+    contact.note && /* @__PURE__ */ jsx(Section, { icon: StickyNote, title: t("conversations.contact.note"), children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: contact.note }) }),
+    /* @__PURE__ */ jsx(Section, { icon: Link2, title: t("conversations.contact.linkedRecords"), children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("conversations.contact.noLinkedRecords") }) })
+  ] });
+}
+var CHANNELS = ["whatsapp", "sms", "instagram", "email", "webchat"];
+function personHandleFor(channel, contact) {
+  if (!contact) return "";
+  if (channel === "email") return contact.email ?? "";
+  if (channel === "sms" || channel === "whatsapp") return contact.phone ?? "";
+  return "";
+}
+var HANDLE_LABEL_KEY = {
+  whatsapp: "conversations.new.handleLabel.phone",
+  sms: "conversations.new.handleLabel.phone",
+  email: "conversations.new.handleLabel.email",
+  instagram: "conversations.new.handleLabel.instagram",
+  webchat: "conversations.new.handleLabel.webchat"
+};
+function NewConversationPanel({
+  open,
+  onOpenChange
+}) {
+  const t = useTranslation();
+  const create = useConversationsStore((s) => s.create);
+  const config = useConversationsConfig();
+  const guardConversations = useLimitGuard("conversations_month");
+  const [channel, setChannel] = React10__default.useState("whatsapp");
+  const [contact, setContact] = React10__default.useState(null);
+  const [typedHandle, setTypedHandle] = React10__default.useState("");
+  const [creatingContact, setCreatingContact] = React10__default.useState(false);
+  const [firstMessage, setFirstMessage] = React10__default.useState("");
+  const [submitting, setSubmitting] = React10__default.useState(false);
+  const [pickerKey, setPickerKey] = React10__default.useState(0);
+  React10__default.useEffect(() => {
+    if (open) {
+      setChannel("whatsapp");
+      setContact(null);
+      setTypedHandle("");
+      setCreatingContact(false);
+      setFirstMessage("");
+      setSubmitting(false);
+      setPickerKey((k) => k + 1);
+    }
+  }, [open]);
+  const derivedHandle = personHandleFor(channel, contact);
+  const effectiveHandle = derivedHandle || typedHandle;
+  const handleLabel = t(HANDLE_LABEL_KEY[channel]);
+  const canSubmit = (contact?.name.trim().length ?? 0) > 0 && !submitting;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setSubmitting(true);
+    try {
+      if (await guardConversations() === "blocked") return;
+      await create({
+        channel,
+        contactName: contact.name.trim(),
+        contactPersonId: contact?.id,
+        contactHandle: effectiveHandle.trim() || void 0,
+        firstMessage: firstMessage.trim() || void 0
+      });
+      invalidateLimit("conversations_month");
+      onOpenChange(false);
+    } catch (err) {
+      const message = errorMessage(err);
+      toast.error(t("conversations.new.createFailed"), { description: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  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) => {
+            const Icon = CHANNEL_ICON[ch];
+            const active = channel === ch;
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "bare",
+                size: "bare",
+                type: "button",
+                onClick: () => setChannel(ch),
+                "aria-pressed": active,
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
+                  active ? "text-white" : "bg-muted text-muted-foreground hover:bg-muted/70"
+                ),
+                style: active ? { backgroundColor: CHANNEL_ACCENT[ch].color } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+                  CHANNEL_LABELS[ch]
+                ]
+              },
+              ch
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ContactPicker,
+          {
+            value: contact,
+            onChange: setContact,
+            kind: config.contactKind,
+            lookup: config.contactLookup,
+            createEntityDef: config.contactEntityDef,
+            allowFreeText: true,
+            onCreatingChange: setCreatingContact,
+            autoFocus: true,
+            label: t("conversations.new.contactName"),
+            placeholder: t("conversations.new.contactNamePlaceholder"),
+            secondaryText: derivedHandle || void 0,
+            handleField: {
+              label: handleLabel,
+              derived: derivedHandle || void 0,
+              value: typedHandle,
+              onChange: setTypedHandle,
+              fieldLabel: t("conversations.new.handle"),
+              placeholder: t("conversations.new.handlePlaceholder")
+            }
+          },
+          pickerKey
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "conv-first-message", className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.firstMessage") }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "conv-first-message",
+              value: firstMessage,
+              onChange: (e) => setFirstMessage(e.target.value),
+              rows: 3,
+              placeholder: t("conversations.new.firstMessagePlaceholder"),
+              className: "max-h-40 min-h-[64px] resize-none rounded-md border-border bg-background shadow-none focus:border-primary focus-visible:ring-0 focus-visible:ring-offset-0"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit, className: "w-full", children: submitting ? t("conversations.new.creating") : t("conversations.new.create") }) })
+    ] })
+  ] }) });
+}
+var porConta = /* @__PURE__ */ new Map();
+function assinarChegada(tenantId, ouvinte) {
+  const supabase = getSupabaseClientOptional();
+  if (!supabase?.channel || !tenantId) return () => {
+  };
+  let assinatura = porConta.get(tenantId);
+  if (!assinatura) {
+    const ouvintes = /* @__PURE__ */ new Set();
+    const canal = supabase.channel(`conversas:${tenantId}`).on("broadcast", { event: "inbound" }, (msg) => {
+      const carga = { conversationId: msg?.payload?.conversationId };
+      for (const f of [...ouvintes]) {
+        try {
+          f(carga);
+        } catch {
+        }
+      }
+    }).subscribe();
+    assinatura = { canal, ouvintes };
+    porConta.set(tenantId, assinatura);
+  }
+  assinatura.ouvintes.add(ouvinte);
+  return () => {
+    const a = porConta.get(tenantId);
+    if (!a) return;
+    a.ouvintes.delete(ouvinte);
+    if (a.ouvintes.size === 0) {
+      porConta.delete(tenantId);
+      void getSupabaseClientOptional()?.removeChannel?.(a.canal);
+    }
+  };
+}
+
+// src/views/useCaixaAoVivo.ts
+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 = React10.useRef(selectedId);
+  abertoRef.current = selectedId;
+  React10.useEffect(() => {
+    if (!tenantId) return;
+    return assinarChegada(tenantId, ({ conversationId }) => {
+      void load();
+      if (conversationId && conversationId === abertoRef.current) {
+        void refreshMessages();
+      }
+    });
+  }, [tenantId, load, refreshMessages]);
+}
+function InboxView({ layout = "page", newSignal = 0 } = {}) {
+  const t = useTranslation();
+  const dock = layout !== "page";
+  const { conversations, selectedId, deselect } = useConversationsStore((s) => s);
+  useCaixaAoVivo();
+  const isWideViewport = useMediaQuery("(min-width: 1280px)");
+  const isWidePanel = isWideViewport && !dock;
+  const railOpen = useRightRailStore((s) => s.open);
+  const [panelOpen, setPanelOpen] = React10__default.useState(false);
+  const [newOpen, setNewOpen] = React10__default.useState(false);
+  const selected = conversations.find((c) => c.id === selectedId) ?? null;
+  React10__default.useEffect(() => {
+    if (newSignal > 0) setNewOpen(true);
+  }, [newSignal]);
+  React10__default.useEffect(() => {
+    setPanelOpen(isWidePanel && !railOpen);
+  }, [isWidePanel, railOpen]);
+  const newActions = React10__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: [
+    !dock && /* @__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(
+        layout === "page" && (selected ? "hidden lg:flex" : "flex"),
+        layout === "dock" && (selected ? "hidden" : "flex lg:w-full border-r-0"),
+        layout === "dock-wide" && "flex lg:w-[300px]"
+      ) }),
+      selected ? /* @__PURE__ */ jsx(
+        MessageThread,
+        {
+          selected,
+          panelOpen,
+          onTogglePanel: () => setPanelOpen((v) => !v),
+          onBack: deselect,
+          backAlways: layout === "dock",
+          className: "flex"
+        }
+      ) : layout === "dock" ? null : /* @__PURE__ */ jsxs("section", { className: cn("min-w-0 flex-1 flex-col items-center justify-center bg-muted/20 text-muted-foreground", dock ? "flex" : "hidden lg:flex"), children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: "h-9 w-9" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: t("conversations.empty.select") })
+      ] }),
+      selected && panelOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "bare",
+            size: "bare",
+            className: cn("absolute inset-0 z-10 rounded-none bg-black/40", !dock && "xl:hidden"),
+            "aria-label": "Close details",
+            onClick: () => setPanelOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContactPanel,
+          {
+            contact: selected,
+            onClose: () => setPanelOpen(false),
+            className: cn("absolute inset-y-0 right-0 z-20 w-[340px] max-w-[88%] shadow-2xl", !dock && "xl:static xl:z-auto xl:w-[300px] xl:max-w-none xl:shadow-none")
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { ConversationsContextProvider, InboxView, assinarChegada, isWaitingOnUs, useChannelConnections, useConversationsStore };
+//# sourceMappingURL=chunk-LJKLHGFX.js.map
+//# sourceMappingURL=chunk-LJKLHGFX.js.map