@syncagent/react 0.1.7 → 0.1.9

package/dist/index.mjs

@@ -35,6 +35,7 @@ function useSyncAgent(options = {}) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [status, setStatus] = useState(null);
+  const [lastData, setLastData] = useState(null);
   const abortRef = useRef(null);
   const sendMessage = useCallback(
     async (content) => {
@@ -45,13 +46,19 @@ function useSyncAgent(options = {}) {
       setIsLoading(true);
       setError(null);
       setStatus(null);
+      setLastData(null);
       const placeholder = { role: "assistant", content: "" };
       setMessages([...updated, placeholder]);
       abortRef.current = new AbortController();
       try {
         await client.chat(updated, {
           signal: abortRef.current.signal,
+          context: options.context,
           onStatus: (step, label) => setStatus({ step, label }),
+          onData: (data) => {
+            setLastData(data);
+            options.onData?.(data);
+          },
           onToken: (token) => {
             placeholder.content += token;
             setMessages((prev) => {
@@ -84,7 +91,7 @@ function useSyncAgent(options = {}) {
         abortRef.current = null;
       }
     },
-    [client, messages, isLoading]
+    [client, messages, isLoading, options.context]
   );
   const stop = useCallback(() => {
     abortRef.current?.abort();
@@ -95,8 +102,9 @@ function useSyncAgent(options = {}) {
     setError(null);
     setIsLoading(false);
     setStatus(null);
+    setLastData(null);
   }, []);
-  return { messages, isLoading, error, status, sendMessage, stop, reset };
+  return { messages, isLoading, error, status, lastData, sendMessage, stop, reset };
 }
 
 // src/chat.tsx
@@ -107,20 +115,78 @@ import {
   useCallback as useCallback2
 } from "react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var GLOBAL_CSS = (accent) => `
+var LS = {
+  load: (key) => {
+    try {
+      const r = localStorage.getItem(`sa_${key}`);
+      return r ? JSON.parse(r) : null;
+    } catch {
+      return null;
+    }
+  },
+  save: (key, v) => {
+    try {
+      localStorage.setItem(`sa_${key}`, JSON.stringify(v));
+    } catch {
+    }
+  },
+  del: (key) => {
+    try {
+      localStorage.removeItem(`sa_${key}`);
+    } catch {
+    }
+  }
+};
+function mdTableToCSV(text) {
+  const match = text.match(/\|(.+)\|\r?\n\|[-| :]+\|\r?\n((?:\|.+\|\r?\n?)+)/);
+  if (!match) return null;
+  const headers = match[1].split("|").map((c) => c.trim()).filter(Boolean);
+  const rows = match[2].trim().split("\n").map(
+    (row) => row.split("|").map((c) => c.trim()).filter(Boolean)
+  );
+  const escape = (v) => `"${v.replace(/"/g, '""')}"`;
+  return [headers.map(escape).join(","), ...rows.map((r) => r.map(escape).join(","))].join("\n");
+}
+function downloadCSV(csv, filename = "syncagent-export.csv") {
+  const blob = new Blob([csv], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function BarChart({ data, accent }) {
+  const max = Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsx2("div", { style: { margin: "10px 0", padding: "12px", background: "#f8fafc", borderRadius: 10, border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "flex-end", gap: 6, height: 80 }, children: data.slice(0, 12).map((d, i) => /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { width: "100%", background: `${accent}cc`, borderRadius: "3px 3px 0 0", height: `${d.value / max * 68}px`, minHeight: 2, transition: "height .3s" }, title: `${d.label}: ${d.value}` }),
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 9, color: "#94a3b8", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", width: "100%", textAlign: "center" }, children: d.label })
+  ] }, i)) }) });
+}
+function detectChartData(data) {
+  if (!data?.data?.length) return null;
+  const rows = data.data;
+  const keys = Object.keys(rows[0]);
+  const labelKey = keys.find((k) => typeof rows[0][k] === "string" || k === "_id");
+  const valueKey = keys.find((k) => typeof rows[0][k] === "number" && k !== labelKey);
+  if (!labelKey || !valueKey) return null;
+  return rows.map((r) => ({ label: String(r[labelKey] ?? ""), value: Number(r[valueKey] ?? 0) }));
+}
+var CSS = (accent) => `
   @keyframes sa-bounce { 0%,80%,100%{transform:translateY(0);opacity:.35} 40%{transform:translateY(-5px);opacity:1} }
   @keyframes sa-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
   @keyframes sa-cursor { 0%,100%{opacity:1} 50%{opacity:0} }
   @keyframes sa-pulse  { 0%,100%{opacity:.6} 50%{opacity:1} }
+  @keyframes sa-shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
   .sa-msg  { animation: sa-fadein .22s cubic-bezier(.16,1,.3,1) }
-  .sa-fab  { transition: transform .2s, box-shadow .2s }
   .sa-fab:hover { transform: scale(1.08) }
   .sa-fab:active { transform: scale(.96) }
   .sa-chip:hover { background: ${accent}22 !important; border-color: ${accent}88 !important }
   .sa-send:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.05) }
   .sa-send:active:not(:disabled) { transform: scale(.96) }
   .sa-send:disabled { opacity: .4; cursor: not-allowed }
-  .sa-copy:hover { opacity: 1 !important; background: rgba(0,0,0,.06) !important }
+  .sa-act:hover { opacity: 1 !important; background: rgba(0,0,0,.06) !important }
+  .sa-react:hover { transform: scale(1.2) }
   .sa-scroll::-webkit-scrollbar { width: 4px }
   .sa-scroll::-webkit-scrollbar-track { background: transparent }
   .sa-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px }
@@ -130,7 +196,7 @@ var GLOBAL_CSS = (accent) => `
   .sa-md td { padding:6px 10px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top }
   .sa-md tr:last-child td { border-bottom:none }
   .sa-md tr:hover td { background:rgba(0,0,0,.02) }
-  .sa-md pre { background:#0f1117; color:#e2e8f0; padding:14px 16px; border-radius:10px; overflow-x:auto; font-size:12px; line-height:1.7; margin:10px 0; font-family:'Fira Code','Cascadia Code','JetBrains Mono',monospace; border:1px solid rgba(255,255,255,.06) }
+  .sa-md pre { background:#0f1117; color:#e2e8f0; padding:14px 16px; border-radius:10px; overflow-x:auto; font-size:12px; line-height:1.7; margin:10px 0; font-family:'Fira Code','Cascadia Code',monospace; border:1px solid rgba(255,255,255,.06) }
   .sa-md code { background:rgba(0,0,0,.07); padding:2px 6px; border-radius:4px; font-size:12px; font-family:monospace; color:#1e293b }
   .sa-md pre code { background:none; padding:0; color:inherit; font-size:inherit }
   .sa-md ul,.sa-md ol { margin:6px 0; padding-left:20px }
@@ -150,10 +216,10 @@ var GLOBAL_CSS = (accent) => `
   }
 `;
 function md(text) {
-  let s = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => `<pre><code class="lang-${lang}">${code.trimEnd()}</code></pre>`).replace(/`([^`\n]+)`/g, "<code>$1</code>").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>").replace(/^---$/gm, "<hr/>").replace(/\|(.+)\|\r?\n\|[-| :]+\|\r?\n((?:\|.+\|\r?\n?)+)/g, (_, hdr, body) => {
-    const ths = hdr.split("|").filter((c) => c.trim()).map((c) => `<th>${c.trim()}</th>`).join("");
-    const trs = body.trim().split("\n").map((row) => {
-      const tds = row.split("|").filter((c) => c.trim()).map((c) => `<td>${c.trim()}</td>`).join("");
+  let s = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/```(\w*)\n?([\s\S]*?)```/g, (_, l, c) => `<pre><code class="lang-${l}">${c.trimEnd()}</code></pre>`).replace(/`([^`\n]+)`/g, "<code>$1</code>").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>").replace(/^---$/gm, "<hr/>").replace(/\|(.+)\|\r?\n\|[-| :]+\|\r?\n((?:\|.+\|\r?\n?)+)/g, (_, h, b) => {
+    const ths = h.split("|").filter((c) => c.trim()).map((c) => `<th>${c.trim()}</th>`).join("");
+    const trs = b.trim().split("\n").map((r) => {
+      const tds = r.split("|").filter((c) => c.trim()).map((c) => `<td>${c.trim()}</td>`).join("");
       return `<tr>${tds}</tr>`;
     }).join("");
     return `<div style="overflow-x:auto"><table><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
@@ -161,109 +227,58 @@ function md(text) {
   return `<p>${s}</p>`;
 }
 function Dots({ color }) {
-  return /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", padding: "4px 2px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx2("span", { style: {
-    width: 7,
-    height: 7,
-    borderRadius: "50%",
-    background: color,
-    display: "inline-block",
-    animation: "sa-bounce 1.3s infinite",
-    animationDelay: `${i * 0.18}s`
-  } }, i)) });
+  return /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", padding: "4px 2px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx2("span", { style: { width: 7, height: 7, borderRadius: "50%", background: color, display: "inline-block", animation: "sa-bounce 1.3s infinite", animationDelay: `${i * 0.18}s` } }, i)) });
 }
-function Copy({ text }) {
+function CopyBtn({ text }) {
   const [ok, setOk] = useState2(false);
-  return /* @__PURE__ */ jsx2("button", { className: "sa-copy", onClick: () => {
+  return /* @__PURE__ */ jsx2("button", { className: "sa-act", onClick: () => {
     navigator.clipboard?.writeText(text).then(() => {
       setOk(true);
       setTimeout(() => setOk(false), 1600);
     });
-  }, title: "Copy response", style: {
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    padding: "3px 7px",
-    borderRadius: 5,
-    fontSize: 11,
-    color: "#94a3b8",
-    opacity: 0.65,
-    transition: "all .15s",
-    display: "flex",
-    alignItems: "center",
-    gap: 3
-  }, children: ok ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, style: { background: "none", border: "none", cursor: "pointer", padding: "3px 7px", borderRadius: 5, fontSize: 11, color: "#94a3b8", opacity: 0.65, transition: "all .15s", display: "flex", alignItems: "center", gap: 3 }, children: ok ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }),
-    " Copied"
+    "Copied"
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }),
-    " Copy"
+    "Copy"
   ] }) });
 }
-function Bubble({ role, content, streaming, accent, time }) {
+function Bubble({ role, content, streaming, accent, time, idx, reactions, onReact, onRetry, chartData, hasTable }) {
   const isUser = role === "user";
   const t = time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  return /* @__PURE__ */ jsxs("div", { className: "sa-msg", style: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: isUser ? "flex-end" : "flex-start",
-    gap: 4,
-    maxWidth: "90%",
-    alignSelf: isUser ? "flex-end" : "flex-start"
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: 6,
-      flexDirection: isUser ? "row-reverse" : "row"
-    }, children: [
-      /* @__PURE__ */ jsx2("div", { style: {
-        width: 26,
-        height: 26,
-        borderRadius: "50%",
-        flexShrink: 0,
-        background: isUser ? `linear-gradient(135deg,${accent},${adj(accent, -25)})` : "linear-gradient(135deg,#6366f1,#8b5cf6)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: 11,
-        color: "white",
-        fontWeight: 700,
-        boxShadow: isUser ? `0 2px 8px ${accent}44` : "0 2px 8px #6366f144"
-      }, children: isUser ? "U" : "\u2726" }),
+  const cur = reactions[idx];
+  const csv = hasTable ? mdTableToCSV(content) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "sa-msg", style: { display: "flex", flexDirection: "column", alignItems: isUser ? "flex-end" : "flex-start", gap: 4, maxWidth: "90%", alignSelf: isUser ? "flex-end" : "flex-start" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, flexDirection: isUser ? "row-reverse" : "row" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { width: 26, height: 26, borderRadius: "50%", flexShrink: 0, background: isUser ? `linear-gradient(135deg,${accent},${adj(accent, -25)})` : "linear-gradient(135deg,#6366f1,#8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, color: "white", fontWeight: 700, boxShadow: isUser ? `0 2px 8px ${accent}44` : "0 2px 8px #6366f144" }, children: isUser ? "U" : "\u2726" }),
       /* @__PURE__ */ jsx2("span", { style: { fontSize: 11.5, fontWeight: 600, color: isUser ? "#475569" : "#6366f1" }, children: isUser ? "You" : "SyncAgent" }),
       /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: "#cbd5e1" }, children: t })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: isUser ? "10px 14px" : "12px 16px",
-      borderRadius: isUser ? "18px 4px 18px 18px" : "4px 18px 18px 18px",
-      background: isUser ? `linear-gradient(135deg,${accent},${adj(accent, -20)})` : "#ffffff",
-      color: isUser ? "white" : "#1e293b",
-      fontSize: 13.5,
-      lineHeight: 1.65,
-      wordBreak: "break-word",
-      border: isUser ? "none" : "1px solid #e8edf3",
-      boxShadow: isUser ? `0 4px 16px ${accent}33` : "0 2px 12px rgba(0,0,0,0.07)",
-      maxWidth: "100%"
-    }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: isUser ? "10px 14px" : "12px 16px", borderRadius: isUser ? "18px 4px 18px 18px" : "4px 18px 18px 18px", background: isUser ? `linear-gradient(135deg,${accent},${adj(accent, -20)})` : "#ffffff", color: isUser ? "white" : "#1e293b", fontSize: 13.5, lineHeight: 1.65, wordBreak: "break-word", border: isUser ? "none" : "1px solid #e8edf3", boxShadow: isUser ? `0 4px 16px ${accent}33` : "0 2px 12px rgba(0,0,0,0.07)", maxWidth: "100%" }, children: [
       streaming && !content ? /* @__PURE__ */ jsx2(Dots, { color: accent }) : isUser ? /* @__PURE__ */ jsx2("span", { style: { whiteSpace: "pre-wrap" }, children: content }) : /* @__PURE__ */ jsx2("div", { className: "sa-md", dangerouslySetInnerHTML: { __html: md(content) } }),
       streaming && content && /* @__PURE__ */ jsx2("span", { className: "sa-cursor", style: { color: accent } })
     ] }),
-    !isUser && content && !streaming && /* @__PURE__ */ jsx2("div", { style: { paddingLeft: 32, display: "flex", gap: 2 }, children: /* @__PURE__ */ jsx2(Copy, { text: content }) })
+    !isUser && !streaming && chartData && chartData.length > 1 && /* @__PURE__ */ jsx2("div", { style: { paddingLeft: 32, width: "calc(100% - 32px)" }, children: /* @__PURE__ */ jsx2(BarChart, { data: chartData, accent }) }),
+    !isUser && content && !streaming && /* @__PURE__ */ jsxs("div", { style: { paddingLeft: 32, display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx2(CopyBtn, { text: content }),
+      csv && /* @__PURE__ */ jsxs("button", { className: "sa-act", onClick: () => downloadCSV(csv), style: { background: "none", border: "none", cursor: "pointer", padding: "3px 7px", borderRadius: 5, fontSize: 11, color: "#94a3b8", opacity: 0.65, transition: "all .15s", display: "flex", alignItems: "center", gap: 3 }, children: [
+        /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }),
+        "CSV"
+      ] }),
+      ["up", "down"].map((r) => /* @__PURE__ */ jsx2("button", { className: "sa-react", onClick: () => onReact(idx, r), style: { background: cur === r ? r === "up" ? `${accent}18` : "#fef2f2" : "none", border: cur === r ? `1px solid ${r === "up" ? accent + "44" : "#fecaca"}` : "none", cursor: "pointer", padding: "3px 6px", borderRadius: 5, fontSize: 13, transition: "all .15s", opacity: cur && cur !== r ? 0.3 : 0.7 }, children: r === "up" ? "\u{1F44D}" : "\u{1F44E}" }, r)),
+      onRetry && /* @__PURE__ */ jsxs("button", { className: "sa-act", onClick: onRetry, style: { background: "none", border: "none", cursor: "pointer", padding: "3px 7px", borderRadius: 5, fontSize: 11, color: "#94a3b8", opacity: 0.65, transition: "all .15s", display: "flex", alignItems: "center", gap: 3 }, children: [
+        /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) }),
+        "Retry"
+      ] })
+    ] })
   ] });
 }
-function Chips({ items, onPick, accent }) {
-  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 14px 10px" }, children: items.map((s) => /* @__PURE__ */ jsx2("button", { className: "sa-chip", onClick: () => onPick(s), style: {
-    padding: "5px 13px",
-    borderRadius: 20,
-    fontSize: 12,
-    cursor: "pointer",
-    border: `1px solid ${accent}33`,
-    background: `${accent}0a`,
-    color: accent,
-    fontWeight: 500,
-    transition: "all .15s",
-    whiteSpace: "nowrap"
-  }, children: s }, s)) });
+function Chips({ items, onPick, accent, onPin, pinned }) {
+  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 14px 10px" }, children: items.map((s) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 0 }, children: [
+    /* @__PURE__ */ jsx2("button", { className: "sa-chip", onClick: () => onPick(s), style: { padding: "5px 10px 5px 13px", borderRadius: onPin ? "20px 0 0 20px" : "20px", fontSize: 12, cursor: "pointer", border: `1px solid ${accent}33`, borderRight: onPin ? "none" : "", background: `${accent}0a`, color: accent, fontWeight: 500, transition: "all .15s", whiteSpace: "nowrap" }, children: s }),
+    onPin && /* @__PURE__ */ jsx2("button", { onClick: () => onPin(s), title: pinned?.includes(s) ? "Unpin" : "Pin", style: { padding: "5px 7px", borderRadius: "0 20px 20px 0", fontSize: 10, cursor: "pointer", border: `1px solid ${accent}33`, borderLeft: "none", background: pinned?.includes(s) ? `${accent}18` : `${accent}0a`, color: accent, transition: "all .15s" }, children: pinned?.includes(s) ? "\u{1F4CC}" : "\u{1F4CD}" })
+  ] }, s)) });
 }
 function ChatInner({
   mode = "floating",
@@ -276,75 +291,127 @@ function ChatInner({
   accentColor = "#10b981",
   className,
   style: customStyle,
-  suggestions = ["Show all records", "Count total entries", "Show recent activity"]
+  suggestions = ["Show all records", "Count total entries", "Show recent activity"],
+  persistKey,
+  context,
+  onReaction,
+  onData
 }) {
-  const { messages, isLoading, error, status, sendMessage, stop, reset } = useSyncAgent();
+  const { messages, isLoading, error, status, lastData, sendMessage, stop, reset } = useSyncAgent({ context, onData });
   const [open, setOpen] = useState2(defaultOpen);
   const [input, setInput] = useState2("");
-  const [ts] = useState2(() => /* @__PURE__ */ new Map());
+  const [ts, setTs] = useState2([]);
+  const [reactions, setReactions] = useState2({});
+  const [panelH, setPanelH] = useState2(600);
+  const [lastUserMsg, setLastUserMsg] = useState2("");
+  const [pinnedQueries, setPinnedQueries] = useState2(() => persistKey ? LS.load(`pins_${persistKey}`) || [] : []);
+  const [historyIdx, setHistoryIdx] = useState2(-1);
+  const [chartDataMap, setChartDataMap] = useState2({});
   const endRef = useRef2(null);
   const inputRef = useRef2(null);
-  const prevLen = useRef2(0);
-  if (messages.length > prevLen.current) {
-    for (let i = prevLen.current; i < messages.length; i++)
-      if (!ts.has(i)) ts.set(i, /* @__PURE__ */ new Date());
-    prevLen.current = messages.length;
-  }
+  const resizeRef = useRef2(null);
+  const PKEY = persistKey || "default";
+  useEffect(() => {
+    if (messages.length > ts.length) {
+      setTs((prev) => {
+        const n = [...prev];
+        while (n.length < messages.length) n.push(/* @__PURE__ */ new Date());
+        return n;
+      });
+    }
+  }, [messages.length]);
+  useEffect(() => {
+    if (!persistKey || messages.length === 0) return;
+    LS.save(`chat_${PKEY}`, { messages, ts: ts.map((t) => t?.toISOString() ?? null) });
+  }, [messages, ts, persistKey]);
+  useEffect(() => {
+    if (!lastData) return;
+    const chart = detectChartData(lastData);
+    if (chart) {
+      const lastAiIdx = [...messages].reverse().findIndex((m) => m.role === "assistant");
+      if (lastAiIdx >= 0) {
+        const idx = messages.length - 1 - lastAiIdx;
+        setChartDataMap((prev) => ({ ...prev, [idx]: chart }));
+      }
+    }
+  }, [lastData]);
   useEffect(() => {
     endRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, isLoading]);
   useEffect(() => {
     if (open) setTimeout(() => inputRef.current?.focus(), 120);
   }, [open]);
-  const send = useCallback2(() => {
-    const t = input.trim();
+  const send = useCallback2((text) => {
+    const t = (text || input).trim();
     if (!t || isLoading) return;
+    setLastUserMsg(t);
+    setHistoryIdx(-1);
     setInput("");
     sendMessage(t);
   }, [input, isLoading, sendMessage]);
+  const userMessages = messages.filter((m) => m.role === "user").map((m) => m.content);
   const onKey = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       send();
+      return;
+    }
+    if (e.key === "ArrowUp" && !input.trim()) {
+      e.preventDefault();
+      const next = Math.min(historyIdx + 1, userMessages.length - 1);
+      setHistoryIdx(next);
+      setInput(userMessages[userMessages.length - 1 - next] || "");
+    }
+    if (e.key === "ArrowDown" && historyIdx >= 0) {
+      e.preventDefault();
+      const next = historyIdx - 1;
+      setHistoryIdx(next);
+      setInput(next < 0 ? "" : userMessages[userMessages.length - 1 - next] || "");
     }
   };
+  const handleReact = useCallback2((idx, r) => {
+    setReactions((prev) => ({ ...prev, [idx]: prev[idx] === r ? void 0 : r }));
+    onReaction?.(idx, r, messages[idx]?.content || "");
+  }, [messages, onReaction]);
+  const togglePin = useCallback2((q) => {
+    setPinnedQueries((prev) => {
+      const next = prev.includes(q) ? prev.filter((p) => p !== q) : [...prev, q];
+      if (persistKey) LS.save(`pins_${PKEY}`, next);
+      return next;
+    });
+  }, [persistKey]);
+  const newConversation = useCallback2(() => {
+    if (persistKey) LS.del(`chat_${PKEY}`);
+    setTs([]);
+    setReactions({});
+    setLastUserMsg("");
+    setHistoryIdx(-1);
+    setChartDataMap({});
+    reset();
+  }, [reset, persistKey]);
+  const onResizeStart = useCallback2((e) => {
+    e.preventDefault();
+    resizeRef.current = { startY: e.clientY, startH: panelH };
+    const onMove = (ev) => {
+      if (!resizeRef.current) return;
+      setPanelH(Math.min(Math.max(resizeRef.current.startH + (resizeRef.current.startY - ev.clientY), 320), window.innerHeight - 120));
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, [panelH]);
   const noMsgs = messages.length === 0;
-  const panel = /* @__PURE__ */ jsxs("div", { className: `sa-panel ${className || ""}`, style: {
-    height: mode === "inline" ? "100%" : 600,
-    maxHeight: mode === "inline" ? "none" : "calc(100vh - 110px)",
-    background: "#f8fafc",
-    borderRadius: mode === "inline" ? 14 : 20,
-    boxShadow: mode === "inline" ? "0 2px 20px rgba(0,0,0,.08)" : "0 24px 64px rgba(0,0,0,.18), 0 4px 24px rgba(0,0,0,.08)",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",
-    border: "1px solid rgba(0,0,0,.07)",
-    ...customStyle
-  }, children: [
-    /* @__PURE__ */ jsx2("style", { children: GLOBAL_CSS(accentColor) }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: "13px 16px",
-      background: `linear-gradient(135deg,${accentColor},${adj(accentColor, -28)})`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      flexShrink: 0,
-      boxShadow: "0 2px 12px rgba(0,0,0,.12)"
-    }, children: [
+  const allChips = [.../* @__PURE__ */ new Set([...pinnedQueries, ...noMsgs ? suggestions : []])];
+  const panel = /* @__PURE__ */ jsxs("div", { className: `sa-panel ${className || ""}`, style: { height: mode === "inline" ? "100%" : panelH, maxHeight: mode === "inline" ? "none" : "calc(100vh - 110px)", background: "#f8fafc", borderRadius: mode === "inline" ? 14 : 20, boxShadow: mode === "inline" ? "0 2px 20px rgba(0,0,0,.08)" : "0 24px 64px rgba(0,0,0,.18),0 4px 24px rgba(0,0,0,.08)", display: "flex", flexDirection: "column", overflow: "hidden", fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif", border: "1px solid rgba(0,0,0,.07)", ...customStyle }, children: [
+    /* @__PURE__ */ jsx2("style", { children: CSS(accentColor) }),
+    mode === "floating" && /* @__PURE__ */ jsx2("div", { onMouseDown: onResizeStart, style: { height: 8, flexShrink: 0, cursor: "ns-resize", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx2("div", { style: { width: 32, height: 3, borderRadius: 2, background: "rgba(0,0,0,.1)" } }) }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "11px 16px", background: `linear-gradient(135deg,${accentColor},${adj(accentColor, -28)})`, display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0, boxShadow: "0 2px 12px rgba(0,0,0,.12)" }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ jsx2("div", { style: {
-          width: 36,
-          height: 36,
-          borderRadius: "50%",
-          background: "rgba(255,255,255,.18)",
-          backdropFilter: "blur(8px)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 17,
-          boxShadow: "0 2px 8px rgba(0,0,0,.15)"
-        }, children: "\u2726" }),
+        /* @__PURE__ */ jsx2("div", { style: { width: 36, height: 36, borderRadius: "50%", background: "rgba(255,255,255,.18)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, boxShadow: "0 2px 8px rgba(0,0,0,.15)" }, children: "\u2726" }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx2("div", { style: { color: "white", fontWeight: 700, fontSize: 14, lineHeight: 1.2, letterSpacing: "-0.01em" }, children: title }),
           /* @__PURE__ */ jsx2("div", { style: { color: "rgba(255,255,255,.72)", fontSize: 11, marginTop: 1 }, children: isLoading ? /* @__PURE__ */ jsxs("span", { style: { animation: "sa-pulse 1.2s infinite" }, children: [
@@ -354,111 +421,60 @@ function ChatInner({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
-        messages.length > 0 && /* @__PURE__ */ jsx2("button", { onClick: reset, style: {
-          background: "rgba(255,255,255,.15)",
-          border: "none",
-          color: "white",
-          cursor: "pointer",
-          borderRadius: 7,
-          padding: "4px 9px",
-          fontSize: 11,
-          fontWeight: 500,
-          backdropFilter: "blur(4px)"
-        }, children: "Clear" }),
-        mode === "floating" && /* @__PURE__ */ jsx2("button", { onClick: () => setOpen(false), style: {
-          background: "rgba(255,255,255,.15)",
-          border: "none",
-          color: "white",
-          cursor: "pointer",
-          borderRadius: 7,
-          padding: "4px 9px",
-          fontSize: 18,
-          lineHeight: 1,
-          backdropFilter: "blur(4px)"
-        }, children: "\xD7" })
+        messages.length > 0 && /* @__PURE__ */ jsxs("button", { onClick: newConversation, style: { background: "rgba(255,255,255,.15)", border: "none", color: "white", cursor: "pointer", borderRadius: 7, padding: "4px 9px", fontSize: 11, fontWeight: 500, backdropFilter: "blur(4px)", display: "flex", alignItems: "center", gap: 4 }, children: [
+          /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }),
+          "New"
+        ] }),
+        mode === "floating" && /* @__PURE__ */ jsx2("button", { onClick: () => setOpen(false), style: { background: "rgba(255,255,255,.15)", border: "none", color: "white", cursor: "pointer", borderRadius: 7, padding: "4px 9px", fontSize: 18, lineHeight: 1, backdropFilter: "blur(4px)" }, children: "\xD7" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "sa-scroll", style: {
-      flex: 1,
-      overflowY: "auto",
-      padding: "16px 14px 8px",
-      display: "flex",
-      flexDirection: "column",
-      gap: 16,
-      background: "#f8fafc"
-    }, children: [
-      noMsgs && /* @__PURE__ */ jsxs("div", { style: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "32px 20px",
-        textAlign: "center"
-      }, children: [
-        /* @__PURE__ */ jsx2("div", { style: {
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          marginBottom: 14,
-          background: `linear-gradient(135deg,${accentColor}18,${accentColor}35)`,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 24,
-          boxShadow: `0 4px 20px ${accentColor}22`
-        }, children: "\u2726" }),
+    /* @__PURE__ */ jsxs("div", { className: "sa-scroll", style: { flex: 1, overflowY: "auto", padding: "16px 14px 8px", display: "flex", flexDirection: "column", gap: 16, background: "#f8fafc" }, children: [
+      noMsgs && /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "32px 20px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx2("div", { style: { width: 56, height: 56, borderRadius: "50%", marginBottom: 14, background: `linear-gradient(135deg,${accentColor}18,${accentColor}35)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, boxShadow: `0 4px 20px ${accentColor}22` }, children: "\u2726" }),
         /* @__PURE__ */ jsx2("p", { style: { fontSize: 14, color: "#64748b", lineHeight: 1.65, maxWidth: 260, margin: 0 }, children: welcomeMessage })
       ] }),
       messages.map((msg, i) => /* @__PURE__ */ jsx2(
         Bubble,
         {
+          idx: i,
           role: msg.role,
           content: msg.content,
           streaming: isLoading && i === messages.length - 1 && msg.role === "assistant",
           accent: accentColor,
-          time: ts.get(i) ?? /* @__PURE__ */ new Date()
+          time: ts[i] ?? /* @__PURE__ */ new Date(),
+          reactions,
+          onReact: handleReact,
+          chartData: chartDataMap[i],
+          hasTable: msg.content.includes("|"),
+          onRetry: !isLoading && i === messages.length - 1 && msg.role === "assistant" && !!error ? () => send(lastUserMsg) : void 0
         },
         i
       )),
