@syncagent/react 0.1.4 → 0.1.6

package/dist/index.js

@@ -125,62 +125,107 @@ function useSyncAgent(options = {}) {
 // src/chat.tsx
 var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function renderMarkdown(text) {
-  return text.replace(/```[\w]*\n?([\s\S]*?)```/g, `<pre style="background:#1e1e2e;color:#cdd6f4;padding:12px 14px;border-radius:8px;overflow-x:auto;font-size:12px;line-height:1.6;margin:8px 0;font-family:'Fira Code','Cascadia Code',monospace">$1</pre>`).replace(/`([^`]+)`/g, '<code style="background:rgba(0,0,0,0.08);padding:2px 6px;border-radius:4px;font-size:12px;font-family:monospace">$1</code>').replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/^### (.+)$/gm, '<div style="font-weight:700;font-size:13px;margin:10px 0 4px">$1</div>').replace(/^## (.+)$/gm, '<div style="font-weight:700;font-size:14px;margin:12px 0 4px">$1</div>').replace(/^# (.+)$/gm, '<div style="font-weight:700;font-size:15px;margin:12px 0 6px">$1</div>').replace(/\|(.+)\|\n\|[-| :]+\|\n((?:\|.+\|\n?)+)/g, (_, header, rows) => {
-    const ths = header.split("|").filter((c) => c.trim()).map((c) => `<th style="padding:6px 10px;text-align:left;font-weight:600;border-bottom:2px solid rgba(0,0,0,0.1)">${c.trim()}</th>`).join("");
-    const trs = rows.trim().split("\n").map((row) => {
-      const tds = row.split("|").filter((c) => c.trim()).map((c) => `<td style="padding:6px 10px;border-bottom:1px solid rgba(0,0,0,0.06)">${c.trim()}</td>`).join("");
+var GLOBAL_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} }
+  .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-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-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 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 }
+  .sa-md li { margin:3px 0; line-height:1.6 }
+  .sa-md h1 { font-size:16px; font-weight:700; margin:14px 0 6px; color:#0f172a }
+  .sa-md h2 { font-size:14px; font-weight:700; margin:12px 0 5px; color:#0f172a }
+  .sa-md h3 { font-size:13px; font-weight:600; margin:10px 0 4px; color:#1e293b }
+  .sa-md p  { margin:4px 0; line-height:1.65 }
+  .sa-md strong { font-weight:600; color:#0f172a }
+  .sa-md em { font-style:italic; color:#475569 }
+  .sa-md blockquote { border-left:3px solid rgba(0,0,0,.15); padding:4px 12px; margin:8px 0; color:#64748b; font-style:italic }
+  .sa-md hr { border:none; border-top:1px solid rgba(0,0,0,.1); margin:12px 0 }
+  .sa-md a { color:${accent}; text-decoration:underline }
+  @media (max-width:480px) {
+    .sa-panel-float { width:calc(100vw - 24px) !important; right:12px !important; left:12px !important; bottom:76px !important }
+    .sa-panel { border-radius:14px !important; height:calc(100vh - 100px) !important; max-height:none !important }
+  }
+`;
+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("");
       return `<tr>${tds}</tr>`;
     }).join("");
-    return `<div style="overflow-x:auto;margin:8px 0"><table style="width:100%;border-collapse:collapse;font-size:13px"><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
-  }).replace(/^[-*] (.+)$/gm, '<li style="margin:2px 0;padding-left:4px">$1</li>').replace(/(<li[^>]*>.*<\/li>\n?)+/g, (m) => `<ul style="margin:6px 0;padding-left:18px;list-style:disc">${m}</ul>`).replace(/^\d+\. (.+)$/gm, '<li style="margin:2px 0;padding-left:4px">$1</li>').replace(/\n\n/g, "<br/><br/>").replace(/\n/g, "<br/>");
+    return `<div style="overflow-x:auto"><table><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
+  }).replace(/^[-*+] (.+)$/gm, "<li>$1</li>").replace(/(<li>[\s\S]*?<\/li>\n?)+/g, (m) => `<ul>${m}</ul>`).replace(/^\d+\. (.+)$/gm, "<li>$1</li>").replace(/\n\n+/g, "</p><p>").replace(/\n/g, "<br/>");
+  return `<p>${s}</p>`;
 }
