@syncagent/react 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -34,6 +34,7 @@ function useSyncAgent(options = {}) {
   const [messages, setMessages] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [status, setStatus] = useState(null);
   const abortRef = useRef(null);
   const sendMessage = useCallback(
     async (content) => {
@@ -43,12 +44,14 @@ function useSyncAgent(options = {}) {
       setMessages(updated);
       setIsLoading(true);
       setError(null);
+      setStatus(null);
       const placeholder = { role: "assistant", content: "" };
       setMessages([...updated, placeholder]);
       abortRef.current = new AbortController();
       try {
         await client.chat(updated, {
           signal: abortRef.current.signal,
+          onStatus: (step, label) => setStatus({ step, label }),
           onToken: (token) => {
             placeholder.content += token;
             setMessages((prev) => {
@@ -58,6 +61,7 @@ function useSyncAgent(options = {}) {
             });
           },
           onComplete: (text) => {
+            setStatus(null);
             setMessages((prev) => {
               const next = [...prev];
               next[next.length - 1] = { role: "assistant", content: text };
@@ -76,6 +80,7 @@ function useSyncAgent(options = {}) {
         }
       } finally {
         setIsLoading(false);
+        setStatus(null);
         abortRef.current = null;
       }
     },
@@ -89,8 +94,9 @@ function useSyncAgent(options = {}) {
     setMessages([]);
     setError(null);
     setIsLoading(false);
+    setStatus(null);
   }, []);
-  return { messages, isLoading, error, sendMessage, stop, reset };
+  return { messages, isLoading, error, status, sendMessage, stop, reset };
 }
 
 // src/chat.tsx
@@ -101,30 +107,63 @@ import {
   useCallback as useCallback2
 } from "react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var GLOBAL_CSS = (accent) => `
+function loadHistory(key) {
+  try {
+    const raw = localStorage.getItem(`sa_chat_${key}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed.timestamps) {
+      parsed.timestamps = parsed.timestamps.map((t) => t ? new Date(t) : null);
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function saveHistory(key, messages, timestamps) {
+  try {
+    localStorage.setItem(`sa_chat_${key}`, JSON.stringify({
+      messages,
+      timestamps: timestamps.map((t) => t?.toISOString() ?? null),
+      savedAt: (/* @__PURE__ */ new Date()).toISOString()
+    }));
+  } catch {
+  }
+}
+function clearHistory(key) {
+  try {
+    localStorage.removeItem(`sa_chat_${key}`);
+  } catch {
+  }
+}
+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-react.active { transform: scale(1.15) }
   .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 }
   .sa-cursor { display:inline-block; width:2px; height:1em; background:currentColor; margin-left:1px; vertical-align:text-bottom; animation: sa-cursor .7s infinite }
+  .sa-resize { cursor: ns-resize; user-select: none }
+  .sa-resize:hover::after { opacity: 1 }
   .sa-md table { width:100%; border-collapse:collapse; font-size:12.5px; margin:10px 0 }
   .sa-md th { padding:7px 10px; text-align:left; font-weight:600; background:rgba(0,0,0,.04); border-bottom:2px solid rgba(0,0,0,.1); white-space:nowrap }
   .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 }
@@ -144,10 +183,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>`;
@@ -155,109 +194,61 @@ 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 ReactionBtns({ idx, reactions, onReact, accent }) {
+  const cur = reactions[idx];
+  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 2 }, children: ["up", "down"].map((r) => /* @__PURE__ */ jsx2("button", { className: `sa-react${cur === r ? " active" : ""}`, onClick: () => onReact(idx, r), title: r === "up" ? "Helpful" : "Not helpful", 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)) });
+}
+function Bubble({ role, content, streaming, accent, time, idx, reactions, onReact, onRetry, hasError }) {
   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" }),
+  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%", animation: hasError ? "sa-shake .3s ease" : "none" }, 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 && content && !streaming && /* @__PURE__ */ jsxs("div", { style: { paddingLeft: 32, display: "flex", gap: 2, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx2(CopyBtn, { text: content }),
+      /* @__PURE__ */ jsx2(ReactionBtns, { idx, reactions, onReact, accent }),
+      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)) });
+  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 ChatInner({
   mode = "floating",
@@ -270,29 +261,52 @@ 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,
+  onReaction
 }) {
-  const { messages, isLoading, error, sendMessage, stop, reset } = useSyncAgent();
+  const { messages, isLoading, error, status, sendMessage, stop, reset } = useSyncAgent();
   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 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 STORAGE_KEY = persistKey || "default";
+  const loaded = useRef2(false);
+  useEffect(() => {
+    if (loaded.current || !persistKey) return;
+    loaded.current = true;
+    const saved = loadHistory(STORAGE_KEY);
+    if (saved?.messages?.length) {
+    }
+  }, []);
+  useEffect(() => {
+    if (!persistKey || messages.length === 0) return;
+    saveHistory(STORAGE_KEY, messages, ts);
+  }, [messages, ts, persistKey]);
+  useEffect(() => {
+    if (messages.length > ts.length) {
+      setTs((prev) => {
+        const next = [...prev];
+        while (next.length < messages.length) next.push(/* @__PURE__ */ new Date());
+        return next;
+      });
+    }
+  }, [messages.length]);
   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);
     setInput("");
     sendMessage(t);
   }, [input, isLoading, sendMessage]);
@@ -302,13 +316,40 @@ function ChatInner({
       send();
     }
   };
+  const handleReact = useCallback2((idx, r) => {
+    setReactions((prev) => ({ ...prev, [idx]: prev[idx] === r ? void 0 : r }));
+    onReaction?.(idx, r, messages[idx]?.content || "");
+  }, [messages, onReaction]);
+  const newConversation = useCallback2(() => {
+    if (persistKey) clearHistory(STORAGE_KEY);
+    setTs([]);
+    setReactions({});
+    setLastUserMsg("");
+    reset();
+  }, [reset, persistKey]);
+  const onResizeStart = useCallback2((e) => {
+    e.preventDefault();
+    resizeRef.current = { startY: e.clientY, startH: panelH };
+    const onMove = (ev) => {
+      if (!resizeRef.current) return;
+      const delta = resizeRef.current.startY - ev.clientY;
+      setPanelH(Math.min(Math.max(resizeRef.current.startH + delta, 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,
+    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)",
+    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",
@@ -316,116 +357,64 @@ function ChatInner({
     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)})`,
+    /* @__PURE__ */ jsx2("style", { children: CSS(accentColor) }),
+    mode === "floating" && /* @__PURE__ */ jsx2("div", { className: "sa-resize", onMouseDown: onResizeStart, style: {
+      height: 6,
+      flexShrink: 0,
+      cursor: "ns-resize",
+      background: "transparent",
+      position: "relative",
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between",
-      flexShrink: 0,
-      boxShadow: "0 2px 12px rgba(0,0,0,.12)"
-    }, children: [
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ jsx2("div", { style: { width: 32, height: 3, borderRadius: 2, background: "rgba(0,0,0,.12)" } }) }),
+    /* @__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__ */ jsx2("span", { style: { animation: "sa-pulse 1.2s infinite" }, children: "\u25CF Thinking..." }) : subtitle })
+          /* @__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: [
+            "\u25CF ",
+            status?.label || "Thinking..."
+          ] }) : subtitle })
         ] })
       ] }),
       /* @__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, title: "New conversation", 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,
+          onRetry: !isLoading && i === messages.length - 1 && msg.role === "assistant" && !!error ? () => send(lastUserMsg) : void 0,
+          hasError: !!error && i === messages.length - 1 && msg.role === "assistant"
         },
         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 })
     ] }),
@@ -433,22 +422,19 @@ function ChatInner({
       setInput(s);
       inputRef.current?.focus();
     }, accent: accentColor }),
-    /* @__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: [
+    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} ",
+        status.step === "thinking" && "\u{1F9E0} ",
+        status.step === "querying" && "\u{1F50D} ",
+        status.step === "writing" && "\u270F\uFE0F ",
+        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__ */ jsx2(
           "textarea",
           {
@@ -477,53 +463,15 @@ 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: [
@@ -537,51 +485,10 @@ function ChatInner({
   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" } })
     ] })
   ] });
 }