-      error && /* @__PURE__ */ jsxs("div", { style: {
-        padding: "10px 14px",
-        borderRadius: 10,
-        fontSize: 13,
-        background: "#fef2f2",
-        color: "#dc2626",
-        border: "1px solid #fecaca",
-        alignSelf: "flex-start",
-        display: "flex",
-        alignItems: "center",
-        gap: 6
-      }, children: [
+      error && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 14px", borderRadius: 10, fontSize: 13, background: "#fef2f2", color: "#dc2626", border: "1px solid #fecaca", alignSelf: "flex-start", display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }),
-        error.message
+        /* @__PURE__ */ jsx2("span", { children: error.message }),
+        lastUserMsg && /* @__PURE__ */ jsxs("button", { onClick: () => send(lastUserMsg), style: { marginLeft: 4, padding: "3px 10px", borderRadius: 6, border: "1px solid #fecaca", background: "white", color: "#dc2626", cursor: "pointer", fontSize: 11, fontWeight: 600, display: "flex", alignItems: "center", gap: 3 }, children: [
+          /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) }),
+          "Retry"
+        ] })
       ] }),
       /* @__PURE__ */ jsx2("div", { ref: endRef })
     ] }),
-    noMsgs && suggestions.length > 0 && /* @__PURE__ */ jsx2(Chips, { items: suggestions, onPick: (s) => {
-      setInput(s);
-      inputRef.current?.focus();
-    }, accent: accentColor }),
-    isLoading && status && status.step !== "done" && /* @__PURE__ */ jsxs("div", { style: {
-      padding: "7px 14px",
-      borderTop: "1px solid #f0f4f8",
-      background: "#fafbfc",
-      display: "flex",
-      alignItems: "center",
-      gap: 8,
-      flexShrink: 0
-    }, children: [
-      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 3 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx2("div", { style: {
-        width: 5,
-        height: 5,
-        borderRadius: "50%",
-        background: accentColor,
-        animation: "sa-bounce 1.2s infinite",
-        animationDelay: `${i * 0.15}s`
-      } }, i)) }),
+    allChips.length > 0 && /* @__PURE__ */ jsx2(
+      Chips,
+      {
+        items: allChips,
+        onPick: (s) => {
+          setInput(s);
+          inputRef.current?.focus();
+        },
+        accent: accentColor,
+        onPin: togglePin,
+        pinned: pinnedQueries
+      }
+    ),
+    isLoading && status && status.step !== "done" && /* @__PURE__ */ jsxs("div", { style: { padding: "7px 14px", borderTop: "1px solid #f0f4f8", background: "#fafbfc", display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 3 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx2("div", { style: { width: 5, height: 5, borderRadius: "50%", background: accentColor, animation: "sa-bounce 1.2s infinite", animationDelay: `${i * 0.15}s` } }, i)) }),
       /* @__PURE__ */ jsxs("span", { style: { fontSize: 11.5, color: "#64748b", fontWeight: 500 }, children: [
         status.step === "connecting" && "\u{1F50C} ",
         status.step === "schema" && "\u{1F4CB} ",
@@ -468,22 +484,8 @@ function ChatInner({
         status.label
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: "10px 12px 12px",
-      borderTop: "1px solid #e8edf3",
-      background: "#ffffff",
-      flexShrink: 0
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex",
-        gap: 8,
-        alignItems: "flex-end",
-        background: "#f1f5f9",
-        borderRadius: 14,
-        border: "1.5px solid #e2e8f0",
-        padding: "8px 8px 8px 14px",
-        transition: "border-color .15s, box-shadow .15s"
-      }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px 12px", borderTop: "1px solid #e8edf3", background: "#ffffff", flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-end", background: "#f1f5f9", borderRadius: 14, border: "1.5px solid #e2e8f0", padding: "8px 8px 8px 14px", transition: "border-color .15s,box-shadow .15s" }, children: [
         /* @__PURE__ */ jsx2(
           "textarea",
           {
@@ -512,111 +514,32 @@ function ChatInner({
             placeholder,
             disabled: isLoading,
             rows: 1,
-            style: {
-              flex: 1,
-              background: "none",
-              border: "none",
-              resize: "none",
-              fontSize: 13.5,
-              lineHeight: 1.55,
-              color: "#1e293b",
-              fontFamily: "inherit",
-              padding: 0,
-              maxHeight: 130,
-              outline: "none"
-            }
+            style: { flex: 1, background: "none", border: "none", resize: "none", fontSize: 13.5, lineHeight: 1.55, color: "#1e293b", fontFamily: "inherit", padding: 0, maxHeight: 130, outline: "none" }
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 5, alignItems: "flex-end", flexShrink: 0 }, children: [
-          isLoading && /* @__PURE__ */ jsxs("button", { onClick: stop, style: {
-            background: "#fef2f2",
-            border: "1px solid #fecaca",
-            color: "#dc2626",
-            borderRadius: 9,
-            padding: "6px 11px",
-            cursor: "pointer",
-            fontSize: 11.5,
-            fontWeight: 600,
-            display: "flex",
-            alignItems: "center",
-            gap: 4
-          }, children: [
+          isLoading && /* @__PURE__ */ jsxs("button", { onClick: stop, style: { background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", borderRadius: 9, padding: "6px 11px", cursor: "pointer", fontSize: 11.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 4 }, children: [
             /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "16", height: "16" }) }),
             "Stop"
           ] }),
-          /* @__PURE__ */ jsx2("button", { className: "sa-send", onClick: send, disabled: isLoading || !input.trim(), style: {
-            width: 36,
-            height: 36,
-            borderRadius: 10,
-            border: "none",
-            background: input.trim() && !isLoading ? `linear-gradient(135deg,${accentColor},${adj(accentColor, -20)})` : "#e2e8f0",
-            color: input.trim() && !isLoading ? "white" : "#94a3b8",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            transition: "all .15s",
-            flexShrink: 0,
-            boxShadow: input.trim() && !isLoading ? `0 3px 12px ${accentColor}44` : "none"
-          }, children: /* @__PURE__ */ jsx2("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })
+          /* @__PURE__ */ jsx2("button", { className: "sa-send", onClick: () => send(), disabled: isLoading || !input.trim(), style: { width: 36, height: 36, borderRadius: 10, border: "none", background: input.trim() && !isLoading ? `linear-gradient(135deg,${accentColor},${adj(accentColor, -20)})` : "#e2e8f0", color: input.trim() && !isLoading ? "white" : "#94a3b8", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "all .15s", flexShrink: 0, boxShadow: input.trim() && !isLoading ? `0 3px 12px ${accentColor}44` : "none" }, children: /* @__PURE__ */ jsx2("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginTop: 7, fontSize: 10, color: "#c4cdd8", letterSpacing: ".01em" }, children: [
         "Powered by ",
         /* @__PURE__ */ jsx2("span", { style: { color: accentColor, fontWeight: 600 }, children: "SyncAgent" }),
         /* @__PURE__ */ jsx2("span", { style: { margin: "0 5px", opacity: 0.5 }, children: "\xB7" }),
-        "Enter to send \xB7 Shift+Enter for new line"
+        "Enter to send \xB7 \u2191\u2193 history \xB7 Shift+Enter new line"
       ] })
     ] })
   ] });
   if (mode === "inline") return panel;
   const left = position === "bottom-left";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("div", { className: "sa-panel-float", style: {
-      position: "fixed",
-      bottom: 84,
-      zIndex: 99998,
-      ...left ? { left: 16 } : { right: 16 },
-      width: 430,
-      maxWidth: "calc(100vw - 32px)",
-      transition: "opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1)",
-      opacity: open ? 1 : 0,
-      transform: open ? "translateY(0) scale(1)" : "translateY(20px) scale(.95)",
-      pointerEvents: open ? "auto" : "none"
-    }, children: panel }),
-    /* @__PURE__ */ jsxs("button", { className: "sa-fab", onClick: () => setOpen((o) => !o), style: {
-      position: "fixed",
-      bottom: 16,
-      zIndex: 99999,
-      ...left ? { left: 16 } : { right: 16 },
-      width: 58,
-      height: 58,
-      borderRadius: "50%",
-      border: "none",
-      background: `linear-gradient(135deg,${accentColor},${adj(accentColor, -28)})`,
-      cursor: "pointer",
-      boxShadow: `0 6px 24px ${accentColor}55, 0 2px 8px rgba(0,0,0,.18)`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, children: [
-      /* @__PURE__ */ jsx2("div", { style: {
-        transition: "transform .3s cubic-bezier(.16,1,.3,1), opacity .2s",
-        transform: open ? "rotate(90deg) scale(.9)" : "rotate(0) scale(1)",
-        opacity: open ? 0.85 : 1,
-        display: "flex"
-      }, children: open ? /* @__PURE__ */ jsx2("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }) }) }),
-      !open && messages.length > 0 && /* @__PURE__ */ jsx2("div", { style: {
-        position: "absolute",
-        top: 3,
-        right: 3,
-        width: 13,
-        height: 13,
-        borderRadius: "50%",
-        background: "#ef4444",
-        border: "2.5px solid white",
-        animation: "sa-pulse 2s infinite"
-      } })
+    /* @__PURE__ */ jsx2("div", { className: "sa-panel-float", style: { position: "fixed", bottom: 84, zIndex: 99998, ...left ? { left: 16 } : { right: 16 }, width: 430, maxWidth: "calc(100vw - 32px)", transition: "opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1)", opacity: open ? 1 : 0, transform: open ? "translateY(0) scale(1)" : "translateY(20px) scale(.95)", pointerEvents: open ? "auto" : "none" }, children: panel }),
+    /* @__PURE__ */ jsxs("button", { className: "sa-fab", onClick: () => setOpen((o) => !o), style: { position: "fixed", bottom: 16, zIndex: 99999, ...left ? { left: 16 } : { right: 16 }, width: 58, height: 58, borderRadius: "50%", border: "none", background: `linear-gradient(135deg,${accentColor},${adj(accentColor, -28)})`, cursor: "pointer", boxShadow: `0 6px 24px ${accentColor}55,0 2px 8px rgba(0,0,0,.18)`, display: "flex", alignItems: "center", justifyContent: "center", transition: "transform .2s,box-shadow .2s" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { transition: "transform .3s cubic-bezier(.16,1,.3,1),opacity .2s", transform: open ? "rotate(90deg) scale(.9)" : "rotate(0) scale(1)", opacity: open ? 0.85 : 1, display: "flex" }, children: open ? /* @__PURE__ */ jsx2("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }) }) }),
+      !open && messages.length > 0 && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 3, right: 3, width: 13, height: 13, borderRadius: "50%", background: "#ef4444", border: "2.5px solid white", animation: "sa-pulse 2s infinite" } })
     ] })
   ] });
 }