-function TypingDots({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", padding: "2px 0" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
-    width: 6,
-    height: 6,
+function Dots({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", padding: "4px 2px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
+    width: 7,
+    height: 7,
     borderRadius: "50%",
     background: color,
-    animation: "sa-bounce 1.2s infinite",
-    animationDelay: `${i * 0.2}s`,
-    display: "inline-block"
+    display: "inline-block",
+    animation: "sa-bounce 1.3s infinite",
+    animationDelay: `${i * 0.18}s`
   } }, i)) });
 }
-function CopyBtn({ text }) {
-  const [copied, setCopied] = (0, import_react3.useState)(false);
-  const copy = (0, import_react3.useCallback)(() => {
+function Copy({ text }) {
+  const [ok, setOk] = (0, import_react3.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "sa-copy", onClick: () => {
     navigator.clipboard?.writeText(text).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
+      setOk(true);
+      setTimeout(() => setOk(false), 1600);
     });
-  }, [text]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: copy, title: "Copy", style: {
+  }, title: "Copy response", style: {
     background: "none",
     border: "none",
     cursor: "pointer",
-    padding: "2px 6px",
-    borderRadius: 4,
+    padding: "3px 7px",
+    borderRadius: 5,
     fontSize: 11,
-    color: "#9ca3af",
-    opacity: 0.7,
-    transition: "opacity 0.15s"
-  }, children: copied ? "\u2713" : "\u2398" });
+    color: "#94a3b8",
+    opacity: 0.65,
+    transition: "all .15s",
+    display: "flex",
+    alignItems: "center",
+    gap: 3
+  }, children: ok ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }),
+    " Copied"
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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"
+  ] }) });
 }
-function MessageBubble({
-  role,
-  content,
-  isStreaming,
-  accentColor,
-  timestamp
-}) {
+function Bubble({ role, content, streaming, accent, time }) {
   const isUser = role === "user";
-  const timeStr = timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+  const t = time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "sa-msg", style: {
     display: "flex",
     flexDirection: "column",
     alignItems: isUser ? "flex-end" : "flex-start",
-    gap: 3,
-    maxWidth: "88%",
+    gap: 4,
+    maxWidth: "90%",
     alignSelf: isUser ? "flex-end" : "flex-start"
   }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
@@ -190,48 +235,53 @@ function MessageBubble({
       flexDirection: isUser ? "row-reverse" : "row"
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-        width: 24,
-        height: 24,
+        width: 26,
+        height: 26,
         borderRadius: "50%",
-        background: isUser ? accentColor : "linear-gradient(135deg,#6366f1,#8b5cf6)",
+        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,
-        flexShrink: 0
+        boxShadow: isUser ? `0 2px 8px ${accent}44` : "0 2px 8px #6366f144"
       }, children: isUser ? "U" : "\u2726" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 11, color: "#9ca3af", fontWeight: 500 }, children: isUser ? "You" : "SyncAgent" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: "#d1d5db" }, children: timeStr })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 11.5, fontWeight: 600, color: isUser ? "#475569" : "#6366f1" }, children: isUser ? "You" : "SyncAgent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: "#cbd5e1" }, children: t })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-      padding: "10px 14px",
-      borderRadius: isUser ? "16px 4px 16px 16px" : "4px 16px 16px 16px",
-      background: isUser ? accentColor : "#f8fafc",
+    /* @__PURE__ */ (0, import_jsx_runtime2.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.6,
+      lineHeight: 1.65,
       wordBreak: "break-word",
-      border: isUser ? "none" : "1px solid #e2e8f0",
-      boxShadow: isUser ? `0 2px 8px ${accentColor}33` : "0 1px 4px rgba(0,0,0,0.06)",
-      position: "relative"
-    }, children: isStreaming && !content ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TypingDots, { color: accentColor }) : isUser ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { whiteSpace: "pre-wrap" }, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }) }),
-    !isUser && content && !isStreaming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { paddingLeft: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyBtn, { text: content }) })
+      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__ */ (0, import_jsx_runtime2.jsx)(Dots, { color: accent }) : isUser ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { whiteSpace: "pre-wrap" }, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sa-md", dangerouslySetInnerHTML: { __html: md(content) } }),
+      streaming && content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sa-cursor", style: { color: accent } })
+    ] }),
+    !isUser && content && !streaming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { paddingLeft: 32, display: "flex", gap: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Copy, { text: content }) })
   ] });
 }
