@sonordev/site-kit 6.1.1 → 6.1.3

package/dist/{chunk-QYRJ4IQD.js → chunk-OZTVJSFX.js}

@@ -3,8 +3,9 @@
 
 var chunkESP5RMB7_js = require('./chunk-ESP5RMB7.js');
 var chunkNBOBOYMT_js = require('./chunk-NBOBOYMT.js');
-var chunkWWJQGMMN_js = require('./chunk-WWJQGMMN.js');
-var chunkVNJTU6LG_js = require('./chunk-VNJTU6LG.js');
+var chunk2SLA2LOD_js = require('./chunk-2SLA2LOD.js');
+var chunkM2N7NY3V_js = require('./chunk-M2N7NY3V.js');
+var chunkIWHAJBYL_js = require('./chunk-IWHAJBYL.js');
 var react = require('react');
 var ReactMarkdown = require('react-markdown');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,6 +14,58 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 
+// src/engage/brand-color.ts
+var TEXT_CONTRAST = 4.5;
+var RESTING_TINT = 0.082;
+var UNREADABLE_BRAND_SHARE = 40;
+var WHITE = { r: 255, g: 255, b: 255 };
+var BLACK = { r: 0, g: 0, b: 0 };
+function mix(a, b, share) {
+  return {
+    r: a.r * share + b.r * (1 - share),
+    g: a.g * share + b.g * (1 - share),
+    b: a.b * share + b.b * (1 - share)
+  };
+}
+function round({ r, g, b }) {
+  const c = (v) => Math.round(Math.min(255, Math.max(0, v)));
+  return { r: c(r), g: c(g), b: c(b) };
+}
+function toHex(rgb) {
+  const { r, g, b } = round(rgb);
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+function isLightColor(color) {
+  const rgb = chunkM2N7NY3V_js.parseColor(color);
+  if (!rgb) return false;
+  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3 > 160;
+}
+function onBrandColor(brand) {
+  return isLightColor(brand) ? "#1a1a1a" : "white";
+}
+function rgbTriplet(color, fallback = "37, 99, 235") {
+  const rgb = chunkM2N7NY3V_js.parseColor(color);
+  if (!rgb) return fallback;
+  const { r, g, b } = round(rgb);
+  return `${r}, ${g}, ${b}`;
+}
+function brandTextColor(brand, panelTint) {
+  const tint = panelTint && chunkM2N7NY3V_js.parseColor(panelTint) || WHITE;
+  const pole = chunkM2N7NY3V_js.relativeLuminance(tint) < chunkM2N7NY3V_js.DARK_LUMINANCE ? WHITE : BLACK;
+  const rgb = chunkM2N7NY3V_js.parseColor(brand);
+  if (!rgb) return `color-mix(in srgb, ${brand} ${UNREADABLE_BRAND_SHARE}%, ${toHex(pole)})`;
+  const surface = chunkM2N7NY3V_js.relativeLuminance(mix(rgb, tint, RESTING_TINT));
+  const reads = (c) => chunkM2N7NY3V_js.contrastRatio(chunkM2N7NY3V_js.relativeLuminance(c), surface) >= TEXT_CONTRAST;
+  if (reads(rgb)) return brand;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 12; i++) {
+    const share = (lo + hi) / 2;
+    if (reads(round(mix(rgb, pole, share)))) lo = share;
+    else hi = share;
+  }
+  return toHex(mix(rgb, pole, lo));
+}
 function alpha(rgb, a) {
   return `rgba(var(--sk-primary-rgb, ${rgb}), ${a})`;
 }
@@ -39,7 +92,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     submit,
     isSubmitting,
     isComplete
-  } = chunkWWJQGMMN_js.useForm(slug, { initialValues: prefill || {} });
+  } = chunk2SLA2LOD_js.useForm(slug, { initialValues: prefill || {} });
   const cardStyle = {
     marginTop: 8,
     padding: 12,
@@ -198,7 +251,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
               borderRadius: 8,
               border: "none",
               backgroundColor: primaryColor,
-              color: "#fff",
+              color: onBrandColor(primaryColor),
               fontSize: 13.5,
               fontWeight: 600,
               cursor: isSubmitting ? "default" : "pointer",
@@ -211,7 +264,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     }
   );
 }
-function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSuggest }) {
+function SuggestActionChip({ action, message, primaryColor, primaryRgb, brandText, onSuggest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -222,7 +275,7 @@ function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSugges
         borderRadius: 16,
         border: `1px solid ${primaryColor}`,
         backgroundColor: alpha(primaryRgb, 0.063),
-        color: primaryColor,
+        color: brandText,
         fontSize: 13,
         cursor: "pointer"
       },
@@ -230,7 +283,7 @@ function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSugges
     }
   );
 }
