@agentforge-io/chat-sdk 2.0.1 → 2.0.3

package/dist/react.js

@@ -26,6 +26,30 @@ const session_1 = require("./session");
 // headings, lists, blockquotes, fenced code, inline code, links, bold,
 // italic. Input is HTML-escaped first so the resulting markup is safe to
 // drop into dangerouslySetInnerHTML.
+/**
+ * Convert a CSS color to `rgba(...)` with the given alpha. Accepts 3/4/6/8-hex
+ * (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`) and also tolerates already-rgba/rgb
+ * inputs by returning them verbatim — those have their own alpha story and
+ * shouldn't be silently overwritten.
+ */
+function hexToRgba(color, alpha) {
+    const trimmed = color.trim();
+    if (trimmed.startsWith('rgb'))
+        return trimmed;
+    const m = trimmed.match(/^#?([0-9a-fA-F]{3,8})$/);
+    if (!m)
+        return `rgba(124, 92, 255, ${alpha})`;
+    let h = m[1];
+    if (h.length === 3 || h.length === 4) {
+        h = h.split('').map((c) => c + c).join('');
+    }
+    if (h.length !== 6 && h.length !== 8)
+        return `rgba(124, 92, 255, ${alpha})`;
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
 function escapeHtml(s) {
     return s.replace(/[&<>"']/g, (c) => c === '&'
         ? '&amp;'
@@ -240,9 +264,16 @@ function ChatWidget(props) {
         .join(' ');
     const rootStyle = {
         ...style,
-        // Surface the theme primary color so the bubble + accents follow it.
+        // Surface the theme primary color so the bubble, header, focus rings,
+        // and send button all follow it. We derive a soft variant for shadows
+        // and a "header" variant (same color, used in lieu of the default slate
+        // header background) so branding actually reads at a glance.
         ...(theme?.primaryColor
-            ? { ['--af-primary']: theme.primaryColor }
+            ? {
+                ['--af-primary']: theme.primaryColor,
+                ['--af-primary-soft']: hexToRgba(theme.primaryColor, 0.35),
+                ['--af-header-bg']: theme.primaryColor,
+            }
             : {}),
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: rootClass, style: rootStyle, "data-style-id": styleId, children: [!inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-toggle", "aria-label": open ? 'Close chat' : 'Open chat', "aria-expanded": open, onClick: () => setOpen((v) => !v), children: open ? (0, jsx_runtime_1.jsx)(CloseIcon, {}) : (0, jsx_runtime_1.jsx)(ChatIcon, {}) })), (0, jsx_runtime_1.jsxs)("div", { className: `af-panel ${open ? 'af-open' : ''}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "af-header", children: [theme?.avatarUrl ? (
@@ -315,7 +346,7 @@ const WIDGET_CSS = `
 .af-widget-root.af-pos-top-left     .af-panel { left: 0; }
 .af-widget-root.af-inline .af-panel { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; height: 540px; box-shadow: 0 1px 3px rgba(15,23,42,0.08); display: flex; }
 .af-panel.af-open { display: flex; }
-.af-header { padding: 14px 16px; background: var(--af-fg); color: white; display: flex; align-items: center; gap: 10px; }
+.af-header { padding: 14px 16px; background: var(--af-header-bg, var(--af-fg)); color: white; display: flex; align-items: center; gap: 10px; }
 .af-header-info { flex: 1; min-width: 0; }
 .af-header-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.1); }
 .af-header-title { font-weight: 600; font-size: 14px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",