-function Suggestions({ items, onSelect, accentColor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 16px 12px" }, children: items.map((s2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onSelect(s2), style: {
-    padding: "5px 12px",
+function Chips({ items, onPick, accent }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 14px 10px" }, children: items.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "sa-chip", onClick: () => onPick(s), style: {
+    padding: "5px 13px",
     borderRadius: 20,
     fontSize: 12,
     cursor: "pointer",
-    border: `1px solid ${accentColor}44`,
-    background: `${accentColor}0d`,
-    color: accentColor,
+    border: `1px solid ${accent}33`,
+    background: `${accent}0a`,
+    color: accent,
     fontWeight: 500,
-    transition: "all 0.15s"
-  }, children: s2 }, s2)) });
+    transition: "all .15s",
+    whiteSpace: "nowrap"
+  }, children: s }, s)) });
 }
 function ChatInner({
   mode = "floating",
@@ -240,135 +290,152 @@ function ChatInner({
   title = "SyncAgent",
   subtitle = "AI Database Assistant",
   placeholder = "Ask anything about your data...",
-  welcomeMessage = "Hi! I can query, analyze, and manage your database using natural language. What would you like to know?",
+  welcomeMessage = "Hi! I can query, analyze, and manage your database using natural language.",
   accentColor = "#10b981",
   className,
   style: customStyle,
   suggestions = ["Show all records", "Count total entries", "Show recent activity"]
 }) {
   const { messages, isLoading, error, sendMessage, stop, reset } = useSyncAgent();
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react3.useState)(defaultOpen);
   const [input, setInput] = (0, import_react3.useState)("");
-  const [timestamps] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
-  const messagesEndRef = (0, import_react3.useRef)(null);
+  const [ts] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
+  const endRef = (0, import_react3.useRef)(null);
   const inputRef = (0, import_react3.useRef)(null);
-  const msgCount = (0, import_react3.useRef)(0);
-  if (messages.length > msgCount.current) {
-    for (let i = msgCount.current; i < messages.length; i++) {
-      if (!timestamps.has(i)) timestamps.set(i, /* @__PURE__ */ new Date());
-    }
-    msgCount.current = messages.length;
+  const prevLen = (0, import_react3.useRef)(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;
   }
   (0, import_react3.useEffect)(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, isLoading]);
   (0, import_react3.useEffect)(() => {
-    if (isOpen) setTimeout(() => inputRef.current?.focus(), 100);
-  }, [isOpen]);
-  const handleSend = (0, import_react3.useCallback)(() => {
-    const text = input.trim();
-    if (!text || isLoading) return;
+    if (open) setTimeout(() => inputRef.current?.focus(), 120);
+  }, [open]);
+  const send = (0, import_react3.useCallback)(() => {
+    const t = input.trim();
+    if (!t || isLoading) return;
     setInput("");
-    sendMessage(text);
+    sendMessage(t);
   }, [input, isLoading, sendMessage]);
-  const handleKeyDown = (e) => {
+  const onKey = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleSend();
+      send();
     }
   };
-  const showSuggestions = messages.length === 0 && suggestions.length > 0;
-  const panel = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-    ...s.panel,
-    ...mode === "inline" ? s.panelInline : {},
+  const noMsgs = messages.length === 0;
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime2.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
-  }, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
-        @keyframes sa-bounce {
-          0%,80%,100% { transform: translateY(0); opacity:0.4 }
-          40% { transform: translateY(-5px); opacity:1 }
-        }
-        @keyframes sa-fadein {
-          from { opacity:0; transform:translateY(6px) }
-          to   { opacity:1; transform:translateY(0) }
-        }
-        .sa-msg-wrap { animation: sa-fadein 0.2s ease }
-        .sa-input:focus { outline:none; border-color:${accentColor} !important; box-shadow:0 0 0 3px ${accentColor}22 !important }
-        .sa-send:hover:not(:disabled) { opacity:0.88; transform:scale(1.04) }
-        .sa-send:disabled { opacity:0.4; cursor:not-allowed }
-        .sa-fab-btn:hover { transform:scale(1.08) }
-      ` }),
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: GLOBAL_CSS(accentColor) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-      padding: "14px 16px",
-      background: `linear-gradient(135deg, ${accentColor}, ${adjustColor(accentColor, -30)})`,
+      padding: "13px 16px",
+      background: `linear-gradient(135deg,${accentColor},${adj(accentColor, -28)})`,
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      flexShrink: 0
+      flexShrink: 0,
+      boxShadow: "0 2px 12px rgba(0,0,0,.12)"
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-          width: 34,
-          height: 34,
+          width: 36,
+          height: 36,
           borderRadius: "50%",
-          background: "rgba(255,255,255,0.2)",
+          background: "rgba(255,255,255,.18)",
+          backdropFilter: "blur(8px)",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: 16
+          fontSize: 17,
+          boxShadow: "0 2px 8px rgba(0,0,0,.15)"
         }, children: "\u2726" }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "white", fontWeight: 700, fontSize: 14, lineHeight: 1.2 }, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "rgba(255,255,255,0.75)", fontSize: 11 }, children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "white", fontWeight: 700, fontSize: 14, lineHeight: 1.2, letterSpacing: "-0.01em" }, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "rgba(255,255,255,.72)", fontSize: 11, marginTop: 1 }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { animation: "sa-pulse 1.2s infinite" }, children: "\u25CF Thinking..." }) : subtitle })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 4 }, children: [
-        messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: reset, title: "Clear chat", style: {
-          background: "rgba(255,255,255,0.15)",
+        messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: reset, style: {
+          background: "rgba(255,255,255,.15)",
           border: "none",
           color: "white",
           cursor: "pointer",
-          borderRadius: 6,
-          padding: "4px 8px",
-          fontSize: 11
+          borderRadius: 7,
+          padding: "4px 9px",
+          fontSize: 11,
+          fontWeight: 500,
+          backdropFilter: "blur(4px)"
         }, children: "Clear" }),
-        mode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setIsOpen(false), style: {
-          background: "rgba(255,255,255,0.15)",
+        mode === "floating" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setOpen(false), style: {
+          background: "rgba(255,255,255,.15)",
           border: "none",
           color: "white",
           cursor: "pointer",
-          borderRadius: 6,
-          padding: "4px 8px",
-          fontSize: 16,
-          lineHeight: 1
+          borderRadius: 7,
+          padding: "4px 9px",
+          fontSize: 18,
+          lineHeight: 1,
+          backdropFilter: "blur(4px)"
         }, children: "\xD7" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: s.messages, children: [
-      messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: s.welcome, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "32px 20px",
+        textAlign: "center"
+      }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-          width: 48,
-          height: 48,
+          width: 56,
+          height: 56,
           borderRadius: "50%",
-          margin: "0 auto 12px",
-          background: `linear-gradient(135deg, ${accentColor}22, ${accentColor}44)`,
+          marginBottom: 14,
+          background: `linear-gradient(135deg,${accentColor}18,${accentColor}35)`,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: 22
+          fontSize: 24,
+          boxShadow: `0 4px 20px ${accentColor}22`
         }, children: "\u2726" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: 14, color: "#64748b", lineHeight: 1.6, maxWidth: 260, margin: "0 auto" }, children: welcomeMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: 14, color: "#64748b", lineHeight: 1.65, maxWidth: 260, margin: 0 }, children: welcomeMessage })
       ] }),
-      messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sa-msg-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        MessageBubble,
+      messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Bubble,
         {
           role: msg.role,
           content: msg.content,
-          isStreaming: isLoading && i === messages.length - 1 && msg.role === "assistant",
-          accentColor,
-          timestamp: timestamps.get(i) ?? /* @__PURE__ */ new Date()
-        }
-      ) }, i)),
+          streaming: isLoading && i === messages.length - 1 && msg.role === "assistant",
+          accent: accentColor,
+          time: ts.get(i) ?? /* @__PURE__ */ new Date()
+        },
+        i
+      )),
       error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
         padding: "10px 14px",
         borderRadius: 10,
@@ -376,52 +443,61 @@ function ChatInner({
         background: "#fef2f2",
         color: "#dc2626",
         border: "1px solid #fecaca",
-        alignSelf: "flex-start"
+        alignSelf: "flex-start",
+        display: "flex",
+        alignItems: "center",
+        gap: 6
       }, children: [
-        "\u26A0\uFE0F ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("div", { ref: messagesEndRef })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: endRef })
     ] }),
-    showSuggestions && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Suggestions,
-      {
-        items: suggestions,
-        onSelect: (s2) => {
-          setInput(s2);
-          inputRef.current?.focus();
-        },
-        accentColor
-      }
-    ),
+    noMsgs && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chips, { items: suggestions, onPick: (s) => {
+      setInput(s);
+      inputRef.current?.focus();
+    }, accent: accentColor }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-      padding: "10px 12px",
-      borderTop: "1px solid #f1f5f9",
-      background: "#fff",
+      padding: "10px 12px 12px",
+      borderTop: "1px solid #e8edf3",
+      background: "#ffffff",
       flexShrink: 0
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
         display: "flex",
         gap: 8,
         alignItems: "flex-end",
-        background: "#f8fafc",
-        borderRadius: 12,
-        border: "1px solid #e2e8f0",
-        padding: "6px 6px 6px 12px",
-        transition: "border-color 0.15s, box-shadow 0.15s"
+        background: "#f1f5f9",
+        borderRadius: 14,
+        border: "1.5px solid #e2e8f0",
+        padding: "8px 8px 8px 14px",
+        transition: "border-color .15s, box-shadow .15s"
       }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "textarea",
           {
             ref: inputRef,
-            className: "sa-input",
             value: input,
             onChange: (e) => {
               setInput(e.target.value);
               e.target.style.height = "auto";
-              e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
+              e.target.style.height = Math.min(e.target.scrollHeight, 130) + "px";
+            },
+            onKeyDown: onKey,
+            onFocus: (e) => {
+              const p = e.target.parentElement;
+              if (p) {
+                p.style.borderColor = accentColor;
+                p.style.boxShadow = `0 0 0 3px ${accentColor}1a`;
+              }
+            },
+            onBlur: (e) => {
+              const p = e.target.parentElement;
+              if (p) {
+                p.style.borderColor = "#e2e8f0";
+                p.style.boxShadow = "none";
+              }
             },
-            onKeyDown: handleKeyDown,
             placeholder,
             disabled: isLoading,
             rows: 1,
@@ -431,161 +507,117 @@ function ChatInner({
               border: "none",
               resize: "none",
               fontSize: 13.5,
-              lineHeight: 1.5,
+              lineHeight: 1.55,
               color: "#1e293b",
               fontFamily: "inherit",
               padding: 0,
-              maxHeight: 120,
+              maxHeight: 130,
               outline: "none"
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 4, alignItems: "flex-end", flexShrink: 0 }, children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: stop, title: "Stop", style: {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 5, alignItems: "flex-end", flexShrink: 0 }, children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { onClick: stop, style: {
             background: "#fef2f2",
             border: "1px solid #fecaca",
             color: "#dc2626",
-            borderRadius: 8,
-            padding: "6px 10px",
+            borderRadius: 9,
+            padding: "6px 11px",
             cursor: "pointer",
-            fontSize: 12,
-            fontWeight: 600
-          }, children: "\u25A0 Stop" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              className: "sa-send",
-              onClick: handleSend,
-              disabled: isLoading || !input.trim(),
-              style: {
-                width: 34,
-                height: 34,
-                borderRadius: 8,
-                border: "none",
-                background: input.trim() && !isLoading ? accentColor : "#e2e8f0",
-                color: input.trim() && !isLoading ? "white" : "#94a3b8",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                transition: "all 0.15s",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
-            }
-          )
+            fontSize: 11.5,
+            fontWeight: 600,
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "4", y: "4", width: "16", height: "16" }) }),
+            "Stop"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "center", marginTop: 6, fontSize: 10, color: "#cbd5e1" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "center", marginTop: 7, fontSize: 10, color: "#c4cdd8", letterSpacing: ".01em" }, children: [
         "Powered by ",
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: accentColor, fontWeight: 600 }, children: "SyncAgent" }),
-        " \xB7 Enter to send \xB7 Shift+Enter for new line"
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { margin: "0 5px", opacity: 0.5 }, children: "\xB7" }),
+        "Enter to send \xB7 Shift+Enter for new line"
       ] })
     ] })
   ] });
   if (mode === "inline") return panel;
-  const isLeft = position === "bottom-left";
+  const left = position === "bottom-left";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sa-panel-float", style: {
       position: "fixed",
-      bottom: 88,
+      bottom: 84,
       zIndex: 99998,
-      ...isLeft ? { left: 20 } : { right: 20 },
-      width: 420,
-      maxWidth: "calc(100vw - 40px)",
-      transition: "opacity 0.25s, transform 0.25s",
-      opacity: isOpen ? 1 : 0,
-      transform: isOpen ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)",
-      pointerEvents: isOpen ? "auto" : "none"
+      ...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__ */ (0, import_jsx_runtime2.jsxs)(
-      "button",
-      {
-        className: "sa-fab-btn",
-        onClick: () => setIsOpen(!isOpen),
-        style: {
-          position: "fixed",
-          bottom: 20,
-          zIndex: 99999,
-          ...isLeft ? { left: 20 } : { right: 20 },
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          border: "none",
-          background: `linear-gradient(135deg, ${accentColor}, ${adjustColor(accentColor, -30)})`,
-          cursor: "pointer",
-          boxShadow: `0 4px 20px ${accentColor}55, 0 2px 8px rgba(0,0,0,0.15)`,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          transition: "transform 0.2s, box-shadow 0.2s"
-        },
-        children: [
-          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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" }) }),
-          !isOpen && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-            position: "absolute",
-            top: 2,
-            right: 2,
-            width: 12,
-            height: 12,
-            borderRadius: "50%",
-            background: "#ef4444",
-            border: "2px solid white"
-          } })
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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"
+      } })
+    ] })
   ] });
 }
-var s = {
-  panel: {
-    height: 580,
-    maxHeight: "calc(100vh - 110px)",
-    background: "#ffffff",
-    borderRadius: 18,
-    boxShadow: "0 20px 60px rgba(0,0,0,0.15), 0 4px 20px rgba(0,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,0.06)"
-  },
-  panelInline: {
-    height: "100%",
-    maxHeight: "none",
-    borderRadius: 14,
-    boxShadow: "0 2px 16px rgba(0,0,0,0.08)"
-  },
-  messages: {
-    flex: 1,
-    overflowY: "auto",
-    padding: "16px 16px 8px",
-    display: "flex",
-    flexDirection: "column",
-    gap: 14,
-    scrollbarWidth: "thin"
-  },
-  welcome: {
-    textAlign: "center",
-    padding: "32px 20px",
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-};
-function adjustColor(hex, amount) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = Math.min(255, Math.max(0, (num >> 16 & 255) + amount));
-  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
-  const b = Math.min(255, Math.max(0, (num & 255) + amount));
+function adj(hex, amt) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, (n >> 16 & 255) + amt));
+  const g = Math.min(255, Math.max(0, (n >> 8 & 255) + amt));
+  const b = Math.min(255, Math.max(0, (n & 255) + amt));
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 function SyncAgentChat({ config, ...props }) {
-  if (config) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SyncAgentProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatInner, { ...props }) });
-  }
+  if (config) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SyncAgentProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatInner, { ...props }) });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatInner, { ...props });
 }