-function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
+function EchoUiActions({ actions, primaryColor, primaryRgb, brandText, onSuggest }) {
   if (!actions?.length) return null;
   const chips = actions.filter((a) => a?.type === "suggest_action");
   const forms = actions.filter((a) => a?.type === "show_form");
@@ -262,6 +315,7 @@ function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
           message: label,
           primaryColor,
           primaryRgb,
+          brandText,
           onSuggest
         },
         `chip-${i}`
@@ -315,21 +369,9 @@ var ECHO_CSS = `
   [data-sk-echo-panel] { animation: none !important; }
 }
 `;
-function isLightColor(hex) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = num >> 16;
-  const g = num >> 8 & 255;
-  const b = num & 255;
-  return (r * 299 + g * 587 + b * 114) / 1e3 > 160;
-}
 function staticPrimaryColor(apiFallback, hardDefault) {
   return apiFallback || hardDefault;
 }
-function hexToRgbString(hex, fallback = "37, 99, 235") {
-  const match = hex.replace("#", "").match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (!match) return fallback;
-  return `${parseInt(match[1], 16)}, ${parseInt(match[2], 16)}, ${parseInt(match[3], 16)}`;
-}
 function hexAlpha(rgbVar, alpha2, fallbackRgb = "37, 99, 235") {
   return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha2})`;
 }
@@ -382,11 +424,19 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const primaryFallback = staticPrimaryColor(widgetConfig?.brand_primary || config?.buttonColor, "#2563eb");
   const [primaryFromCssVar, setPrimaryFromCssVar] = react.useState(null);
   const primaryColor = primaryFromCssVar ?? primaryFallback;
-  const primaryRgb = hexToRgbString(primaryColor);
+  const primaryRgb = rgbTriplet(primaryColor);
   react.useEffect(() => {
     const cssValue = getComputedStyle(document.documentElement).getPropertyValue("--sk-primary").trim();
     setPrimaryFromCssVar(cssValue || null);
   }, []);
+  const onBrand = onBrandColor(primaryColor);
+  const panelRef = react.useRef(null);
+  const [panelTint, setPanelTint] = react.useState(null);
+  react.useLayoutEffect(() => {
+    if (!isOpen || !panelRef.current) return;
+    setPanelTint(getComputedStyle(panelRef.current).getPropertyValue("--sk-glass-t").trim() || null);
+  }, [isOpen]);
+  const brandText = brandTextColor(primaryColor, panelTint);
   const businessName = propAssistantName || widgetConfig?.project_name || widgetConfig?.business_info?.name || "Chat with us";
   const logoUrl = propAssistantAvatar || widgetConfig?.logo_url || null;
   const welcomeEnabled = widgetConfig?.welcome_screen_enabled !== false;
@@ -402,7 +452,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const { apiKey } = getApiConfig();
     if (!apiKey) return;
     let cancelled = false;
-    chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/api/public/seo/project-info`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((data) => {
+    chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/api/public/seo/project-info`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((data) => {
       if (cancelled || !data?.valid || !data?.project_id) return;
       setResolvedProjectId(data.project_id);
     }).catch(() => {
@@ -416,7 +466,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return;
     try {
-      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 });
+      const response = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 });
       if (response.ok) {
         const { data } = await response.json();
         setWidgetConfig(data ?? null);
@@ -432,7 +482,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return null;
     try {
-      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
+      const response = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
       if (response.ok) {
         const { data } = await response.json();
         setAvailability(data);
@@ -449,7 +499,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     const apiKey = ensureApiKey();
     if (!apiKey) return null;
     try {
-      const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/session`, {
+      const response = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/session`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -510,7 +560,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         pageUrl: typeof window !== "undefined" ? window.location.href : void 0,
         ...siteContext ? { siteContext } : {}
       };
-      const res = await chunkVNJTU6LG_js.sonorFetch(url, {
+      const res = await chunkIWHAJBYL_js.sonorFetch(url, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -621,7 +671,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         if (currentSessionId) {
           const apiKey = ensureApiKey();
           if (apiKey) {
-            chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
+            chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
               const data = json?.data ?? json;
               if (Array.isArray(data) && data.length) {
                 setMessages((prev) => {
@@ -684,7 +734,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         try {
           const apiKey = ensureApiKey();
           if (!apiKey) return;
-          const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
+          const response = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
           if (response.ok) {
             const { data } = await response.json();
             setMessages((prev) => {
@@ -837,7 +887,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       form.append("file", file);
       form.append("sessionId", sessionId);
       form.append("visitorId", visitorId);
-      const res = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/upload`, {
+      const res = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/upload`, {
         method: "POST",
         body: form
       }, { apiKey, retries: 0 });
@@ -984,7 +1034,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (!apiKey) return;
     setCheckingHandoff(true);
     try {
-      const res = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/handoff`, {
+      const res = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/handoff`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ sessionId })
@@ -1023,7 +1073,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       setIsLoading(true);
       setOfflineError(null);
       try {
-        const response = await chunkVNJTU6LG_js.sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
+        const response = await chunkIWHAJBYL_js.sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -1072,7 +1122,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
     return { dot: "var(--sk-text-tertiary, #9ca3af)", text: "We'll respond soon" };
   })();
-  const launcherIcon = isLightColor(primaryColor) ? "#1a1a1a" : "white";
   const ChatButton = /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1101,10 +1150,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       onMouseLeave: (e) => {
         e.currentTarget.style.transform = "scale(1)";
       },
-      children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
     }
   );
   const Header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1128,7 +1177,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               height: 40,
               borderRadius: "50%",
               backgroundColor: primaryColor,
-              color: launcherIcon,
+              color: onBrand,
               boxShadow: "inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12)",
               display: "flex",
               alignItems: "center",
@@ -1165,7 +1214,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 12,
           border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}`,
           backgroundColor: hexAlpha("--sk-primary-rgb", 0.031, primaryRgb),
-          color: primaryColor,
+          color: brandText,
           fontSize: 14,
           cursor: "pointer",
           textAlign: "left",
@@ -1194,7 +1243,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 12,
           border: "none",
           backgroundColor: primaryColor,
-          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          color: onBrand,
           fontSize: 14,
           fontWeight: 600,
           cursor: "pointer",
@@ -1206,11 +1255,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "var(--sk-text-secondary, #6b7280)" }, children: [
       "Or call us at",
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: primaryColor, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: brandText, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
     ] })
   ] });
   const OfflineFormView = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb), display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb), display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: brandText, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "var(--sk-text-primary, #111827)" }, children: "Message Sent!" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleOfflineSubmit, children: [
@@ -1257,7 +1306,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 8,
           border: "none",
           backgroundColor: primaryColor,
-          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          color: onBrand,
           fontSize: 14,
           fontWeight: 600,
           cursor: isLoading ? "wait" : "pointer",
@@ -1305,7 +1354,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: isLightColor(primaryColor) ? "#1a1a1a" : "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
             /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
             /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
             /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
@@ -1354,7 +1403,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                   // Bubbles on glass stay near-opaque: the glass behind them
                   // is for depth, never for the text to read against.
                   backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "color-mix(in srgb, var(--sk-text-primary, #111827) 7%, transparent)" : BUBBLE_BG,
-                  color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
+                  color: message.role === "user" ? onBrand : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
                   border: message.role === "user" || message.role === "system" ? "none" : HAIRLINE,
                   boxShadow: message.role === "system" ? "none" : message.role === "user" ? "inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), 0 1px 2px rgba(0,0,0,0.10)" : "0 1px 2px rgba(0,0,0,0.06)",
                   fontSize: message.role === "system" ? 13 : 14,
@@ -1390,7 +1439,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                               padding: "8px 14px",
                               borderRadius: 8,
                               backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
-                              color: primaryColor,
+                              color: brandText,
                               fontWeight: 600,
                               fontSize: 13,
                               textDecoration: "none",
@@ -1436,7 +1485,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                         borderRadius: 16,
                         border: `1px solid ${primaryColor}`,
                         backgroundColor: hexAlpha("--sk-primary-rgb", 0.063, primaryRgb),
-                        color: primaryColor,
+                        color: brandText,
                         fontSize: 13,
                         cursor: "pointer"
                       },
