@veploy/ploychat 0.1.0

package/dist/index.js

@@ -0,0 +1,2158 @@
+"use client";
+
+// src/components/App.jsx
+import { useMemo as useMemo2, useRef as useRef3, useState as useState4, useEffect as useEffect4 } from "react";
+
+// src/lib/useInbox.js
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/lib/context.jsx
+import { createContext, useContext, useMemo } from "react";
+
+// src/lib/client.js
+import { createClient } from "@supabase/supabase-js";
+function createPloyClient(config = {}) {
+  const apiBase = (config.apiBase || "").replace(/\/+$/, "");
+  async function apiFetch(path, { method = "GET", body } = {}) {
+    const headers = {};
+    if (body) headers["Content-Type"] = "application/json";
+    const token = config.getToken ? await config.getToken() : null;
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+    if (config.workspaceId) headers["X-Workspace"] = config.workspaceId;
+    const res = await fetch(`${apiBase}${path}`, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : void 0
+    });
+    const txt = await res.text();
+    let json;
+    try {
+      json = txt ? JSON.parse(txt) : null;
+    } catch {
+      json = txt;
+    }
+    if (!res.ok) {
+      const err = new Error((json == null ? void 0 : json.message) || (json == null ? void 0 : json.error) || `HTTP ${res.status}`);
+      err.status = res.status;
+      err.body = json;
+      throw err;
+    }
+    return json;
+  }
+  let supabase = config.supabase || null;
+  if (!supabase && config.supabaseUrl && config.supabaseAnonKey) {
+    supabase = createClient(config.supabaseUrl, config.supabaseAnonKey, {
+      auth: { persistSession: false, autoRefreshToken: false }
+    });
+  }
+  const live = !!(config.apiBase && config.workspaceId && config.getToken);
+  return { apiFetch, supabase, live };
+}
+
+// src/lib/context.jsx
+import { jsx } from "react/jsx-runtime";
+var PloyContext = createContext(null);
+function PloyConfigProvider({ config, children }) {
+  const value = useMemo(() => {
+    const client = createPloyClient(config);
+    return { config, client };
+  }, [config.apiBase, config.workspaceId, config.getToken, config.supabase, config.supabaseUrl, config.supabaseAnonKey]);
+  return /* @__PURE__ */ jsx(PloyContext.Provider, { value, children });
+}
+function usePloy() {
+  const ctx = useContext(PloyContext);
+  if (!ctx) throw new Error("PloyChat components must be used within <PloyChat>");
+  return ctx;
+}
+
+// src/lib/mappers.js
+var PALETTE = ["bg-violet-500", "bg-rose-500", "bg-sky-500", "bg-amber-500", "bg-emerald-600", "bg-slate-700"];
+function hash(s = "") {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) >>> 0;
+  return h;
+}
+function colorFor(id = "") {
+  return PALETTE[hash(id) % PALETTE.length];
+}
+var pad = (n) => String(n).padStart(2, "0");
+function timeOf(iso) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function dayOf(iso) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const now = /* @__PURE__ */ new Date();
+  if (d.toDateString() === now.toDateString()) return "Hoje";
+  const y = new Date(now);
+  y.setDate(now.getDate() - 1);
+  if (d.toDateString() === y.toDateString()) return "Ontem";
+  return d.toLocaleDateString("pt-BR");
+}
+function relTime(iso) {
+  if (!iso) return "";
+  const m = Math.floor((Date.now() - new Date(iso).getTime()) / 6e4);
+  if (m < 1) return "agora";
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  return `${Math.floor(h / 24)}d`;
+}
+function nowHHMM() {
+  const d = /* @__PURE__ */ new Date();
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+var STATUS_MAP = { open: "open", pending: "in_progress", resolved: "resolved", snoozed: "waiting" };
+function mapConversation(c) {
+  const contact = c.contact || {};
+  const name = contact.name || contact.push_name || contact.phone_e164 || contact.external_id || "Contato";
+  return {
+    id: c.id,
+    name,
+    phone: contact.phone_e164 || "",
+    avatarColor: colorFor(c.id),
+    preview: c.last_message_preview || "",
+    waitFor: relTime(c.last_message_at),
+    unread: c.unread_count || 0,
+    sla: "ok",
+    priority: c.priority || "normal",
+    status: STATUS_MAP[c.status] || "open",
+    ticket: c.property_ref ? `REF ${c.property_ref}` : `#${String(c.id).slice(0, 4)}`,
+    starred: false,
+    _raw: c
+  };
+}
+function mapMessage(m) {
+  const ts = m.sent_at || m.created_at;
+  if (m.kind === "note") {
+    return { id: m.id, side: "note", kind: "text", text: m.text || "", time: timeOf(ts), day: dayOf(ts), author: m.author_name, _raw: m };
+  }
+  if (m.kind === "system") {
+    return { id: m.id, side: "system", kind: "text", text: m.text || "", time: timeOf(ts), day: dayOf(ts), _raw: m };
+  }
+  let kind = m.kind || "text";
+  let text = m.text || "";
+  if (!["text", "image", "audio", "video", "document"].includes(kind)) {
+    text = m.text || m.caption || `[${kind}]`;
+    kind = "text";
+  }
+  return {
+    id: m.id,
+    side: m.direction,
+    // 'in' | 'out'
+    kind,
+    text,
+    caption: m.caption || "",
+    meta: m.media_mime || "",
+    mediaUrl: m.media_url || "",
+    time: timeOf(ts),
+    day: dayOf(ts),
+    status: m.status,
+    _raw: m
+  };
+}
+
+// src/lib/useInbox.js
+function useInbox() {
+  const { client } = usePloy();
+  const live = client.live;
+  const [conversations2, setConversations] = useState([]);
+  const [activeId, setActiveId] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [channels, setChannels] = useState([]);
+  const [agents, setAgents] = useState([]);
+  const [me, setMe] = useState(null);
+  const [tenantId, setTenantId] = useState(null);
+  const [loading, setLoading] = useState(live);
+  const [error, setError] = useState(null);
+  const activeIdRef = useRef(null);
+  activeIdRef.current = activeId;
+  const api = client.apiFetch;
+  useEffect(() => {
+    if (!live) return;
+    api("/v1/me").then((m) => {
+      var _a;
+      if ((_a = m == null ? void 0 : m.user) == null ? void 0 : _a.id) setMe(m.user.id);
+      if (m == null ? void 0 : m.tenant_id) setTenantId(m.tenant_id);
+    }).catch(() => {
+    });
+  }, [live, api]);
+  const loadConversations = useCallback(async () => {
+    if (!live) return;
+    try {
+      const data = await api("/v1/conversations?limit=50");
+      const mapped = (data || []).map(mapConversation);
+      setConversations(mapped);
+      setActiveId((a) => {
+        var _a;
+        return a || ((_a = mapped[0]) == null ? void 0 : _a.id) || null;
+      });
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [live, api]);
+  const loadMessages = useCallback(async (convId) => {
+    if (!live || !convId) return;
+    try {
+      const res = await api(`/v1/conversations/${convId}/messages?limit=50`);
+      setMessages(((res == null ? void 0 : res.messages) || []).slice().reverse().map(mapMessage));
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [live, api]);
+  const loadChannels = useCallback(async () => {
+    if (!live) return [];
+    try {
+      const l = await api("/v1/channels") || [];
+      setChannels(l);
+      return l;
+    } catch {
+      return [];
+    }
+  }, [live, api]);
+  const loadAgents = useCallback(async () => {
+    if (!live) return [];
+    try {
+      const l = await api("/v1/agents") || [];
+      setAgents(l);
+      return l;
+    } catch {
+      return [];
+    }
+  }, [live, api]);
+  useEffect(() => {
+    loadConversations();
+    loadChannels();
+    loadAgents();
+  }, [loadConversations, loadChannels, loadAgents]);
+  useEffect(() => {
+    loadMessages(activeId);
+  }, [activeId, loadMessages]);
+  const markRead = useCallback(async (convId) => {
+    if (!live || !convId) return;
+    setConversations((cs) => cs.map((c) => c.id === convId ? { ...c, unread: 0 } : c));
+    try {
+      await api(`/v1/conversations/${convId}/read`, { method: "POST" });
+    } catch {
+    }
+  }, [live, api]);
+  const assign = useCallback(async (convId, userId) => {
+    if (!live || !convId) return;
+    setConversations((cs) => cs.map((c) => c.id === convId ? { ...c, _raw: { ...c._raw, assignee_user_id: userId } } : c));
+    try {
+      await api(`/v1/conversations/${convId}/assign`, { method: "POST", body: { assignee_user_id: userId } });
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [live, api]);
+  const send = useCallback(async (text, isNote = false) => {
+    const t = (text || "").trim();
+    if (!t || !live || !activeIdRef.current) return;
+    const tmpId = `tmp${Date.now()}`;
+    setMessages((ms) => [...ms, isNote ? { id: tmpId, side: "note", kind: "text", text: t, time: nowHHMM() } : { id: tmpId, side: "out", kind: "text", text: t, time: nowHHMM(), status: "pending" }]);
+    try {
+      const saved = await api(`/v1/conversations/${activeIdRef.current}/messages`, {
+        method: "POST",
+        body: isNote ? { text: t, note: true } : { text: t }
+      });
+      setMessages((ms) => ms.map((m) => m.id === tmpId ? mapMessage(saved) : m));
+    } catch {
+      setMessages((ms) => ms.map((m) => m.id === tmpId ? { ...m, status: "failed" } : m));
+    }
+  }, [live, api]);
+  const sendMedia = useCallback(async ({ data, mime, kind, filename, previewUrl, caption }) => {
+    if (!live || !activeIdRef.current || !data) return;
+    const tmpId = `tmp${Date.now()}`;
+    setMessages((ms) => [...ms, { id: tmpId, side: "out", kind, mediaUrl: previewUrl || "", caption: caption || "", meta: filename || mime || "", time: nowHHMM(), status: "pending" }]);
+    try {
+      const saved = await api(`/v1/conversations/${activeIdRef.current}/messages`, {
+        method: "POST",
+        body: { media: { data, mime, kind, filename }, caption }
+      });
+      const mapped = mapMessage(saved);
+      setMessages((ms) => ms.map((m) => m.id === tmpId ? { ...mapped, mediaUrl: mapped.mediaUrl || previewUrl || "" } : m));
+    } catch {
+      setMessages((ms) => ms.map((m) => m.id === tmpId ? { ...m, status: "failed" } : m));
+    }
+  }, [live, api]);
+  const createChannel = useCallback((displayName) => api("/v1/channels", { method: "POST", body: { display_name: displayName } }), [api]);
+  const connect = useCallback((id) => api(`/v1/channels/${id}/connect`, { method: "POST" }), [api]);
+  const channelStatus = useCallback((id) => api(`/v1/channels/${id}/status`), [api]);
+  useEffect(() => {
+    if (!live || !tenantId) return;
+    const sb = client.supabase;
+    if (!sb) return;
+    const ch = sb.channel(`inbox:${tenantId}`).on("broadcast", { event: "message.created" }, ({ payload }) => {
+      if ((payload == null ? void 0 : payload.conversation_id) === activeIdRef.current) {
+        setMessages((ms) => ms.some((m) => m.id === payload.id) ? ms : [...ms, mapMessage(payload)]);
+      }
+      loadConversations();
+    }).on("broadcast", { event: "message.updated" }, ({ payload }) => {
+      setMessages((ms) => ms.map((m) => m.id === (payload == null ? void 0 : payload.id) ? { ...m, status: payload.status || m.status } : m));
+    }).on("broadcast", { event: "conversation.updated" }, () => loadConversations()).on("broadcast", { event: "channel.updated" }, () => loadChannels()).subscribe();
+    return () => {
+      sb.removeChannel(ch);
+    };
+  }, [live, tenantId, client, loadConversations, loadChannels]);
+  return {
+    live,
+    loading,
+    error,
+    conversations: conversations2,
+    activeId,
+    setActiveId,
+    messages,
+    send,
+    sendMedia,
+    markRead,
+    assign,
+    me,
+    agents,
+    loadAgents,
+    channels,
+    loadChannels,
+    createChannel,
+    connect,
+    channelStatus
+  };
+}
+
+// src/components/ConnectChannel.jsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ConnectChannel({ inbox, onClose }) {
+  const [channel, setChannel] = useState2(null);
+  const [qr, setQr] = useState2(null);
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const [busy, setBusy] = useState2(false);
+  const pollRef = useRef2(null);
+  const asDataUrl = (q) => !q ? null : q.startsWith("data:") ? q : `data:image/png;base64,${q}`;
+  useEffect2(() => {
+    (async () => {
+      try {
+        const list = await inbox.loadChannels();
+        const c = (list || [])[0] || null;
+        setChannel(c);
+        if (c) setStatus(c.status);
+      } catch (e) {
+        setError(e.message);
+      }
+    })();
+    return () => clearInterval(pollRef.current);
+  }, [inbox]);
+  const poll = (id) => {
+    clearInterval(pollRef.current);
+    pollRef.current = setInterval(async () => {
+      try {
+        const s = await inbox.channelStatus(id);
+        setStatus(s.status);
+        if (s.status === "connected") {
+          clearInterval(pollRef.current);
+          inbox.loadChannels();
+        } else {
+          const res = await inbox.connect(id);
+          if (res == null ? void 0 : res.qr) setQr(asDataUrl(res.qr));
+        }
+      } catch {
+      }
+    }, 3e3);
+  };
+  const startConnect = async (ch) => {
+    setError(null);
+    setBusy(true);
+    setStatus("connecting");
+    try {
+      const res = await inbox.connect(ch.id);
+      setQr(asDataUrl(res == null ? void 0 : res.qr));
+      setStatus((res == null ? void 0 : res.status) || "qr");
+      poll(ch.id);
+    } catch (e) {
+      setError(e.message);
+      setStatus("error");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const handleCreate = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      const ch = await inbox.createChannel("WhatsApp");
+      setChannel(ch);
+      await startConnect(ch);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 bg-black/40 flex items-center justify-center", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl shadow-xl w-[380px] p-5", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-[15px]", children: "Conectar WhatsApp" }),
+      /* @__PURE__ */ jsx2("button", { onClick: onClose, className: "text-slate-400 hover:text-slate-700 text-lg leading-none", children: "\xD7" })
+    ] }),
+    error && /* @__PURE__ */ jsx2("div", { className: "text-[12px] text-rose-600 mb-2 break-words", children: error }),
+    status === "connected" ? /* @__PURE__ */ jsx2("div", { className: "text-center py-8 text-emerald-600 font-medium", children: "\u2713 N\xFAmero conectado" }) : qr ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx2("img", { src: qr, alt: "QR Code", className: "w-56 h-56 mx-auto rounded-lg border border-slate-200" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[12px] text-slate-500 mt-3", children: [
+        "WhatsApp \u203A Aparelhos conectados \u203A Conectar um aparelho, e escaneie. (",
+        status,
+        ")"
+      ] })
+    ] }) : channel ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-[13px] text-slate-600 mb-3", children: [
+        "Canal: ",
+        channel.display_name,
+        " \xB7 ",
+        channel.status
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          disabled: busy,
+          onClick: () => startConnect(channel),
+          className: "bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white px-4 py-2 rounded-lg text-[13px] font-medium",
+          children: busy ? "Gerando\u2026" : "Gerar QR Code"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-[13px] text-slate-600 mb-3", children: "Nenhum canal ainda. Crie um para conectar um n\xFAmero." }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          disabled: busy,
+          onClick: handleCreate,
+          className: "bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white px-4 py-2 rounded-lg text-[13px] font-medium",
+          children: busy ? "Criando\u2026" : "Criar canal"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/EmojiPicker.jsx
+import { lazy, Suspense } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Picker = lazy(() => import("emoji-picker-react"));
+var CATEGORIES_PT = [
+  { category: "suggested", name: "Recentes" },
+  { category: "smileys_people", name: "Rostos e pessoas" },
+  { category: "animals_nature", name: "Animais e natureza" },
+  { category: "food_drink", name: "Comidas e bebidas" },
+  { category: "travel_places", name: "Viagens e lugares" },
+  { category: "activities", name: "Atividades" },
+  { category: "objects", name: "Objetos" },
+  { category: "symbols", name: "S\xEDmbolos" },
+  { category: "flags", name: "Bandeiras" }
+];
+function EmojiPicker({ onPick }) {
+  return /* @__PURE__ */ jsx3("div", { className: "absolute bottom-[calc(100%+6px)] left-0 z-30 shadow-xl rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3("div", { className: "w-[340px] h-[420px] bg-white" }), children: /* @__PURE__ */ jsx3(
+    Picker,
+    {
+      onEmojiClick: (e) => onPick(e.emoji),
+      lazyLoadEmojis: true,
+      width: 340,
+      height: 420,
+      categories: CATEGORIES_PT,
+      searchPlaceholder: "Buscar emoji\u2026",
+      previewConfig: { showPreview: false }
+    }
+  ) }) });
+}
+
+// src/components/TransferModal.jsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TransferModal({ inbox, conversationId, currentAssignee, onClose }) {
+  const [agents, setAgents] = useState3(inbox.agents || []);
+  const [q, setQ] = useState3("");
+  useEffect3(() => {
+    inbox.loadAgents().then((a) => a && setAgents(a));
+  }, [inbox]);
+  const filtered = agents.filter((a) => {
+    const s = q.trim().toLowerCase();
+    if (!s) return true;
+    return (a.name || "").toLowerCase().includes(s) || (a.email || "").toLowerCase().includes(s);
+  });
+  const pick = (userId) => {
+    inbox.assign(conversationId, userId);
+    onClose();
+  };
+  const initials = (n) => (n || "?").split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 z-50 bg-black/40 flex items-center justify-center", onClick: onClose, children: /* @__PURE__ */ jsxs2("div", { className: "bg-white rounded-2xl shadow-xl w-[380px] max-h-[72vh] flex flex-col", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "px-4 py-3 border-b border-slate-200 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "font-semibold text-[15px]", children: "Transferir conversa" }),
+      /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "text-slate-400 hover:text-slate-700 text-lg leading-none", children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "p-3 border-b border-slate-100", children: /* @__PURE__ */ jsx4(
+      "input",
+      {
+        value: q,
+        onChange: (e) => setQ(e.target.value),
+        placeholder: "Buscar agente\u2026",
+        className: "w-full px-3 py-1.5 text-[13px] rounded-lg bg-slate-50 border border-slate-200 outline-none focus:bg-white focus:border-slate-300"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto p-2", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: () => pick(null),
+          className: "w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-[13px] text-slate-500",
+          children: "Sem atribui\xE7\xE3o"
+        }
+      ),
+      filtered.map((a) => /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => pick(a.user_id),
+          className: `w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center gap-2.5 ${currentAssignee === a.user_id ? "bg-emerald-50" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "w-8 h-8 rounded-full bg-slate-200 text-slate-600 text-[11px] font-semibold flex items-center justify-center shrink-0", children: initials(a.name) }),
+            /* @__PURE__ */ jsxs2("span", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx4("span", { className: "block text-[13px] truncate", children: a.name }),
+              /* @__PURE__ */ jsx4("span", { className: "block text-[11px] text-slate-400 truncate", children: [a.email, a.role].filter(Boolean).join(" \xB7 ") })
+            ] }),
+            currentAssignee === a.user_id && /* @__PURE__ */ jsx4("span", { className: "text-emerald-600 text-[11px] font-medium shrink-0", children: "atual" })
+          ]
+        },
+        a.user_id
+      )),
+      filtered.length === 0 && /* @__PURE__ */ jsx4("p", { className: "text-center text-[12px] text-slate-400 py-6", children: "Nenhum agente encontrado" })
+    ] })
+  ] }) });
+}
+
+// src/components/App.jsx
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Icon = ({ d, className = "w-4 h-4", stroke = 1.8, fill = "none" }) => /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", className, fill, stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", children: d });
+var I = {
+  inbox: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" })
+  ] }) }),
+  chat: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z" }) }),
+  contacts: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
+  ] }) }),
+  send: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx5("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  ] }) }),
+  bolt: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }),
+  bulb: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M9 18h6" }),
+    /* @__PURE__ */ jsx5("path", { d: "M10 22h4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z" })
+  ] }) }),
+  book: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }),
+    /* @__PURE__ */ jsx5("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" })
+  ] }) }),
+  chart: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+    /* @__PURE__ */ jsx5("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+  ] }) }),
+  users: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
+  ] }) }),
+  grid: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx5("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx5("rect", { x: "14", y: "14", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "14", width: "7", height: "7" })
+  ] }) }),
+  briefcase: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" })
+  ] }) }),
+  search: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx5("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] }) }),
+  filter: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) }),
+  sort: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m3 16 4 4 4-4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M7 20V4" }),
+    /* @__PURE__ */ jsx5("path", { d: "m21 8-4-4-4 4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M17 4v16" })
+  ] }) }),
+  chevDown: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polyline", { points: "6 9 12 15 18 9" }) }),
+  chevRight: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polyline", { points: "9 18 15 12 9 6" }) }),
+  panel: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+  ] }) }),
+  more: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "5", cy: "12", r: "1" })
+  ] }) }),
+  star: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }),
+  phone: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z" }) }),
+  moon: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" }) }),
+  check: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" }) }),
+  paperclip: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }),
+  emoji: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+    /* @__PURE__ */ jsx5("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+  ] }) }),
+  mic: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3Z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx5("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+  ] }) }),
+  image: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+  ] }) }),
+  file: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "14 2 14 8 20 8" })
+  ] }) }),
+  pin: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "10", r: "3" })
+  ] }) }),
+  tag: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z" }),
+    /* @__PURE__ */ jsx5("line", { x1: "7", y1: "7", x2: "7.01", y2: "7" })
+  ] }) }),
+  link: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+  ] }) }),
+  clock: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "12 6 12 12 16 14" })
+  ] }) }),
+  forward: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("polyline", { points: "15 17 20 12 15 7" }),
+    /* @__PURE__ */ jsx5("path", { d: "M4 18v-2a4 4 0 0 1 4-4h12" })
+  ] }) }),
+  x: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] }) }),
+  external: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "15 3 21 3 21 9" }),
+    /* @__PURE__ */ jsx5("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+  ] }) }),
+  plus: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] }) }),
+  template: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsx5("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
+  ] }) }),
+  reply: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("polyline", { points: "9 17 4 12 9 7" }),
+    /* @__PURE__ */ jsx5("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+  ] }) }),
+  whatsapp: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M20.52 3.48A11.93 11.93 0 0 0 12.02 0C5.4 0 .03 5.37.03 11.99c0 2.11.55 4.18 1.6 6L0 24l6.18-1.62a12 12 0 0 0 5.84 1.49h.01c6.62 0 11.99-5.37 11.99-11.99 0-3.2-1.25-6.21-3.5-8.4Z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9.3 7.4c-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.07-.7.34-.27.27-.93.91-.93 2.22 0 1.31.95 2.58 1.08 2.76.13.18 1.86 2.96 4.58 4.04 2.27.89 2.73.71 3.22.67.49-.05 1.58-.65 1.8-1.27.22-.62.22-1.16.15-1.27-.07-.11-.25-.18-.52-.31-.27-.13-1.58-.78-1.83-.87-.24-.09-.42-.13-.6.13-.18.27-.69.87-.84 1.05-.16.18-.31.2-.58.07-.27-.13-1.14-.42-2.17-1.34-.8-.71-1.34-1.59-1.5-1.86-.16-.27-.02-.41.12-.55.12-.12.27-.31.4-.47.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.47-.07-.13-.6-1.43-.82-1.96Z" })
+  ] }), fill: "currentColor", stroke: "none" }),
+  home: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5("path", { d: "M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V9.5Z" }) }) }),
+  calendar: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "4.5", width: "18", height: "16.5", rx: "2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "3", y1: "10", x2: "21", y2: "10" }),
+    /* @__PURE__ */ jsx5("line", { x1: "8", y1: "2.5", x2: "8", y2: "6" }),
+    /* @__PURE__ */ jsx5("line", { x1: "16", y1: "2.5", x2: "16", y2: "6" })
+  ] }) }),
+  building: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "4", y: "2.5", width: "16", height: "19", rx: "1.5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9 21.5v-4h6v4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8.5 7h.01M12 7h.01M15.5 7h.01M8.5 11h.01M12 11h.01M15.5 11h.01M8.5 15h.01M15.5 15h.01" })
+  ] }) }),
+  target: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" })
+  ] }) }),
+  kanban: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "9", y1: "3", x2: "9", y2: "14" }),
+    /* @__PURE__ */ jsx5("line", { x1: "15", y1: "3", x2: "15", y2: "10" })
+  ] }) }),
+  dollar: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9.5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M15 9c-.6-1.3-1.7-2-3-2-1.7 0-3 1-3 2.3 0 2.7 6 1.3 6 4 0 1.3-1.3 2.3-3 2.3-1.3 0-2.4-.7-3-2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "5.5", x2: "12", y2: "18.5" })
+  ] }) }),
+  checkCircle: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9.5" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "8.5 12 11 14.5 15.5 9.5" })
+  ] }) }),
+  globe: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9.5" }),
+    /* @__PURE__ */ jsx5("line", { x1: "2.5", y1: "12", x2: "21.5", y2: "12" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 2.5c2.5 2.7 4 6.1 4 9.5s-1.5 6.8-4 9.5C9.5 18.8 8 15.4 8 12s1.5-6.8 4-9.5z" })
+  ] }) }),
+  rocket: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9-.8-.8-2.1-.8-2.9-.1z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22 22 0 0 1-4 2z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9 12H4s.55-3 2-4c1.6-1 5 0 5 0" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 15v5s3-.5 4-2c1-1.6 0-5 0-5" })
+  ] }) }),
+  wand: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m3 21 9-9" }),
+    /* @__PURE__ */ jsx5("path", { d: "M15 3v3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19 7l-2 2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 11h-3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19 15l-2-2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M15 17v-3" })
+  ] }) }),
+  doc: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M14 2.5H6.5A2 2 0 0 0 4.5 4.5v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8.5z" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "14 2.5 14 8.5 20 8.5" }),
+    /* @__PURE__ */ jsx5("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
+    /* @__PURE__ */ jsx5("line", { x1: "8", y1: "17", x2: "14", y2: "17" })
+  ] }) }),
+  gear: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+  ] }) }),
+  card: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "2", y: "5.5", width: "20", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx5("line", { x1: "2", y1: "10", x2: "22", y2: "10" })
+  ] }) }),
+  chevDblL: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m11 17-5-5 5-5" }),
+    /* @__PURE__ */ jsx5("path", { d: "m18 17-5-5 5-5" })
+  ] }) }),
+  chevDblR: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m13 17 5-5-5-5" }),
+    /* @__PURE__ */ jsx5("path", { d: "m6 17 5-5-5-5" })
+  ] }) }),
+  chevUp: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsx5("polyline", { points: "18 15 12 9 6 15" }) }),
+  userPlus: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx5("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+    /* @__PURE__ */ jsx5("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+  ] }) }),
+  qrcode: /* @__PURE__ */ jsx5(Icon, { d: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 14h3v3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 14v.01" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 21h.01" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 21v-3.5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M17.5 21h.01" })
+  ] }) })
+};
+var Avatar = ({ name, size = "md", color = "bg-violet-500", online }) => {
+  const sizes = { sm: "w-7 h-7 text-[11px]", md: "w-9 h-9 text-xs", lg: "w-11 h-11 text-sm", xl: "w-14 h-14 text-base" };
+  const initials = name.split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ jsxs3("div", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx5("div", { className: `${sizes[size]} ${color} rounded-full text-white font-semibold inline-flex items-center justify-center select-none shrink-0`, children: initials }),
+    online && /* @__PURE__ */ jsx5("span", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-500 ring-2 ring-white" })
+  ] });
+};
+var Pill = ({ children, tone = "slate" }) => {
+  const tones = {
+    slate: "bg-slate-100 text-slate-700 ring-slate-200",
+    amber: "bg-amber-50 text-amber-700 ring-amber-200",
+    emerald: "bg-emerald-50 text-emerald-700 ring-emerald-200",
+    rose: "bg-rose-50 text-rose-700 ring-rose-200",
+    violet: "bg-violet-50 text-violet-700 ring-violet-200",
+    sky: "bg-sky-50 text-sky-700 ring-sky-200",
+    yellow: "bg-yellow-100 text-yellow-800 ring-yellow-200"
+  };
+  return /* @__PURE__ */ jsx5("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ring-1 ring-inset ${tones[tone]}`, children });
+};
+var conversations = [
+  {
+    id: "c1",
+    name: "Samir Patel",
+    phone: "+55 11 98452-1023",
+    avatarColor: "bg-violet-500",
+    preview: "Ol\xE1! Vi o apto de 2 dorm em Vila Mariana, ainda est\xE1\u2026",
+    waitFor: "4m",
+    unread: 0,
+    sla: "risk",
+    priority: "high",
+    status: "in_progress",
+    ticket: "#8743",
+    tier: "Gold",
+    assignee: "Voc\xEA"
+  },
+  {
+    id: "c2",
+    name: "Jenifer Souza",
+    phone: "+55 21 99201-7811",
+    avatarColor: "bg-rose-500",
+    preview: "Oi, tenho uma d\xFAvida sobre a fatura desse m\xEAs \u{1F914}",
+    waitFor: "8m",
+    unread: 2,
+    sla: "breach",
+    priority: "urgent",
+    status: "open",
+    ticket: "#8744",
+    tier: "Platinum",
+    assignee: "Voc\xEA",
+    starred: true
+  },
+  {
+    id: "c3",
+    name: "Ingrid Bahia",
+    phone: "+55 71 98800-4421",
+    avatarColor: "bg-sky-500",
+    preview: "Boa tarde, vamos prosseguir com a troca do plano\u2026",
+    waitFor: "17m",
+    unread: 0,
+    sla: "ok",
+    priority: "normal",
+    status: "waiting",
+    ticket: "#8746",
+    tier: "Silver",
+    assignee: "Voc\xEA"
+  },
+  {
+    id: "c4",
+    name: "Sven Ribeiro",
+    phone: "+55 47 98112-7755",
+    avatarColor: "bg-slate-700",
+    preview: "Sim, ser\xE1 processado em at\xE9 24h corridas.",
+    waitFor: "23m",
+    unread: 0,
+    sla: "ok",
+    priority: "low",
+    status: "in_progress",
+    ticket: "#8749",
+    tier: "Bronze",
+    assignee: "Voc\xEA"
+  },
+  {
+    id: "c5",
+    name: "Marcelo Tavares",
+    phone: "+55 11 95542-3398",
+    avatarColor: "bg-amber-500",
+    preview: "\xC1udio \xB7 0:42",
+    waitFor: "34m",
+    unread: 1,
+    sla: "risk",
+    priority: "high",
+    status: "open",
+    ticket: "#8751",
+    tier: "Gold",
+    assignee: "Fila \u2014 Vendas"
+  },
+  {
+    id: "c6",
+    name: "Helena Prado",
+    phone: "+55 31 99776-2210",
+    avatarColor: "bg-emerald-600",
+    preview: "Documento \xB7 contrato_v3.pdf",
+    waitFor: "52m",
+    unread: 0,
+    sla: "ok",
+    priority: "normal",
+    status: "waiting",
+    ticket: "#8755",
+    tier: "Silver",
+    assignee: "Voc\xEA"
+  }
+];
+var INITIAL_MESSAGES = [
+  { id: "m1", side: "in", kind: "text", text: "Ol\xE1! Vi no site de voc\xEAs o apartamento de 2 dormit\xF3rios em Vila Mariana. Ainda est\xE1 dispon\xEDvel? Tenho interesse em visitar essa semana.", time: "10:02", day: "Hoje" },
+  { id: "m2", side: "out", kind: "text", text: "Ol\xE1 Samir! Tudo bem? Aqui \xE9 a Maria, corretora respons\xE1vel. Sim, o im\xF3vel est\xE1 dispon\xEDvel! Pra eu te ajudar melhor, posso te perguntar uma coisa r\xE1pida \u2014 \xE9 pra moradia ou investimento? E voc\xEA j\xE1 tem uma faixa de valor em mente?", time: "10:04", status: "read" },
+  { id: "m3", side: "in", kind: "text", text: "Pra morar mesmo. Sou casado, sem filhos, e t\xF4 olhando algo na Zona Sul at\xE9 R$ 900 mil. Preciso de vaga de garagem e, se poss\xEDvel, varanda.", time: "10:05" },
+  { id: "m4", side: "in", kind: "image", caption: "Esse \xE9 o estilo de planta que eu gostei", meta: "1.4 MB \xB7 referencia.jpg", time: "10:06" },
+  { id: "m5", side: "note", text: "@Alissa esse cliente tem o perfil ideal pro 65m\xB2 da Vila Mariana (c\xF3d. 856301) e pro 95m\xB2 em Moema (c\xF3d. 858033). Os dois ainda est\xE3o liberados pra visita amanh\xE3? Quero confirmar antes de oferecer.", author: "Maria Eduarda", time: "10:09" },
+  { id: "m6", side: "system", text: "Alissa Mendes foi adicionada \xE0 conversa", time: "10:10" },
+  { id: "m7", side: "out", kind: "text", text: "Samir, tenho duas \xF3timas op\xE7\xF5es pra voc\xEA dentro do or\xE7amento e com vaga + varanda: um 2 dorm em Vila Mariana e um 3 dorm em Moema. Os dois est\xE3o liberados pra visita amanh\xE3. Te mando agora os detalhes e fotos?", time: "10:18", status: "read", author: "Alissa Mendes" },
+  { id: "m8", side: "in", kind: "text", text: "Perfeito, manda sim! \u{1F64F}", time: "10:20" },
+  { id: "m9", side: "in", kind: "audio", duration: "0:18", time: "10:21" },
+  { id: "m10", side: "out", kind: "text", text: "Maravilha! Qual per\xEDodo da semana funciona melhor pra voc\xEA visitar \u2014 manh\xE3 ou final do dia? J\xE1 adianto o agendamento com os propriet\xE1rios. \u{1F60A}", time: "10:24", status: "delivered" }
+];
+var quickReplies = [
+  { id: "q1", label: "Sauda\xE7\xE3o", text: "Ol\xE1! Aqui \xE9 da imobili\xE1ria, tudo bem? Como posso te ajudar a encontrar o im\xF3vel ideal?" },
+  { id: "q2", label: "Perfil", text: "Pra eu te enviar as melhores op\xE7\xF5es, me conta: \xE9 pra moradia ou investimento? Qual regi\xE3o e faixa de valor?" },
+  { id: "q3", label: "Agendar visita", text: "Posso j\xE1 agendar a visita pra voc\xEA. Qual o melhor dia e hor\xE1rio essa semana?" },
+  { id: "q4", label: "Documentos", text: "Pra avan\xE7ar com a proposta, vou precisar de RG, CPF, comprovante de renda e resid\xEAncia. Pode me enviar por aqui mesmo." }
+];
+var statusInfo = {
+  open: { tone: "sky", label: "Aberto" },
+  in_progress: { tone: "amber", label: "Em atendimento" },
+  waiting: { tone: "violet", label: "Aguardando cliente" },
+  resolved: { tone: "emerald", label: "Resolvido" }
+};
+function App() {
+  var _a;
+  const inbox = useInbox();
+  const live = inbox.live;
+  const [mockActiveId, setMockActiveId] = useState4("c1");
+  const activeId = live ? inbox.activeId : mockActiveId;
+  const setActiveId = live ? inbox.setActiveId : setMockActiveId;
+  const [connectOpen, setConnectOpen] = useState4(false);
+  const [transferOpen, setTransferOpen] = useState4(false);
+  const [emojiOpen, setEmojiOpen] = useState4(false);
+  const [filterOpen, setFilterOpen] = useState4(false);
+  const [unreadOnly, setUnreadOnly] = useState4(false);
+  const [mineOnly, setMineOnly] = useState4(false);
+  const [recording, setRecording] = useState4(false);
+  const [recSecs, setRecSecs] = useState4(0);
+  const [composeMode, setComposeMode] = useState4("reply");
+  const [text, setText] = useState4("");
+  const [filter, setFilter] = useState4("all");
+  const [detailsOpen, setDetailsOpen] = useState4(true);
+  const [quickOpen, setQuickOpen] = useState4(false);
+  const [searchOpen, setSearchOpen] = useState4(false);
+  const [searchQuery, setSearchQuery] = useState4("");
+  const [searchIndex, setSearchIndex] = useState4(0);
+  const [messages, setMessages] = useState4(INITIAL_MESSAGES);
+  const threadMessages = live ? inbox.messages : messages;
+  const convList = live ? inbox.conversations : conversations;
+  const scrollRef = useRef3(null);
+  const textareaRef = useRef3(null);
+  const imageInputRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const mediaRecorderRef = useRef3(null);
+  const audioChunksRef = useRef3([]);
+  const cancelAudioRef = useRef3(false);
+  const audioCtxRef = useRef3(null);
+  const analyserRef = useRef3(null);
+  const recTimerRef = useRef3(null);
+  const [listWidth, setListWidth] = useState4(() => {
+    if (typeof window !== "undefined") {
+      const v = parseInt(window.localStorage.getItem("veploy_chat_list_width") || "", 10);
+      if (v >= 300 && v <= 600) return v;
+    }
+    return 380;
+  });
+  const resizingRef = useRef3(false);
+  const listWidthRef = useRef3(listWidth);
+  listWidthRef.current = listWidth;
+  useEffect4(() => {
+    const onMove = (e) => {
+      if (!resizingRef.current) return;
+      setListWidth(Math.min(600, Math.max(300, e.clientX)));
+    };
+    const onUp = () => {
+      if (!resizingRef.current) return;
+      resizingRef.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      try {
+        window.localStorage.setItem("veploy_chat_list_width", String(listWidthRef.current));
+      } catch {
+      }
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+  const startResize = (e) => {
+    resizingRef.current = true;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    e.preventDefault();
+  };
+  const formatNow = () => {
+    const d = /* @__PURE__ */ new Date();
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  };
+  const fileToDataUrl = (file) => new Promise((res, rej) => {
+    const r = new FileReader();
+    r.onload = () => res(r.result);
+    r.onerror = rej;
+    r.readAsDataURL(file);
+  });
+  const insertEmoji = (e) => {
+    var _a2;
+    setText((t) => t + e);
+    setEmojiOpen(false);
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+  };
+  const sendMediaFile = async (file, kind) => {
+    if (!file) return;
+    const previewUrl = URL.createObjectURL(file);
+    const data = await fileToDataUrl(file);
+    if (live) {
+      inbox.sendMedia({ data, mime: file.type, kind, filename: file.name, previewUrl });
+    } else {
+      setMessages((ms) => [...ms, { id: `m${Date.now()}`, side: "out", kind, mediaUrl: previewUrl, meta: file.name, time: formatNow(), status: "sent" }]);
+    }
+  };
+  const onPickImage = async (e) => {
+    var _a2;
+    const f = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+    e.target.value = "";
+    await sendMediaFile(f, "image");
+  };
+  const onPickFile = async (e) => {
+    var _a2;
+    const f = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+    e.target.value = "";
+    await sendMediaFile(f, "document");
+  };
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mr = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+      cancelAudioRef.current = false;
+      const Ctx = window.AudioContext || window.webkitAudioContext;
+      const audioCtx = new Ctx();
+      const source = audioCtx.createMediaStreamSource(stream);
+      const analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 64;
+      source.connect(analyser);
+      audioCtxRef.current = audioCtx;
+      analyserRef.current = analyser;
+      setRecSecs(0);
+      clearInterval(recTimerRef.current);
+      recTimerRef.current = setInterval(() => setRecSecs((s) => s + 1), 1e3);
+      mr.ondataavailable = (ev) => {
+        if (ev.data.size > 0) audioChunksRef.current.push(ev.data);
+      };
+      mr.onstop = async () => {
+        var _a2;
+        stream.getTracks().forEach((t) => t.stop());
+        clearInterval(recTimerRef.current);
+        try {
+          (_a2 = audioCtxRef.current) == null ? void 0 : _a2.close();
+        } catch {
+        }
+        analyserRef.current = null;
+        if (cancelAudioRef.current) return;
+        const blob = new Blob(audioChunksRef.current, { type: mr.mimeType || "audio/webm" });
+        const previewUrl = URL.createObjectURL(blob);
+        const data = await fileToDataUrl(blob);
+        if (live) inbox.sendMedia({ data, mime: blob.type, kind: "audio", filename: "audio", previewUrl });
+        else setMessages((ms) => [...ms, { id: `m${Date.now()}`, side: "out", kind: "audio", mediaUrl: previewUrl, time: formatNow(), status: "sent" }]);
+      };
+      mediaRecorderRef.current = mr;
+      mr.start();
+      setRecording(true);
+    } catch {
+      alert("N\xE3o foi poss\xEDvel acessar o microfone");
+    }
+  };
+  const stopRecording = (cancel = false) => {
+    var _a2;
+    cancelAudioRef.current = cancel;
+    setRecording(false);
+    try {
+      (_a2 = mediaRecorderRef.current) == null ? void 0 : _a2.stop();
+    } catch {
+    }
+  };
+  useEffect4(() => {
+    if (!recording) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") stopRecording(true);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [recording]);
+  const handleSend = () => {
+    const t = text.trim();
+    if (!t) return;
+    if (live) {
+      inbox.send(t, composeMode === "note");
+      setText("");
+      return;
+    }
+    const id = `m${Date.now()}`;
+    const time = formatNow();
+    const msg = composeMode === "note" ? { id, side: "note", text: t, author: "Maria Eduarda", time } : { id, side: "out", kind: "text", text: t, time, status: "sent", author: "Maria Eduarda" };
+    setMessages((ms) => [...ms, msg]);
+    setText("");
+  };
+  const searchMatches = useMemo2(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return [];
+    return threadMessages.filter((m) => {
+      const t = (m.text || m.caption || "").toLowerCase();
+      return t.includes(q);
+    }).map((m) => m.id);
+  }, [searchQuery, threadMessages]);
+  useEffect4(() => {
+    setSearchIndex(0);
+  }, [searchQuery]);
+  useEffect4(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const envOrigins = typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_EMBED_ORIGINS || "";
+    const allowed = envOrigins.split(",").map((s) => s.trim()).filter(Boolean);
+    const onMsg = (e) => {
+      if (allowed.length && !allowed.includes(e.origin)) return;
+      const d = e.data || {};
+      if (d.type === "veploy-chat-auth" && d.token && d.workspace) {
+        const wasLive = !!localStorage.getItem("veploy_chat_token") && !!localStorage.getItem("veploy_chat_workspace");
+        localStorage.setItem("veploy_chat_token", d.token);
+        localStorage.setItem("veploy_chat_workspace", String(d.workspace));
+        if (!wasLive) location.reload();
+      }
+    };
+    window.addEventListener("message", onMsg);
+    try {
+      window.parent.postMessage({ type: "veploy-chat-ready" }, "*");
+    } catch {
+    }
+    return () => window.removeEventListener("message", onMsg);
+  }, []);
+  const currentMatchId = searchMatches[searchIndex];
+  const openSearch = () => {
+    setSearchOpen(true);
+    setSearchQuery("");
+  };
+  const closeSearch = () => {
+    setSearchOpen(false);
+    setSearchQuery("");
+  };
+  const nextMatch = () => searchMatches.length && setSearchIndex((i) => (i + 1) % searchMatches.length);
+  const prevMatch = () => searchMatches.length && setSearchIndex((i) => (i - 1 + searchMatches.length) % searchMatches.length);
+  const active = convList.find((c) => c.id === activeId);
+  useEffect4(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [activeId, threadMessages.length]);
+  const counts = useMemo2(() => ({
+    open: convList.filter((c) => c.status !== "resolved" && c.status !== "waiting").length,
+    pending: convList.filter((c) => c.status === "waiting").length,
+    all: convList.length
+  }), [convList]);
+  const filtered = useMemo2(() => {
+    let list = convList;
+    if (filter === "pending") list = list.filter((c) => c.status === "waiting");
+    else if (filter !== "all") list = list.filter((c) => c.status !== "resolved" && c.status !== "waiting");
+    if (unreadOnly) list = list.filter((c) => c.unread > 0);
+    if (mineOnly) list = list.filter((c) => {
+      var _a2;
+      return ((_a2 = c._raw) == null ? void 0 : _a2.assignee_user_id) && c._raw.assignee_user_id === inbox.me;
+    });
+    return list;
+  }, [filter, convList, unreadOnly, mineOnly, inbox.me]);
+  return /* @__PURE__ */ jsxs3("div", { className: "h-full w-full bg-slate-100 flex text-slate-900", children: [
+    /* @__PURE__ */ jsxs3("main", { className: "flex-1 flex overflow-hidden", children: [
+      /* @__PURE__ */ jsxs3("section", { style: { width: listWidth }, className: "relative bg-white border-r border-slate-200 flex flex-col shrink-0", children: [
+        /* @__PURE__ */ jsxs3("header", { className: "px-4 pt-4 pb-3 border-b border-slate-100", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsx5("h1", { className: "font-semibold text-[15px]", children: "Caixa de entrada" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              live && /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: () => setConnectOpen(true),
+                  title: "Conectar WhatsApp",
+                  className: "p-1.5 rounded-md hover:bg-emerald-50 text-emerald-600",
+                  children: I.qrcode
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: () => setFilterOpen((v) => !v),
+                    title: "Filtros",
+                    className: `p-1.5 rounded-md ${unreadOnly || mineOnly ? "bg-slate-900 text-white" : "hover:bg-slate-100 text-slate-500"}`,
+                    children: I.filter
+                  }
+                ),
+                filterOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute right-0 top-[calc(100%+6px)] z-20 w-52 bg-white border border-slate-200 rounded-xl shadow-lg py-1.5 text-[13px]", children: [
+                  /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 px-3 py-1.5 hover:bg-slate-50 cursor-pointer", children: [
+                    /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: unreadOnly, onChange: (e) => setUnreadOnly(e.target.checked) }),
+                    " S\xF3 n\xE3o lidas"
+                  ] }),
+                  live && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 px-3 py-1.5 hover:bg-slate-50 cursor-pointer", children: [
+                    /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: mineOnly, onChange: (e) => setMineOnly(e.target.checked) }),
+                    " Atribu\xEDdas a mim"
+                  ] }),
+                  (unreadOnly || mineOnly) && /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      onClick: () => {
+                        setUnreadOnly(false);
+                        setMineOnly(false);
+                      },
+                      className: "w-full text-left px-3 py-1.5 text-slate-500 hover:bg-slate-50 border-t border-slate-100 mt-1",
+                      children: "Limpar filtros"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx5("button", { className: "p-1.5 rounded-md text-slate-300 cursor-not-allowed", title: "Ordenar (em breve)", children: I.sort })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx5("span", { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400", children: I.search }),
+            /* @__PURE__ */ jsx5("input", { placeholder: "Buscar conversas, n\xBA ou ticket\u2026", className: "w-full pl-8 pr-3 py-1.5 text-[13px] rounded-lg bg-slate-50 border border-slate-200 focus:bg-white focus:border-slate-300 outline-none" })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2 mt-3 text-[12px]", children: [
+            ["all", "Todas", counts.all],
+            ["pending", "Pendentes", counts.pending],
+            ["open", "Abertas", counts.open]
+          ].map(([k, l, n]) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => setFilter(k),
+              className: `relative px-3 py-1.5 rounded-full font-medium transition-colors
+                    ${filter === k ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`,
+              children: [
+                l,
+                n > 0 && /* @__PURE__ */ jsx5("span", { className: "absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1 rounded-full bg-slate-500 text-white text-[10px] font-bold inline-flex items-center justify-center ring-2 ring-white tabular-nums", children: n > 99 ? "99+" : n })
+              ]
+            },
+            k
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "flex-1 overflow-y-auto", children: filtered.map((c) => /* @__PURE__ */ jsx5(ConversationItem, { c, active: c.id === activeId, onClick: () => {
+          setActiveId(c.id);
+          if (live) inbox.markRead(c.id);
+        } }, c.id)) }),
+        /* @__PURE__ */ jsxs3("footer", { className: "border-t border-slate-100 px-3 py-2 flex items-center justify-between text-[11px] text-slate-500", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
+            "Dispon\xEDvel para atender"
+          ] }),
+          /* @__PURE__ */ jsx5("button", { className: "hover:text-slate-700", children: "Pausar" })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            onMouseDown: startResize,
+            title: "Arraste para redimensionar",
+            className: "absolute top-0 right-0 h-full w-1.5 cursor-col-resize hover:bg-emerald-400/40 active:bg-emerald-500/50 z-10"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("section", { className: "flex-1 flex flex-col bg-slate-50 min-w-0", children: [
+        active && /* @__PURE__ */ jsx5(ChatHeader, { c: active, onToggleDetails: () => setDetailsOpen((v) => !v), detailsOpen, onOpenSearch: openSearch, onTransfer: () => setTransferOpen(true) }),
+        searchOpen && /* @__PURE__ */ jsx5(
+          SearchBar,
+          {
+            query: searchQuery,
+            onChange: setSearchQuery,
+            matches: searchMatches,
+            currentIndex: searchIndex,
+            onPrev: prevMatch,
+            onNext: nextMatch,
+            onClose: closeSearch
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-6 py-5 space-y-1", children: [
+          /* @__PURE__ */ jsx5(DayDivider, { label: "Hoje" }),
+          threadMessages.map((m, i) => /* @__PURE__ */ jsx5(
+            Message,
+            {
+              m,
+              prev: threadMessages[i - 1],
+              searchQuery: searchOpen ? searchQuery : "",
+              isCurrentMatch: m.id === currentMatchId
+            },
+            m.id
+          )),
+          /* @__PURE__ */ jsx5("div", { className: "text-center mt-4", children: /* @__PURE__ */ jsxs3("span", { className: "text-[11px] text-slate-400 inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx5(Avatar, { name: (active == null ? void 0 : active.name) || "", size: "sm", color: active == null ? void 0 : active.avatarColor }),
+            " Conversa criada por voc\xEA \xB7 agora"
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "px-6 pb-5", children: /* @__PURE__ */ jsxs3("div", { className: "bg-white border border-slate-200 rounded-2xl shadow-soft", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 px-3 pt-2 text-[12px]", children: [
+            [
+              ["reply", "Mensagem"],
+              ["note", "Nota interna"]
+            ].map(([k, l]) => /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => setComposeMode(k),
+                className: `px-2.5 py-1 rounded-md font-medium ${composeMode === k ? k === "note" ? "bg-yellow-100 text-yellow-800" : "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`,
+                children: l
+              },
+              k
+            )),
+            /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsxs3("button", { onClick: () => setQuickOpen((v) => !v), className: "px-2.5 py-1 text-slate-600 hover:bg-slate-100 rounded-md inline-flex items-center gap-1 font-medium", children: [
+              "\u2318K ",
+              /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "para respostas r\xE1pidas" })
+            ] })
+          ] }),
+          quickOpen && /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 border-t border-slate-100 bg-slate-50/60 flex flex-wrap gap-1.5", children: quickReplies.map((q) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => {
+                setText(q.text);
+                setQuickOpen(false);
+              },
+              className: "text-[12px] bg-white border border-slate-200 hover:border-slate-300 px-2.5 py-1 rounded-md text-slate-700",
+              children: [
+                /* @__PURE__ */ jsx5("span", { className: "text-slate-400 mr-1", children: "/" }),
+                q.label
+              ]
+            },
+            q.id
+          )) }),
+          /* @__PURE__ */ jsx5("div", { className: `px-4 py-3 ${composeMode === "note" ? "bg-yellow-50" : ""}`, children: /* @__PURE__ */ jsx5(
+            "textarea",
+            {
+              ref: textareaRef,
+              rows: 3,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              },
+              placeholder: composeMode === "note" ? "Adicione uma nota interna \u2014 vis\xEDvel s\xF3 para o time\u2026" : "Digite uma mensagem para Samir\u2026",
+              className: `w-full text-[14px] resize-none bg-transparent outline-none placeholder:text-slate-400 ${composeMode === "note" ? "text-yellow-900 placeholder:text-yellow-600" : ""}`
+            }
+          ) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 px-3 py-2 border-t border-slate-100", children: [
+            recording ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 flex-1", children: [
+              /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-rose-500 animate-pulse shrink-0" }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[12.5px] text-rose-600 font-medium tabular-nums shrink-0", children: fmtSecs(recSecs) }),
+              /* @__PURE__ */ jsx5(AudioWave, { analyserRef }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-slate-400 shrink-0 hidden sm:inline", children: "Esc cancela" }),
+              /* @__PURE__ */ jsx5("button", { onClick: () => stopRecording(true), className: "text-[12.5px] text-slate-500 px-2.5 py-1.5 rounded-lg hover:bg-slate-100 shrink-0", children: "Cancelar" }),
+              /* @__PURE__ */ jsxs3("button", { onClick: () => stopRecording(false), className: "text-[13px] font-medium bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded-lg inline-flex items-center gap-1.5 shrink-0", children: [
+                "Enviar ",
+                /* @__PURE__ */ jsx5("span", { className: "opacity-90", children: I.send })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: () => setEmojiOpen((v) => !v),
+                    title: "Emoji",
+                    className: `px-1.5 py-1.5 rounded-md inline-flex items-center ${emojiOpen ? "bg-slate-100 text-slate-900" : "text-slate-500 hover:bg-slate-100"}`,
+                    children: I.emoji
+                  }
+                ),
+                emojiOpen && /* @__PURE__ */ jsx5(EmojiPicker, { onPick: insertEmoji })
+              ] }),
+              /* @__PURE__ */ jsx5(AttachMenu, { onImage: () => {
+                var _a2;
+                return (_a2 = imageInputRef.current) == null ? void 0 : _a2.click();
+              }, onFile: () => {
+                var _a2;
+                return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+              } }),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: startRecording,
+                  title: "Gravar \xE1udio",
+                  className: "text-slate-500 hover:bg-slate-100 px-1.5 py-1.5 rounded-md inline-flex items-center",
+                  children: I.mic
+                }
+              ),
+              /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  onClick: handleSend,
+                  disabled: !text.trim(),
+                  className: `text-[13px] font-medium px-3.5 py-1.5 rounded-lg inline-flex items-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed ${composeMode === "note" ? "bg-yellow-500 hover:bg-yellow-600 text-white" : "bg-emerald-600 hover:bg-emerald-700 text-white"}`,
+                  children: [
+                    composeMode === "note" ? "Salvar nota" : "Enviar",
+                    /* @__PURE__ */ jsx5("span", { className: "opacity-90", children: I.send })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx5("input", { ref: imageInputRef, type: "file", accept: "image/*", className: "hidden", onChange: onPickImage }),
+            /* @__PURE__ */ jsx5("input", { ref: fileInputRef, type: "file", className: "hidden", onChange: onPickFile })
+          ] })
+        ] }) })
+      ] }),
+      detailsOpen && active && /* @__PURE__ */ jsx5(DetailsPanel, { c: active, onClose: () => setDetailsOpen(false) })
+    ] }),
+    connectOpen && /* @__PURE__ */ jsx5(ConnectChannel, { inbox, onClose: () => setConnectOpen(false) }),
+    transferOpen && active && /* @__PURE__ */ jsx5(TransferModal, { inbox, conversationId: active.id, currentAssignee: (_a = active._raw) == null ? void 0 : _a.assignee_user_id, onClose: () => setTransferOpen(false) })
+  ] });
+}
+function ConversationItem({ c, active, onClick }) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      onClick,
+      className: `w-full text-left px-3 py-3 border-l-2 transition-colors flex gap-3 ${active ? "bg-slate-50 border-emerald-500" : "border-transparent hover:bg-slate-50"}`,
+      children: [
+        /* @__PURE__ */ jsx5(Avatar, { name: c.name, color: c.avatarColor }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+              /* @__PURE__ */ jsx5("span", { className: `text-[13.5px] truncate ${c.unread ? "font-semibold" : "font-medium text-slate-800"}`, children: c.name }),
+              c.starred && /* @__PURE__ */ jsx5("span", { className: "text-amber-400", children: I.star })
+            ] }),
+            /* @__PURE__ */ jsx5("span", { className: `text-[11px] shrink-0 ${c.unread ? "text-emerald-600 font-semibold" : "text-slate-400"}`, children: c.waitFor })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 mt-0.5", children: [
+            /* @__PURE__ */ jsx5("p", { className: `text-[12.5px] truncate ${c.unread ? "text-slate-700" : "text-slate-500"}`, children: c.preview }),
+            c.unread > 0 && /* @__PURE__ */ jsx5("span", { className: "shrink-0 min-w-[18px] h-[18px] px-1.5 rounded-full bg-emerald-500 text-white text-[10px] font-bold inline-flex items-center justify-center", children: c.unread })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-1.5 mt-1.5", children: /* @__PURE__ */ jsx5(Pill, { tone: "slate", children: c.ticket }) })
+        ] })
+      ]
+    }
+  );
+}
+function ChatHeader({ c, onToggleDetails, detailsOpen, onOpenSearch, onTransfer }) {
+  const [menuOpen, setMenuOpen] = useState4(false);
+  const menuRef = useRef3(null);
+  useEffect4(() => {
+    if (!menuOpen) return;
+    const onDoc = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [menuOpen]);
+  return /* @__PURE__ */ jsxs3("header", { className: "bg-white border-b border-slate-200 px-5 py-3 flex items-center gap-3 min-w-0", children: [
+    /* @__PURE__ */ jsx5(Avatar, { name: c.name, color: c.avatarColor, size: "lg", online: true }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2 min-w-0", children: /* @__PURE__ */ jsx5("h2", { className: "font-semibold text-[15px] truncate", children: c.name }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-[12px] text-slate-500 mt-0.5 min-w-0", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1 shrink-0", children: [
+          I.phone,
+          " ",
+          c.phone
+        ] }),
+        /* @__PURE__ */ jsx5("span", { className: "hidden lg:inline text-slate-300 shrink-0", children: "\xB7" }),
+        /* @__PURE__ */ jsxs3("span", { className: "hidden lg:inline-flex items-center gap-1 shrink-0", children: [
+          I.tag,
+          " ",
+          c.ticket
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "hidden 2xl:flex items-center gap-4 text-[12px] pr-3 border-r border-slate-200 shrink-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-end leading-tight", children: [
+        /* @__PURE__ */ jsx5("span", { className: "text-[9.5px] uppercase tracking-wide text-slate-400", children: "SLA" }),
+        /* @__PURE__ */ jsx5("span", { className: "font-semibold text-amber-600 tabular-nums", children: "02:14" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-end leading-tight", children: [
+        /* @__PURE__ */ jsx5("span", { className: "text-[9.5px] uppercase tracking-wide text-slate-400", children: "1\xAA resposta" }),
+        /* @__PURE__ */ jsx5("span", { className: "font-semibold text-emerald-600 tabular-nums", children: "00:48" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("button", { className: "shrink-0 text-[12.5px] font-medium bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded-lg inline-flex items-center gap-1.5", children: [
+      I.check,
+      " ",
+      /* @__PURE__ */ jsx5("span", { className: "hidden lg:inline", children: "Resolver" })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "w-px h-6 bg-slate-200 shrink-0" }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onToggleDetails,
+          title: "Detalhes",
+          className: `p-1.5 rounded-md ${detailsOpen ? "bg-slate-900 text-white" : "text-slate-500 hover:bg-slate-100"}`,
+          children: I.panel
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { ref: menuRef, className: "relative", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: () => setMenuOpen((v) => !v),
+            title: "Mais op\xE7\xF5es",
+            className: `p-1.5 rounded-md ${menuOpen ? "bg-slate-100 text-slate-900" : "text-slate-500 hover:bg-slate-100"}`,
+            children: I.more
+          }
+        ),
+        menuOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute right-0 top-[calc(100%+6px)] z-20 w-56 bg-white border border-slate-200 rounded-xl shadow-lg py-1.5 text-[13px]", children: [
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.phone, label: "Ligar", onClick: () => setMenuOpen(false) }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.forward, label: "Transferir", onClick: () => {
+            setMenuOpen(false);
+            onTransfer == null ? void 0 : onTransfer();
+          } }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.userPlus, label: "Adicionar participantes", onClick: () => setMenuOpen(false) }),
+          /* @__PURE__ */ jsx5("div", { className: "my-1 h-px bg-slate-100" }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.search, label: "Procurar na conversa", onClick: () => {
+            setMenuOpen(false);
+            onOpenSearch == null ? void 0 : onOpenSearch();
+          } }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.star, label: "Marcar com estrela", onClick: () => setMenuOpen(false) }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.tag, label: "Editar tags", onClick: () => setMenuOpen(false) }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.link, label: "Copiar link da conversa", onClick: () => setMenuOpen(false) }),
+          /* @__PURE__ */ jsx5("div", { className: "my-1 h-px bg-slate-100" }),
+          /* @__PURE__ */ jsx5(MenuItem, { icon: I.x, label: "Encerrar sem resolver", tone: "danger", onClick: () => setMenuOpen(false) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function MenuItem({ icon, label, onClick, tone }) {
+  const color = tone === "danger" ? "text-rose-600 hover:bg-rose-50" : "text-slate-700 hover:bg-slate-50";
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      onClick,
+      className: `w-full flex items-center gap-2.5 px-3 py-1.5 ${color}`,
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: tone === "danger" ? "text-rose-500" : "text-slate-500", children: icon }),
+        /* @__PURE__ */ jsx5("span", { className: "flex-1 text-left", children: label })
+      ]
+    }
+  );
+}
+function SearchBar({ query, onChange, matches, currentIndex, onPrev, onNext, onClose }) {
+  const inputRef = useRef3(null);
+  useEffect4(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect4(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.shiftKey ? onPrev() : onNext();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose, onPrev, onNext]);
+  return /* @__PURE__ */ jsxs3("div", { className: "bg-white border-b border-slate-200 px-5 py-2 flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-slate-400 shrink-0", children: I.search }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: "Procurar na conversa\u2026",
+        className: "flex-1 bg-transparent outline-none text-[13.5px] placeholder:text-slate-400 min-w-0"
+      }
+    ),
+    query && /* @__PURE__ */ jsx5("span", { className: "text-[12px] text-slate-500 tabular-nums shrink-0", children: matches.length === 0 ? "sem resultados" : `${currentIndex + 1} de ${matches.length}` }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onPrev,
+          disabled: matches.length === 0,
+          title: "Anterior (Shift+Enter)",
+          className: "p-1 rounded-md text-slate-500 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent",
+          children: I.chevUp
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onNext,
+          disabled: matches.length === 0,
+          title: "Pr\xF3ximo (Enter)",
+          className: "p-1 rounded-md text-slate-500 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent",
+          children: I.chevDown
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onClose,
+          title: "Fechar (Esc)",
+          className: "p-1 rounded-md text-slate-500 hover:bg-slate-100 ml-1",
+          children: I.x
+        }
+      )
+    ] })
+  ] });
+}
+function highlightText(text, query, isCurrent) {
+  if (!query) return text;
+  const q = query.trim();
+  if (!q) return text;
+  const lower = text.toLowerCase();
+  const ql = q.toLowerCase();
+  if (!lower.includes(ql)) return text;
+  const parts = [];
+  let last = 0;
+  let idx = lower.indexOf(ql);
+  let key = 0;
+  while (idx !== -1) {
+    if (idx > last) parts.push(text.slice(last, idx));
+    parts.push(
+      /* @__PURE__ */ jsx5("mark", { className: `rounded px-0.5 ${isCurrent ? "bg-amber-400 text-slate-900" : "bg-yellow-200 text-slate-900"}`, children: text.slice(idx, idx + ql.length) }, key++)
+    );
+    last = idx + ql.length;
+    idx = lower.indexOf(ql, last);
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts;
+}
+function DayDivider({ label }) {
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center my-3", children: /* @__PURE__ */ jsx5("span", { className: "text-[11px] font-medium text-slate-600 bg-white border border-slate-200 rounded-full px-2.5 py-0.5 shadow-soft", children: label }) });
+}
+function Ticks({ status }) {
+  if (status === "sent") return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2713" });
+  if (status === "delivered") return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2713\u2713" });
+  if (status === "read") return /* @__PURE__ */ jsx5("span", { className: "text-sky-500", children: "\u2713\u2713" });
+  return null;
+}
+function Message({ m, searchQuery = "", isCurrentMatch = false }) {
+  if (m.side === "system") {
+    return /* @__PURE__ */ jsx5("div", { className: "flex justify-center my-2", children: /* @__PURE__ */ jsxs3("span", { className: "text-[11px] text-slate-500 bg-slate-100 rounded-full px-2.5 py-0.5", children: [
+      m.text,
+      " \xB7 ",
+      m.time
+    ] }) });
+  }
+  if (m.side === "note") {
+    return /* @__PURE__ */ jsx5("div", { className: "flex justify-end my-2", children: /* @__PURE__ */ jsxs3("div", { className: `max-w-[70%] bg-yellow-50 border rounded-2xl rounded-tr-sm px-3.5 py-2.5 shadow-soft ${isCurrentMatch ? "border-amber-500 ring-2 ring-amber-300" : "border-yellow-200"}`, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-3 mb-1", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "text-[11px] font-semibold text-yellow-800 inline-flex items-center gap-1", children: [
+          I.pin,
+          " Nota interna \xB7 ",
+          m.author
+        ] }),
+        /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-yellow-700", children: m.time })
+      ] }),
+      /* @__PURE__ */ jsx5("p", { className: "text-[13.5px] text-yellow-900 leading-relaxed", children: highlightText(m.text, searchQuery, isCurrentMatch) })
+    ] }) });
+  }
+  const isOut = m.side === "out";
+  return /* @__PURE__ */ jsxs3("div", { className: `flex ${isOut ? "justify-end" : "justify-start"} group`, children: [
+    !isOut && /* @__PURE__ */ jsx5(Avatar, { name: "Samir Patel", color: "bg-violet-500", size: "sm" }),
+    /* @__PURE__ */ jsxs3("div", { className: `mx-2 max-w-[68%] ${isOut ? "order-first" : ""}`, children: [
+      /* @__PURE__ */ jsxs3("div", { className: `relative px-3.5 py-2.5 rounded-2xl shadow-soft ${isOut ? "bg-emerald-600 text-white rounded-tr-sm" : "bg-white border border-slate-200 text-slate-800 rounded-tl-sm"} ${isCurrentMatch ? "ring-2 ring-amber-400" : ""}`, children: [
+        m.kind === "text" && /* @__PURE__ */ jsx5("p", { className: "text-[13.5px] leading-relaxed whitespace-pre-wrap", children: highlightText(m.text, searchQuery, isCurrentMatch) }),
+        m.kind === "image" && /* @__PURE__ */ jsxs3("div", { className: "-mx-1 -mt-1", children: [
+          m.mediaUrl ? /* @__PURE__ */ jsx5("a", { href: m.mediaUrl, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx5("img", { src: m.mediaUrl, alt: m.caption || "imagem", className: "w-64 max-h-72 object-cover rounded-lg" }) }) : /* @__PURE__ */ jsx5("div", { className: "w-64 h-40 rounded-lg bg-gradient-to-br from-slate-200 to-slate-300 flex items-center justify-center text-slate-500", children: I.image }),
+          m.caption && /* @__PURE__ */ jsx5("p", { className: "text-[13px] mt-2", children: highlightText(m.caption, searchQuery, isCurrentMatch) })
+        ] }),
+        m.kind === "video" && /* @__PURE__ */ jsxs3("div", { className: "-mx-1 -mt-1", children: [
+          m.mediaUrl ? /* @__PURE__ */ jsx5("video", { src: m.mediaUrl, controls: true, className: "w-64 rounded-lg" }) : /* @__PURE__ */ jsx5("div", { className: "w-64 h-40 rounded-lg bg-slate-200 flex items-center justify-center text-slate-500", children: "\u{1F3A5}" }),
+          m.caption && /* @__PURE__ */ jsx5("p", { className: "text-[13px] mt-2", children: highlightText(m.caption, searchQuery, isCurrentMatch) })
+        ] }),
+        m.kind === "document" && /* @__PURE__ */ jsxs3(
+          "a",
+          {
+            href: m.mediaUrl || "#",
+            target: "_blank",
+            rel: "noreferrer",
+            className: `flex items-center gap-2.5 min-w-[200px] rounded-lg px-2 py-1.5 ${isOut ? "bg-emerald-700/40" : "bg-slate-100"}`,
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: isOut ? "text-emerald-100" : "text-slate-500", children: I.file }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[13px] truncate flex-1", children: m.meta || m.caption || "arquivo" })
+            ]
+          }
+        ),
+        m.kind === "audio" && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 min-w-[220px]", children: [
+          /* @__PURE__ */ jsx5("button", { className: `w-9 h-9 rounded-full inline-flex items-center justify-center ${isOut ? "bg-emerald-700" : "bg-slate-100 text-slate-700"}`, children: "\u25B6" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx5("div", { className: `h-1 rounded-full ${isOut ? "bg-emerald-700" : "bg-slate-200"} relative overflow-hidden`, children: /* @__PURE__ */ jsx5("div", { className: `h-full w-2/5 ${isOut ? "bg-white" : "bg-emerald-500"}` }) }),
+            /* @__PURE__ */ jsx5("div", { className: `text-[11px] mt-1 ${isOut ? "text-emerald-100" : "text-slate-500"}`, children: m.duration })
+          ] }),
+          /* @__PURE__ */ jsx5("span", { className: isOut ? "text-emerald-100" : "text-slate-400", children: I.mic })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: `flex items-center gap-1 justify-end mt-1 text-[10.5px] ${isOut ? "text-emerald-100" : "text-slate-400"}`, children: [
+          m.author && !isOut === false && /* @__PURE__ */ jsx5("span", { className: "mr-1", children: m.author }),
+          /* @__PURE__ */ jsx5("span", { children: m.time }),
+          isOut && /* @__PURE__ */ jsx5(Ticks, { status: m.status })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: `flex gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity ${isOut ? "justify-end" : "justify-start"}`, children: [
+        /* @__PURE__ */ jsx5(HoverBtn, { icon: I.reply }),
+        /* @__PURE__ */ jsx5(HoverBtn, { icon: I.forward }),
+        /* @__PURE__ */ jsx5(HoverBtn, { icon: I.emoji }),
+        /* @__PURE__ */ jsx5(HoverBtn, { icon: I.more })
+      ] })
+    ] }),
+    isOut && /* @__PURE__ */ jsx5(Avatar, { name: m.author || "Maria Eduarda", color: m.author === "Alissa Mendes" ? "bg-sky-500" : "bg-amber-500", size: "sm" })
+  ] });
+}
+function HoverBtn({ icon }) {
+  return /* @__PURE__ */ jsx5("button", { className: "p-1 rounded-md text-slate-400 bg-white border border-slate-200 hover:text-slate-700 shadow-soft", children: icon });
+}
+function fmtSecs(s) {
+  const m = Math.floor(s / 60);
+  return `${m}:${String(s % 60).padStart(2, "0")}`;
+}
+function AudioWave({ analyserRef }) {
+  const MAX = 56;
+  const [samples, setSamples] = useState4([]);
+  useEffect4(() => {
+    let raf;
+    let last = 0;
+    const buf = [];
+    const loop = (ts) => {
+      const an = analyserRef == null ? void 0 : analyserRef.current;
+      if (an && ts - last > 70) {
+        last = ts;
+        const data = new Uint8Array(an.fftSize);
+        an.getByteTimeDomainData(data);
+        let sum = 0;
+        for (let i = 0; i < data.length; i++) {
+          const v = (data[i] - 128) / 128;
+          sum += v * v;
+        }
+        const rms = Math.sqrt(sum / data.length);
+        buf.push(Math.min(1, rms * 2.4));
+        if (buf.length > MAX) buf.shift();
+        setSamples([...buf]);
+      }
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, [analyserRef]);
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-start gap-[2px] h-7 flex-1 min-w-0 overflow-hidden", children: samples.map((v, i) => /* @__PURE__ */ jsx5(
+    "span",
+    {
+      style: { height: `${Math.max(2, v * 26)}px` },
+      className: "w-[2px] bg-rose-400 rounded-full shrink-0"
+    },
+    i
+  )) });
+}
+function AttachMenu({ onImage, onFile }) {
+  const [open, setOpen] = useState4(false);
+  const ref = useRef3(null);
+  useEffect4(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  return /* @__PURE__ */ jsxs3("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        title: "Anexar",
+        className: `px-1.5 py-1.5 rounded-md inline-flex items-center ${open ? "bg-slate-100 text-slate-900" : "text-slate-500 hover:bg-slate-100"}`,
+        children: I.paperclip
+      }
+    ),
+    open && /* @__PURE__ */ jsxs3("div", { className: "absolute bottom-[calc(100%+6px)] left-0 z-20 w-44 bg-white border border-slate-200 rounded-xl shadow-lg py-1.5 text-[13px]", children: [
+      /* @__PURE__ */ jsx5(MenuItem, { icon: I.image, label: "Imagem", onClick: () => {
+        setOpen(false);
+        onImage == null ? void 0 : onImage();
+      } }),
+      /* @__PURE__ */ jsx5(MenuItem, { icon: I.file, label: "Documento", onClick: () => {
+        setOpen(false);
+        onFile == null ? void 0 : onFile();
+      } })
+    ] })
+  ] });
+}
+function DetailsPanel({ c, onClose }) {
+  const [tab, setTab] = useState4("details");
+  return /* @__PURE__ */ jsxs3("aside", { className: "w-[340px] bg-white border-l border-slate-200 flex flex-col", children: [
+    /* @__PURE__ */ jsxs3("header", { className: "px-4 py-3 border-b border-slate-200 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex gap-3 text-[12.5px]", children: [
+        ["details", "Detalhes"],
+        ["notes", "Notas"],
+        ["history", "Hist\xF3rico"]
+      ].map(([k, l]) => /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => setTab(k),
+          className: `pb-2 -mb-3 font-medium border-b-2 ${tab === k ? "border-slate-900 text-slate-900" : "border-transparent text-slate-500 hover:text-slate-800"}`,
+          children: l
+        },
+        k
+      )) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx5("button", { className: "p-1.5 rounded-md text-slate-500 hover:bg-slate-100", children: I.external }),
+        /* @__PURE__ */ jsx5("button", { onClick: onClose, className: "p-1.5 rounded-md text-slate-500 hover:bg-slate-100", children: I.x })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto", children: [
+      tab === "details" && /* @__PURE__ */ jsx5(DetailsTab, { c }),
+      tab === "notes" && /* @__PURE__ */ jsx5(NotesTab, {}),
+      tab === "history" && /* @__PURE__ */ jsx5(HistoryTab, {})
+    ] })
+  ] });
+}
+function Section({ title, action, children, defaultOpen = true }) {
+  const [open, setOpen] = useState4(defaultOpen);
+  return /* @__PURE__ */ jsxs3("div", { className: "border-b border-slate-100", children: [
+    /* @__PURE__ */ jsxs3("button", { onClick: () => setOpen((v) => !v), className: "w-full px-4 pt-4 pb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: title }),
+      /* @__PURE__ */ jsx5("span", { className: `text-slate-400 transition-transform ${open ? "" : "-rotate-90"}`, children: I.chevDown })
+    ] }),
+    open && /* @__PURE__ */ jsxs3("div", { className: "px-4 pb-4 space-y-2.5", children: [
+      children,
+      action
+    ] })
+  ] });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3 text-[12.5px]", children: [
+    /* @__PURE__ */ jsx5("span", { className: "w-28 shrink-0 text-slate-500 pt-0.5", children: label }),
+    /* @__PURE__ */ jsx5("div", { className: "flex-1 min-w-0 text-slate-800", children })
+  ] });
+}
+var PROPERTY_CATALOG = [
+  { id: "856235", title: "Apto 80m\xB2 \xB7 Jardins \xB7 2 dorm" },
+  { id: "856301", title: "Apto 65m\xB2 \xB7 Vila Mariana \xB7 2 dorm" },
+  { id: "857188", title: "Cobertura 120m\xB2 \xB7 Itaim \xB7 3 dorm" },
+  { id: "854902", title: "Casa 180m\xB2 \xB7 Alto de Pinheiros \xB7 4 dorm" },
+  { id: "855417", title: "Studio 35m\xB2 \xB7 Pinheiros \xB7 1 dorm" },
+  { id: "858033", title: "Apto 95m\xB2 \xB7 Moema \xB7 3 dorm" },
+  { id: "858720", title: "Apto 110m\xB2 \xB7 Perdizes \xB7 3 dorm" }
+];
+function PropertyLinker() {
+  const [linked, setLinked] = useState4([PROPERTY_CATALOG[0], PROPERTY_CATALOG[5]]);
+  const [query, setQuery] = useState4("");
+  const [adding, setAdding] = useState4(false);
+  const inputRef = useRef3(null);
+  const wrapRef = useRef3(null);
+  useEffect4(() => {
+    var _a;
+    if (adding) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [adding]);
+  useEffect4(() => {
+    if (!adding) return;
+    const onDoc = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) closeAdd();
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [adding]);
+  const suggestions = useMemo2(() => {
+    const q = query.trim().toLowerCase();
+    const linkedIds = new Set(linked.map((p) => p.id));
+    return PROPERTY_CATALOG.filter(
+      (p) => !linkedIds.has(p.id) && (q === "" || p.id.toLowerCase().includes(q) || p.title.toLowerCase().includes(q))
+    ).slice(0, 5);
+  }, [query, linked]);
+  const closeAdd = () => {
+    setAdding(false);
+    setQuery("");
+  };
+  const addProperty = (p) => {
+    setLinked((l) => [...l, p]);
+    closeAdd();
+  };
+  const removeProperty = (id) => setLinked((l) => l.filter((p) => p.id !== id));
+  return /* @__PURE__ */ jsxs3("div", { ref: wrapRef, className: "w-full", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+      linked.map((p) => /* @__PURE__ */ jsxs3("div", { className: "group inline-flex items-center gap-0.5 text-[13px] leading-tight", children: [
+        /* @__PURE__ */ jsxs3(
+          "a",
+          {
+            href: "#",
+            title: p.title,
+            className: "text-slate-700 underline underline-offset-2 hover:text-emerald-700 inline-flex items-center gap-1 tabular-nums",
+            children: [
+              p.id,
+              /* @__PURE__ */ jsx5("span", { className: "text-slate-400 group-hover:text-emerald-600", children: I.external })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: () => removeProperty(p.id),
+            title: "Desvincular",
+            className: "opacity-0 group-hover:opacity-100 p-0.5 text-slate-400 hover:text-rose-500 transition-opacity",
+            children: /* @__PURE__ */ jsxs3("svg", { width: "11", height: "11", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.5", fill: "none", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+              /* @__PURE__ */ jsx5("line", { x1: "6", y1: "18", x2: "18", y2: "6" })
+            ] })
+          }
+        )
+      ] }, p.id)),
+      !adding && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => setAdding(true),
+          title: "Vincular im\xF3vel",
+          className: "text-[11px] text-slate-500 hover:text-slate-800 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full border border-dashed border-slate-300 hover:border-slate-400 hover:bg-slate-50",
+          children: "+ im\xF3vel"
+        }
+      )
+    ] }),
+    adding && /* @__PURE__ */ jsxs3("div", { className: "relative mt-2", children: [
+      /* @__PURE__ */ jsx5("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none", children: I.search }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref: inputRef,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") closeAdd();
+          },
+          placeholder: "C\xF3digo ou bairro\u2026",
+          className: "w-full pl-7 pr-2 py-1.5 text-[12px] rounded-lg bg-white border border-slate-300 outline-none focus:border-slate-400 placeholder:text-slate-400"
+        }
+      ),
+      suggestions.length > 0 && /* @__PURE__ */ jsx5("div", { className: "absolute top-full left-0 right-0 mt-1 z-30 bg-white border border-slate-200 rounded-lg shadow-lg overflow-hidden", children: suggestions.map((p) => /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: () => addProperty(p),
+          className: "w-full text-left px-2.5 py-1.5 hover:bg-slate-50 flex items-center gap-2 border-b border-slate-100 last:border-b-0",
+          children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[12.5px] font-mono font-semibold text-slate-700 tabular-nums", children: p.id }),
+            /* @__PURE__ */ jsx5("span", { className: "text-slate-300", children: "\xB7" }),
+            /* @__PURE__ */ jsx5("span", { className: "text-[11.5px] text-slate-500 truncate flex-1 min-w-0", children: p.title }),
+            /* @__PURE__ */ jsx5("span", { className: "text-slate-300 shrink-0", children: I.plus })
+          ]
+        },
+        p.id
+      )) }),
+      query.trim() && suggestions.length === 0 && /* @__PURE__ */ jsxs3("div", { className: "absolute top-full left-0 right-0 mt-1 z-30 bg-white border border-slate-200 rounded-lg shadow-lg px-3 py-2 text-[12px] text-slate-500", children: [
+        'Nenhum im\xF3vel encontrado para "',
+        query.trim(),
+        '".'
+      ] })
+    ] })
+  ] });
+}
+function ActionRow({ icon, label, children, onClick }) {
+  const [open, setOpen] = useState4(false);
+  const hasSubmenu = !!children;
+  const handle = () => hasSubmenu ? setOpen((v) => !v) : onClick == null ? void 0 : onClick();
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: handle,
+        className: "w-full flex items-center gap-2 text-[13px] text-slate-700 hover:bg-slate-50 -mx-1 px-1 py-1 rounded-md",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-slate-500", children: icon }),
+          /* @__PURE__ */ jsx5("span", { className: "flex-1 text-left", children: label }),
+          /* @__PURE__ */ jsx5("span", { className: `text-slate-400 transition-transform ${hasSubmenu && open ? "rotate-90" : ""}`, children: hasSubmenu ? I.chevRight : I.plus })
+        ]
+      }
+    ),
+    hasSubmenu && open && /* @__PURE__ */ jsx5("div", { className: "ml-7 mt-0.5 mb-1 border-l border-slate-200 pl-3 space-y-0.5", children })
+  ] });
+}
+function SubAction({ label, onClick }) {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      onClick,
+      className: "w-full text-left text-[12.5px] text-slate-600 hover:text-slate-900 hover:bg-slate-50 -mx-1 px-1.5 py-1 rounded-md",
+      children: label
+    }
+  );
+}
+function DetailsTab({ c }) {
+  const palette = ["sky", "rose", "violet", "emerald", "amber", "slate"];
+  const [tags, setTags] = useState4([
+    { label: "Comprador", tone: "sky" },
+    { label: "Quente", tone: "rose" },
+    { label: "Apto 2-3 dorm", tone: "violet" },
+    { label: "Zona Sul", tone: "emerald" },
+    { label: "At\xE9 R$ 900k", tone: "amber" }
+  ]);
+  const [expanded, setExpanded] = useState4(false);
+  const [adding, setAdding] = useState4(false);
+  const [newTag, setNewTag] = useState4("");
+  const tagInputRef = useRef3(null);
+  useEffect4(() => {
+    var _a;
+    if (adding) (_a = tagInputRef.current) == null ? void 0 : _a.focus();
+  }, [adding]);
+  const VISIBLE = 3;
+  const shownTags = expanded ? tags : tags.slice(0, VISIBLE);
+  const hiddenCount = Math.max(0, tags.length - VISIBLE);
+  const addTag = () => {
+    const v = newTag.trim();
+    if (v) setTags((t) => [...t, { label: v, tone: palette[t.length % palette.length] }]);
+    setNewTag("");
+    setAdding(false);
+  };
+  const removeTag = (i) => setTags((t) => t.filter((_, idx) => idx !== i));
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "px-4 pt-4 pb-3 flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx5(Avatar, { name: c.name, color: c.avatarColor, size: "xl", online: true }),
+      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx5("div", { className: "font-semibold truncate", children: c.name }),
+        /* @__PURE__ */ jsx5("div", { className: "text-[12px] text-slate-500 truncate", children: c.phone }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-1 mt-1.5", children: [
+          shownTags.map((t, i) => /* @__PURE__ */ jsxs3(Pill, { tone: t.tone, children: [
+            t.label,
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => removeTag(i),
+                title: "Remover",
+                className: "ml-0.5 -mr-0.5 opacity-60 hover:opacity-100",
+                children: /* @__PURE__ */ jsxs3("svg", { width: "10", height: "10", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "18", x2: "18", y2: "6" })
+                ] })
+              }
+            )
+          ] }, `${t.label}-${i}`)),
+          !expanded && hiddenCount > 0 && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => setExpanded(true),
+              className: "text-[11px] text-slate-500 hover:text-slate-800 px-1.5 py-0.5 rounded-full hover:bg-slate-100 self-center",
+              children: [
+                "+",
+                hiddenCount
+              ]
+            }
+          ),
+          expanded && tags.length > VISIBLE && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => setExpanded(false),
+              className: "text-[11px] text-slate-500 hover:text-slate-800 px-1.5 py-0.5 rounded-full hover:bg-slate-100 self-center",
+              children: "mostrar menos"
+            }
+          ),
+          adding ? /* @__PURE__ */ jsx5(
+            "input",
+            {
+              ref: tagInputRef,
+              value: newTag,
+              onChange: (e) => setNewTag(e.target.value),
+              onBlur: addTag,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  addTag();
+                }
+                if (e.key === "Escape") {
+                  setNewTag("");
+                  setAdding(false);
+                }
+              },
+              placeholder: "nova tag\u2026",
+              className: "text-[11px] px-2 py-0.5 rounded-full bg-white border border-slate-300 outline-none focus:border-slate-500 w-24"
+            }
+          ) : /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => {
+                setExpanded(true);
+                setAdding(true);
+              },
+              title: "Adicionar tag",
+              className: "text-[11px] text-slate-500 hover:text-slate-800 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full border border-dashed border-slate-300 hover:border-slate-400 hover:bg-slate-50",
+              children: "+ tag"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(Section, { title: "Atribui\xE7\xE3o", children: [
+      /* @__PURE__ */ jsx5(Row, { label: "Atendente", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx5(Avatar, { name: "Maria Eduarda", size: "sm", color: "bg-amber-500" }),
+        " Maria Eduarda"
+      ] }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Departamento", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-5 h-5 rounded-md bg-rose-500 text-white text-[10px] flex items-center justify-center font-bold", children: "CO" }),
+        "Comercial"
+      ] }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Origem", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 text-emerald-700", children: [
+        I.whatsapp,
+        " WhatsApp Business"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs3(Section, { title: "Ticket", children: [
+      /* @__PURE__ */ jsx5(Row, { label: "Tipo", children: /* @__PURE__ */ jsx5(Pill, { tone: "rose", children: "\u{1F3E0} Interesse em compra" }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Status", children: /* @__PURE__ */ jsx5(Pill, { tone: statusInfo[c.status].tone, children: statusInfo[c.status].label }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Prioridade", children: /* @__PURE__ */ jsx5(Pill, { tone: c.priority === "urgent" ? "rose" : c.priority === "high" ? "amber" : "slate", children: "Alta" }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Im\xF3veis", children: /* @__PURE__ */ jsx5(PropertyLinker, {}) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Aberto", children: "h\xE1 18 min" })
+    ] }),
+    /* @__PURE__ */ jsxs3(Section, { title: "A\xE7\xF5es", children: [
+      /* @__PURE__ */ jsxs3(ActionRow, { icon: I.userPlus, label: "Adicionar cliente", children: [
+        /* @__PURE__ */ jsx5(SubAction, { label: "Propriet\xE1rio" }),
+        /* @__PURE__ */ jsx5(SubAction, { label: "Cliente" })
+      ] }),
+      /* @__PURE__ */ jsx5(ActionRow, { icon: I.checkCircle, label: "Criar tarefa" }),
+      /* @__PURE__ */ jsx5(ActionRow, { icon: I.calendar, label: "Agendar visita" }),
+      /* @__PURE__ */ jsx5(ActionRow, { icon: I.file, label: "Enviar documentos" })
+    ] })
+  ] });
+}
+function NotesTab() {
+  return /* @__PURE__ */ jsxs3("div", { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "bg-yellow-50 border border-yellow-200 rounded-xl p-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "text-[11.5px] font-semibold text-yellow-800 inline-flex items-center gap-1", children: [
+          I.pin,
+          " Maria Eduarda"
+        ] }),
+        /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-yellow-700", children: "h\xE1 11 min" })
+      ] }),
+      /* @__PURE__ */ jsx5("p", { className: "text-[13px] text-yellow-900", children: "Cliente Gold \u2014 perfil quente, decis\xE3o r\xE1pida. J\xE1 visitou conosco em fev/26 (ticket #7892), gostou da regi\xE3o mas o im\xF3vel estava acima do or\xE7amento." })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "bg-yellow-50 border border-yellow-200 rounded-xl p-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "text-[11.5px] font-semibold text-yellow-800 inline-flex items-center gap-1", children: [
+          I.pin,
+          " Alissa Mendes"
+        ] }),
+        /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-yellow-700", children: "h\xE1 4 min" })
+      ] }),
+      /* @__PURE__ */ jsx5("p", { className: "text-[13px] text-yellow-900", children: "Confirmei com os propriet\xE1rios \u2014 Vila Mariana e Moema liberados pra visita amanh\xE3 das 10h \xE0s 17h." })
+    ] }),
+    /* @__PURE__ */ jsxs3("button", { className: "w-full text-[12.5px] py-2 rounded-lg border border-dashed border-slate-300 text-slate-500 hover:bg-slate-50 inline-flex items-center justify-center gap-1", children: [
+      I.plus,
+      " Nova nota"
+    ] })
+  ] });
+}
+function HistoryTab() {
+  const items = [
+    { t: "Ticket #7892 \u2014 Visita apto Itaim", s: "Sem proposta", when: "fev/26", tone: "slate" },
+    { t: "Ticket #7541 \u2014 Interesse em cobertura", s: "Resolvido", when: "jan/26", tone: "emerald" },
+    { t: "Ticket #7233 \u2014 Pedido de matr\xEDcula", s: "Resolvido", when: "dez/25", tone: "emerald" },
+    { t: "Ticket #6890 \u2014 Primeira simula\xE7\xE3o", s: "Resolvido", when: "out/25", tone: "emerald" }
+  ];
+  return /* @__PURE__ */ jsx5("div", { className: "p-4 space-y-2", children: items.map((it, i) => /* @__PURE__ */ jsxs3("button", { className: "w-full text-left bg-white border border-slate-200 hover:border-slate-300 rounded-xl p-3 flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx5("span", { className: "w-8 h-8 rounded-lg bg-slate-100 text-slate-500 flex items-center justify-center", children: I.chat }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-[13px] font-medium truncate", children: it.t }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 mt-1", children: [
+        /* @__PURE__ */ jsx5(Pill, { tone: it.tone, children: it.s }),
+        /* @__PURE__ */ jsx5("span", { className: "text-[11.5px] text-slate-500", children: it.when })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("span", { className: "text-slate-400 mt-1", children: I.chevRight })
+  ] }, i)) });
+}
+
+// src/PloyChat.jsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function PloyChat({
+  apiBase,
+  workspaceId,
+  getToken,
+  supabase,
+  supabaseUrl,
+  supabaseAnonKey,
+  className
+}) {
+  const config = { apiBase, workspaceId, getToken, supabase, supabaseUrl, supabaseAnonKey };
+  return /* @__PURE__ */ jsx6(PloyConfigProvider, { config, children: /* @__PURE__ */ jsx6("div", { className, style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx6(App, {}) }) });
+}
+var PloyChat_default = PloyChat;
+export {
+  PloyChat,
+  PloyChat_default as default
+};
+//# sourceMappingURL=index.js.map