@@ -1450,6 +1499,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                       actions: message.uiActions,
                       primaryColor,
                       primaryRgb,
+                      brandText,
                       onSuggest: handleSuggestAction
                     }
                   ) : null,
@@ -1473,7 +1523,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                         borderRadius: 6,
                         border: `1px solid ${primaryColor}`,
                         backgroundColor: "transparent",
-                        color: primaryColor,
+                        color: brandText,
                         fontSize: 13,
                         cursor: "pointer"
                       },
@@ -1555,7 +1605,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             borderRadius: "50%",
             border: "none",
             backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "var(--sk-border, #e5e7eb)",
-            color: (inputValue.trim() || pendingFiles.length) && !isLoading && isLightColor(primaryColor) ? "#1a1a1a" : "white",
+            color: (inputValue.trim() || pendingFiles.length) && !isLoading ? onBrand : "white",
             cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
             display: "flex",
             alignItems: "center",
@@ -1571,6 +1621,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const ChatPopup = isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: panelRef,
       "data-sk-echo-panel": true,
       className: "sk-glass sk-glass--panel",
       style: {
@@ -1634,5 +1685,5 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
 }
 
 exports.ChatWidget = ChatWidget;
-//# sourceMappingURL=chunk-QYRJ4IQD.js.map
-//# sourceMappingURL=chunk-QYRJ4IQD.js.map
+//# sourceMappingURL=chunk-OZTVJSFX.js.map
+//# sourceMappingURL=chunk-OZTVJSFX.js.map